@proto.ui/cli 0.0.1 → 0.0.2

package/README.md

@@ -4,6 +4,13 @@ Local CLI package for generating Proto UI Tailwind assets.
 
 ## Commands
 
+- `proto-ui shadcn [--styles-dir <dir>]`
 - `proto-ui tokens --input <dir> --out <file>`
 - `proto-ui tailwindcss --out <file> [--theme-import <path>] [--tokens-import <path>]`
 - `proto-ui theme shadcn --out <file>`
+
+`proto-ui shadcn` writes these preset files directly:
+
+- `prototype-tokens.generated.css`
+- `tailwindcss.css`
+- `shadcn-theme.css`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proto.ui/cli",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "type": "module",
   "bin": {

package/src/cli.mjs

@@ -7,6 +7,203 @@ const DEFAULT_THEME_NAME = 'shadcn';
 const DEFAULT_THEME_IMPORT = './shadcn-theme.css';
 const DEFAULT_TOKENS_IMPORT = './prototype-tokens.generated.css';
 
+const SHADCN_TOKENS_CSS = `/* This file is auto-generated by apps/www/scripts/generate-prototype-tailwind-sources.mjs. */
+/* Do not edit by hand. */
+
+@source inline("absolute");
+@source inline("active:bg-background");
+@source inline("active:bg-muted");
+@source inline("active:bg-muted/80");
+@source inline("active:scale-[0.98]");
+@source inline("active:scale-[0.99]");
+@source inline("active:shadow-xs");
+@source inline("active:text-foreground");
+@source inline("active:translate-y-px");
+@source inline("aria-checked:bg-accent");
+@source inline("aria-checked:bg-muted");
+@source inline("aria-checked:bg-primary");
+@source inline("aria-checked:pl-[22px]");
+@source inline("aria-checked:pr-0.5");
+@source inline("aria-checked:text-accent-foreground");
+@source inline("aria-checked:text-muted-foreground");
+@source inline("aria-checked:text-primary-foreground");
+@source inline("aria-current:hidden");
+@source inline("aria-expanded:bg-muted");
+@source inline("aria-expanded:bg-secondary");
+@source inline("aria-expanded:text-foreground");
+@source inline("aria-expanded:text-secondary-foreground");
+@source inline("aria-invalid:border-destructive");
+@source inline("aria-invalid:ring-3");
+@source inline("aria-invalid:ring-destructive/20");
+@source inline("aria-selected:bg-background");
+@source inline("aria-selected:shadow-xs");
+@source inline("aria-selected:text-foreground");
+@source inline("backdrop-blur-xs");
+@source inline("bg-accent");
+@source inline("bg-background");
+@source inline("bg-background/70");
+@source inline("bg-clip-padding");
+@source inline("bg-destructive/10");
+@source inline("bg-destructive/20");
+@source inline("bg-destructive/30");
+@source inline("bg-input");
+@source inline("bg-input/30");
+@source inline("bg-input/50");
+@source inline("bg-input/80");
+@source inline("bg-muted");
+@source inline("bg-muted/60");
+@source inline("bg-muted/80");
+@source inline("bg-primary");
+@source inline("bg-primary/80");
+@source inline("bg-primary/90");
+@source inline("bg-secondary");
+@source inline("bg-secondary/80");
+@source inline("bg-transparent");
+@source inline("block");
+@source inline("border");
+@source inline("border-border");
+@source inline("border-border/50");
+@source inline("border-border/60");
+@source inline("border-destructive");
+@source inline("border-destructive/40");
+@source inline("border-destructive/50");
+@source inline("border-input");
+@source inline("border-ring");
+@source inline("border-transparent");
+@source inline("cursor-default");
+@source inline("dark:aria-checked:bg-input/50");
+@source inline("dark:aria-checked:bg-primary");
+@source inline("dark:aria-invalid:border-destructive/50");
+@source inline("dark:aria-invalid:ring-destructive/40");
+@source inline("dark:bg-destructive/20");
+@source inline("dark:bg-input/30");
+@source inline("dark:border-input");
+@source inline("dark:data-[focus-visible]:ring-destructive/40");
+@source inline("dark:hover:bg-destructive/30");
+@source inline("dark:hover:bg-input/50");
+@source inline("data-[disabled]:opacity-50");
+@source inline("data-[disabled]:pointer-events-none");
+@source inline("data-[focus-visible]:bg-background");
+@source inline("data-[focus-visible]:border-destructive/40");
+@source inline("data-[focus-visible]:border-ring");
+@source inline("data-[focus-visible]:ring-2");
+@source inline("data-[focus-visible]:ring-3");
+@source inline("data-[focus-visible]:ring-destructive/20");
+@source inline("data-[focus-visible]:ring-inset");
+@source inline("data-[focus-visible]:ring-offset-2");
+@source inline("data-[focus-visible]:ring-offset-background");
+@source inline("data-[focus-visible]:ring-ring/40");
+@source inline("data-[focus-visible]:ring-ring/50");
+@source inline("data-[focus-visible]:shadow-xs");
+@source inline("data-[focus-visible]:text-foreground");
+@source inline("duration-200");
+@source inline("ease-in-out");
+@source inline("flex");
+@source inline("flex-col");
+@source inline("font-medium");
+@source inline("gap-1");
+@source inline("gap-1.5");
+@source inline("gap-2");
+@source inline("gap-3");
+@source inline("group/button");
+@source inline("h-10");
+@source inline("h-6");
+@source inline("h-7");
+@source inline("h-8");
+@source inline("h-9");
+@source inline("hidden");
+@source inline("hover:aria-checked:bg-input");
+@source inline("hover:aria-checked:bg-muted/60");
+@source inline("hover:aria-checked:bg-primary/90");
+@source inline("hover:aria-checked:text-foreground");
+@source inline("hover:aria-selected:bg-background/70");
+@source inline("hover:aria-selected:shadow-xs");
+@source inline("hover:aria-selected:text-foreground");
+@source inline("hover:bg-destructive/20");
+@source inline("hover:bg-muted");
+@source inline("hover:bg-primary/80");
+@source inline("hover:bg-secondary/80");
+@source inline("hover:data-[focus-visible]:data-[focused]:bg-muted");
+@source inline("hover:data-[focus-visible]:data-[focused]:text-foreground");
+@source inline("hover:text-foreground");
+@source inline("hover:underline");
+@source inline("inline-flex");
+@source inline("items-center");
+@source inline("items-start");
+@source inline("justify-center");
+@source inline("leading-6");
+@source inline("left-0");
+@source inline("min-h-28");
+@source inline("min-w-10");
+@source inline("min-w-56");
+@source inline("min-w-8");
+@source inline("min-w-9");
+@source inline("mt-2");
+@source inline("opacity-50");
+@source inline("outline-none");
+@source inline("overflow-hidden");
+@source inline("p-1");
+@source inline("p-4");
+@source inline("peer");
+@source inline("pl-0.5");
+@source inline("pl-[22px]");
+@source inline("pointer-events-none");
+@source inline("pr-0.5");
+@source inline("pr-[22px]");
+@source inline("px-2.5");
+@source inline("px-3");
+@source inline("px-5");
+@source inline("py-1.5");
+@source inline("py-2");
+@source inline("relative");
+@source inline("ring-0");
+@source inline("ring-2");
+@source inline("ring-3");
+@source inline("ring-destructive/20");
+@source inline("ring-destructive/40");
+@source inline("ring-inset");
+@source inline("ring-offset-2");
+@source inline("ring-offset-background");
+@source inline("ring-ring/40");
+@source inline("ring-ring/50");
+@source inline("rounded-[min(var(--radius-md),12px)]");
+@source inline("rounded-full");
+@source inline("rounded-lg");
+@source inline("rounded-md");
+@source inline("rounded-xl");
+@source inline("scale-[0.98]");
+@source inline("scale-[0.99]");
+@source inline("select-none");
+@source inline("shadow-lg");
+@source inline("shadow-xs");
+@source inline("shrink-0");
+@source inline("size-5");
+@source inline("size-8");
+@source inline("text-[0.8rem]");
+@source inline("text-accent-foreground");
+@source inline("text-destructive");
+@source inline("text-foreground");
+@source inline("text-left");
+@source inline("text-muted-foreground");
+@source inline("text-primary");
+@source inline("text-primary-foreground");
+@source inline("text-secondary-foreground");
+@source inline("text-sm");
+@source inline("top-full");
+@source inline("transition-all");
+@source inline("transition-colors");
+@source inline("translate-x-0");
+@source inline("translate-y-px");
+@source inline("underline");
+@source inline("underline-offset-4");
+@source inline("w-11");
+@source inline("w-80");
+@source inline("w-full");
+@source inline("whitespace-nowrap");
+@source inline("will-change-transform");
+@source inline("z-50");
+`;
+
 const SHADCN_THEME_CSS = `:root {
   --radius: 0.625rem;
   --background: lab(100% 0 0);
@@ -150,6 +347,11 @@ const TAILWIND_BASE_TEMPLATE = `@import 'tailwindcss';
   --color-selection-foreground: var(--selection-foreground);
 }
 
