open-index/open-npm huggingface dataset:
npm package: @lucko/react-flame-graph
Description: React component for visualizing profiling data
Author: Brian Vaughn
Latest version: 1.4.1

# react-flame-graph

> React component for visualizing profiling data

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

## Install

```bash
npm install --save react-flame-graph
```

## Usage

Learn more at [react-flame-graph.now.sh](https://react-flame-graph.now.sh/).

## License

MIT © [bvaughn](https://github.com/bvaughn)
npm package: @luckrnx09/abook
Description: <h1 align="center">⚡ abook⚡</h1> <p align="center"> An AI powered command-line tool for generating any books from scratch</p>
Author: luckrnx09
Latest version: 1.0.2

<h1 align="center">⚡ abook⚡</h1>
<p align="center">
An AI powered command-line tool for generating any books from scratch
</p>

<div align="center">
Here is a book written based on abook:

📚 **Python Guide for JavaScript Engineers** | [Read it online](http://luckrnx09.com/python-guide-for-javascript-engineers/)
</div>

## Getting started
### Prepare
Run `cp .env.example .env` then fill the `.env` file:
- OPENAI_API_KEY: Required, string, type your open api key
- OPENAI_MODEL: Required, string, type your open ai model name
- OPENAI_BASE_URL: Optional, string, type your custom openai api url
- VERBOSE: Optional, `true` or `false`, determine whether or not to print conversation details when interacting with openai

### Install
You can install `abook` as a global command as following: 
```bash
yarn global add @luckrnx09/abook
```
or
```bash
npm install -g @luckrnx09/abook
```
or
```bash
pnpm install -g @luckrnx09/abook
```
Then you can use `abook -V` to print the abook version installed.

If you don't want to install it globally, you can use `npx` to run abook directly: 
```bash
npx @luckrnx09/abook
```
### Usage
|command|description|
|--|--|
 | ls              |list all the ideas|
 | new             |create an idea|
 | outline \<idea\>  |generate outline from an idea|
 | publish \<idea\>  |convert book content to markdown|
 | rm \<idea\>       |remove an idea|
 | run \<idea\>      |generate book content from an idea with outline|
 | help [command]  |display help for command|

## Develop
TODO

## Contribute
Any code enhancements, documentation updates, unit tests are welcome.

Any changes that alter functionality, please submit an issue first.

## License
This project is under [MIT](LICENSE) license
npm package: @luckrya/eslint-config-base
Description: An eslint config serve @luckrya organization
Author: L.C
Latest version: 0.1.0

# `@luckrya/eslint-config-base`

Integration of some base rule sets, please refer to Rules below

## Installation

```sh
$ pnpm add -D @luckrya/eslint-config-base

#【peerDependencies】 If it has been installed, ignore it
$ pnpm add -D eslint prettier jest typescript
```

## Usage

**.eslintrc.js**

```js
module.exports = {
  extends: ["@luckrya/base"],
};
```

## Rules

- @luckrya/core
- plugin:import/typescript
- plugin:@typescript-eslint/recommended
- plugin:prettier/recommended

<!-- | Rule                                                                            | Value   | Source               |
| ------------------------------------------------------------------------------- | ------- | -------------------- |
| [@typescript-eslint/adjacent-overload-signatures](adjacent-overload-signatures) | `error` | `@typescript-eslint` | -->
npm package: @luckrya/eslint-config-cli
Description: A tool to quickly integrate code specifications for your project. It mainly uses the official configuration of @luckrya/eslint-config-*, allowing developers to focus more on business development.
Author: Y.R
Latest version: 0.1.1

# `@luckrya/eslint-config-cli`

<p>
  <img src="https://img.shields.io/npm/v/@luckrya/eslint-config-cli" alt="NPM Version" />
  <img src="https://img.shields.io/npm/dm/@luckrya/eslint-config-cli.svg" alt="NPM Downloads" />
  <img src="https://img.shields.io/npm/l/@luckrya/eslint-config-cli" alt="License">
  <img src="https://img.shields.io/bundlephobia/minzip/@luckrya/eslint-config-cli" alt="npm bundle size (scoped)" >
</p>

A tool to quickly integrate code specifications for your project. It mainly uses the official configuration of @luckrya/eslint-config-\*, allowing developers to focus more on business development. Simple and efficient.

## Installation

```sh
$ pnpm add global @luckrya/eslint-config-cli

# or No need to download 【 recommended 】
$ npx @luckrya/eslint-config-cli@latest inject
```

## Usage

```sh
$ ecc -h

Usage: ecc <command> [options]

Commands:
  ecc inject  Inject code specification (@luckrya/eslint-config-*) features for projects

Options:
  -h, --help     Show help                                             [boolean]
  -v, --version  Show version number                                   [boolean]
```
npm package: @luckrya/eslint-config-react
Description: An eslint config serve @luckrya organization
Author: L.C
Latest version: 0.1.1

# `@luckrya/eslint-config-react`

Integration of some react rule sets, please refer to Rules below

## Installation

```sh
$ pnpm add -D @luckrya/eslint-config-react
```

## Usage

**.eslintrc.js**

```js
module.exports = {
  extends: ["@luckrya/react"],
};
```

```json
{
  "scripts": {
    "lint": "eslint . --ext .tsx,.ts" // or eslint .
  }
}
```

## Rules

```yml
- "@luckrya/base"
- "plugin:react/recommended"
- "plugin:react-hooks/recommended"
- "plugin:jsx-a11y/recommended"
- "plugin:prettier/recommended"
```

<!-- | Rule                                                                                                                   | Value   | Source                      |
| ---------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------- |
| [react-hooks/rules-of-hooks](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md) | `error` | `eslint-plugin-react-hooks` | -->
npm package: @luckrya/eslint-config-vue
Description: An eslint config serve @luckrya organization
Author: Y.R
Latest version: 0.1.0

# `@luckrya/eslint-config-vue`

Integration of some vue rule sets, please refer to Rules below

## Installation

```sh
$ pnpm add -D @luckrya/eslint-config-vue
```

## Usage

**.eslintrc.js**

```js
module.exports = {
  extends: ["@luckrya/vue"],
};
```

```jsonc
{
  "scripts": {
    "lint": "eslint . --ext .vue,.ts,.tsx" // or eslint .
  }
}
```

## Rules

```yml
- "@luckrya/base"
- "plugin:vue/vue3-recommended"
- "plugin:prettier/recommended"
```

<!-- | Rule                                                                                             | Value   | Source              |
| ------------------------------------------------------------------------------------------------ | ------- | ------------------- |
| [vue/multi-word-component-names](https://eslint.vuejs.org/rules/multi-word-component-names.html) | `error` | `eslint-plugin-vue` | -->
npm package: @luckrya/icon-box-react
Description: react icon
Author: @luckrya
Latest version: 1.2.0

# `@luckrya/icon-box-react`

React Svg Icon Components

## 安装

```sh
npm install @luckrya/icon-box-react
```

## 引用图标

```jsx
import { AlertFilled } from "@luckrya/icon-box-react";

export default function App() {
  return (
    <div class="root">
      <AlertFilled size={24} />
    </div>
  );
}
```

```jsx
import * as ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
```

## 自动按需引用图标

可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来按需加载图标。 **配置 `.babelrc`**

```json
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@luckrya/icon-box-react",
        "libraryDirectory": "build/esm/icons"
      }
    ]
  ]
}
```

```js
import { AlertFilled } from "@luckrya/icon-box-react";
////                  👇🏻                        ////
import AlertFilled from "@luckrya/icon-box-react/build/esm/icons/alert-filled";
```

## 属性

| 属性名称 | 说明                 | 类型            | 默认值         |
| -------- | -------------------- | --------------- | -------------- |
| size     | 图标的大小，宽高相同 | number， string | '24px'         |
| color    | 图标的颜色，         | string          | 'currentColor' |

## 打包工具选择说明

Create React App 和 Next.js 默认使用 Webpack 它们在内部集成了 Babel

[介绍全新的 JSX 转换](https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

本项目使用 Babel 作为编译 JSX 语法的编译器，使用 Rollup 捆绑
npm package: @luckrya/icon-box-vue
Description: vue icon
Author: @luckrya
Latest version: 1.1.0

# `@luckrya/icon-box-vue`

Vue Svg Icon Components

## 安装

```sh
npm install @luckrya/icon-box-vue
```

## 全量引入

```js
import Vue from "vue";
import IconBox from "@luckrya/icon-box-vue";
import App from "./App.vue";

Vue.use(IconBox);

new Vue({
  el: "#app",
  render: (h) => h(App),
});
```

## 引用图标

```html
<template>
  <AlertFilled :size="24" />
</template>

<script>
  import { AlertFilled } from "@luckrya/icon-box-vue";

  export default {
    components: {
      AlertFilled,
    },
  };
</script>
```

## 自动按需引用图标

可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来按需加载图标。 **配置 `.babelrc`**

```json
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@luckrya/icon-box-vue",
        "libraryDirectory": "build/esm/icons"
      }
    ]
  ]
}
```

```js
import { AlertFilled } from "@luckrya/icon-box-vue";
////                  👇🏻                        ////
import AlertFilled from "@luckrya/icon-box-vue/build/esm/icons/alert-filled";
```

## 属性

| 属性名称 | 说明                 | 类型            | 默认值         |
| -------- | -------------------- | --------------- | -------------- |
| size     | 图标的大小，宽高相同 | number， string | '24px'         |
| color    | 图标的颜色，         | string          | 'currentColor' |
npm package: @luckrya/utility
Description: A practical library of JavaScript tool functions extracted and summarized at work
Latest version: 0.1.1

English | [简体中文](./README.zh-CN.md)

<p align="center">
  <img width="30%" height="30%"  src="./docs/public/logo.png" alt="Logo" />
</p>

<h1 align="center" >@luckrya/utility</h1>

<p align="center">A practical library of JavaScript tool functions extracted and summarized at work</p>

<p align="center">
    <img src="https://img.shields.io/npm/v/@luckrya/utility" alt="NPM Version" />
    <img src="https://img.shields.io/npm/dm/@luckrya/utility.svg" alt="NPM Downloads" />
    <img src="https://github.com/luckrya/utility/actions/workflows/CI.yml/badge.svg?branch=main" alt="CI" />
    <img src="https://img.shields.io/npm/l/@luckrya/utility" alt="License">
    <img src="https://img.shields.io/bundlephobia/minzip/@luckrya/utility" alt="npm bundle size (scoped)" >
</p>

## Installing

```sh
$ pnpm add @luckrya/utility
```

## Features

- 💄 Written and tested using TypeScript, which means you won't have any problems with custom types.
- 🫂 Can be used for JavaScript applications on both client (web browser) and server (eg node.js).
- 🍇 Contains more than 30 functions that handle different aspects of the problem.（Constantly Updating!）
- 🥊 High test coverage
- 🧩 Support for building smaller products

## Usage

```js
// ESM / Typescript
import { isBoolean } from "@luckrya/utility";

// CommonJS
const { isBoolean } = require("@luckrya/utility");
```

## Documentation

The documentation of this package is hosted at https://luckrya.github.io/utility/en/

<!-- 123 -->
npm package: @lucksp/react_webpack_boilerplate
Description: React boilerplate with Webpack, Express, Hot Module Replacement loading
Author: Phil Lucks
Latest version: 1.0.0

# react_webpack_boilerplate

React boilerplate with Webpack, Express, Hot Module Replacement loading

## Setup

Create a bare clone of the repository.

```
// Mirror-push to the new repository:
git clone --bare git@github.com:lucksp/react_webpack_express_boilerplate.git
```

```
cd react_webpack_express_boilerplate.git
git push --mirror https://github.com/exampleuser/your-new-repository.git`
// Then remove the temporary local repository you created in step 1.
```

`cd ..` and `rm -rf react_webpack_express_boilerplate.git`

Then...

`npm install`

## Run Dev

`npm run dev`

## Run Prod

`npm run build`

#### Credits to:

[medium.freecodecamp React Boilerplate](https://medium.freecodecamp.org/how-to-build-your-own-react-boilerplate-2f8cbbeb9b3f) and [medium.freecodecamp Webpack for React](https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060) for getting this started.
npm package: @lucky-boy/lottery-grid
Description: > EN: High-density grid lottery presentation with animated cards and shared UI overlays.   > CN: 支持高密度卡片展示的网格抽奖场景，并复用通用 UI 覆盖层。
Latest version: 1.0.1

# @lucky-boy/lottery-grid

> EN: High-density grid lottery presentation with animated cards and shared UI overlays.  
> CN: 支持高密度卡片展示的网格抽奖场景，并复用通用 UI 覆盖层。

## Features · 特性
- EN: Configurable column count, spacing, and card layout for LED wall scenarios. / CN: 可配置列数、间距与卡片布局，适配大屏墙展示。
- EN: Built-in audio hooks (BGM & atmosphere) alongside remote user loading. / CN: 内置背景音乐与氛围音效，同时支持远程用户数据。
- EN: Shares control shortcuts and result modals with lottery-ui for consistency. / CN: 与 lottery-ui 共享快捷键和结果弹窗，保证体验一致。

## Installation · 安装
```bash
pnpm add @lucky-boy/lottery-grid
# peer deps
pnpm add three react react-dom
```

## Usage · 使用示例
```tsx
import { LotteryGrid } from "@lucky-boy/lottery-grid";
import type { LotteryGridConfig, User } from "@lucky-boy/lottery-grid";

const users: User[] = Array.from({ length: 60 }, (_, index) => ({
  id: index + 1,
  name: `嘉宾 ${index + 1}`
}));

const overrides: Partial<LotteryGridConfig> = {
  gridColumns: 12,
  gridGapX: 24,
  backgroundImageUrl: "/assets/grid-bg.png"
};

export function GridDemo() {
  return <LotteryGrid users={users} {...overrides} />;
}
```

## Configuration Highlights · 关键配置
| Field | Description |
| ----- | ----------- |
| `gridColumns` | EN: Number of columns to render. / CN: 网格列数。 |
| `gridGapX` / `gridGapY` | EN: Horizontal & vertical spacing between cards. / CN: 卡片的水平与垂直间距。 |
| `bgmUrl` / `atmosphereUrl` | EN: Optional audio tracks for background ambiance. / CN: 可选背景音乐与氛围音效。 |
| `autoStartNextRound` | EN: Automatically trigger next round after showing results. / CN: 展示结果后自动开始下一轮。 |

## Development · 本地开发
```bash
pnpm install
pnpm run build
```

## License · 许可
MIT
npm package: @lucky-boy/lottery-helix
Description: > EN: DNA-inspired 3D lottery animation featuring spiraling user cards and atmospheric lighting.   > CN: DNA 螺旋造型的 3D 抽奖动画，结合用户卡片与灯光效果。
Latest version: 1.0.1

# @lucky-boy/lottery-helix

> EN: DNA-inspired 3D lottery animation featuring spiraling user cards and atmospheric lighting.  
> CN: DNA 螺旋造型的 3D 抽奖动画，结合用户卡片与灯光效果。

## Features · 特性
- EN: Parametric helix controls for radius, height, and turn count. / CN: 提供半径、高度、圈数等参数化控制。
- EN: Supports remote user ingestion with texture caching for performance. / CN: 支持远程用户数据加载并缓存纹理以提升性能。
- EN: Shares control overlays, result modal, and settings drawer with lottery-ui. / CN: 复用 lottery-ui 的控制条、结果弹窗与设置面板。

## Installation · 安装
```bash
pnpm add @lucky-boy/lottery-helix
# peer deps
pnpm add three react react-dom
```

## Usage · 使用示例
```tsx
import { LotteryHelix } from "@lucky-boy/lottery-helix";
import type { LotteryHelixConfig, User } from "@lucky-boy/lottery-helix";

const users: User[] = [
  { id: "001", name: "Alice" },
  { id: "002", name: "Bob" }
];

const overrides: Partial<LotteryHelixConfig> = {
  radius: 15,
  height: 40,
  turns: 3
};

export function HelixDemo() {
  return <LotteryHelix users={users} {...overrides} />;
}
```

## Configuration Highlights · 关键配置
| Field | Description |
| ----- | ----------- |
| `radius` | EN: Controls how far cards orbit from the center axis. / CN: 控制卡片到中心轴的距离。 |
| `height` | EN: Total vertical distance covered by the helix. / CN: 螺旋覆盖的总高度。 |
| `turns` | EN: Number of helix rotations. / CN: 螺旋旋转圈数。 |
| `particleSpeedMax` | EN: Upper bound for particle drift speed. / CN: 粒子漂移速度上限。 |

## Development · 本地开发
```bash
pnpm install
pnpm run build
```

## License · 许可
MIT
npm package: @lucky-boy/lottery-mars
Description: > EN: Lottery Mars is a Three.js powered 3D lottery scene that works with the shared lottery-ui controls.   > CN: Lottery Mars 基于 Three.js 构建，并与 lottery-ui 控件协同工作的 3D 抽奖场景。
Latest version: 1.0.1

# @lucky-boy/lottery-mars

> EN: Lottery Mars is a Three.js powered 3D lottery scene that works with the shared lottery-ui controls.  
> CN: Lottery Mars 基于 Three.js 构建，并与 lottery-ui 控件协同工作的 3D 抽奖场景。

## Features · 特性

- EN: Animated planet core with particle orbits and winner spotlight transitions. / CN: 动态星球核心与粒子环绕效果，支持获奖者聚焦。
- EN: Background image overlay with adjustable opacity for brand storytelling. / CN: 支持背景图与透明遮罩，便于呈现品牌视觉。
- EN: Media recording hooks and keyboard shortcuts inherited from lottery-ui. / CN: 继承 lottery-ui 的录屏能力与快捷键控制。

## Installation · 安装

```bash
pnpm add @lucky-boy/lottery-mars
# peer deps
pnpm add three react react-dom
```

## Usage · 使用示例

```tsx
import { PlanetStar } from "@lucky-boy/lottery-mars";
import type { PlanetStarConfig, User } from "@lucky-boy/lottery-mars";

const users: User[] = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const config: Partial<PlanetStarConfig> = {
  text: {
    title: "Mars Lottery",
    subtitle: "火星特别奖"
  },
  backgroundImageUrl: "/assets/mars-bg.png",
  radius: 28
};

export function LotteryMarsDemo() {
  return <PlanetStar users={users} config={config} />;
}
```

## Configuration Highlights · 关键配置

| Field                      | Description                                                                             |
| -------------------------- | --------------------------------------------------------------------------------------- |
| `radius`                   | EN: Planet radius controlling card orbit distance. / CN: 星球半径，决定卡片运行距离。   |
| `cardWidth` / `cardHeight` | EN: Card billboard size. / CN: 卡片牌面尺寸。                                           |
| `particleSpeedMax`         | EN: Maximum particle drift speed. / CN: 粒子漂移的最大速度。                            |
| `backgroundImageUrl`       | EN: Background image path rendered beneath the canvas. / CN: 在画布下绘制的背景图地址。 |

## Development · 本地开发

```bash
pnpm install
pnpm run build
```

## License · 许可

MIT
npm package: @lucky-boy/lottery-table
Description: > EN: Table-oriented lottery scene optimized for dense data and quick scanning.   > CN: 面向高密度名单展示、便于快速浏览的表格抽奖场景。
Latest version: 1.0.1

# @lucky-boy/lottery-table

> EN: Table-oriented lottery scene optimized for dense data and quick scanning.  
> CN: 面向高密度名单展示、便于快速浏览的表格抽奖场景。

## Features · 特性
- EN: Virtualized row updates with smooth auto-scroll transitions. / CN: 虚拟化行更新并带有平滑的自动滚动动画。
- EN: Built-in result history management (winner list, undo, clear). / CN: 内建获奖记录管理，支持撤销与清空。
- EN: Shares the same modal, control bar, and settings drawer as lottery-ui. / CN: 与 lottery-ui 共享弹窗、控制条与设置抽屉。

## Installation · 安装
```bash
pnpm add @lucky-boy/lottery-table
# peer deps
pnpm add react react-dom
```

## Usage · 使用示例
```tsx
import { LotteryTable } from "@lucky-boy/lottery-table";
import type { LotteryTableConfig, User } from "@lucky-boy/lottery-table";

const users: User[] = Array.from({ length: 300 }, (_, i) => ({
  id: `user-${i}`,
  name: `员工 ${i + 1}`
}));

const config: Partial<LotteryTableConfig> = {
  tableColumns: 4,
  backgroundImageUrl: "/assets/table-bg.png"
};

export function TableDemo() {
  return <LotteryTable users={users} config={config} onWinner={(user) => console.log(user)} />;
}
```

## Configuration Highlights · 关键配置
| Field | Description |
| ----- | ----------- |
| `tableColumns` | EN: Number of columns rendered in the table. / CN: 表格显示的列数。 |
| `backgroundImageUrl` | EN: Optional background image beneath the canvas. / CN: 可选背景图。 |
| `loopBgm` | EN: Control whether the BGM loops. / CN: 控制背景音乐是否循环播放。 |
| `autoStartNextRound` | EN: Auto trigger the next round after showing results. / CN: 展示结果后自动开始下一轮。 |

## Development · 本地开发
```bash
pnpm install
pnpm run build
```

## License · 许可
MIT
npm package: @lucky-boy/lottery-ui
Description: > EN: Shared UI components, utilities, and types used by every Lucky Boy visual experience.   > CN: Lucky Boy 各类可视化抽奖体验所共用的 UI 组件、工具函数与类型定义。
Latest version: 1.0.1

# @lucky-boy/lottery-ui

> EN: Shared UI components, utilities, and types used by every Lucky Boy visual experience.  
> CN: Lucky Boy 各类可视化抽奖体验所共用的 UI 组件、工具函数与类型定义。

## Features · 特性

- EN: Headless state sharing with ready-to-ship React components. / CN: 提供可直接使用的 React 组件与可复用的状态管理逻辑。
- EN: Consistent configuration surface across Mars, Helix, Grid, and Table scenes. / CN: 为火星、螺旋、网格、表格场景提供一致的配置接口。
- EN: TypeScript-first design with full DTS bundles. / CN: TypeScript 优先设计，内置完整类型声明。

## Installation · 安装

```bash
pnpm add @lucky-boy/lottery-ui
# or
npm install @lucky-boy/lottery-ui
# or
yarn add @lucky-boy/lottery-ui
```

## Usage · 使用示例

```tsx
import { ControlBar, ResultModal, SettingsModal, TopInfo } from "@lucky-boy/lottery-ui";

export function DemoUI() {
  return (
    <>
      <TopInfo prizeName="Grand Prize" subtitle="今晚的幸运大奖" />
      <ControlBar state="IDLE" onToggleLottery={() => {}} onToggleSettings={() => {}} onShuffleUsers={() => {}} />
      <ResultModal open winners={[{ id: 1, name: "Alice" }]} onClose={() => {}} />
      <SettingsModal open config={{}} onClose={() => {}} onApply={() => {}} />
    </>
  );
}
```

## Related Packages · 关联包

- `@lucky-boy/lottery-mars`
- `@lucky-boy/lottery-helix`
- `@lucky-boy/lottery-grid`
- `@lucky-boy/lottery-table`

## Development · 本地开发

```bash
pnpm install
pnpm run build
```

## License · 许可

MIT