@fragments-sdk/cli 0.3.3 → 0.4.0

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