@zvoove/unity-ui 2.23.1 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvoove/unity-ui",
-  "version": "2.23.1",
+  "version": "2.24.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/zvoove-org/unity-ui.git"
@@ -20,8 +20,8 @@
     "./config": "./src/config.ts"
   },
   "bin": {
-    "unity-ui": "./bin/cli.mjs",
-    "unity-ui-skills": "./bin/generate-skills.mjs"
+    "unity-ui": "./dist/bin/cli.mjs",
+    "unity-ui-skills": "./dist/bin/generate-skills.mjs"
   },
   "type": "module",
   "files": [
@@ -31,10 +31,11 @@
     "!docs",
     "!**/*.mdx",
     "!**/*.md",
-    "bin"
+    "dist/bin/templates"
   ],
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && npm run build:cli",
+    "build:cli": "esbuild bin/cli.mjs bin/generate-skills.mjs --bundle --platform=node --format=esm --banner:js='#!/usr/bin/env node' --outdir=dist/bin",
     "test": "vitest",
     "storybook": "cross-env VITE_CJS_IGNORE_WARNING=true storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -50,17 +51,19 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
+    "commander": "^14.0.3",
+    "esbuild": "0.25.0",
     "@commitlint/cli": "^20.4.3",
     "@commitlint/config-conventional": "^20.5.0",
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.0.4",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^9.39.4",
     "@phosphor-icons/react": "^2.1.10",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-links": "^10.3.3",
-    "@storybook/addon-themes": "^10.3.3",
-    "@storybook/react-vite": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/addon-themes": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/postcss": "^4.2.1",
     "@tailwindcss/vite": "^4.2.2",
@@ -78,8 +81,7 @@
     "@vitejs/plugin-react": "^5.1.4",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.7",
-    "chromatic": "^16.0.0",
-    "commander": "^14.0.3",
+    "chromatic": "^16.3.0",
     "commitizen": "^4.3.1",
     "cross-env": "^10.1.0",
     "cz-conventional-changelog": "^3.3.0",
@@ -99,7 +101,7 @@
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
     "rollup-plugin-visualizer": "^7.0.1",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.5",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.1",

package/bin/cli.mjs

@@ -1,49 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Unity UI — Unified CLI
- *
- * Usage:
- *   npx unity-ui init                       Initialize unity-ui.config.mjs
- *   npx unity-ui skills [-o .claude]        Generate Agent Skills
- *   npx unity-ui create <ComponentName>     Scaffold a new component
- *   npx unity-ui rules [-o .]              Generate AI rules (.cursorrules + CLAUDE.md)
- *   npx unity-ui --help                     Show all commands
- */
-import { runCreate } from './commands/create.mjs';
-import { runInit } from './commands/init.mjs';
-import { runRules } from './commands/rules.mjs';
-import { runSkills } from './commands/skills.mjs';
-import { Command } from 'commander';
-
-const program = new Command();
-
-program
-  .name('unity-ui')
-  .description('Unity UI Design System CLI')
-  .version('1.0.0');
-
-program
-  .command('init')
-  .description('Initialize unity-ui.config.mjs with project settings')
-  .action(() => runInit());
-
-program
-  .command('skills')
-  .description('Generate Agent Skills files from llms.txt')
-  .option('-o, --output <dir>', 'Base directory for skills output')
-  .action((opts) => runSkills(opts));
-
-program
-  .command('create')
-  .description('Scaffold a new component')
-  .argument('<name>', 'Component name (PascalCase)')
-  .action((name) => runCreate(name));
-
-program
-  .command('rules')
-  .description('Generate AI rules files (.cursorrules + CLAUDE.md)')
-  .option('-o, --output <dir>', 'Output directory')
-  .action((opts) => runRules(opts));
-
-program.parse();

package/bin/commands/config.mjs

