@fragments-sdk/cli 0.3.2 → 0.4.0

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
+    });
+  });
+});

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

@@ -0,0 +1,463 @@
+import { describe, it, expect } from "vitest";
+import {
+  themeConfigSchema,
+  validateThemeConfig,
+  themeColorsSchema,
+  themeSurfacesSchema,
+  themeTextSchema,
+  themeBordersSchema,
+  themeTypographySchema,
+  themeRadiusSchema,
+  themeShadowsSchema,
+  themeDarkModeSchema,
+} from "../schema.js";
+import type { ThemeConfig } from "../types.js";
+
+describe("ThemeConfig Schema", () => {
+  describe("validation", () => {
+    it("should accept valid minimal theme (name only)", () => {
+      const theme: ThemeConfig = {
+        name: "My Theme",
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should require name field", () => {
+      const theme = {};
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(result.error.issues[0].path).toContain("name");
+      }
+    });
+
+    it("should validate hex color format (#rrggbb)", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        colors: {
+          accent: "#6366f1",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should validate 3-digit hex color format (#rgb)", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        colors: {
+          accent: "#f00",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should validate rgb/rgba color format", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        colors: {
+          accent: "rgb(99, 102, 241)",
+          accentHover: "rgba(79, 70, 229, 0.9)",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should validate hsl/hsla color format", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        colors: {
+          accent: "hsl(239, 84%, 67%)",
+          accentHover: "hsla(243, 75%, 59%, 0.9)",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should reject invalid color strings", () => {
+      const theme = {
+        name: "Test",
+        colors: {
+          accent: "not-a-color",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(false);
+    });
+
+    it("should validate size formats (px, rem)", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        radius: {
+          sm: "4px",
+          md: "0.375rem",
+          lg: "8px",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should validate font weight range (100-900)", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        typography: {
+          fontWeightNormal: 400,
+          fontWeightMedium: 500,
+          fontWeightSemibold: 600,
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should reject font weight outside range", () => {
+      const theme = {
+        name: "Test",
+        typography: {
+          fontWeightNormal: 1000,
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(false);
+    });
+
+    it("should accept extends: 'default'", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        extends: "default",
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should accept version field", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        version: "1.0.0",
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("colors schema", () => {
+    it("should validate all color fields", () => {
+      const colors = {
+        accent: "#6366f1",
+        accentHover: "#4f46e5",
+        accentActive: "#4338ca",
+        danger: "#ef4444",
+        dangerHover: "#dc2626",
+        success: "#22c55e",
+        warning: "#f59e0b",
+        info: "#3b82f6",
+        dangerBg: "rgba(239, 68, 68, 0.1)",
+        successBg: "rgba(34, 197, 94, 0.1)",
+        warningBg: "rgba(245, 158, 11, 0.1)",
+        infoBg: "rgba(59, 130, 246, 0.1)",
+      };
+
+      const result = themeColorsSchema.safeParse(colors);
+      expect(result.success).toBe(true);
+    });
+
+    it("should allow partial colors", () => {
+      const colors = {
+        accent: "#6366f1",
+      };
+
+      const result = themeColorsSchema.safeParse(colors);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("surfaces schema", () => {
+    it("should validate all surface fields", () => {
+      const surfaces = {
+        bgPrimary: "#ffffff",
+        bgSecondary: "#f8fafc",
+        bgTertiary: "#f1f5f9",
+        bgElevated: "#ffffff",
+        bgHover: "rgba(0, 0, 0, 0.04)",
+        bgActive: "rgba(0, 0, 0, 0.06)",
+      };
+
+      const result = themeSurfacesSchema.safeParse(surfaces);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("text schema", () => {
+    it("should validate all text fields", () => {
+      const text = {
+        primary: "#0f172a",
+        secondary: "#64748b",
+        tertiary: "#94a3b8",
+        inverse: "#ffffff",
+      };
+
+      const result = themeTextSchema.safeParse(text);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("borders schema", () => {
+    it("should validate all border fields", () => {
+      const borders = {
+        default: "#e2e8f0",
+        strong: "#cbd5e1",
+      };
+
+      const result = themeBordersSchema.safeParse(borders);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("typography schema", () => {
+    it("should validate all typography fields", () => {
+      const typography = {
+        fontSans: "system-ui, -apple-system, sans-serif",
+        fontMono: "'SF Mono', monospace",
+        fontWeightNormal: 400,
+        fontWeightMedium: 500,
+        fontWeightSemibold: 600,
+      };
+
+      const result = themeTypographySchema.safeParse(typography);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("radius schema", () => {
+    it("should validate all radius fields", () => {
+      const radius = {
+        sm: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        full: "9999px",
+      };
+
+      const result = themeRadiusSchema.safeParse(radius);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("shadows schema", () => {
+    it("should validate all shadow fields", () => {
+      const shadows = {
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+      };
+
+      const result = themeShadowsSchema.safeParse(shadows);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("dark mode", () => {
+    it("should validate dark mode surface overrides", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        dark: {
+          surfaces: {
+            bgPrimary: "#0f172a",
+            bgSecondary: "#1e293b",
+          },
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should validate dark mode text overrides", () => {
+      const theme: ThemeConfig = {
+        name: "Test",
+        dark: {
+          text: {
+            primary: "#f8fafc",
+            secondary: "#94a3b8",
+          },
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+
+    it("should validate full dark mode config", () => {
+      const darkMode = {
+        surfaces: {
+          bgPrimary: "#0f172a",
+          bgSecondary: "#1e293b",
+          bgTertiary: "#334155",
+          bgElevated: "#1e293b",
+          bgHover: "rgba(255, 255, 255, 0.06)",
+          bgActive: "rgba(255, 255, 255, 0.08)",
+        },
+        text: {
+          primary: "#f8fafc",
+          secondary: "#94a3b8",
+          tertiary: "#64748b",
+          inverse: "#0f172a",
+        },
+        borders: {
+          default: "#334155",
+          strong: "#475569",
+        },
+        shadows: {
+          sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+          md: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
+        },
+        dangerBg: "rgba(239, 68, 68, 0.15)",
+        successBg: "rgba(34, 197, 94, 0.15)",
+        warningBg: "rgba(245, 158, 11, 0.15)",
+        infoBg: "rgba(59, 130, 246, 0.15)",
+        backdrop: "rgba(0, 0, 0, 0.7)",
+      };
+
+      const result = themeDarkModeSchema.safeParse(darkMode);
+      expect(result.success).toBe(true);
+    });
+  });
+
+  describe("validateThemeConfig helper", () => {
+    it("should return parsed theme for valid input", () => {
+      const theme = {
+        name: "Test Theme",
+        colors: {
+          accent: "#6366f1",
+        },
+      };
+
+      const result = validateThemeConfig(theme);
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect(result.data.name).toBe("Test Theme");
+        expect(result.data.colors?.accent).toBe("#6366f1");
+      }
+    });
+
+    it("should return error for invalid input", () => {
+      const theme = {
+        colors: {
+          accent: "invalid",
+        },
+      };
+
+      const result = validateThemeConfig(theme);
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(result.error).toBeDefined();
+      }
+    });
+  });
+
+  describe("complex theme validation", () => {
+    it("should validate a complete theme config", () => {
+      const theme: ThemeConfig = {
+        name: "Complete Theme",
+        version: "1.0.0",
+        extends: "default",
+        colors: {
+          accent: "#6366f1",
+          accentHover: "#4f46e5",
+          accentActive: "#4338ca",
+          danger: "#ef4444",
+          dangerHover: "#dc2626",
+          success: "#22c55e",
+          warning: "#f59e0b",
+          info: "#3b82f6",
+          dangerBg: "rgba(239, 68, 68, 0.1)",
+          successBg: "rgba(34, 197, 94, 0.1)",
+          warningBg: "rgba(245, 158, 11, 0.1)",
+          infoBg: "rgba(59, 130, 246, 0.1)",
+        },
+        surfaces: {
+          bgPrimary: "#ffffff",
+          bgSecondary: "#f8fafc",
+          bgTertiary: "#f1f5f9",
+          bgElevated: "#ffffff",
+          bgHover: "rgba(0, 0, 0, 0.04)",
+          bgActive: "rgba(0, 0, 0, 0.06)",
+        },
+        text: {
+          primary: "#0f172a",
+          secondary: "#64748b",
+          tertiary: "#94a3b8",
+          inverse: "#ffffff",
+        },
+        borders: {
+          default: "#e2e8f0",
+          strong: "#cbd5e1",
+        },
+        typography: {
+          fontSans: "system-ui, -apple-system, sans-serif",
+          fontMono: "'SF Mono', monospace",
+          fontWeightNormal: 400,
+          fontWeightMedium: 500,
+          fontWeightSemibold: 600,
+        },
+        radius: {
+          sm: "0.25rem",
+          md: "0.375rem",
+          lg: "0.5rem",
+          full: "9999px",
+        },
+        shadows: {
+          sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+          md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        },
+        dark: {
+          surfaces: {
+            bgPrimary: "#0f172a",
+            bgSecondary: "#1e293b",
+            bgTertiary: "#334155",
+            bgElevated: "#1e293b",
+            bgHover: "rgba(255, 255, 255, 0.06)",
+            bgActive: "rgba(255, 255, 255, 0.08)",
+          },
+          text: {
+            primary: "#f8fafc",
+            secondary: "#94a3b8",
+            tertiary: "#64748b",
+            inverse: "#0f172a",
+          },
+          borders: {
+            default: "#334155",
+            strong: "#475569",
+          },
+          shadows: {
+            sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+            md: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
+          },
+          dangerBg: "rgba(239, 68, 68, 0.15)",
+          successBg: "rgba(34, 197, 94, 0.15)",
+          warningBg: "rgba(245, 158, 11, 0.15)",
+          infoBg: "rgba(59, 130, 246, 0.15)",
+          backdrop: "rgba(0, 0, 0, 0.7)",
+        },
+      };
+
+      const result = themeConfigSchema.safeParse(theme);
+      expect(result.success).toBe(true);
+    });
+  });
+});