open-index/open-npm huggingface dataset:
npm package: @ivliu/async-form-antd
Description: 通过自定义的formSchema结构，自动生成表单
Author: IVLIU
Latest version: 0.3.0

#### API

1. formSchema: object
```js
{
  "title": "normal",
  "description": "desc",
  "fields": [
    {
      "field": "username",
      "name": "用户名",
    },
    {
      "field": "password",
      "name": "密码",
    },
  ]
}
```

2. formDate: object
```js
  {
    "username": "ivliu",
    "password": "123456"
  }
```

3. callback: (val: any) => void
回调函数，其中val参数是要提交的值

4. submitTxt: string
提交按钮的文案

#### 说明

下面介绍每个字段的意义以及取值。

1. title   (string)   标题
2. description   (string)   描述
3. required   (array)   必填字段枚举，数组项可以是字符串或者数组
   1. 字符串：必须字段的field值
   2. *数组： 第一项是必需字段的field值，第二项是自定义警告信息(参照antd)，更多项将被忽略
4. fields   (array)   表单字段枚举  #field配置介绍#
5. *modal   (0 | 1)   是否需要展示在modal中，还需研究



##### field配置介绍

1. field   (string)   字段名  **非空**
2. name   (string)   标签名称 
3. widget   (string)   组件名称  **默认Input**
4. type   (string)   类型 **[string, array, number, boolean, object]**
5. enum   (array)   枚举值，一般配合Select，Radio或者CheckBox使用，数组项是数组
   1. 数组的第一项是对应的提交值，第二项是相应的UI文案
6. tips   (string)   自定义文案提示，多用于palaceholder
7. tabs: (array)    支持tab切换设置数组类型的field, type是array时应用
8. by   (string)   如果有依赖，定义依赖的field
9. ref   (string | array)   自定义形状，一般用于数组项的自定义，数组项可以是字符串或者数组
   1. 字符串：对应的ref值
   2. 数组：用于有前后依赖时
10. defaultValue   (string | array | number | boolean | object)   默认值
11. txt   (string)   目前作用还未想好，目前是为了兼容CheckBox和Radio不包含enum的时候
12. *api   (string)   针对有网络请求的Select，Radio或者其他组件的情况
13. *optFields   (array)   命名还需改正，对应接口中的字段
14. *thirdWidget   (string)   第三方组件支持


* 表示有待调整

#### Demo（待完善）
npm package: @ivliu/micro-page
Description: micro-page是一款基于history package实现的类spa工具，配合postmessage可以轻松实现多页面之间的数据通信。 micro-page同时支持iframe形式和react component组件形式嵌入，且内置缓存，保证页面的切换流畅
Author: 鹈鹕
Latest version: 0.1.0

# micro-page

micro-page是一款基于history package实现的类spa工具，配合postmessage可以轻松实现多页面之间的数据通信。
micro-page同时支持iframe形式和react component组件形式嵌入，且内置缓存，保证页面的切换流畅

> 我们平时开发中多页面如果有数据通信，需要借助localstorage或者sessionstorage，并且需要做多端兼容处理，比如微信返回缓存问题，借助micro-page你可以在多页面之间实现类spa的体验

## 安装

```bash
yarn add micro-page
```

#### 使用

This is the folder structure we set up for you:

```typescript
import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import MicroPage from '../.';
import useSingleHistory from '../src/useSingleHistory';
import Comp from './Comp';

const App = () => {
  const h = useSingleHistory('BrowserHistory');
  return (
    <div>
      <button onClick={() => h.push('/comp')}>push</button>
      <MicroPage 
        portalId="#portal"
        routes={[
          { title: '百度', path: '/baidu', url: 'https://www.baidu.com' },
          { title: '新浪', path: '/sina', url: 'https://www.sina.com' },
          { title: '自定义组件', path: '/comp', component: Comp }
        ]}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

#### api

```json
{
  portalId: string; // 挂载到的容器，如果不存在会新建
  routes: TRoute[]; // 声明式路由
  onDestroyClose?: () => void; // 暂未实现，可能废弃
}
```
npm package: @ivliu/use-single-history
Description: history的单例模式
Latest version: 1.0.0

# use-single-history

> history的单例模式

[![NPM](https://img.shields.io/npm/v/use-single-history.svg)](https://www.npmjs.com/package/use-single-history) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save use-single-history
```