@@ -1,68 +0,0 @@
-/**
- * Unity UI — Config Loader
- *
- * Looks for unity-ui.config.mjs in process.cwd().
- * If found, merges with defaults. If not, returns defaults.
- */
-import fs from 'fs';
-import path from 'path';
-import { pathToFileURL } from 'url';
-
-export const DEFAULTS = {
-  components: {
-    directory: 'src/components',
-    indexFile: 'src/index.ts',
-  },
-  ai: {
-    skills: {
-      output: '.claude',
-    },
-    rules: {
-      output: '.',
-      targets: ['cursorrules', 'claude'],
-    },
-  },
-};
-
-function deepMerge(target, source) {
-  const result = { ...target };
-  for (const key of Object.keys(source)) {
-    if (
-      source[key] &&
-      typeof source[key] === 'object' &&
-      !Array.isArray(source[key]) &&
-      target[key] &&
-      typeof target[key] === 'object' &&
-      !Array.isArray(target[key])
-    ) {
-      result[key] = deepMerge(target[key], source[key]);
-    } else {
-      result[key] = source[key];
-    }
-  }
-  return result;
-}
-
-/**
- * Loads unity-ui.config.mjs from process.cwd() and merges with defaults.
- * Returns defaults if no config file is found.
- */
-export async function loadConfig() {
-  const configPath = path.resolve(process.cwd(), 'unity-ui.config.mjs');
-
-  if (!fs.existsSync(configPath)) {
-    return DEFAULTS;
-  }
-
-  try {
-    const configUrl = pathToFileURL(configPath).href;
-    const mod = await import(configUrl);
-    const userConfig = mod.default || {};
-    return deepMerge(DEFAULTS, userConfig);
-  } catch (err) {
-    console.warn(
-      `\x1b[33m⚠️  Failed to load unity-ui.config.mjs: ${err.message}\x1b[0m`
-    );
-    return DEFAULTS;
-  }
-}

package/bin/commands/create.mjs

