basuicn 0.1.1 → 0.1.3

package/README.md

@@ -1,146 +1,96 @@
-# basuicn
-
-Bộ component UI cho React, phân phối qua CLI — copy trực tiếp vào dự án của bạn, không cần cài như package dependency (tương tự shadcn/ui).
-
----
-
-## Yêu cầu
-
-- Node.js 18+
-- Dự án React + Vite + TypeScript
-
----
-
-## Bắt đầu nhanh
-
-### 1. Khởi tạo dự án
-
-Đứng tại thư mục gốc dự án của bạn, chạy:
-
-```bash
-npx basuicn init
-```
-
-Lệnh này tự động thực hiện:
-
-| Bước | Nội dung |
-|------|----------|
-| Cài dev packages | `tailwindcss`, `@tailwindcss/vite`, `@vitejs/plugin-react`, `vite-plugin-babel`, `babel-plugin-react-compiler`, `@types/node` |
-| Cài runtime packages | `@base-ui/react`, `tailwind-variants`, `clsx`, `tailwind-merge`, `tailwindcss-animate` |
-| Tạo / cập nhật `vite.config.ts` | Thêm plugin Tailwind, React, React Compiler + alias `@`, `@lib`, `@components`, `@assets`, `@pages`, `@styles` |
-| Cập nhật `tsconfig.json` | Thêm `baseUrl` + `paths` tương ứng với alias trên |
-| Setup Tailwind CSS | Thêm `@import "tailwindcss";` vào `src/index.css` (tạo mới nếu chưa có) |
-| Cài core utilities | `clsx`, `tailwind-merge` + tạo `src/lib/utils/cn.ts` |
-
-> Nếu `vite.config.ts` hoặc `tsconfig.json` đã tồn tại và đã có cấu hình, CLI sẽ bỏ qua bước đó — không ghi đè.
-
-**Kết quả `vite.config.ts` sau init:**
-
-```ts
-import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import babel from 'vite-plugin-babel';
-import { reactCompilerPreset } from 'babel-plugin-react-compiler';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [
-    tailwindcss(),
-    react(),
-    babel({ presets: [reactCompilerPreset()] }),
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-      '@lib': path.resolve(__dirname, './src/lib'),
-      '@components': path.resolve(__dirname, './src/components'),
-      '@assets': path.resolve(__dirname, './src/assets'),
-      '@pages': path.resolve(__dirname, './src/pages'),
-      '@styles': path.resolve(__dirname, './src/styles'),
-    },
-  },
-});
-```
-
----
-
-### 2. Thêm component
-
-```bash
-npx basuicn add button
-npx basuicn add button input switch   # nhiều component cùng lúc
-npx basuicn add button --force        # ghi đè nếu đã tồn tại
-```
-
-Component được copy thẳng vào `src/components/ui/<name>/`. Các component phụ thuộc lẫn nhau sẽ tự động được kéo theo.
-
----
-
-### 3. Xóa component
-
-```bash
-npx basuicn remove button
-```
-
----
-
-### 4. Liệt kê tất cả component
-
-```bash
-npx basuicn list
-```
-
----
-
-### 5. Hướng dẫn cấu hình Tailwind theme
-
-```bash
-npx basuicn tailwind
-```
-
----
-
-## Tùy chọn
-
-| Flag | Mô tả |
-|------|-------|
-| `--local` | Dùng `registry.json` cục bộ thay vì tải từ remote |
-| `--force` | Ghi đè file đã tồn tại khi `add` |
-
----
-
-## Dành cho maintainer
-
-### Cập nhật registry (sau khi thêm/sửa component)
-
-```bash
-npm run registry:build
-```
-
-Sau đó commit + push lên GitHub để người dùng nhận được bản mới nhất.
-
-### Build CLI
-
-```bash
-npm run build:cli
-```
-
-Output: `dist/ui-cli.js`
-
-### Phát hành lên NPM
-
-```bash
-npm login
-npm publish
-```
-
-> Nếu tên package bị trùng, đổi `name` trong `package.json` trước khi publish.
-
----
-
-## Cơ chế hoạt động
-
-- **Remote mode (mặc định):** Tải `registry.json` từ `https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json`
-- **Local mode (`--local`):** Đọc `registry.json` ngay tại thư mục hiện tại
-- Registry chứa source code + danh sách npm dependencies của từng component — CLI đọc rồi copy/install vào dự án target
+# basuicn — UI Component CLI
+
+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).
+
+---
+
+## 🚀 Yêu cầu hệ thống
+
+- **Node.js**: Phiên bản 18 trở lên.
+- **Framework**: React + Vite + TypeScript.
+- **Styling**: Tailwind CSS v4 (hoặc v3).
+
+---
+
+## 📦 Bắt đầu nhanh
+
+### 1. Khởi tạo dự án
+
+Di chuyển đến thư mục gốc của dự án React và chạy lệnh:
+
+```bash
+npx basuicn init
+```
+
+Lệnh này sẽ thực hiện một chuỗi các thao tác tự động:
+- **Cài đặt thư viện**: `@base-ui/react`, `tailwind-variants`, `clsx`, `tailwind-merge`, `lucide-react`, ...
+- **Cấu hình Vite**: Tự động thêm alias `@/`, `@components/`, `@lib/`, ... vào `vite.config.ts`.
+- **Cấu hình TypeScript**: Thêm `paths` tương ứng vào `tsconfig.json`.
+- **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.
+- **Patching Entry**: Tự động bọc ứng dụng của bạn trong `<ThemeProvider>` tại file `src/main.tsx`.
+
+---
+
+### 2. Thêm Component
+
+Sử dụng lệnh `add` để tải component bạn cần:
+
+```bash
+npx basuicn add button
+npx basuicn add button input switch  # Thêm nhiều component cùng lúc
+npx basuicn add toast                # Tự động thêm <Toaster /> vào main.tsx
+```
+
+> **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`).
+
+---
+
+### 3. Cập nhật & So sánh (Update & Diff)
+
+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:
+
+```bash
+npx basuicn diff button    # Xem sự khác biệt giữa code local và bản gốc trên registry
+npx basuicn update button  # Ghi đè phiên bản cục bộ bằng bản mới nhất
+```
+
+---
+
+### 4. Kiểm tra sức khỏe dự án (Doctor)
+
+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:
+
+```bash\nnpx basuicn doctor
+```
+
+---
+
+## 🛠 Danh sách các lệnh (Commands)
+
+| Lệnh | Mô tả |
+|------|-------|
+| `init` | Thiết lập môi trường dự án ban đầu. |
+| `add <name>` | Thêm component vào thư mục `src/components/ui/`. |
+| `update <name>` | Cập nhật component lên phiên bản mới nhất. |
+| `diff <name>` | So sánh code hiện tại với bản gốc. |
+| `remove <name>` | Xóa component khỏi dự án. |
+| `list` | Xem danh sách tất cả các component có sẵn. |
+| `doctor` | Kiểm tra cấu hình và các file core của dự án. |
+
+---
+
+## 📂 Tùy chọn (Options)
+
+- `--force`: Ghi đè các file đã tồn tại nếu có xung đột khi `add` hoặc `init`.
+- `--local`: Chỉ dành cho phát triển — Đọc `registry.json` từ thư mục cục bộ thay vì từ GitHub.
+
+---
+
+## 👨‍💻 Dành cho Maintainers
+
+Nếu bạn muốn đóng góp hoặc tự xây dựng registry riêng:
+
+1.  **Biên dịch CLI**: `npm run build:cli`
+2.  **Đồng bộ Theme**: `npm run theme:sync` (Tạo file CSS theme từ `themes.ts`).
+3.  **Xây dựng Registry**: `npm run registry:build` (Gom toàn bộ code component vào `registry.json`).
+4.  **Publish**: `npm publish`

package/README_CLI.md

@@ -1,51 +1,44 @@
-# CUS-UI CLI (Remote/NPM Ready)
+# basuicn CLI Documentation
 
-Bộ công cụ CLI giúp bạn cài đặt các components từ thư viện UI này vào bất kỳ dự án React nào khác thông qua `npx`.
+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.
 
-## 🚀 Cách sử dụng từ dự án khác
+## 🚀 Cài đặt & Khởi tạo
 
-Bạn không cần cài đặt gì cả, chỉ cần đứng tại thư mục dự án của bạn và gõ:
+Để bắt đầu sử dụng `basuicn` trong dự án của bạn, hãy chạy:
 
-### 1. Khởi tạo dự án (Lần đầu)
 ```bash
 npx basuicn init
 ```
-Lệnh này sẽ tự động cài các gói cần thiết (`clsx`, `tailwind-merge`) và tạo file `src/lib/utils/cn.ts`.
 
-### 2. Thêm Component
-```bash
-npx basuicn add button input switch
-```
-*Lưu ý: CLI sẽ tự động nhận diện và tải thêm các component phụ thuộc nếu cần.*
+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.
 
-### 3. Cấu hình Tailwind
-Chạy lệnh sau để nhận hướng dẫn copy-paste cấu hình theme:
-```bash
-npx basuicn tailwind
-```
+## 🛠 Lệnh thông dụng
 
----
-
-## 🛠 Cách để tự bạn quản lý và phát hành
-
-### 1. Cập nhật Registry (Khi thêm component mới)
+### Thêm Component
 ```bash
