taro-uno-ui 1.0.0 → 1.0.2

package/src/providers/AppProvider.test.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { vi } from 'vitest';
-import { AppProvider, useAppContext } from './AppProvider';
-
-vi.mock('../platform', () => ({
-  getPlatformInfo: () => ({
-    platform: 'h5',
-    isMiniProgram: false,
-    isH5: true,
-    isRN: false,
-  }),
-  getPlatformName: () => 'H5',
-}));
-
-const TestHarness: React.FC = () => {
-  const { theme, platform, isReady } = useAppContext();
-
-  if (!isReady) {
-    return <span data-testid="loading">loading</span>;
-  }
-
-  return (
-    <div>
-      <span data-testid="platform">{platform.name}</span>
-      <button data-testid="theme" onClick={theme.toggleTheme}>
-        {theme.isDark ? 'To light' : 'To dark'}
-      </button>
-    </div>
-  );
-};
-
-const renderProvider = () =>
-  render(
-    <AppProvider>
-      <TestHarness />
-    </AppProvider>
-  );
-
-describe('AppProvider', () => {
-  it('initialises and exposes platform info', async () => {
-    renderProvider();
-
-    await waitFor(() => expect(screen.queryByTestId('loading')).not.toBeInTheDocument());
-
-    expect(screen.getByTestId('platform').textContent).toBe('H5');
-  });
-
-  it('toggles theme mode via context', async () => {
-    renderProvider();
-
-    const themeButton = await screen.findByTestId('theme');
-
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
-
-    await userEvent.click(themeButton);
-
-    await waitFor(() => {
-      expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
-    });
-  });
-});

package/src/providers/AppProvider.tsx

