@dheme/react 2.0.0

package/dist/index.mjs

@@ -0,0 +1,425 @@
+// src/components/DhemeProvider.tsx
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { DhemeClient } from "@dheme/sdk";
+
+// src/contexts/ThemeDataContext.ts
+import { createContext } from "react";
+var ThemeDataContext = createContext(null);
+
+// src/contexts/ThemeActionsContext.ts
+import { createContext as createContext2 } from "react";
+var ThemeActionsContext = createContext2(null);
+
+// src/constants.ts
+var STORAGE_KEY_PREFIX = "dheme-cache";
+var STORAGE_PARAMS_KEY = "dheme-params";
+var STORAGE_MODE_KEY = "dheme-mode";
+var CSS_TOKEN_KEYS = [
+  "background",
+  "foreground",
+  "card",
+  "cardForeground",
+  "popover",
+  "popoverForeground",
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "secondaryForeground",
+  "muted",
+  "mutedForeground",
+  "accent",
+  "accentForeground",
+  "destructive",
+  "destructiveForeground",
+  "border",
+  "input",
+  "ring"
+];
+var TOKEN_TO_CSS_VAR = {
+  background: "--background",
+  foreground: "--foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  secondary: "--secondary",
+  secondaryForeground: "--secondary-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  accent: "--accent",
+  accentForeground: "--accent-foreground",
+  destructive: "--destructive",
+  destructiveForeground: "--destructive-foreground",
+  border: "--border",
+  input: "--input",
+  ring: "--ring"
+};
+
+// src/utils/cssVariables.ts
+function formatHSL(color) {
+  return `${color.h} ${color.s}% ${color.l}%`;
+}
+function themeToCSS(theme, mode) {
+  const colors = theme.colors[mode];
+  if (!colors) return "";
+  const parts = [];
+  for (const key of CSS_TOKEN_KEYS) {
+    const color = colors[key];
+    if (color) {
+      parts.push(`${TOKEN_TO_CSS_VAR[key]}:${formatHSL(color)}`);
+    }
+  }
+  if (theme.radius != null) {
+    parts.push(`--radius:${theme.radius}rem`);
+  }
+  return parts.join(";");
+}
+function themeToCSSBothModes(theme) {
+  const lightCSS = themeToCSS(theme, "light");
+  const darkCSS = themeToCSS(theme, "dark");
+  return `:root{${lightCSS}}.dark{${darkCSS}}`;
+}
+function applyThemeCSSVariables(theme, mode) {
+  if (typeof document === "undefined") return;
+  const colors = theme.colors[mode];
+  if (!colors) return;
+  const style = document.documentElement.style;
+  for (const key of CSS_TOKEN_KEYS) {
+    const color = colors[key];
+    if (color) {
+      style.setProperty(TOKEN_TO_CSS_VAR[key], formatHSL(color));
+    }
+  }
+  if (theme.radius != null) {
+    style.setProperty("--radius", `${theme.radius}rem`);
+  }
+}
+function removeThemeCSSVariables() {
+  if (typeof document === "undefined") return;
+  const style = document.documentElement.style;
+  for (const key of CSS_TOKEN_KEYS) {
+    style.removeProperty(TOKEN_TO_CSS_VAR[key]);
+  }
+  style.removeProperty("--radius");
+}
+
+// src/utils/cacheKey.ts
+function buildCacheKey(params) {
+  const normalized = {
+    t: params.theme.toLowerCase().replace("#", ""),
+    s: (params.secondaryColor || "").toLowerCase().replace("#", ""),
+    r: params.radius ?? 0.5,
+    sa: params.saturationAdjust ?? 0,
+    la: params.lightnessAdjust ?? 0,
+    ca: params.contrastAdjust ?? 0,
+    ci: params.cardIsColored ?? false,
+    bi: params.backgroundIsColored ?? true
+  };
+  return JSON.stringify(normalized);
+}
+
+// src/utils/storage.ts
+var memoryCache = /* @__PURE__ */ new Map();
+function getItem(key) {
+  if (memoryCache.has(key)) return memoryCache.get(key);
+  try {
+    if (typeof window === "undefined") return null;
+    const value = localStorage.getItem(key);
+    if (value !== null) memoryCache.set(key, value);
+    return value;
+  } catch {
+    return null;
+  }
+}
+function setItem(key, value) {
+  memoryCache.set(key, value);
+  try {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(key, value);
+    }
+  } catch {
+  }
+}
+function removeItem(key) {
+  memoryCache.delete(key);
+  try {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(key);
+    }
+  } catch {
+  }
+}
+function saveThemeToCache(cacheKey, theme) {
+  setItem(`${STORAGE_KEY_PREFIX}:${cacheKey}`, JSON.stringify(theme));
+}
+function loadThemeFromCache(cacheKey) {
+  const raw = getItem(`${STORAGE_KEY_PREFIX}:${cacheKey}`);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function saveCurrentParams(params) {
+  setItem(STORAGE_PARAMS_KEY, JSON.stringify(params));
+}
+function saveMode(mode) {
+  setItem(STORAGE_MODE_KEY, mode);
+}
+function loadMode() {
+  const raw = getItem(STORAGE_MODE_KEY);
+  if (raw === "light" || raw === "dark") return raw;
+  return null;
+}
+function clearAll() {
+  removeItem(STORAGE_PARAMS_KEY);
+  removeItem(STORAGE_MODE_KEY);
+  const keysToRemove = [];
+  memoryCache.forEach((_, key) => {
+    if (key.startsWith(STORAGE_KEY_PREFIX + ":")) {
+      keysToRemove.push(key);
+    }
+  });
+  keysToRemove.forEach(removeItem);
+  try {
+    if (typeof window !== "undefined") {
+      const len = localStorage.length;
+      for (let i = len - 1; i >= 0; i--) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(STORAGE_KEY_PREFIX + ":")) {
+          localStorage.removeItem(key);
+        }
+      }
+    }
+  } catch {
+  }
+}
+
+// src/components/DhemeProvider.tsx
+function DhemeProvider({
+  apiKey,
+  theme: primaryColor,
+  themeParams,
+  defaultMode = "light",
+  baseUrl,
+  persist = true,
+  autoApply = true,
+  onThemeChange,
+  onModeChange,
+  onError,
+  children
+}) {
+  const client = useMemo(() => new DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
+  const [theme, setTheme] = useState(null);
+  const [mode, setModeState] = useState(() => {
+    if (typeof window === "undefined") return defaultMode;
+    return loadMode() || defaultMode;
+  });
+  const [isReady, setIsReady] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const modeRef = useRef(mode);
+  modeRef.current = mode;
+  const autoApplyRef = useRef(autoApply);
+  autoApplyRef.current = autoApply;
+  const persistRef = useRef(persist);
+  persistRef.current = persist;
+  const onThemeChangeRef = useRef(onThemeChange);
+  onThemeChangeRef.current = onThemeChange;
+  const onModeChangeRef = useRef(onModeChange);
+  onModeChangeRef.current = onModeChange;
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const abortRef = useRef(null);
+  const setMode = useCallback((newMode) => {
+    setModeState(newMode);
+    if (persistRef.current) saveMode(newMode);
+    onModeChangeRef.current?.(newMode);
+  }, []);
+  useEffect(() => {
+    if (theme && autoApply) {
+      applyThemeCSSVariables(theme, mode);
+    }
+    if (typeof document !== "undefined") {
+      if (mode === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  }, [theme, mode, autoApply]);
+  const generateTheme = useCallback(
+    async (params) => {
+      abortRef.current?.abort();
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await client.generateTheme(params);
+        const data = response.data;
+        setTheme(data);
+        setIsReady(true);
+        if (autoApplyRef.current) {
+          applyThemeCSSVariables(data, modeRef.current);
+        }
+        if (persistRef.current) {
+          const key = buildCacheKey(params);
+          saveThemeToCache(key, data);
+          saveCurrentParams(params);
+        }
+        onThemeChangeRef.current?.(data);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        onErrorRef.current?.(error2);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client]
+  );
+  const clearTheme = useCallback(() => {
+    setTheme(null);
+    setIsReady(false);
+    setError(null);
+    if (autoApplyRef.current) removeThemeCSSVariables();
+    if (persistRef.current) clearAll();
+  }, []);
+  useEffect(() => {
+    if (!primaryColor) return;
+    const params = {
+      theme: primaryColor,
+      ...themeParams
+    };
+    const cacheKey = buildCacheKey(params);
+    const cached = persist ? loadThemeFromCache(cacheKey) : null;
+    if (cached) {
+      setTheme(cached);
+      setIsReady(true);
+      if (autoApply) applyThemeCSSVariables(cached, mode);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      client.generateTheme(params).then((response) => {
+        if (controller.signal.aborted) return;
+        const data = response.data;
+        const cachedLight = JSON.stringify(cached.colors.light);
+        const freshLight = JSON.stringify(data.colors.light);
+        if (cachedLight !== freshLight) {
+          setTheme(data);
+          if (autoApply) applyThemeCSSVariables(data, modeRef.current);
+          saveThemeToCache(cacheKey, data);
+          onThemeChangeRef.current?.(data);
+        }
+      }).catch(() => {
+      });
+    } else {
+      generateTheme(params);
+    }
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+  const themeDataValue = useMemo(() => ({ theme, mode, isReady }), [theme, mode, isReady]);
+  const themeActionsValue = useMemo(
+    () => ({ generateTheme, setMode, clearTheme, isLoading, error, client }),
+    [generateTheme, setMode, clearTheme, isLoading, error, client]
+  );
+  return React.createElement(
+    ThemeDataContext.Provider,
+    { value: themeDataValue },
+    React.createElement(ThemeActionsContext.Provider, { value: themeActionsValue }, children)
+  );
+}
+
+// src/components/DhemeScript.tsx
+import React2 from "react";
+
+// src/utils/scriptPayload.ts
+function getBlockingScriptPayload(defaultMode) {
+  return `(function(){try{var p=localStorage.getItem('dheme-params');if(!p)return;var params=JSON.parse(p);var n={t:(params.theme||'').toLowerCase().replace('#',''),s:(params.secondaryColor||'').toLowerCase().replace('#',''),r:params.radius!=null?params.radius:0.5,sa:params.saturationAdjust||0,la:params.lightnessAdjust||0,ca:params.contrastAdjust||0,ci:!!params.cardIsColored,bi:params.backgroundIsColored!=null?params.backgroundIsColored:true};var key='dheme-cache:'+JSON.stringify(n);var c=localStorage.getItem(key);if(!c)return;var theme=JSON.parse(c);var mode=localStorage.getItem('dheme-mode')||'${defaultMode}';var colors=theme.colors[mode];if(!colors)return;var d=document.documentElement.style;var m={background:'--background',foreground:'--foreground',card:'--card',cardForeground:'--card-foreground',popover:'--popover',popoverForeground:'--popover-foreground',primary:'--primary',primaryForeground:'--primary-foreground',secondary:'--secondary',secondaryForeground:'--secondary-foreground',muted:'--muted',mutedForeground:'--muted-foreground',accent:'--accent',accentForeground:'--accent-foreground',destructive:'--destructive',destructiveForeground:'--destructive-foreground',border:'--border',input:'--input',ring:'--ring'};for(var k in m){if(colors[k]){var v=colors[k];d.setProperty(m[k],v.h+' '+v.s+'% '+v.l+'%')}}if(theme.radius!=null)d.setProperty('--radius',theme.radius+'rem');if(mode==='dark')document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(e){}})()`;
+}
+function getNextBlockingScriptPayload(defaultMode) {
+  return `(function(){try{var m=document.cookie.match(/dheme-mode=(\\w+)/);var mode=m?m[1]:null;if(!mode){mode=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'${defaultMode}'}if(mode==='dark'){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}}catch(e){}})()`;
+}
+
+// src/components/DhemeScript.tsx
+function DhemeScript({
+  defaultMode = "light",
+  nonce
+}) {
+  const scriptContent = getBlockingScriptPayload(defaultMode);
+  return React2.createElement("script", {
+    nonce,
+    dangerouslySetInnerHTML: { __html: scriptContent }
+  });
+}
+
+// src/hooks/useTheme.ts
+import { useContext } from "react";
+function useTheme() {
+  const context = useContext(ThemeDataContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a <DhemeProvider>");
+  }
+  return context;
+}
+
+// src/hooks/useThemeActions.ts
+import { useContext as useContext2 } from "react";
+function useThemeActions() {
+  const context = useContext2(ThemeActionsContext);
+  if (!context) {
+    throw new Error("useThemeActions must be used within a <DhemeProvider>");
+  }
+  return context;
+}
+
+// src/hooks/useGenerateTheme.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+function useGenerateTheme() {
+  const { generateTheme: generate } = useThemeActions();
+  const [isGenerating, setIsGenerating] = useState2(false);
+  const [error, setError] = useState2(null);
+  const generateTheme = useCallback2(
+    async (params) => {
+      setIsGenerating(true);
+      setError(null);
+      try {
+        await generate(params);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      } finally {
+        setIsGenerating(false);
+      }
+    },
+    [generate]
+  );
+  return { generateTheme, isGenerating, error };
+}
+
+// src/hooks/useDhemeClient.ts
+function useDhemeClient() {
+  const { client } = useThemeActions();
+  return client;
+}
+export {
+  DhemeProvider,
+  DhemeScript,
+  ThemeActionsContext,
+  ThemeDataContext,
+  applyThemeCSSVariables,
+  buildCacheKey,
+  getBlockingScriptPayload,
+  getNextBlockingScriptPayload,
+  removeThemeCSSVariables,
+  themeToCSS,
+  themeToCSSBothModes,
+  useDhemeClient,
+  useGenerateTheme,
+  useTheme,
+  useThemeActions
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@dheme/react",
+  "version": "2.0.0",
+  "description": "React bindings for Dheme SDK with zero-FOUC theme application",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external react-dom --external @dheme/sdk --tsconfig tsconfig.build.json",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external @dheme/sdk",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "dheme",
+    "theme",
+    "react",
+    "hooks",
+    "shadcn",
+    "tailwind",
+    "fouc",
+    "css-variables"
+  ],
+  "author": "Dheme Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dheme/sdk"
+  },
+  "homepage": "https://dheme.com",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@dheme/sdk": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@testing-library/react": "^14.1.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.0",
+    "vitest": "^1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}