create-secra 0.1.7 → 1.0.1

package/antd-adapter-template/packages/sdk/src/theme/index.ts

@@ -1,466 +0,0 @@
-import { useConfig, useTheme, type ThemeConfig, type ThemeContextValue } from '@vlian/framework/core';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ConfigProviderProps } from 'antd';
-
-export type ThemeMode = NonNullable<ThemeConfig['mode']>;
-
-type ResolvedThemeMode = Exclude<ThemeMode, 'system'>;
-
-type CssThemeTokenName =
-  | 'background'
-  | 'foreground'
-  | 'card'
-  | 'card-foreground'
-  | 'popover'
-  | 'popover-foreground'
-  | 'primary'
-  | 'primary-foreground'
-  | 'secondary'
-  | 'secondary-foreground'
-  | 'muted'
-  | 'muted-foreground'
-  | 'accent'
-  | 'accent-foreground'
-  | 'destructive'
-  | 'destructive-foreground'
-  | 'border'
-  | 'input'
-  | 'ring';
-
-type CssThemeTokenMap = Partial<Record<CssThemeTokenName, string>>;
-
-type CssThemeConfig = Partial<Record<ResolvedThemeMode, CssThemeTokenMap>>;
-
-const MODE_CYCLE: readonly ThemeMode[] = ['light', 'dark', 'system'] as const;
-
-const DEFAULT_THEME_TOKENS: Record<ResolvedThemeMode, Record<CssThemeTokenName, string>> = {
-  light: {
-    background: '0 0% 100%',
-    foreground: '222.2 84% 4.9%',
-    card: '0 0% 100%',
-    'card-foreground': '222.2 84% 4.9%',
-    popover: '0 0% 100%',
-    'popover-foreground': '222.2 84% 4.9%',
-    primary: '221.2 83.2% 53.3%',
-    'primary-foreground': '210 40% 98%',
-    secondary: '210 40% 96.1%',
-    'secondary-foreground': '222.2 47.4% 11.2%',
-    muted: '210 40% 96.1%',
-    'muted-foreground': '215.4 16.3% 46.9%',
-    accent: '210 40% 96.1%',
-    'accent-foreground': '222.2 47.4% 11.2%',
-    destructive: '0 84.2% 60.2%',
-    'destructive-foreground': '210 40% 98%',
-    border: '214.3 31.8% 91.4%',
-    input: '214.3 31.8% 91.4%',
-    ring: '221.2 83.2% 53.3%',
-  },
-  dark: {
-    background: '222.2 84% 4.9%',
-    foreground: '210 40% 98%',
-    card: '222.2 84% 4.9%',
-    'card-foreground': '210 40% 98%',
-    popover: '222.2 84% 4.9%',
-    'popover-foreground': '210 40% 98%',
-    primary: '217.2 91.2% 59.8%',
-    'primary-foreground': '222.2 47.4% 11.2%',
-    secondary: '217.2 32.6% 17.5%',
-    'secondary-foreground': '210 40% 98%',
-    muted: '217.2 32.6% 17.5%',
-    'muted-foreground': '215 20.2% 65.1%',
-    accent: '217.2 32.6% 17.5%',
-    'accent-foreground': '210 40% 98%',
-    destructive: '0 62.8% 30.6%',
-    'destructive-foreground': '210 40% 98%',
-    border: '217.2 32.6% 17.5%',
-    input: '217.2 32.6% 17.5%',
-    ring: '224.3 76.3% 48%',
-  },
-};
-
-const normalizeMode = (mode: ThemeConfig['mode']): ThemeMode => {
-  if (mode === 'light' || mode === 'dark' || mode === 'system') {
-    return mode;
-  }
-  return 'light';
-};
-
-const normalizeHexColor = (value: string): string | null => {
-  const hex = value.trim().replace(/^#/, '');
-  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(hex)) {
-    return null;
-  }
-  if (hex.length === 3) {
-    return `#${hex
-      .split('')
-      .map((char) => `${char}${char}`)
-      .join('')}`;
-  }
-  return `#${hex}`;
-};
-
-const hexToHslTriplet = (hexColor: string): string | null => {
-  const normalizedHex = normalizeHexColor(hexColor);
-  if (!normalizedHex) {
-    return null;
-  }
-
-  const hex = normalizedHex.slice(1);
-  const r = parseInt(hex.slice(0, 2), 16) / 255;
-  const g = parseInt(hex.slice(2, 4), 16) / 255;
-  const b = parseInt(hex.slice(4, 6), 16) / 255;
-
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const delta = max - min;
-
-  let h = 0;
-  const l = (max + min) / 2;
-  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-
-  if (delta !== 0) {
-    if (max === r) {
-      h = ((g - b) / delta) % 6;
-    } else if (max === g) {
-      h = (b - r) / delta + 2;
-    } else {
-      h = (r - g) / delta + 4;
-    }
-  }
-
-  const hue = Math.round((h * 60 + 360) % 360);
-  const saturation = Number((s * 100).toFixed(1));
-  const lightness = Number((l * 100).toFixed(1));
-  return `${hue} ${saturation}% ${lightness}%`;
-};
-
-const readThemeTokenConfig = (custom: ThemeConfig['custom']): CssThemeConfig => {
-  const source = (custom as { tokens?: CssThemeConfig } | undefined)?.tokens;
-  return source ?? {};
-};
-
-const hasTokenDiff = (current: CssThemeTokenMap | undefined, next: CssThemeTokenMap): boolean => {
-  for (const [key, value] of Object.entries(next)) {
-    if (current?.[key as CssThemeTokenName] !== value) {
-      return true;
-    }
-  }
-  return false;
-};
-
-const getSystemDark = (): boolean => {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-  return window.matchMedia('(prefers-color-scheme: dark)').matches;
-};
-
-const toHslColor = (triplet: string): string => `hsl(${triplet})`;
-
-export interface ThemeSwitchContextValue extends ThemeContextValue {
-  mode: ThemeMode;
-  resolvedMode: ResolvedThemeMode;
-  setThemeMode: (mode: ThemeMode) => void;
-  toggleThemeMode: () => void;
-  cycleThemeMode: () => void;
-}
-
-export interface UnifiedThemeSwitchContextValue extends ThemeSwitchContextValue {
-  setAntdTheme: (nextTheme: NonNullable<ConfigProviderProps['theme']>) => void;
-  setThemeTokens: (mode: ResolvedThemeMode, tokens: CssThemeTokenMap) => void;
-  themeTokens: Record<CssThemeTokenName, string>;
-}
-
-export const useThemeSwitch = (): UnifiedThemeSwitchContextValue => {
-  const themeContext = useTheme();
-  const configContext = useConfig();
-  const mode = normalizeMode(themeContext.theme.mode);
-  const [isSystemDark, setIsSystemDark] = useState<boolean>(getSystemDark);
-  const { setTheme } = themeContext;
-  const { setAntdConfig, antdConfig } = configContext;
-  const antdConfigRef = useRef(antdConfig);
-  const resolvedMode: ResolvedThemeMode = mode === 'system' ? (isSystemDark ? 'dark' : 'light') : mode;
-
-  useEffect(() => {
-    antdConfigRef.current = antdConfig;
-  }, [antdConfig]);
-
-  const setThemeMode = useCallback(
-    (nextMode: ThemeMode) => {
-      setTheme((prev) => {
-        const previous = prev ?? {};
-        if (previous.mode === nextMode) {
-          return previous;
-        }
-        return { ...previous, mode: nextMode };
-      });
-    },
-    [setTheme],
-  );
-
-  const toggleThemeMode = useCallback(() => {
-    const nextMode: ThemeMode = mode === 'dark' ? 'light' : 'dark';
-    setThemeMode(nextMode);
-  }, [mode, setThemeMode]);
-
-  const cycleThemeMode = useCallback(() => {
-    const index = MODE_CYCLE.indexOf(mode);
-    const nextMode = MODE_CYCLE[(index + 1) % MODE_CYCLE.length];
-    setThemeMode(nextMode);
-  }, [mode, setThemeMode]);
-
-  const setAntdTheme = useCallback(
-    (nextTheme: NonNullable<ConfigProviderProps['theme']>) => {
-      const currentAntdConfig = antdConfigRef.current;
-      const currentTheme = (currentAntdConfig as ConfigProviderProps | undefined)?.theme;
-      setAntdConfig({
-        ...(currentAntdConfig ?? {}),
-        theme: {
-          ...(currentTheme ?? {}),
-          ...nextTheme,
-          token: {
-            ...(currentTheme?.token ?? {}),
-            ...(nextTheme.token ?? {}),
-          },
-        },
-      });
-    },
-    [setAntdConfig],
-  );
-
-  const setThemeTokens = useCallback(
-    (targetMode: ResolvedThemeMode, tokens: CssThemeTokenMap) => {
-      setTheme((prev) => {
-        const previous = prev ?? {};
-        const themeTokenConfig = readThemeTokenConfig(previous.custom);
-        const currentTokens = themeTokenConfig[targetMode];
-        if (!hasTokenDiff(currentTokens, tokens)) {
-          return previous;
-        }
-        return {
-          ...previous,
-          custom: {
-            ...(previous.custom ?? {}),
-            tokens: {
-              ...themeTokenConfig,
-              [targetMode]: {
-                ...(themeTokenConfig[targetMode] ?? {}),
-                ...tokens,
-              },
-            },
-          },
-        };
-      });
-    },
-    [setTheme],
-  );
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsSystemDark(event.matches);
-    };
-    setIsSystemDark(mediaQuery.matches);
-    if (typeof mediaQuery.addEventListener === 'function') {
-      mediaQuery.addEventListener('change', handleChange);
-      return () => {
-        mediaQuery.removeEventListener('change', handleChange);
-      };
-    }
-
-    mediaQuery.addListener(handleChange);
-    return () => {
-      mediaQuery.removeListener(handleChange);
-    };
-  }, []);
-
-  const effectiveThemeTokens = useMemo(() => {
-    const fromCustom = readThemeTokenConfig(themeContext.theme.custom)[resolvedMode] ?? {};
-    const primaryFromTheme = themeContext.theme.primaryColor ? hexToHslTriplet(themeContext.theme.primaryColor) : null;
-    const base = DEFAULT_THEME_TOKENS[resolvedMode];
-    const primary = fromCustom.primary ?? primaryFromTheme ?? base.primary;
-    return {
-      ...base,
-      ...fromCustom,
-      primary,
-      ring: fromCustom.ring ?? primary,
-    };
-  }, [resolvedMode, themeContext.theme.custom, themeContext.theme.primaryColor]);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') {
-      return;
-    }
-    const root = document.documentElement;
-    const isDark = resolvedMode === 'dark';
-    root.classList.toggle('dark', isDark);
-    root.style.colorScheme = isDark ? 'dark' : 'light';
-    root.dataset.theme = resolvedMode;
-  }, [resolvedMode]);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') {
-      return;
-    }
-    const root = document.documentElement;
-    for (const [tokenName, tokenValue] of Object.entries(effectiveThemeTokens)) {
-      root.style.setProperty(`--${tokenName}`, tokenValue);
-    }
-  }, [effectiveThemeTokens]);
-
-  return {
-    ...themeContext,
-    mode,
-    resolvedMode,
-    setThemeMode,
-    toggleThemeMode,
-    cycleThemeMode,
-    setAntdTheme,
-    setThemeTokens,
-    themeTokens: effectiveThemeTokens,
-  };
-};
-
-export interface UnifiedThemePreset {
-  key: string;
-  label: string;
-  primaryColor: string;
-  tokens?: Record<ResolvedThemeMode, CssThemeTokenMap>;
-}
-
-export interface UseUnifiedThemePresetOptions {
-  defaultPresetKey?: string;
-  borderRadius?: number;
-}
-
-export interface UnifiedThemePresetContextValue extends UnifiedThemeSwitchContextValue {
-  presetKey: string;
-  setPresetKey: (presetKey: string) => void;
-  activePreset: UnifiedThemePreset | null;
-  applyPreset: (presetKey: string) => void;
-  setUnifiedPrimaryColor: (primaryColor: string) => void;
-}
-
-export const useUnifiedThemePreset = (
-  presets: readonly UnifiedThemePreset[],
-  options?: UseUnifiedThemePresetOptions,
-): UnifiedThemePresetContextValue => {
-  const themeSwitch = useThemeSwitch();
-  const { setTheme, setThemeTokens, setAntdTheme, themeTokens, theme } = themeSwitch;
-  const { defaultPresetKey, borderRadius = 8 } = options ?? {};
-
-  const fallbackPreset = presets[0] ?? null;
-  const [presetKey, setPresetKey] = useState<string>(defaultPresetKey ?? fallbackPreset?.key ?? '');
-  const antdSyncSignatureRef = useRef<string>('');
-
-  const activePreset = useMemo(() => {
-    if (presets.length === 0) {
-      return null;
-    }
-    return presets.find((item) => item.key === presetKey) ?? fallbackPreset;
-  }, [fallbackPreset, presetKey, presets]);
-
-  useEffect(() => {
-    try {
-      if (!activePreset) {
-        return;
-      }
-      const expectedPrimary = activePreset.primaryColor;
-      const shouldSyncPrimary = theme.primaryColor !== expectedPrimary;
-      if (shouldSyncPrimary) {
-        setTheme((prev) => {
-          const previous = prev ?? {};
-          if (previous.primaryColor === expectedPrimary) {
-            return previous;
-          }
-          return { ...previous, primaryColor: expectedPrimary };
-        });
-      }
-      if (activePreset.tokens?.light) {
-        setThemeTokens('light', activePreset.tokens.light);
-      }
-      if (activePreset.tokens?.dark) {
-        setThemeTokens('dark', activePreset.tokens.dark);
-      }
-    } catch (error) {
-      console.error('[sdk/useUnifiedThemePreset] apply preset failed', error);
-    }
-  }, [activePreset, setTheme, setThemeTokens, theme.primaryColor]);
-
-  useEffect(() => {
-    try {
-      const signature = [
-        theme.primaryColor ?? '',
-        themeTokens.background,
-        themeTokens.card,
-        themeTokens.foreground,
-        themeTokens.border,
-        themeTokens.accent,
-        String(borderRadius),
-      ].join('|');
-      if (antdSyncSignatureRef.current === signature) {
-        return;
-      }
-      antdSyncSignatureRef.current = signature;
-      setAntdTheme({
-        token: {
-          colorPrimary: theme.primaryColor,
-          colorInfo: theme.primaryColor,
-          colorBgBase: toHslColor(themeTokens.background),
-          colorBgContainer: toHslColor(themeTokens.card),
-          colorTextBase: toHslColor(themeTokens.foreground),
-          colorBorder: toHslColor(themeTokens.border),
-          colorFillSecondary: toHslColor(themeTokens.accent),
-          borderRadius,
-        },
-      });
-    } catch (error) {
-      console.error('[sdk/useUnifiedThemePreset] sync antd theme failed', error);
-    }
-  }, [
-    borderRadius,
-    setAntdTheme,
-    theme.primaryColor,
-    themeTokens.accent,
-    themeTokens.background,
-    themeTokens.border,
-    themeTokens.card,
-    themeTokens.foreground,
-  ]);
-
-  const applyPreset = useCallback((nextPresetKey: string) => {
-    setPresetKey(nextPresetKey);
-  }, []);
-
-  const setUnifiedPrimaryColor = useCallback(
-    (primaryColor: string) => {
-      try {
-        setTheme((prev) => {
-          const previous = prev ?? {};
-          return { ...previous, primaryColor };
-        });
-        const hsl = hexToHslTriplet(primaryColor);
-        if (!hsl) {
-          return;
-        }
-        setThemeTokens('light', { primary: hsl, ring: hsl });
-        setThemeTokens('dark', { primary: hsl, ring: hsl });
-      } catch (error) {
-        console.error('[sdk/useUnifiedThemePreset] set primary failed', error);
-      }
-    },
-    [setTheme, setThemeTokens],
-  );
-
-  return {
-    ...themeSwitch,
-    presetKey,
-    setPresetKey,
-    activePreset,
-    applyPreset,
-    setUnifiedPrimaryColor,
-  };
-};

package/antd-adapter-template/packages/sdk/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM"],
-    "jsx": "react-jsx",
-    "moduleResolution": "bundler",
-    "types": ["react", "react-dom"],
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "outDir": "dist"
-  },
-  "include": ["src"]
-}

package/antd-adapter-template/pnpm-workspace.yaml

@@ -1,3 +0,0 @@
-packages:
-  - "apps/*"
-  - "packages/*"

package/antd-adapter-template/turbo.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://turbo.build/schema.json",
-  "tasks": {
-    "build": {
-      "dependsOn": ["^build"],
-      "outputs": ["dist/**", "build/**"]
-    },
-    "dev": {
-      "cache": false,
-      "persistent": true
-    },
-    "lint": {},
-    "test": {
-      "dependsOn": ["^test"]
-    }
-  }
-}