create-asterui 0.1.3 → 0.1.5

package/README.md

@@ -26,6 +26,7 @@ npm create asterui my-app --js --themes all --pm pnpm
 ```
 --js              Use JavaScript instead of TypeScript
 --ts              Use TypeScript (default)
+--prefixed        Use @aster-ui/prefixed with d- prefix for daisyUI
 --themes <preset> Theme preset: light-dark, business, all
 --pm <manager>    Package manager: npm, pnpm, yarn
 -h, --help        Show help message
@@ -35,8 +36,9 @@ npm create asterui my-app --js --themes all --pm pnpm
 
 - Creates a new Vite + React project
 - Configures Tailwind CSS v4 and DaisyUI v5
-- Installs AsterUI and react-hook-form
+- Installs AsterUI (or @aster-ui/prefixed with --prefixed) and react-hook-form
 - Sets up theme configuration (light/dark, business/corporate, or custom)
+- Optionally configures daisyUI class prefix for avoiding conflicts
 - Supports TypeScript or JavaScript
 
 ## After scaffolding
@@ -53,15 +55,15 @@ Some AsterUI components require additional peer dependencies and use separate im
 ```bash
 # For Chart component
 npm install apexcharts
-import { Chart } from 'asterui/chart'
+import { Chart } from 'asterui/chart'  # or '@aster-ui/prefixed/chart'
 
 # For QRCode component
 npm install qrcode
-import { QRCode } from 'asterui/qrcode'
+import { QRCode } from 'asterui/qrcode'  # or '@aster-ui/prefixed/qrcode'
 
 # For VirtualList component
 npm install @tanstack/react-virtual
