@fragments-sdk/cli 0.3.3 → 0.4.0

package/src/theme/__tests__/generator.test.ts

@@ -0,0 +1,412 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { mkdir, rm, readFile, access } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  generateScssTokens,
+  generateCssTokens,
+  generateTokenFiles,
+} from "../generator.js";
+import type { ThemeConfig } from "../types.js";
+
+describe("Theme Generator", () => {
+  let testDir: string;
+
+  beforeEach(async () => {
+    testDir = join(
+      tmpdir(),
+      `theme-generator-test-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    );
+    await mkdir(testDir, { recursive: true });
+  });
+
+  afterEach(async () => {
+    try {
+      await rm(testDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe("SCSS generation", () => {
+    it("should generate valid SCSS with custom accent color", () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#ff6600",
+        },
+      };
+
+      const scss = generateScssTokens(theme);
+
+      expect(scss).toContain("$fui-color-accent: #ff6600 !default;");
+    });
+
+    it("should include !default flag for all variables", () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#6366f1",
+          danger: "#ef4444",
+        },
+        radius: {
+          sm: "4px",
+        },
+      };
+
+      const scss = generateScssTokens(theme);
+
+      // All variable definitions should have !default
+      const lines = scss.split("\n").filter((l) => l.includes("$fui-"));
+      for (const line of lines) {
+        expect(line).toContain("!default;");
+      }
+    });
+
+    it("should generate dark mode variables", () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        dark: {
+          surfaces: {
+            bgPrimary: "#0f172a",
+          },
+          text: {
+            primary: "#f8fafc",
+          },
+        },
+      };
+
+      const scss = generateScssTokens(theme);
+
+      expect(scss).toContain("$fui-dark-bg-primary: #0f172a !default;");
+      expect(scss).toContain("$fui-dark-text-primary: #f8fafc !default;");
+    });
+
+    it("should include header comment with theme name", () => {
+      const theme: ThemeConfig = {
+        name: "My Custom Theme",
+      };
+
+      const scss = generateScssTokens(theme);
+
+      expect(scss).toContain("// Theme: My Custom Theme");
+      expect(scss).toContain("// Auto-generated by @fragments-sdk/cli");
+    });
+
+    it("should generate all token categories", () => {
+      const theme: ThemeConfig = {
+        name: "Complete Theme",
+        colors: {
+          accent: "#6366f1",
+        },
+        surfaces: {
+          bgPrimary: "#ffffff",
+        },
+        text: {
+          primary: "#0f172a",
+        },
+        borders: {
+          default: "#e2e8f0",
+        },
+        typography: {
+          fontSans: "system-ui, sans-serif",
+          fontWeightNormal: 400,
+        },
+        radius: {
+          sm: "4px",
+        },
+        shadows: {
+          sm: "0 1px 2px rgba(0,0,0,0.05)",
+        },
+      };
+
+      const scss = generateScssTokens(theme);
+
+      // Check for section comments
+      expect(scss).toContain("// Colors");
+      expect(scss).toContain("// Surfaces");
+      expect(scss).toContain("// Text");
+      expect(scss).toContain("// Borders");
+      expect(scss).toContain("// Typography");
+      expect(scss).toContain("// Border Radius");
+      expect(scss).toContain("// Shadows");
+    });
+
+    it("should only include overridden tokens", () => {
+      const theme: ThemeConfig = {
+        name: "Minimal Theme",
+        colors: {
+          accent: "#ff0000",
+        },
+      };
+
+      const scss = generateScssTokens(theme);
+
+      // Should include accent
+      expect(scss).toContain("$fui-color-accent: #ff0000");
+
+      // Should NOT include non-overridden tokens
+      expect(scss).not.toContain("$fui-color-danger:");
+      expect(scss).not.toContain("$fui-bg-primary:");
+    });
+  });
+
+  describe("CSS generation", () => {
+    it("should generate CSS custom properties", () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#ff6600",
+        },
+      };
+
+      const css = generateCssTokens(theme);
+
+      expect(css).toContain("--fui-color-accent: #ff6600;");
+    });
+
+    it("should wrap in :root selector", () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#6366f1",
+        },
+      };
+
+      const css = generateCssTokens(theme);
+
+      expect(css).toContain(":root {");
+      expect(css).toContain("}");
+    });
+
+    it("should generate dark mode with .dark and [data-theme] selectors", () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        dark: {
+          surfaces: {
+            bgPrimary: "#0f172a",
+          },
+        },
+      };
+
+      const css = generateCssTokens(theme);
+
+      expect(css).toContain(':root.dark,\n:root[data-theme="dark"] {');
+      expect(css).toContain("--fui-bg-primary: #0f172a;");
+    });
+
+    it("should include header comment with theme name", () => {
+      const theme: ThemeConfig = {
+        name: "My CSS Theme",
+      };
+
+      const css = generateCssTokens(theme);
+
+      expect(css).toContain("/* Theme: My CSS Theme */");
+      expect(css).toContain("/* Auto-generated by @fragments-sdk/cli */");
+    });
+  });
+
+  describe("file generation", () => {
+    it("should create SCSS file at specified path", async () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#6366f1",
+        },
+      };
+
+      const result = await generateTokenFiles(theme, {
+        format: "scss",
+        outputDir: testDir,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.scssPath).toBeDefined();
+
+      // Verify file exists and contains content
+      const content = await readFile(result.scssPath!, "utf-8");
+      expect(content).toContain("$fui-color-accent: #6366f1");
+    });
+
+    it("should create CSS file at specified path", async () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#6366f1",
+        },
+      };
+
+      const result = await generateTokenFiles(theme, {
+        format: "css",
+        outputDir: testDir,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.cssPath).toBeDefined();
+
+      // Verify file exists and contains content
+      const content = await readFile(result.cssPath!, "utf-8");
+      expect(content).toContain("--fui-color-accent: #6366f1");
+    });
+
+    it('should create both when format is "both"', async () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+        colors: {
+          accent: "#6366f1",
+        },
+      };
+
+      const result = await generateTokenFiles(theme, {
+        format: "both",
+        outputDir: testDir,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.scssPath).toBeDefined();
+      expect(result.cssPath).toBeDefined();
+
+      // Verify both files exist
+      await expect(access(result.scssPath!)).resolves.toBeUndefined();
+      await expect(access(result.cssPath!)).resolves.toBeUndefined();
+    });
+
+    it("should use custom file prefix", async () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+      };
+
+      const result = await generateTokenFiles(theme, {
+        format: "scss",
+        outputDir: testDir,
+        filePrefix: "_custom-tokens",
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.scssPath).toContain("_custom-tokens.scss");
+    });
+
+    it("should create output directory if needed", async () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+      };
+
+      const nestedDir = join(testDir, "nested", "path");
+
+      const result = await generateTokenFiles(theme, {
+        format: "scss",
+        outputDir: nestedDir,
+      });
+
+      expect(result.success).toBe(true);
+      await expect(access(nestedDir)).resolves.toBeUndefined();
+    });
+
+    it("should use default file prefix when not specified", async () => {
+      const theme: ThemeConfig = {
+        name: "Test Theme",
+      };
+
+      const result = await generateTokenFiles(theme, {
+        format: "scss",
+        outputDir: testDir,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.scssPath).toContain("_theme-tokens.scss");
+    });
+  });
+
+  describe("token mapping", () => {
+    it("should map colors.accent to $fui-color-accent", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        colors: { accent: "#123456" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-color-accent: #123456");
+    });
+
+    it("should map surfaces.bgPrimary to $fui-bg-primary", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        surfaces: { bgPrimary: "#ffffff" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-bg-primary: #ffffff");
+    });
+
+    it("should map text.primary to $fui-text-primary", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        text: { primary: "#000000" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-text-primary: #000000");
+    });
+
+    it("should map borders.default to $fui-border", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        borders: { default: "#cccccc" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-border: #cccccc");
+    });
+
+    it("should map typography.fontSans to $fui-font-sans", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        typography: { fontSans: "Arial, sans-serif" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-font-sans: Arial, sans-serif");
+    });
+
+    it("should map radius.sm to $fui-radius-sm", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        radius: { sm: "2px" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-radius-sm: 2px");
+    });
+
+    it("should map shadows.md to $fui-shadow-md", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        shadows: { md: "0 4px 8px rgba(0,0,0,0.1)" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-shadow-md: 0 4px 8px rgba(0,0,0,0.1)");
+    });
+
+    it("should map dark.surfaces.bgPrimary to $fui-dark-bg-primary", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        dark: { surfaces: { bgPrimary: "#1a1a1a" } },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-dark-bg-primary: #1a1a1a");
+    });
+
+    it("should map dark.dangerBg to $fui-dark-color-danger-bg", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        dark: { dangerBg: "rgba(239, 68, 68, 0.15)" },
+      };
+
+      const scss = generateScssTokens(theme);
+      expect(scss).toContain("$fui-dark-color-danger-bg: rgba(239, 68, 68, 0.15)");
+    });
+  });
+});

package/src/theme/__tests__/presets.test.ts

@@ -0,0 +1,169 @@
+import { describe, it, expect } from "vitest";
+import {
+  DEFAULT_PRESET,
+  PRESETS,
+  getPreset,
+  listPresets,
+  isValidPresetName,
+} from "../presets.js";
+import { validateThemeConfig } from "../schema.js";
+
+describe("Theme Presets", () => {
+  describe("DEFAULT_PRESET", () => {
+    it("should match _variables.scss values for colors", () => {
+      // These values come from libs/ui/src/tokens/_variables.scss
+      expect(DEFAULT_PRESET.colors?.accent).toBe("#6366f1");
+      expect(DEFAULT_PRESET.colors?.accentHover).toBe("#4f46e5");
+      expect(DEFAULT_PRESET.colors?.accentActive).toBe("#4338ca");
+      expect(DEFAULT_PRESET.colors?.danger).toBe("#ef4444");
+      expect(DEFAULT_PRESET.colors?.dangerHover).toBe("#dc2626");
+      expect(DEFAULT_PRESET.colors?.success).toBe("#22c55e");
+      expect(DEFAULT_PRESET.colors?.warning).toBe("#f59e0b");
+      expect(DEFAULT_PRESET.colors?.info).toBe("#3b82f6");
+    });
+
+    it("should match _variables.scss values for surfaces", () => {
+      expect(DEFAULT_PRESET.surfaces?.bgPrimary).toBe("#ffffff");
+      expect(DEFAULT_PRESET.surfaces?.bgSecondary).toBe("#f8fafc");
+      expect(DEFAULT_PRESET.surfaces?.bgTertiary).toBe("#f1f5f9");
+      expect(DEFAULT_PRESET.surfaces?.bgElevated).toBe("#ffffff");
+    });
+
+    it("should match _variables.scss values for text", () => {
+      expect(DEFAULT_PRESET.text?.primary).toBe("#0f172a");
+      expect(DEFAULT_PRESET.text?.secondary).toBe("#64748b");
+      expect(DEFAULT_PRESET.text?.tertiary).toBe("#94a3b8");
+      expect(DEFAULT_PRESET.text?.inverse).toBe("#ffffff");
+    });
+
+    it("should match _variables.scss values for borders", () => {
+      expect(DEFAULT_PRESET.borders?.default).toBe("#e2e8f0");
+      expect(DEFAULT_PRESET.borders?.strong).toBe("#cbd5e1");
+    });
+
+    it("should match _variables.scss values for radius", () => {
+      expect(DEFAULT_PRESET.radius?.sm).toBe("0.25rem");
+      expect(DEFAULT_PRESET.radius?.md).toBe("0.375rem");
+      expect(DEFAULT_PRESET.radius?.lg).toBe("0.5rem");
+      expect(DEFAULT_PRESET.radius?.full).toBe("9999px");
+    });
+
+    it("should match _variables.scss values for dark mode", () => {
+      expect(DEFAULT_PRESET.dark?.surfaces?.bgPrimary).toBe("#0f172a");
+      expect(DEFAULT_PRESET.dark?.surfaces?.bgSecondary).toBe("#1e293b");
+      expect(DEFAULT_PRESET.dark?.text?.primary).toBe("#f8fafc");
+      expect(DEFAULT_PRESET.dark?.borders?.default).toBe("#334155");
+    });
+
+    it("should be a valid ThemeConfig", () => {
+      const result = validateThemeConfig(DEFAULT_PRESET);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("all presets", () => {
+    it("all presets should be valid ThemeConfigs", () => {
+      for (const [name, preset] of Object.entries(PRESETS)) {
+        const result = validateThemeConfig(preset);
+        expect(result.success).toBe(true);
+        if (!result.success) {
+          console.error(`Preset "${name}" is invalid:`, result.error);
+        }
+      }
+    });
+
+    it("all presets should have a name", () => {
+      for (const [key, preset] of Object.entries(PRESETS)) {
+        expect(preset.name).toBeDefined();
+        expect(preset.name.length).toBeGreaterThan(0);
+      }
+    });
+
+    it("all presets should extend default", () => {
+      for (const [key, preset] of Object.entries(PRESETS)) {
+        if (key !== "default") {
+          expect(preset.extends).toBe("default");
+        }
+      }
+    });
+  });
+
+  describe("getPreset", () => {
+    it('should return DEFAULT_PRESET for "default"', () => {
+      const preset = getPreset("default");
+      expect(preset).toBe(DEFAULT_PRESET);
+    });
+
+    it('should return null for "unknown"', () => {
+      const preset = getPreset("unknown");
+      expect(preset).toBeNull();
+    });
+
+    it("should return the correct preset for each built-in name", () => {
+      const names = ["default", "neutral", "slate", "emerald", "rose"];
+      for (const name of names) {
+        const preset = getPreset(name);
+        expect(preset).not.toBeNull();
+        expect(preset?.name).toBeDefined();
+      }
+    });
+  });
+
+  describe("listPresets", () => {
+    it('should include "default"', () => {
+      const presets = listPresets();
+      expect(presets).toContain("default");
+    });
+
+    it("should return all built-in preset names", () => {
+      const presets = listPresets();
+      expect(presets).toContain("default");
+      expect(presets).toContain("neutral");
+      expect(presets).toContain("slate");
+      expect(presets).toContain("emerald");
+      expect(presets).toContain("rose");
+    });
+
+    it("should match the keys in PRESETS", () => {
+      const presets = listPresets();
+      const keys = Object.keys(PRESETS);
+      expect(presets.sort()).toEqual(keys.sort());
+    });
+  });
+
+  describe("isValidPresetName", () => {
+    it("should return true for valid preset names", () => {
+      expect(isValidPresetName("default")).toBe(true);
+      expect(isValidPresetName("neutral")).toBe(true);
+      expect(isValidPresetName("slate")).toBe(true);
+      expect(isValidPresetName("emerald")).toBe(true);
+      expect(isValidPresetName("rose")).toBe(true);
+    });
+
+    it("should return false for invalid preset names", () => {
+      expect(isValidPresetName("unknown")).toBe(false);
+      expect(isValidPresetName("")).toBe(false);
+      expect(isValidPresetName("Default")).toBe(false); // case sensitive
+    });
+  });
+
+  describe("preset variations", () => {
+    it("neutral preset should have gray-based accent", () => {
+      const neutral = getPreset("neutral");
+      expect(neutral?.colors?.accent).toBeDefined();
+      // Neutral uses gray/zinc colors
+    });
+
+    it("emerald preset should have green-based accent", () => {
+      const emerald = getPreset("emerald");
+      expect(emerald?.colors?.accent).toBeDefined();
+      // Emerald uses green colors
+    });
+
+    it("rose preset should have pink-based accent", () => {
+      const rose = getPreset("rose");
+      expect(rose?.colors?.accent).toBeDefined();
+      // Rose uses pink colors
+    });
+  });
+});