create-asterui 0.1.4 → 0.1.6

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

@@ -36,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];
         }
@@ -61,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
@@ -118,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({
@@ -152,6 +162,7 @@ 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' },
             ],
@@ -178,11 +189,12 @@ async function main() {
     // Copy template files
     copyDir(templateDir, projectDir);
     // Generate package.json
-    const packageJson = generatePackageJson(options.projectName, options.language, options.optionalDeps, options.iconLibrary);
+    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;
@@ -221,8 +233,9 @@ function copyDir(src, dest) {
         }
     }
 }
-function generatePackageJson(name, language, optionalDeps = [], iconLibrary = 'none') {
+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,
@@ -234,7 +247,7 @@ function generatePackageJson(name, language, optionalDeps = [], iconLibrary = 'n
             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',
@@ -250,15 +263,28 @@ function generatePackageJson(name, language, optionalDeps = [], iconLibrary = 'n
     // 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[iconLibrary] = 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';
     }
@@ -290,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.4",
+  "version": "0.1.6",
   "description": "Create a new AsterUI project",
   "type": "module",
   "bin": {

package/templates/js/src/App.jsx

@@ -1,23 +1,40 @@
-import { Navbar, ThemeController } from 'asterui'
+import { Button, useTheme, ThemeController, Hero, Space } from 'asterui'
 
-function App() {
+function Logo() {
+  const { colors } = useTheme()
   return (
-    <>
-      <Navbar
-        className="bg-base-100 shadow-lg"
-        start={<a className="text-xl font-bold">AsterUI App</a>}
-        end={<ThemeController.Swap className="scale-75" />}
-      />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" className="h-12 w-auto">
+      <text
+        x="100"
+        y="30"
+        textAnchor="middle"
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontSize="28"
+        fontWeight="700"
+      >
+        <tspan fill={colors.primary}>Aster</tspan>
+        <tspan fill={colors.foreground}>UI</tspan>
+      </text>
+    </svg>
+  )
+}
 
-      <div className="p-6">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl font-bold mb-4">Welcome to AsterUI</h1>
-          <p className="text-base-content/70">
-            Start building your app by editing <code className="bg-base-300 px-1 rounded">src/App.jsx</code>
-          </p>
-        </div>
+function App() {
+  return (
+    <Hero className="min-h-screen bg-base-200 relative">
+      <div className="absolute top-4 right-4">
+        <ThemeController.Swap />
       </div>
-    </>
+      <Space direction="vertical" size="lg" align="center">
+        <Logo />
+        <p className="text-base-content/70">
+          100+ React components built with DaisyUI and Tailwind CSS
+        </p>
+        <Button color="primary" href="https://asterui.com">
+          View Documentation
+        </Button>
+      </Space>
+    </Hero>
   )
 }
 

package/templates/js/src/main.jsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ThemeProvider } from 'asterui'
 import './index.css'
 import App from './App'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <ThemeProvider defaultTheme="system">
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )

package/templates/ts/src/App.tsx

@@ -1,23 +1,40 @@
-import { Navbar, ThemeController } from 'asterui'
+import { Button, useTheme, ThemeController, Hero, Space } from 'asterui'
 
-function App() {
+function Logo() {
+  const { colors } = useTheme()
   return (
-    <>
-      <Navbar
-        className="bg-base-100 shadow-lg"
-        start={<a className="text-xl font-bold">AsterUI App</a>}
-        end={<ThemeController.Swap className="scale-75" />}
-      />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" className="h-12 w-auto">
+      <text
+        x="100"
+        y="30"
+        textAnchor="middle"
+        fontFamily="system-ui, -apple-system, sans-serif"
+        fontSize="28"
+        fontWeight="700"
+      >
+        <tspan fill={colors.primary}>Aster</tspan>
+        <tspan fill={colors.foreground}>UI</tspan>
+      </text>
+    </svg>
+  )
+}
 
-      <div className="p-6">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl font-bold mb-4">Welcome to AsterUI</h1>
-          <p className="text-base-content/70">
-            Start building your app by editing <code className="bg-base-300 px-1 rounded">src/App.tsx</code>
-          </p>
-        </div>
+function App() {
+  return (
+    <Hero className="min-h-screen bg-base-200 relative">
+      <div className="absolute top-4 right-4">
+        <ThemeController.Swap />
       </div>
-    </>
+      <Space direction="vertical" size="lg" align="center">
+        <Logo />
+        <p className="text-base-content/70">
+          100+ React components built with DaisyUI and Tailwind CSS
+        </p>
+        <Button color="primary" href="https://asterui.com">
+          View Documentation
+        </Button>
+      </Space>
+    </Hero>
   )
 }
 

package/templates/ts/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ThemeProvider } from 'asterui'
 import './index.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider defaultTheme="system">
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )