open-index/open-npm huggingface dataset:
npm package: @moretime/util
Description: ```bash pnpm add @moretime/util -S npm install @moretime/util -S yarn add @moretime/util -S
Author: moretime
Latest version: 3.5.1768

# 闲暇·TypeScript工具包

## 安装
```bash
pnpm add @moretime/util -S
npm install @moretime/util -S
yarn add @moretime/util -S

```

## 使用
尽量避免使用全局变量，尽量使用模块化，避免全局污染

```
import { copyText } from '@moretime/util/browser'

copyText('hello world');
```

## License

MIT
npm package: @morev/bem-classnames
Description: Simple utility for generating classnames according to the BEM methodology.
Author: Maxim Morev
Latest version: 1.1.2

![Promo image of @morev/bem-classnames package](./.github/images/banner.svg)

![Stability of "master" branch](https://img.shields.io/github/actions/workflow/status/MorevM/bem-classnames/build.yaml?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![Last commit](https://img.shields.io/github/last-commit/morevm/bem-classnames)
![Release version](https://img.shields.io/github/v/release/morevm/bem-classnames?include_prereleases)
![GitHub Release Date](https://img.shields.io/github/release-date/morevm/bem-classnames)
![Keywords](https://img.shields.io/github/package-json/keywords/morevm/bem-classnames)

# @morev/bem-classnames

Simple utility for generating classnames according to the [BEM methodology](https://en.bem.info/methodology/).

---

> **IMPORTANT:** The library is not transpiled.
>
> By keep transpiling libraries we push web backward with legacy code which is unneeded for most of the users.
>
> If you need to support legacy users, you can optionally transpile the library in your build pipeline.

---

## Installation

### Using `npm`:

```bash
npm install @morev/bem-classnames
```

### Using `yarn`:

```bash
yarn add @morev/bem-classnames
```

## Usage

Module exports a BEM classnames factory that allows flexibly customize the syntax.

Recommended usage is create and export your own `bem-factory` with options suitable for you and next use it to keep classnames consistent.
With this usage you can make module to work with any BEM-like alternative syntax.

### bem-factory.js

```js
import { bemClassnames } from '@morev/bem-classnames';

// Default options
export const bemFactory = bemClassnames({
  hyphenate: true,
  namespace: '',
  delimiters: {
    element: '__',
    modifier: '_',
    modifierValue: '_',
  },
});
```

Next, import this factory into your component, declare the `block` name and the function call will transform JS declarations into classnames:

### block.js

```js
import { bemFactory } from 'bem-factory.js';
const b = bemFactory('block');

b();
// block

b({ active: true })
// block block_active

b({ active: true, iterator: 1 })
// block block_active block_iterator_1

b({ active: true }, 'static', 'is-pinned')
// block block_active static is-pinned

b('element');
// block__element

b('element', { static: true });
// block__element block__element_static

b('element', 'static');
// block__element static
```

## Resource links

[BEM methodology](https://en.bem.info/methodology/)
npm package: @morev/boilerplater
Description: Boilerplate files generator
Author: Maxim Morev
Latest version: 0.0.2

# @morev/boilerplater

![Stability of "master" branch](https://img.shields.io/github/workflow/status/MorevM/boilerplater/Build/master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![Last commit](https://img.shields.io/github/last-commit/morevm/boilerplater)
![Release version](https://img.shields.io/github/v/release/morevm/boilerplater?include_prereleases)
![GitHub Release Date](https://img.shields.io/github/release-date/morevm/boilerplater)
![Keywords](https://img.shields.io/github/package-json/keywords/morevm/boilerplater)

Script for template files generation. For personal needs.

If you are looking for such functionality, take a look on
[generate-template-files](https://www.npmjs.com/package/generate-template-files) package. \
It does the same thing (well, slightly different), but documented and tested better.
npm package: @morev/more-bem-classnames
Description: Simple utility for generating classnames according to the BEM methodology.
Author: Maxim Morev
Latest version: 2.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# bem-classnames

Simple utility for generating classnames according to the BEM methodology.

## Installation

Using `npm`:

```bash
npm install @morev/more-bem-classnames
```

Using `yarn`:

```bash
yarn add @morev/more-bem-classnames
```

## Usage

Module exports a BEM classnames factory that allows flexibly customize the syntax.

Recommended usage is create and export your own `bem-factory` with options suitable for you and next use it to keep classnames consistent. 
With this usage you can make module to work with any BEM-like alternative syntax.

**bem-factory.js**
```js
import bemClassnames from '@morev/more-bem-classnames';