@@ -1,163 +0,0 @@
-/**
- * Unity UI — Component Scaffolder (core logic)
- *
- * Creates a new component folder with all required files
- * from templates.
- */
-import { loadConfig } from './config.mjs';
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const lowerFirstLetter = (str) => {
-  if (!str) return '';
-  return str.charAt(0).toLowerCase() + str.slice(1);
-};
-
-const checkComponentName = (componentName) => {
-  const componentNameRegex = /^[A-Z][a-zA-Z]*$/;
-
-  if (!componentNameRegex.test(componentName)) {
-    console.error(
-      '❌ Component name must start with an uppercase letter and contain only letters'
-    );
-    return false;
-  }
-
-  if (componentName.includes(' ')) {
-    console.error('❌ Component name must not contain spaces');
-    return false;
-  }
-
-  return true;
-};
-
-export async function runCreate(componentName) {
-  if (!checkComponentName(componentName)) {
-    process.exit(1);
-  }
-
-  const config = await loadConfig();
-
-  const componentDir = path.join(
-    process.cwd(),
-    config.components.directory,
-    componentName
-  );
-
-  const templatesDir = path.resolve(__dirname, '..', 'templates');
-
-  const templateMap = {
-    [`{name}.tsx`]: 'component.tsx',
-    [`{name}.styled.ts`]: 'styled.ts',
-    [`{name}.stories.tsx`]: 'stories.tsx',
-    [`{name}.test.tsx`]: 'test.tsx',
-    [`{name}.types.ts`]: 'types.ts',
-    [`{name}.mdx`]: 'doc.mdx',
-    [`index.ts`]: 'index.ts',
-  };
-
-  // Load template files
-  const loadTemplate = (templateFile, name) => {
-    const filePath = path.join(templatesDir, templateFile);
-
-    if (!fs.existsSync(filePath)) {
-      console.error(`❌ Template file not found: \x1b[33m${filePath}\x1b[0m`);
-      return;
-    }
-
-    const content = fs.readFileSync(filePath, 'utf8');
-
-    return content
-      .replace(/__COMPONENT_NAME__/g, name)
-      .replace(/__STYLES__FUNCTION__/g, lowerFirstLetter(name));
-  };
-
-  // Create component folder
-  if (!fs.existsSync(componentDir)) {
-    fs.mkdirSync(componentDir);
-    console.log(`✅ Created folder: \x1b[34m${componentName}\x1b[0m`);
-  } else {
-    console.log(`⚠️  Folder \x1b[33m${componentName}\x1b[0m already exists`);
-  }
-
-  // Create files
-  Object.entries(templateMap).forEach(([fileNamePattern, templateFile]) => {
-    const fileName = fileNamePattern.replace('{name}', componentName);
-    const fullPath = path.join(componentDir, fileName);
-
-    if (!fs.existsSync(fullPath)) {
-      const content = loadTemplate(templateFile, componentName);
-      fs.writeFileSync(fullPath, content, 'utf8');
-      console.log(`✅ Created file: \x1b[32m${fileName}\x1b[0m`);
-    } else {
-      console.log(`⚠️  File \x1b[33m${fileName}\x1b[0m already exists`);
-    }
-  });
-
-  const indexFile = path.join(process.cwd(), config.components.indexFile);
-  const exportLine = `export * from './components/${componentName}';`;
-
-  // Add export to index.ts
-  if (fs.existsSync(indexFile)) {
-    const content = fs.readFileSync(indexFile, 'utf8');
-    const lines = content.split('\n').filter((line) => line.trim());
-
-    // Separate theme import from component exports
-    const themeImport = lines.find((line) =>
-      line.includes("import './theme.css'")
-    );
-    const componentExports = lines.filter(
-      (line) => line !== themeImport && line.startsWith('export * from')
-    );
-
-    if (!componentExports.includes(exportLine)) {
-      // Add new export and sort alphabetically
-      componentExports.push(exportLine);
-      const sortedExports = componentExports.sort((a, b) => {
-        const getComponentName = (line) => {
-          const match = line.match(/from '\.\/components\/([^']+)'/);
-          return match ? match[1] : '';
-        };
-        return getComponentName(a).localeCompare(getComponentName(b));
-      });
-
-      const finalContent =
-        [themeImport, '', ...sortedExports].filter(Boolean).join('\n') + '\n';
-
-      const finalContentWithEmptyLine = finalContent.replace(
-        /(import '\.\/theme\.css';\n)(\n*)/,
-        '$1\n'
-      );
-
-      fs.writeFileSync(indexFile, finalContentWithEmptyLine, 'utf8');
-      console.log(
-        `✅ Added export to \x1b[34m./src/index.ts\x1b[0m (sorted alphabetically)`
-      );
-    } else {
-      console.log(`⚠️  Export already exists in \x1b[33m./src/index.ts\x1b[0m`);
-    }
-  } else {
-    console.log(`❌ \x1b[33m./src/index.ts\x1b[0m does not exist.`);
-  }
-
-  console.log(
-    `🎉 Component \x1b[32m<${componentName} />\x1b[0m structure created successfully!`
-  );
-
-  // Format the newly created component folder
-  try {
-    execSync(
-      `npx prettier --write "${componentDir}" --ignore-glob "**/*.md" --ignore-glob "**/*.mdx"`,
-      { stdio: 'inherit' }
-    );
-
-    console.log(`✅ Prettier formatted: \x1b[32m<${componentName} />\x1b[0m`);
-  } catch (err) {
-    console.error(`❌ Prettier formatting failed:`, err);
-  }
-}

package/bin/commands/init.mjs

