open-index/open-npm huggingface dataset:
npm package: @panosoft/require-string
Description: Require a module from a string in memory instead of loading it from the file system.
Latest version: 0.1.5

# require-string

Require a module from a string in memory instead of loading it from the file system.

[![npm version](https://img.shields.io/npm/v/@panosoft/require-string.svg)](https://www.npmjs.com/package/@panosoft/require-string)
[![npm license](https://img.shields.io/npm/l/@panosoft/require-string.svg)](https://www.npmjs.com/package/@panosoft/require-string)
[![Travis](https://img.shields.io/travis/panosoft/require-string.svg)](https://travis-ci.org/panosoft/require-string)
[![David](https://img.shields.io/david/panosoft/require-string.svg)](https://david-dm.org/panosoft/require-string)
[![npm downloads](https://img.shields.io/npm/dm/@panosoft/require-string.svg)](https://www.npmjs.com/package/@panosoft/require-string)

## Installation

```sh
npm install @panosoft/require-string
```

## Usage

```js
var requireString = require('@panosoft/require-string');

var module = requireString('module.exports = {number: 1}');

console.log(module.number); // 1
```

## API

- [`requireString`](#requireString)

---

<a name="requireString"></a>
#### requireString ( content [, filename] )

Works just like Node's `require()` except it loads a module from a string instead of reading it from the file system.

A `filename` can be supplied which provides a base path from which relative `require()` paths in the string module can be resolved.

Returns the string module's `module.exports` object just like Node's `require()`.

__Arguments__

- `content` - The string to load as a module.
- `filename` - The filename to apply to the module. This is used in resolving relative paths passed to `require()` within the string module. Defaults to `''` which results in relative `require()` paths being resolved relative to the current working directory of the parent Node process.

__Example__

Assuming we have the following file locally, `path/to/relative/index.js`:

```js
var path = require('path');

module.exports = path;
```

Then,

```js
var requireString = require('@panosoft/require-string');

var filename = 'path/to/string/module.js';
var moduleString = ''
  + ' var relativeModule = require(\'../relative\');'
  + ' module.exports = relativeModule.resolve;';

var module = requireString(moduleString, filename);

console.log(module('.')); // current working directory
```
npm package: @panosvoudouris/addon-versions
Description: Navigate different versions of storybook style guides.
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# storybook-addon-versions

### Install
```
npm i @panosvoudouris/addon-versions
```

This addon allows you to navigate different versions of your components, if you have a setup that produces a different static Storybook build for each of your versions. As such, if you build a static Storybook and host it in, say, the following directory structure:
```
- static-storybook
|-- 0.0.1
|-- 0.0.2
|-- 0.1.2
|-- 0.2.5
```

the addon will allow you to navigate the various versions via the `Versions` panel:

![Versions demo](./docs/versions-demo.gif)

## Configuration
The addon attempts to get a list of available style guide versions from the root of your host. If they are found it will show a dropdown which then lets you navigate to the various versions, as such allowing users to see how a component may have changed over different versions.

### Usage
1. Include the addon in your `addons.js`
    - `import '@panosvoudouris/addon-versions/register';`
1. Create the Versions config at `.storybook/storybook-config.json`
    - ```{
        "storybook": {
          "versions": {
            "availableVersions": [
              "0.0.1",
              "0.0.2",
              "0.1.2",
              "0.2.5"
            ],
            "hostname": "localhost:8000",
            "localhost": "localhost:9001",
            "regex": "\/([^\/]+?)\/?$"
          }
        }
      }
      ```

### Options
- `availableVersions`: An array of available versions.
- `hostname`: The hostname of where the static builds are. For now you need to add the path if you are expecting links to 
work in a local dev build but *not* in your normal hosted config.
- `localhost`: Where the local dev build is, when running in dev mode
- `regex`: This is for a regular expression that will extract the version number for your URL. This is dependant on the way you store the static storybook builds. The example above will work for the format `http://localhost:port/<version>/` so for example, version `0.1.2` would be expected to be found like this `http://mystorybook/0.1.2/`.

### Notes

This is a fork of https://github.com/buildit/storybook-addon-versions It appears that repo is now defunct and no longer maintained so I've forked it to continue maintenance (eg upgrade for latest storybook etc) and upgrades.
npm package: @panotec/ngx-barcode
Description: An angular component for Angular 4+ for creating 1-D barcodes based on Lindell's JsBarcode
Author: Bryon Williams
Latest version: 0.2.12

# Edit SVG
You can use the cloned component like this:
```xml
<svg>
  <svg:g
    ngx-svg-barcode
    bc-value="key"
    [bc-display-value]="true"
  ></svg:g>
</svg>
```

<div align="center">
  <img src="https://cdn.rawgit.com/yobryon/ngx-barcode/master/docs/assets/ngx-barcode.svg" width="200px" alt="ngx-barcode">
  <h1 align="center">ngx-barcode</h1>
  <p>A barcode component for Angular4+.</p>
</div>

___

An angular component for Angular 4+ for creating 1-D barcodes based on [Lindell's JsBarcode](https://github.com/lindell/JsBarcode).

## Demo 
Basic [demo](https://yobryon.github.io/ngx-barcode/demo/).

## Features
- supports all barcode formats provided by JsBarcode
  - CODE128
  - EAN
  - CODE39
  - ITF-14
  - MSI
  - Pharmacode
  - Codabar

## Installation

To use ngx-barcode in your project, install it via npm:

```bash
$ npm install ngx-barcode --save
```

## Usage

Import the NgxBarcodeModule into your desired module:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import ngx-barcode module
import { NgxBarcodeModule } from 'ngx-barcode';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxBarcodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once the library is imported, you can use the ngx-barcode component in your Angular application:

```xml
<!-- Adding a barcode in app.component.html -->
<h1>
  {{title}}
</h1>
<ngx-barcode [bc-value]="value" [bc-display-value]="true"></ngx-barcode>
```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Bryon Williams](mailto:bryon.williams@live.com)
npm package: @panprices/install-structlog
Description: A script for getting the latest panprices structlog config into your python project
Latest version: 1.3.0

# install-structlog

![npm-badge](https://img.shields.io/npm/v/@panprices/install-structlog)

A script for getting the latest panprices structlog config into your python project.

Use it by running:

```
npx @panprices/install-structlog
```

## How to setup

Run `npm install` to install the dependencies. Please use prettier to format your code.

## How to test

Run `npm run test` to test the code. You can run `npm run test --skip-install` to skip the pipenv-installation step.

## How to deploy

We deploy using semantic-release. Make sure to write [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) and the rest is automatic.
npm package: @panrpeng/scomp-cli
Description: smart组件cli工具
Author: panruipeng
Latest version: 1.1.23

# `@panrpeng/scomp-cli`

## 安装
```
npm install -g @panrpeng/scomp-cli
```
## 使用

```
# 创建项目
scomp-cli create <projName>
# 添加组件
scomp-cli add <compName>
```
npm package: @panrpeng/scomp-common-comps
Description: smart组件的公共组件
Author: panruipeng
Latest version: 0.0.6

# `@panrpeng/scomp-common-comps`

> TODO: description

## Usage

```
const scompCommonComps = require('@panrpeng/scomp-common-comps');

// TODO: DEMONSTRATE API
```
npm package: @panrpeng/scomp-monorepo
Description: smart组件项目的模板
Author: panruipeng
Latest version: 1.0.1

# `@panrpeng/scomp-monorepo`

> TODO: description

## Usage

```
const scompMonorepo = require('@panrpeng/scomp-monorepo');

// TODO: DEMONSTRATE API
```
npm package: @panrpeng/scomp-webpack-config
Description: smart组件webpack构建配置
Author: panruipeng
Latest version: 1.0.21

# `@panrpeng/scomp-webpack-config`

> TODO: description

## Usage

```
const scompWebpackConfig = require('@panrpeng/scomp-webpack-config');

// TODO: DEMONSTRATE API
```
npm package: @panrpeng/webpack-config
Description: 开箱即用 webpack配置
Author: peterfont@163.com
Latest version: 1.0.5

# 开箱即用的webpack配置

## 使用

### 创建目录：
```
my-app
  |_src
    |_index.js
    |_index.html
  |_webpack.config.js
  |_package.json
  |_package-lock.json
```
### 编辑webpack.config.js
```
const config = require('@panrpeng/webpack-config');

module.exports = config;
```
### 编辑package.json
```
"scripts": {
  "dev": "NODE_ENV=development webpack-dev-server",
  "build-prod": "rm -rf dist/* && NODE_ENV=production webpack",
  "analysis": "npm_config_report=true npm run build-prod",
  "check-types": "tsc"
}
```
### 安装webpack-config
```
npm i -D @panrpeng/webpack-config
```
###  启动
```
npm run dev
```
npm package: @panrpeng/webpack-config-cli
Description: 提供一个CLI工具自动创建项目模板
Author: panrpengorz
Latest version: 0.0.3

# webpack-config-cli
提供一个工具自动创建项目模板
## 安装
```
$ npm i -g @panrpeng/webpack-cofig-cli
```
## 使用
```
$ webpack-cofig-cli init my-app # my-app为项目名称
$ cd my-app # 进入到项目目录
$ npm i # 安装项目依赖
$ npm run dev # 执行开发环境命令
```
npm package: @panstav/dependency-tree-cli
Description: > Iterates through an npm package dependency tree and outputs a nice tree along with other usefulness.
Latest version: 0.3.2

# Dependency Tree Cli

> Iterates through an npm package dependency tree and outputs a nice tree along with other usefulness.

## Installation

* Traverse to where you're comfortable with `$ cd /path/to/my/comfort/zone`
* `$ git clone https://github.com/panstav/dependency-tree-cli.git`
* `$ cd dependency-tree-cli`
* Optionally you may want to link it for global use with `$ npm link`

## Usage

    Usage: npm-tree <npm-package-name> [options]

    Options:
      --version, -v   Choose the package semver
      --check, -c     Scan for vulnerability @ Snyk/vulndb  [boolean]
      --strategy, -s  Choose a strategy for handling queried dependencies
      --timer, -t     Time the query  [boolean]
      --json, -j      JSON output  [boolean]
      --dry, -d       Dry Run, won't print the tree  [boolean]
      -h, --help      Show help  [boolean]
npm package: @panstav/is-heroku
Description: Checks if currently on a Heroku instance
Author: Stav Geffen
Latest version: 0.0.5

# is-heroku [![Build Status](https://travis-ci.org/panstav/is-heroku.svg?branch=master)](https://travis-ci.org/panstav/is-heroku)

> Checks if it's running on a Heroku instance by asserting process.env.DYNO

## Installation

    npm install @panstav/is-heroku

## Usage

```js
const isHeroku = require('@panstav/is-heroku');

// not on heroku
console.log(isHeroku());
// -> false

// on Heroku
console.log(isHeroku());
// -> true
```
npm package: @pansy/amap-v2-types
Description: 高德开放平台官网提供的地图 JSAPI 2.0 的 Typescript 声明文件
Author: wangxingkang
Latest version: 1.0.0

# amap-v2-types
高德开放平台官网提供的地图 JSAPI 2.0 的 Typescript 声明文件
npm package: @pansy/arabic-chinese-converter
Description: Conversion between Chinese and Arabic numerals
Author: wangxingkang
Latest version: 1.0.2

<h1 align="center">@pansy/arabic-chinese-converter</h1>

<h2 align="center">
Conversion between Chinese and Arabic numerals.
</h2>

[![NPM version](https://img.shields.io/npm/v/@pansy/arabic-chinese-converter.svg?style=flat)](https://npmjs.org/package/@pansy/arabic-chinese-converter)
[![NPM downloads](https://img.shields.io/npm/dm/@pansy/arabic-chinese-converter.svg?style=flat)](https://npmjs.org/package/@pansy/arabic-chinese-converter)

## 📦 安装

- npm 安装

```bash
npm install @pansy/arabic-chinese-converter --dev --save
```

- yarn 安装

```bash
yarn add @pansy/arabic-chinese-converter --dev
```

## 🔨 使用

```
import arabicChinese from '@pansy/arabic-chinese-converter';

const arabicChinese = new ArabicChinese();

console.log(arabicChinese.encode(1)); // 一
console.log(arabicChinese.decode('一)); // 1
```
npm package: @pansy/array-move
Description: 将数组项移动到其他位置
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/array-move</h1>

> 将数组项移动到其他位置

## 📦 安装

```
// npm
npm install @pansy/array-move --save

// yarn
yarn add @pansy/array-move

```

## 🔨 使用

```
import arrayMove from '@pansy/array-move';

const input = ['a', 'b', 'c'];

arrayMove(input, 1, 2);
// => ['a', 'c', 'b']

arrayMove(input, -1, 0);
// => ['c', 'a', 'b']

arrayMove(input, -2, -3);
// => ['b', 'a', 'c']
```
npm package: @pansy/array-to-tree
Description:  将普通的数组（带有指向父节点的指针）转换为嵌套的数据结构
Latest version: 0.3.0

<h1 align="center">@pansy/array-to-tree</h1>

> 将普通的数组（带有指向父节点的指针）转换为嵌套的数据结构，支持方便的查找到任意节点的数据

## 📦 安装

```
// npm
npm install @pansy/array-to-tree --save

// yarn
yarn add @pansy/array-to-tree

```

## 🔨 使用

- 使用parentId模式进行转换

```ts
import { arrayToTree } from '@pansy/array-to-tree';

const source = [
  { id: '001', parentId: '' },
  { id: '002', parentId: '' },
  { id: '001001', parentId: '001' },
  { id: '001001001', parentId: '001001' },
  { id: '001002', parentId: '001' },
];

arrayToTree(source).treeData;

// 结果如下
[
  {
    id: '001',
    parentId: '',
    parentIds: [],
    children: [
      {
        id: '001001',
        parentId: '001',
        parentIds: ['001'],
        children: [
          {
            id: '001001001',
            parentId: '001001',
            parentIds: ['001', '001001']
          },
        ]
      },
      {
        id: '001002',
        parentId: '001',
        parentIds: ['001']
      },
    ],
  },
  {
    id: '002',
    parentId: '',
    parentIds: []
  },
];
```

- 使用parentIds模式进行转换

```ts
import { arrayToTree } from '@pansy/array-to-tree';

const source = [
  { id: '001', parentIds: [] },
  { id: '002', parentIds: [] },
  { id: '001001', parentIds: ['001'] },
  { id: '001001001', parentIds: ['001', '001001'] },
  { id: '001002', parentIds: ['001'] },
];

arrayToTree(source).treeData;

// 转换结果如下
[
  {
    id: '001',
    parentIds: [],
    children: [
      {
        id: '001001',
        parentIds: ['001'],
        children: [
          { id: '001001001', parentIds: ['001', '001001'] },
        ]
      },
      { id: '001002', parentIds: ['001'] },
    ],
  },
  { id: '002', parentIds: [] },
];
```

## API

`arrayToTree(data, [options])`

### 参数

- Array data: 需要转换的数组
- Object options: 包含以下字段的对象：
  - rootId (string | number) 根节点的值，默认: `''`
  - fieldNames (object)
    - id (string) 自定义节点 id 的字段，默认: `id`
    - parentId (string) 自定义节点 parentId 的字段，默认: `parentId`
    - parentIds (string) 自定义节点 parentIds 的字段，默认: `parentIds`
    - children (string)  自定义节点 children 的字段，默认: `children`
  - mode (string) 创建树的模式，默认: `parentId`
  - transformItem(function) 在转换之前处理每项的数据

### 返回

```ts
{
  // 转换后的数据
  treeData: array[];
  // 树每个节点的以 id 为 key 的对象
  treeMap: object;
}

```
npm package: @pansy/china-division
Description: 中国省市区数据
Author: wangxingkang
Latest version: 2.1.0

<h1 align="center">
  @pansy/china-division
</h1>

> 基于[china-division](https://github.com/modood/Administrative-divisions-of-China), 提供中国省市区数据并提供相应的工具方法

**提供两种数据格式**

- `{ v: string; n: string; c: {...}[] }`
- `{ label: string; value: string; children: {...}[] }` 适用于`Antd`级联选择组件

如有更新数据的需求，请修改`china-division`版本，执行`npm run export:data`即可。

## ✨ 特性

- 🌈 基于`china-division`，提供了香港、澳门、台湾的数据
- 💻 使用 TypeScript 编写，提供完善的类型定义
- 🌴 提供`js`、`json`两种数据引用方式

## 🏗 安装

```sh
# yarn
yarn add @pansy/china-division

# npm
npm install @pansy/china-division --save

# pnpm 
pnpm add @pansy/china-division
```

## 🔨 使用

```ts
// Antd Cascader组件使用
import cascaderOptions, { DivisionUtil } from '@pansy/china-division';

const divisionUtil = new DivisionUtil(cascaderOptions);

// 返回源数据
divisionUtil.getSourceData(); 

// 返回省级别数据
divisionUtil.getProvinces(); 

// 返回指定Code的所有子节点
divisionUtil.getChildrenByCode('110000'); 

// 返回指定Code的名称
divisionUtil.getNameByCode('110000'); 

// 返回指定Code的节点
divisionUtil.getDivisionByCode('110000'); 
```

## ⌨️ 本地开发

```sh
$ git clone git@github.com:pansyjs/china-division.git
$ cd ./china-division
# 安装依赖
$ pnpm install
# 导出数据
$ npm run export
# 运行测试用例
$ npm run test
# 编译项目
$ npm run build
```

## 🌟 社区互助

| Github Issue                                                 | 钉钉群                                                                                     | 微信群                                                                                   |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [issues](https://github.com/pansyjs/china-division/issues) | <img src="https://github.com/alitajs/alita/blob/master/public/dingding.png" width="100" /> | <img src="https://github.com/alitajs/alita/blob/master/public/wechat.png" width="100" /> |
npm package: @pansy/classnames
Description: A simple javascript utility for conditionally joining classNames together
Author: Pansy Team
Latest version: 1.0.1

<div align="center">
  <h1>ClassNames</h1>
</div>

> A simple javascript utility for conditionally joining classNames together

[![NPM version](https://img.shields.io/npm/v/@pansy/classnames.svg?style=flat)](https://npmjs.org/package/@pansy/classnames)
[![NPM downloads](http://img.shields.io/npm/dm/@pansy/classnames.svg?style=flat)](https://npmjs.org/package/@pansy/classnames)

## ✨ 特性

* 🚀 使用TypeScript编写，提供完整的类型定义。

## 📦 安装

```
// npm
npm install @pansy/classnames --save

// yarn
yarn add @pansy/classnames
```

## 🔨 使用

```
import classNames from '@pansy/classnames';

classNames('lotus-button', {
  [`is-active`]: true
})

// >> 'lotus-button is-active'
```
npm package: @pansy/clear-console
Description: cross platform console clear
Author: wangxingkang
Latest version: 1.2.0

<h1 align="center">@pansy/clear-console</h1>

<h3 align="center">Cross platform console clear</h3>

[![Alita](https://img.shields.io/badge/alitajs-pansy%20clear-console-blue.svg)](https://github.com/alitajs)
[![NPM version](https://img.shields.io/npm/v/@pansy/clear-console.svg?style=flat)](https://npmjs.org/package/@pansy/clear-console)
[![NPM downloads](http://img.shields.io/npm/dm/@pansy/clear-console.svg?style=flat)](https://npmjs.org/package/@pansy/clear-console)

## 🏗 安装

```
// npm
npm install @pansy/clear-console --dev --save

// yarn
yarn add @pansy/clear-console --dev
```

## 🔨 使用

```ts
const clearConsole = require('@pansy/clear-console');
// or 
// import clearConsole from '@pansy/clear-console';

clearConsole();
```
npm package: @pansy/cli
Description: A zero configuration library bundler.
Author: wangxingkang
Latest version: 0.1.6

<h1 align="center">pansy</h1>

<div align="center">
A zero configuration library bundler.
</div>

[![Alita](https://img.shields.io/badge/alitajs-pansy-blue.svg)](https://github.com/walrus-plus/pansy)
[![NPM version](https://img.shields.io/npm/v/@pansy/cli.svg?style=flat)](https://npmjs.org/package/@pansy/cli)

> 本项目主要参考[bili](https://github.com/egoist/bili)，做些定制化功能。

## ✨ 特性

- 🚀 快速，默认情况下零配置
- 📦 基于 rollup 进行打包
- 🚗 基于 Buble/Babel/TypeScript 自动转换 JS 文件
- 🎶 如果需要，很容易使用 Rollup 插件目录
- 🐚 支持别名设置，默认`@`指向项目`src`目录
- 🎓 支持 `lerna` -- 待支持
- 💅 内置支持 `CSS` `Sass` `Stylus` `Less` `CSS modules`
- 🚨 友好的错误记录。
- 💻 使用 TypeScript 编写

## 📦 安装

- npm 安装

```bash
npm install @pansy/cli --dev --save
```

- yarn 安装

```bash
yarn add @pansy/cli --dev
```

## 🔨 使用

- 创建入口文件

```
// src/index.js
const test = 'Hello World';

export function main() {
  console.log(test);
}
```

- 执行编译

```bash
cd /my-project
pansy
```

## 📝 文档

https://pansy.now.sh

## ⌨️ 本地开发

```
# 克隆项目
$ git clone git@github.com:walrus-plus/pansy.git

# 切换到项目目录
$ cd pansy

# 安装依赖
$ yarn bootstrap

# 编译项目
$ yarn types && yarn build
```

## 🌟 社区互助

| Github Issue                                          | 钉钉群                                                                                     | 微信群                                                                                   |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [issues](https://github.com/walrus-plus/pansy/issues) | <img src="https://github.com/alitajs/alita/blob/master/public/dingding.png" width="100" /> | <img src="https://github.com/alitajs/alita/blob/master/public/wechat.png" width="100" /> |
npm package: @pansy/common-regexp
Description: 常见正则表达式
Author: Pansy Team
Latest version: 0.3.6

<h1 align="center">@pansy/common-regexp</h1>

> 常见正则表达式

## 📦 安装

```
// npm
npm install @pansy/common-regexp --save

// yarn
yarn add @pansy/common-regexp

```

## 🔨 使用

```
import { phoneRegexp } from '@pansy/common-regexp';
```
npm package: @pansy/custom-scrollbar-react
Description: 自定义滚动条组件
Latest version: 1.0.1

<h1 align="center">
  @pansy/custom-scrollbar-react
</h1>

<div align="center">
  自定义您的滚动条样式。
</div>

<br />
<p align="center">
  <a href="https://github.com/pansyjs/custom-scrollbar/network">
    <img src="https://img.shields.io/github/forks/pansyjs/custom-scrollbar.svg" alt="Forks">
  </a>
  <a href="https://github.com/pansyjs/custom-scrollbar/stargazers">
    <img src="https://img.shields.io/github/stars/pansyjs/custom-scrollbar.svg" alt="Stars">
  </a>
  <a href="https://www.npmjs.com/package/@pansy/custom-scrollbar-react">
    <img src="https://img.shields.io/npm/v/@pansy/custom-scrollbar-react.svg" alt="npm version">
  </a>
  <a href="https://github.com/umijs/father">
    <img src="https://img.shields.io/badge/build%20with-father-028fe4.svg" alt="Build With father">
  </a>
  <a href="https://d.umijs.org/">
    <img src="https://img.shields.io/badge/docs%20by-dumi-blue" alt="docs by dumi">
  </a>
</p>

## 🏗 安装

```sh
# npm install
$ npm install @pansy/custom-scrollbar-react --save

# yarn install
$ yarn add @pansy/custom-scrollbar-react

# pnpm install
$ pnpm i @pansy/custom-scrollbar-react
```

## 🔨 使用

```tsx
import CustomScrollbar from '@pansy/custom-scrollbar-react';
import '@pansy/custom-scrollbar-react/scrollbar.less';

export default () => {
  return (
    <CustomScrollbar
      style={{
        maxHeight: 300,
      }}
    >
      <p>123</p>
      <p>124</p>
      <p>123</p>
      <p>124</p>
      <p>123</p>
      <p>124</p>
      <p>123</p>
      <p>124</p>
      <p>123</p>
      <p>124</p>
      <p>123</p>
      <p>124</p>
      <p>123</p>
      <p>124</p>
    </CustomScrollbar>
  )
}
```
npm package: @pansy/debounce-promise
Description: 创建一个去抖动版本的承诺返回函数
Latest version: 0.2.0

<h1 align="center">
  @pansy/debounce-promise
</h1>

<div align="center">
创建一个去抖动版本的承诺返回函数
</div>

## 📦 安装

```
// npm
npm install @pansy/debounce-promise --save

// yarn
yarn add @pansy/debounce-promise
```

## 🔨 使用

```ts
import { debouncePromise } from '@pansy/debounce-promise';

const debounced = debouncePromise(async (value) => value, 100);

[1, 2, 3, 4].forEach(num => {
  return debounced('call no #' + num).then(value => {
    console.log(value)
  })
})

//=> call no #4
//=> call no #4
//=> call no #4
//=> call no #4
```
npm package: @pansy/delay
Description: 休眠函数
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/delay</h1>

> 休眠函数

## 📦 安装

```
// npm
npm install @pansy/delay --save

// yarn
yarn add @pansy/delay

```

## 🔨 使用

```
import delay from '@pansy/delay';

delay(1000).then(() => {
  // you code
})
```
npm package: @pansy/dent
Description: 每一行紧跟前导空白的插入值为多行时，保持缩进，且移除每一行的公共前导空白
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/dent</h1>

> 每一行紧跟前导空白的插入值为多行时，保持缩进，且移除每一行的公共前导空白

## 📦 安装

```
// npm
npm install @pansy/dent --save

// yarn
yarn add @pansy/dent

```

## 🔨 使用

```
import isArray from '@pansy/dent';

dent`hello world`
```
npm package: @pansy/enhance-type
Description: 增强类型
Author: Pansy Team
Latest version: 0.3.6

<h1 align="center">@pansy/enhance-type</h1>

> 一些类型定义

## 📦 安装

```
// npm
npm install @pansy/enhance-type --save

// yarn
yarn add @pansy/enhance-type

```

## 🔨 使用

```
import { AnyFunction } from '@pansy/enhance-type';

const fun: AnyFunction = () => {};
```
npm package: @pansy/get-type
Description: 检测 `value` 的类型
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/get-type</h1>

> 检测 `value` 的类型

## 📦 安装

```
// npm
npm install @pansy/get-type --save

// yarn
yarn add @pansy/get-type

```

## 🔨 使用

```
import getType from '@pansy/get-type';

console.log(getType('')); // String
```
npm package: @pansy/group-by
Description: 根据迭代函数返回的值对数组进行分组。
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/group-by</h1>

> 根据迭代函数返回的值对数组进行分组。

## 📦 安装

```
// npm
npm install @pansy/group-by --save

// yarn
yarn add @pansy/group-by

```

## 🔨 使用

```
import groupBy from '@pansy/group-by';

const list = [
  { module: 'module1', action: 'action1' },
  { module: 'module1', action: 'action2' },
  { module: 'module2', action: 'action1' }
];

console.log(groupBy(list, item => item.module));

// => {
// =>   module1: [
// =>     { module: 'module1', action: 'action1' },
// =>     { module: 'module1', action: 'action2' },
// =>   ],
// =>   module2: [
// =>     { module: 'module2', action: 'action1' }
// =>   ]
// => }
```
npm package: @pansy/hooks
Description: react hooks
Author: Pansy Team
Latest version: 2.3.2

<h1 align="center">Pansy Hooks</h1>

<h4 align="center">Awesome react hooks<h4>

[![NPM version][image-1]][1] [![NPM downloads][image-2]][2]

## ✨ 特性

* 🚄 包含丰富的基础 Hooks。
* 💻 使用 TypeScript 构建，提供完整的类型定义文件。

## 🏗 安装

```sh
// npm 安装
npm install --save @pansy/hooks

// yarn 安装
yarn add @pansy/hooks
```

## 🔨使用

```javascript
import { useModal } from '@pansy/hooks';
```

[1]:	https://www.npmjs.com/package/@pansy/hooks
[2]:	https://npmjs.org/package/@pansy/hooks

[image-1]:	https://img.shields.io/npm/v/@pansy/hooks.svg?style=flat
[image-2]:	https://img.shields.io/npm/dm/@pansy/hooks.svg?style=flat
npm package: @pansy/indent
Description: 每一行紧跟前导空白的插入值为多行时，保持缩进。
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/indent</h1>

> 每一行紧跟前导空白的插入值为多行时，保持缩进

## 📦 安装

```
// npm
npm install @pansy/indent --save

// yarn
yarn add @pansy/indent

```

## 🔨 使用

```
import isArray from '@pansy/indent';

indent`hello world`
```
npm package: @pansy/is-array
Description: 判断当前值是否为数组
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-array</h1>

> 判断当前值是否为数组

## 📦 安装

```
// npm
npm install @pansy/is-array --save

// yarn
yarn add @pansy/is-array

```

## 🔨 使用

```
import isArray from '@pansy/is-array';

let name = mull;

if (!isArray(name)) {
  console.log('value is not array');
}
```
npm package: @pansy/is-boolean
Description: 判断当前值是否为boolean
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-boolean</h1>

> 判断当前值是否为 boolean

## 📦 安装

```
// npm
npm install @pansy/is-boolean --save

// yarn
yarn add @pansy/is-boolean

```

## 🔨 使用

```
import isNull from '@pansy/is-boolean';

let value = true;

console.log(value); // true
```
npm package: @pansy/is-date
Description: 判断当前值是否是一个日期
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-date</h1>

> 判断当前值是否为一个日期

## 📦 安装

```
// npm
npm install @pansy/is-date --save

// yarn
yarn add @pansy/is-date

```

## 🔨 使用

```
import isDate from '@pansy/is-date';

let value = new Date();

console.log(isDate(value)); // true
```
npm package: @pansy/is-empty-object
Description: 判断当前值是否为一个空对象
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-empty-object</h1>

> 判断当前值是否为一个整数

## 📦 安装

```
// npm
npm install @pansy/is-empty-object --save

// yarn
yarn add @pansy/is-empty-object

```

## 🔨 使用

```
import isEmptyObject from '@pansy/is-empty-object';

console.log(isEmptyObject({})); // true
```
npm package: @pansy/is-function
Description: 判断当前值是否为函数
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-function</h1>

> 判断当前值是否为函数

## 📦 安装

```
// npm
npm install @pansy/is-function --save

// yarn
yarn add @pansy/is-function

```

## 🔨 使用

```
import isFunction from '@pansy/is-function';

console.log(isFunction(() => {})); // true
```
npm package: @pansy/is-integer
Description: 判断当前值是否为一个整数
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-integer</h1>

> 判断当前值是否为一个整数

## 📦 安装

```
// npm
npm install @pansy/is-integer --save

// yarn
yarn add @pansy/is-integer

```

## 🔨 使用

```
import isInteger from '@pansy/is-integer';

console.log(isInteger(1)); // true
```
npm package: @pansy/is-nan
Description: 判断当前值是否为`NaN`
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-nan</h1>

> 判断当前值是否为`NaN`

## 📦 安装

```
// npm
npm install @pansy/is-nan --save

// yarn
yarn add @pansy/is-nan

```

## 🔨 使用

```
import isNaN from '@pansy/is-nan';
```
npm package: @pansy/is-negative-integer
Description: 判断当前值是否为一个负整数
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-negative-integer</h1>

> 判断当前值是否为一个整数

## 📦 安装

```
// npm
npm install @pansy/is-negative-integer --save

// yarn
yarn add @pansy/is-negative-integer

```

## 🔨 使用

```
import isNegativeInteger from '@pansy/is-negative-integer';

console.log(isNegativeInteger(-1)); // true
```
npm package: @pansy/is-nil
Description: 判断当前值是否为null或undefined
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-nil</h1>

> 判断当前值是否为`null`或`undefined`

## 📦 安装

```
// npm
npm install @pansy/is-nil --save

// yarn
yarn add @pansy/is-nil

```

## 🔨 使用

```
import isNil from '@pansy/is-nil';

let value = null;
let value1 = undefined;

console.log(isNil(value)); // true
console.log(isNil(value1)); // true
```
npm package: @pansy/is-null
Description: 判断当前值是否为空
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-null</h1>

> 判断当前值是否为空

## 📦 安装

```
// npm
npm install @pansy/is-null --save

// yarn
yarn add @pansy/is-null

```

## 🔨 使用

```
import isNull from '@pansy/is-null';

let name = null;

if (isNull(name)) {
  console.log('value is null');
}
```
npm package: @pansy/is-number
Description: 判断当前值是否为数字
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-number</h1>

> 判断当前值是否为数字

## 📦 安装

```
// npm
npm install @pansy/is-number --save

// yarn
yarn add @pansy/is-number

```

## 🔨 使用

```
import isPromise from '@pansy/is-number';
```
npm package: @pansy/is-object
Description: 判断当前值是否为对象
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-object</h1>

> 判断当前值是否为对象

## 📦 安装

```
// npm
npm install @pansy/is-object --save

// yarn
yarn add @pansy/is-object

```

## 🔨 使用

```
import isObject from '@pansy/is-object';
```
npm package: @pansy/is-plain-object
Description: 判断当前值是否为简单对象
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-plain-object</h1>

> 判断当前值是否为简单对象

## 📦 安装

```
// npm
npm install @pansy/is-plain-object --save

// yarn
yarn add @pansy/is-plain-object

```

## 🔨 使用

```
import isPlainObject from '@pansy/is-plain-object';
```
npm package: @pansy/is-promise
Description: 判断当前值是否为`promise`
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-promise</h1>

> 判断当前值是否为`Promise`

## 📦 安装

```
// npm
npm install @pansy/is-promise --save

// yarn
yarn add @pansy/is-promise

```

## 🔨 使用

```
import isPromise from '@pansy/is-promise';
```
npm package: @pansy/is-regexp
Description: 判断当前值是否为正则表达式
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-regexp</h1>

> 判断当前值是否为正则表达式

## 📦 安装

```
// npm
npm install @pansy/is-regexp --save

// yarn
yarn add @pansy/is-regexp

```

## 🔨 使用

```
import isRegExp from '@pansy/is-regexp';

let value = true;

console.log(isRegExp(value1)); // true
```
npm package: @pansy/is-string
Description: 判断当前值是否为空
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-string</h1>

> 判断当前值是否为空

## 📦 安装

```
// npm
npm install @pansy/is-string --save

// yarn
yarn add @pansy/is-string

```

## 🔨 使用

```
import isString from '@pansy/is-string';

let name = '';

console.log(isString(name)); // true
```
npm package: @pansy/is-symbol
Description: 判断当前值是否为原始 `Symbol` 或者 `Symbol` 对象
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-symbol</h1>

> 判断当前值是否为原始 `Symbol` 或者 `Symbol` 对象

## 📦 安装

```
// npm
npm install @pansy/is-symbol --save

// yarn
yarn add @pansy/is-symbol

```

## 🔨 使用

```
import isSymbol from '@pansy/is-symbol';
```
npm package: @pansy/is-undefined
Description: 判断当前值是否为undefined
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-undefined</h1>

> 判断当前值是否为`undefined`

## 📦 安装

```
// npm
npm install @pansy/is-undefined --save

// yarn
yarn add @pansy/is-undefined

```

## 🔨 使用

```
import isUndefined from '@pansy/is-undefined';

let name = undefined;

console.log(isUndefined(name)); // true
```
npm package: @pansy/is-url
Description: 判断字符串是否为Url
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/is-url</h1>

> 判断字符串是否为 Url

## 📦 安装

```
// npm
npm install @pansy/is-url --save

// yarn
yarn add @pansy/is-url

```

## 🔨 使用

```
import isUrl from '@pansy/is-url';

console.log(isUrl('https://www.baidu.com'));
// => true
```
npm package: @pansy/key-code
Description: 一些按键代码定义和实用程序
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/key-code</h1>

> 一些按键代码定义和实用程序

## 📦 安装

```
// npm
npm install @pansy/key-code --save

// yarn
yarn add @pansy/key-code

```

## 🔨 使用

```
import keyCode from '@pansy/key-code';
```
npm package: @pansy/lark-map
Description: A React toolkit for geospatial visualization based on L7
Latest version: 1.12.1

<h1 align="center">
  LarkMap
</h1>

<div align="center">
🌍 基于 <a href="https://github.com/antvis/L7">L7</a> 封装的位置可视分析 React 组件库.
</div> 

## 📦 安装

```sh
# npm
$ npm install @antv/l7 @pansy/lark-map

# yarn
$ yarn add @antv/l7 @pansy/lark-map

# pnpm
$ pnpm i @antv/l7 @pansy/lark-map
```

## 🔨 使用

```tsx
import { LarkMap } from '@pansy/lark-map';

const config = {
  mapType: 'Mapbox',
  mapOptions: {
    style: 'light',
    center: [120.210792, 30.246026],
    zoom: 8,
    ...
  },
};

export default () => {
  return <LarkMap {...config} style={{ height: '300px' }}></LarkMap>;
};
```
npm package: @pansy/lnglat-transform
Description: 地图坐标系之间互相转换
Author: wangxingkang
Latest version: 1.0.3

<h1 align="center">
  @pansy/lnglat-transform
</h1>

<p align="center">
<a href="https://www.npmjs.com/package/@pansy/lnglat-transform" target="__blank"><img src="https://img.shields.io/npm/v/@pansy/lnglat-transform?color=a1b858&label=" alt="NPM version"></a>
<a href="https://github.com/@pansy/lnglat-transform" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/pansyjs/lnglat-transform?style=social"></a>
</p>

## 主要的经纬度坐标系

- WGS-84: 标准坐标系(地球坐标系)
- GCJ-02: 国测局坐标(火星坐标系)，高德地图、腾讯地图
- BD-09: 通过GCJ02进行进一步偏移算法得到，百度地图使用

## 📦 Install

```sh
pnpm i @pansy/lnglat-transform
```

## 🦄 Usage

```ts
import { gcj02ToWgs84, wgs84ToGcj02, } from '@pansy/lnglat-transform'

wgs84ToGcj02(116.404, 39.915)
gcj02ToWgs84(116.404, 39.915)
```
npm package: @pansy/mqtt-pattern
Description: Fast library for matching MQTT patterns with named wildcards
Latest version: 1.0.0

<h1 align="center">
  @pansy/mqtt-pattern
</h1>

<div align="center">
  Fast library for matching MQTT patterns with named wildcards。
</div>

<br />

<div align="center">

[![npm version][npm-v-image]][npm-url] 
[![npm download][download-image]][download-url] 
[![stars-image][stars-image]][stars-url] 
[![forks-image][forks-image]][forks-url] 
  
</div> 


## 🏗 安装

```
// npm
npm install @pansy/mqtt-pattern --save

// yarn
yarn add @pansy/mqtt-pattern

// pnpm 
pnpm i @pansy/mqtt-pattern
```

[npm-v-image]: https://img.shields.io/npm/v/@pansy/mqtt-pattern.svg
[npm-url]: http://npmjs.org/package/@pansy/mqtt-pattern
[forks-image]: https://img.shields.io/github/forks/pansyjs/mqtt-pattern.svg
[forks-url]: https://github.com/pansyjs/mqtt-pattern/network/members
[stars-image]: https://img.shields.io/github/stars/pansyjs/mqtt-pattern.svg
[stars-url]: https://github.com/pansyjs/mqtt-pattern/stargazers
[download-image]: https://img.shields.io/npm/dm/@pansy/mqtt-pattern
[download-url]: https://npmjs.org/package/@pansy/mqtt-pattern
npm package: @pansy/number-format
Description: <h1 align="center" style="line-height: 50px; height: 50px">   <span>@pansy/number-format<span> </h1>
Author: wangxingkang
Latest version: 1.1.1

<h1 align="center" style="line-height: 50px; height: 50px">
  <span>@pansy/number-format<span>
</h1>

<div align="center">
  Format numbers as a text. 将数字格式化为文本。
</div>

## ✨ 特性

- 📦 开箱即用
- 💝 无任何第三方依赖
- 💻 使用 TypeScript 编写

## 🏗 安装

```sh
# npm install
$ npm install @pansy/number-format --save

# yarn install
$ yarn add @pansy/number-format
```

## 🔨 使用

```ts
import numberFormat from '@pansy/number-format';

// 直接使用
numberFormat().format(123456) 
// >> 123,456

// 不使用千分符
numberFormat({ thousandSeparator: false }).format(123456) 
// >> 123456

// 添加前缀
numberFormat({ prefix: '$' }).format(123456) 
// >> $123,456

// 添加后缀
numberFormat({ suffix: '/100' }).format(98) 
// >> 98/100

// 格式化
numberFormat({ template: '## [##] ##' }).format(123456) 
// >> 12 [34] 56
```

### 🎉 参数

|参数名|类型|默认值|描述|
|----|-----|----|----|
|prefix| `string` |--|设置数值的前缀|
|suffix| `string` |--|设置数值的后缀|
|thousandSeparator| `boolean` \| `string` | `true` |设置千分位分隔符, `true` 默认为 `,` |
|decimalSeparator| `string` | `.` | 设置小数点 |
|precision| `number` | `true`|数值精度|
|template| `string` | -- |格式化的模板, 使用`#`占位|
npm package: @pansy/number-precision
Description: 解决浮动运算问题，避免小数点后产生多数值和计算精度损失
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/number-precision</h1>

> 解决浮动运算问题，避免小数点后产生多数值和计算精度损失

## 📦 安装

```
// npm
npm install @pansy/number-precision --save

// yarn
yarn add @pansy/number-precision

```

## 🔨 使用

```
import NumberPrecision from '@pansy/number-precision';

const np = NumberPrecision();

np.add(0.1 + 0.2); // 0.3
```
npm package: @pansy/policy
Description: 解析权限策略，并提供验证功能
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/policy</h1>

> 解析权限策略，并提供验证功能，参考阿里云 [Policy](https://help.aliyun.com/document_detail/28664.html?spm=a2c8b.12215508该.policylist.2.ff466253ERVmtX)

## 📦 安装

```
// npm
npm install @pansy/policy --save

// yarn
yarn add @pansy/policy

```

## 🔨 使用

```ts
import Policy from '@pansy/policy';

const actions = [
  { module: 'module1', action: 'action1' },
  { module: 'module1', action: 'action2' },
  { module: 'module1', action: 'action3' },
  { module: 'module2', action: 'action1' },
  { module: 'module2', action: 'action2' },
]

// 分隔符支持 '/' 或者 ':', 默认 '/'
// const policy = new Policy(actions, ':');
const policy = new Policy(actions);

policy.addPolicy({
  version: 1,
  statement: [
    {
      effect: 'allow',
      action: [
        'module1/*'
      ]
    }
  ]
})

policy.multipleVerify('module1/action1'); // true
policy.multipleVerify('module2/action1'); // false

```

## API

### addPolicy(policy)

添加权限策略

**参数**

1、 policy

```
interface IStatement {
  // 授权效力 allow: 允许 deny: 禁止
  effect: 'allow' | 'deny';
  // 操作列表
  action: '*' | string[];
}

interface IPolicyData {
  version: string | number;
  statement: IStatement[]
}
```

### singleVerify(action: string): boolean

单个 action 验证

**参数**

1、action

- eg1: `'*'`
- eg2: `'module1/action1'`

### multipleVerify(actions: string | string[]): boolean

单个/多个 action 验证

**参数**

1、actions

- eg1: `'*'`
- eg2: `'module1/action1'`
- eg3: `['module1/action1', 'module1/action2']`

### combinationVerify(actionStr: string): boolean

组合 action 验证

> ! 取非 && 且 || 或

**参数**

1、action

- eg1: `'!module1/action1'`
- eg2: `'module1/action1' && 'module1/action2'`
- eg3: `'module1/action1' || 'module1/action2'`

## 策略数据结构

```
{
  // 策略版本
  version: 1,
  // 授权语句
  statement: [
    {
      // 授权效力 allow: 允许 deny: 禁止
      effect: 'allow',
      // 操作
      // * | string[]
      // eg: "*" 代表可访问所有权限
      // eg: "module1/*" 代表可访问module1下所有权限
      // eg: "module1/action1" 代表可访问module1下action1权限
      action: 'system:*'
    },
    {
      effect: 'allow',
      action: [
        'permission:actionCreate',
        'permission:actionUpdate'
      ]
    }
  ]
}

```
npm package: @pansy/qiankun-react-shared
Description: Qiankun react shared
Author: wangxingkang
Latest version: 1.3.0

<h1>
qiankun-react-shared
</h1>

为 React 项目提供接入 Qiankun 的能力

📦 安装

```
npm install @pansy/qiankun-react-shared --save
```

```
yarn add @pansy/qiankun-react-shared
```

```
pnpm i @pansy/qiankun-react-shared
```

🔨 示例

全局配置

```tsx
import { QiankunConfig } from '@pansy/qiankun-react-shared';

const apps = [
  {
    name: 'subapp',
    entry: '//localhost:9301',
  }
];

<QiankunConfig apps={apps}>
  <BrowserRouter>
    <Router />
  </BrowserRouter>
</QiankunConfig>
```

路由配置

react-router-dom > 6.4.0

```tsx
import { MicroApp } from '@pansy/qiankun-react-shared';

const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    element: <BasicLayout />,
    children: [
      {
        path: 'home',
        element: <Lazy entry={() => import('@/pages/home')} />,
      },
      {
        path: 'subapp/*',
        element: (
          <MicroApp
            name="subapp"
          />
        ),
      },
    ],
  }
];
```
npm package: @pansy/react-aliplayer
Description: <h1 align="center"> React AliPlayer </h1>
Latest version: 1.5.0

<h1 align="center"> React AliPlayer </h1>

React component wrapper for aliplayer.

## 🏗 安装

```sh
# npm 安装
npm install --save @pansy/react-aliplayer

# yarn 安装
yarn add @pansy/react-aliplayer
```

## 🔨 使用

```tsx
import React, { FC } from 'react';
import Player from '@pansy/react-aliplayer';

const Example: FC = () => {
  return (
    <div style={{ height: 500 }}>
      <Player
        source="//vjs.zencdn.net/v/oceans.mp4"
      />
    </div>
  );
};

export default Example;
```
npm package: @pansy/react-charts
Description: react chart
Author: Pansy Team
Latest version: 1.0.0

<h1 align="center">react-charts</h1>

> 基于 [G2Plot](https://github.com/antvis/G2Plot) 封装的图表库

## ✨ 特性

- 💻 使用 TypeScript 构建，提供完整的类型定义文件

## 🏗 安装

```
// npm 安装
npm install --save @pansy/react-charts

// yarn 安装
yarn add @pansy/react-charts
```

## 🔨 使用

```
import React, { FC } from 'react';
import { Line } from '@pansy/react-charts';

const App: FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    xField: 'year',
    title: {
      visible: true,
      text: '我是标题',
    },
  };

  return (
    <Line {...config} />
  );
};

export default App;
```
npm package: @pansy/react-fullscreen
Description: react fullscreen component
Author: Pansy Team
Latest version: 2.0.0

# React Fullscreen(React 全屏组件)

[![Alita](https://img.shields.io/badge/alitajs-react%20fullscreen-blue.svg)](https://github.com/alitajs)
[![NPM version](https://img.shields.io/npm/v/@pansy/react-fullscreen.svg?style=flat)](https://npmjs.org/package@pansy/react-fullscreen)
[![NPM downloads](http://img.shields.io/npm/dm/@pansy/react-fullscreen.svg?style=flat)](https://npmjs.org/package/@pansy/react-fullscreen)

## ✨ 特性

- 🚀 基于 screenfull 封装
- 📦 基于 rollup 进行打包，提供`cjs`、`es`格式
- 💻 使用 TypeScript 构建，提供完整的类型定义文件

## 🏗 安装

```
# npm 安装
npm install @pansy/react-fullscreen --save

# yarn 安装 推荐
yarn add  @pansy/react-fullscreen
```

## Props

### enabled

- 数据类型: `boolean`
- 默认值: `false`
- 描述: 是否全屏

### target

- 数据类型: `HTMLElement`
- 默认值: 无
- 描述: 需要控制的目标元素

## onClose

- 数据类型: `function`
- 默认值: 无
- 描述: 关闭全屏的回调

## ⌨️ 本地开发

```
# 克隆项目到本地
git@github.com:pansyjs/react-fullscreen.git

# 切换到项目目录
cd ./react-fullscreen

# 安装依赖
yarn
```

## 🌟 社区互助

| Github Issue                                                 | 钉钉群                                                                                     | 微信群                                                                                   |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [issues](https://github.com/pansyjs/react-fullscreen/issues) | <img src="https://github.com/alitajs/alita/blob/master/public/dingding.png" width="100" /> | <img src="https://github.com/alitajs/alita/blob/master/public/wechat.png" width="100" /> |
npm package: @pansy/react-mapbox-gl
Description: 🌍 基于 Mapbox GL 封装的 React 组件库
Latest version: 1.9.0

<h1 align="center">
  React Mapbox GL
</h1>

<div align="center">
🌍 基于 <a href="https://docs.mapbox.com/mapbox-gl-js">mapbox-gl</a> 封装的 React 组件库.
</div>

<br />

<p align="center">
  <a href="https://github.com/pansyjs/react-mapbox-gl/network">
    <img src="https://img.shields.io/github/forks/pansyjs/react-mapbox-gl.svg" alt="Forks">
  </a>
  <a href="https://github.com/pansyjs/react-mapbox-gl/stargazers">
    <img src="https://img.shields.io/github/stars/pansyjs/react-mapbox-gl.svg" alt="Stars">
  </a>
  <a href="https://www.npmjs.com/package/@pansy/react-mapbox-gl">
    <img src="https://img.shields.io/npm/v/@pansy/react-mapbox-gl.svg" alt="npm version">
  </a>
</p>

## 🏗 安装

```sh
# npm
$ npm install mapbox-gl @pansy/react-mapbox-gl

# yarn
$ yarn add mapbox-gl @pansy/react-mapbox-gl

# pnpm
$ pnpm i mapbox-gl @pansy/react-mapbox-gl
```

## 🔨 使用

```ts
import { Map } from '@pansy/react-mapbox-gl';

import type { MapProps } from '@pansy/react-mapbox-gl';

const config: MapProps = {
  accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
  style: 'mapbox://styles/mapbox/dark-v11',
};

export default () => {
  return <Map {...config} />;
};
```