basuicn 0.1.5 → 0.1.6

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 (13) hide show
  1. package/README.md +96 -96
  2. package/README_CLI.md +44 -44
  3. package/package.json +102 -102
  4. package/registry.json +78 -17
  5. package/scripts/generate-theme-css.ts +74 -74
  6. package/scripts/ui-cli.ts +966 -966
  7. package/dist/assets/index-1YAQdTE0.css +0 -2
  8. package/dist/assets/index-BsQ6nn74.js +0 -237
  9. package/dist/favicon.svg +0 -1
  10. package/dist/icons.svg +0 -24
  11. package/dist/index.html +0 -13
  12. package/dist/ui-cli.cjs +0 -532
  13. package/dist/ui-cli.js +0 -124
package/README.md CHANGED
@@ -1,96 +1,96 @@
1
- # basuicn — UI Component CLI
2
-
3
- Bộ sưu tập component React hiện đại, được phân phối trực tiếp vào dự án của bạn thông qua CLI. Không cần cài đặt dependencies cồng kềnh, bạn hoàn toàn kiểm soát mã nguồn của mình (tương tự shadcn/ui).
4
-
5
- ---
6
-
7
- ## 🚀 Yêu cầu hệ thống
8
-
9
- - **Node.js**: Phiên bản 18 trở lên.
10
- - **Framework**: React + Vite + TypeScript.
11
- - **Styling**: Tailwind CSS v4 (hoặc v3).
12
-
13
- ---
14
-
15
- ## 📦 Bắt đầu nhanh
16
-
17
- ### 1. Khởi tạo dự án
18
-
19
- Di chuyển đến thư mục gốc của dự án React và chạy lệnh:
20
-
21
- ```bash
22
- npx basuicn init
23
- ```
24
-
25
- Lệnh này sẽ thực hiện một chuỗi các thao tác tự động:
26
- - **Cài đặt thư viện**: `@base-ui/react`, `tailwind-variants`, `clsx`, `tailwind-merge`, `lucide-react`, ...
27
- - **Cấu hình Vite**: Tự động thêm alias `@/`, `@components/`, `@lib/`, ... vào `vite.config.ts`.
28
- - **Cấu hình TypeScript**: Thêm `paths` tương ứng vào `tsconfig.json`.
29
- - **Core Components**: Copy các file tiện ích như `cn.ts`, `ThemeProvider.tsx`, `themes.ts` và biến CSS theme vào dự án.
30
- - **Patching Entry**: Tự động bọc ứng dụng của bạn trong `<ThemeProvider>` tại file `src/main.tsx`.
31
-
32
- ---
33
-
34
- ### 2. Thêm Component
35
-
36
- Sử dụng lệnh `add` để tải component bạn cần:
37
-
38
- ```bash
39
- npx basuicn add button
40
- npx basuicn add button input switch # Thêm nhiều component cùng lúc
41
- npx basuicn add toast # Tự động thêm <Toaster /> vào main.tsx
42
- ```
43
-
44
- > **Lưu ý**: CLI sẽ tự động nhận diện và tải về các component phụ thuộc (ví dụ `add select` sẽ tự tải thêm `popover`).
45
-
46
- ---
47
-
48
- ### 3. Cập nhật & So sánh (Update & Diff)
49
-
50
- Nếu có phiên bản mới của component từ thư viện gốc, bạn có thể kiểm tra và cập nhật:
51
-
52
- ```bash
53
- npx basuicn diff button # Xem sự khác biệt giữa code local và bản gốc trên registry
54
- npx basuicn update button # Ghi đè phiên bản cục bộ bằng bản mới nhất
55
- ```
56
-
57
- ---
58
-
59
- ### 4. Kiểm tra sức khỏe dự án (Doctor)
60
-
61
- Nếu bạn gặp lỗi về import hoặc cấu hình, hãy chạy lệnh sau để CLI kiểm tra và gợi ý cách sửa lỗi:
62
-
63
- ```bash\nnpx basuicn doctor
64
- ```
65
-
66
- ---
67
-
68
- ## 🛠 Danh sách các lệnh (Commands)
69
-
70
- | Lệnh | Mô tả |
71
- |------|-------|
72
- | `init` | Thiết lập môi trường dự án ban đầu. |
73
- | `add <name>` | Thêm component vào thư mục `src/components/ui/`. |
74
- | `update <name>` | Cập nhật component lên phiên bản mới nhất. |
75
- | `diff <name>` | So sánh code hiện tại với bản gốc. |
76
- | `remove <name>` | Xóa component khỏi dự án. |
77
- | `list` | Xem danh sách tất cả các component có sẵn. |
78
- | `doctor` | Kiểm tra cấu hình và các file core của dự án. |
79
-
80
- ---
81
-
82
- ## 📂 Tùy chọn (Options)
83
-
84
- - `--force`: Ghi đè các file đã tồn tại nếu có xung đột khi `add` hoặc `init`.
85
- - `--local`: Chỉ dành cho phát triển — Đọc `registry.json` từ thư mục cục bộ thay vì từ GitHub.
86
-
87
- ---
88
-
89
- ## 👨‍💻 Dành cho Maintainers
90
-
91
- Nếu bạn muốn đóng góp hoặc tự xây dựng registry riêng:
92
-
93
- 1. **Biên dịch CLI**: `npm run build:cli`
94
- 2. **Đồng bộ Theme**: `npm run theme:sync` (Tạo file CSS theme từ `themes.ts`).
95
- 3. **Xây dựng Registry**: `npm run registry:build` (Gom toàn bộ code component vào `registry.json`).
96
- 4. **Publish**: `npm publish`
1
+ # basuicn — UI Component CLI
2
+
3
+ Bộ sưu tập component React hiện đại, được phân phối trực tiếp vào dự án của bạn thông qua CLI. Không cần cài đặt dependencies cồng kềnh, bạn hoàn toàn kiểm soát mã nguồn của mình (tương tự shadcn/ui).
4
+
5
+ ---
6
+
7
+ ## 🚀 Yêu cầu hệ thống
8
+
9
+ - **Node.js**: Phiên bản 18 trở lên.
10
+ - **Framework**: React + Vite + TypeScript.
11
+ - **Styling**: Tailwind CSS v4 (hoặc v3).
12
+
13
+ ---
14
+
15
+ ## 📦 Bắt đầu nhanh
16
+
17
+ ### 1. Khởi tạo dự án
18
+
19
+ Di chuyển đến thư mục gốc của dự án React và chạy lệnh:
20
+
21
+ ```bash
22
+ npx basuicn init
23
+ ```
24
+
25
+ Lệnh này sẽ thực hiện một chuỗi các thao tác tự động:
26
+ - **Cài đặt thư viện**: `@base-ui/react`, `tailwind-variants`, `clsx`, `tailwind-merge`, `lucide-react`, ...
27
+ - **Cấu hình Vite**: Tự động thêm alias `@/`, `@components/`, `@lib/`, ... vào `vite.config.ts`.
28
+ - **Cấu hình TypeScript**: Thêm `paths` tương ứng vào `tsconfig.json`.
29
+ - **Core Components**: Copy các file tiện ích như `cn.ts`, `ThemeProvider.tsx`, `themes.ts` và biến CSS theme vào dự án.
30
+ - **Patching Entry**: Tự động bọc ứng dụng của bạn trong `<ThemeProvider>` tại file `src/main.tsx`.
31
+
32
+ ---
33
+
34
+ ### 2. Thêm Component
35
+
36
+ Sử dụng lệnh `add` để tải component bạn cần:
37
+
38
+ ```bash
39
+ npx basuicn add button
40
+ npx basuicn add button input switch # Thêm nhiều component cùng lúc
41
+ npx basuicn add toast # Tự động thêm <Toaster /> vào main.tsx
42
+ ```
43
+
44
+ > **Lưu ý**: CLI sẽ tự động nhận diện và tải về các component phụ thuộc (ví dụ `add select` sẽ tự tải thêm `popover`).
45
+
46
+ ---
47
+
48
+ ### 3. Cập nhật & So sánh (Update & Diff)
49
+
50
+ Nếu có phiên bản mới của component từ thư viện gốc, bạn có thể kiểm tra và cập nhật:
51
+
52
+ ```bash
53
+ npx basuicn diff button # Xem sự khác biệt giữa code local và bản gốc trên registry
54
+ npx basuicn update button # Ghi đè phiên bản cục bộ bằng bản mới nhất
55
+ ```
56
+
57
+ ---
58
+
59
+ ### 4. Kiểm tra sức khỏe dự án (Doctor)
60
+
61
+ Nếu bạn gặp lỗi về import hoặc cấu hình, hãy chạy lệnh sau để CLI kiểm tra và gợi ý cách sửa lỗi:
62
+
63
+ ```bash\nnpx basuicn doctor
64
+ ```
65
+
66
+ ---
67
+
68
+ ## 🛠 Danh sách các lệnh (Commands)
69
+
70
+ | Lệnh | Mô tả |
71
+ |------|-------|
72
+ | `init` | Thiết lập môi trường dự án ban đầu. |
73
+ | `add <name>` | Thêm component vào thư mục `src/components/ui/`. |
74
+ | `update <name>` | Cập nhật component lên phiên bản mới nhất. |
75
+ | `diff <name>` | So sánh code hiện tại với bản gốc. |
76
+ | `remove <name>` | Xóa component khỏi dự án. |
77
+ | `list` | Xem danh sách tất cả các component có sẵn. |
78
+ | `doctor` | Kiểm tra cấu hình và các file core của dự án. |
79
+
80
+ ---
81
+
82
+ ## 📂 Tùy chọn (Options)
83
+
84
+ - `--force`: Ghi đè các file đã tồn tại nếu có xung đột khi `add` hoặc `init`.
85
+ - `--local`: Chỉ dành cho phát triển — Đọc `registry.json` từ thư mục cục bộ thay vì từ GitHub.
86
+
87
+ ---
88
+
89
+ ## 👨‍💻 Dành cho Maintainers
90
+
91
+ Nếu bạn muốn đóng góp hoặc tự xây dựng registry riêng:
92
+
93
+ 1. **Biên dịch CLI**: `npm run build:cli`
94
+ 2. **Đồng bộ Theme**: `npm run theme:sync` (Tạo file CSS theme từ `themes.ts`).
95
+ 3. **Xây dựng Registry**: `npm run registry:build` (Gom toàn bộ code component vào `registry.json`).
96
+ 4. **Publish**: `npm publish`
package/README_CLI.md CHANGED
@@ -1,44 +1,44 @@
1
- # basuicn CLI Documentation
2
-
3
- Bộ công cụ dòng lệnh mạnh mẽ để quản lý các component UI. Tương thích hoàn toàn với dự án React + Vite + TypeScript + Tailwind CSS.
4
-
5
- ## 🚀 Cài đặt & Khởi tạo
6
-
7
- Để bắt đầu sử dụng `basuicn` trong dự án của bạn, hãy chạy:
8
-
9
- ```bash
10
- npx basuicn init
11
- ```
12
-
13
- Lệnh này sẽ chuẩn bị mọi thứ cần thiết: dependencies, path aliases, Tailwind v4 configuration, và `ThemeProvider` để quản lý giao diện sáng/tối.
14
-
15
- ## 🛠 Lệnh thông dụng
16
-
17
- ### Thêm Component
18
- ```bash
19
- npx basuicn add <component-name>
20
- ```
21
- Ví dụ: `npx basuicn add button input`.
22
-
23
- ### Quản lý phiên bản
24
- - **So sánh**: `npx basuicn diff <component-name>` để xem các thay đổi bạn đã sửa so với bản gốc.
25
- - **Cập nhật**: `npx basuicn update <component-name>` để lấy bản mới nhất từ remote registry.
26
-
27
- ### Kiểm tra lỗi cấu hình
28
- Nếu component không hiển thị đúng style hoặc lỗi import, hãy dùng:
29
- ```bash
30
- npx basuicn doctor
31
- ```
32
-
33
- ## ⚙️ Cơ chế hoạt động
34
-
35
- CLI hoạt động dựa trên một file `registry.json` phân phối từ GitHub. Khi bạn thêm một component:
36
- 1. CLI tải Metadata của component đó.
37
- 2. Tự động cài đặt các thư viện `npm` tương ứng.
38
- 3. Kiểm tra và tải các component phụ thuộc nội bộ.
39
- 4. Copy source code trực tiếp vào thư mục dự án của bạn.
40
- 5. (Tùy chọn) Thêm code khởi tạo vào `src/main.tsx` nếu component cần (ví dụ: `Toaster`).
41
-
42
- ## 🛡 Bảo mật & Tin cậy
43
- - Không phụ thuộc vào runtime sau khi cài đặt.
44
- - Mã nguồn mở 100%, bạn có thể thoải mái tùy chỉnh sau khi copy vào dự án.
1
+ # basuicn CLI Documentation
2
+
3
+ Bộ công cụ dòng lệnh mạnh mẽ để quản lý các component UI. Tương thích hoàn toàn với dự án React + Vite + TypeScript + Tailwind CSS.
4
+
5
+ ## 🚀 Cài đặt & Khởi tạo
6
+
7
+ Để bắt đầu sử dụng `basuicn` trong dự án của bạn, hãy chạy:
8
+
9
+ ```bash
10
+ npx basuicn init
11
+ ```
12
+
13
+ Lệnh này sẽ chuẩn bị mọi thứ cần thiết: dependencies, path aliases, Tailwind v4 configuration, và `ThemeProvider` để quản lý giao diện sáng/tối.
14
+
15
+ ## 🛠 Lệnh thông dụng
16
+
17
+ ### Thêm Component
18
+ ```bash
19
+ npx basuicn add <component-name>
20
+ ```
21
+ Ví dụ: `npx basuicn add button input`.
22
+
23
+ ### Quản lý phiên bản
24
+ - **So sánh**: `npx basuicn diff <component-name>` để xem các thay đổi bạn đã sửa so với bản gốc.
25
+ - **Cập nhật**: `npx basuicn update <component-name>` để lấy bản mới nhất từ remote registry.
26
+
27
+ ### Kiểm tra lỗi cấu hình
28
+ Nếu component không hiển thị đúng style hoặc lỗi import, hãy dùng:
29
+ ```bash
30
+ npx basuicn doctor
31
+ ```
32
+
33
+ ## ⚙️ Cơ chế hoạt động
34
+
35
+ CLI hoạt động dựa trên một file `registry.json` phân phối từ GitHub. Khi bạn thêm một component:
36
+ 1. CLI tải Metadata của component đó.
37
+ 2. Tự động cài đặt các thư viện `npm` tương ứng.
38
+ 3. Kiểm tra và tải các component phụ thuộc nội bộ.
39
+ 4. Copy source code trực tiếp vào thư mục dự án của bạn.
40
+ 5. (Tùy chọn) Thêm code khởi tạo vào `src/main.tsx` nếu component cần (ví dụ: `Toaster`).
41
+
42
+ ## 🛡 Bảo mật & Tin cậy
43
+ - Không phụ thuộc vào runtime sau khi cài đặt.
44
+ - Mã nguồn mở 100%, bạn có thể thoải mái tùy chỉnh sau khi copy vào dự án.
package/package.json CHANGED
@@ -1,102 +1,102 @@
1
- {
2
- "name": "basuicn",
3
- "private": false,
4
- "version": "0.1.5",
5
- "type": "module",
6
- "bin": {
7
- "basuicn": "./dist/ui-cli.cjs"
8
- },
9
- "files": [
10
- "dist",
11
- "registry.json",
12
- "scripts",
13
- "README_CLI.md"
14
- ],
15
- "scripts": {
16
- "dev": "vite",
17
- "build": "tsc -b && vite build",
18
- "build:cli": "npx -y esbuild scripts/ui-cli.ts --bundle --platform=node --outfile=dist/ui-cli.cjs --format=cjs --packages=external",
19
- "lint": "eslint .",
20
- "preview": "vite preview",
21
- "test": "vitest",
22
- "test:ui": "vitest --ui",
23
- "test:coverage": "vitest run --coverage",
24
- "registry:build": "npx -y tsx scripts/build-registry.ts",
25
- "theme:sync": "npx -y tsx scripts/generate-theme-css.ts",
26
- "ui:add": "npx -y tsx scripts/ui-cli.ts add",
27
- "storybook": "storybook dev -p 6006",
28
- "build-storybook": "storybook build"
29
- },
30
- "devDependencies": {
31
- "@babel/core": "^7.29.0",
32
- "@base-ui/react": "^1.3.0",
33
- "@codesandbox/sandpack-react": "^2.20.0",
34
- "@eslint/js": "^9.39.4",
35
- "@fontsource-variable/geist": "^5.2.8",
36
- "@hookform/resolvers": "^5.2.2",
37
- "@monaco-editor/react": "^4.7.0",
38
- "@rolldown/plugin-babel": "^0.2.1",
39
- "@tailwindcss/vite": "^4.2.2",
40
- "@tanstack/react-table": "^8.21.3",
41
- "@tanstack/react-virtual": "^3.13.23",
42
- "@testing-library/jest-dom": "^6.9.1",
43
- "@testing-library/react": "^16.3.2",
44
- "@testing-library/user-event": "^14.6.1",
45
- "@types/babel__core": "^7.20.5",
46
- "@types/hast": "^3.0.4",
47
- "@types/node": "^24.12.0",
48
- "@types/react": "^19.2.14",
49
- "@types/react-dom": "^19.2.3",
50
- "@vitejs/plugin-react": "^6.0.1",
51
- "@vitest/ui": "^4.1.2",
52
- "autoprefixer": "^10.4.27",
53
- "babel-plugin-react-compiler": "^1.0.0",
54
- "clsx": "^2.1.1",
55
- "date-fns": "^4.1.0",
56
- "dayjs": "^1.11.20",
57
- "eslint": "^9.39.4",
58
- "eslint-plugin-react-hooks": "^7.0.1",
59
- "eslint-plugin-react-refresh": "^0.5.2",
60
- "globals": "^17.4.0",
61
- "jsdom": "^29.0.1",
62
- "lucide-react": "^0.577.0",
63
- "postcss": "^8.5.8",
64
- "react": "^19.2.4",
65
- "react-day-picker": "^9.14.0",
66
- "react-dom": "^19.2.4",
67
- "react-hook-form": "^7.72.0",
68
- "react-live": "^4.1.8",
69
- "react-resizable-panels": "^4.8.0",
70
- "react-router-dom": "^7.13.2",
71
- "rehype-parse": "^9.0.1",
72
- "rehype-pretty-code": "^0.14.3",
73
- "rehype-react": "^8.0.0",
74
- "shiki": "^4.0.2",
75
- "sonner": "^2.0.7",
76
- "tailwind-merge": "^3.5.0",
77
- "tailwind-variants": "^3.2.2",
78
- "tailwindcss": "^4.2.2",
79
- "tailwindcss-animate": "^1.0.7",
80
- "tw-animate-css": "^1.4.0",
81
- "typescript": "~5.9.3",
82
- "typescript-eslint": "^8.57.0",
83
- "unified": "^11.0.5",
84
- "vite": "^8.0.1",
85
- "vitest": "^4.1.2",
86
- "zod": "^4.3.6",
87
- "storybook": "^10.3.4",
88
- "@storybook/react-vite": "^10.3.4",
89
- "@chromatic-com/storybook": "^5.1.1",
90
- "@storybook/addon-vitest": "^10.3.4",
91
- "@storybook/addon-a11y": "^10.3.4",
92
- "@storybook/addon-docs": "^10.3.4",
93
- "@storybook/addon-onboarding": "^10.3.4",
94
- "eslint-plugin-storybook": "^10.3.4",
95
- "playwright": "^1.59.1",
96
- "@vitest/browser-playwright": "^4.1.2",
97
- "@vitest/coverage-v8": "^4.1.2"
98
- },
99
- "dependencies": {
100
- "keen-slider": "^6.8.6"
101
- }
102
- }
1
+ {
2
+ "name": "basuicn",
3
+ "private": false,
4
+ "version": "0.1.6",
5
+ "type": "module",
6
+ "bin": {
7
+ "basuicn": "./dist/ui-cli.cjs"
8
+ },
9
+ "files": [
10
+ "dist",
11
+ "registry.json",
12
+ "scripts",
13
+ "README_CLI.md"
14
+ ],
15
+ "scripts": {
16
+ "dev": "vite",
17
+ "build": "tsc -b && vite build",
18
+ "build:cli": "npx -y esbuild scripts/ui-cli.ts --bundle --platform=node --outfile=dist/ui-cli.cjs --format=cjs --packages=external",
19
+ "lint": "eslint .",
20
+ "preview": "vite preview",
21
+ "test": "vitest",
22
+ "test:ui": "vitest --ui",
23
+ "test:coverage": "vitest run --coverage",
24
+ "registry:build": "npx -y tsx scripts/build-registry.ts",
25
+ "theme:sync": "npx -y tsx scripts/generate-theme-css.ts",
26
+ "ui:add": "npx -y tsx scripts/ui-cli.ts add",
27
+ "storybook": "storybook dev -p 6006",
28
+ "build-storybook": "storybook build"
29
+ },
30
+ "devDependencies": {
31
+ "@babel/core": "^7.29.0",
32
+ "@base-ui/react": "^1.3.0",
33
+ "@codesandbox/sandpack-react": "^2.20.0",
34
+ "@eslint/js": "^9.39.4",
35
+ "@fontsource-variable/geist": "^5.2.8",
36
+ "@hookform/resolvers": "^5.2.2",
37
+ "@monaco-editor/react": "^4.7.0",
38
+ "@rolldown/plugin-babel": "^0.2.1",
39
+ "@tailwindcss/vite": "^4.2.2",
40
+ "@tanstack/react-table": "^8.21.3",
41
+ "@tanstack/react-virtual": "^3.13.23",
42
+ "@testing-library/jest-dom": "^6.9.1",
43
+ "@testing-library/react": "^16.3.2",
44
+ "@testing-library/user-event": "^14.6.1",
45
+ "@types/babel__core": "^7.20.5",
46
+ "@types/hast": "^3.0.4",
47
+ "@types/node": "^24.12.0",
48
+ "@types/react": "^19.2.14",
49
+ "@types/react-dom": "^19.2.3",
50
+ "@vitejs/plugin-react": "^6.0.1",
51
+ "@vitest/ui": "^4.1.2",
52
+ "autoprefixer": "^10.4.27",
53
+ "babel-plugin-react-compiler": "^1.0.0",
54
+ "clsx": "^2.1.1",
55
+ "date-fns": "^4.1.0",
56
+ "dayjs": "^1.11.20",
57
+ "eslint": "^9.39.4",
58
+ "eslint-plugin-react-hooks": "^7.0.1",
59
+ "eslint-plugin-react-refresh": "^0.5.2",
60
+ "globals": "^17.4.0",
61
+ "jsdom": "^29.0.1",
62
+ "lucide-react": "^0.577.0",
63
+ "postcss": "^8.5.8",
64
+ "react": "^19.2.4",
65
+ "react-day-picker": "^9.14.0",
66
+ "react-dom": "^19.2.4",
67
+ "react-hook-form": "^7.72.0",
68
+ "react-live": "^4.1.8",
69
+ "react-resizable-panels": "^4.8.0",
70
+ "react-router-dom": "^7.13.2",
71
+ "rehype-parse": "^9.0.1",
72
+ "rehype-pretty-code": "^0.14.3",
73
+ "rehype-react": "^8.0.0",
74
+ "shiki": "^4.0.2",
75
+ "sonner": "^2.0.7",
76
+ "tailwind-merge": "^3.5.0",
77
+ "tailwind-variants": "^3.2.2",
78
+ "tailwindcss": "^4.2.2",
79
+ "tailwindcss-animate": "^1.0.7",
80
+ "tw-animate-css": "^1.4.0",
81
+ "typescript": "~5.9.3",
82
+ "typescript-eslint": "^8.57.0",
83
+ "unified": "^11.0.5",
84
+ "vite": "^8.0.1",
85
+ "vitest": "^4.1.2",
86
+ "zod": "^4.3.6",
87
+ "storybook": "^10.3.4",
88
+ "@storybook/react-vite": "^10.3.4",
89
+ "@chromatic-com/storybook": "^5.1.1",
90
+ "@storybook/addon-vitest": "^10.3.4",
91
+ "@storybook/addon-a11y": "^10.3.4",
92
+ "@storybook/addon-docs": "^10.3.4",
93
+ "@storybook/addon-onboarding": "^10.3.4",
94
+ "eslint-plugin-storybook": "^10.3.4",
95
+ "playwright": "^1.59.1",
96
+ "@vitest/browser-playwright": "^4.1.2",
97
+ "@vitest/coverage-v8": "^4.1.2"
98
+ },
99
+ "dependencies": {
100
+ "keen-slider": "^6.8.6"
101
+ }
102
+ }