open-index/open-npm huggingface dataset:
npm package: @redchili/address-cascader
Description: >
Author: xiamu14
Latest version: 1.0.8-beta.0

# address-cascader

> 

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

## Install

```bash
npm install --save address-cascader
```

## Usage

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

import MyComponent from 'address-cascader'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/app-router
Description: app 主页面访问的组件路由
Author: xiamu14
Latest version: 1.0.3-alpha.0

# app-router

> app 主页面访问的组件路由

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

## Install

```bash
npm install --save app-router
```

## Usage

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

import MyComponent from 'app-router'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/cli
Description: 前端开发常用命令行工具，包含生成区块代码，生成依赖性组件代码等功能。
Latest version: 1.2.0-beta.0

# @redclili/cli
前端开发常用命令行工具，包含生成区块代码，生成依赖性组件代码等功能。

## 安装

```bash
yarn global add @redchili/cli
```

## 使用

```bash
chili
```
## 开发中功能

- 生成 icon 组件
  - icon 组件依赖项目内的 icon图片(自定义)，大多数项目无法直接使用开源的整体 iconfont 包，故使用命令行工具在项目内读取 icon 图片，生成 type.ts 配置文件，index.scss 样式文件。
    ```bash
    chili icon ./src/package/icons/img
    ```
- 从 github 复制特定代码到本地目录
  - block 需要固定的目录规范，且保存在github 等可以访问的仓库，目录树如下：
    ```bash
    .
    ├── node_modules
    ├── package.json
    ├── templates
    │   ├── edit-table
    ```
此命令最终会复制 templates/[block]/src 下的所有文件。

- blocks 使用说明
  - 配置 github repo, 使用 `chili config` 即可。
  - 更新 github repo, 使用 `chili block -u` 即可。

## 优化清单
- [ ] icon 支持 sprite , web 模板代码【⭑】

## 计划中功能
- [ ] 支持配置文件，固定路径，根据图片大小进行筛选【⭑⭑】

## 参与

## 贡献
npm package: @redchili/codegen
Description: > 用于自动生成项目里那些逻辑重复的中间层代码
Latest version: 0.5.2

# codegen

> 用于自动生成项目里那些逻辑重复的中间层代码

## Install

```bash
$ yarn add @redchili/codegen
```

## CLI

```
$ codegen --help

  Usage
    $ codegen

  Options
    --type  生成类型[router]

  Examples
    $ codegen --type=router
```

## 类型
### router - 自动生成微信小程序路由配置文件
**问题:**
- 小程序路由配置需要手动在 `app.config.json` 里填写路由名和对应的路由文件路径。
- 实际业务代码中又需要在跳转时使用路由文件路径，但这样硬编码路由文件路径的形式并不好维护。

**原理:**

路由文件路径在新建路由文件时就确定了，故可以根据 `pages/` 目录下的所有路由文件自动生成带路由名的配置文件。

**用途:**
- 生成的 `routes.json` 包含符合 `app.config.json` 规则的路由信息，可直接用于 `app.config.json` 里注册路由
- 生成的 `routes.json` 同时为路由添加了完备的类型描述，可以在实际业务代码中使用路由名来实现跳转。

**符合要求的路由文件路径：**
1. pages/[routerName]/index.tsx
2. pages/packages/[packageName]/[routerName]/index.tsx
3. pages/tabs/[routerName]/index.tsx

**TODO:**
- [ ] 支持分包预下载配置
npm package: @redchili/cra-template-typescript
Description: 👤 **ben14 <544652471@qq.com>**
Author: ben14
Latest version: 1.0.6

<h1 align="center">Welcome to @redchili/creat-app-typescript 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

## Author

👤 **ben14 <544652471@qq.com>**


## Show your support

Give a ⭐️ if this project helped you!

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @redchili/creat-app-typescript
Description: 👤 **ben14 <544652471@qq.com>**
Author: ben14
Latest version: 1.0.1
Deprecated:  This template is wrong.

<h1 align="center">Welcome to @redchili/creat-app-typescript 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

## Author

👤 **ben14 <544652471@qq.com>**


## Show your support

Give a ⭐️ if this project helped you!

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @redchili/eslint-config-airbnb-typescript-prettier
Description: ### Usage
Author: ben14
Latest version: 1.0.4