-npm run registry:build
+npx basuicn add <component-name>
 ```
-Sau đó hãy `git commit` và `git push` lên GitHub để CLI trên máy người dùng có thể thấy update mới.
+Ví dụ: `npx basuicn add button input`.
+
+### Quản lý phiên bản
+-   **So sánh**: `npx basuicn diff <component-name>` để xem các thay đổi bạn đã sửa so với bản gốc.
+-   **Cập nhật**: `npx basuicn update <component-name>` để lấy bản mới nhất từ remote registry.
 
-### 2. Biên dịch CLI
+### Kiểm tra lỗi cấu hình
+Nếu component không hiển thị đúng style hoặc lỗi import, hãy dùng:
 ```bash
-npm run build:cli
+npx basuicn doctor
 ```
 
-### 3. Phát hành lên NPM
-Để mọi người có thể gõ `npx basuicn`, bạn cần đưa nó lên NPM:
-1. Đăng nhập: `npm login`
-2. Phát hành: `npm publish` (Nếu tên `basuicn` đã bị trùng trên NPM, hãy đổi tên trong `package.json`).
+## ⚙️ Cơ chế hoạt động
 
----
+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:
+1.  CLI tải Metadata của component đó.
+2.  Tự động cài đặt các thư viện `npm` tương ứng.
+3.  Kiểm tra và tải các component phụ thuộc nội bộ.
+4.  Copy source code trực tiếp vào thư mục dự án của bạn.
+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`).
 
