open-index/open-npm huggingface dataset:
npm package: @nafing/lorewave_lib
Description: Lorewave UI component library for React applications.
Latest version: 0.1.1

# lorewave_lib

React component library built from `src/package` and published to npm from GitHub Actions.

## Local development

- `pnpm dev` starts the demo app.
- `pnpm run build:demo` builds the demo app.
- `pnpm run build` builds the npm package into `dist`.

## Publishing from GitHub

The workflow in `.github/workflows/publish-package.yml` runs on every push to `main` or `master`.

It publishes to npm only when the version from `package.json` does not already exist in the registry.

### Required repository secret

Add `NPM_TOKEN` in the GitHub repository secrets. The token must have permission to publish the package on npm.

### Release flow

1. Update `version` in `package.json`.
2. Push to `main` or merge a branch into `main`.
3. GitHub Actions builds the library and runs `npm publish`.

If you want to change the public package name before first publish, update the `name` field in `package.json`.

## Windows release script

Use `release-and-push.bat` from the repository root to automate the release flow on Windows.

Examples:

- `release-and-push.bat` bumps a patch version.
- `release-and-push.bat minor` bumps a minor version.
- `release-and-push.bat major` bumps a major version.

The script runs lint and build, bumps the npm version, creates a git commit, creates a `v<version>` tag, and pushes the current branch plus the tag to `origin`.
npm package: @nafise622/material-ui-color-picker
Description: <ColorInput> component for material-ui
Author: Loic Mahieu
Latest version: 3.5.3

# `<ColorPicker>` for material-ui

![`<ColorPicker>` example](./doc/screenshot.png)