## ESLint Setup for a TypeScript project using Airbnb config with Prettier

### Usage

1. install
```
yarn add @redchili/eslint-config-airbnb-typescript-prettier --dev
```
or
```
npm install @redchili/eslint-config-airbnb-typescript-prettier --save-dev
```

2. setup .eslintrc
```json
{
  "extends": "@redchili/eslint-config-airbnb-typescript-prettier"
}
```
npm package: @redchili/expo-settings-xlhs
Description: My new module
Author: ben
Latest version: 0.1.0

# @redchili/expo-settings-xlhs

My new module

# API documentation

- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/@redchili/settings-xlhs/)
- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/@redchili/settings-xlhs/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install @redchili/expo-settings-xlhs
```

### Configure for Android




### Configure for iOS

Run `npx pod-install` after installing the npm package.

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).
npm package: @redchili/hello-world
Description: >
Author: xiamu14
Latest version: 1.0.0-alpha.0

# hello-world

> 

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

## Install

```bash
npm install --save hello-world
```

## Usage

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

import MyComponent from 'hello-world'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/limit-upload
Description: 实现条件约束的上传组件
Author: xiamu14
Latest version: 1.0.8-alpha.0

# limit-upload

> 实现条件约束的上传组件

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

## Install

```bash
npm install --save limit-upload
```

## Usage

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

import MyComponent from 'limit-upload'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/pizza-cli
Description: > This readme is automatically generated by [create-ink-app](https://github.com/vadimdemedes/create-ink-app)
Latest version: 0.2.8
Deprecated: We can't do anything

# @redchili/pizza-cli

> This readme is automatically generated by [create-ink-app](https://github.com/vadimdemedes/create-ink-app)


## Install

```bash
$ yarn install @redchili/pizza-cli -D
```


## CLI

```
$ pizza --help

  Usage
	  $ pizza

	Commands:
		init | i  			初始化，在项目根目录生成配置文件 pizzarc.json
		module | m 			下载模块包

	Global Options
		--version 	output the version number
		--help  		output usage information

	Examples
	  $ pizza --version
	  0.0.1
```
npm package: @redchili/pubsub
Description: 使用 typescript 开发的事件订阅/发布，支持事件名和事件参数类型描述。
Latest version: 0.0.1-alpha.6

# pubsub

使用 typescript 开发的事件订阅/发布，支持事件名和事件参数类型描述。

## 安装

`pnpm install @redchili/pubsub`

[Live Demo](https://codesandbox.io/s/dreamy-grass-6dukim?file=/src/index.ts:36-52)

## 示例

基本使用方式

```ts
import PubSub, { Subscriber } from '@redchili/pubsub';

// 定义事件和事件传递的数据类型
interface EventType {
  click: { value: string };
}

const pubsub = new PubSub<EventType>();

// 订阅者实例，用于订阅和解除订阅
const subscriber = new Subscriber();

// subscriber 订阅 click 事件
pubsub.subscribe('click', subscriber, (event) => {
  console.log(event.value);
});

// 发布 click 事件
pubsub.publish('click', { value: 'click event' });

// 取消 subscriber 的所有订阅
pubsub.unsubscribe(subscriber);
```

取消某个事件的所有订阅

```ts
pubsub.unsubscribe('click');
```

取消订阅者的所有订阅

```ts
pubsub.unsubscribe(subscriber);
```

取消全部订阅

```ts
pubsub.unsubscribe();
```

## 其他

定义不传递参数的事件

```ts
interface EventType {
  reset: undefined;
}

const pubsub = new PubSub<EventType>();

