npm - @zvoove/unity-ui - Versions diffs - 2.22.1 → 2.23.0 - Mend

@zvoove/unity-ui 2.22.1 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +8 -76
package/bin/cli.mjs +49 -0
package/bin/commands/config.mjs +68 -0
package/bin/commands/create.mjs +163 -0
package/bin/commands/init.mjs +158 -0
package/bin/commands/rules.mjs +100 -0
package/bin/commands/skills.mjs +1883 -0
package/bin/generate-skills.mjs +19 -1903
package/bin/templates/component.tsx +15 -0
package/bin/templates/doc.mdx +36 -0
package/bin/templates/index.ts +2 -0
package/bin/templates/stories.tsx +15 -0
package/bin/templates/styled.ts +14 -0
package/bin/templates/test.tsx +30 -0
package/bin/templates/types.ts +13 -0
package/dist/llms.txt +150 -43
package/dist/theme.css +44 -0
package/dist/unity-ui.cjs.js +1 -1
package/dist/unity-ui.css +1 -1
package/dist/unity-ui.d.ts +575 -24
package/dist/unity-ui.es.js +762 -389
package/package.json +9 -6

package/README.md CHANGED Viewed

@@ -29,29 +29,9 @@ The `unity-ui` is available as a public package on [npmjs](https://www.npmjs.com
 npm i @zvoove/unity-ui
 ```
-### GitHub Packages registry (legacy)
+> **Note:** The GitHub Packages registry (`@zvoove/unity-ui`) is deprecated and should no longer be used. Use the public npm registry (`@zvoove/unity-ui`) instead.
-> **Note:** We are transitioning to the public npm registry (`@zvoove/unity-ui`). The GitHub Packages registry (`@zvoove-org/unity-ui`) will be discontinued in the future. We recommend migrating to the npm registry as soon as possible.
-The `unity-ui` is also available on [our private package registry on GitHub](https://github.com/orgs/zvoove-org/packages?repo_name=unity-ui). To install from GitHub Packages, you'll need to [setup a personal access token](https://github.com/settings/tokens) with the `read:packages` permission.
-Configure the token for `npm`: `npm config set //npm.pkg.github.com/:_authToken $TOKEN`.
-Then create a `.npmrc` file in the root of your project:
-```shell
-@zvoove-org:registry=https://npm.pkg.github.com/zvoove-org
-```
-Then install:
-```shell
-npm i @zvoove-org/unity-ui
-```
----
-`@zvoove/unity-ui` (or `@zvoove-org/unity-ui`) has required peer dependencies for `react` and `react-dom`. If your project doesn't have them already, make sure you have installed using at least **v18**
+`@zvoove/unity-ui` has required peer dependencies for `react` and `react-dom`. If your project doesn't have them already, make sure you have installed using at least **v18**
 ## Styles
@@ -62,8 +42,8 @@ In case you want to install `tailwindcss` in your project and have access to the
 ```css
 /* index.css or main.css etc... */
-@import '@zvoove-org/unity-ui/theme.css';
-@import '@zvoove-org/unity-ui/unity-ui.css';
+@import '@zvoove/unity-ui/theme.css';
+@import '@zvoove/unity-ui/unity-ui.css';
 ```
 The `theme.css` file contains all the design tokens used in the project, so you can use them in your styles.
@@ -71,7 +51,7 @@ The `theme.css` file contains all the design tokens used in the project, so you
 After that you can use the components in your project and you can also use the design tokens in your styles. (Check our [Design Tokens](https://main--67c03f013fea08bb2f926e5f.chromatic.com/?path=/docs/design-tokens--docs) section for more information)
 ```jsx
-import { Button } from '@zvoove-org/unity-ui';
+import { Button } from '@zvoove/unity-ui';
 const App = () => {
   return (
@@ -89,7 +69,7 @@ export default App;
 The `unity-ui` has a dark mode that can be enabled by adding the `dark` data attribute to the root element of your application.
 ```jsx
-import { Button } from '@zvoove-org/unity-ui';
+import { Button } from '@zvoove/unity-ui';
 const App = () => {
   return (
@@ -113,62 +93,14 @@ export default Layout;
 you can also force a specific component to be in dark mode by adding the `dark` data attribute to the component.
 ```jsx
-import { Button } from '@zvoove-org/unity-ui';
+import { Button } from '@zvoove/unity-ui';
 <Button data-theme="dark">Click me</Button>;
 ```
 ## Fonts
-Our project uses the `Source Sans` font family available at [google fonts](https://fonts.google.com/specimen/Source+Sans+3), you can include it in your project by adding the following lines to your `<head>` tag:
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
-  rel="stylesheet"
-/>
-```
-## Fonts in NextJS
-For `NextJS` you can load the fonts using `next/font` like this:
-```jsx
-import './globals.css';
-import { Source_Sans_3 } from 'next/font/google';
-const sourceSans3 = Source_Sans_3({
-  subsets: ['latin'],
-  variable: '--font-source-sans-3',
-});
-export default async function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="de-DE" className={sourceSans3.variable}>
-      <body data-theme="light">{children}</body>
-    </html>
-  );
-}
-```
-And then you update your `globals.css` with:
-```css
-@import '@zvoove-org/unity-ui/theme.css';
-@import '@zvoove-org/unity-ui/unity-ui.css';
-@layer base {
-  html {
-    font-family: var(--font-source-sans-3);
-  }
-}
-```
+Our project uses the `Source Sans 3` font family. The font is bundled with the library via `@font-face` declarations in `theme.css`, loaded from our CDN. No additional setup is required — importing the theme CSS is enough.
 ## Installing (Development)

package/bin/cli.mjs ADDED Viewed

@@ -0,0 +1,49 @@
+#!/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 ADDED Viewed

@@ -0,0 +1,68 @@
+/**
+ * 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 ADDED Viewed

@@ -0,0 +1,163 @@
+/**
+ * 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 ADDED Viewed

@@ -0,0 +1,158 @@
+/**
+ * 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 ADDED Viewed

@@ -0,0 +1,100 @@
+/**
+ * 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`
+    );
+  }
+}