open-index/open-npm huggingface dataset:
npm package: @so-fe/react-hooks
Description: so-fe hooks
Author: liujinghan
Latest version: 1.1.4

# so-fe-hooks

一个现代的 React Hooks 工具库集合。

## ✨ 特性

* 🎯 **类型安全** - 使用 TypeScript 编写，提供完整的类型定义
* 📦 **按需加载** - 支持 Tree Shaking，只打包你使用的代码
* 🔧 **易于使用** - 简单直观的 API 设计
* 📚 **文档完善** - 详细的使用说明和示例代码

## 📦 安装

```bash
npm install @so-fe/react-hooks
```

## 📚 文档

[查看文档](https://so-fe.github.io/react-hooks/)

## 📒 包含的 Hooks

该项目包含以下独立的 hooks 包:

- [@so-fe/use-unmount](./packages/use-unmount) - React 组件卸载时执行回调
- [@so-fe/use-debounce-fn](./packages/use-debounce-fn) - 为函数提供防抖能力
- [@so-fe/use-latest](./packages/use-latest) - 始终获取最新值的 Hook
- [@so-fe/hooks](./packages/so-fe-hooks) - 所有 hooks 的统一封装

## 🔨 使用

```tsx
import {useLatest} from '@so-fe/react-hooks';
function App(props) {
    const propsRef = useLatest(props);
    return <div>{propsRef.current}</div>;
}
```
npm package: @so-fe/react-use-debounce-fn
Description: useDebounceFn hook for React
Author: liujinghan
Latest version: 1.0.2

# @so-fe/react-use-debounce-fn

一个用于 React 的防抖函数 Hook，可以帮助你创建防抖函数，避免函数在短时间内被多次调用。

## 📦 安装

```bash
npm install @so-fe/react-use-debounce-fn
```

```bash
yarn add @so-fe/react-use-debounce-fn
```

```bash
pnpm add @so-fe/react-use-debounce-fn
```

## 🔨 使用方式

### 基本使用

```tsx
import {useDebounceFn} from '@so-fe/react-use-debounce-fn';

function Demo() {
    // 创建一个延迟 300ms 的防抖函数
    const debouncedFn = useDebounceFn(() => {
        console.info('搜索请求被发送');
    }, 300);

    return (
        <input
            type="text"
            onChange={() => debouncedFn()}
            placeholder="输入搜索内容"
        />
    );
}
```

#### 立即执行

```tsx
import {useDebounceFn} from '@so-fe/react-use-debounce-fn';

function Demo() {
    const debouncedFn = useDebounceFn(() => {
        console.info('立即执行，然后防抖');
    }, 500, {immediate: true});

    return (
        <button onClick={() => debouncedFn()}>点击</button>
    );
}
```

#### 取消防抖

```tsx
import {useState} from 'react';

import {useDebounceFn} from '@so-fe/react-use-debounce-fn';

function Demo() {
    const [value, setValue] = useState('');

    const debouncedSearch = useDebounceFn(searchValue => {
        console.info('搜索:', searchValue);
    }, 500);

    const handleChange = e => {
        const newValue = e.target.value;
        setValue(newValue);
        debouncedSearch(newValue);
    };

    const handleCancel = () => {
        debouncedSearch.clear();
        console.info('搜索已取消');
    };

    return (
        <div>
            <input
                type="text"
                value={value}
                onChange={handleChange}
                placeholder="输入搜索内容"
            />
            <button onClick={handleCancel}>取消搜索</button>
        </div>
    );
}
```

## API

### useDebounceFn

#### 参数
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| fn | 需要防抖的函数 | (...args: any[]) => any | - |
| delay | 防抖延迟时间，单位为毫秒 | number | 100 |
| options | 配置选项 | { immediate: boolean } | { immediate: false } |

#### 返回值
| 属性 | 说明 | 类型 |
| --- | --- | --- |
| fn | 防抖后的函数 | (...args: any[]) => any |
| clear | 清除当前防抖计时器 | () => void |
| flush | 立即调用当前防抖函数 | () => void |

#### options
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| immediate | 是否在延迟开始前调用函数 | boolean | false |
npm package: @so-fe/react-use-external
Description: useExternal hook for React
Author: liujinghan
Latest version: 1.0.1

# @so-fe/react-use-external

`useExternal` 是一个 React Hook，用于动态加载外部 JavaScript 和 CSS 资源。

## 📦 安装

```bash
npm install @so-fe/react-use-external
```

```bash
yarn add @so-fe/react-use-external
```

```bash
pnpm add @so-fe/react-use-external
```

## 🔧 使用

### 基本使用

```tsx
import {useExternal} from '@so-fe/react-use-external';

function App() {
    // 加载外部 JavaScript
    const jsStatus = useExternal('https://example.com/script.js');

    // 加载外部 CSS
    const cssStatus = useExternal('https://example.com/style.css');

    return (
        <div>
            <p>
                JavaScript 加载状态:
                {jsStatus}
            </p>
            <p>
                CSS 加载状态:
                {cssStatus}
            </p>
        </div>
    );
}
```

## API

```ts
function useExternal(path: string, options?: Options): Status;

interface Options {
    type?: 'js' | 'css';
    js?: Partial<HTMLScriptElement>;
    css?: Partial<HTMLStyleElement>;
    keepWhenUnused?: boolean;
}

type Status = 'unset' | 'loading' | 'ready' | 'error';
```
npm package: @so-fe/react-use-latest
Description: 一个简单而实用的 React Hook，用于获取组件中任何值的最新引用。
Author: liujinghan
Latest version: 1.0.1

# @so-fe/react-use-latest

一个简单而实用的 React Hook，用于获取组件中任何值的最新引用。

## 📦 安装

```bash
npm install @so-fe/react-use-latest
```

```bash
yarn add @so-fe/react-use-latest
```

```bash
pnpm add @so-fe/react-use-latest
```

## 🔨 使用

### 基本用法

```tsx
import {useEffect, useState} from 'react';

import {useLatest} from '@so-fe/react-use-latest';

function Demo() {
    const [count, setCount] = useState(0);
    const latestCount = useLatest(count);

    useEffect(() => {
        const timer = setInterval(() => {
            // 使用 latestCount.current 获取最新的 count 值
            console.info('当前计数:', latestCount.current);
        }, 1000);

        return () => clearInterval(timer);
    }, []); // 注意这里依赖数组为空

    return (
        <div>
            <p>
                当前计数:
                {count}
            </p>
            <button onClick={() => setCount(count + 1)}>增加</button>
        </div>
    );
}
```

### API

```ts
function useLatest<T>(value: T): React.MutableRefObject<T>;
```

#### 参数

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 需要获取最新引用的值 | T | - |

#### 返回值

| 类型 | 说明 |
| --- | --- |
| `React.MutableRefObject<T>` | 包含最新值的 ref 对象 |
npm package: @so-fe/react-use-unmount
Description: 一个简单的 React Hook，用于在组件卸载时执行回调函数。
Author: liujinghan
Latest version: 1.0.2

# @so-fe/react-use-unmount

一个简单的 React Hook，用于在组件卸载时执行回调函数。

## 📦 安装

```bash
npm install @so-fe/react-use-unmount
```

或者

```bash
yarn add @so-fe/react-use-unmount
```

或者

```bash
pnpm add @so-fe/react-use-unmount
```

## 🔨 使用

### 基本用法

```tsx
import {useUnmount} from '@so-fe/react-use-unmount';

function Demo() {
    useUnmount(() => {
        console.info('组件已卸载');
    });

    return <div>示例组件</div>;
}
```

### API

```ts
function useUnmount(fn: () => void): void;
```

#### 参数
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| fn | 组件卸载时执行的回调函数 | () => void | - |
npm package: @so-ric/colorspace
Description: Generate HEX colors for a given namespace using color v5
Author: Arnout Kazemier
Latest version: 1.1.6

Based on Arnout Kazemier's https://github.com/3rd-Eden/colorspace, only difference is updated packages to remove security vulnerbilities.
All credit goes to him.

# colorspace

Colorspace is a simple module which generates HEX color codes for namespaces.
The base color is decided by the first part of the namespace. All other parts of
the namespace alters the color tone. This way you can visually see which
namespaces belong together and which does not.

## Installation

The module is released in the public npm registry and can be installed by
running:

```
npm install --save @so-ric/colorspace
```

## Usage

We assume that you've already required the module using the following code:

```js
'use strict';

var colorspace = require('@so-ric/colorspace');
```

The returned function accepts 2 arguments:

1. `namespace` **string**, The namespace that needs to have a HEX color
   generated.
2. `delimiter`, **string**, **optional**, Delimiter to find the different
   sections of the namespace. Defaults to `:`

#### Example

```js
console.log(colorspace('color')) // #6b4b3a
console.log(colorspace('color:space')) // #796B67
```

## License

MIT
npm package: @so.boss/genesis
Description: genesis ui library
Latest version: 1.0.2

# genesis

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe genesis here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @so.boss/genesis-icon-library
Description: Icon automation workflow with Figma
Author: thoughtleader
Latest version: 0.0.37

# Icon Automation Workflow Using Figma

## Development
Create a `.env` in the root directory. Put your Figma file url and Figma token inside.

```
FIGMA_FILE_URL=https://www.figma.com/file/********************/juuust-react-icon
FIGMA_TOKEN=********************************
```

### fetch SVG file
Run `yarn fetch` to fetch SVG files from Figma file. This will pull your SVGs in `./src/svg/`.

### generate React components for icons
Run `yarn generate` to generate component files from SVG files. This will pull your component files in `./src/icons/`.

### Develop in local
Run `yarn dev` to develop the application in which you can see all icons.

### Develop in local
Run `yarn build` to build Pages.
npm package: @so.boss/pixel
Description: Pixel Design System's Web components for build stellar UI
Author: thoughtleader
Latest version: 0.1.12

# pixel
Pixel Web Resources: Component, Utils

## Read about Pixel and it's parts:
1. [Elements](https://csaaig.atlassian.net/wiki/spaces/pixel/pages/904331361/Elements)
2. [Wrappers](https://csaaig.atlassian.net/wiki/spaces/pixel/pages/904134741/Wrappers) 
3. [Containers](https://csaaig.atlassian.net/wiki/spaces/pixel/pages/904200306/Containers)
4. [Style](helpers/tokens-DEP)(https://csaaig.atlassian.net/wiki/spaces/pixel/pages/904299268/Helpers)
5. [Base Config (color/font)](https://csaaig.atlassian.net/wiki/spaces/pixel/pages/904396887/Color)

AVAILABLE
1. Elements: **Title, Thing**
2. Wrappers: **Wrapper, Label, Message**
3. Containers: **Container, Group**

UNAVAILABLE:
1. Elements: **Block, Button, Icon**
2. Wrappers: **Action, ActionBlock, ActionButton, ActionLink, Flag, Input, Inputs, InputSelect, Interview, Tag**
3. Containers: **Drawer, Page**
4. All UI.*** Packages

## Getting Started
1. Install private module for Pixel from our enterprise repo. TODO: Use API Key?
npm install git+ssh://git@github.com:aaa-ncnu-ie/pixel.git#v0.1.0

2. Include Pixel component(s) in a project's component
import { Wrapper, Label } from 'pixel';

NOTE: 
Migrating pixel components into module, not all components in Pixel are included.
npm package: @so0shka/ts-mask
Description: A TypeScript library for creating object field masks and inferring types from them
Author: So0shka
Latest version: 1.0.1

# TypeScript Mask Library

A simple library to define and infer types for object fields using "masks" in TypeScript. This library allows you to specify which fields of an object should be selected, while automatically inferring the corresponding types.

## Installation

Install via npm:

```bash
npm install @so0shka/ts-mask
```

## Usage

Comprehensive example:

```ts
import { createMask, MaskInfer } from "ts-mask";

interface IDocument {
  id: number;
  number: string;
  author: {
    id: number;
    fullname: string;
  };
  items: {
    name: string;
    description: string;
  }[];
}

const productMask = createMask((p: MaskProvider<IDocument>) => [
  p.id,
  p.author,
  p.items.mask((i) => [i.name]),
]);

productMask.toObject();

// {
//   id: Symbol(MARKED),
//   author: Symbol(MARKED),
//   items: {
//     name: Symbol(MARKED),
//   }
// }

type PartialProduct = MaskInfer<typeof productMask>;
// type PartialProduct = {
//   id: number;
//   author: {
//     id: number;
//     fullname: string;
//   };
//   items: {
//     name: string;
//   }[];
// };
```

## API

### createMask function

Creates a mask for a given object type. It accepts a builder function that defines which fields should be included in the mask.

The created mask has a `toObject` method that returns the object representation of the mask, where each field is marked with a `markedSymbol`.

#### Example:

```
const mask = createMask((p: MaskProvider<MyObject>) => [p.field1, p.field2]);
mask.toObject();
```

### MaskInfer type

This utility type is used to infer the partial type of the object based on the mask created by `createMask`.

#### Example:

```
type MyObjectPartial = MaskInfer<typeof mask>;
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @so1ve/escape-string-regexp
Description: > Escape RegExp special characters
Author: Ray
Latest version: 5.0.0
Deprecated: Not Needed

# @so1ve/escape-string-regexp

> Escape RegExp special characters

## Install

```
$ npm install @so1ve/escape-string-regexp
```

## Usage

```js
import escapeStringRegexp from "@so1ve/escape-string-regexp";

const escapedString = escapeStringRegexp("How much $ for a 🦄?");
// => 'How much \\$ for a 🦄\\?'

new RegExp(escapedString);
```

You can also use this to escape a string that is inserted into the middle of a regex, for example, into a character class.
npm package: @so1ve/is-unicode-supported
Description: > Detect whether the terminal supports Unicode
Author: Ray
Latest version: 1.2.0
Deprecated: Not Needed

# @so1ve/is-unicode-supported

> Detect whether the terminal supports Unicode

This can be useful to decide whether to use Unicode characters or fallback ASCII characters in command-line output.

Note that the check is quite naive. It just assumes all non-Windows terminals support Unicode and hard-codes which Windows terminals that do support Unicode. However, I have been using this logic in some popular packages for years without problems.

## Install

```sh
npm install is-unicode-supported
```

## Usage

```js
import isUnicodeSupported from "@so1ve/is-unicode-supported";

isUnicodeSupported();
// => true
```

## API

### isUnicodeSupported()

Returns a `boolean` for whether the terminal supports Unicode.

## Related

- [is-interactive](https://github.com/sindresorhus/is-interactive) - Check if stdout or stderr is interactive
- [supports-color](https://github.com/chalk/supports-color) - Detect whether a terminal supports color
- [figures](https://github.com/sindresorhus/figures) - Unicode symbols with Windows fallbacks
- [log-symbols](https://github.com/sindresorhus/log-symbols) - Colored symbols for various log levels
npm package: @so1ve/utils
Description: [![NPM version](https://img.shields.io/npm/v/@so1ve/utils?color=a1b858&label=)](https://www.npmjs.com/package/@so1ve/utils)
Author: Ray
Latest version: 0.3.0

# @so1ve/utils

[![NPM version](https://img.shields.io/npm/v/@so1ve/utils?color=a1b858&label=)](https://www.npmjs.com/package/@so1ve/utils)

## 💎 Features

## 📦 Installation

```bash
$ npm install @so1ve/utils
$ yarn add @so1ve/utils
$ pnpm add @so1ve/utils
```

## 📝 License

[MIT](./LICENSE). Made with ❤️ by [Ray](https://github.com/so1ve)
npm package: @so9.asia/designsystem
Description: so9 design system
Author: So9 Team
Latest version: 1.0.8

Installation
npm install @so9.asia/designsystem

Usage
Utility Function
import { greet } from '@so9.asia/designsystem';

console.log(greet('World')); // Output: Hello, World!

Button Component
import { Button } from '@so9.asia/designsystem';

function App() {
  return (
    <Button onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
}

Requirements
React ^18.0.0
React DOM ^18.0.0
npm package: @so__hell/react-media-query
Description: A lightweight package to handle media-query directly into you jsx
Author: so_hell
Latest version: 1.0.1

<div align="center">
    <h1 align="center">React Media Query</h1>
    <p align="center">
        A lightweight react package to handle media queries directly into your component
    </p>
    <br/>
  
</div>

## Basic Usage

```bash
npm i @so__hell/react-media-query
```

```jsx
import { MediaQuery } from "@so__hell/react-media-query";
import { MediaType } from "@so__hell/react-media-query";
```

## DOCS

### MediaQuery

In MediaQuery you can add an object as first argument and a callback function as second argument
- The first argument is an object that can have three values

  * minWidth
  * maxWidth
  * orientation

  minWidth and maxWidth accepts a number and orientation accepts an enum of ['landscape' , 'portrait']
  you can adjust these values according to your needs.
  MediaQuery return two values , the first one is boolean (it will be true if the current width and orientation is matched otherwise false) and the second
  one is the current window width

- The second argument is a callback function that can have the current window width arguemtn passed to you , it will be called when the window is resized

For example:

```jsx
 const [isMobile, windowWidth] = MediaQuery(
    { minWidth: 300, maxWidth: 500 },
    (currWindowWidth) => {
      console.log(currWindowWidth);
    }
  );
```





### MediaType
It just return the current media in which you are accessing the React App, It will return either of the values ['desktop' , 'mobile', 'tablet']

```jsx
    const mediaType = MediaType()
```

## CONS
* No Typescript support
* Does not work on any SSR library Nextjs , only works on React
npm package: @soadtech/ui
Description: Soadtech UI — Component library distributed as source
Latest version: 0.2.0

# Soadtech UI

Librería de componentes UI distribuible como código fuente, estilo [shadcn/ui](https://ui.shadcn.com). Los componentes se copian directamente a tu proyecto — sin dependencias de runtime.

## Componentes disponibles

| Componente | Descripción |
|------------|-------------|
| **Avatar** | Avatar con imagen, iniciales o icono fallback. Soporta indicador de estado y 5 tamaños (xs-xl). |
| **Alert** | Notificación con 5 variantes de color (default, positive, primary, negative, warning) y layouts compact/expanded. |
| **Accordion** | Secciones expandibles con modo single/multiple. Animación CSS grid, accesibilidad completa con teclado. |

## Instalación

### Usando el CLI

```bash
# Copiar un componente a tu proyecto
node cli/add.js avatar

# Copiar todos los componentes
node cli/add.js --all

# Ver qué archivos se copiarían sin ejecutar
node cli/add.js alert --dry-run

# Especificar ruta destino
node cli/add.js accordion --path=./src/ui
```

### Manual

Copia la carpeta del componente deseado desde `components/`, junto con:
- `tokens/` — Design tokens CSS (colores, tipografía, espaciado)
- `lib/utils.ts` — Utilidad `cn()` para merge de classnames

## Uso

```tsx
// Importar tokens en tu entry point
import "./tokens/index.css";

// Usar componentes
import { Avatar } from "./components/avatar";
import { Alert } from "./components/alert";
import { Accordion } from "./components/accordion";

<Avatar name="Jane Smith" size="lg" status="online" />

<Alert variant="positive" title="Éxito" description="Operación completada." />

<Accordion
  items={[
    { id: "1", title: "Pregunta", content: "Respuesta" },
  ]}
  type="single"
/>
```

## Design Tokens

Todos los tokens usan el prefijo `--st-` y se definen en `tokens/base.css`:

- **Colores**: neutrals (gray-50 a gray-900), positive (green), primary (cyan), negative (red), warning (yellow)
- **Tipografía**: system font stack, tamaños xs-xl, pesos normal/medium/semibold/bold
- **Espaciado**: escala de 4px (`--st-space-1` a `--st-space-12`)
- **Dark mode**: `[data-theme="dark"]` en el elemento html

## Convenciones CSS

- **BEM con prefijo**: `.st-accordion`, `.st-accordion__item`, `.st-accordion__item--open`
- **Custom properties privadas**: `--_alert-bg`, `--_avatar-size` para encapsular variantes
- **Especificidad plana**: solo selectores de clase, sin IDs

## Estructura

```
soadtech-ui/
├── package.json
├── tsconfig.json
├── registry.json           # Manifiesto de componentes
├── cli/add.js              # CLI para copiar componentes
├── tokens/
│   ├── base.css            # Design tokens
│   ├── themes/light.css
│   ├── themes/dark.css
│   └── index.css
├── lib/utils.ts            # cn() utility
├── components/
│   ├── accordion/
│   ├── alert/
│   └── avatar/
└── docs/                   # Documentación por componente
```

## Requisitos

- **React** >= 18 (peer dependency)
- **TypeScript** >= 5.7 (dev)
- Los componentes se distribuyen como fuente TSX/CSS, sin paso de build

## Licencia

MIT
npm package: @soalio/delta-ui
Description: A React component library for delta applications built using Rollup, TypeScript, Styled components and Storybook
Author: Saketh Raju
Latest version: 1.4.18

# React Component Library for Delta web applications


This Library was created using the following technologies

- [Rollup](https://github.com/rollup/rollup)
- [Styled components](https://styled-components.com/)
- [TypeScript](https://www.typescriptlang.org/)

It also features:

- [Storybook](https://storybook.js.org/) to create and show off components
- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components

## Development

### Testing

```
npm run test
```

### Building

```
npm run build
```

### Storybook

To run a live-reload Storybook server on your local machine:

```
npm run storybook
```

To export Storybook as static files:

```
npm run storybook:export
```

Use `storybook-static` folder to host it in cloud server.

### Generating New Components

Run this command to generate all the files you need to start building out a new component. To use it:

```
npm run generate YourComponentName
```

This will generate:

```
/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.stories.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
    YourComponentName.style.ts
```

The default templates for each file can be modified under `util/templates`.

### Installing Component Library Locally

In your react application ( eg. admin-web, delta-web, frewall-web etc ), you can run:

```
npm i --save <relative-path-to-your-library>
```

which will install the local component library as a dependency in react application. It'll then appear as a dependency in `package.json` like:

```JSON
  ...
  "dependencies": {
    ...
    "react-component-library": "file:../react-component-library",
    ...
  },
  ...
```

Your components can then be imported and used in that project.

## Usage

Usage of the component (after the library installed as a dependency into another project) will be:

```TSX
import React from "react";
import { TestComponent } from "delta-ui";

const App = () => (
  <div className="app-container">
    <h1>Hello I'm consuming the component library</h1>
    <TestComponent mode="dark" />
  </div>
);

export default App;
```
npm package: @soapbox.pub/deno-vite-plugin
Description: Plugin to enable Deno resolution inside [vite](https://github.com/vitejs/vite). It supports:
Latest version: 1.0.4

# Deno vite plugin

Plugin to enable Deno resolution inside [vite](https://github.com/vitejs/vite).
It supports:

- Alias mappings in `deno.json`
- `npm:` specifier
- `jsr:` specifier
- `http:` and `https:` specifiers

## Limitations

Deno specific resolution cannot be used in `vite.config.ts` because it's not
possible to intercept the bundling process of the config file in vite.

## Usage

Install this package:

```sh
# npm
npm install @deno/vite-plugin
# pnpm
pnpm install @deno/vite-plugin
# deno
deno install npm:@deno/vite-plugin
```

Add the plugin to your vite configuration file `vite.config.ts`:

```diff
  import { defineConfig } from "vite";
+ import deno from "@deno/vite-plugin";

  export default defineConfig({
+   plugins: [deno()],
  });
```

## License

MIT, see [the license file](./LICENSE).