+@font-face {
+  font-family: 'GeistSans';
+  src: url('./assets/font/GeistVF.woff2') format('woff2-variations');
+}
+
 @layer base {
   :root {
     --radius-xl: calc(var(--radius) + 4px);
@@ -166,6 +368,31 @@ const TAILWIND_BASE_TEMPLATE = `@import 'tailwindcss';
 body {
   background-color: var(--color-background);
   color: var(--color-foreground);
+  font-family:
+    var(--color-font-geist-sans),
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  unicode-bidi: isolate;
+  font-feature-settings: normal;
+  font-synthesis-weight: none;
+  font-variation-settings: normal;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 `;
 
@@ -199,13 +426,13 @@ function printHelp() {
   console.log(`proto-ui
 
 Usage:
-  proto-ui <theme> [--prototypes <dir>] [--styles-dir <dir>]
+  proto-ui <theme> [--styles-dir <dir>]
   proto-ui tokens --input <dir> --out <file>
   proto-ui tailwindcss [--theme-import <path>] [--tokens-import <path>] --out <file>
   proto-ui theme <name> --out <file>
 
 Examples:
-  proto-ui shadcn --prototypes ./src/prototypes --styles-dir ./src/styles
+  proto-ui shadcn --styles-dir ./src/styles
   proto-ui tokens --input ./packages/prototypes --out ./src/styles/prototype-tokens.generated.css
   proto-ui tailwindcss --out ./src/styles/tailwindcss.css
   proto-ui theme shadcn --out ./src/styles/shadcn-theme.css
@@ -214,18 +441,27 @@ Examples:
 
 async function runPreset(themeName, args) {
   const options = parseOptions(args);
-  const prototypesDir = options.prototypes ?? './src/prototypes';
+  const normalizedTheme = themeName.toLowerCase();
+  if (normalizedTheme !== DEFAULT_THEME_NAME) {
+    throw new Error(
+      `unsupported theme "${themeName}". currently supported: ${DEFAULT_THEME_NAME}.`
+    );
+  }
   const stylesDir = options['styles-dir'] ?? './src/styles';
   const tokensFileName = options['tokens-file'] ?? 'prototype-tokens.generated.css';
   const tailwindFileName = options['tailwind-file'] ?? 'tailwindcss.css';
-  const themeFileName = options['theme-file'] ?? `${themeName}-theme.css`;
+  const themeFileName = options['theme-file'] ?? `${normalizedTheme}-theme.css`;
 
   const tokensOut = path.join(stylesDir, tokensFileName);
   const themeOut = path.join(stylesDir, themeFileName);
   const tailwindOut = path.join(stylesDir, tailwindFileName);
 
-  await runGenerateTokens(['--input', prototypesDir, '--out', tokensOut]);
-  await runGenerateTheme([themeName, '--out', themeOut]);
+  const tokensOutputFile = path.resolve(process.cwd(), tokensOut);
+  await ensureDirectory(tokensOutputFile);
+  await fs.writeFile(tokensOutputFile, SHADCN_TOKENS_CSS, 'utf8');
+  console.log(`[proto-ui] tokens(preset): wrote ${relativeToCwd(tokensOutputFile)}`);
+
+  await runGenerateTheme([normalizedTheme, '--out', themeOut]);
 
   const tailwindAbs = path.resolve(process.cwd(), tailwindOut);
   const themeImport = toCssImportPath(tailwindAbs, path.resolve(process.cwd(), themeOut));
@@ -241,7 +477,7 @@ async function runPreset(themeName, args) {
   ]);
 
   console.log(
-    `[proto-ui] setup(${themeName}): completed tokens + theme + tailwindcss in ${stylesDir}`
+    `[proto-ui] setup(${normalizedTheme}): completed tokens + theme + tailwindcss in ${stylesDir}`
   );
 }
 
@@ -252,7 +488,7 @@ async function runGenerateTokens(args) {
   const root = path.resolve(process.cwd(), input);
   const outputFile = path.resolve(process.cwd(), outFile);
 
-  const files = await collectTsFiles(root);
+  const files = await collectSourceFiles(root);
   const tokens = new Set();
 
   for (const file of files) {
@@ -262,7 +498,7 @@ async function runGenerateTokens(args) {
       sourceText,
       ts.ScriptTarget.Latest,
       true,
-      file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS
+      scriptKindForFile(file)
     );
     const scope = createScope();
     walk(sourceFile, scope, tokens);
@@ -775,17 +1011,31 @@ function escapeForCss(token) {
   return token.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
 }
 
-async function collectTsFiles(dir) {
+function scriptKindForFile(file) {
+  const ext = path.extname(file).toLowerCase();
+  if (ext === '.tsx') return ts.ScriptKind.TSX;
+  if (ext === '.jsx') return ts.ScriptKind.JSX;
+  if (ext === '.js' || ext === '.mjs' || ext === '.cjs') return ts.ScriptKind.JS;
+  return ts.ScriptKind.TS;
+}
+
+async function collectSourceFiles(dir) {
   const out = [];
   const entries = await fs.readdir(dir, { withFileTypes: true });
   for (const entry of entries) {
     const fullPath = path.join(dir, entry.name);
     if (entry.isDirectory()) {
       if (entry.name === 'dist' || entry.name === 'test' || entry.name === 'node_modules') continue;
-      out.push(...(await collectTsFiles(fullPath)));
+      out.push(...(await collectSourceFiles(fullPath)));
       continue;
     }
-    if (entry.isFile() && /\.(ts|tsx|mts|cts)$/.test(entry.name)) out.push(fullPath);
+    if (
+      entry.isFile() &&
+      /\.(ts|tsx|mts|cts|js|jsx|mjs|cjs)$/.test(entry.name) &&
+      !/\.d\.ts$/i.test(entry.name)
+    ) {
+      out.push(fullPath);
+    }
   }
   return out;
 }