// Default options
export default bemClassnames({
  hyphenate: true,
  namespace: '',
  delimiters: {
    element: '__',
    modifier: '_',
    modifierValue: '_',
  },
});
```

Next, import this factory into your component, declare the `block` name and the function call will transform JS declarations into classnames:

**block.js**
```js
import bemFactory from 'bem-factory.js';
const b = bemFactory('block');

b();
// block

b({ active: true }) 
// block block_active

b({ active: true, iterator: 1 }) 
// block block_active block_iterator_1

b({ active: true }, 'static', 'is-pinned')
// block block_active static is-pinned

b('element');
// block__element

b('element', { static: true });
// block__element block__element_static

b('element', 'static');
// block__element static
```

## Resource links
[BEM methodology](https://en.bem.info/methodology/)
npm package: @morev/more-log
Description: Stunningly dumb module for better terminal output
Author: Maxim Morev
Latest version: 1.0.0

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

# more-log

Stunningly dumb module for better terminal output.

## Installation

Using `npm`:

```bash
npm install @morev/more-log
```

Using `yarn`:

```bash
yarn add @morev/more-log
```

## Usage

ESM
```js
import log from '@morev/more-log';

log.success('Wow! It really works.')
```

CommonJS
```js
const log = require('@morev/more-log');

log.block.success('Also works this way');
```

## Examples of styled messages

![Examples of styled messages](.github/examples.png)
npm package: @morev/stylelint-config
Description: Strict shareable Stylelint configuration
Author: Maxim Morev
Latest version: 8.0.2

![Promo image of @morev/stylelint-config package](./.github/images/banner.svg)

![Stability of "master" branch](https://img.shields.io/github/actions/workflow/status/MorevM/stylelint-config/build.yaml?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![Last commit](https://img.shields.io/github/last-commit/morevm/stylelint-config)
![Release version](https://img.shields.io/github/v/release/morevm/stylelint-config?include_prereleases)
![GitHub Release Date](https://img.shields.io/github/release-date/morevm/stylelint-config)
![Keywords](https://img.shields.io/github/package-json/keywords/morevm/stylelint-config)

# @morev/stylelint-config

Strict shareable Stylelint configuration with reasonable defaults.

✔️ 200+ configured rules of Stylelint and its plugins; \
✔️ 70+ extra rules for SCSS; \
✔️ Consistent order of properties and rules according to BEM methodology.

---

## Installation

### Using `yarn`

```bash
yarn add stylelint @morev/stylelint-config --dev
```

### Using `npm`

```bash
npm install -D stylelint @morev/stylelint-config
```

### Using `pnpm`

```bash
pnpm add -d stylelint @morev/stylelint-config
```

## Usage

Create a [Stylelint configuration file](https://stylelint.io/user-guide/configure/)
(`.stylelintrc.js` for the following instruction) in the package root with the following content:

> Note: the following instruction assumes that the package is written in ESM.
>
> For projects written in CommonJS (that doesn't have `"type": "module"` within its `package.json`)
> you need to specify `.cjs` extension for configuration file and use `module.exports` instead of `export default`.
>
> Alternatively you can use a configuration file defined in YAML or JSON format, but it's less extensible.

### SCSS repository (default)

```js
/** @type {import('stylelint').Config} */
export default {
  extends: [
    '@morev/stylelint-config',
  ],
  rules: {},
}
```

### CSS repository

```js
/** @type {import('stylelint').Config} */
export default {
  extends: [
    '@morev/stylelint-config/css',
  ],
  rules: {},
}
```

### Mixed (for some reason O_o) repository

```js
/** @type {import('stylelint').Config} */
export default {
  overrides: [
    { files: ['*.css'], extends: ['@morev/stylelint-config/css'] }
    { files: ['*.scss'], extends: ['@morev/stylelint-config/scss'] }
  ]
}
```
npm package: @morev/stylelint-plugin
Description: Stylelint rules for BEM and SCSS best practices
Author: Maxim Morev
Latest version: 0.5.0

<img src="./.github/images/banner.svg" alt="Promotional image of @morev/stylelint-plugin package" width="830" height="465" />

[![License: MIT](https://img.shields.io/github/license/morevm/stylelint-plugin?color=%2340bb12)](https://opensource.org/licenses/MIT)
![Stability](https://img.shields.io/github/actions/workflow/status/morevm/stylelint-plugin/build.yaml?branch=master&color=%2340bb12)
[![Coverage](https://codecov.io/github/morevm/stylelint-plugin/branch/master/graph/badge.svg?token=YKSWCZUB83)](https://codecov.io/github/morevm/stylelint-plugin)
![Last commit](https://img.shields.io/github/last-commit/morevm/stylelint-plugin?color=%2340bb12)
![Release version](https://img.shields.io/github/v/release/morevm/stylelint-plugin?color=%2340bb12)
![Release Date](https://img.shields.io/github/release-date/morevm/stylelint-plugin?color=%2340bb12)

# @morev/stylelint-plugin

A collection of Stylelint rules for writing clean, maintainable (S)CSS with BEM methodology and SCSS best practices.

✔️ Enforces BEM naming conventions and structure for blocks, elements, and modifiers; \
✔️ Includes SCSS-specific rules to prevent unused variables; \
✔️ Promotes clean architecture by blocking side effects and enforcing best practices; \
✔️ Highly configurable to fit your project's style and separators; \
✔️ First-class TypeScript support, written in TS.

For more details on installation, API and more, [go to the documentation website](https://morevm.github.io/stylelint-plugin/).
npm package: @morev/stylelint-testing-library
Description: Platform agnostic solution for testing Stylelint plugins
Author: Maxim Morev
Latest version: 1.0.2

![Promo image of @morev/stylelint-testing-library package](./.github/images/banner.svg)

![Stability of "master" branch](https://img.shields.io/github/actions/workflow/status/MorevM/stylelint-testing-library/build.yaml?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![Last commit](https://img.shields.io/github/last-commit/morevm/stylelint-testing-library)
![Release version](https://img.shields.io/github/v/release/morevm/stylelint-testing-library?include_prereleases)
![GitHub Release Date](https://img.shields.io/github/release-date/morevm/stylelint-testing-library)
![Keywords](https://img.shields.io/github/package-json/keywords/morevm/stylelint-testing-library)

# @morev/stylelint-testing-library

Platform agnostic solution for testing Stylelint plugins.

✔️ Works with any popular testing platform - `vitest`, `jest`, `node:test`; \
✔️ Provides clean and configurable test output, handy and helpful error messages; \
✔️ Reduces the amount of boilerplate code due to a nice public API; \
✔️ First-class TypeScript support, written in TS.

For more details on installation, API and more, [go to the documentation website](https://morevm.github.io/stylelint-testing-library/).
npm package: @morev/utils
Description: Collection of JavaScript / TypeScript utilities
Author: Maxim Morev
Latest version: 3.15.0

![Promo image of @morev/utils package](./.github/images/banner.svg)

![Stability of "master" branch](https://img.shields.io/github/actions/workflow/status/MorevM/utils/build.yaml?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![Last commit](https://img.shields.io/github/last-commit/morevm/utils)
![Release version](https://img.shields.io/github/v/release/morevm/utils?include_prereleases)
![GitHub Release Date](https://img.shields.io/github/release-date/morevm/utils)
![Keywords](https://img.shields.io/github/package-json/keywords/morevm/utils)

# @morev/utils

100+ fully typed JavaScript utilities for everyday use. \
100+ TypeScript utility types.

---

> **IMPORTANT:** The library is not transpiled.
>
> By keep transpiling libraries we push web backward with legacy code which is unneeded for most of the users.
>
> If you need to support legacy users, you can optionally transpile the library in your build pipeline.

## Installation

```sh
# Using `yarn`
yarn add @morev/utils