## Usage

```tsx
import * as React from 'react'

import { useMyHook } from 'use-single-history'

const Example = () => {
  const example = useMyHook()
  return (
    <div>
      {example}
    </div>
  )
}
```

## License

MIT © [](https://github.com/)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
npm package: @ivnalk/cp-react-tree-table
Description: A fast, efficient tree table component for ReactJS.
Author: Constantin Panaitescu
Latest version: 1.0.0-beta.81

# ivnalk/cp-react-tree-table
[![npm version](https://badge.fury.io/js/cp-react-tree-table.svg)](https://badge.fury.io/js/cp-react-tree-table)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/constantin-p/cp-react-tree-table/raw/master/LICENSE)

A fork from a fast, efficient tree table component for ReactJS.

[Real Live Demo](https://constantin-p.github.io/cp-react-tree-table) | [Real Documentation](https://constantin.software/cp-react-tree-table/docs/)

[Real Documentation v0.x](https://github.com/constantin-p/cp-react-tree-table/tree/ver/0.x)


### Installation

###### [Method A] Using [npm](https://www.npmjs.com):

```sh
npm install --save @ivnalk/cp-react-tree-table
```

### Usage

Import the `@ivnalk/cp-react-tree-table` module:

```javascript
import { TreeTable, TreeState } from '@ivnalk/cp-react-tree-table';
```

### Mejoras de Estilo
Se implementó la opción de agregar clases CSS en cada celda de la tabla.

Para integrar una clase CSS se debe de enviar en los datos del treetable
```javascript
data: { name: 'Department 1', expenses: '75,000', employees: '18', contact: 'Florence Carter', class: 'myCSS_Class' },
```

## License

This project is MIT licensed.
Please see the [LICENSE](LICENSE) file for more information.
npm package: @ivnatsr/color-logs
Description: Prettify terminal logs with some nice colors, easily.
Author: Ivan Atias
Latest version: 1.0.3

# Color-logs

Prettify Node.js console logs with some nice colors, easily.

## Install

```
npm install @ivnatsr/color-logs
```

## Basic usage

```javascript
import { cl } from '@ivnatsr/color-logs'

console.log(cl.blue('Hello, world!'))
```

You can also pass a styles object to set font style and decorations:

```javascript
console.log(cl.blue('Hello, world!', { font: 'bold', decoration: 'underline' }))
```

Combining font styles:

```javascript
console.log(
  cl.blue('Hello, world!', {
    font: ['bold', 'italic'],
    decoration: 'underline'
  })
)
```

## Supported styles:

### Colors

- `blue`
- `yellow`
- `red`
- `cyan`
- `green`
- `magenta`
- `white`
- `gray`
- `brightRed`
- `brightGreen`
- `brightYellow`
- `brightBlue`
- `brightMagenta`
- `brightCyan`
- `brightWhite`

### Font

- `bold`
- `italic`

### Decoration

- `underline`
- `strikethrough`
npm package: @ivnatsr/ezreact
Description: Add EzReact's components and hooks utilities to your React projects.
Author: Ivan Atias
Latest version: 0.1.8

# EzReact CLI

EzReact CLI is a command-line interface designed to simplify the process of adding hooks and components utilities to your React projects. With EzReact CLI, you can quickly scaffold and manage your React utilities with ease.

## Usage

```bash
npx @ivnatsr/ezreact [command]
```

## Commands 

### `add`

Add EzReact's components and hooks utilities to your React projects.

```bash
npx @ivnatsr/ezreact add [utilities...] [options]
```

#### Arguments 

- `[utilities...]`: The utilities to add to your project. You can specify multiple utilities separated by spaces. Passing the utilities is **optional**. If you don't specify any utility, the CLI will provide you with all the available utilities for you to choose from.

#### Options

- `-hp, --hooks-path <path>`: Path where hooks utilities should be added. **(Optional)**
- `-cp, --components-path <path>`: Path where components utilities should be added. **(Optional)**
- `-ts, --typescript`: Add using TypeScript. **(Optional)**

### Other Commands

- `-v, --version`: Display the current version number of EzReact CLI.
- `-h, --help`: Display help information for EzReact CLI.

## Examples 

To add a hook utility called use-clipboard and a component utility called my-component you can run:

```bash
npx @ivnatsr/ezreact add use-clipboard my-component -hp src/hooks -cp src/components
```

This command will add the specified utilities to the designated paths in your React project.

## Contributing

Contributions are welcome! If you have suggestions or improvements, feel free to open an [issue](https://github.com/ivanatias/ezreact/issues) or submit a pull request.

Please, make sure to read the [CONTRIBUTING.md](../../CONTRIBUTING.md) file.

## License 

This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.
npm package: @ivnd/api
Description: iVND Control Api
Author: iVND
Latest version: 0.0.9

## `iVND Ultility Api`

### Install

`npm i @ivnd/api` or `yarn add @ivnd/api`

### Usage

```
import { API } from "@ivnd/api"

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/box-content
Description: iVND Control BoxContent
Author: iVND
Latest version: 0.0.8

## `iVND Control BoxContent`

### Install

`npm i @ivnd/box-content` or `yarn add @ivnd/box-content`

### Usage

```
import { BoxContent } from "@ivnd/box-content"

<BoxContent />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/button
Description: iVND Button
Author: iVND
Latest version: 0.0.8

## `iVND Control Loading`

### Install

`npm i @ivnd/button` or `yarn add @ivnd/button`

### Usage

```
import { CreateButton } from "@ivnd/control"

<CreateButton />

```

### Development

`npm run build` to build package

### Publish

`npm login` to login npmjs
`npm publish --access public` to publish package
npm package: @ivnd/checkbox
Description: iVND Control Checkbox
Author: iVND
Latest version: 0.0.4

## `iVND Control Checkbox`

### Install

`npm i @ivnd/checkbox` or `yarn add @ivnd/checkbox`

### Usage

```
import { Checkbox } from "@ivnd/checkbox"

<Checkbox />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/collapse-tree
Description: iVND Control CollapseTree
Author: iVND
Latest version: 0.0.2

## `iVND Control CollapseTree`

### Install

`npm i @ivnd/collapse-tree` or `yarn add @ivnd/collapse-tree`

### Usage

```
import { CollapseTree } from "@ivnd/collapse-tree"

<CollapseTree />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/control
Description: iVND Control Control
Author: iVND
Latest version: 0.0.16

## `iVND Control Control`

### Install

`npm i @ivnd/control@latest` or `yarn add @ivnd/control@latest`

### Usage

```
import { Control } from "@ivnd/control"

<Control />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/date-picker
Description: iVND Control Date-picker
Author: iVND
Latest version: 0.0.3

## `iVND Control Date-picker`

### Install

`npm i @ivnd/date-picker` or `yarn add @ivnd/date-picker`

### Usage

```
import { Date-picker } from "@ivnd/date-picker"

<Date-picker />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/effect-screen
Description: iVND Control EffectScreen
Author: iVND
Latest version: 0.0.2

## `iVND Control EffectScreen`

### Install

`npm i @ivnd/effect-screen` or `yarn add @ivnd/effect-screen`

### Usage

```
import { EffectScreen } from "@ivnd/effect-screen"

<EffectScreen />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/header
Description: iVND Control Header
Author: iVND
Latest version: 0.0.5

## `iVND Control Header`

### Install

`npm i @ivnd/header` or `yarn add @ivnd/header`

### Usage

```
import { Header } from "@ivnd/header"

<Header />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/html-editor
Description: iVND Control HtmlEditor
Author: iVND
Latest version: 0.0.7

## `iVND Control HtmlEditor`

### Install

`npm i @ivnd/html-editor` or `yarn add @ivnd/html-editor`

### Usage

```
import { HtmlEditor } from "@ivnd/html-editor"

<HtmlEditor />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/image
Description: iVND Control Image
Author: iVND
Latest version: 0.0.4

## `iVND Control Image`

### Install

`npm i @ivnd/image` or `yarn add @ivnd/image`

### Usage

```
import { Image } from "@ivnd/image"

<Image />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/input
Description: iVND Input
Author: iVND
Latest version: 0.0.7

## `iVND Control Input`

### Install

`npm i @ivnd/input` or `yarn add @ivnd/input`

### Usage

```
import { Input, TextArea } from "@ivnd/control"

<Input />
<TextArea />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/layout
Description: iVND Control Layout
Author: iVND
Latest version: 0.0.2

## `iVND Control Layout`

### Install

`npm i @ivnd/layout` or `yarn add @ivnd/layout`

### Usage

```
import { Layout } from "@ivnd/layout"

<Layout />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/loading
Description: iVND Loading
Author: iVND
Latest version: 0.0.3

## `iVND Control Loading`

### Install

`npm i @ivnd/loading` or `yarn add @ivnd/loading`

### Usage

```
import { Loading } from "@ivnd/control"

<Loading />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/menu
Description: iVND Control IvndMenu
Author: iVND
Latest version: 0.0.5

## `iVND Control IvndMenu`

### Install

`npm i @ivnd/ivnd-menu` or `yarn add @ivnd/ivnd-menu`

### Usage

```
import { IvndMenu } from "@ivnd/ivnd-menu"

<IvndMenu />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/modal
Description: iVND Control Modal
Author: iVND
Latest version: 0.0.5

## `iVND Control Modal`

### Install

`npm i @ivnd/modal` or `yarn add @ivnd/modal`

### Usage

```
import { Modal } from "@ivnd/modal"

<Modal />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/next-image
Description: iVND Control NextImage
Author: iVND
Latest version: 0.0.7

## `iVND Control Next Image`

### Install

`npm i @ivnd/next-image` or `yarn add @ivnd/next-image`

### Usage

```
import { Image } from "@ivnd/next-image"

<Image />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/pagination
Description: iVND Control Pagination
Author: iVND
Latest version: 0.0.4

## `iVND Control Pagination`

### Install

`npm i @ivnd/pagination` or `yarn add @ivnd/pagination`

### Usage

```
import { Pagination } from "@ivnd/pagination"

<Pagination />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/param-url
Description: iVND Control ParamUrl
Author: iVND
Latest version: 0.0.4

## `iVND Control ParamUrl`

### Install

`npm i @ivnd/param-url` or `yarn add @ivnd/param-url`

### Usage

```
import { useParamsURL, useGetParamsURL, useRemoveParamURL, useSetParamsURL } from "@ivnd/param-url"


```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/radio
Description: iVND Control Radio
Author: iVND
Latest version: 0.0.2

## `iVND Control Radio`

### Install

`npm i @ivnd/radio` or `yarn add @ivnd/radio`

### Usage

```
import { Radio } from "@ivnd/radio"

<Radio />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/router
Description: iVND Control Router
Author: iVND
Latest version: 0.0.1

## `iVND Control Router`

### Install

`npm i @ivnd/router` or `yarn add @ivnd/router`

### Usage

```
import { useSetParamURL, useGetParamsURL, useRemoveParamURL } from "@ivnd/router"


```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/select
Description: iVND Control Select
Author: iVND
Latest version: 0.0.4

## `iVND Control Select`

### Install

`npm i @ivnd/select` or `yarn add @ivnd/select`

### Usage

```
import { Select } from "@ivnd/select"

<Select />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/select-async
Description: iVND Control SelectAsync
Author: iVND
Latest version: 0.0.3

## `iVND Control SelectAsync`

### Install

`npm i @ivnd/select-async` or `yarn add @ivnd/select-async`

### Usage

```
import { SelectAsync } from "@ivnd/select-async"

<SelectAsync />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/solr
Description: iVND Control Solr
Author: iVND
Latest version: 0.0.6

## `iVND Control Solr`

### Install

`npm i @ivnd/solr` or `yarn add @ivnd/solr`

### Usage

```
import { Solr } from "@ivnd/solr"

<Solr />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/table
Description: iVND Control Table
Author: iVND
Latest version: 0.0.6

## `iVND Control Table`

### Install

`npm i @ivnd/table` or `yarn add @ivnd/table`

### Usage

```
import { Table } from "@ivnd/table"

<Table />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/toast
Description: iVND Control Toast
Author: iVND
Latest version: 0.0.3

## `iVND Control Toast`

### Install

`npm i @ivnd/toast` or `yarn add @ivnd/toast`

### Usage

```
import { Toast } from "@ivnd/toast"

<Toast />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/upload-file
Description: iVND Control UploadFile
Author: iVND
Latest version: 0.0.6

## `iVND Control UploadFile`

### Install

`npm i @ivnd/upload-file` or `yarn add @ivnd/upload-file`

### Usage

```
import { UploadFile } from "@ivnd/upload-file"

<UploadFile />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnd/utils
Description: iVND Control Utils
Author: iVND
Latest version: 0.0.4

## `iVND Control Utils`

### Install

`npm i @ivnd/utils` or `yarn add @ivnd/utils`

### Usage

```
import { Utils } from "@ivnd/utils"

<Utils />

```

### Documentation

See full docs at: https://ivnd-control-uat.vndirect.com.vn
npm package: @ivnxyz/platzom
Description: Traductor al idioma platzom
Author: Iván Martínez
Latest version: 1.0.2

# Platzom

Platzom es un idioma inventado para el creador de memes moderno. (Curso de Fundamentos de JavaScript de Platzi)

## Descripción del idioma

- Si la palabra termina en "ar", se le quitan esas dos letras.
- Si la palabra inicia con Z, se le agrega "pe" al final.
- Si la palabra tiene 10 o más letras, se debe partir a la mitad y unir con un guión.
- Si la palabra original es un palíndromo, ninguna regla anterior cuenta y se devuelve la misma palabra intercalando mayúsculas y minúsculas.

## Instalación

```
npm install @ivnxyz/platzom
```

## Uso

```
import platzom from 'platzom'

platzom("Programar") //Program
```

## Créditos
- [Sacha Lifzyc](https://twitter.com/slifzyc)
npm package: @ivo86/convert
Description: conversion system from decimal to binary and binary to decimal
Author: Iván Lovich
Latest version: 0.1.0

# Converter
## Number converter

Converter is a program that allows you to pass a number from the decimal system to the binary and from the binary to the decimal


## Installation

```
npm install convert
```

## Use

```
import { decimalTobinary } from 'convert'
import { binaryTodecimal } from 'convert'

```

## Credits
- Ivan Lovich

## License

[MIT](https://opensource.org/licenses/MIT)
npm package: @ivoiv/directory-named-typescript-plugin
Description: This plugin allows using directory name module import. Forked for patch from channel-io.
Author: channel-io
Latest version: 5.0.0

# directory-named-typescript-plugin
This plugin allows using directory name module import.

If you adapt [directory-named-webpack-plugin](https://github.com/shaketbaby/directory-named-webpack-plugin) with TypeScript, you head `TS2307: Cannot find module` error. This plugin fix those problem.

# Install
```bash
npm install directory-named-typescript-plugin
```

Then, configure plugin at tsconfig.json.
```json
{
  "compilerOptions": {
    "plugins": [{
      "name": "directory-named-typescript-plugin"
    }]
  }
}
```

Additionally, if you use VSCode, you should use the workspace typescript version ([see more](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript)) or change VSCode setting like this:
```tsx
{
  ...
  "typescript.tsserver.pluginPaths": [
    "directory-named-typescript-plugin"
  ]
}
```

# Apply for transpile
The plugin doesn't change transpiled bundle file. (because TypeScript could support only Language Service plugin what related to editor intellisense.)
When you wanna influence bundled file, you can choice a solution below.
1. Install [directory-named-webpack-plugin](https://github.com/shaketbaby/directory-named-webpack-plugin) together if you use Webpack.
2. Install [ts-patch](https://www.npmjs.com/package/ts-patch), and Apply `{ "transform": "directory-named-typescript-plugin/dist/transformer.js", "transformProgram": true }` transformer predefined.

# Example
- As-is
  ```tsx
  import FooComponent from 'src/components/Foo/Foo.tsx'
  ```

- To-be
  ```tsx
  import FooComponent from 'src/components/Foo'
  ```

# Inspired by
- [directory-named-webpack-plugin](https://github.com/shaketbaby/directory-named-webpack-plugin)
- [ts-patch](https://www.npmjs.com/package/ts-patch)