pubsub.publish(reset, undefined);
```

## 在 React-Native 中使用
本项目使用了 nanoid 作为事件回调函数唯一 ID，所以在 React-Native 中使用请先安装 nanoid 的使用指南配置 polyfill 库，具体参考如下：
https://github.com/ai/nanoid/blob/main/README.zh-CN.md#react-native
npm package: @redchili/react-hooks
Description: >
Author: xiamu14
Latest version: 1.0.2

# react-available-hooks

>

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

## Install

```bash
npm install --save react-available-hooks
# or
yarn add react-available-hooks
```

## Usage

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/react-modal
Description: 基于 React 的模态弹层
Author: xiamu14
Latest version: 1.1.0

# chili-modal

> 模态弹层

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

## Install

```bash
npm install --save chili-modal
```

## Usage

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

import MyComponent from 'chili-modal'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/react-native-fast-opencv
Description: OpenCV port to React Native
Author: Łukasz Kurant
Latest version: 0.8.18

![React Native Fast OpenCV](./docs/images/title-banner.svg)

A powerful port of **OpenCV** for React Native.

> The library is in the early stages of development and not all functions or objects available in OpenCV are supported. Add an issue if you have any problems or questions.

- 🔥 Powered by JSI
- 🏎️ Uses OpenCV C++ API
- 🏛️ New architecture ready
- 🪽 Easy usage, without manual configuration
- 📸 Easy [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) integration
- 🧵 Easy [WorkletsCore](https://github.com/margelo/react-native-worklets-core) integration
- ⛓️‍💥 It can also be used on its own without integration

### Motivation

OpenCV is a popular library for image processing, but quite tricky when it comes to its integration and use in React Native applications. My main goal is to enable simple operations directly from JavaScript code.

Currently, there is a port of the OpenCV library but due to the change in standards when developing React Native applications, I decided to create a new library using an API in C++ that will allow for simpler integration, better performance and readability when used in code.

### Documentation

Docs are available [here](https://lukaszkurantdev.github.io/react-native-fast-opencv).

### State of development

Due to the size of the OpenCV library, this port currently only supports selected objects and functions. However, development is simple enough to only require the addition of specific code in C++ using the functionality.

List of available functions are available [here](https://lukaszkurantdev.github.io/react-native-fast-opencv/availablefunctions).

---

### Credits
Special thanks to:
- The creators of the [Vision Camera](https://github.com/mrousavy/react-native-vision-camera), [WorkletsCore](https://github.com/margelo/react-native-worklets-core) and [FastTFLite](https://github.com/mrousavy/react-native-fast-tflite) libraries, especially Marc Rousavy - thanks for the amazing libraries.
- Creator of the [react-native-opencv3](https://github.com/adamgf/react-native-opencv3) library (Adam G. Freeman) - your library was an important starting point for creating my port.
- Creator of the [TS definition for OpenCV](https://github.com/peteruhnak/opencv-ts) (Peter Uhnak) - the library was an important support for this port.



### License
MIT © 2024-2025 Lukasz Kurant
npm package: @redchili/react-quill
Description: >
Author: xiamu14
Latest version: 1.0.1

# react-quill

> 

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

## Install

```bash
npm install --save react-quill
```

## Usage

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

import MyComponent from 'react-quill'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/react-timekeeper
Description: Time picker based on the style of the Google Keep app
Author: Catalin Covic
Latest version: 2.1.3-beta

<!--
TODO
- update react spring to v9 on release
	- should fix about of typescript issues
- fix remaining typescript errors
- add units tests for components once enzyme gains better supports shallow
-->

<h1 align="center">
	<img height="350" src="./screenshots/example.png" />
	<br/>
	React Timekeeper
</h1>

<p align="center">
  <a href="https://travis-ci.com/catc/react-timekeeper">
    <img src="https://travis-ci.com/catc/react-timekeeper.svg?branch=master" alt="build" />
  </a>
  <a href="https://www.npmjs.com/package/react-timekeeper">
    <img src="https://img.shields.io/npm/dm/react-timekeeper" alt="downloads" />
  </a>
  <a href="https://github.com/catc/react-timekeeper/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="license"/>
  </a>
</p>

<p align="center">
	<b>
		Time picker based on the style of the
		<a href="https://play.google.com/store/apps/details?id=com.google.android.keep" target="_blank">
		Android Google Keep
		</a>
		app.
	</b>
</p>

------------

**Features**
- supports both 12 hour and 24 hour mode, and flexible time formats
- simple to use with many customizable options
- smooth, beautiful animations with [react spring](https://www.react-spring.io)
- typescript support
- css variable support for custom styles

## Installation

```shell
$ npm install --save react-timekeeper
```

Version 2+ of timekeeper requires [react hooks (v16.8)](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html). If you're using an older version of react, install timekeeper v1 via
```shell
$ npm install --save react-timekeeper@^1.0.0
```

## Usage

```javascript
import React, {useState} from 'react';
import TimeKeeper from 'react-timekeeper';