# Using `npm`
npm install @morev/utils

# Using `pnpm`
pnpm add @morev/utils
```

## Usage

Just import/require needed utilities/types and use them :)

```ts
import { clamp } from '@morev/utils';
import type { ArrayOf } from '@morev/utils';

// CJS
const { arrayShuffle } = require('@morev/utils');
```

## Acknowledgments

- [fast-copy](https://github.com/planttheidea/fast-copy) for `deepClone` and `deepCloneStrict` utilities;
- [fast-equals](https://github.com/planttheidea/fast-equals) for `deepEqual` and `deepEqualCircular` utilities;
- [ohash](https://github.com/unjs/ohash) for `hash` utility;
- [type-fest](https://github.com/sindresorhus/type-fest) for many utility types.
- `object-to-formdata` utility mostly inspired by [object-to-formdata](https://github.com/therealparmesh/object-to-formdata) package,
  but public API and implementation is a bit different according to my experience and needs.
- [awaity](https://github.com/asfktz/Awaity.js) for an inspiration and initial code base of the `asyncArray` utility.
- [set-cookie-parser](https://github.com/nfriedly/set-cookie-parser/) for the basic implementation of the `parseResponseCookie` utility and tests.
- [cookie](https://github.com/jshttp/cookie) for the basic implementation of the `serializeCookie` utility and its tests.
- [compute-gcd](https://github.com/compute-io/gcd) for the implementation of the `gcd` utility and its tests.
npm package: @morev/vue-cool-lightbox
Description: A fork of pretty Vue.js component to display an image gallery lightbox inspired by fancybox with VK Video support
Author: Lucas Pulliese
Latest version: 1.3.0

<!-- eslint-disable markdownlint/md025 -->

# A slightly rewritten fork of the original package with VK Video, Boomstream and Rutube support

> The content below is unchanged except for the name of the package

# No longer maintained

Seeing that Vue 3 came out and I don't have more time to maintain it, I think it's a good time to archive it.
Thanks to the community to help me to maintain it and thanks to the ones who used it on their projects, was an awesome experience ♥️

# Vue-cool-lightbox

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by [fancybox](http://fancyapps.com/fancybox/3/) with zoom, swipe, captions and videos supported.

![Vue CoolLightbox screenshot](http://lucaspulliese.com/wp-content/themes/theme/images/screenshot-vue-cool-lightbox.jpg)

## Installation

Use npm to install vue-cool-lightbox.

```bash
npm install --save @morev/vue-cool-lightbox
```

and use the lightbox:

```javascript
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

