open-index/open-npm huggingface dataset:
npm package: @hbis/datav
Description: Vue Large screen data display component library
Author: hbis
Latest version: 1.1.4


<h1 align="center">DataView</h1>
<p align="center">
    <a href="https://www.npmjs.com/package/@hbis/data-view">
      <img src="https://img.shields.io/npm/v/@hbis/data-view.svg" alt="LICENSE" />
    </a>
</p>

## DataView是干什么的?

* DataView是基于[DataV](https://github.com/DataV-Team/DataV)，结合自身业务需求开发的一个**Vue**数据可视化组件库
* 提供用于提升页面视觉效果的**SVG**边框和装饰
* 提供常用的**图表**如折线图等
* 飞线图/轮播表等其他组件

### npm安装

```shell
$ npm install @hbis/data-view
```

### 使用

```js
import Vue from 'vue'
import DataV from '@hbis/data-view'

Vue.use(DataV)

// 按需引入
import { borderBox1 } from '@hbis/data-view'
Vue.use(borderBox1)
```

详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).

### UMD版

`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。

[UMD版使用示例](./umdExample.html)
npm package: @hbis/element-ui
Description: A Component Library for Vue.js.
Latest version: 2.15.98

<p align="center">
  <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
</p>

<p align="center">
  <a href="https://travis-ci.org/ElemeFE/element">
    <img src="https://travis-ci.org/ElemeFE/element.svg?branch=master">
  </a>
  <a href="https://coveralls.io/github/ElemeFE/element?branch=master">
    <img src="https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master">
  </a>
  <a href="https://www.npmjs.org/package/@hbis/element-ui">
    <img src="https://img.shields.io/npm/v/@hbis/element-ui.svg">
  </a>
  <a href="https://npmcharts.com/compare/@hbis/element-ui?minimal=true">
    <img src="http://img.shields.io/npm/dm/@hbis/element-ui.svg">
  </a>
  <br>
  <a href="LICENSE">
    <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
  </a>
</p>

> A Vue.js 2.0 UI Toolkit for Web.

## Install
```shell
npm install @hbis/element-ui -S
```

## Quick Start
``` javascript
import Vue from 'vue'
import Element from '@hbis/element-ui'

Vue.use(Element)

// or
import {
  Select,
  Button
  // ...
} from '@hbis/element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```
For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.

## Browser Support
Modern browsers and Internet Explorer 10+.

## Development
Skip this part if you just want to use Element.

For those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) to see how to run this project.

## LICENSE
[MIT](LICENSE)
npm package: @hbis/three-obj-mtl-loader
Description: Threejs newest obj&mtl loader with npm dev
Author: hbis
Latest version: 1.1.0

## three-obj-mtl-loader