@@ -1,155 +0,0 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
-import { ThemeProvider } from '../theme/ThemeProvider';
-import type { ThemeConfig, ThemeMode } from '../theme/types';
-import { useTheme } from '../theme/ThemeProvider';
-import { defaultTheme } from '../theme/defaults';
-import type { Platform, PlatformInfo } from '../types';
-import { resolvePlatform } from '../utils/environment';
-
-interface AppProviderProps {
-  children: ReactNode;
-  /** 默认主题配置 */
-  theme?: ThemeConfig;
-  /** 默认主题模式 */
-  themeMode?: ThemeMode;
-  /** 持久化键名 */
-  themePersistKey?: string;
-  /** 是否跟随系统主题 */
-  followSystemTheme?: boolean;
-  /** 初始化完成回调 */
-  onReady?: () => void;
-}
-
-interface AppPlatformState {
-  id: Platform | 'unknown';
-  name: string;
-  isMiniProgram: boolean;
-  isH5: boolean;
-  isRN: boolean;
-  info?: PlatformInfo;
-}
-
-interface AppContextValue {
-  platform: AppPlatformState;
-  theme: ReturnType<typeof useTheme>;
-  isReady: boolean;
-}
-
-const PLATFORM_NAME_MAP: Record<string, string> = {
-  weapp: 'WeChat Mini Program',
-  alipay: 'Alipay Mini Program',
-  swan: 'Baidu Mini Program',
-  tt: 'ByteDance Mini Program',
-  qq: 'QQ Mini Program',
-  jd: 'JD Mini Program',
-  h5: 'H5',
-  rn: 'React Native',
-  unknown: 'Unknown',
-};
-
-const MINI_PROGRAM_PLATFORMS = new Set<Platform>(['weapp', 'alipay', 'swan', 'tt', 'qq', 'jd']);
-
-const createInitialPlatformState = (): AppPlatformState => {
-  const platform = resolvePlatform();
-  const id = platform === 'unknown' ? 'unknown' : platform;
-  return {
-    id,
-    name: PLATFORM_NAME_MAP[id] || PLATFORM_NAME_MAP['unknown'] || 'Unknown',
-    isMiniProgram: MINI_PROGRAM_PLATFORMS.has(id as Platform),
-    isH5: id === 'h5',
-    isRN: id === 'rn',
-  };
-};
-
-const AppContext = createContext<AppContextValue | undefined>(undefined);
-
-interface AppContextBridgeProps {
-  children: ReactNode;
-  onReady?: () => void;
-}
-
-const AppContextBridge: React.FC<AppContextBridgeProps> = ({ children, onReady }) => {
-  const theme = useTheme();
-  const [platform, setPlatform] = useState<AppPlatformState>(createInitialPlatformState());
-  const [isReady, setIsReady] = useState<boolean>(false);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const loadPlatformInfo = async () => {
-      try {
-        const module = await import('../platform');
-        const info = module.getPlatformInfo ? module.getPlatformInfo() : undefined;
-        if (info && !cancelled) {
-          setPlatform({
-            id: info.platform,
-            name:
-              module.getPlatformName?.() ||
-              PLATFORM_NAME_MAP[info.platform] ||
-              PLATFORM_NAME_MAP['unknown'] ||
-              'Unknown',
-            isMiniProgram: info.isMiniProgram,
-            isH5: info.isH5,
-            isRN: info.isRN,
-            info,
-          });
-        }
-      } catch (error) {
-        console.warn('[AppProvider] platform module unavailable, falling back to env detection:', error);
-      }
-    };
-
-    void loadPlatformInfo();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    setIsReady(true);
-    onReady?.();
-  }, [onReady]);
-
-  const contextValue = useMemo<AppContextValue>(
-    () => ({
-      platform,
-      theme,
-      isReady,
-    }),
-    [platform, theme, isReady],
-  );
-
-  return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>;
-};
-
-export const AppProvider: React.FC<AppProviderProps> = ({
-  children,
-  theme,
-  themeMode = 'light',
-  themePersistKey = 'taro-uno-theme',
-  followSystemTheme = true,
-  onReady,
-}) => {
-  return (
-    <ThemeProvider
-      defaultTheme={theme || defaultTheme}
-      defaultMode={themeMode}
-      persistKey={themePersistKey}
-      followSystem={followSystemTheme}
-    >
-      <AppContextBridge onReady={onReady || (() => {})}>{children}</AppContextBridge>
-    </ThemeProvider>
-  );
-};
-
-export const useAppContext = (): AppContextValue => {
-  const context = useContext(AppContext);
-  if (!context) {
-    throw new Error('useAppContext must be used within an AppProvider');
-  }
-  return context;
-};
-
-export default AppProvider;

package/src/providers/index.ts

@@ -1 +0,0 @@
-export { AppProvider, useAppContext } from './AppProvider';

package/src/theme/ThemeProvider.tsx

