taro-uno-ui 1.0.1 → 1.0.2

package/src/components/basic/index.tsx

@@ -1,300 +0,0 @@
-/**
- * Taro-Uno 基础组件库
- * 提供最基础的 UI 组件，包括按钮、图标、文本和分割线
- */
-
-// 导入组件用于默认导出
-import { Button } from './Button';
-import { Icon } from './Icon';
-import { Text } from './Text';
-import { Divider } from './Divider';
-import { Typography } from './Typography';
-
-// 导出 Button 组件
-export { Button } from './Button';
-export type { ButtonProps, ButtonRef } from './Button/Button.types';
-export { buttonStyles } from './Button/Button.styles';
-
-// 导出 Icon 组件
-export { Icon } from './Icon';
-export type {
-  IconProps,
-  IconRef,
-  IconGroupProps,
-  IconUtils,
-  IconType,
-  IconSource,
-  IconSize,
-  IconColor,
-  IconRotation,
-  IconStatus,
-  IconTheme,
-  IconNativeProps,
-  IconSet,
-  IconLibraryConfig,
-} from './Icon/Icon.types';
-export { iconStyles } from './Icon/Icon.styles';
-
-// 导出 Text 组件
-export { Text } from './Text';
-export type {
-  TextProps,
-  TextRef,
-  TextUtils,
-  TextSize,
-  TextWeight,
-  TextAlign,
-  TextDecoration,
-  TextTransform,
-  TextOverflow,
-  TextDirection,
-  TextStyle,
-  TextVariant,
-  LetterSpacing,
-  LineHeight,
-  TextColor,
-  TextStatus,
-  TextType,
-  TextNativeProps,
-  TypewriterProps,
-  TextGradientProps,
-} from './Text/Text.types';
-export { textStyles } from './Text/Text.styles';
-
-// 导出 Divider 组件
-export { Divider } from './Divider';
-export type {
-  DividerProps,
-  DividerRef,
-  DividerGroupProps,
-  DividerUtils,
-  DividerOrientation,
-  DividerType,
-  DividerPosition,
-  DividerSize,
-  DividerColor,
-  DividerVariant,
-  DividerNativeProps,
-  VerticalDividerProps,
-  TextDividerProps,
-  AnimatedDividerProps,
-  DividerPreset,
-} from './Divider/Divider.types';
-
-// 导出 Typography 组件
-export { Typography } from './Typography';
-export type {
-  TypographyProps,
-  TypographyRef,
-  TypographySize,
-  TypographyColor,
-  TypographyWeight,
-  TypographyUtils,
-  TypographyNativeProps,
-  TitleProps,
-  ParagraphProps,
-  TypographyTextProps,
-  LinkProps,
-} from './Typography/Typography.types';
-export { calculateTypographyStyles, typographyStyles } from './Typography/Typography.styles';
-
-// 基础组件类型定义
-export interface BasicComponents {
-  Button: typeof Button;
-  Icon: typeof Icon;
-  Text: typeof Text;
-  Divider: typeof Divider;
-  Typography: typeof Typography;
-}
-
-// 基础组件工具类型
-export type BasicComponentProps =
-  | import('./Button/Button.types').ButtonProps
-  | import('./Icon/Icon.types').IconProps
-  | import('./Text/Text.types').TextProps
-  | import('./Divider/Divider.types').DividerProps
-  | import('./Typography/Typography.types').TypographyProps;
-
-export type BasicComponentRef =
-  | import('./Button/Button.types').ButtonRef
-  | import('./Icon/Icon.types').IconRef
-  | import('./Text/Text.types').TextRef
-  | import('./Divider/Divider.types').DividerRef
-  | import('./Typography/Typography.types').TypographyRef;
-
-// 基础组件工具函数
-export const BasicComponentsUtils = {
-  /**
-   * 判断是否为基础组件属性
-   */
-  isBasicComponentProps: (props: any): props is BasicComponentProps => {
-    return (
-      props && ('size' in props || 'color' in props || 'variant' in props || 'source' in props || 'children' in props)
-    );
-  },
-
-  /**
-   * 获取组件类型
-   */
-  getComponentType: (props: BasicComponentProps): string => {
-    if ('source' in props) return 'Icon';
-    if ('variant' in props && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span'].includes(props.variant as string))
-      return 'Typography';
-    if ('children' in props && typeof props.children === 'string') return 'Text';
-    if ('type' in props && ['solid', 'outline', 'ghost', 'text'].includes(props.type as string)) return 'Button';
-    return 'Divider';
-  },
-
-  /**
-   * 获取组件默认样式
-   */
-  getDefaultStyles: (componentType: string): React.CSSProperties => {
-    switch (componentType) {
-      case 'Button':
-        return {
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: '8px',
-          padding: '16px 24px',
-          fontSize: '16px',
-          fontWeight: '500',
-          border: '1px solid transparent',
-          cursor: 'pointer',
-          transition: 'all 0.2s ease-in-out',
-        };
-      case 'Icon':
-        return {
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '24px',
-          height: '24px',
-          fontSize: '24px',
-          color: 'currentColor',
-        };
-      case 'Text':
-        return {
-          display: 'inline',
-          fontSize: '16px',
-          lineHeight: '1.5',
-          color: 'inherit',
-          wordWrap: 'break-word',
-        };
-      case 'Divider':
-        return {
-          display: 'block',
-          width: '100%',
-          height: '1px',
-          backgroundColor: '#e5e7eb',
-          margin: '16px 0',
-        };
-      case 'Typography':
-        return {
-          display: 'block',
-          margin: 0,
-          padding: 0,
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-          lineHeight: 1.5,
-          color: '#1f2937',
-        };
-      default:
-        return {};
-    }
-  },
-
-  /**
-   * 组件尺寸映射
-   */
-  sizeMapping: {
-    Button: {
-      xs: { fontSize: 12, padding: '8px 16px', height: 32 },
-      sm: { fontSize: 14, padding: '12px 20px', height: 40 },
-      md: { fontSize: 16, padding: '16px 24px', height: 48 },
-      lg: { fontSize: 18, padding: '20px 32px', height: 56 },
-      xl: { fontSize: 20, padding: '24px 40px', height: 64 },
-    },
-    Icon: {
-      xs: 16,
-      sm: 20,
-      md: 24,
-      lg: 32,
-      xl: 40,
-    },
-    Text: {
-      xs: { fontSize: 12, lineHeight: 1.25 },
-      sm: { fontSize: 14, lineHeight: 1.375 },
-      md: { fontSize: 16, lineHeight: 1.5 },
-      lg: { fontSize: 18, lineHeight: 1.625 },
-      xl: { fontSize: 20, lineHeight: 1.75 },
-    },
-    Divider: {
-      xs: { height: 1, margin: 8 },
-      sm: { height: 1, margin: 12 },
-      md: { height: 1, margin: 16 },
-      lg: { height: 2, margin: 20 },
-      xl: { height: 2, margin: 24 },
-    },
-    Typography: {
-      xs: { fontSize: 12, lineHeight: 1.25 },
-      sm: { fontSize: 14, lineHeight: 1.375 },
-      md: { fontSize: 16, lineHeight: 1.5 },
-      lg: { fontSize: 18, lineHeight: 1.625 },
-      xl: { fontSize: 20, lineHeight: 1.75 },
-    },
-  },
-
-  /**
-   * 组件颜色映射
-   */
-  colorMapping: {
-    Button: {
-      primary: { background: '#0ea5e9', color: '#ffffff', border: '#0ea5e9' },
-      secondary: { background: '#6b7280', color: '#ffffff', border: '#6b7280' },
-      success: { background: '#22c55e', color: '#ffffff', border: '#22c55e' },
-      warning: { background: '#f59e0b', color: '#ffffff', border: '#f59e0b' },
-      error: { background: '#ef4444', color: '#ffffff', border: '#ef4444' },
-    },
-    Icon: {
-      primary: '#0ea5e9',
-      secondary: '#6b7280',
-      success: '#22c55e',
-      warning: '#f59e0b',
-      error: '#ef4444',
-    },
-    Text: {
-      primary: '#0ea5e9',
-      secondary: '#6b7280',
-      success: '#22c55e',
-      warning: '#f59e0b',
-      error: '#ef4444',
-      disabled: '#9ca3af',
-    },
-    Divider: {
-      primary: '#0ea5e9',
-      secondary: '#6b7280',
-      success: '#22c55e',
-      warning: '#f59e0b',
-      error: '#ef4444',
-      border: '#e5e7eb',
-    },
-    Typography: {
-      primary: '#0ea5e9',
-      secondary: '#6b7280',
-      success: '#22c55e',
-      warning: '#f59e0b',
-      error: '#ef4444',
-      disabled: '#9ca3af',
-      inherit: 'inherit',
-    },
-  },
-};
-
-// 默认导出所有基础组件
-export default {
-  Button,
-  Icon,
-  Text,
-  Divider,
-  Typography,
-} as BasicComponents;

package/src/components/common/ErrorBoundary.tsx

@@ -1,87 +0,0 @@
-import { Component, ErrorInfo, ReactNode } from 'react';
-import { View, Text, Button } from '@tarojs/components';
-import { logError } from '../../utils/errorLogger';
-
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-  onError?: (error: Error, errorInfo: ErrorInfo) => void;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-  errorInfo: ErrorInfo | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      hasError: false,
-      error: null,
-      errorInfo: null,
-    };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return {
-      hasError: true,
-      error,
-      errorInfo: null,
-    };
-  }
-
-  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.setState({
-      error,
-      errorInfo,
-    });
-
-    // 记录错误日志
-    logError(error, errorInfo);
-
-    // 调用自定义错误处理回调
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo);
-    }
-  }
-
-  handleReset = () => {
-    this.setState({
-      hasError: false,
-      error: null,
-      errorInfo: null,
-    });
-  };
-
-  override render() {
-    if (this.state.hasError) {
-      // 如果有自定义fallback，则使用它
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      // 默认错误UI
-      return (
-        <View className="error-boundary">
-          <Text className="error-boundary__title">出错了</Text>
-          <Text className="error-boundary__message">{this.state.error?.message || '应用遇到了一个错误'}</Text>
-          {import.meta.env.DEV && this.state.errorInfo && (
-            <View className="error-boundary__details">
-              <Text className="error-boundary__details-title">错误详情:</Text>
-              <Text className="error-boundary__details-text">{this.state.errorInfo.componentStack}</Text>
-            </View>
-          )}
-          <Button onClick={this.handleReset} className="error-boundary__reset">
-            重试
-          </Button>
-        </View>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

package/src/components/common/LazyComponent.tsx

@@ -1,247 +0,0 @@
-/**
- * 懒加载组件
- * 提供组件级别的懒加载和代码分割
- */
-
-import React, { Suspense, ComponentType, LazyExoticComponent, ReactNode } from 'react';
-import { View, Text, Button } from '@tarojs/components';
-import { ErrorBoundary } from './ErrorBoundary';
-import { Loading } from '../feedback/Loading';
-
-export interface LazyComponentProps {
-  /**
-   * 懒加载的组件
-   */
-  component: LazyExoticComponent<ComponentType<any>> | (() => Promise<ComponentType<any>>);
-
-  /**
-   * 组件属性
-   */
-  props?: Record<string, any>;
-
-  /**
-   * 加载状态显示
-   */
-  fallback?: ReactNode;
-
-  /**
-   * 错误状态显示
-   */
-  errorFallback?: ReactNode;
-
-  /**
-   * 预加载延迟（毫秒）
-   */
-  preloadDelay?: number;
-
-  /**
-   * 是否预加载
-   */
-  preload?: boolean;
-
-  /**
-   * 加载超时时间（毫秒）
-   */
-  timeout?: number;
-}
-
-export interface LazyComponentOptions {
-  /**
-   * 加载策略
-   */
-  strategy?: 'eager' | 'lazy' | 'prefetch';
-
-  /**
-   * 错误重试次数
-   */
-  retryCount?: number;
-
-  /**
-   * 重试延迟（毫秒）
-   */
-  retryDelay?: number;
-
-  /**
-   * 缓存配置
-   */
-  cache?: boolean;
-}
-
-// 组件缓存
-const componentCache = new Map<string, ComponentType<any>>();
-
-// 默认加载组件
-const DefaultFallback = () => (
-  <View className="flex items-center justify-center p-4">
-    <Loading type="spinner" size="lg" />
-  </View>
-);
-
-// 默认错误组件
-const DefaultErrorFallback = ({ error, reset }: { error: Error; reset: () => void }) => (
-  <View className="flex flex-col items-center justify-center p-4 text-center">
-    <Text className="text-red-500 mb-2">组件加载失败</Text>
-    <Text className="text-sm text-gray-600 mb-4">{error.message}</Text>
-    <Button onClick={reset} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-      重试
-    </Button>
-  </View>
-);
-
-/**
- * 创建懒加载组件
- */
-export function createLazyComponent<T extends ComponentType<any>>(
-  importFn: () => Promise<{ default: T }>,
-  options: LazyComponentOptions = {},
-): LazyExoticComponent<T> {
-  const { strategy = 'lazy', retryCount = 3, retryDelay = 1000, cache = true } = options;
-
-  const cacheKey = JSON.stringify(importFn.toString());
-
-  const loadComponent = async (): Promise<{ default: T }> => {
-    // 检查缓存
-    if (cache && componentCache.has(cacheKey)) {
-      return Promise.resolve({ default: componentCache.get(cacheKey)! as T });
-    }
-
-    let lastError: Error | null = null;
-    let attempts = 0;
-
-    while (attempts < retryCount) {
-      try {
-        const module = await importFn();
-
-        // 缓存组件
-        if (cache) {
-          componentCache.set(cacheKey, module.default as T);
-        }
-
-        return { default: module.default as T };
-      } catch (error) {
-        lastError = error as Error;
-        attempts++;
-
-        if (attempts < retryCount) {
-          await new Promise((resolve) => setTimeout(resolve, retryDelay));
-        }
-      }
-    }
-
-    throw lastError || new Error('Component loading failed');
-  };
-
-  const lazyComp = React.lazy(loadComponent);
-
-  // 预加载
-  if (strategy === 'eager') {
-    loadComponent();
-  } else if (strategy === 'prefetch') {
-    setTimeout(() => {
-      loadComponent().catch(() => {
-        // 预加载失败不抛出错误
-      });
-    }, 0);
-  }
-
-  return lazyComp as LazyExoticComponent<T>;
-}
-
-/**
- * 懒加载组件包装器
- */
-export const LazyComponent: React.FC<LazyComponentProps> = ({
-  component,
-  props = {},
-  fallback = <DefaultFallback />,
-  errorFallback,
-  preloadDelay = 0,
-  preload = false,
-}) => {
-  const [error, setError] = React.useState<Error | null>(null);
-
-  // 预加载逻辑
-  React.useEffect(() => {
-    if (preload && preloadDelay > 0) {
-      const timer = setTimeout(() => {
-        if (typeof component === 'function') {
-          const loadFn = component as () => Promise<ComponentType<any>>;
-          loadFn().catch((err: Error) => {
-            console.error('Preload failed:', err);
-            // 预加载失败不抛出错误
-          });
-        }
-      }, preloadDelay);
-
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [preload, preloadDelay, component]);
-
-  const handleError = React.useCallback((err: Error) => {
-    setError(err);
-  }, []);
-
-  const handleReset = React.useCallback(() => {
-    setError(null);
-  }, []);
-
-  if (error) {
-    if (errorFallback) {
-      return <>{errorFallback}</>;
-    }
-    return <DefaultErrorFallback error={error} reset={handleReset} />;
-  }
-
-  const ActualComponent = typeof component === 'function' ? React.lazy(component as any) : component;
-
-  return (
-    <ErrorBoundary onError={handleError}>
-      <Suspense fallback={fallback}>
-        <ActualComponent {...props} />
-      </Suspense>
-    </ErrorBoundary>
-  );
-};
-
-/**
- * 路由级别的懒加载
- */
-export function createLazyRoute<T extends ComponentType<any>>(
-  importFn: () => Promise<{ default: T }>,
-  options: LazyComponentOptions = {},
-) {
-  return createLazyComponent(importFn, {
-    ...options,
-    strategy: 'lazy',
-  });
-}
-
-/**
- * 批量懒加载组件
- */
-export function createLazyComponents(
-  components: Record<string, () => Promise<{ default: ComponentType<any> }>>,
-  options: LazyComponentOptions = {},
-): Record<string, LazyExoticComponent<ComponentType<any>>> {
-  const result: Record<string, LazyExoticComponent<ComponentType<any>>> = {};
-
-  Object.entries(components).forEach(([key, importFn]) => {
-    result[key] = createLazyComponent(importFn as any, options);
-  });
-
-  return result;
-}
-
-// 预加载工具
-export const preloadComponent = () => {
-  // 触发组件预加载（React.lazy 无公开 preload，使用空实现避免错误）
-  // 可选：如果需要实际预加载，可在创建时手动调用 loadComponent
-};
-
-// 清理缓存
-export const clearComponentCache = () => {
-  componentCache.clear();
-};
-
-export default LazyComponent;