Skip to content

Commit a370f38

Browse files
chenJJ-88claude
andcommitted
feat: initial open-source release of react-cascading-input
Co-Authored-By: Claude <noreply@anthropic.com>
0 parents  commit a370f38

33 files changed

Lines changed: 5255 additions & 0 deletions

.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
insert_final_newline = true
7+
trim_trailing_whitespace = true
8+
indent_style = space
9+
indent_size = 4
10+
11+
[*.{yml,yaml}]
12+
indent_size = 2

.github/workflows/ci.yml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches: [main, master]
6+
pull_request:
7+
8+
# 同一分支只保留最新一次运行,节省 CI 资源
9+
concurrency:
10+
group: ci-${{ github.workflow }}-${{ github.ref }}
11+
cancel-in-progress: true
12+
13+
jobs:
14+
verify:
15+
name: Lint & Test (Node ${{ matrix.node }})
16+
runs-on: ubuntu-latest
17+
strategy:
18+
fail-fast: false
19+
matrix:
20+
node: [18, 20, 22]
21+
steps:
22+
- uses: actions/checkout@v4
23+
24+
- name: Setup pnpm
25+
uses: pnpm/action-setup@v4
26+
27+
- name: Setup Node.js ${{ matrix.node }}
28+
uses: actions/setup-node@v4
29+
with:
30+
node-version: ${{ matrix.node }}
31+
cache: pnpm
32+
33+
- name: Install dependencies
34+
run: pnpm install --frozen-lockfile
35+
36+
- name: Lint
37+
run: pnpm lint
38+
39+
- name: Typecheck
40+
run: pnpm typecheck
41+
42+
- name: Test
43+
run: pnpm test
44+
45+
- name: Build
46+
run: pnpm build

.gitignore

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# dependencies
2+
node_modules
3+
4+
# build output
5+
dist
6+
7+
# test coverage
8+
coverage
9+
10+
# logs
11+
*.log
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
pnpm-debug.log*
16+
17+
# environment / secrets
18+
*.local
19+
20+
# editor / IDE
21+
.idea/
22+
.vscode/*
23+
!.vscode/extensions.json
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
29+
# OS
30+
.DS_Store
31+
Thumbs.db

.husky/pre-commit

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
pnpm exec lint-staged

.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
auto-install-peers=true

CLAUDE.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Commands
6+
7+
```bash
8+
pnpm dev # start demo dev server
9+
pnpm build # typecheck (src only) + vite library build → dist/
10+
pnpm test # vitest run (all tests once)
11+
pnpm test:watch # vitest watch mode
12+
pnpm typecheck # tsc --noEmit for src + demo + node configs
13+
pnpm lint # biome check
14+
pnpm lint:fix # biome check --write (auto-fix)
15+
```
16+
17+
Run a single test file:
18+
```bash
19+
pnpm vitest run __tests__/useTreeData.test.ts
20+
```
21+
22+
## Architecture
23+
24+
This is a **library** project. `src/index.ts` is the published entry point; `demo/` and `__tests__/` are dev-only and excluded from the build.
25+
26+
**Data model:** `TreeNode[]` — a recursive tree where each node carries dynamic fields keyed by `ColumnConfig.dataIndex`, plus `id` and `children`. The tree is fully controlled: callers own state, pass `value` + `onChange`.
27+
28+
**Core split:**
29+
- `src/CascadingInput.tsx` — renders the tree recursively via `renderLevel()`, wires up hooks, provides `DefaultCellRenderer` (native HTML). Each cell gets `id="cell-${node.id}"` for Canvas targeting.
30+
- `src/hooks/useTreeData.ts` — pure tree mutation helpers (`createChain`, `updateTreeValue`, `addSiblingNode`, `deleteNodeCascade`) plus `useTreeData` hook and `ensureInitialData`. All helpers are exported and unit-tested directly.
31+
- `src/hooks/useCanvasLines.ts` — reads DOM positions via `getBoundingClientRect()` on `#cell-${id}` elements and draws lines on a `<canvas>` overlay. Uses `useLayoutEffect` to draw before paint; `ResizeObserver` for container resizes.
32+
33+
**Headless pattern:** Every column can supply `ColumnConfig.render` to fully replace the cell UI. Without it, `DefaultCellRenderer` is used. This is how antd/any-UI-library integration works — no hard dependency.
34+
35+
**tsconfig setup:** Project references split: `tsconfig.src.json` (lib), `tsconfig.demo.json` (demo + tests), `tsconfig.node.json` (vite configs). `tsconfig.base.json` holds shared `compilerOptions`.
36+
37+
**Build output:** `dist/index.js` (ESM), `dist/index.cjs` (CJS), `dist/index.d.ts` (types), `dist/style.css`. CSS export is `"./styles": "./dist/style.css"``cssFileName: 'style'` in `vite.config.ts` controls this.

CONTRIBUTING.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# 贡献指南 (Contributing)
2+
3+
感谢你对 `react-cascading-input` 的关注!欢迎提 Issue、PR 或参与讨论。
4+
5+
## 环境要求
6+
7+
- Node.js `>= 18`
8+
- pnpm(项目锁定版本见 `package.json``packageManager` 字段,首次可 `corepack enable` 自动启用)
9+
10+
## 本地开发
11+
12+
```bash
13+
# 安装依赖
14+
pnpm install
15+
16+
# 启动 demo 开发服务器(Vite)
17+
pnpm dev
18+
19+
# 类型检查
20+
pnpm typecheck
21+
22+
# 运行单元测试
23+
pnpm test
24+
25+
# 构建(先类型检查再打包到 dist/)
26+
pnpm build
27+
```
28+
29+
## 代码规范
30+
31+
- 提交前会自动通过 husky + lint-staged 运行 Biome(见 `.husky/pre-commit`)。
32+
- 手动检查:
33+
34+
```bash
35+
pnpm lint # Biome lint + 格式检查
36+
pnpm lint:fix # 自动修复 lint 问题和格式
37+
pnpm format:check # 仅格式检查
38+
pnpm format # 自动格式化
39+
```
40+
41+
- 代码风格:4 空格缩进、单引号、尾随逗号、语句分号(由 Biome 强制,配置见 `biome.json`)。
42+
- 请保持已有注释密度与命名风格,新增逻辑尽量复用 `src/hooks` 中已有工具。
43+
44+
## 项目结构
45+
46+
```
47+
src/
48+
├── index.ts # 库入口
49+
├── types.ts # 类型定义
50+
├── CascadingInput.tsx # 主组件(Headless 逻辑 + 默认渲染器)
51+
├── hooks/
52+
│ ├── useTreeData.ts # 树数据增删改
53+
│ └── useCanvasLines.ts # Canvas 关系线绘制
54+
└── styles/
55+
└── index.css # 默认渲染器样式
56+
demo/ # 本地 demo(不发布)
57+
__tests__/ # 单元测试(Vitest + Testing Library)
58+
```
59+
60+
## 提交与 PR 流程
61+
62+
1. Fork 仓库并新建分支:`feat/xxx``fix/xxx``docs/xxx`
63+
2. 保证 `pnpm lint``pnpm typecheck``pnpm test``pnpm build` 全部通过。
64+
3. 如果新增/修改了对外 API,请同步更新 `README.md` 与测试用例。
65+
4. 提交 PR,描述清楚动机与改动点。CI(GitHub Actions)会自动跑 lint / typecheck / test / build。
66+
67+
## 行为准则
68+
69+
请保持友善、尊重,致力于建设包容的开源社区。

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 chenJJ-88
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

0 commit comments

Comments
 (0)