export default {
  components: {
    CoolLightBox,
  },
}
```

## Docs

You can see the complete documentation with examples here: [https://vue-cool-lightbox.lucaspulliese.com/](https://vue-cool-lightbox.lucaspulliese.com/).

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](https://choosealicense.com/licenses/mit/)

## Donate

I am very happy with the feedback from the community and it makes me want to continue working on this component and create more, so any help is welcome.

[Donate here](http://paypal.me/lucaspdonations)
npm package: @morfeo/babel-plugin
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/babel-plugin

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

**@morfeo/babel-plugin** is a babel plugin that enables the evaluation at build time of morfeo.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

## Installation

```bash
# With npm
npm install --save-dev @morfeo/babel-plugin

# With yarn
yarn add --dev @morfeo/babel-plugin
```

Once the plugin is installed you can add it the plugins in your babel configuration:

```json
{
  "presets": ["list", "of", "your", "presets"],
  "plugins": ["list", "of", "your", "other", "plugins", "@morfeo/babel-plugin"],
}
```

:warning: Warning

> You'll probably never use _directly_ `@morfeo/babel-plugin`, instead, you'll more likely to use [@morfeo/webpack](https://github.com/morfeojs/morfeo/tree/main/packages/webpack), that  uses this package internally.
npm package: @morfeo/compiler
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/compiler

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

**@morfeo/compiler**: Morfeo's `compiler` plugin.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

## Installation

```bash
# With npm
npm install @morfeo/compiler

