cus-base-ui 0.2.3 → 0.2.4

package/README.md

@@ -1,55 +1,145 @@
-# CUS-UI CLI (Remote/NPM Ready)
-
-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`.
-
-## 🚀 Cách sử dụng từ dự án khác
-
-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õ:
-
-### 1. Khởi tạo dự án (Lần đầu)
-```bash
-npx cus-base-ui 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 cus-base-ui 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.*
-
-### 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 cus-base-ui tailwind
-```
-
----
-### 4. Liệt kê Component
-```bash
-npx cus-base-ui list
-```
-
-## 🛠 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)
-```bash
-npm run registry:build
-```
-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.
-
-### 2. Biên dịch CLI
-```bash
-npm run build:cli
-```
-
-### 3. Phát hành lên NPM
-Để mọi người có thể gõ `npx cus-base-ui`, 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 `cus-base-ui` đã bị trùng trên NPM, hãy đổi tên trong `package.json`).
-
----
-
-## 📂 Cơ chế hoạt động
-- **Local Mode**: Nếu bạn chạy `npx cus-base-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`.
+# cus-base-ui
+
+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 cus-base-ui 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` |
+| 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 cus-base-ui add button
+npx cus-base-ui add button input switch   # nhiều component cùng lúc
+npx cus-base-ui 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 cus-base-ui remove button
+```
+
+---
+
+### 4. Liệt kê tất cả component
+
+```bash
+npx cus-base-ui list
+```
+
+---
+
+### 5. Hướng dẫn cấu hình Tailwind theme
+
+```bash
+npx cus-base-ui 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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cus-base-ui",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "bin": {
     "cus-base-ui": "./dist/ui-cli.cjs"

package/scripts/ui-cli.ts

@@ -56,7 +56,7 @@ const getRegistry = async (isLocal: boolean): Promise<Registry> => {
     }
 };
 
