create-asterui 0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2025
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,211 @@
+#!/usr/bin/env node
+import * as p from '@clack/prompts';
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import pc from 'picocolors';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DAISYUI_THEMES = [
+    'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
+    'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
+    'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
+    'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
+    'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'
+];
+function detectPackageManager() {
+    const userAgent = process.env.npm_config_user_agent || '';
+    if (userAgent.includes('pnpm'))
+        return 'pnpm';
+    if (userAgent.includes('yarn'))
+        return 'yarn';
+    return 'npm';
+}
+function getInstallCommand(pm) {
+    return pm === 'yarn' ? 'yarn' : `${pm} install`;
+}
+function getRunCommand(pm) {
+    return pm === 'npm' ? 'npm run' : pm;
+}
+async function main() {
+    console.log();
+    p.intro(pc.bgCyan(pc.black(' create-asterui ')));
+    const detectedPm = detectPackageManager();
+    const options = await p.group({
+        projectName: () => p.text({
+            message: 'Project name',
+            placeholder: 'my-asterui-app',
+            defaultValue: 'my-asterui-app',
+            validate: (value) => {
+                if (!value)
+                    return 'Project name is required';
+                if (!/^[a-z0-9-]+$/.test(value))
+                    return 'Project name must be lowercase with hyphens only';
+                if (fs.existsSync(value))
+                    return `Directory "${value}" already exists`;
+            },
+        }),
+        language: () => p.select({
+            message: 'Language',
+            options: [
+                { value: 'ts', label: 'TypeScript', hint: 'recommended' },
+                { value: 'js', label: 'JavaScript' },
+            ],
+        }),
+        themePreset: () => p.select({
+            message: 'Themes',
+            options: [
+                { value: 'light-dark', label: 'Light/Dark', hint: 'recommended' },
+                { value: 'business', label: 'Business/Corporate' },
+                { value: 'all', label: 'All themes' },
+                { value: 'custom', label: 'Choose specific...' },
+            ],
+        }),
+        customThemes: ({ results }) => results.themePreset === 'custom'
+            ? p.multiselect({
+                message: 'Select themes',
+                options: DAISYUI_THEMES.map((t) => ({ value: t, label: t })),
+                initialValues: ['light', 'dark'],
+                required: true,
+            })
+            : Promise.resolve([]),
+        packageManager: () => p.select({
+            message: 'Package manager',
+            options: [
+                { value: detectedPm, label: detectedPm, hint: 'detected' },
+                ...['npm', 'pnpm', 'yarn']
+                    .filter((pm) => pm !== detectedPm)
+                    .map((pm) => ({ value: pm, label: pm })),
+            ],
+        }),
+    }, {
+        onCancel: () => {
+            p.cancel('Operation cancelled.');
+            process.exit(0);
+        },
+    });
+    const s = p.spinner();
+    s.start('Creating project...');
+    const projectDir = path.resolve(process.cwd(), options.projectName);
+    const templateDir = path.join(__dirname, '..', 'templates', options.language);
+    // Create project directory
+    fs.mkdirSync(projectDir, { recursive: true });
+    fs.mkdirSync(path.join(projectDir, 'src'), { recursive: true });
+    // Copy template files
+    copyDir(templateDir, projectDir);
+    // Generate package.json
+    const packageJson = generatePackageJson(options.projectName, options.language);
+    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);
+    fs.writeFileSync(path.join(projectDir, 'src', 'index.css'), cssContent);
+    s.stop('Project created!');
+    const pm = options.packageManager;
+    // Run install
+    s.start('Installing dependencies...');
+    await runInstall(pm, projectDir);
+    s.stop('Dependencies installed!');
+    p.note(`cd ${options.projectName}\n${getRunCommand(pm)} dev`, 'Next steps');
+    p.outro(pc.green('Happy coding!'));
+}
+function runInstall(pm, cwd) {
+    return new Promise((resolve, reject) => {
+        const cmd = pm === 'npm' ? 'npm' : pm;
+        const args = pm === 'yarn' ? [] : ['install'];
+        const child = spawn(cmd, args, { cwd, stdio: 'ignore' });
+        child.on('close', (code) => {
+            if (code === 0)
+                resolve();
+            else
+                reject(new Error(`Install failed with code ${code}`));
+        });
+        child.on('error', reject);
+    });
+}
+function copyDir(src, dest) {
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            fs.mkdirSync(destPath, { recursive: true });
+            copyDir(srcPath, destPath);
+        }
+        else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+function generatePackageJson(name, language) {
+    const isTs = language === 'ts';
+    const pkg = {
+        name,
+        private: true,
+        version: '0.0.0',
+        type: 'module',
+        scripts: {
+            dev: 'vite',
+            build: isTs ? 'tsc -b && vite build' : 'vite build',
+            preview: 'vite preview',
+        },
+        dependencies: {
+            asterui: '^0.12.0',
+            react: '^19.0.0',
+            'react-dom': '^19.0.0',
+            'react-hook-form': '^7.0.0',
+        },
+        devDependencies: {
+            '@tailwindcss/vite': '^4.1.0',
+            '@vitejs/plugin-react': '^5.1.0',
+            daisyui: '^5.0.0',
+            tailwindcss: '^4.1.0',
+            vite: '^7.0.0',
+        },
+    };
+    if (isTs) {
+        pkg.devDependencies['typescript'] = '^5.6.0';
+        pkg.devDependencies['@types/react'] = '^19.0.0';
+        pkg.devDependencies['@types/react-dom'] = '^19.0.0';
+    }
+    return pkg;
+}
+function getThemes(preset, customThemes) {
+    switch (preset) {
+        case 'light-dark':
+            return ['light', 'dark'];
+        case 'business':
+            return ['corporate', 'business'];
+        case 'all':
+            return [];
+        case 'custom':
+            return customThemes;
+        default:
+            return ['light', 'dark'];
+    }
+}
+function generateCss(themes) {
+    let daisyPlugin;
+    if (themes.length === 0) {
+        // All themes
+        daisyPlugin = '@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" {
+  themes: ${themes[0]} --default, ${themes[1]} --prefersDark;
+}`;
+    }
+    else {
+        // Custom selection
+        daisyPlugin = `@plugin "daisyui" {
+  themes: ${themes.join(', ')};
+}`;
+    }
+    return `@import "tailwindcss";
+${daisyPlugin}
+@source "../node_modules/asterui";
+`;
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "create-asterui",
+  "version": "0.1.0",
+  "description": "Create a new AsterUI project",
+  "type": "module",
+  "bin": {
+    "create-asterui": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "dependencies": {
+    "@clack/prompts": "^0.10.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.6.3"
+  },
+  "keywords": [
+    "asterui",
+    "react",
+    "daisyui",
+    "tailwindcss",
+    "create"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/edadma/asterui"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}

package/templates/js/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AsterUI App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/js/src/App.jsx

@@ -0,0 +1,24 @@
+import { Navbar, ThemeController } from 'asterui'
+
+function App() {
+  return (
+    <>
+      <Navbar
+        className="bg-base-100 shadow-lg"
+        start={<a className="text-xl font-bold">AsterUI App</a>}
+        end={<ThemeController.Swap />}
+      />
+
+      <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>
+      </div>
+    </>
+  )
+}
+
+export default App

package/templates/js/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/js/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})

package/templates/ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AsterUI App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/ts/src/App.tsx

@@ -0,0 +1,24 @@
+import { Navbar, ThemeController } from 'asterui'
+
+function App() {
+  return (
+    <>
+      <Navbar
+        className="bg-base-100 shadow-lg"
+        start={<a className="text-xl font-bold">AsterUI App</a>}
+        end={<ThemeController.Swap />}
+      />
+
+      <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>
+      </div>
+    </>
+  )
+}
+
+export default App

package/templates/ts/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/ts/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/ts/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})