@@ -1,158 +0,0 @@
-/**
- * Unity UI — Init Command
- *
- * Interactive questionnaire that generates unity-ui.config.mjs.
- */
-import { DEFAULTS } from './config.mjs';
-import fs from 'fs';
-import path from 'path';
-import readline from 'readline';
-
-function createRL() {
-  return readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-}
-
-function ask(rl, question, defaultValue) {
-  return new Promise((resolve) => {
-    rl.question(
-      `  \x1b[36m?\x1b[0m ${question} \x1b[90m(${defaultValue})\x1b[0m `,
-      (answer) => {
-        resolve(answer.trim() || defaultValue);
-      }
-    );
-  });
-}
-
-function askChoice(rl, question, options, defaultValue) {
-  const optionsList = options.map((o) => o.label).join(' / ');
-  return new Promise((resolve) => {
-    rl.question(
-      `  \x1b[36m?\x1b[0m ${question} \x1b[90m(${defaultValue})\x1b[0m [${optionsList}] `,
-      (answer) => {
-        const trimmed = answer.trim().toLowerCase();
-        const match = options.find(
-          (o) => o.label.toLowerCase() === trimmed || o.alias === trimmed
-        );
-        if (match) {
-          resolve(match.value);
-        } else {
-          // Default
-          const defaultOption = options.find(
-            (o) =>
-              o.label.toLowerCase() === defaultValue.toLowerCase() ||
-              o.alias === defaultValue.toLowerCase()
-          );
-          resolve(defaultOption ? defaultOption.value : options[0].value);
-        }
-      }
-    );
-  });
-}
-
-function generateConfigContent(config) {
-  const targets = config.ai.rules.targets;
-  const targetsStr = targets.map((t) => `'${t}'`).join(', ');
-
-  return `// unity-ui.config.mjs — generated by \`npx unity-ui init\`
-import { defineConfig } from '@zvoove/unity-ui/config';
-
-export default defineConfig({
-  components: {
-    directory: '${config.components.directory}',
-    indexFile: '${config.components.indexFile}',
-  },
-  ai: {
-    skills: {
-      output: '${config.ai.skills.output}',
-    },
-    rules: {
-      output: '${config.ai.rules.output}',
-      targets: [${targetsStr}],
-    },
-  },
-});
-`;
-}
-
-export async function runInit() {
-  const configPath = path.resolve(process.cwd(), 'unity-ui.config.mjs');
-
-  if (fs.existsSync(configPath)) {
-    console.log(
-      `\x1b[33m⚠️  unity-ui.config.mjs already exists. Delete it first to re-initialize.\x1b[0m`
-    );
-    return;
-  }
-
-  console.log(`\n  \x1b[1m🔧 Unity UI — Project Setup\x1b[0m\n`);
-
-  const rl = createRL();
-
-  const componentsDir = await ask(
-    rl,
-    'Where do your components live?',
-    DEFAULTS.components.directory
-  );
-
-  const indexFile = await ask(
-    rl,
-    'Where is your main index/barrel file?',
-    DEFAULTS.components.indexFile
-  );
-
-  const rulesTargets = await askChoice(
-    rl,
-    'Generate AI rules for which tools?',
-    [
-      { label: 'Both', alias: 'b', value: ['cursorrules', 'claude'] },
-      { label: 'Claude', alias: 'c', value: ['claude'] },
-      { label: 'Cursor', alias: 'u', value: ['cursorrules'] },
-      { label: 'None', alias: 'n', value: [] },
-    ],
-    'Both'
-  );
-
-  const skillsOutput = await ask(
-    rl,
-    'Where should Agent Skills be generated?',
-    DEFAULTS.ai.skills.output
-  );
-
-  const rulesOutput = await ask(
-    rl,
-    'Where should rules files be generated?',
-    DEFAULTS.ai.rules.output
-  );
-
-  rl.close();
-
-  const config = {
-    components: {
-      directory: componentsDir,
-      indexFile: indexFile,
-    },
-    ai: {
-      skills: { output: skillsOutput },
-      rules: { output: rulesOutput, targets: rulesTargets },
-    },
-  };
-
-  const content = generateConfigContent(config);
-  fs.writeFileSync(configPath, content, 'utf8');
-
-  console.log(`\n  \x1b[32m✅ Created unity-ui.config.mjs\x1b[0m\n`);
-  console.log(`  Components:  ${config.components.directory}/`);
-  console.log(`  Index file:  ${config.components.indexFile}`);
-  console.log(`  Skills dir:  ${config.ai.skills.output}/skills/`);
-  if (config.ai.rules.targets.length > 0) {
-    console.log(
-      `  Rules:       ${config.ai.rules.targets.join(', ')} → ${config.ai.rules.output}/`
-    );
-  } else {
-    console.log(`  Rules:       disabled`);
-  }
-  console.log('');
-}

package/bin/commands/rules.mjs

