open-index/open-npm huggingface dataset:
npm package: @geee-be/eslint-config
Description: ```bash pnpm add -w -D eslint eslint-plugin-filenames eslint-plugin-prefer-arrow eslint-config-prettier eslint-plugin-import eslint-plugin-promise
Author: Greg Bacchus
Latest version: 1.1.1

## Install Peer Dependencies

```bash
pnpm add -w -D eslint eslint-plugin-filenames eslint-plugin-prefer-arrow eslint-config-prettier eslint-plugin-import eslint-plugin-promise

# also useful for linting
pnpm add -w -D ts-unused-exports
```
npm package: @geee-be/prettier-config
Description: Install or update the package
Author: Greg Bacchus
Latest version: 1.0.6

# Prettier Config

## To Use

Install or update the package

```bash
npm install --save-dev @geee-be/prettier-config@latest
# -- or --
pnpm add --save-dev @geee-be/prettier-config@latest
# -- or --
yarn add --dev @geee-be/prettier-config@latest
```

Configure prettier. In `package.json`, add

```json
{
  ...,
  "prettier": "@geee-be/prettier-config"
}
```

## Using with Eslint

Disable eslint rules that conflict.

Install plugin:

```bash
npm install --save-dev eslint-config-prettier@latest eslint@latest
# -- or --
pnpm add --save-dev eslint-config-prettier@latest eslint@latest
# -- or --
yarn add --dev eslint-config-prettier@latest eslint@latest
```

Configure `.eslintrc.json`

```json
{
  "extends": [
    ...,
    "prettier"
  ],
  ...
}
```
npm package: @geee-be/react-button
Description: Headless, accessible React button component
Latest version: 0.1.2

# @headless-ui/react-button

A headless, accessible React button component following the [Radix UI](https://www.radix-ui.com/) patterns.

## Features

- 🎨 **Unstyled** — bring your own styles with CSS, Tailwind, etc.
- ♿ **Accessible** — correct ARIA roles and keyboard behaviour out of the box
- 🔄 **`asChild` support** — render any element as a button using the Radix UI `Slot` pattern
- 🔁 **Ref forwarding** — access the underlying DOM element
- 📦 **Dual ESM/CJS** — works in any module system

## Installation

```bash
pnpm add @headless-ui/react-button
# or
npm install @headless-ui/react-button
# or
yarn add @headless-ui/react-button
```

## Usage

```tsx
import { Button } from '@headless-ui/react-button';

// Basic usage
function App() {
  return <Button onClick={() => console.log('clicked')}>Click me</Button>;
}
```

### With Tailwind CSS

```tsx
<Button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Click me
</Button>
```

### `asChild` — Polymorphic Rendering

Use the `asChild` prop to render a different element (e.g. a link) with all button props merged in:

```tsx
import { Button } from '@headless-ui/react-button';

// Renders an <a> tag but receives the button's onClick and other props
<Button asChild>
  <a href="/dashboard">Go to Dashboard</a>
</Button>
```

This is especially useful for router link components:

```tsx
import { Link } from 'react-router-dom';

<Button asChild>
  <Link to="/dashboard">Dashboard</Link>
</Button>
```

## API

### `Button`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `asChild` | `boolean` | `false` | When `true`, renders the child element instead of `<button>`, merging all props. |
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | The button's `type` attribute. Defaults to `'button'` to avoid accidental form submission. |
| `disabled` | `boolean` | `false` | Disables the button. |
| `ref` | `React.Ref<HTMLButtonElement>` | — | Forwarded ref to the underlying element. |
| ...rest | `React.ButtonHTMLAttributes<HTMLButtonElement>` | — | All standard `<button>` HTML attributes are supported. |

## License

MIT
npm package: @geeebe/jest-bdd
Description: Provides type-safe constructs for DBB using Jest
Latest version: 1.0.15

# Jest BDD

Provides type-safe constructs for DBB using Jest.

## Getting Started

Install

```bash
npm install -D @geeebe/jest-bdd
```

In a test file:

```typescript
import { given } from '@geeebe/jest-bdd';