@@ -1,279 +0,0 @@
-import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-import { ThemeConfig, ThemeMode } from './types';
-import { defaultTheme, darkTheme } from './defaults';
-import { generateStyles } from './styles';
-import { DesignSystemUtils } from './design-system';
-import { isBrowserEnvironment, safeLocalStorage, safeMatchMedia } from '../utils/environment';
-
-interface ThemeContextType {
-  theme: ThemeConfig;
-  themeMode: ThemeMode;
-  setThemeMode: (mode: ThemeMode) => void;
-  toggleTheme: () => void;
-  isDark: boolean;
-  setCustomTheme: (theme: Partial<ThemeConfig>) => void;
-  resetTheme: () => void;
-  exportTheme: () => string;
-  importTheme: (themeData: string) => boolean;
-  // 新增工具方法
-  getThemeValue: (path: string) => any;
-  generateThemeCSS: () => string;
-  isSystemDark: boolean;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-interface ThemeProviderProps {
-  children: ReactNode;
-  defaultTheme?: ThemeConfig;
-  defaultMode?: ThemeMode;
-  persistKey?: string;
-  followSystem?: boolean;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
-  children,
-  defaultTheme: initialTheme = defaultTheme,
-  defaultMode = 'light',
-  persistKey = 'taro-uno-theme',
-  followSystem = true,
-}) => {
-  const [themeMode, setThemeMode] = useState<ThemeMode>(defaultMode as ThemeMode);
-  const [customTheme, setCustomTheme] = useState<Partial<ThemeConfig> | null>(null);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isSystemDark, setIsSystemDark] = useState(false);
-
-  // 计算当前主题
-  const theme: ThemeConfig = React.useMemo(() => {
-    const baseTheme = themeMode === 'dark' ? darkTheme : initialTheme;
-    return customTheme ? { ...baseTheme, ...customTheme } : baseTheme;
-  }, [themeMode, customTheme, initialTheme]);
-
-  const isDark = themeMode === 'dark';
-
-  // 初始化主题（从本地存储读取）
-  useEffect(() => {
-    if (!isBrowserEnvironment()) {
-      setIsInitialized(true);
-      return;
-    }
-
-    try {
-      const savedTheme = safeLocalStorage.getItem(persistKey);
-      if (savedTheme) {
-        const parsed = JSON.parse(savedTheme);
-        setThemeMode((parsed.mode || defaultMode) as ThemeMode);
-        if (parsed.custom) {
-          setCustomTheme(parsed.custom);
-        }
-      } else if (followSystem) {
-        const mediaQuery = safeMatchMedia('(prefers-color-scheme: dark)');
-        const prefersDark = mediaQuery?.matches ?? false;
-        setIsSystemDark(prefersDark);
-        if (prefersDark && defaultMode === 'auto') {
-          setThemeMode('dark');
-        }
-      }
-    } catch (error) {
-      console.warn('Failed to load theme from storage:', error);
-    }
-
-    setIsInitialized(true);
-  }, [defaultMode, persistKey, followSystem]);
-
-  // 保存主题到本地存储
-  useEffect(() => {
-    if (!isInitialized || !isBrowserEnvironment()) {
-      return;
-    }
-
-    try {
-      const themeData = {
-        mode: themeMode,
-        custom: customTheme,
-      };
-      safeLocalStorage.setItem(persistKey, JSON.stringify(themeData));
-    } catch (error) {
-      console.warn('Failed to save theme to storage:', error);
-    }
-  }, [themeMode, customTheme, isInitialized, persistKey]);
-
-  // 应用主题到DOM
-  useEffect(() => {
-    if (!isBrowserEnvironment()) {
-      return;
-    }
-
-    const root = document.documentElement;
-    root.setAttribute('data-theme', themeMode);
-    root.classList.remove('light-theme', 'dark-theme');
-    root.classList.add(`${themeMode}-theme`);
-
-    const cssVariables = generateStyles(theme);
-    let styleElement = document.getElementById('theme-variables');
-
-    if (!styleElement) {
-      styleElement = document.createElement('style');
-      styleElement.id = 'theme-variables';
-      document.head.appendChild(styleElement);
-    }
-
-    styleElement.textContent = cssVariables;
-  }, [theme, themeMode]);
-
-  // 监听系统主题变化
-  useEffect(() => {
-    if (!followSystem) {
-      return undefined;
-    }
-
-    const mediaQuery = safeMatchMedia('(prefers-color-scheme: dark)');
-    if (!mediaQuery) {
-      return undefined;
-    }
-
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsSystemDark(event.matches);
-      if (defaultMode === 'auto') {
-        setThemeMode(event.matches ? 'dark' : 'light');
-      }
-    };
-
-    setIsSystemDark(mediaQuery.matches);
-    mediaQuery.addEventListener?.('change', handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener?.('change', handleChange);
-    };
-  }, [defaultMode, followSystem]);
-
-  // 切换主题
-  const toggleTheme = () => {
-    setThemeMode((prev) => (prev === 'light' ? 'dark' : 'light'));
-  };
-
-  // 设置自定义主题
-  const setCustomThemeData = (themeData: Partial<ThemeConfig>) => {
-    setCustomTheme((prev) => ({
-      ...prev,
-      ...themeData,
-    }));
-  };
-
-  // 重置主题
-  const resetTheme = () => {
-    setCustomTheme(null);
-    setThemeMode(defaultMode);
-  };
-
-  // 导出主题
-  const exportTheme = (): string => {
-    const themeData = {
-      mode: themeMode,
-      custom: customTheme,
-      timestamp: new Date().toISOString(),
-      version: '1.0.0',
-    };
-    return JSON.stringify(themeData, null, 2);
-  };
-
-  // 导入主题
-  const importTheme = (themeData: string): boolean => {
-    try {
-      const parsed = JSON.parse(themeData);
-
-      // 验证主题数据格式
-      if (parsed.mode && ['light', 'dark', 'auto'].includes(parsed.mode)) {
-        setThemeMode(parsed.mode);
-      }
-
-      if (parsed.custom && typeof parsed.custom === 'object') {
-        setCustomTheme(parsed.custom);
-      }
-
-      return true;
-    } catch (error) {
-      console.error('Failed to import theme:', error);
-      return false;
-    }
-  };
-
-  // 获取主题值
-  const getThemeValue = (path: string): any => {
-    // 支持路径格式：'colors.primary'、'spacing.md'等
-    const keys = path.split('.');
-    let value: any = theme;
-
-    for (const key of keys) {
-      value = value?.[key];
-    }
-
-    return value;
-  };
-
-  // 生成主题CSS
-  const generateThemeCSS = (): string => {
-    return DesignSystemUtils.generateCSSVariables() + DesignSystemUtils.generateDarkThemeCSS();
-  };
-
-  const contextValue: ThemeContextType = {
-    theme,
-    themeMode,
-    setThemeMode,
-    toggleTheme,
-    isDark,
-    setCustomTheme: setCustomThemeData,
-    resetTheme,
-    exportTheme,
-    importTheme,
-    getThemeValue,
-    generateThemeCSS,
-    isSystemDark,
-  };
-
-  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
-};
-
-export const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};
-
-// 新增：主题工具Hook
-export const useThemeUtils = () => {
-  const { isDark, getThemeValue } = useTheme();
-
-  const getColor = (colorPath: string): string => {
-    return getThemeValue(`colors.${colorPath}`) || '#000000';
-  };
-
-  const getSpacing = (spacingKey: string): string => {
-    return getThemeValue(`spacing.${spacingKey}`) || '0';
-  };
-
-  const getFontSize = (fontKey: string): string => {
-    return getThemeValue(`typography.fontSize.${fontKey}`) || '16px';
-  };
-
-  const getBorderRadius = (radiusKey: string): string => {
-    return getThemeValue(`borderRadius.${radiusKey}`) || '0';
-  };
-
-  const getShadow = (shadowKey: string): string => {
-    return getThemeValue(`shadow.${shadowKey}`) || 'none';
-  };
-
-  return {
-    isDark,
-    getColor,
-    getSpacing,
-    getFontSize,
-    getBorderRadius,
-    getShadow,
-  };
-};
-
-export default ThemeProvider;

package/src/theme/ThemeProvider.types.ts

@@ -1,26 +0,0 @@
-// ThemeProvider types and exports (no JSX)
-import type { ThemeConfig, ThemeMode } from './types';
-import type { ReactNode } from 'react';
-
-export interface ThemeContextType {
-  theme: ThemeConfig;
-  themeMode: ThemeMode;
-  setThemeMode: (_mode: ThemeMode) => void;
-  toggleTheme: () => void;
-  isDark: boolean;
-  setCustomTheme: (_theme: Partial<ThemeConfig>) => void;
-  resetTheme: () => void;
-  exportTheme: () => string;
-  importTheme: (_themeData: string) => boolean;
-}
-
-export interface ThemeProviderProps {
-  children: ReactNode;
-  defaultTheme?: ThemeConfig;
-  defaultMode?: ThemeMode;
-  persistKey?: string;
-}
-
-// Type declarations for ThemeProvider and useTheme
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export declare const useTheme: () => ThemeContextType;