@@ -1,100 +0,0 @@
-/**
- * Unity UI — AI Rules Generator
- *
- * Generates .cursorrules and CLAUDE.md files for consuming projects.
- * These files help AI coding assistants understand and correctly use
- * Unity UI components.
- */
-import { loadConfig } from './config.mjs';
-import { findLlmsTxt } from './skills.mjs';
-import fs from 'fs';
-import path from 'path';
-
-function generateRulesContent(llmsContent) {
-  return `# Unity UI — AI Rules
-
-> Auto-generated by \`npx unity-ui rules\`. Do not edit manually.
-> Source: @zvoove/unity-ui llms.txt
-
-## General Rules
-
-- Always import components from \`@zvoove/unity-ui\`
-- Never recreate components that exist in this library
-- Use responsive props where applicable (single value or breakpoint object)
-- Use design tokens from theme.css — never hardcode colors, spacing, or shadows
-- Use \`tv()\` from tailwind-variants for component styling — never inline conditional classes
-- Dark mode uses \`data-theme="dark"\` attribute, not \`className="dark"\`
-- Default/placeholder texts should be in German
-- Font (Source Sans 3) is bundled via \`@font-face\` in theme.css — no extra setup needed
-
-## Setup
-
-\`\`\`bash
-npm install @zvoove/unity-ui
-\`\`\`
-
-\`\`\`css
-@import '@zvoove/unity-ui/theme.css';
-@import '@zvoove/unity-ui/unity-ui.css';
-\`\`\`
-
-## Responsive Props
-
-Breakpoints: minimum (0px), mobile (320px), tablet (768px), laptop (1024px), desktop (1440px).
-
-\`\`\`tsx
-<Button size="md" />
-<Button size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }} />
-\`\`\`
-
-## Component Reference
-
-${llmsContent}
-`;
-}
-
-export async function runRules({ output: outputDir } = {}) {
-  const config = await loadConfig();
-  const resolvedDir = path.resolve(
-    process.cwd(),
-    outputDir || config.ai.rules.output
-  );
-  const targets = config.ai.rules.targets;
-
-  const llmsPath = findLlmsTxt();
-  if (!llmsPath) {
-    console.error(
-      'Could not find llms.txt. Make sure @zvoove/unity-ui is installed and built.'
-    );
-    process.exit(1);
-  }
-
-  const llmsContent = fs.readFileSync(llmsPath, 'utf8');
-  const rulesContent = generateRulesContent(llmsContent);
-
-  fs.mkdirSync(resolvedDir, { recursive: true });
-
-  if (targets.includes('cursorrules')) {
-    const cursorRulesPath = path.join(resolvedDir, '.cursorrules');
-    fs.writeFileSync(cursorRulesPath, rulesContent, 'utf8');
-    console.log(
-      `✅ Generated ${path.relative(process.cwd(), cursorRulesPath)}`
-    );
-  }
-
-  if (targets.includes('claude')) {
-    const claudeMdPath = path.join(resolvedDir, 'CLAUDE.md');
-    fs.writeFileSync(claudeMdPath, rulesContent, 'utf8');
-    console.log(`✅ Generated ${path.relative(process.cwd(), claudeMdPath)}`);
-  }
-
-  if (targets.length > 0) {
-    console.log(
-      `\n  Your AI assistant now knows how to use Unity UI components.\n`
-    );
-  } else {
-    console.log(
-      `\n  No rule targets configured. Set targets in unity-ui.config.mjs.\n`
-    );
-  }
-}

package/bin/generate-skills.mjs

@@ -1,32 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @deprecated Use `npx unity-ui skills` instead.
- *
- * This shim exists for backward compatibility only.
- */
-import { runSkills } from './commands/skills.mjs';
-
-console.warn(
-  '\x1b[33m⚠️  "unity-ui-skills" is deprecated. Use "npx unity-ui skills" instead.\x1b[0m\n'
-);
-
-// Parse legacy args
-const args = process.argv.slice(2);
-let output = '.claude';
-for (let i = 0; i < args.length; i++) {
-  if ((args[i] === '--output' || args[i] === '-o') && args[i + 1]) {
-    output = args[i + 1];
-    i++;
-  }
-  if (args[i] === '--help' || args[i] === '-h') {
-    console.log(`Usage: npx unity-ui skills [options]
-
-This command has moved. Please use:
-  npx unity-ui skills [-o <dir>]
-`);
-    process.exit(0);
-  }
-}
-
-runSkills({ output });