given('an empty array', () => {
  // perform any logic to fulfil the "given" condition described
  const array: number[] = [];

  // return any artifacts required by the tests
  return { array }
}, (when, then) => {
  when('pop() is called', ({ array }) => {
    // perform pop operation described
    const result = array.pop();

    then('the result will be undefined', () => {
      expect(result).toBeUndefined();
    });

    then('the length of the array will still be 0', () => {
      expect(array.length).toBe(0);
    });
  });

  when.each([1, -2, 3])('push(%s) is called', ({ array }, i) => {
    // perform push operation described
    const result = array.push(i);

    then('the result will be 1 (length of array with single item added)', () => {
      expect(result).toBe(1)
    });

    then('the length of the array will be 1', () => {
      expect(array.length).toBe(1);
    });

    then('the array will contain the item pushed', () => {
      expect(array).toContain(i);
    });
  });
});
```

The output will be

```text
GIVEN an empty array
  WHEN pop() is called
    ✓ THEN the result will be undefined
    ✓ THEN the length of the array will still be 0
  WHEN push(1) is called
    ✓ THEN the result will be 1 (length of array with single item added)
    ✓ THEN the length of the array will be 1
    ✓ THEN the array will contain the item pushed
  WHEN push(-2) is called
    ✓ THEN the result will be 1 (length of array with single item added)
    ✓ THEN the length of the array will be 1
    ✓ THEN the array will contain the item pushed
  WHEN push(3) is called
    ✓ THEN the result will be 1 (length of array with single item added)
    ✓ THEN the length of the array will be 1
    ✓ THEN the array will contain the item pushed
```

## Async Tests

Async test work like this

```typescript
import { given } from '../next-gen';

given('async function is created', () => {
  // perform any logic to fulfil the "given" condition described
  const inner = jest.fn((n: number) => Math.pow(n, 2));
  const fn = (i?: number) => Promise.resolve(inner(i ?? 3));

  // return any artifacts required by the tests
  return ({ fn, inner })
}, (when, then) => {
  when('the function is called', ({ fn }) => {
    const result = fn();

    then('the result will be 9', async () => {
      expect(await result).toBe(9);
    });
  });

  when.each([1, -2, 3])('is called with arg %s', ({ fn, inner }, i) => {
    const result = fn(i);

    then(`the inner function will have been called once`, async () => {
      await result;
      expect(inner).toHaveBeenCalledTimes(1);
    });

    then(`the result will be positive`, async () => {
      const n = await result;
      expect(n).toBeGreaterThan(0);
    });

    then(`the result will be ${i * i}`, async () => {
      const n = await result;
      expect(n).toBe(i * i);
    });
  });
});
```
npm package: @geeeger/canvas-clip
Description: 使用canvas抠除像素点
Author: geeeger
Latest version: 1.0.1

# @geeeger/canvas-clip

这是一个canvas抠图工具，并没有使用任何matting算法，仅是以像素点和色彩色差为目标进行抠图

## Usage

```js
describe('test', function () {
  it('if pixi color equal transparent', function () {
    const picture = document.createElement('canvas')
    picture.width = 2
    picture.height = 2
    document.body.appendChild(picture)
    const ctx = picture.getContext('2d') as CanvasRenderingContext2D
    ctx.fillStyle = 'rgb(114,114,114)'
    ctx.fillRect(0, 0, 2, 2)
    ctx.fillStyle = 'rgb(0, 0, 0)'
    ctx.fillRect(1, 1, 1, 1)
    const result = clip(
      // 图源，CanvasImageSource
      picture,
      // 图片大小
      2,
      2,
      // 需要抠除的颜色
      {
        r: 0,
        g: 0,
        b: 0,
        a: 255,
      },
      // 色差（相似度）
      0,
      // 叠加背景色，可选，默认白色，用于rgba转rgb
      {
        r: 255,
        g: 255,
        b: 255,
      }
    )
    const ctx1 = result.getContext('2d') as CanvasRenderingContext2D
    expect(
      Array.from(ctx1.getImageData(0, 0, 2, 2).data).toString()
    ).to.be.equal('114,114,114,255,114,114,114,255,114,114,114,255,0,0,0,0')
  })
})
```
npm package: @geeeger/date-utils
Description: date utils
Author: geeeger
Latest version: 1.0.0

# @geeeger/date-utils

## methods

### getGMT8LocalDate

```javascript
import { getGMT8LocalDate } from '@geeeger/date-utils'