# With yarn
yarn add @morfeo/compiler

# With pnpm
pnpm install @morfeo/compiler
```
npm package: @morfeo/dev-tools
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/dev-tools

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

**@morfeo/dev-tools** is part of the [@morfeo](https://morfeo.dev) eco-system, a set of **framework-agnostic** tools that help you to create beautiful design systems for your web and mobile apps.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

One of the most important feature of morfeo is the [web extension](https://chrome.google.com/webstore/detail/morfeo/phhhjdmeicikchjnpepljcdgbmipipcl),
with the web extension you will always be able to see your theme and play with it.

![dev tool](https://morfeo.dev/img/devtool/hero.jpeg)

## Installation

You can install it by going to chrome webstore and add it to your plugins:
[Install morfeo dev tool](https://chrome.google.com/webstore/detail/morfeo/phhhjdmeicikchjnpepljcdgbmipipcl)

## Usage

Once you have done the installation, open the chrome devtool by inspecting the page or simply typing:
`alt + cmd + j`, you'll see a new tab called `Ⓜ️ Morfeo`:

![dev tool](https://morfeo.dev/img/devtool/tabs.png)

Try it right now to see a sample theme provided by us!

## Enable Dev Tool in your application

Enable dev tool in your application it's pretty easy, just install `@morfeo/dev-tools`:

```bash
# npm
npm i @morfeo/dev-tools
# yarn
yarn add @morfeo/dev-tools
```

the in your app, before setting the theme, just add:

```typescript
import { enableMorfeoDevTool } from '@morfeo/dev-tools';
import { morfeo } from './myTheme';

enableMorfeoDevTool();

morfeo.setTheme('default', myTheme);
```

> In a future release the dev tool will probably be always enabled by default

## Contribute

We want to improve the dev tool as much as possible and add functionalities like:

- change the application theme from the theme
- increase the supported theme slices
- a UI to easily generate the style based on the theme
- theme storage to apply theme presets to your application

If you want to help us, check our [GitHub](https://github.com/morfeojs/morfeo)!

If you want a particular funcionality or you found a bug, open an issue [here](https://github.com/morfeojs/morfeo/issues)
npm package: @morfeo/hooks
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/hooks

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

[morfeo](https://morfeo.dev) is a framework-agnostic set of tools that will help you to build your next **design system** based on a single source of truth: the **theme**.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

**@morfeo/hooks** expose a set of hooks to easily use morfeo inside a `react` context.

> **React v18**
>
> To properly use Morfeo in a React environment, you need to have a version of `react >= 18`

## Installation

```bash
# npm
npm i @morfeo/hooks

# yarn
yarn add @morfeo/hooks
```

## Documentation

Check out the full [documentation here](https://morfeo.dev/docs/Packages/hooks).
npm package: @morfeo/jss
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/jss

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

[morfeo](https://morfeo.dev) is a framework-agnostic set of tools that will help you to build your next **design system** based on a single source of truth: the **theme**.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

## Installation

with [npm](https://www.npmjs.com/package/@morfeo/jss):

```bash
npm install @morfeo/jss
```

or [yarn](https://yarn.pm/@morfeo/jss):

```bash
yarn add @morfeo/jss
```

## Usage

**@morfeo/jss** exposes a plugin for [jss](https://cssinjs.org/) and a utility to generate css classes from morfeo's style objects called [getStyles](#getstyles)

> You'll probably never use _directly_ `@morfeo/jss`, instead, you'll more likely to use [@morfeo/react](https://morfeo.dev/docs/Packages/react), [@morfeo/svelte](https://morfeo.dev/docs/Packages/svelte), [@morfeo/web](https://morfeo.dev/docs/Packages/web), or other packages that offer better integration of the morfeo eco-system in your framework of choice.
> But, if you're already using [jss](https://cssinjs.org/) you can use use our plugin to bring morfeo's functionalities inside your app.

### JSS Plugin

To integrate `morfeo` inside an app which is already using JSS you can add to the plugins morfeo:

```typescript
import { morfeoJSS } from '@morfeo/jss';
import jss from 'jss';