-## 📂 Cơ chế hoạt động
-- **Local Mode**: Nếu bạn chạy `npx cus-ui add --local`, nó sẽ tìm file `registry.json` ngay tại thư mục hiện tại.
-- **Remote Mode (Mặc định)**: CLI sẽ tải dữ liệu trực tiếp từ: `https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json`.
+## 🛡 Bảo mật & Tin cậy
+-   Không phụ thuộc vào runtime sau khi cài đặt.
+-   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/dist/ui-cli.cjs

@@ -400,6 +400,114 @@ var main = async () => {
       console.log("// See README_CLI.md for full theme config");
       break;
     }
+    case "update": {
+      if (componentNames.length === 0) {
+        error("Usage: npx basuicn update <component-name> [...]");
+        return;
+      }
+      for (const name of componentNames) {
+        log(`Updating: ${name}...`);
+        addComponent(name, registry, cwd, { force: true });
+      }
+      log("Update complete.");
+      break;
+    }
+    case "diff": {
+      if (componentNames.length === 0) {
+        error("Usage: npx basuicn diff <component-name>");
+        return;
+      }
+      for (const name of componentNames) {
+        const component = registry.components[name];
+        if (!component) {
+          error(`Component "${name}" not found. Run 'list' to see available components.`);
+          continue;
+        }
+        let hasDiff = false;
+        console.log(`
+[diff] ${name}`);
+        for (const file of component.files) {
+          const targetPath = import_path.default.join(cwd, file.path);
+          if (!import_fs.default.existsSync(targetPath)) {
+            console.log(`  + [new file] ${file.path}`);
+            hasDiff = true;
+            continue;
+          }
+          const localContent = import_fs.default.readFileSync(targetPath, "utf-8");
+          if (localContent === file.content) continue;
+          hasDiff = true;
+          console.log(`
+  ~ ${file.path}`);
+          const localLines = localContent.split("\n");
+          const remoteLines = file.content.split("\n");
+          const maxLen = Math.max(localLines.length, remoteLines.length);
+          let shownLines = 0;
+          for (let i = 0; i < maxLen; i++) {
+            if (localLines[i] !== remoteLines[i]) {
+              if (localLines[i] !== void 0) console.log(`    - ${localLines[i]}`);
+              if (remoteLines[i] !== void 0) console.log(`    + ${remoteLines[i]}`);
+              shownLines++;
+              if (shownLines >= 20) {
+                const remaining = maxLen - i - 1;
+                if (remaining > 0) console.log(`    ... and ${remaining} more lines`);
+                break;
+              }
+            }
+          }
+        }
+        if (!hasDiff) log(`${name}: already up to date.`);
+      }
+      break;
+    }
+    case "doctor": {
+      log("Running project health check...\n");
+      let issues = 0;
+      const check = (ok, msg, fix) => {
+        const icon = ok ? "  \u2713" : "  \u2717";
+        console.log(`${icon} ${msg}`);
+        if (!ok) {
+          if (fix) console.log(`      \u2192 ${fix}`);
+          issues++;
+        }
+      };
+      const cnPath = import_path.default.join(cwd, "src/lib/utils/cn.ts");
+      check(import_fs.default.existsSync(cnPath), "src/lib/utils/cn.ts", "run: npx basuicn init");
+      const pkgPath = import_path.default.join(cwd, "package.json");
+      if (import_fs.default.existsSync(pkgPath)) {
+        const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
+        const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+        for (const dep of RUNTIME_PACKAGES) {
+          check(!!allDeps[dep], `dependency: ${dep}`, `run: npm install ${dep}`);
+        }
+      } else {
+        check(false, "package.json found", "run: npm init -y");
+      }
+      const cssCandidates = ["src/index.css", "src/App.css", "src/main.css", "src/styles/index.css"];
+      const hasTailwind = cssCandidates.some((f) => {
+        const p = import_path.default.join(cwd, f);
+        if (!import_fs.default.existsSync(p)) return false;
+        const c = import_fs.default.readFileSync(p, "utf-8");
+        return c.includes('@import "tailwindcss"') || c.includes("@import 'tailwindcss'");
+      });
+      check(hasTailwind, "Tailwind CSS @import in CSS file", "run: npx basuicn init");
+      const tsCandidates = ["tsconfig.app.json", "tsconfig.json"];
+      const hasAlias = tsCandidates.some((f) => {
+        const p = import_path.default.join(cwd, f);
+        if (!import_fs.default.existsSync(p)) return false;
+        const c = import_fs.default.readFileSync(p, "utf-8");
+        return c.includes('"@/*"') || c.includes("'@/*'");
+      });
+      check(hasAlias, "TypeScript path aliases (@/*)", "run: npx basuicn init");
+      const hasViteConfig = import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.ts")) || import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.js"));
+      check(hasViteConfig, "vite.config.ts / vite.config.js", "run: npx basuicn init");
+      console.log("");
+      if (issues === 0) {
+        log("All checks passed! Project is healthy.");
+      } else {
+        warn(`${issues} issue(s) found. Run 'npx basuicn init' to fix most issues.`);
+      }
+      break;
+    }
     default: {
       console.log(`
   basuicn \u2014 UI Component CLI
@@ -407,8 +515,11 @@ var main = async () => {
   Commands:
     init                     Initialize project (install core deps + files)
     add <name> [--force]     Add component(s) to your project
+    update <name>            Update component(s) to the latest registry version
+    diff <name>              Show diff between local and registry version
     remove <name>            Remove component(s) from your project
     list                     List all available components
+    doctor                   Check project health and configuration
     tailwind                 Show Tailwind config instructions
 
   Options:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "basuicn",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "bin": {
     "basuicn": "./dist/ui-cli.cjs"
@@ -22,9 +22,9 @@
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
     "registry:build": "npx -y tsx scripts/build-registry.ts",
+    "theme:sync": "npx -y tsx scripts/generate-theme-css.ts",
     "ui:add": "npx -y tsx scripts/ui-cli.ts add"
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@base-ui/react": "^1.3.0",
@@ -36,6 +36,7 @@
     "@rolldown/plugin-babel": "^0.2.1",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.23",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",