ColorPicker based on [`<TextField />`](http://www.material-ui.com/#/components/text-field) and `<ChromePicker />` from [`react-color`](https://github.com/casesandberg/react-color/) and its [redux-form](https://redux-form.com) field component.

## Demo

[https://material-ui-color-picker.now.sh/](https://material-ui-color-picker.now.sh/)

## Installation

For material-ui (v1):

```sh
npm install --save material-ui-color-picker
```

## Usage

```js
import React from 'react'
import ColorPicker from 'material-ui-color-picker'

<ColorPicker
  name='color'
  defaultValue='#000'
  // value={this.state.color} - for controlled component
  onChange={color => console.log(color)}

/>
```
[Redux-form](https://redux-form.com) field
```js
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { ColorPickerField } from 'material-ui-color-picker';

...
<Field
  name="color"
  component={ColorPickerField}
/>
...

```

There is not so much properties at this time. The was very quickly designed for my needs. Feel free to submit a PR with new features ;)

## License

This library is licensed under the [MIT Licence](LICENSE), and sponsored by [iGLOO](https://igloo.be).
npm package: @nafkhanzam/nz-cli
Description: command utilities for nafkhanzam projects
Author: nafkhanzam @nafkhanzam
Latest version: 0.0.29

nz-cli
======

command utilities for nafkhanzam projects

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/nz-cli.svg)](https://npmjs.org/package/nz-cli)
[![Downloads/week](https://img.shields.io/npm/dw/nz-cli.svg)](https://npmjs.org/package/nz-cli)
[![License](https://img.shields.io/npm/l/nz-cli.svg)](https://github.com/nafkhanzam/nz-cli/blob/master/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @nafkhanzam/nz-cli
$ nz COMMAND
running command...
$ nz (-v|--version|version)
@nafkhanzam/nz-cli/0.0.29 linux-x64 node-v17.8.0
$ nz --help [COMMAND]
USAGE
  $ nz COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->
* [`nz check:package`](#nz-checkpackage)
* [`nz gen:all`](#nz-genall)
* [`nz gen:assets`](#nz-genassets)
* [`nz gen:class`](#nz-genclass)
* [`nz gen:exports`](#nz-genexports)
* [`nz gen:urls`](#nz-genurls)
* [`nz help [COMMAND]`](#nz-help-command)

## `nz check:package`

```
USAGE
  $ nz check:package

OPTIONS
  -c, --config=config  Configuration file path.
```

_See code: [src/commands/check/package.ts](https://github.com/nafkhanzam/nz-cli/blob/v0.0.29/src/commands/check/package.ts)_

## `nz gen:all`

```
USAGE
  $ nz gen:all

OPTIONS
  -c, --config=config  Configuration file path.
```

_See code: [src/commands/gen/all.ts](https://github.com/nafkhanzam/nz-cli/blob/v0.0.29/src/commands/gen/all.ts)_

## `nz gen:assets`

```
USAGE
  $ nz gen:assets

OPTIONS
  -c, --config=config  Configuration file path.
```

_See code: [src/commands/gen/assets.ts](https://github.com/nafkhanzam/nz-cli/blob/v0.0.29/src/commands/gen/assets.ts)_

## `nz gen:class`

```
USAGE
  $ nz gen:class

OPTIONS
  -c, --config=config  Configuration file path.
```

_See code: [src/commands/gen/class.ts](https://github.com/nafkhanzam/nz-cli/blob/v0.0.29/src/commands/gen/class.ts)_

## `nz gen:exports`

```
USAGE
  $ nz gen:exports

OPTIONS
  -c, --config=config  Configuration file path.
```

_See code: [src/commands/gen/exports.ts](https://github.com/nafkhanzam/nz-cli/blob/v0.0.29/src/commands/gen/exports.ts)_

## `nz gen:urls`

```
USAGE
  $ nz gen:urls

OPTIONS
  -c, --config=config  Configuration file path.
```

_See code: [src/commands/gen/urls.ts](https://github.com/nafkhanzam/nz-cli/blob/v0.0.29/src/commands/gen/urls.ts)_

## `nz help [COMMAND]`

display help for nz

```
USAGE
  $ nz help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v3.2.4/src/commands/help.ts)_
<!-- commandsstop -->
npm package: @nafr/echo-ui
Description: A UI library born for WAA
Author: leyoonafr
Latest version: 1.0.0

<img src="https://github.com/codeacme17/echo-ui/assets/67408722/8222b369-5f71-428e-97f9-f648f05cab70" width="240"/></br>

> The project is currently in the development phase

Echo UI is a high-performance and out-of-the-box web audio API component library, build with React and TailwindCSS.

<a href="https://echoui.dev/en"> 
  <img src="https://img.shields.io/badge/Document-ffbe3b?style=flat" />
</a>

<a href="https://echoui.dev/zh"> 
  <img src="https://img.shields.io/badge/中文文档-ffbe3b?style=flat&logo=googletranslate&logoColor=%231e1e1e" />
</a>

<a href="./ROADMAP.md"> 
  <img src="https://img.shields.io/badge/ROADMAP-ffbe3b?style=flat" />
</a>

<a href="./LICENSE.md"> 
  <img src="https://img.shields.io/badge/License-MIT-ffbe3b?style=flat&labelColor=ffbe3b" />
</a>

## Why Echo UI ?

Nowadays, [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) has become a very popular and mature technology for web audio development, and libraries based on it (such as [tone.js](https://github.com/Tonejs/Tone.js) and [howler.js](https://github.com/goldfire/howler.js)) have emerged and become very popular. However, the interaction interface for audio operations is cumbersome and involves many technical points, so this can be a major stumbling block to the development of this technology.

**Echo UI** aims to simplify the development process of audio interaction pages, reduce the burden on the developer's mind, and allow users to use out-of-the-box component libraries to quickly build an elegant audio interaction application!

## Features

#### 📦 **Out-of-the-Box**

Echo UI provides a set of out-of-the-box components that you can directly use to build your audio applications, such as an EQ equalizer, an audio player, or a VST plugin.

#### 🎛️ **High-Quality Interactions**

Many of the component interactions are inspired by high-quality DAW (Digital Audio Workstation) applications like [Ableton Live](https://www.ableton.com/en/live/) and [FL Studio](https://www.image-line.com/). These interactions greatly enhance the user experience.

#### ✨ **Customizable & Easily Extensible**

Developed based on [React](https://react.dev/) and [TailwindCSS](https://tailwindcss.com/), it allows you to easily customize the style and interaction behavior of components. Additionally, you can easily extend Echo UI's component library.

#### 🛠️ **Easy-to-use Hook**

Hook specially designed for audio interaction and analysis applications, which can easily implement audio interactive applications.

#### 📈 **Responsive layout**

Echo UI's component library is responsive, meaning they can automatically adapt to different screen sizes, providing a good experience on different devices.

## License

[MIT](./LICENSE.md) © 2023-Present [leyoonafr](https://github.com/codeacme17)
npm package: @nafuzi/brazilian-masks
Description: Some brazilian masks for CNPJ, CPF, CEP, Phone, Pis
Author: Gabriel Moraes @gabrielnafuzi
Latest version: 1.8.3

# Brazilian Masks

Some masks commonly used in forms in Brazil

## Available Masks

- phone (dynamically changes)
- cnpj
- cpf
- cpfOrCnpj (dynamically changes)
- cep
- pis

## Utility functions

- clear (remove all non-numeric characters)

## Installation

```sh
npm i @nafuzi/brazilian-masks
```

or

```sh
yarn add @nafuzi/brazilian-masks
```

### Simple use (Vanilla JS)

```js
import { clear, cep } from '@nafuzi/brazilian-masks'

const cepInput = document.getElementById('cep-input')

cepInput.addEventListener('input', (event) => {
  const { value } = event.target

  cepInput.value = cep(value)
})
```

### React (TypeScript)

```tsx
// MaskedInput.tsx
import { ChangeEvent, HTMLProps } from 'react'
import masks, { MasksName } from '@nafuzi/brazilian-masks'

type MaskedInputProps = {
  mask: MasksName
  onChange: (maskedValue: string) => void
} & Omit<HTMLProps<HTMLInputElement>, 'onChange'>

export const MaskedInput = ({
  name,
  value,
  onChange,
  mask,
  ...rest
}: MaskedInputProps) => {
  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
    const maskedValue = masks[mask](event.target.value)

    onChange(maskedValue)
  }

  return <input onChange={handleOnChange} value={value} {...rest} />
}

// App.tsx
import { useState } from 'react'

import { MaskedInput } from './components/MaskedInput'

const App = () => {
  const [cpf, setCpf] = useState('')

  return (
    <MaskedInput
      name="cpf"
      value={cpf}
      onChange={(value) => setCpf(value)}
      mask="cpf"
    />
  )
}

export default App
```

## Contributing

Feel free to create issues and open PR's with features, improvements, bugfix, etc.

## License

MIT
npm package: @nafuzi/firebase-auth-error-translator
Description: Get firebase auth error translated
Author: Gabriel Moraes @gabrielnafuzi
Latest version: 1.2.5

# Firebase auth error translator

Helps to translate firebase auth errors, you can translate the error to any of the available languages.

---

## Use

```ts
import { getTranslatedError } from '@nafuzi/firebase-auth-error-translator'

const login = () => {
  try {
    await signInWithEmailAndPassword('johndoe@email.com', 'john123456')
  } catch (error) {
    console.log(getTranslatedError('pt', error.code))
  }
}
```

## Available Languages

Here is a list of the available languages that you can use

- Arabic: <kbd>ar</kbd>

- Bengali: <kbd>bn</kbd>

- German: <kbd>de</kbd>

- English (default): <kbd>en</kbd>

- Spanish: <kbd>es</kbd>

- Persian: <kbd>fa</kbd>

- French: <kbd>fr</kbd>

- Hebrew: <kbd>he</kbd>

- Indonesian: <kbd>id</kbd>

- Italian: <kbd>it</kbd>

- Japanese: <kbd>ja</kbd>

- Korean: <kbd>ko</kbd>

- Nepali: <kbd>ne</kbd>

- Polish: <kbd>pl</kbd>

- Portuguese: <kbd>pt</kbd>

- Russian: <kbd>ru</kbd>

- Thai: <kbd>th</kbd>

- Turkish: <kbd>tr</kbd>

- Vietnamese: <kbd>vi</kbd>

- Chinese: <kbd>zh</kbd>

## Translations

The translations are from the [Firebase Documentation](https://firebase.google.com/docs/auth/admin/errors). (the language code is based in the [ISO 639-1](http://www.mathguide.de/info/tools/languagecode.html) rules).
npm package: @nafuzi/study-fe-framework
Description: A frontend framework to teach web developers how frontend frameworks work.
Latest version: 1.0.2

# study-fe-framework

![fe-fwk](https://img.shields.io/badge/fe--fwk-book-blueviolet)

Code for the book "Build a frontend framework from scratch".
You can get your copy [here](http:&#x2F;&#x2F;mng.bz&#x2F;aM2o) and start learning how frontend frameworks work by building your own, from scratch!

## Commands

This package has the following commands:

- `npm run build` - Bundle the project into a single ESM file
- `npm run lint` - Lint the project
- `npm run lint:fix` - Lint the project and fix any issues
- `npm run test [<test-path>]` - Start the test runner in watch mode
- `npm run test:run [<test-path>]` - Run the tests once