const unixTimestamp = Math.floor(Date.now() / 1000)

const date = getGMT8LocalDate(unixTimestamp)

console.log([date.getFullYear(), date.getMonth(), date.getDate()].join('.'))
console.log([date.getHours(), date.getMinutes(), date.getSeconds()].join(':'))
```
npm package: @geeeger/deferred
Description: promise 工具
Latest version: 1.0.0

# usage

```typescript
import deferredCreator from "@geeeger/deferred"
import fs from 'fs'
function read(fileName) {
    const deferred = deferredCreator()
    fs.readFile(path, {encoding: 'utf-8'}, (err, data) => {
        if (err) {
            deferred.reject(err)
        }
        else {
            deferred.resolve(data)
        }
    })
    return deferred.promise
}

read()
    .then(() => {
        // balabala
    })
    .catch((e) => {
        // balabala
    })
```
npm package: @geeeger/use-timeline-task
Description: for schedula task
Author: geeeger
Latest version: 1.0.2

# usage

```javascript
import useTimeLineTask from "@geeeger/use-timeline-task"
const preventRunTaskIfPlayListIsEmpty = useCallback((_, next) => {
  if (!list || !list.length) {
    return
  }
  next()
}, [list])

const countDown = useCallback((context, next) => {
  setStep(step + 1)
  next()
}, [step])

const skipTaskIfPlayInTime = useCallback((context, next) => {
  if (step < TIMEOUT_OVERFLOW) {
    context.skip = true
  }
  next()
}, [step])

const handle = useCallback((content, _) => {
  if (context.skip) {
    return
  }
  // resetStep
  setStep(0)
  // do something
}, [])

// arg1 => composed conditionfunc
// arg2 => interval
useTimeLineTask([
  preventRunTaskIfPlayListIsEmpty,
  countDown,
  skipTaskIfPlayInTime,
  handle,
], 1000)
```
npm package: @geeeger/viewbox-offset
Description: 计算svg path的offset值
Author: geeeger
Latest version: 1.0.0

# viewbox-offset

自用

### 产生原因

UI给的矢量图，导出时width height写死了，然后因为旋转了不同组，导致多余了很多冗余信息，并且自动伸缩不能，所以制作了这个沙雕工具.

### 适用范围

path元素的d属性值，只支持以三次贝塞尔画的曲线和直线，也就是M和C

### 计算内容

整个path距离画布的偏移值x和y

### 原理

收集各个点，计算三次贝塞尔曲线的顶点，入栈，然后寻找最小的x值和最小的y值作为offset值

### 公式依据

设 Bt 为要计算的贝塞尔曲线上的坐标，N 为控制点个数，P0,P1,P2..Pn 为贝塞尔曲线控制点的坐标，当 N 值不同时有如下计算公式: 

如 N 为 3 表示贝塞尔曲线的控制点有 3 个点，这时 n 为 2 ，这三个点分别用 P0,P1,P2 表示。

+ N = 3: P = (1-t)^2*P0 + 2*(1-t)*t*P1 + t^2*P2 
+ N = 4: P = (1-t)^3*P0 + 3*(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3 
+ N = 5: P = (1-t)^4*P0 + 4*(1-t)^3*t*P1 + 6(1-t)^2*t^2*P2 + 4*(1-t)*t^3*P3 + t^4*P4 
--------------------- 
版权声明：本文为CSDN博主「DuanJiaNing_」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aimeimeits/article/details/72809382

### 简化公式

```javascript
const t = .5;
const coefficient = Math.pow(t, 3);
const x = coefficient * (this.start.x + 3.0 * this.ctrl0.x + 3.0 * this.ctrl1.x + this.end.x);
const y = coefficient * (this.start.y + 3.0 * this.ctrl0.y + 3.0 * this.ctrl1.y + this.end.y);
```
npm package: @geeeger/webpack-any-prevent-plugin
Description: Prevent any file from landing
Author: geeeger
Latest version: 1.0.0

# Usage

```js
const { AnyPreventPlugin } = require('@geeeger/webpack-any-prevent-plugin');

