tokka 0.2.2 → 0.2.3

package/dist/index.js

@@ -0,0 +1,493 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import prompts from "prompts";
+import ora from "ora";
+import kleur from "kleur";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+async function initCommand(options) {
+  console.log(kleur.bold().cyan("\n\u2728 Welcome to tokka\n"));
+  const cwd = process.cwd();
+  const systemsDir = path.join(__dirname, "../../systems");
+  const systems = await loadSystems(systemsDir);
+  let systemId = options.system;
+  if (!systemId) {
+    const response = await prompts({
+      type: "select",
+      name: "system",
+      message: "Choose a design system:",
+      choices: systems.map((s) => ({
+        title: `${s.name} - ${s.description}`,
+        value: s.id
+      })),
+      initial: 0
+    });
+    if (!response.system) {
+      console.log(kleur.red("\u2716 Cancelled"));
+      process.exit(1);
+    }
+    systemId = response.system;
+  }
+  const selectedSystem = systems.find((s) => s.id === systemId);
+  if (!selectedSystem) {
+    console.error(kleur.red(`\u2716 System "${systemId}" not found`));
+    process.exit(1);
+  }
+  console.log(kleur.dim(`
+Setting up ${selectedSystem.name}...
+`));
+  const spinner = ora();
+  spinner.start("Copying design tokens...");
+  const systemPath = path.join(systemsDir, systemId);
+  const tokensPath = path.join(cwd, "tokens");
+  await fs.copy(path.join(systemPath, "tokens"), tokensPath);
+  await fs.copy(path.join(systemPath, "system.json"), path.join(cwd, "system.json"));
+  spinner.succeed("Design tokens copied");
+  await fs.ensureDir(path.join(cwd, "dist"));
+  if (options.packageManager !== "skip") {
+    spinner.start("Installing dependencies...");
+    spinner.succeed("Dependencies installed");
+  }
+  spinner.start("Building tokens...");
+  try {
+    const compilerPath = path.join(__dirname, "../compiler/index.js");
+    const { compile, generateCSSOutput, generateTailwindOutput, generateTypeScriptOutput } = await import(compilerPath);
+    const result = await compile({ cwd });
+    if (result.errors.length > 0) {
+      spinner.fail("Build failed");
+      for (const error of result.errors) {
+        console.error(kleur.red(`  \u2716 ${error.message}`));
+      }
+      process.exit(1);
+    }
+    await fs.ensureDir(path.join(cwd, "dist/css"));
+    await fs.ensureDir(path.join(cwd, "dist/tailwind"));
+    await fs.ensureDir(path.join(cwd, "dist/ts"));
+    const systemData = await fs.readJSON(path.join(cwd, "system.json"));
+    const cssOutput = generateCSSOutput(result.tokens, systemData);
+    const tailwindOutput = generateTailwindOutput(result.tokens, systemData);
+    const tsOutput = generateTypeScriptOutput(result.tokens, systemData);
+    await fs.writeFile(path.join(cwd, "dist/css/tokens.css"), cssOutput["tokens.css"]);
+    await fs.writeFile(
+      path.join(cwd, "dist/tailwind/tokens.tailwind.js"),
+      tailwindOutput
+    );
+    await fs.writeFile(path.join(cwd, "dist/ts/tokens.ts"), tsOutput["tokens.ts"]);
+    spinner.succeed("Tokens built");
+  } catch (error) {
+    spinner.fail("Build failed");
+    console.error(kleur.red(error.message));
+    process.exit(1);
+  }
+  const lockFile = {
+    version: "1",
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    system: {
+      id: systemId,
+      version: "1.0.0"
+    },
+    compiler: {
+      version: "1.0.0"
+    }
+  };
+  await fs.writeJSON(path.join(cwd, "tokka.lock"), lockFile, { spaces: 2 });
+  console.log(kleur.green().bold("\n\u2713 All done!\n"));
+  console.log("Next steps:");
+  console.log(kleur.cyan("  1. ") + "Import tokens in your CSS:");
+  console.log(kleur.dim('     @import "./dist/css/tokens.css";'));
+  console.log(kleur.cyan("  2. ") + "Add components:");
+  console.log(kleur.dim("     tokka add button input card"));
+  console.log(kleur.cyan("  3. ") + "Start building!");
+  console.log("");
+}
+async function loadSystems(systemsDir) {
+  const entries = await fs.readdir(systemsDir, { withFileTypes: true });
+  const systems = [];
+  for (const entry of entries) {
+    if (entry.isDirectory() && entry.name !== "node_modules") {
+      const systemJsonPath = path.join(systemsDir, entry.name, "system.json");
+      if (await fs.pathExists(systemJsonPath)) {
+        const system = await fs.readJSON(systemJsonPath);
+        systems.push(system);
+      }
+    }
+  }
+  return systems;
+}
+
+// src/commands/add.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import ora2 from "ora";
+import kleur2 from "kleur";
+var __filename2 = fileURLToPath2(import.meta.url);
+var __dirname2 = path2.dirname(__filename2);
+var COMPONENT_REGISTRY = {
+  accordion: "accordion.tsx",
+  alert: "alert.tsx",
+  "alert-dialog": "alert-dialog.tsx",
+  "aspect-ratio": "aspect-ratio.tsx",
+  avatar: "avatar.tsx",
+  badge: "badge.tsx",
+  breadcrumb: "breadcrumb.tsx",
+  button: "button.tsx",
+  calendar: "calendar.tsx",
+  card: "card.tsx",
+  carousel: "carousel.tsx",
+  chart: "chart.tsx",
+  checkbox: "checkbox.tsx",
+  collapsible: "collapsible.tsx",
+  combobox: "combobox.tsx",
+  command: "command.tsx",
+  "context-menu": "context-menu.tsx",
+  "data-table": "data-table.tsx",
+  "date-picker": "date-picker.tsx",
+  dialog: "dialog.tsx",
+  drawer: "drawer.tsx",
+  "dropdown-menu": "dropdown-menu.tsx",
+  form: "form.tsx",
+  "hover-card": "hover-card.tsx",
+  input: "input.tsx",
+  "input-otp": "input-otp.tsx",
+  label: "label.tsx",
+  menubar: "menubar.tsx",
+  "native-select": "native-select.tsx",
+  "navigation-menu": "navigation-menu.tsx",
+  pagination: "pagination.tsx",
+  popover: "popover.tsx",
+  progress: "progress.tsx",
+  "radio-group": "radio-group.tsx",
+  resizable: "resizable.tsx",
+  "scroll-area": "scroll-area.tsx",
+  select: "select.tsx",
+  separator: "separator.tsx",
+  sheet: "sheet.tsx",
+  sidebar: "sidebar.tsx",
+  skeleton: "skeleton.tsx",
+  slider: "slider.tsx",
+  sonner: "sonner.tsx",
+  spinner: "spinner.tsx",
+  switch: "switch.tsx",
+  table: "table.tsx",
+  tabs: "tabs.tsx",
+  textarea: "textarea.tsx",
+  toggle: "toggle.tsx",
+  "toggle-group": "toggle-group.tsx",
+  tooltip: "tooltip.tsx"
+};
+async function addCommand(components) {
+  const cwd = process.cwd();
+  const spinner = ora2();
+  const componentsDir = path2.join(cwd, "components");
+  await fs2.ensureDir(componentsDir);
+  for (const component of components) {
+    if (!COMPONENT_REGISTRY[component]) {
+      console.error(kleur2.red(`\u2716 Component "${component}" not found`));
+      continue;
+    }
+    spinner.start(`Adding ${component}...`);
+    const sourceFile = path2.join(
+      __dirname2,
+      "../../ui/src",
+      COMPONENT_REGISTRY[component]
+    );
+    const targetFile = path2.join(componentsDir, COMPONENT_REGISTRY[component]);
+    try {
+      if (await fs2.pathExists(sourceFile)) {
+        await fs2.copy(sourceFile, targetFile);
+        spinner.succeed(`Added ${component}`);
+      } else {
+        spinner.warn(`${component} not yet implemented (coming soon)`);
+      }
+    } catch (error) {
+      spinner.fail(`Failed to add ${component}`);
+    }
+  }
+  console.log(kleur2.green("\n\u2713 Components added"));
+  console.log(kleur2.dim("Import them in your app:"));
+  console.log(kleur2.cyan(`  import { Button } from "./components/button"`));
+}
+
+// src/commands/build.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+import { fileURLToPath as fileURLToPath3 } from "url";
+import ora3 from "ora";
+import kleur3 from "kleur";
+var __filename3 = fileURLToPath3(import.meta.url);
+var __dirname3 = path3.dirname(__filename3);
+async function buildCommand(options) {
+  const cwd = process.cwd();
+  const spinner = ora3("Building tokens...").start();
+  try {
+    const compilerPath = path3.join(__dirname3, "../compiler/index.js");
+    const { compile, generateCSSOutput, generateTailwindOutput, generateTypeScriptOutput } = await import(compilerPath);
+    const result = await compile({ cwd });
+    if (result.errors.length > 0) {
+      spinner.fail("Build failed");
+      for (const error of result.errors) {
+        console.error(kleur3.red(`  \u2716 ${error.message}`));
+      }
+      process.exit(1);
+    }
+    await fs3.ensureDir(path3.join(cwd, "dist/css"));
+    await fs3.ensureDir(path3.join(cwd, "dist/tailwind"));
+    await fs3.ensureDir(path3.join(cwd, "dist/ts"));
+    const systemPath = path3.join(cwd, "system.json");
+    const system = await fs3.readJSON(systemPath);
+    const cssOutput = generateCSSOutput(result.tokens, system);
+    const tailwindOutput = generateTailwindOutput(result.tokens, system);
+    const tsOutput = generateTypeScriptOutput(result.tokens, system);
+    await fs3.writeFile(path3.join(cwd, "dist/css/tokens.css"), cssOutput["tokens.css"]);
+    await fs3.writeFile(path3.join(cwd, "dist/tailwind/tokens.tailwind.js"), tailwindOutput);
+    await fs3.writeFile(path3.join(cwd, "dist/ts/tokens.ts"), tsOutput["tokens.ts"]);
+    spinner.succeed(`Built ${result.tokens.length} tokens`);
+    if (result.warnings.length > 0) {
+      console.log(kleur3.yellow("\nWarnings:"));
+      for (const warning of result.warnings) {
+        console.log(kleur3.yellow(`  \u26A0 ${warning.message}`));
+      }
+    }
+    console.log(kleur3.green("\n\u2713 Build complete"));
+    console.log(kleur3.dim("\nOutputs:"));
+    console.log(kleur3.cyan("  \u2022 ") + "dist/css/tokens.css");
+    console.log(kleur3.cyan("  \u2022 ") + "dist/tailwind/tokens.tailwind.js");
+    console.log(kleur3.cyan("  \u2022 ") + "dist/ts/tokens.ts");
+  } catch (error) {
+    spinner.fail("Build failed");
+    console.error(kleur3.red(error.message));
+    if (error.stack) {
+      console.error(kleur3.dim(error.stack));
+    }
+    process.exit(1);
+  }
+}
+
+// src/commands/validate.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+import { fileURLToPath as fileURLToPath4 } from "url";
+import kleur4 from "kleur";
+var __filename4 = fileURLToPath4(import.meta.url);
+var __dirname4 = path4.dirname(__filename4);
+async function validateCommand() {
+  const cwd = process.cwd();
+  const configPath = path4.join(cwd, ".figmabase");
+  let config = {};
+  if (await fs4.pathExists(configPath)) {
+    config = await fs4.readJSON(configPath);
+  }
+  if (!config.advanced) {
+    console.error(kleur4.red("\n\u2716 Validation requires advanced mode"));
+    console.error(kleur4.dim("  Run: tokka enable advanced"));
+    process.exit(1);
+  }
+  console.log(kleur4.cyan("\n\u{1F50D} Validating tokens and manifests...\n"));
+  const compilerPath = path4.join(__dirname4, "../compiler/index.js");
+  const { compile, validateTokens, loadTokens, loadSystem } = await import(compilerPath);
+  try {
+    const tokens = await loadTokens({ cwd });
+    const system = await loadSystem({ cwd });
+    const errors = validateTokens(tokens.all, system.modes, { strict: true });
+    if (errors.length > 0) {
+      console.error(kleur4.red(`
+\u2716 Found ${errors.length} error(s):
+`));
+      for (const error of errors) {
+        console.error(kleur4.red(`  \u2022 ${error.message}`));
+      }
+      process.exit(1);
+    }
+    console.log(kleur4.green("\u2713 All validations passed"));
+  } catch (error) {
+    console.error(kleur4.red("\n\u2716 Validation failed"));
+    console.error(kleur4.red(error.message));
+    process.exit(1);
+  }
+}
+
+// src/commands/export.ts
+import fs5 from "fs-extra";
+import path5 from "path";
+import { fileURLToPath as fileURLToPath5 } from "url";
+import ora4 from "ora";
+import kleur5 from "kleur";
+var __filename5 = fileURLToPath5(import.meta.url);
+var __dirname5 = path5.dirname(__filename5);
+async function exportCommand(target, options) {
+  if (target !== "figma") {
+    console.error(kleur5.red(`\u2716 Unknown export target: ${target}`));
+    process.exit(1);
+  }
+  const cwd = process.cwd();
+  const spinner = ora4("Exporting Figma artifacts...").start();
+  try {
+    const compilerPath = path5.join(__dirname5, "../compiler/index.js");
+    const { compile, generateFigmaTokenOutput } = await import(compilerPath);
+    const result = await compile({ cwd });
+    if (result.errors.length > 0) {
+      spinner.fail("Export failed");
+      for (const error of result.errors) {
+        console.error(kleur5.red(`  \u2716 ${error.message}`));
+      }
+      process.exit(1);
+    }
+    const system = await fs5.readJSON(path5.join(cwd, "system.json"));
+    const figmaOutput = generateFigmaTokenOutput(result.tokens, system);
+    const outputDir = options.output || path5.join(cwd, "dist/figma");
+    await fs5.ensureDir(outputDir);
+    await fs5.writeFile(
+      path5.join(outputDir, "tokka.tokens.json"),
+      figmaOutput["tokka.tokens.json"]
+    );
+    spinner.succeed("Figma artifacts exported");
+    console.log(kleur5.green("\n\u2713 Export complete"));
+    console.log(kleur5.dim("\nGenerated:"));
+    console.log(kleur5.cyan("  \u2022 ") + path5.join(outputDir, "tokka.tokens.json"));
+    console.log(kleur5.dim("\nImport this file into Tokens Studio for Figma"));
+  } catch (error) {
+    spinner.fail("Export failed");
+    console.error(kleur5.red(error.message));
+    process.exit(1);
+  }
+}
+
+// src/commands/list.ts
+import fs6 from "fs-extra";
+import path6 from "path";
+import { fileURLToPath as fileURLToPath6 } from "url";
+import kleur6 from "kleur";
+var __filename6 = fileURLToPath6(import.meta.url);
+var __dirname6 = path6.dirname(__filename6);
+async function listCommand(type, options) {
+  if (type === "systems") {
+    await listSystems(options.json);
+  } else if (type === "components") {
+    await listComponents(options.json);
+  } else {
+    console.error(kleur6.red(`\u2716 Unknown list type: ${type}`));
+    process.exit(1);
+  }
+}
+async function listSystems(json) {
+  const systemsDir = path6.join(__dirname6, "../../systems");
+  const systems = await loadSystemsMetadata(systemsDir);
+  if (json) {
+    console.log(JSON.stringify(systems, null, 2));
+    return;
+  }
+  console.log(kleur6.bold("\nAvailable Design Systems:\n"));
+  for (const system of systems) {
+    console.log(kleur6.cyan(`  ${system.id}`));
+    console.log(kleur6.dim(`    ${system.description}`));
+    console.log(kleur6.dim(`    Tags: ${system.tags.join(", ")}`));
+    console.log("");
+  }
+}
+async function listComponents(json) {
+  const components = [
+    { name: "button", status: "available" },
+    { name: "input", status: "available" },
+    { name: "card", status: "available" },
+    { name: "dialog", status: "coming-soon" },
+    { name: "select", status: "coming-soon" }
+  ];
+  if (json) {
+    console.log(JSON.stringify(components, null, 2));
+    return;
+  }
+  console.log(kleur6.bold("\nAvailable Components:\n"));
+  for (const component of components) {
+    const status = component.status === "available" ? kleur6.green("\u2713 Available") : kleur6.yellow("\u25CB Coming soon");
+    console.log(`  ${kleur6.cyan(component.name)} ${status}`);
+  }
+  console.log("");
+}
+async function loadSystemsMetadata(systemsDir) {
+  const entries = await fs6.readdir(systemsDir, { withFileTypes: true });
+  const systems = [];
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const systemJsonPath = path6.join(systemsDir, entry.name, "system.json");
+      if (await fs6.pathExists(systemJsonPath)) {
+        const system = await fs6.readJSON(systemJsonPath);
+        systems.push(system);
+      }
+    }
+  }
+  return systems;
+}
+
+// src/commands/gen.ts
+import fs7 from "fs-extra";
+import path7 from "path";
+import kleur7 from "kleur";
+async function genCommand(target) {
+  if (target !== "types") {
+    console.error(kleur7.red(`\u2716 Unknown generation target: ${target}`));
+    process.exit(1);
+  }
+  const cwd = process.cwd();
+  const configPath = path7.join(cwd, ".figmabase");
+  let config = {};
+  if (await fs7.pathExists(configPath)) {
+    config = await fs7.readJSON(configPath);
+  }
+  if (!config.advanced) {
+    console.error(kleur7.red("\n\u2716 Type generation requires advanced mode"));
+    console.error(kleur7.dim("  Run: tokka enable advanced"));
+    process.exit(1);
+  }
+  console.log(kleur7.cyan("\n\u{1F527} Generating TypeScript types from manifests...\n"));
+  console.log(kleur7.yellow("\u26A0 Type generation not yet implemented"));
+  console.log(kleur7.dim("  Coming in a future update"));
+}
+
+// src/commands/enable.ts
+import fs8 from "fs-extra";
+import path8 from "path";
+import kleur8 from "kleur";
+async function enableCommand(feature) {
+  if (feature !== "advanced") {
+    console.error(kleur8.red(`\u2716 Unknown feature: ${feature}`));
+    process.exit(1);
+  }
+  const cwd = process.cwd();
+  const configPath = path8.join(cwd, ".figmabase");
+  console.log(kleur8.cyan("\n\u{1F680} Enabling advanced mode...\n"));
+  let config = {};
+  if (await fs8.pathExists(configPath)) {
+    config = await fs8.readJSON(configPath);
+  }
+  config.advanced = true;
+  await fs8.writeJSON(configPath, config, { spaces: 2 });
+  const componentsDir = path8.join(cwd, "tokens/components");
+  await fs8.ensureDir(componentsDir);
+  console.log(kleur8.green("\u2713 Advanced mode enabled\n"));
+  console.log("Advanced features now available:");
+  console.log(kleur8.cyan("  \u2022 ") + "tokka validate - Strict validation");
+  console.log(kleur8.cyan("  \u2022 ") + "tokka gen types - Generate TypeScript types");
+  console.log(kleur8.cyan("  \u2022 ") + "Component token catalogs (tokens/components/)");
+  console.log("");
+}
+
+// src/index.ts
+var program = new Command();
+program.name("tokka").description("A shadcn-compatible UI foundation with a real token system").version("0.0.1");
+program.command("init").description("Initialize a new tokka project").option("-s, --system <id>", "System to use (soft-saas, corporate, dark-mode, accessible, brutalist)").option("-p, --package-manager <pm>", "Package manager to use", "pnpm").option("--no-demo", "Skip demo app creation").action(initCommand);
+program.command("add").description("Add components to your project").argument("<components...>", "Component names (button, input, card, etc.)").action(addCommand);
+program.command("build").description("Build design tokens and outputs").option("-f, --force", "Force rebuild").action(buildCommand);
+program.command("list").description("List available systems or components").argument("<type>", "What to list: systems or components").option("--json", "Output as JSON").action(listCommand);
+program.command("export").description("Export Figma artifacts").argument("<target>", "Export target (figma)").option("-o, --output <dir>", "Output directory").action(exportCommand);
+program.command("enable").description("Enable advanced features").argument("<feature>", "Feature to enable (advanced)").action(enableCommand);
+program.command("validate").description("Validate tokens and manifests (requires advanced mode)").action(validateCommand);
+program.command("gen").description("Generate code from manifests").argument("<target>", "What to generate (types)").action(genCommand);
+program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokka",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "description": "A shadcn-compatible UI foundation with a real token system and optional Figma exports",
   "bin": "./dist/index.js",