basuicn 0.3.8 → 0.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +220 -220
  2. package/README_CLI.md +46 -46
  3. package/dist/assets/index-1YAQdTE0.css +2 -0
  4. package/dist/assets/index-BsQ6nn74.js +237 -0
  5. package/dist/favicon.svg +1 -0
  6. package/dist/icons.svg +24 -0
  7. package/dist/index.html +13 -0
  8. package/dist/ui-cli.cjs +1 -1
  9. package/dist/ui-cli.js +124 -0
  10. package/package.json +1 -1
  11. package/registry.json +29 -29
  12. package/scripts/build-registry.ts +261 -261
  13. package/scripts/bump-version.mjs +22 -22
  14. package/scripts/generate-theme-css.ts +74 -74
  15. package/scripts/set-version.mjs +31 -31
  16. package/scripts/ui-cli.ts +1 -1
package/README.md CHANGED
@@ -1,220 +1,220 @@
1
- # basuicn — React UI Component CLI
2
-
3
- Bộ sưu tập component React hiện đại, phân phối trực tiếp vào dự án qua CLI. Bạn sở hữu hoàn toàn mã nguồn — không runtime ẩn, không black box (tương tự shadcn/ui).
4
-
5
- ---
6
-
7
- ## Yêu cầu
8
-
9
- - **Node.js** 18+
10
- - **React** 18+ / 19+
11
- - **Framework**: Vite hoặc Next.js (App Router / Pages Router)
12
- - **Styling**: Tailwind CSS v4
13
-
14
- ---
15
-
16
- ## Bắt đầu nhanh
17
-
18
- ### 1. Khởi tạo dự án
19
-
20
- ```bash
21
- npx basuicn init
22
- ```
23
-
24
- Lệnh này tự động:
25
- - Cài đặt runtime packages: `@base-ui/react`, `tailwind-variants`, `clsx`, `lucide-react`, ...
26
- - Cấu hình `vite.config.ts` với Tailwind CSS v4 + path aliases (`@/`, `@components/`, `@lib/`, ...)
27
- - Cập nhật `tsconfig.json` với `paths` tương ứng
28
- - Copy core files: `cn.ts`, `ThemeProvider.tsx`, `themes.ts`, `index.css`
29
- - Bọc `<App />` trong `<ThemeProvider>` tại `src/main.tsx`
30
-
31
- > **Next.js**: CLI tự nhận diện App Router / Pages Router và cấu hình phù hợp (`postcss.config.mjs`, `app/layout.tsx`, `pages/_app.tsx`).
32
-
33
- ---
34
-
35
- ### 2. Thêm component
36
-
37
- ```bash
38
- npx basuicn add button
39
- npx basuicn add button input card # Thêm nhiều component
40
- npx basuicn add # Chế độ interactive — chọn từ danh sách
41
- ```
42
-
43
- Component được copy vào `src/components/ui/<name>/`. Bạn thoải mái chỉnh sửa sau.
44
-
45
- > CLI tự động tải các component phụ thuộc nội bộ:
46
- > - `select` → kéo theo `popover`
47
- > - `table` → kéo theo `checkbox`, `spinner`
48
- > - `sheet` → kéo theo `drawer`
49
- > - `sidebar` → kéo theo `tooltip`
50
-
51
- ---
52
-
53
- ### 3. Cập nhật component
54
-
55
- ```bash
56
- npx basuicn diff button # Xem thay đổi giữa code local và registry
57
- npx basuicn update button # Ghi đè bằng phiên bản mới nhất
58
- npx basuicn update button card dialog # Cập nhật nhiều cùng lúc
59
- ```
60
-
61
- ---
62
-
63
- ### 4. Xóa component
64
-
65
- ```bash
66
- npx basuicn remove button
67
- npx basuicn remove dialog drawer sheet
68
- ```
69
-
70
- ---
71
-
72
- ### 5. Kiểm tra cấu hình (Doctor)
73
-
74
- ```bash
75
- npx basuicn doctor
76
- ```
77
-
78
- Kiểm tra toàn bộ: core files, ThemeProvider, CSS import, runtime packages, path aliases, Tailwind config — và gợi ý cách sửa nếu có vấn đề.
79
-
80
- ---
81
-
82
- ## Danh sách lệnh
83
-
84
- | Lệnh | Mô tả |
85
- |------|-------|
86
- | `init` | Thiết lập dự án: cài packages, config Vite/Next.js, core files, ThemeProvider |
87
- | `add <name...>` | Thêm component(s) vào `src/components/ui/` |
88
- | `update <name...>` | Cập nhật component(s) lên phiên bản registry mới nhất |
89
- | `diff <name...>` | So sánh code local với bản gốc trên registry |
90
- | `remove <name...>` | Xóa component(s) và dọn thư mục trống |
91
- | `list` | Liệt kê tất cả component có sẵn (hiển thị trạng thái installed/available) |
92
- | `doctor` | Kiểm tra sức khỏe cấu hình dự án |
93
-
94
- ### Options
95
-
96
- | Flag | Mô tả |
97
- |------|-------|
98
- | `--force` | Ghi đè file đã tồn tại khi `add` / `update` |
99
- | `--local` | Đọc `registry.json` local thay vì fetch từ GitHub |
100
- | `--help, -h` | Hiển thị hướng dẫn (dùng với command để xem chi tiết: `add --help`) |
101
- | `--version, -v` | Hiển thị phiên bản CLI |
102
-
103
- ---
104
-
105
- ## Danh sách component
106
-
107
- ### Input & Form
108
- | Component | Mô tả |
109
- |-----------|-------|
110
- | `button` | Button với nhiều variant, size, loading state |
111
- | `input` | Text input cơ bản |
112
- | `textarea` | Textarea với auto-resize |
113
- | `checkbox` | Checkbox có label |
114
- | `radio` / `radio-group` | Radio button và Radio Group |
115
- | `switch` | Toggle switch |
116
- | `toggle` | Toggle button |
117
- | `select` | Dropdown select |
118
- | `autocomplete` | Input với gợi ý tự động |
119
- | `combobox` | Combobox tìm kiếm + chọn |
120
- | `number-input` | Input số với nút tăng/giảm |
121
- | `input-otp` | OTP input nhiều ô |
122
- | `slider` | Range slider |
123
- | `rate` | Đánh giá sao |
124
- | `file-upload` | Upload file với drag & drop |
125
- | `form` | Form wrapper tích hợp react-hook-form + zod |
126
- | `calendar` | Bộ chọn ngày |
127
- | `datepicker` | Input + calendar popup |
128
-
129
- ### Overlay & Popup
130
- | Component | Mô tả |
131
- |-----------|-------|
132
- | `dialog` | Modal dialog |
133
- | `alert-dialog` | Dialog xác nhận hành động |
134
- | `drawer` | Drawer trượt từ cạnh màn hình |
135
- | `sheet` | Sheet (alias drawer mở rộng) |
136
- | `popover` | Popup neo đến element |
137
- | `tooltip` | Tooltip hiển thị khi hover |
138
- | `dropdown-menu` | Menu dropdown |
139
- | `context-menu` | Menu chuột phải |
140
- | `preview-card` | Card preview khi hover |
141
- | `command` | Command palette (Ctrl+K) |
142
-
143
- ### Hiển thị dữ liệu
144
- | Component | Mô tả |
145
- |-----------|-------|
146
- | `table` | Bảng dữ liệu với sort, filter, pagination |
147
- | `chart` | Biểu đồ (line, bar, pie, ...) dựa trên Recharts |
148
- | `carousel` | Carousel / slider ảnh |
149
- | `timeline` | Timeline sự kiện |
150
- | `accordion` | Accordion mở rộng/thu gọn |
151
- | `collapsible` | Nội dung có thể ẩn/hiện |
152
- | `tree-view` | Cây phân cấp |
153
- | `table-contents` | Mục lục tự động từ headings |
154
-
155
- ### Navigation
156
- | Component | Mô tả |
157
- |-----------|-------|
158
- | `breadcrumb` | Đường dẫn điều hướng |
159
- | `tabs` | Tabs navigation |
160
- | `pagination` | Phân trang |
161
- | `menu-bar` | Menu bar ngang |
162
- | `sidebar` | Sidebar điều hướng |
163
-
164
- ### Feedback & Trạng thái
165
- | Component | Mô tả |
166
- |-----------|-------|
167
- | `toast` | Thông báo toast (Sonner) — tự thêm `<Toaster />` vào `main.tsx` |
168
- | `alert` | Thông báo inline |
169
- | `spinner` | Loading spinner |
170
- | `progress` | Thanh tiến trình |
171
- | `skeleton` | Skeleton loading placeholder |
172
- | `empty` | Trạng thái trống (empty state) |
173
-
174
- ### Layout & Misc
175
- | Component | Mô tả |
176
- |-----------|-------|
177
- | `card` | Card container |
178
- | `badge` | Badge / tag nhỏ |
179
- | `avatar` | Avatar ảnh / initials |
180
- | `separator` | Đường kẻ phân cách |
181
- | `aspect-ratio` | Container giữ tỉ lệ khung hình |
182
- | `resizable` | Panel chia tay có thể kéo resize |
183
- | `scroll-area` | Vùng cuộn tùy chỉnh |
184
- | `typography` | Các thẻ heading, paragraph chuẩn hóa style |
185
- | `pretty-code` | Hiển thị code với syntax highlight (Shiki) |
186
-
187
- ---
188
-
189
- ## Dành cho Maintainers
190
-
191
- ```bash
192
- # Chạy dev server (showcase)
193
- npm run dev
194
-
195
- # Build registry từ source components
196
- npm run registry:build
197
-
198
- # Đồng bộ theme CSS từ themes.ts
199
- npm run theme:sync
200
-
201
- # Build CLI binary
202
- npm run build:cli
203
-
204
- # Kích hoạt auto version bump sau mỗi commit
205
- npm run setup-hooks
206
-
207
- # Đặt version thủ công
208
- npm run version:set 1.0.0 # Set thẳng
209
- npm run version:set major # 0.x.x → 1.0.0
210
- npm run version:set minor # x.2.x → x.3.0
211
-
212
- # Publish lên npm
213
- npm publish
214
- ```
215
-
216
- ---
217
-
218
- ## License
219
-
220
- MIT
1
+ # basuicn — React UI Component CLI
2
+
3
+ Bộ sưu tập component React hiện đại, phân phối trực tiếp vào dự án qua CLI. Bạn sở hữu hoàn toàn mã nguồn — không runtime ẩn, không black box (tương tự shadcn/ui).
4
+
5
+ ---
6
+
7
+ ## Yêu cầu
8
+
9
+ - **Node.js** 18+
10
+ - **React** 18+ / 19+
11
+ - **Framework**: Vite hoặc Next.js (App Router / Pages Router)
12
+ - **Styling**: Tailwind CSS v4
13
+
14
+ ---
15
+
16
+ ## Bắt đầu nhanh
17
+
18
+ ### 1. Khởi tạo dự án
19
+
20
+ ```bash
21
+ npx basuicn init
22
+ ```
23
+
24
+ Lệnh này tự động:
25
+ - Cài đặt runtime packages: `@base-ui/react`, `tailwind-variants`, `clsx`, `lucide-react`, ...
26
+ - Cấu hình `vite.config.ts` với Tailwind CSS v4 + path aliases (`@/`, `@components/`, `@lib/`, ...)
27
+ - Cập nhật `tsconfig.json` với `paths` tương ứng
28
+ - Copy core files: `cn.ts`, `ThemeProvider.tsx`, `themes.ts`, `index.css`
29
+ - Bọc `<App />` trong `<ThemeProvider>` tại `src/main.tsx`
30
+
31
+ > **Next.js**: CLI tự nhận diện App Router / Pages Router và cấu hình phù hợp (`postcss.config.mjs`, `app/layout.tsx`, `pages/_app.tsx`).
32
+
33
+ ---
34
+
35
+ ### 2. Thêm component
36
+
37
+ ```bash
38
+ npx basuicn add button
39
+ npx basuicn add button input card # Thêm nhiều component
40
+ npx basuicn add # Chế độ interactive — chọn từ danh sách
41
+ ```
42
+
43
+ Component được copy vào `src/components/ui/<name>/`. Bạn thoải mái chỉnh sửa sau.
44
+
45
+ > CLI tự động tải các component phụ thuộc nội bộ:
46
+ > - `select` → kéo theo `popover`
47
+ > - `table` → kéo theo `checkbox`, `spinner`
48
+ > - `sheet` → kéo theo `drawer`
49
+ > - `sidebar` → kéo theo `tooltip`
50
+
51
+ ---
52
+
53
+ ### 3. Cập nhật component
54
+
55
+ ```bash
56
+ npx basuicn diff button # Xem thay đổi giữa code local và registry
57
+ npx basuicn update button # Ghi đè bằng phiên bản mới nhất
58
+ npx basuicn update button card dialog # Cập nhật nhiều cùng lúc
59
+ ```
60
+
61
+ ---
62
+
63
+ ### 4. Xóa component
64
+
65
+ ```bash
66
+ npx basuicn remove button
67
+ npx basuicn remove dialog drawer sheet
68
+ ```
69
+
70
+ ---
71
+
72
+ ### 5. Kiểm tra cấu hình (Doctor)
73
+
74
+ ```bash
75
+ npx basuicn doctor
76
+ ```
77
+
78
+ Kiểm tra toàn bộ: core files, ThemeProvider, CSS import, runtime packages, path aliases, Tailwind config — và gợi ý cách sửa nếu có vấn đề.
79
+
80
+ ---
81
+
82
+ ## Danh sách lệnh
83
+
84
+ | Lệnh | Mô tả |
85
+ |------|-------|
86
+ | `init` | Thiết lập dự án: cài packages, config Vite/Next.js, core files, ThemeProvider |
87
+ | `add <name...>` | Thêm component(s) vào `src/components/ui/` |
88
+ | `update <name...>` | Cập nhật component(s) lên phiên bản registry mới nhất |
89
+ | `diff <name...>` | So sánh code local với bản gốc trên registry |
90
+ | `remove <name...>` | Xóa component(s) và dọn thư mục trống |
91
+ | `list` | Liệt kê tất cả component có sẵn (hiển thị trạng thái installed/available) |
92
+ | `doctor` | Kiểm tra sức khỏe cấu hình dự án |
93
+
94
+ ### Options
95
+
96
+ | Flag | Mô tả |
97
+ |------|-------|
98
+ | `--force` | Ghi đè file đã tồn tại khi `add` / `update` |
99
+ | `--local` | Đọc `registry.json` local thay vì fetch từ GitHub |
100
+ | `--help, -h` | Hiển thị hướng dẫn (dùng với command để xem chi tiết: `add --help`) |
101
+ | `--version, -v` | Hiển thị phiên bản CLI |
102
+
103
+ ---
104
+
105
+ ## Danh sách component
106
+
107
+ ### Input & Form
108
+ | Component | Mô tả |
109
+ |-----------|-------|
110
+ | `button` | Button với nhiều variant, size, loading state |
111
+ | `input` | Text input cơ bản |
112
+ | `textarea` | Textarea với auto-resize |
113
+ | `checkbox` | Checkbox có label |
114
+ | `radio` / `radio-group` | Radio button và Radio Group |
115
+ | `switch` | Toggle switch |
116
+ | `toggle` | Toggle button |
117
+ | `select` | Dropdown select |
118
+ | `autocomplete` | Input với gợi ý tự động |
119
+ | `combobox` | Combobox tìm kiếm + chọn |
120
+ | `number-input` | Input số với nút tăng/giảm |
121
+ | `input-otp` | OTP input nhiều ô |
122
+ | `slider` | Range slider |
123
+ | `rate` | Đánh giá sao |
124
+ | `file-upload` | Upload file với drag & drop |
125
+ | `form` | Form wrapper tích hợp react-hook-form + zod |
126
+ | `calendar` | Bộ chọn ngày |
127
+ | `datepicker` | Input + calendar popup |
128
+
129
+ ### Overlay & Popup
130
+ | Component | Mô tả |
131
+ |-----------|-------|
132
+ | `dialog` | Modal dialog |
133
+ | `alert-dialog` | Dialog xác nhận hành động |
134
+ | `drawer` | Drawer trượt từ cạnh màn hình |
135
+ | `sheet` | Sheet (alias drawer mở rộng) |
136
+ | `popover` | Popup neo đến element |
137
+ | `tooltip` | Tooltip hiển thị khi hover |
138
+ | `dropdown-menu` | Menu dropdown |
139
+ | `context-menu` | Menu chuột phải |
140
+ | `preview-card` | Card preview khi hover |
141
+ | `command` | Command palette (Ctrl+K) |
142
+
143
+ ### Hiển thị dữ liệu
144
+ | Component | Mô tả |
145
+ |-----------|-------|
146
+ | `table` | Bảng dữ liệu với sort, filter, pagination |
147
+ | `chart` | Biểu đồ (line, bar, pie, ...) dựa trên Recharts |
148
+ | `carousel` | Carousel / slider ảnh |
149
+ | `timeline` | Timeline sự kiện |
150
+ | `accordion` | Accordion mở rộng/thu gọn |
151
+ | `collapsible` | Nội dung có thể ẩn/hiện |
152
+ | `tree-view` | Cây phân cấp |
153
+ | `table-contents` | Mục lục tự động từ headings |
154
+
155
+ ### Navigation
156
+ | Component | Mô tả |
157
+ |-----------|-------|
158
+ | `breadcrumb` | Đường dẫn điều hướng |
159
+ | `tabs` | Tabs navigation |
160
+ | `pagination` | Phân trang |
161
+ | `menu-bar` | Menu bar ngang |
162
+ | `sidebar` | Sidebar điều hướng |
163
+
164
+ ### Feedback & Trạng thái
165
+ | Component | Mô tả |
166
+ |-----------|-------|
167
+ | `toast` | Thông báo toast (Sonner) — tự thêm `<Toaster />` vào `main.tsx` |
168
+ | `alert` | Thông báo inline |
169
+ | `spinner` | Loading spinner |
170
+ | `progress` | Thanh tiến trình |
171
+ | `skeleton` | Skeleton loading placeholder |
172
+ | `empty` | Trạng thái trống (empty state) |
173
+
174
+ ### Layout & Misc
175
+ | Component | Mô tả |
176
+ |-----------|-------|
177
+ | `card` | Card container |
178
+ | `badge` | Badge / tag nhỏ |
179
+ | `avatar` | Avatar ảnh / initials |
180
+ | `separator` | Đường kẻ phân cách |
181
+ | `aspect-ratio` | Container giữ tỉ lệ khung hình |
182
+ | `resizable` | Panel chia tay có thể kéo resize |
183
+ | `scroll-area` | Vùng cuộn tùy chỉnh |
184
+ | `typography` | Các thẻ heading, paragraph chuẩn hóa style |
185
+ | `pretty-code` | Hiển thị code với syntax highlight (Shiki) |
186
+
187
+ ---
188
+
189
+ ## Dành cho Maintainers
190
+
191
+ ```bash
192
+ # Chạy dev server (showcase)
193
+ npm run dev
194
+
195
+ # Build registry từ source components
196
+ npm run registry:build
197
+
198
+ # Đồng bộ theme CSS từ themes.ts
199
+ npm run theme:sync
200
+
201
+ # Build CLI binary
202
+ npm run build:cli
203
+
204
+ # Kích hoạt auto version bump sau mỗi commit
205
+ npm run setup-hooks
206
+
207
+ # Đặt version thủ công
208
+ npm run version:set 1.0.0 # Set thẳng
209
+ npm run version:set major # 0.x.x → 1.0.0
210
+ npm run version:set minor # x.2.x → x.3.0
211
+
212
+ # Publish lên npm
213
+ npm publish
214
+ ```
215
+
216
+ ---
217
+
218
+ ## License
219
+
220
+ MIT
package/README_CLI.md CHANGED
@@ -1,46 +1,46 @@
1
- # basuicn CLI
2
-
3
- Công cụ dòng lệnh để thêm, cập nhật và quản lý các component UI trong dự án React.
4
-
5
- ## Cài đặt & Khởi tạo
6
-
7
- ```bash
8
- npx basuicn init
9
- ```
10
-
11
- Tự động cài packages, cấu hình Vite/Next.js, Tailwind CSS v4, path aliases và ThemeProvider.
12
-
13
- ## Các lệnh
14
-
15
- ```bash
16
- npx basuicn add <name...> # Thêm component
17
- npx basuicn update <name...> # Cập nhật lên phiên bản mới nhất
18
- npx basuicn diff <name...> # So sánh với bản gốc trên registry
19
- npx basuicn remove <name...> # Xóa component
20
- npx basuicn list # Danh sách tất cả component
21
- npx basuicn doctor # Kiểm tra cấu hình dự án
22
- ```
23
-
24
- ### Options
25
-
26
- ```
27
- --force Ghi đè file đã tồn tại
28
- --local Dùng registry.json local thay vì fetch từ GitHub
29
- --help Hướng dẫn chi tiết (vd: npx basuicn add --help)
30
- --version Hiển thị phiên bản
31
- ```
32
-
33
- ## Cơ chế hoạt động
34
-
35
- 1. Fetch metadata từ `registry.json` trên GitHub
36
- 2. Cài đặt npm packages cần thiết
37
- 3. Tải về các component phụ thuộc nội bộ tự động
38
- 4. Copy source code vào `src/components/ui/<name>/`
39
- 5. Patch `main.tsx` / `layout.tsx` nếu component yêu cầu (vd: `toast`)
40
-
41
- ## Bảo mật
42
-
43
- - Không có runtime dependency sau khi cài đặt — bạn sở hữu hoàn toàn mã nguồn
44
- - Mã nguồn mở 100%, thoải mái tùy chỉnh
45
-
46
- Xem thêm tại [README.md](./README.md).
1
+ # basuicn CLI
2
+
3
+ Công cụ dòng lệnh để thêm, cập nhật và quản lý các component UI trong dự án React.
4
+
5
+ ## Cài đặt & Khởi tạo
6
+
7
+ ```bash
8
+ npx basuicn init
9
+ ```
10
+
11
+ Tự động cài packages, cấu hình Vite/Next.js, Tailwind CSS v4, path aliases và ThemeProvider.
12
+
13
+ ## Các lệnh
14
+
15
+ ```bash
16
+ npx basuicn add <name...> # Thêm component
17
+ npx basuicn update <name...> # Cập nhật lên phiên bản mới nhất
18
+ npx basuicn diff <name...> # So sánh với bản gốc trên registry
19
+ npx basuicn remove <name...> # Xóa component
20
+ npx basuicn list # Danh sách tất cả component
21
+ npx basuicn doctor # Kiểm tra cấu hình dự án
22
+ ```
23
+
24
+ ### Options
25
+
26
+ ```
27
+ --force Ghi đè file đã tồn tại
28
+ --local Dùng registry.json local thay vì fetch từ GitHub
29
+ --help Hướng dẫn chi tiết (vd: npx basuicn add --help)
30
+ --version Hiển thị phiên bản
31
+ ```
32
+
33
+ ## Cơ chế hoạt động
34
+
35
+ 1. Fetch metadata từ `registry.json` trên GitHub
36
+ 2. Cài đặt npm packages cần thiết
37
+ 3. Tải về các component phụ thuộc nội bộ tự động
38
+ 4. Copy source code vào `src/components/ui/<name>/`
39
+ 5. Patch `main.tsx` / `layout.tsx` nếu component yêu cầu (vd: `toast`)
40
+
41
+ ## Bảo mật
42
+
43
+ - Không có runtime dependency sau khi cài đặt — bạn sở hữu hoàn toàn mã nguồn
44
+ - Mã nguồn mở 100%, thoải mái tùy chỉnh
45
+
46
+ Xem thêm tại [README.md](./README.md).