-const installNpmPackages = (packages: string[], cwd: string) => {
+const installNpmPackages = (packages: string[], cwd: string, dev = false) => {
     if (packages.length === 0) return;
 
     const pkgJsonPath = path.join(cwd, 'package.json');
@@ -71,13 +71,174 @@ const installNpmPackages = (packages: string[], cwd: string) => {
     if (toInstall.length === 0) return;
 
     log(`Installing: ${toInstall.join(', ')}...`);
+    const flag = dev ? '--save-dev' : '--save';
     try {
-        execSync(`npm install ${toInstall.join(' ')} --save`, { stdio: 'inherit', cwd });
+        execSync(`npm install ${toInstall.join(' ')} ${flag}`, { stdio: 'inherit', cwd });
     } catch (err) {
         error(`Failed to install packages: ${toInstall.join(', ')}. ${err instanceof Error ? err.message : ''}`);
     }
 };
 
+const VITE_DEV_PACKAGES = ['tailwindcss', '@tailwindcss/vite', '@vitejs/plugin-react', 'vite-plugin-babel', 'babel-plugin-react-compiler', '@types/node'];
+
+const VITE_CONFIG_TEMPLATE = `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';
+
+// https://vite.dev/config/
+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'),
+    },
+  },
+});
+`;
+
+const TSCONFIG_PATHS = {
+    '@/*': ['./src/*'],
+    '@lib/*': ['./src/lib/*'],
+    '@components/*': ['./src/components/*'],
+    '@assets/*': ['./src/assets/*'],
+    '@pages/*': ['./src/pages/*'],
+    '@styles/*': ['./src/styles/*'],
+};
+
+const setupViteConfig = (cwd: string) => {
+    installNpmPackages(VITE_DEV_PACKAGES, cwd, true);
+
+    const configTs = path.join(cwd, 'vite.config.ts');
+    const configJs = path.join(cwd, 'vite.config.js');
+
+    if (!fs.existsSync(configTs) && !fs.existsSync(configJs)) {
+        fs.writeFileSync(configTs, VITE_CONFIG_TEMPLATE);
+        log('Created vite.config.ts with Tailwind + React Compiler setup.');
+        return;
+    }
+
+    const existingPath = fs.existsSync(configTs) ? configTs : configJs;
+    const content = fs.readFileSync(existingPath, 'utf-8');
+
+    const missingImports: string[] = [];
+    if (!content.includes('@tailwindcss/vite')) missingImports.push("import tailwindcss from '@tailwindcss/vite';");
+    if (!content.includes('@vitejs/plugin-react')) missingImports.push("import react from '@vitejs/plugin-react';");
+    if (!content.includes('vite-plugin-babel')) missingImports.push("import babel from 'vite-plugin-babel';");
+    if (!content.includes('babel-plugin-react-compiler')) missingImports.push("import { reactCompilerPreset } from 'babel-plugin-react-compiler';");
+
+    const missingPlugins: string[] = [];
+    if (!content.includes('tailwindcss()')) missingPlugins.push('tailwindcss()');
+    if (!content.includes('react()') && !content.includes('react({')) missingPlugins.push('react()');
+    if (!content.includes('reactCompilerPreset')) missingPlugins.push('babel({ presets: [reactCompilerPreset()] })');
+
+    const hasAlias = content.includes('alias:') || content.includes("'@'") || content.includes('"@"');
+
+    if (missingImports.length === 0 && missingPlugins.length === 0 && hasAlias) {
+        log('vite.config already configured — skipping.');
+        return;
+    }
+
+    warn(`${path.basename(existingPath)} exists but is missing required setup. Add the following manually:`);
+    if (missingImports.length > 0) {
+        console.log('\n  // Imports to add:');
+        for (const imp of missingImports) console.log(`  ${imp}`);
+    }
+    if (missingPlugins.length > 0) {
+        console.log('\n  // Plugins to add inside defineConfig({ plugins: [...] }):');
+        for (const plugin of missingPlugins) console.log(`    ${plugin},`);
+    }
+    if (!hasAlias) {
+        console.log('\n  // resolve.alias to add inside defineConfig({}):');
+        console.log("  resolve: {");
+        console.log("    alias: {");
+        console.log("      '@': path.resolve(__dirname, './src'),");
+        console.log("      '@lib': path.resolve(__dirname, './src/lib'),");
+        console.log("      '@components': path.resolve(__dirname, './src/components'),");
+        console.log("      '@assets': path.resolve(__dirname, './src/assets'),");
+        console.log("      '@pages': path.resolve(__dirname, './src/pages'),");
+        console.log("      '@styles': path.resolve(__dirname, './src/styles'),");
+        console.log("    },");
+        console.log("  },");
+    }
+    console.log('');
+};
+
+const ensureTailwindCss = (cwd: string) => {
+    const candidates = ['src/index.css', 'src/App.css', 'src/main.css'];
+    for (const cssFile of candidates) {
+        const cssPath = path.join(cwd, cssFile);
+        if (fs.existsSync(cssPath)) {
+            const content = fs.readFileSync(cssPath, 'utf-8');
+            if (!content.includes('@import "tailwindcss"') && !content.includes("@import 'tailwindcss'")) {
+                fs.writeFileSync(cssPath, `@import "tailwindcss";\n\n${content}`);
+                log(`Added @import "tailwindcss" to ${cssFile}`);
+            } else {
+                log(`${cssFile} already imports Tailwind — skipping.`);
+            }
+            return;
+        }
+    }
+    // No CSS file found — create src/index.css
+    const srcDir = path.join(cwd, 'src');
+    if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir, { recursive: true });
+    fs.writeFileSync(path.join(srcDir, 'index.css'), '@import "tailwindcss";\n');
+    log('Created src/index.css with @import "tailwindcss"');
+};
+
+const setupTsConfig = (cwd: string) => {
+    const candidates = ['tsconfig.app.json', 'tsconfig.json'];
+
+    for (const candidate of candidates) {
+        const configPath = path.join(cwd, candidate);
+        if (!fs.existsSync(configPath)) continue;
+
+        const raw = fs.readFileSync(configPath, 'utf-8');
+
+        if (raw.includes('"@/*"') || raw.includes("'@/*'")) {
+            log(`${candidate} already has path aliases — skipping.`);
+            return;
+        }
+
+        try {
+            // Strip single-line and block comments before parsing
+            const stripped = raw.replace(/\/\/[^\n]*/g, '').replace(/\/\*[\s\S]*?\*\//g, '');
+            const parsed = JSON.parse(stripped) as { compilerOptions?: Record<string, unknown> };
+            if (!parsed.compilerOptions) parsed.compilerOptions = {};
+            parsed.compilerOptions.baseUrl = '.';
+            parsed.compilerOptions.paths = TSCONFIG_PATHS;
+            fs.writeFileSync(configPath, JSON.stringify(parsed, null, 2));
+            log(`Added path aliases to ${candidate}.`);
+        } catch {
+            warn(`Could not auto-patch ${candidate}. Add these to compilerOptions manually:`);
+            console.log('\n  "baseUrl": ".",');
+            console.log('  "paths": {');
+            for (const [alias, targets] of Object.entries(TSCONFIG_PATHS)) {
+                console.log(`    "${alias}": ["${targets[0]}"],`);
+            }
+            console.log('  }');
+            console.log('');
+        }
+        return;
+    }
+
+    // No tsconfig found — create a minimal one
+    const newConfig = { compilerOptions: { baseUrl: '.', paths: TSCONFIG_PATHS } };
+    fs.writeFileSync(path.join(cwd, 'tsconfig.json'), JSON.stringify(newConfig, null, 2));
+    log('Created tsconfig.json with path aliases.');
+};
+
 const ensureCore = (registry: { core?: { dependencies: string[]; files: { path: string; content: string }[] } }, cwd: string) => {
     const core = registry.core;
     if (!core) return;
@@ -226,6 +387,9 @@ const main = async () => {
         }
 
         case 'init': {
+            setupViteConfig(cwd);
+            setupTsConfig(cwd);
+            ensureTailwindCss(cwd);
             ensureCore(registry, cwd);
             log('Initialization complete.');
             break;