-import { VirtualList } from 'asterui/virtuallist'
+import { VirtualList } from 'asterui/virtuallist'  # or '@aster-ui/prefixed/virtuallist'
 ```
 
 ## Links

package/dist/index.js

@@ -14,6 +14,14 @@ const DAISYUI_THEMES = [
     'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'
 ];
 const THEME_PRESETS = ['light-dark', 'business', 'all'];
+const ICON_LIBRARIES = [
+    { value: '@aster-ui/icons', label: '@aster-ui/icons', hint: 'Heroicons with size tokens', version: '^0.1.0' },
+    { value: '@heroicons/react', label: 'Heroicons', hint: '300+ icons, outline/solid', version: '^2.2.0' },
+    { value: 'lucide-react', label: 'Lucide', hint: 'popular, 1400+ icons', version: '^0.500.0' },
+    { value: 'react-icons', label: 'React Icons', hint: 'multiple icon sets', version: '^5.4.0' },
+    { value: '@phosphor-icons/react', label: 'Phosphor', hint: '9000+ icons, 6 weights', version: '^2.1.0' },
+    { value: 'none', label: 'None', hint: 'skip icon library' },
+];
 function parseArgs() {
     const args = process.argv.slice(2);
     const result = {};
@@ -28,6 +36,9 @@ function parseArgs() {
         else if (arg === '--ts') {
             result.language = 'ts';
         }
+        else if (arg === '--prefixed') {
+            result.prefixed = true;
+        }
         else if (arg === '--themes' && args[i + 1]) {
             result.themes = args[++i];
         }
@@ -53,6 +64,7 @@ ${pc.bold('Usage:')}
 ${pc.bold('Options:')}
   --js              Use JavaScript instead of TypeScript
   --ts              Use TypeScript (default)
+  --prefixed        Use @aster-ui/prefixed with d- prefix for daisyUI
   --themes <preset> Theme preset: light-dark, business, all
   --pm <manager>    Package manager: npm, pnpm, yarn
   -h, --help        Show this help message
@@ -110,6 +122,12 @@ async function main() {
                     { value: 'js', label: 'JavaScript' },
                 ],
             }),
+        prefixed: () => cliArgs.prefixed !== undefined
+            ? Promise.resolve(cliArgs.prefixed)
+            : p.confirm({
+                message: 'Use prefixed daisyUI classes?',
+                initialValue: false,
+            }),
         themePreset: () => cliArgs.themes && THEME_PRESETS.includes(cliArgs.themes)
             ? Promise.resolve(cliArgs.themes)
             : p.select({
@@ -144,11 +162,17 @@ async function main() {
             message: 'Optional components (require extra dependencies)',
             options: [
                 { value: 'chart', label: 'Chart', hint: 'apexcharts' },
+                { value: 'editor', label: 'RichTextEditor', hint: '@aster-ui/icons + @tiptap/react' },
                 { value: 'qrcode', label: 'QRCode', hint: 'qrcode' },
                 { value: 'virtuallist', label: 'VirtualList', hint: '@tanstack/react-virtual' },
             ],
             required: false,
         }),
+        iconLibrary: () => p.select({
+            message: 'Icon library',
+            initialValue: '@aster-ui/icons',
+            options: ICON_LIBRARIES,
+        }),
     }, {
         onCancel: () => {
             p.cancel('Operation cancelled.');
@@ -165,11 +189,12 @@ async function main() {
     // Copy template files
     copyDir(templateDir, projectDir);
     // Generate package.json
-    const packageJson = generatePackageJson(options.projectName, options.language, options.optionalDeps);
+    const prefixed = options.prefixed;
+    const packageJson = generatePackageJson(options.projectName, options.language, options.optionalDeps, options.iconLibrary, prefixed);
     fs.writeFileSync(path.join(projectDir, 'package.json'), JSON.stringify(packageJson, null, 2));
     // Generate index.css with theme config
     const themes = getThemes(options.themePreset, options.customThemes);
-    const cssContent = generateCss(themes);
+    const cssContent = generateCss(themes, prefixed);
     fs.writeFileSync(path.join(projectDir, 'src', 'index.css'), cssContent);
     s.stop('Project created!');
     const pm = options.packageManager;
@@ -208,8 +233,9 @@ function copyDir(src, dest) {
         }
     }
 }
-function generatePackageJson(name, language, optionalDeps = []) {
+function generatePackageJson(name, language, optionalDeps = [], iconLibrary = 'none', prefixed = false) {
     const isTs = language === 'ts';
+    const uiPackage = prefixed ? '@aster-ui/prefixed' : 'asterui';
     const pkg = {
         name,
         private: true,
@@ -221,7 +247,7 @@ function generatePackageJson(name, language, optionalDeps = []) {
             preview: 'vite preview',
         },
         dependencies: {
-            asterui: '^0.12.0',
+            [uiPackage]: '^0.12.0',
             react: '^19.0.0',
             'react-dom': '^19.0.0',
             'react-hook-form': '^7.0.0',
@@ -234,11 +260,31 @@ function generatePackageJson(name, language, optionalDeps = []) {
             vite: '^7.0.0',
         },
     };
-    // Add optional dependencies
+    // Add icon library
     const deps = pkg.dependencies;
+    if (iconLibrary !== 'none') {
+        // Use prefixed icon package if using prefixed UI and selecting @aster-ui/icons
+        let iconPkg = iconLibrary;
+        if (prefixed && iconLibrary === '@aster-ui/icons') {
+            iconPkg = '@aster-ui/icons-prefixed';
+        }
+        const iconLib = ICON_LIBRARIES.find(lib => lib.value === iconLibrary);
+        if (iconLib && iconLib.version) {
+            deps[iconPkg] = iconLib.version;
+        }
+    }
+    // Add optional dependencies
     if (optionalDeps.includes('chart')) {
         deps['apexcharts'] = '^5.0.0';
     }
+    if (optionalDeps.includes('editor')) {
+        deps[prefixed ? '@aster-ui/icons-prefixed' : '@aster-ui/icons'] = '^0.1.0';
+        deps['@tiptap/react'] = '^2.0.0';
+        deps['@tiptap/starter-kit'] = '^2.0.0';
+        deps['@tiptap/extension-link'] = '^2.0.0';
+        deps['@tiptap/extension-placeholder'] = '^2.0.0';
+        deps['@tiptap/extension-underline'] = '^2.0.0';
+    }
     if (optionalDeps.includes('qrcode')) {
         deps['qrcode'] = '^1.5.0';
     }
@@ -270,28 +316,32 @@ function getThemes(preset, customThemes) {
             return ['light', 'dark'];
     }
 }
-function generateCss(themes) {
+function generateCss(themes, prefixed = false) {
+    const uiPackage = prefixed ? '@aster-ui/prefixed' : 'asterui';
+    const prefixConfig = prefixed ? '\n  prefix: "d-";' : '';
     let daisyPlugin;
     if (themes.length === 0) {
         // All themes
-        daisyPlugin = '@plugin "daisyui";';
+        daisyPlugin = prefixed
+            ? '@plugin "daisyui" {\n  prefix: "d-";\n}'
+            : '@plugin "daisyui";';
     }
     else if (themes.length === 2 && ((themes[0] === 'light' && themes[1] === 'dark') ||
         (themes[0] === 'corporate' && themes[1] === 'business'))) {
         // Light/dark pair with prefersDark
-        daisyPlugin = `@plugin "daisyui" {
+        daisyPlugin = `@plugin "daisyui" {${prefixConfig}
   themes: ${themes[0]} --default, ${themes[1]} --prefersDark;
 }`;
     }
     else {
         // Custom selection
-        daisyPlugin = `@plugin "daisyui" {
+        daisyPlugin = `@plugin "daisyui" {${prefixConfig}
   themes: ${themes.join(', ')};
 }`;
     }
     return `@import "tailwindcss";
 ${daisyPlugin}
-@source "../node_modules/asterui";
+@source "../node_modules/${uiPackage}";
 `;
 }
 main().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-asterui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Create a new AsterUI project",
   "type": "module",
   "bin": {