jss.use(morfeoJSS);
```

### getStyles

With the utility `getStyles` you can obtain CSS classes based on `morfeo style objects`:

```typescript
import { getStyles } from '@morfeo/jss';

const { classes } = getStyles({
  button: {
    bg: 'primary',
    corner: 'm',
  },
});

const element = document.getElementById('button');

element.classList.add(classes.button);
```

#### API:

```typescript
import { Style } from '@morfeo/core';
import { StyleSheet, Jss } from 'jss';

function getStyles<Names extends string>(
  styles: Record<Names, Style>,
): {
  /**
   * The classes to apply to the element
   */
  classes: Record<Names, string>;
  /**
   * The JSS StyleSheet object
   */
  stylesheet: StyleSheet<Names>;
  /**
   * The JSS instance
   */
  jss: Jss;
  /**
   * A callback that should be called when the element (or component) will be unmounted
   */
  destroy: () => void;
  /**
   * A callback that should be called to update the style of the element (or component)
   */
  update: (styles: Record<Names, Style>) => Record<Names, string>;
};
```
npm package: @morfeo/native
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/native

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

[morfeo](https://morfeo.dev) is a framework-agnostic set of tools that will help you to build your next **design system** based on a single source of truth: the **theme**.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

@morfeo/native package is brings to `React Native` the morfeo's eco system

## Installation

with [npm](https://www.npmjs.com/package/@morfeo/native):

```bash
npm install @morfeo/native
```

or [yarn](https://yarn.pm/@morfeo/native):

```bash
yarn add @morfeo/native
```

## Usage

Just like @morfeo/react, the API of this package is the same as [@morfeo/hooks](https://morfeo.dev/docs/Packages/hooks), the main differences between `@morfeo/react` and `@morfeo/native` are related to how the parsers converts style objects to valid style for React Native, for example in @morfeo/native there you cannot use any pseudo element/class and shadows output is different (`shadowOffset`, `shadowColor`, `shadowOpacity` and `shadowRadius` instead of `boxShadow`)

```tsx
import { View, ViewProps } from 'react-native';
import { useStyle, Style } from '@morfeo/native';

type Props = Omit<ViewProps, 'style'> & {
  style?: Style;
};

const CustomView: React.FC<Props> = ({ ...props, style }) => {
  const parsedStyle = useStyle(style);
  return <View {...props} style={parsedStyle} />;
};

const App = () => {
  return (
    <CustomView
      style={{
        bg: 'primary',
        px: 'm',
        corner: 's',
        shadow: 'strong',
      }}
    />
  );
};
```
npm package: @morfeo/preset-default
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Andrea Simone Porceddu
Latest version: 0.9.3

# @morfeo/preset-default

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

`@morfeo/preset-default` is the fastest way to start using morfeo with 2 complete themes!
It expose 2 themes, `light` and `dark`, you can you use these themes as they are or customize them to fit your design!

**@morfeo/preset-default** is part of the [@morfeo](https://morfeo.dev) eco-system, a set of **framework-agnostic** tools that help you to create beautiful design systems for your web and mobile apps.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

## Installation

with [npm](https://www.npmjs.com/package/@morfeo/preset-default):

```bash
npm install @morfeo/preset-default
```

or [yarn](https://yarn.pm/@morfeo/preset-default):

```bash
yarn add @morfeo/preset-default
```

## Usage

```typescript
import { initPreset } from '@morfeo/preset-default';

initPreset();
```

Or alternatively

```typescript
import { lightTheme, darkTheme } from '@morfeo/preset-default';

morfeo.setTheme('light', {...lightTheme, ...yourOverrides });
```

The preset expose 2 themes, one `light` and one `dark`:

```typescript
import { lightTheme, darkTheme } from '@morfeo/preset-default';
```

If you like our themes, you can easily use them in your app with the `initPreset` function:

```typescript
import { initPreset } from '@morfeo/preset-default';

morfeo.setCurrentTheme('light'); // Used by default
// OR
morfeo.setCurrentTheme('dark');
```

You can use these themes as they are or customize theme to fit your design:

```typescript
import { darkTheme, lightTheme } from '@morfeo/preset-default';