[THREE.OBJLoader](https://threejs.org/examples/js/loaders/OBJLoader.js) repackaged as a node module

## install

`npm i --save @hbis/three-obj-mtl-loader`

## usage

```js

import * as THREE from 'three'
import {MTLLoader, OBJLoader} from '@hbis/three-obj-mtl-loader'

let scene = new THREE.Scene()

let mtlLoader = new MTLLoader();

let objLoader = new OBJLoader();

mtlLoader.load('./test.mtl', (materials) => {
  materials.preload()
  objLoader.setMaterials(materials)
  objLoader.load('./test.obj', (object) => {
    scene.add(object)
  })
})

```
npm package: @hblues/dapp-template
Description: A template to create a Dapp by Next.js quickly
Author: hblues
Latest version: 0.1.4

# Dapp Template

## Introduction

This is a template for common decentralized application (dapp) built with [NextJs](https://nextjs.org/), [Wagmi](https://wagmi.sh/) and [RainbowKit](https://www.rainbowkit.com/). TypeScript is used as the main language.

## Features

In this template, I try to provide some primary functionalities in frontend:

- [x] Wallet connect
- [x] Signature
- [ ] Header (Navation)
- [ ] Footer

Here are some guidances for you modify or custom in your own dapp.

### 0. Get Start

Put `.env` file in your root directory. This is an example.

```
APP_ENV = development
NEXT_PUBLIC_CHAIN_ID = 1
NEXT_PUBLIC_ALCHEMY_ID = ''
NEXT_PUBLIC_PROJECT_ID = ''
```

### 1. Wallet

Define the wallet connectors in the file [wagmi.ts](/src/config/wagmi.ts). Separate the wallet connectors by group if you want. :warning: Remember to change the `NEXT_PUBLIC_PROJECT_ID` in `.env` file.

```ts
const connectors = connectorsForWallets([
  {
    groupName: "Popular",
    wallets: [
      injectedWallet({ chains }),
      metaMaskWallet({ projectId, chains }),
      rainbowWallet({ projectId, chains }),
      walletConnectWallet({ projectId, chains }),
    ],
  },
]);
```

I set `coolMode` in the RainbowkitProvider. Refer it by this link: https://www.rainbowkit.com/docs/cool-mode. Cancel it in [app.tsx](/src/pages/_app.tsx).

### 2. Signature

Learn how to sign message? Refer to: https://wagmi.sh/examples/sign-message.
npm package: @hbouvier/node-red-contrib-graphql
Description: graphql for Node-RED 
Author: ilzenzo
Latest version: 1.0.2

# node-red-contrib-graphql

[![Platform](https://img.shields.io/badge/platform-Node--RED-red)](https://nodered.org)
![License](https://img.shields.io/github/license/hbouvier/node-red-contrib-graphql.svg)
![Release](https://img.shields.io/npm/v/@hbouvier/node-red-contrib-graphql.svg)
![NPM](https://img.shields.io/npm/dm/@hbouvier/node-red-contrib-graphql.svg)

This module leverages the [graphql-api-nodejs-client](https://github.com/graphqlapis/graphql-api-nodejs-client) client library to bring graphql awesomeness to Node-RED!

## Credits

The original package is developed and maintained by [Alpine Code](https://www.alpine-code.com/).
npm package: @hbsis.uikit.ambev/react
Description: Biblioteca ReactJS
Author: HBSIS - Uikit Ambev
Latest version: 0.1.1

# UIKit hbsis com ReactJS

[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)

## Instalação

**Yarn**

```
yarn add @hbsis.uikit/react
```

**NPM**

```
npm i --save @hbsis.uikit/react
```

## DEMO

**DOCUMENTAÇÃO E DEMOSTRAÇÃO**
[Clique aqui](http://172.30.8.51:9000)

## Incidentes

Para solução de 'bugs' criticas ou duvidas deve ser criado um incidente no repositório [Link para Incidentes](https://bitbucket.org/hbsis_team/uikit-react/issues), colocando um exemplo para ajudar no melhor entendimento.

## Configuração no loader do webpack (opcional)

Caso você queira utilizar as otimizações do webpack do seu projeto, siga os passos a seguir:

**Exemplo**

Pegue o caminho dos componentes do uikit com a biblioteca `path` do node

```
const uikit: path.join(__dirname, '..', 'node_modules', '@hbsis.uikit', 'react', 'src', 'components')
```

Adicione no loader do seu webpack

```
jsLoader: {
    test: /\.js$/,
    include: paths.uikit,
    use: 'babel-loader'
  }
```

## CSS e fontes

O css e fonte precisam ser configurados pra algumas features do uikit funcionarem.

Adicione o uikit nos loaders `css-loader` pro css e `file-loader` para as fontes

**Exemplo**

Caminho do uikit

```
const uikit: path.join(__dirname, '..', 'node_modules', '@hbsis.uikit', 'react', 'dist')
```

E adicione nos loader:

```
  cssLoader: {
    test: /\.css$/,
    include: paths.uikit,
    use: [
      'style-loader',
      'css-loader'
    ]
  },

  fileLoader: {
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|txt)(\?.*)?$/,
    include: paths.uikit,
    use: {
      loader: 'file-loader',
      query: {
        name: 'media/[name].[hash:8].[ext]'
      }
    }
  }
```

Importe o css no componente

```
import '@hbsis.uikit/react/dist/uikit.css'
```

## Como usar

**ES6 / ES2015 Module**

```
import {Button} from '@hbsis.uikit/react'
```

**JSX**

```
<Button type="primary" value="primary" />
```

---
npm package: @hbsnow/bootstrap-addition
Description: Twitter Bootstrap を日本語で使うときのちょっとした不足要素を追加します。
Author: hbsnow
Latest version: 1.0.0

# bootstrap-addition

[![Build Status](https://travis-ci.org/hbsnow/bootstrap-addition.svg?branch=master)](https://travis-ci.org/hbsnow/bootstrap-addition)

Twitter Bootstrap を日本語で使うときのちょっとした不足要素を追加するものです。

## Font

フォントまわりについては [Qiita の記事](https://qiita.com/RinoTsuka/items/4181efd43d072e246519)を参考にしています。

test
npm package: @hbsnow/compare-url-hierarchy
Description: Compare URL hierarchy.
Author: hbsnow
Latest version: 1.2.4

# compare-url-hierarchy

Compare URL hierarchy.

[![Build Status](https://travis-ci.org/hbsnow/compare-url-hierarchy.svg?branch=master)](https://travis-ci.org/hbsnow/compare-url-hierarchy)

## Installation

```
yarn add @hbsnow/compare-url-hierarchy
```

## Usage

```
import { compare } from 'compare-url-hierarchy'

compare('/', '/foo') // -> 0
compare('/foo/bar', '/') // -> -1
compare('/', 'https://example.org/foo/bar/baz') // -> 2
```

## LICENSE

MIT
npm package: @hbsnow/move-on-coords
Description: 始点と終点を結ぶ平面座標線上を指定距離移動したときの座標と残り終点までの距離を求めるライブラリ
Author: hbsnow
Latest version: 1.0.3

# move-on-coords

始点と終点を結ぶ平面座標線上を指定距離移動したときの座標と残り終点までの距離を求めるライブラリ

[![Build Status](https://travis-ci.org/hbsnow/move-on-coords.svg?branch=master)](https://travis-ci.org/hbsnow/move-on-coords)

## Install

```bash
yarn add @hbsnow/move-on-coords
```

## Usage

```js
import { moveOnCoords } from 'move-on-coords'

moveOnCoords([3, 4], [0, 0], 1) // -> { diff: -4, coords: [2.4, 3.2] }
```

## Options

| name  | type   | default | description    |
| ----- | ------ | ------- | -------------- |
| digit | number | 7       | 戻す座標の桁数 |
npm package: @hbsnow/rehype-sectionize
Description: rehype plugin that wraps section based on heading
Author: Takahashi Yuki
Latest version: 1.0.7

# rehype-sectionize

![test workflow](https://github.com/hbsnow/rehype-sectionize/actions/workflows/test.yml/badge.svg)
[![codecov](https://codecov.io/gh/hbsnow/rehype-sectionize/branch/main/graph/badge.svg?token=T3Z18P56LV)](https://codecov.io/gh/hbsnow/rehype-sectionize)

## Motivation

There is already [rehype-section][rehype-section] in the library for sectioning. But it could not change the class of section. In addition, sections could not have the slug of heading in the data attribute. I was referred [rehype-section][rehype-section]. Thanks.

## Install

```
npm i -D @hbsnow/rehype-sectionize
```

## Sample

### Input

```html
<h1 id="h1-id">h1</h1>
<h2 id="h2-id">h2</h2>
<h3 id="h3-id">h3</h3>
```

### Output

```html
<section class="heading" data-heading-rank="1" aria-labelledby="h1-id">
  <h1 id="h1-id">h1</h1>
  <section class="heading" data-heading-rank="2" aria-labelledby="h2-id">
    <h2 id="h2-id">h2</h2>
    <section class="heading" data-heading-rank="3" aria-labelledby="h3-id">
      <h3 id="h3-id">h3</h3>
    </section>
  </section>
</section>
```

## Options

| option              | type                    | default           | description                    |
| ------------------- | ----------------------- | ----------------- | ------------------------------ |
| `properties`        | `hastscript.Properties` | `{}`              | Attributes assigned to section |
| `enableRootSection` | `boolean`               | `false`           | Section to wrap all            |
| `rankPropertyName`  | `string`                | `dataHeadingRank` | Name of rank data attribute    |
| `idPropertyName`    | `string`                | `ariaLabelledby`  | Name of id data attribute      |

## License

[MIT][license] © [hbsnow][author]

[license]: license
[author]: https://hbsnow.dev
[rehype-section]: https://github.com/agentofuser/rehype-section
npm package: @hbsolutions/react-presentational
Description: Common React presentational components based on React-Bootstrap and Formik
Author: HBS Development Team
Latest version: 1.1.5

# React-Presentational
Common React presentational components based on React-Bootstrap and Formik.

## Components
- Button
- CheckboxesPalette
- CollapsibleCard
- CollapsibleInPortal
- Confirmation
- DatePicker
- DndList
- DropdownCheckboxesPalette
- DropdownSelect
- MediaField
- MediaInput
- MediaPreview
- ModalEditForm
- TypeaheadInput

## Peer Dependencies
- formik
- react
- react-beautiful-dnd
- react-dom
- yup
npm package: @hbsolutions/redux-rest-crud
Description: Wrapper for Redux Slice with CRUD operations over Rest API.
Author: HBS Development Team
Latest version: 1.0.10

# redux-rest-crud
Wrapper for Redux Slice with CRUD operations over Rest API.

> The library is in development so interfaces may change: do not use in production!

## Usage

```javascript
import {
    createSlice,
    // import some constants if needed 
    STATUS_LOADING,
    STATUS_OK,
    STATUS_ERROR_AUTH,
    STATUS_ERROR_READ,
    STATUS_ERROR_WRITE,
    STATUS_ERROR_UNKNOWN,
    ERRORS_STATUSES,
} from '@hbsolutions/redux-rest-crud';

export const {
    slice: myEntitySlice,

    // extract the selectors you need
    selectors: { getAll, getById, getStatus },

    // extract the thunks you need
    thunks: { loadItems }
} = createSlice('myEntities', {
    // pass async function to retrieve data
    fetchFunc: fetchDataFromTheServer,

    // pass auth checking callback if needed
    checkAuthFunc: state => state.isAuth,
});

// extract the necessary actions for use in thunks or elsewhere
export const { startLoading, setItems, setError, addItem, editItem, deleteItem } = myEntitySlice.actions;

// export reducer to configure the store
export default myEntitySlice.reducer;
```

Component example:
```jsx harmony
import React from 'react';
import { useSelector } from 'react-redux';
import { withLoader } from '@hbsolutions/redux-rest-crud';

import { myEntitySlice, getAll, loadItems } from './myEntitySlice';

const MyEntitiesList = () => {
    const myEntities = useSelector(getAll);

    return (
        <ul>
            {myEntities.map((entity, index) => (
                <li key={index}>{entity.name}</li>
            ))}
        </ul>
    );
};

export default withLoader(
    MyEntitiesList,
    {
        [myEntitySlice.name]: loadItems
    }
);
```
npm package: @hbstack/node-packages
Description: Node packages for HB Framework
Author: Razon Yang
Latest version: 0.1.5

# HB Node Packages

This package includes all required Node.js packages for HB Framework.

[![License](https://flat.badgen.net/github/license/hbstack/node-packages)](https://github.com/hbstack/node-packages/blob/main/LICENSE)
[![Version](https://flat.badgen.net/npm/v/@hbstack/node-packages)](https://www.npmjs.com/package/@hbstack/node-packages)
[![Downloads](https://flat.badgen.net/npm/dt/@hbstack/node-packages)](https://www.npmjs.com/package/@hbstack/node-packages)
npm package: @hbtoan/next-sidebar
Description: A small, customizable React Sidebar component packaged as an npm library for Next.js and React apps.
Author: baotoan-dev
Latest version: 0.1.4

# next-sidebar

A small, customizable React Sidebar component packaged as a library for Next.js / React apps.

## Install

```bash
npm install @hbtoan/next-sidebar
```

## Usage (Next.js / React)

Import và sử dụng Sidebar trong một page hoặc component:

```tsx
import React from "react";
import { Sidebar } from "@hbtoan/next-sidebar";

const items = [
  { id: 1, label: "Home", href: "/" },
  { id: 2, label: "Reports", href: "/reports" },
];

export default function Page() {
  return (
    <div style={{ display: "flex", minHeight: "100vh" }}>
      <Sidebar items={items} width={220} />
      <main style={{ flex: 1, padding: 24 }}>Main content</main>
    </div>
  );
}
```

### Props

- `items`: Mảng các item sidebar `{ id, label, href?, icon? }`
- `width`: Chiều rộng sidebar (mặc định 240)
- `collapsed`: Trạng thái thu gọn (mặc định false)
- `onToggle`: Hàm callback khi toggle sidebar
- `className`, `style`: Tùy chỉnh CSS

## Build

Từ thư mục package, chạy:

```powershell
npm install
npm run build
```

## Publish

1. Bump version trong `package.json`.
2. Đảm bảo đã build ra `dist` (`npm run build`).
3. Publish lên npm:

```powershell
npm publish --access public
```

## Liên hệ / Đóng góp

Repo: [github.com/baotoan-dev/next-sidebar](https://github.com/baotoan-dev/next-sidebar)
npm package: @hbtv/array-input
Description: AntDesign Form 组件
Latest version: 1.0.1

# array-input AntDesign的Form组件

## 安装方法

`npm install @hbtv/array-input --save`

## ChangeLog

## 1.0.1
- 修改了 操作按栏的宽度=> `120`

## 使用方法
```tsx
import React from 'react';
import {Form} from 'antd';
import ArrayInput from '@hbtv/array-input';

export default ()=> {

  const handleFormFinish = (data: any) => {
    console.log('data', data);
  };

  return (
    <Form onFinish={handleFormFinish}>
        <Form.Item label="输入内容" name="content" rules={[{ required: true, message: '请输入' }]}>
          <ArrayInput />
        </Form.Item>
    </Form>
  )
}


```


## API

|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
|  value  |    |  `string[]`  | `undefined`  |
|  onChange  |    |  `(string[]) => void`  | `undefined`  |
|  name  |  用于`key`  |  `string`  | `array-input`  |
|  placeholder  |   |  `string`  | `undefined`  |
|  textArea  |  是否是`textArea`  |  `boolean`  | `true`  |
|  showIndex  | 显示序号  |  `boolean`  | `false`  |
npm package: @hbtv/browser-detect
Description: 浏览器检查工具
Latest version: 1.0.1

# hbtv/browser-detect

## 安装方法

```bash
npm install @hbtv/browser-detect --save
```

## 使用方法-useBrowserDetect

```javascript
import useBrowserDetect from '@hbtv/browser-detect'
const {browserInfo,browserValid,OSvalid,error}=useBrowserDetect(option)
```

### API-useBrowserDetect

### Params

|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
|  option  |    |  Option |undefined  |

### Result

|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
| browserInfo|浏览器的信息|BrowserInfo||
| browserValid|是否通过browserRules的检查|boolean|true
| OSvalid|是否通过OSRules的检查|boolean|true
| error|一些错误信息|string|null

## 使用方法-BrowserDetectModal

```javascript
import BrowserDetectModal from '@hbtv/browser-detect'

const ShouleDetectBrowserComponent=()=>{
    return <><BrowserDetectModal /></>
}

```

### API-BrowserDetectModal

|  参数  |  说明  |  类型 |必填|默认值  |
|  ---   |  ---  |  ---  |  ---  |  ---  |
|  onOk  |  弹窗的ok回调  |  ()=>void  |  false  |  |
|  onCancel  |  弹窗的cancel回调  |  ()=>void  |  false  |
|  content  |  自定义提示内容  |  ReactNode  |  false  |  null  
|  title  |  自定义标题  |  ReactNode  |  false  |  null  |
|  browserRules  |  浏览器规则  |  BrowserRule  |  false  |  []  |
|  OSRules  |  操作系统规则  |  OSRules  |  false  |  []  |
|  strict  |  严格模式  |  strict  |  false  |  false  |
|  modalMode  |  弹窗模式  |  ModalMode  |  fasle  |  remind  |
|  checkMode  |  检查模式  |  CheckMode  |  false  |  once  |
|  location  |  浏览器的location  |  Location  |  false |null |
|  disable  |  不启用检查  |  boolean  |  false | false |

## Interface & Type

```typescript

type Compare = 'lte'|'gte'|'eq'|'ne'|'ex';

type BrowserName = 'aol'|'edge'|'yandexbrowser'|'wechat'|'qq'|'vivaldi'|'kakaotalk'|'samsung'|'chrome'|'phantomjs'|'crios'|'firefox'|'fxios'|'opera'|'opera'|'ie'|'bb10'|'android'|'ios'|'safari'|'facebook'|'instagram'|'ios-webview'|'unknown';

type OSName = 'iOS'|'Android OS'|'BlackBerry OS'|'Windows Mobile'|'Amazon OS'|'Windows 3.11'|'Windows 95'|'Windows 98'|'Windows 2000'|'Windows XP'|'Windows Server 2003'|'Windows Vista'|'Windows 7'|'Windows 8'|'Windows 8.1'|'Windows 10'|'Windows ME'|'Open BSD'|'Sun OS'|'Linux'|'Mac OS'|'QNX'|'BeOS'|'OS/2'|'Search Bot'|'unknown';

type CheckMode = 'once'|'onceBySession'|'eachPage';
/**
 * @type once
 * 仅第一次使用时进行检查
 * @type onceBySession
 * 每次打开会话时进行检查
 * @type eachPage
 * url变化时进行检查
 */
type ModalMode = 'remind'|'forcus';
/**
 * @type remind
 * 仅提示，弹窗可观
 * @type forcus
 * 弹窗不可关闭
 */

interface Option{
    userAgent?: string; //navigator.useAgent
    browserRules?: BrowserRule[]; //浏览器检查规则
    OSRules?: OSName[]; //操作系统检查规则
    strict?: boolean; //严格模式，开启时，仅允许规则内浏览器通过检查，关闭时则只对规则内进行检查，不在规则内的直接通过
}

interface BrowserRule{
    name: BrowserName; //常见浏览器
    rule: Compare; //比较规则
    version: string; //版本号
}

```

## Acknowledgment

[joo-browser-detect](https://github.com/shayanypn/joo-browser-detect)

## LICENCE

The MIT License (MIT)

Copyright (c) 2021 yugongjie yugongjie@gmail.com
npm package: @hbtv/canvas-border
Description: Canvas 边框
Latest version: 1.1.3

# @hbtv/canvas-border

## 安装方法

`npm install @hbtv/canvas-border --save`

## ChangeLog

## 1.1.3

- 发布

## 使用方法

```tsx
import React from 'react';
import { CanvasBorder1 } from '@hbtv/canvas-border';// 共有12个border样式

const Component = () => {
  return (
    <div>
      <CanvasBorder1 />
    </div>
  );
};

export default Component;
```

```typescript
export interface CanvasBorderProps {
  primaryColor?: string; // 主色调
  secondaryColor?: string; // 副色调
  width?: number; // 宽
  height?: number; // 高
  reverse?: boolean; // 反向
  radius?: number; // 圆角
}
```
npm package: @hbtv/code-editor
Description: 基于 react-ace 代码编辑器，支持多种语言，支持主题切换
Latest version: 1.0.2

# @hbtv/code-editor

## 安装方法

`yarn add @hbtv/code-editor`

## ChangeLog

### 1.0.2
    - 添加 php 支持

## 使用方法

```tsx
import React, { useEffect, useState } from 'react';
import CodeEditor from '../CodeEditor';

const Page = () => {
  const [value,setValue] = useState(''); 

  return (
    <CodeEditor
      mode="typescript"
      value={value}  
      onChange={setValue}
    />
  );
}

```

## API

```ts
// 支持的语言种类
export type ModeType =
  | 'typescript'
  | 'json'
  | 'javascript'
  | 'java'
  | 'html'
  | 'python'
  | 'css'
  | 'lua'
  | 'xml'
  | 'markdown'
  | 'mysql'
  | 'php';

// 支持的主题
export type ThemeType = 'dark' | 'light';

// 支持的属性
export interface CodeEditorProps {
  name?: string; // 名字 默认为: codeEditor
  value?: string;
  placeholder?: string;
  onChange?: (value: string) => void;
  mode?: ModeType; // 语言类型
  theme?: ThemeType; // 主题 'dark' | 'light'
  width?: string | number; // 宽度
  minHeight?: string | number; // 高度
}


```
npm package: @hbtv/color-picker
Description: 适用于 ant-design 4.x Form 的颜色取值器
Latest version: 1.0.5

# @hbtv/color-picker

## 安装方法

`yarn add @hbtv/color-picker`


## 使用方法

```tsx
import React,{ useState } from 'react'; 
import ColorPicker from './index';

const Usage = () => {
  const [color, setColor] = useState('transparent');
  return (
    <div>
     选择颜色：<ColorPicker value={color} onChange={setColor} />
    </div>
  );
}

export default Usage;
```


```typescript
export interface ColorPickerProps {
  output?: 'hex' | 'rgba'; // 输出颜色 模式 #fff 或 rgba(107,48,48,0.6)
  mode?: 'simple' | 'complex'; // 调色板颜色
  placement?: 'left' | 'right' | 'top' | 'bottom'; // 提示框位置 默认bottom
  style?: CSSProperties; // 样式
  showInput?: boolean; // 显示输入框 默认 true
  value?: string; // 颜色值
  onChange?: (value: string) => void; // onChange 事件
}
```
npm package: @hbtv/dnd-table
Description: 可拖拽表格
Latest version: 1.0.4

# @hbtv/dnd-table

## 使用方法

```tsx
import { DndTable } from './';

const columns = [
    { title:'ID', dataIndex:'id' },
    { title:'标签', dataIndex:'label' },
    { title:'键名', dataIndex:'value' },
];

const dataSource = [
    { id:'1', label:'标题', 'value':'title' },
    { id:'2', label:'描述', 'value':'description' },
    { id:'3', label:'内容', 'value':'content' },
];

<DndTable rowKey="id" columns={columns} dataSource={dataSource} />
```

MIT
npm package: @hbtv/file-storage
Description: ant design pro mock 辅助存储工具
Latest version: 1.1.0

# @hbtv/file-storage

主要解决在 `umijs` mock 辅助存储的问题

## 安装

`npm install @hbtv/file-storage`

## ChangeLog

### 1.1.0
- 使用打包工具进行重构 

## 使用

```ts
import FileStorage from '@hbtv/file-storage';


const fileName = 'users.json';
const fileStorage = new FileStorage(fileName);


// setItem
fileStorage.setItem([
  { id: 1, userName: 'Donald' },
  { id: 2, userName: 'Paul' },
  { id: 3, userName: 'Mark' },
]);

// getItem
fileStorage.getItem();

// create
fileStorage.create({ userName:"John"});

// update
fileStorage.where({id:1}).update({ userName:"Jane"});

// find
fileStorage.where({userName:'Paul'}).find();

// search
fileStorage.search();

// destroy
fileStorage.where({id:1}).destroy();

// orderBy
fileStorage.orderBy('id','desc').search();

// paginate
fileStorage.orderBy('id','desc').paginate();

```
npm package: @hbtv/hbtv-cli
Description: hbtv 命令行工具
Latest version: 2.0.4

# @hbtv/hbtv-cli

hbtv 命令行工具

## 安装方法

`npm install @hbtc/hbtv-cli -g`

## 使用方法

```sh
$ hbtv

? 选择你要安装的项目 (Use arrow keys)
❯ antd-pro 后台
  antd-pro 前台
  antd-pro 后台+前台
  library 开发模板

```

选择对应的提示进行操作


## LICENSE

MIT
npm package: @hbtv/html-editor
Description: 包含媒体上传组件的富文本编辑器
Latest version: 1.0.21

# @umi-material/html-editor

## Description

* 基于`tinymce`和`@hbtv/media-upload`的`React`htmlEditor组件

## Install

You must [install](https://www.tiny.cloud/docs/integrations/react/) tinyMce for react at first

```sh
npm install @hbtv/html-editor --save
```

## Usage

```javascript
import { HtmlEditor } from './index';
const HtmlEditorTest = () => {
  return (
    <Form>
      <Form.Item name="content" label="内容">
        <HtmlEditor />
      </Form.Item>
    </Form>
  );
};
```

## API

### HtmlEditorProps

---
|参数名|类型|是否必填|默认值|描述|
|-----|-----|-----|-----|-----|
|value|string|false|''||
|menuBar|boolean|false|true|是否显示tinymce的菜单栏|
|minHeight|number|false|false|320||
|onChange|(content:string)=>void|false||回调函数|
|imagesUploadHandler|function(blobInfo,succFun,failFun)|false||tinymce的图片上传,请查询tinymce的images_upload_handler|
|mediaResourceUpload|boolean|false|true|是否启用@hbtv/mediaUpload组件|
|uploadConfig|[UploadProps](#UploadProps)|false|DefaultUploadConfig|mediaUpload上传组件的参数|
|lazyLoad|boolean|true|true||
|apiKey|string|false|''|tinyMce的apiKey|

### UploadProps

---

* [参考@hbtv/media-upload组件](https://www.npmjs.com/package/@hbtv/media-upload)

* 没有 `onChange`  `visible` `showButton` `onCancel` ,`returnUrlOnly` 四个属性

```ts

const DefaultUploadConfig: UploadProps = {
  fileType: ['image', 'audio', 'video'],
  fileSize: '2m',
};

```

## ChangeLog
### 1.0.15
### 1.0.14

- 增加字体大小配置
- 增加上传文件的默认显示链接

### 1.0.12
- 增加字体颜色修改

### 1.0.11
- 修改`HTMLRender`的声明

### 1.0.10

- 优化 `index.tsx`
- 修改`HTMLRender`的声明

### 1.0.9

- 添加`HtmlRender`组件
- 修复`audio`不能显示的bug
- 更新`media-upload` 依赖的版本

### 1.0.8

* 调整了mediaUpload的嵌入位置
* 更新media-upload为1.0.20

### 1.0.7

* `lazyLoad` 缺省值为true
* 增加`imagesUploadHandler`参数,支持tinyMce的上传功能

### 1.0.5

* media-upload 升级到1.0.16

### 1.0.3

* 插入多媒体支持image,video和audio

## Related Efforts

* 基于antd4.0的Form组件封装含有自定表单配置,渲染,编辑的综合表单组件[@hbtv/pro-form](https://www.npmjs.com/package/@hbtv/pro-form)
* 包含媒体资源库的多媒体上传组件[@hbtv/media-upload](https://www.npmjs.com/package/@hbtv/media-upload)

## LICENSE

MIT
npm package: @hbtv/html-editor-3x
Description: 包含媒体上传组件的富文本编辑器
Latest version: 1.0.23

# @umi-material/html-editor

## Description

* 基于`tinymce`和`@hbtv/media-upload-3x`的`React`htmlEditor组件

## Install

You must [install](https://www.tiny.cloud/docs/integrations/react/) tinyMce for react at first

```sh
npm install @hbtv/html-editor-3x --save
```

## Usage

```javascript
import { HtmlEditor } from './index';
const HtmlEditorTest = () => {
  return (
    <Form>
      <Form.Item name="content" label="内容">
        <HtmlEditor />
      </Form.Item>
    </Form>
  );
};
```

## API

### HtmlEditorProps

---
|参数名|类型|是否必填|默认值|描述|
|-----|-----|-----|-----|-----|
|value|string|false|''||
|menuBar|boolean|false|true|是否显示tinymce的菜单栏|
|minHeight|number|false|false|320||
|onChange|(content:string)=>void|false||回调函数|
|imagesUploadHandler|function(blobInfo,succFun,failFun)|false||tinymce的图片上传,请查询tinymce的images_upload_handler|
|mediaResourceUpload|boolean|false|true|是否启用@hbtv/mediaUpload组件|
|uploadConfig|[UploadProps](#UploadProps)|false|DefaultUploadConfig|mediaUpload上传组件的参数|
|lazyLoad|boolean|true|true||
|apiKey|string|false|''|tinyMce的apiKey|
|customPlugins|string|false|''|自定义tinymce额外插件|
|customConfig|object|false|{}|自定义tinymce额外配置|
|customToolbar|string|false|''|自定义tinymce额外工具栏|

### UploadProps

---

* [参考@hbtv/media-upload-3x组件](https://www.npmjs.com/package/@hbtv/media-upload-3x)

* 没有 `onChange`  `visible` `showButton` `onCancel` ,`returnUrlOnly` 四个属性

```ts

const DefaultUploadConfig: UploadProps = {
  fileType: ['image', 'audio', 'video'],
  fileSize: '2m',
};

```

## ChangeLog
### 1.0.15
### 1.0.14

- 增加字体大小配置
- 增加上传文件的默认显示链接

### 1.0.12
- 增加字体颜色修改

### 1.0.11
- 修改`HTMLRender`的声明

### 1.0.10

- 优化 `index.tsx`
- 修改`HTMLRender`的声明

### 1.0.9

- 添加`HtmlRender`组件
- 修复`audio`不能显示的bug
- 更新`media-upload-3x` 依赖的版本

### 1.0.8

* 调整了mediaUpload的嵌入位置
* 更新media-upload-3x为1.0.20

### 1.0.7

* `lazyLoad` 缺省值为true
* 增加`imagesUploadHandler`参数,支持tinyMce的上传功能

### 1.0.5

* media-upload-3x 升级到1.0.16

### 1.0.3

* 插入多媒体支持image,video和audio

## Related Efforts

* 包含媒体资源库的多媒体上传组件[@hbtv/media-upload-3x](https://www.npmjs.com/package/@hbtv/media-upload-3x)

## LICENSE

MIT
npm package: @hbtv/list-input
Description: 可拖拽可编辑单元格的表单组件
Latest version: 1.4.19

# list-input 组件

## 安装方法

`npm install @hbtv/list-input --save`

## 更新日志

[查看更新日志](./CHANGELOG.md)

## 使用方法

```tsx
const columns: ListColumnType[] = [
    { title: '文本类型', dataIndex: 'text' },
    {
      title: '可选输入',
      dataIndex: 'select',
      componentType: 'select',
      config:{
        select:{
          mode:'multiple',
          valueEnum: [
            { label: '选项1', value: '1' },
            { label: '选项2', value: '2' },
          ],
        } 
      },
    },
    {
      title: '上传图片',
      dataIndex: 'image',
      componentType: 'upload',
      displayRule: 'image(64)',
      width: 300,
      config:{
        upload:{
          fileType:['image'],
        } 
      },
    },
];

<ListInput name="options" columns={columns} dnd />

```

## API

```ts
export interface ListInputProps<RecordType = any> {
  name?: string;
  columns: ListColumnType<RecordType>[];
  value?: RecordType[];
  onChange?: (value: RecordType[]) => void;
  dnd?: boolean;
  loading?: boolean;
  uploadServices?: ServicesType;
  actions?: React.ReactNode[];
  confirmOnRemoveRecord?: boolean;  // 1.2.8 加入
  valueEnum?: {
    [k: string]: ValueEnumType[] | TreeDataType[];
  };
}
```

```ts
export type ListDataType<RecordType = { [k: string]: any }> = RecordType & {
  isNew?: boolean;
  onEdit?: boolean;
  index?: number;
};
```

### columns 说明

```ts
// columns 的定义
export interface ListColumnType<RecordType = any> {
  title: string;
  dataIndex?: string;
  componentType?: ListComponentType;
  defaultValue?: any;
  rules?: RuleObject[];
  displayRule?: string;
  splitBy?: string;
  extra?: string;
  placeholder?: string;
  config?: {
    select?: SelectConfigType;
    upload?: MediaUploadProps;
    list?: ListInputProps;
    dateTime?: DateTimeConfigType;  // 1.2.2 加入
  };
  fields?: ListColumnType[];
  width?: number;
  allowEdit?: boolean;
  render?: (value: any, row: RecordType, index: number) => React.ReactNode;
}

// 组件类型的定义
export type ListComponentType =
  | 'text' // 1.2.8 后可以进行配置, 详细配置 TextConfigType
  | 'select'
  | 'arrayInput' // 新增
  | 'switch'
  | 'upload'|
  | 'dateTime'; // 1.2.2 开始直接这个了，详细配置在 config中


export interface TextConfigType {
  component?: 'text' | 'textArea' | 'inputNumber' | 'password'
  minRows?: number;  // 仅对  textArea
  step?: number | string; // 仅对 inputNumber
}

export interface DateTimeConfigType {
  component?: 'year' | 'month' | 'date' | 'time' | 'dateTime';
  mode?: 'picker' | 'range';
}


export interface SelectConfigType {
  component?: 'select' | 'checkbox' | 'radio' | 'cascader' | 'tree';
  mode?: 'single' | 'tags' | 'multiple';
  valueEnum?: ValueEnumType[] | string;
  changeOnSelect?: boolean;
}

// 枚举值的定义
export interface ValueEnumType {
  label: string;
  value: string;
}


export interface ListTreeType {
  value: string;
  title: string;
  children?: ListTreeType[];
}
```

### uploadServices 说明

详见`@hbtv/media-upload` 组件说明文档
npm package: @hbtv/media-upload
Description: 上传组件
Latest version: 2.1.15

# @hbtv/media-upload 文件上传组件

## 安装

`npm install @hbtv/media-upload --save`

## ChangeLog

[更新记录](./CHANGELOG.md)

## 使用方法

```tsx

import { MediaUpload } from '@hbtv/media-upload';

<MediaUpload
    services={services}
    fileSize="2m"
    rectSize="300*300"
    fileType={['image','video']}
    maxLength={1}
/>
```

## API

|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
|  fileKey  |  上传时的key  |  `string` | `file` |
|  preview  |  是否显示预览  |  `boolean`  | `true` |
|  multiple  |  是否允许选择多个  |  `boolean`  | `false` |
|  returnUrlOnly  |  是否进返回url, 否则返回整个media对象  |  `boolean`  | `true` |
|  services  |  上传的接口  |  详见下方定义  |    |
|  fileSize  |  文件大小  |  string，例如：`512k, 1Mb等`  |  2mb  |
|  rectSize  |  图片裁剪大小  | string，例如： `300*300`  |  `undefined`  |
|  fileType  |  文件类型  | array: `['image', 'file', 'video', 'audio', 'document']`  |  `['image']`  |
|  maxLength  |  允许上传的文件个数  |  number  |  `1`  |
|  buttonText  |  上传按钮文章  |  string  |  `上传`  |
|  data  |  key-value 结构的数据，用于 services  |  object  |  `{}`  |
|  value  |  初始值  |  `[]`或`string`  |  `undefined`  |
|  onChange  |  选中后的事件  |  `( string或[] ) => void`  |  `undefined`  |
|  showButton  |  是否显示上传按钮  |  `boolean`  |  `true`  |
|  visible  |  是的显示对话框  |  `boolean`  |  `false`  |
|  onCancel  |  对话框关闭后的回调  |  `() => void`  |  `undefined`  |
|  showTips  |  是否显示上传提示信息  |  `boolean`  |  `false`  |
|  showTips  |  是否显示上传提示信息  |  `boolean`  |  `false`  |
|  uploadByClient  |  是否客户端直传oss  |  `boolean`  |  `true`  |

## services 的定义

services 必须实现5个方法，并返回 `Promise`

```ts
interface ServicesType {
    search: (params?: ParamsType) => Promise<any>; // 查询列表 ParamsType 见下方
    destroy: ({ id }: { id: number }) => Promise<any>; // 删除
    upload: (data: FormData) => Promise<any>; // 上传
    token: (disk: string, data: TokenDataType) => Promise<any>; // 获取上传七牛的token  disk=qiniu
    find: ({ id }: { id: number | string }) => Promise<any>; // 查询单个上传文件, 主要用来查询状态
}

interface ParamsType  {
    page?: string;
    pageSize?: string;
    fileSize?: string;
    fileType?: string;
    rectSize?: string;
}

interface TokenDataType {
    fileType: string;
    fileName: string;
    [k:string]: any; // 父组件传来的数据
}

```
npm package: @hbtv/media-upload-3x
Description: 上传组件
Latest version: 2.1.9

# @hbtv/media-upload-3x 文件上传组件

## 安装

`npm install @hbtv/media-upload-3x --save` 

## ChangeLog

[更新记录](./CHANGELOG.md)


## 使用方法

```tsx

import { MediaUpload } from '@hbtv/media-upload-3x';

<MediaUpload
    services={services}
    fileSize="2m"
    rectSize="300*300"
    fileType={['image','video']}
    maxLength={1}
/>
```

## API

|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
|  preview  |  是否显示预览  |  `boolean`  | `true` |
|  multiple  |  是否允许选择多个  |  `boolean`  | `false` |
|  returnUrlOnly  |  是否进返回url, 否则返回整个media对象  |  `boolean`  | `true` |
|  services  |  上传的接口  |  详见下方定义  |    |
|  fileSize  |  文件大小  |  string，例如：`512k, 1Mb等`  |  2mb  |
|  rectSize  |  图片裁剪大小  | string，例如： `300*300`  |  `undefined`  |
|  fileType  |  文件类型  | array: `['image', 'file', 'video', 'audio', 'document']`  |  `['image']`  |
|  maxLength  |  允许上传的文件个数  |  number  |  `1`  |
|  buttonText  |  上传按钮文章  |  string  |  `上传`  |
|  data  |  key-value 结构的数据，用于 services  |  object  |  `{}`  |
|  value  |  初始值  |  `[]`或`string`  |  `undefined`  |
|  onChange  |  选中后的事件  |  `( string或[] ) => void`  |  `undefined`  |
|  showButton  |  是否显示上传按钮  |  `boolean`  |  `true`  |
|  visible  |  是的显示对话框  |  `boolean`  |  `false`  |
|  onCancel  |  对话框关闭后的回调  |  `() => void`  |  `undefined`  |
|  showTips  |  是否显示上传提示信息  |  `boolean`  |  `false`  |
|  showTips  |  是否显示上传提示信息  |  `boolean`  |  `false`  |
|  uploadVideoByServer  |  是否直接上传视频到服务器  |  `boolean`  |  `false`  |
|  uploadAudioByServer  |  是否直接上传音频到服务器  |  `boolean`  |  `false`  |

## services 的定义

services 必须实现5个方法，并返回 `Promise`

```ts
interface ServicesType {
    search: (params?: ParamsType) => Promise<any>; // 查询列表 ParamsType 见下方
    destroy: ({ id }: { id: number }) => Promise<any>; // 删除
    upload: (data: FormData) => Promise<any>; // 上传
    token: (disk: string, data: TokenDataType) => Promise<any>; // 获取上传七牛的token  disk=qiniu
    find: ({ id }: { id: number | string }) => Promise<any>; // 查询单个上传文件, 主要用来查询状态
}

interface ParamsType  {
    page?: string;
    pageSize?: string;
    fileSize?: string;
    fileType?: string;
    rectSize?: string;
}

interface TokenDataType {
    fileType: string;
    fileName: string;
    [k:string]: any; // 父组件传来的数据
}

```
npm package: @hbtv/slider-input
Description: 适用于 ant-design 4.x Form 的slider + inputNumber
Latest version: 1.0.1

# @hbtv/slider-input

## 安装方法

`yarn add @hbtv/slider-input`

## 使用方法

```tsx
import React,{ useState } from 'react'; 
import ColorPicker from './index';

const Usage = () => {
  const [width, setWidth] = useState(0);
  return (
    <div>
     宽度：<SliderInput value={width} onChange={setWidth} />
    </div>
  );
}

export default Usage;
```


```typescript
export interface SliderInputProps {
  suffix?: string | ReactNode; // 后缀
  style?: CSSProperties; // 样式
  min?: number; // 最小值
  max?: number; // 最大值
  step?: number; // 步长
  value?: number; // 当前值
  onChange?: (changeValue?: number | string) => void; // change 事件
}
```
npm package: @hbtv/style-input
Description: 适用于 ant-design 4.x Form 的 样式编辑器
Latest version: 1.0.11

# @hbtv/style-editor

## 安装方法

`yarn add @hbtv/style-editor@latest`

## 使用方法

```tsx
import { Form, Card } from 'antd';
import StyleInput, { StyleEditor } from './index';

const UsageInput = () => {
  const [form] = Form.useForm();
  // 可以使用form 各种方法
  return (
    <Form form={form}>
      <Form.Item name="style" label="样式">
        <StyleInput />
      </Form.Item>
    </Form>
  );
}


```

## API

```ts
// 适用于 FormItem 的 StyleInput
export interface StyleInputProps {
  allowStyle?: string[]; // 允许的样式 background | flex | font | border | sizePosition
  style?: CSSProperties; // 额外样式
  uploadServices?: ServicesType; // 上传服务
  value?: CSSProperties; // 值
  onChange?: (newValue: any) => void; // onChange时间
}

```
npm package: @hbu50/react-native-video-upload
Description: Compress and upload videos in bacckground
Author: Hossein Bukhamseen
Latest version: 0.3.0

# react-native-video-upload

Compress and upload videos in bacckground

## Installation

```sh
npm install react-native-video-upload
```

## Usage

```js
import VideoUpload from "react-native-video-upload";

// ...

const result = await VideoUpload.compress(fileUrl);
```
see `example` for more detailed usage

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @hbworld/ad-sdks
Description: 高级加密运行时库，支持代码压缩、加密和安全执行
Latest version: 0.0.1

# Encrypted Runtime Advanced

一个高级的代码加密运行时库，用于保护敏感的业务逻辑代码。通过压缩、加密和安全执行机制，确保您的核心代码不被轻易查看或篡改。

## 特性

- **强加密保护**：使用AES-256-CBC加密算法保护源代码
- **高效压缩**：使用GZIP压缩减小文件体积
- **代码混淆**：多层次代码混淆，包括控制流扁平化、死代码注入和字符串加密
- **代码压缩**：使用Terser进行高效代码压缩
- **高级混淆**：自定义混淆技术，包括字符串编码、诱饵代码和反调试机制
- **完整性验证**：通过哈希校验确保代码未被篡改
- **配置灵活**：支持环境变量和命令行选项
- **内存缓存**：优化性能，避免重复解密
- **详细日志**：彩色日志输出，清晰展示构建过程
- **随机密钥**：支持随机密钥生成（开发环境）

## 安装

```bash
npm install @hbworld/ad-sdk
```

## 使用方法

### 基本使用

```javascript

```

### 高级配置

#### 命令行选项

```bash
node build-encrypt.js [选项]
```

可用选项：

- `--no-obfuscate`：禁用代码混淆
- `--no-minify`：禁用代码压缩
- `--compression-level N`：设置压缩级别 (0-9, 默认为9)
- `--verbose`：启用详细日志
- `--quiet`：禁用详细日志
- `--help`：显示帮助信息

#### 环境变量

您可以通过环境变量自定义加密和解密行为：

```bash
# 构建时配置
SRC_FILE_PATH=/path/to/source.js      # 源代码文件路径
DIST_DIR_PATH=/path/to/output         # 输出目录路径
USE_RANDOM_KEY=true                   # 使用随机密钥
COMPRESSION_LEVEL=9                   # 压缩级别
OBFUSCATE=true                        # 启用代码混淆
MINIFY=true                           # 启用代码压缩
VERBOSE=true                          # 显示详细日志

# 运行时配置
VALIDATE_INTEGRITY=false              # 禁用完整性验证
IGNORE_INTEGRITY_FAILURE=true         # 忽略完整性验证失败
CACHE_ENABLED=true                    # 启用内存缓存
IGNORE_INTEGRITY_CHECK=true           # 忽略完整性检查（兼容旧版本）
```

## 安全建议

1. **密钥管理**：不要在代码中硬编码密钥，使用环境变量或安全的密钥管理服务
2. **定期更新**：定期更新密钥和加密算法
3. **多层防御**：将代码加密作为整体安全策略的一部分，不要仅依赖于此
4. **限制访问**：限制对加密密钥和原始源代码的访问

## 注意事项

- 此库主要用于保护知识产权和敏感业务逻辑，不适用于存储用户密码等高敏感数据
- 任何客户端代码最终都可能被逆向工程，此库提供的是增加逆向工程难度的方法

## 许可证

MIT
npm package: @hbwow/cli
Description: cli tool
Latest version: 1.2.3

# `@hbwow/cli`

> 脚手架工具

## 使用

方式一

```BASH
 npx @hbwow/cli
```

方式二

```BASH
# 1
npm install -g @hbwow/cli
# 2
create-hbwow-app
```

## 功能

### 1. 创建项目

> templateList: https://github.com/hbwow/more-repo/blob/master/packages/cli/src/ask/templates.ts

- v1.0.0
  - vite-react-swc-demo
  - umi4

### 2. 加入eslint、stylelint、prettier规则
npm package: @hbwow/hooks
Description: hooks
Author: hbwow
Latest version: 2.9.0

# `@hbwow/hooks`

> 1.x 版本基于 antd 4.x
>

> 2.x 版本基于 antd 5.x
>

## 使用

```BASH
npm i @hbwow/hooks
#
yarn i @hbwow/hooks
#
pnpm i @hbwow/hooks
```
npm package: @hbwow/utils
Description: utils
Latest version: 2.6.0

# `@hbwow/utils`

> 1.x 版本基于 antd 4.x

> 2.x 版本基于 antd 5.x

## 使用

```BASH
npm i @hbwow/utils
#
yarn i @hbwow/utils
#
pnpm i @hbwow/utils
```
npm package: @hbwow/validate-antd
Description: validate-antd
Latest version: 1.1.0

# `@hbwow/validate-antd`

> 将 antd 表单校验逻辑以及校验规则抽离

## 使用

### 全局配置

新增配置时

```tsx
import { ConfigProvider } from '@hbwow/validate-antd';

<ConfigProvider icon={} rulesMap={{}}>
  <App />
</ConfigProvider>;
```

### 具体实例

**默认**

```tsx
<Form.Item
  label='手机号'
  name='phone'
  rules={[
    { required: true, message: '请输入手机号' },
    {
      pattern: new RegExp(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/),
      message: '请输入正确的手机号码',
    },
  ]}
>
  <Input placeholder='请输入'></Input>
</Form.Item>
```

**使用 @hbwow/validate-antd**

方式一

```tsx
import { useGetRules } from '@hbwow/validate-antd';
const { getRules } = useGetRules();

<Form.Item
  label='手机号'
  name='phone'
  rules={[...getRules({ name: 'isEmpty' }), ...getRules({ name: 'phone', optional: true })]}
>
  <Input placeholder='请输入'></Input>
</Form.Item>;
```

方式二（自定义校验规则）

```tsx
import { ConfigProvider } from '@hbwow/validate-antd';

<ConfigProvider
  rulesMap={{
    isEmptyIsPhone: (value: string) => {
      if (!value) {
        return 'value不能为空！';
      }
      if (!new RegExp(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/).test(value)) {
        return '请输入正确的手机号码！';
      }
      return '';
    },
  }}
>
  <App />
</ConfigProvider>;

// ----------------------------------------

const { getRules } = useGetRules();

<Form.Item label='手机号' name='phone' rules={[...getRules({ name: 'isEmptyIsPhone' })]}>
  <Input placeholder='请输入'></Input>
</Form.Item>;
```

## API

### ConfigProvider

| 参数     | 说明           | 类型                                   | 默认值 | 版本  |
| -------- | -------------- | -------------------------------------- | ------ | ----- |
| icon     | 校验提示的icon | React.ReactNode                        | -      | 0.0.1 |
| rulesMap | 新增校验规则   | Record<string, (value: any) => string> | -      | 0.0.1 |

#### 默认的 rulesMap

| name     | 说明                   | 版本  |
| -------- | ---------------------- | ----- |
| isEmpty  | 不能为空               | 0.0.1 |
| phone    | 手机号                 | 0.0.1 |
| idCard   | 身份证                 | 0.0.1 |
| email    | 邮箱                   | 0.0.1 |
| passport | 护照（包含香港、澳门） | 0.0.1 |

### getRules

| 参数     | 说明           | 类型    | 默认值 | 版本  |
| -------- | -------------- | ------- | ------ | ----- |
| name     | 规则名         | string  | -      | 0.0.1 |
| required | 是否为必选字段 | boolean | true   | 0.0.1 |
| optional | 是否选填       | boolean | false  | 0.0.1 |