const webpackConfig = {
  mode: 'production',
  bail: true,
  devtool: false,
  entry: {
    app: resolveApp('src/h5-components/app.scss'),
  },
  output: {
    path: resolveApp('lib/css'),
    filename: '[name].js',
  },
  optimization: {
    minimize: true,
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          parser: safePostCssParser,
          map: false,
        },
        cssProcessorPluginOptions: {
          preset: ['default', { minifyFontValues: { removeQuotes: false } }],
        },
      }),
    ],
  },
  resolve: {},
  module: {
    strictExportPresence: true,
    rules: [
      { parser: { requireEnsure: false } },
      {
        oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve('url-loader'),
            options: {
              limit: imageInlineSizeLimit,
              name: 'assets/[name].[ext]',
            },
          },
          {
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 3,
                sourceMap: false,
              },
              'sass-loader'
            ),
            sideEffects: true,
          },
          {
            loader: require.resolve('file-loader'),
            exclude: [sassRegex, /.js$/],
            options: {
              name: 'assets/[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new AnyPreventPlugin({
      exportExculde: [/.js$/],
    }),
    new MiniCssExtractPlugin({
      filename: 'app.css',
    }),
  ],
  performance: false,
}

// => dist lib/css/app.css and main.js will not landing
```
npm package: @geeeger/webpack-remove-loader
Description: remove something from context
Author: geeeger
Latest version: 1.0.0

# Usage

```js
// webpack
export default {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        enforce: 'pre',
        use: [
          {
            loader: '@geeeger/webpack-remove-loader',
            options: {
              start: '/* remove-start */',
              end: '/* remove-end */'
            },
          },
        ],
        include: appPath,
      }
    }
}

```
npm package: @geeeger/webpack-remove-plugin
Description: remove something from context
Author: geeeger
Latest version: 1.0.1

# Usage

```js
const { WebpackRemovePlugin } = require('@geeeger/webpack-remove-plugin');
// some webpack config
module.exports = {
    plugins: [
        new WebpackRemovePlugin({
            start: '/* remove-start */',
            end: '/* remove-end */'
        }, ['.js'])
    ]
}
```

```js
// xxxx.js
// before
import React from 'react';
import logo from './logo.svg';
import './App.css';
/* remove-start */
alert('defaultProps=3432432')
/* remove-end */

// after
import React from 'react';
import logo from './logo.svg';
import './App.css';

```
npm package: @geeesy/type-aiflow
Description: Types and Interfaces for AIFLOW Project
Author: Dome Jantaphat
Latest version: 2.4.0

## Types and Interfaces for AIFLOW Projects

![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/geeesy/type-aiflow/ci.yml)
![NPM Version](https://img.shields.io/npm/v/%40geeesy%2Ftype-aiflow)
![NPM Last Update](https://img.shields.io/npm/last-update/%40geeesy%2Ftype-aiflow)

[NPM Package @geeesy/type-aiflow](https://www.npmjs.com/package/@geeesy/type-aiflow)

### Development

- Run before commit to git

```shell
npm run ci
```

### NPM

- Run before publishing to npm

```shell
npm run prepublishOnly
```

- Release a new version from local

```shell
# add a changeset
npx changeset

# commit the changes
git add .
git commit -m 'xxx'

# publish
npm run local-release
```