morfeo.setTheme('dark', {
  ...darkTheme,
  colors: myDarkColors,
});

morfeo.setTheme('light', {
  ...darkTheme,
  colors: myLightColors,
});
```
npm package: @morfeo/react
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/react

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

**@morfeo/react** is part of the [@morfeo](https://morfeo.dev) eco-system, a set of **framework-agnostic** tools that help you to create beautiful design systems for your web and mobile apps.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

## Installation

```bash
# npm
npm i @morfeo/react

# yarn
yarn add @morfeo/react
```

**@morfeo/react** re-expose [@morfeo/hooks](https://morfeo.dev/docs/Packages/hooks) and [@morfeo/web](https://morfeo.dev/docs/Packages/web), we suggest you to read their documentations.

**@morfeo/react** re-expose [@morfeo/hooks](./hooks.mdx) and [@morfeo/web](./web.mdx), we suggest you to read their documentations.

In addition to `@morfeo/hooks`, this package add 2 other hooks:

- [useClassNames](#useClassNames)
- [useClassName](#useClassName)

These hooks are similar to `useStyles` and `useStyle` of `@morfeo/hooks`, but instead of returning a css object they return a class (or a set of classes) to apply to the component; they are needed because **with inline styles we cannot handle media queries or pseudo classes**:

```tsx
function Button() {
  const className = useClassName({
    p: { lg: 'm', sm: 's' }, // <--- Unhandled by useStyle(s)
    bg: 'primary',
    '&:hover': {
      opacity: 'light', // <--- Unhandled by useStyle(s)
    },
  });

  return <button className={className}>Click me</button>;
}
```

## useClassNames

```typescript
function useClassNames<Key extends string>(
  styles: Record<Key, Style>,
): Record<Key, string>;
```

### Example

```tsx
function Button() {
  const classes = useClassNames({
    container: {
      px: 'm',
    },
    button: {
      p: { lg: 'm', sm: 's' },
      bg: 'primary',
      '&:hover': {
        opacity: 'light',
      },
    },
  });

  return (
    <div className={classes.container}>
      <button className={classes.button}>Click me</button>
    </div>
  );
}
```

## useClassName

```typescript
function useClassName(style: Style): string;
```

### Example

```tsx
function Button() {
  const className = useClassName({
    p: { lg: 'm', sm: 's' },
    bg: 'primary',
    '&:hover': {
      opacity: 'light',
    },
  });

  return <button className={className}>Click me</button>;
}
```
npm package: @morfeo/spec
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/spec

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

[morfeo](https://morfeo.dev) is a framework-agnostic set of tools that will help you to build your next **design system** based on a single source of truth: the **theme**.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

This package is used inside all the others morfeo's packages because it expose the theme specification and all the properties handled by the morfeo's eco-system. Read more about this package in the offical documentation [here.](https://morfeo.dev/docs/ThemeSpecification/overview)
npm package: @morfeo/utils
Description: ![Morfeo logo](https://morfeo.dev/img/morfeo.png)
Author: Mauro Erta
Latest version: 0.9.3

# @morfeo/utils

![Morfeo logo](https://morfeo.dev/img/morfeo.png)

[morfeo](https://morfeo.dev) is a framework-agnostic set of tools that will help you to build your next **design system** based on a single source of truth: the **theme**.

---

[Documentation](https://morfeo.dev) | [API](https://github.com/morfeojs/morfeo) | [Contributing](https://github.com/morfeojs/morfeo/blob/main/CONTRIBUTING.md) | [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/5hbsKMBRBh)

---

## Hey Dev

It's just a set of utility functions used internally by `@morfeo/*` packages, is not meant for public consumptions.
npm package: @morfi-technologies/morfi-prettier-config
Description: Morfi Technologies Inc Prettier config
Author: Matthew
Latest version: 1.0.0

# `@morfi/prettier-config`

> Morfi [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ npm install --dev @morfi/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@morfi/prettier-config"
}
```

**Publish**

npm login --scope=@NAMESPACE --auth-type=legacy --registry=https://npm.pkg.github.com
npm publish