function YourComponent(){
  const [time, setTime] = useState('12:34pm')

  return (
    <div>
      <TimeKeeper
        time={time}
        onChange={(data) => setTime(data.formatted12)}
      />
      <span>Time is {time}</span>
    </div>
  )
}
```

All styles are inlined via [emotion](https://github.com/emotion-js/emotion) so no css imports are required.

## API
For full api and examples, see [API docs](https://catc.github.io/react-timekeeper/#api) and [examples](https://catc.github.io/react-timekeeper/#examples)



## Development
1. Clone the repo
3. `nvm use v10.16.0` (or anything >10)
2. `npm install`
3. `npm run docs:dev`
4. Navigate to `localhost:3002`

### Contributing
Before submitting a PR, ensure that:
1. you follow all eslint rules (should be automatic)
1. all tests pass via `npm run tests`
1. everything builds
    - docs - `npm run docs:build`
    - lib - `npm run lib`
1. provide detailed info on what bug you're fixing or feature you're adding - if possible include a screenshot/gif

------------

Other useful commands:
- build docs: `npm run docs:build`
- run all tests: `npm run tests`
- watch tests: `npm run tests:watch`
- create lib to publish npm: `npm run lib`
npm package: @redchili/search-bar
Description: 搜索条(基于 ant-design、uform)
Author: xiamu14
Latest version: 1.0.7-alpha.0

# @redchili/search-bar

> 搜索条(基于 ant-design、uform)

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

## Install

```bash
npm install --save @redchili/search-bar

// or

yarn add @redchili/search-bar (推荐使用)

```

## Usage

```tsx
import React from 'react'

import MyComponent from '@redchili/search-bar'

export default function Example()  {
  const schema = {
  type: "object",
  properties: {
    name: {
      type: "radio",
      enum: ["1", "2", "3", "4"],
      title: "name"
    }
  }
};
const onSearch = (v) => {
  console.log(
    "%c搜索关键词",
    "background: #69c0ff; color: white; padding: 4px",
    v
  );
};
  return <SearchBar schema={schema} onCaptureForm={onSearch} />;
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/search-table
Description: 搜索表格(基于 antd, search-bar)
Author: xiamu14
Latest version: 1.1.4

# search-table

> 搜索表格(基于 antd, search-bar)

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

## Install

```bash
npm install --save search-table
```

## Usage

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

import MyComponent from 'search-table'

class Example extends React.Component {
  render () {
    return (
      <MyComponent />
    )
  }
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redchili/steno
Description: Specialized fast async file writer
Author: Ben
Latest version: 2.0.1

# Steno [![](http://img.shields.io/npm/dm/steno.svg?style=flat)](https://www.npmjs.org/package/steno) [![Node.js CI](https://github.com/typicode/steno/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/steno/actions/workflows/node.js.yml)

> Specialized fast async file writer

**Steno** makes writing to the same file often/concurrently fast and safe.

Used in [lowdb](https://github.com/typicode/lowdb).

_https://en.wikipedia.org/wiki/Stenotype_

## Features

- Fast (see benchmark)
- Lightweight (~6kb)
- Promise-based
- Atomic write
- No race condition
- TypeScript definitions

## Usage

```javascript
import { Writer } from 'steno'

// Create a singleton writer
const file = new Writer('file.txt')

// Use it in the rest of your code
async function save() {
  await file.write('some data')
}
```

## Benchmark

`npm run benchmark` (see `src/benchmark.ts`)

```
Write 1KB data to the same file x 1000

  fs     : 62.303ms
  steno  : 1.384ms

  fs.txt = steno.txt ✓


Write 1MB data to the same file x 1000

  fs     : 2.300s
  steno  : 5.444ms

  fs.txt = steno.txt ✓
```

## License

MIT - [Typicode](https://github.com/typicode)
npm package: @redchili/storage-ts
Description: 一个类型安全、可扩展的 Storage 抽象库，支持多种运行环境如 Web、 React-Native。定义不同的存储引擎（如 LocalStorage, SessionStorage, Memory、MMKV 等），并提供统一的类型推导与键管理机制。
Latest version: 1.0.0

# 📦 storage-ts

一个类型安全、可扩展的 Storage 抽象库，支持多种运行环境如 Web、 React-Native。定义不同的存储引擎（如 LocalStorage, SessionStorage, Memory、MMKV 等），并提供统一的类型推导与键管理机制。

## ✨ 特性

- ✅ **类型安全**：严格基于泛型定义的 schema 推导出键值类型
- 📦 **可插拔存储引擎**：支持 LocalStorage、 SessionStorage、 MemoryStorage、MMKVStorage 等
- 🧩 **可配置前缀**：避免键冲突，可设置全局或实例级前缀
- 🔍 **零依赖内核**：核心无第三方依赖，适合扩展与封装

---

## 📦 安装

```bash
# 安装核心库
bun install storage-ts

# 如需使用 MMKV 存储
bun install react-native-mmkv
```

## 使用方式

```ts
type Schema = {
  token: string
  profile: { name: string; age: number }
}

const storage = createStorage({storage:new LocalStorage<Schema>()})

// 保存
storage.set('token', 'abc123')
storage.set('profile', { name: 'Alice', age: 30 })

// 读取
const token = storage.get('token') // string | null
const profile = storage.get('profile') // { name: string; age: number } | null
```
npm package: @redchili/storage-util
Description: localStorage 和 sessionStorage 的工具库，增加 typescript的类型定义，可以在业务中限制 key-value 的类型，防止代码里无序的使用 storage。
Latest version: 0.1.0

# storage-util

localStorage 和 sessionStorage 的工具库，增加 typescript的类型定义，可以在业务中限制 key-value 的类型，防止代码里无序的使用 storage。

## 使用方式

1. 初始化并导出 storage 实例
```ts
// session-util.ts
import StorageBase from "@redchili/storage-util";

export interface SessionProps { // 定义好业务中用到的所有 session key-value 类型
  token: string;
  money: money;
  thing: any;
}

export type SessionKey = keyof SessionProps;

const sessionUtil = new StorageBase<SessionProps>("sessionStorage"); // localStorage

export default sessionUtil;

```

2. 在代码中使用 sessionUtil

```ts
import sessionUtil from 'session-util'

sessionUtil.getItem('token');// great
sessionUtil.getItem('authToken'); // invalid, ts error

sessionUtil.setItem('token', '123123'); // great
sessionUtil.setItem('token', 123123); // invalid, ts error
```
npm package: @redchili/toolkit
Description: ## 安装
Latest version: 1.0.2

## 常用 JS 工具集

## 安装

```
yarn add @redchili/toolkit
```

## 工具介绍

### Select - 多值选择类

有一类枚举在多个场景下展示不同的值，比如：后端定义一类服务，包含多种类型。不同类型对应不同的值，是枚举类型。但在前端可能还需要添加类型的名称，描述等。
一个对象才能构成枚举的一个值，这个类就是用于处理这种场景下多值枚举的取值。
代码实例如下：

```typescript
import {Select} from '@redchili/toolkit';

const fruits = [
  {
    iid: 0, // 数组 index 显式表达为 iid
    desc: '苹果', // 前端展示的描述值
    endValue: 1, // 后端值
  },
  {
    iid: 1,
    desc: '橘子',
    endValue: 2,
  },
  {
    iid: 2,
    desc: '桃花',
    endValue: 3,
  },
];
const fruits = new Select(fruits);

// 获取所有的 desc ，返回数组
fruits.vals('desc'); // ['苹果', '橘子', '桃花']

// 根据特定的 kev-val 获取子项
fruitsEnum.item('iid',1); // {iid:1, desc: '橘子',
    endValue: 2,}
```

### css - 使用 css 语法书写 React.CSSProperties

```tsx
() => {
  return (
    <div
      style={css`
        min-width: 100px;
        display: flex;
        justify-align: center;
      `}
    ></div>
  );
};
```

### checkImgExists - 判断图片链接地址是否有效

返回 `Promise<boolean>`

```ts

checkImgExists('http://xxx.xxx/xxx').then(res => if (res) console.log('图片地址有效，且宽高不为0'))


```

### moveElement - 将数组里的值先前或向后移动位数

```ts
const arr = [1, 2, 3, 4];
const newArr = moveElement(arr, 1); // 数组右移一位
// output [4，1，2，3]
moveElement(arr, -1); // 数组左移一位
// output [2, 3, 4, 1]
```
npm package: @redchili/with-search-bar
Description: 搜索条(基于 ant-design、uform)
Author: xiamu14
Latest version: 1.0.5-alpha.0

# @redchili/search-bar

> 搜索条(基于 ant-design、uform)

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

## Install

```bash
npm install --save @redchili/search-bar

// or

yarn add @redchili/search-bar (推荐使用)

```

## Usage

```tsx
import React from 'react'

import MyComponent from '@redchili/search-bar'

export default function Example()  {
  const schema = {
  type: "object",
  properties: {
    name: {
      type: "radio",
      enum: ["1", "2", "3", "4"],
      title: "name"
    }
  }
};
const onSearch = (v) => {
  console.log(
    "%c搜索关键词",
    "background: #69c0ff; color: white; padding: 4px",
    v
  );
};
  return <SearchBar schema={schema} onCaptureForm={onSearch} />;
}
```

## License

MIT © [xiamu14](https://github.com/xiamu14)
npm package: @redcloudsteam/ui
Description: Global loading screen for React
Author: Redclouds
Latest version: 1.0.19

# React Global Loading

![Example](/assets/example.png)

[![npm version](https://badge.fury.io/js/@redcloudsteam/ui.svg)][npm_url]
[![downloads](https://img.shields.io/npm/dt/@redcloudsteam/ui.svg)][npm_url]
[![license](https://img.shields.io/npm/l/@redcloudsteam/ui.svg)][npm_url]

[npm_url]: https://www.npmjs.org/package/@redcloudsteam/ui

React simple global loading package

## Installation

With Yarn:

```bash
yarn add @redcloudsteam/ui
```

With npm:

```bash
npm install --save @redcloudsteam/ui
```

## Getting Started

Add the GlobalLoading to your app first (should be at root component like index.js or app.js). It will take care of rendering global loading . Now you can trigger `globalLoading.show()` and `globalLoading.hide()` from anywhere!

```tsx
import { GlobalLoading, showLoading } from 'react-hot-toast';

const App = () => {
  const show = () => {
    showLoading(true);
    setTimeout(() => {
      showLoading(false);
    }, 1000);
  };

  return (
    <div>
      <button onClick={show}>Show Loading</button>
      <GlobalLoading />
    </div>
  );
};
```

## Other way to trigger loading

```tsx
import { showLoading } from 'react-hot-toast';
showLoading(true); // show
showLoading(false); // hide

import { show, hide } from 'react-hot-toast';
show(); // show
hide(); // hide

import { globalLoading } from 'react-hot-toast';
globalLoading.show(); // show
globalLoading.hide(); // hide
```

<details><summary>Example using React Class</summary>

</details>

## Available Loaders, PropTypes, and Default Values

Default props:

```
  children: React.ReactNode;
  WrapperComponent?: (props: any) => ReactElement;
  backgroundColor?: string;
  loadingSize?: number;
  loadingColor?: string;
  loadingType?:
    | 'spin'
    | 'bars'
    | 'bubbles'
    | 'cubes'
    | 'cylon'
    | 'spin'
    | 'spinningBubbles'
    | 'spokes';
```

### `children` prop

`children` will replace default loading icon

```tsx
<GlobalLoading>
  <ReactLoading /> // OR your custom loading component
<GlobalLoading/>
```

### `WrapperComponent` prop

The wrapper component ( background screen )

```tsx
<GlobalLoading WrapperComponent={() => <div style={style} />} />;

// suggested style
style = {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100vw',
  height: '100vh',
  backgroundColor: 'rgba(0, 0, 0, 0.6)',

  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
};
```

### `zIndex`, `backgroundColor`, `loadingSize`, `loadingThickness`, `loadingSpeed`, `loadingColor`, and `loadingType` props

Style of the default loading component

Component :

- Button
- Modal ( HeadlessUI )
  - Simple Modal : title , content , children , button
- Container
- ListItem
- SimpleInput
  - SimpleTextInput
  - SimpleSelectInput
  - SimpleDateInput
  - SimpleTagSelectInput