taro-uno-ui 1.0.0 → 1.0.2

package/src/components/basic/Text/Text.test.tsx

@@ -1,299 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { vi, describe, it, expect, beforeEach } from 'vitest'
-import '@testing-library/jest-dom'
-import TextComponent from './Text'
-import type { TextProps } from './Text.types'
-
-// 使用实际的组件
-const Text = TextComponent
-
-describe('Text Component', () => {
-  const defaultProps: TextProps = {
-    children: 'Hello World',
-    onClick: vi.fn()
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders text with default props', () => {
-      render(<Text {...defaultProps} />)
-
-      const text = screen.getByText('Hello World')
-      expect(text).toBeInTheDocument()
-    })
-
-    it('renders text with different sizes', () => {
-      const sizes: Array<TextProps['size']> = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl']
-
-      sizes.forEach(size => {
-        const { container } = render(<Text {...defaultProps} size={size!} />)
-        const text = container.querySelector('.taro-uno-h5-text') as HTMLElement
-        expect(text).toHaveClass(`taro-uno-h5-text--${size}`)
-
-        // Verify font size is applied via style attribute
-        const fontSize = text.style.fontSize
-        expect(fontSize).toBeTruthy()
-        expect(fontSize).toMatch(/\d+px/)
-      })
-    })
-
-    it('renders text with different colors', () => {
-      const colors: Array<TextProps['color']> = ['primary', 'secondary', 'success', 'warning', 'error', 'info']
-
-      colors.forEach(color => {
-        const { container } = render(<Text {...defaultProps} color={color!} />)
-        const text = container.querySelector('.taro-uno-h5-text') as HTMLElement
-        expect(text).toHaveClass(`taro-uno-h5-text--${color}`)
-
-        // Verify color is applied via style attribute
-        const colorValue = text.style.color
-        expect(colorValue).toBeTruthy()
-        expect(colorValue).toMatch(/^#[0-9a-fA-F]{6}$|rgb(a?\(.*\))|hsl(a?\(.*\))$/)
-      })
-    })
-
-    it('renders clickable text', () => {
-      const { container } = render(<Text {...defaultProps} clickable />)
-      const text = container.querySelector('.taro-uno-h5-text') as HTMLElement
-      expect(text).toHaveClass('taro-uno-h5-text--clickable')
-    })
-
-    it('renders loading text', () => {
-      const { container } = render(<Text {...defaultProps} loading />)
-      const text = container.querySelector('.taro-uno-h5-text') as HTMLElement
-      expect(text).toHaveClass('taro-uno-h5-text--loading')
-    })
-
-    it('renders disabled text', () => {
-      const { container } = render(<Text {...defaultProps} disabled />)
-      const text = container.querySelector('.taro-uno-h5-text') as HTMLElement
-      expect(text).toHaveClass('taro-uno-h5-text--disabled')
-    })
-
-    it('renders with custom className', () => {
-      const { container } = render(<Text {...defaultProps} className="custom-text" />)
-      const text = container.querySelector('.taro-uno-h5-text') as HTMLElement
-      expect(text).toHaveClass('custom-text')
-    })
-  })
-
-  describe('Event Handling', () => {
-    it('handles click event', () => {
-      render(<Text {...defaultProps} clickable />)
-
-      const text = screen.getByText('Hello World')
-      fireEvent.click(text)
-
-      expect(defaultProps.onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('does not handle click when disabled', () => {
-      render(<Text {...defaultProps} disabled />)
-
-      const text = screen.getByText('Hello World')
-      fireEvent.click(text)
-
-      expect(defaultProps.onClick).not.toHaveBeenCalled()
-    })
-
-    it('does not handle click when loading', () => {
-      render(<Text {...defaultProps} loading />)
-
-      const text = screen.getByText('Hello World')
-      fireEvent.click(text)
-
-      expect(defaultProps.onClick).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Copy Functionality', () => {
-    it('copies text when copyable', async () => {
-      const mockWriteText = vi.fn().mockResolvedValue(undefined)
-      Object.assign(navigator, {
-        clipboard: {
-          writeText: mockWriteText
-        }
-      })
-
-      const onCopy = vi.fn()
-      render(<Text {...defaultProps} copyable onCopy={onCopy} />)
-
-      const copyButton = screen.getByText('📋')
-      fireEvent.click(copyButton)
-
-      await waitFor(() => {
-        expect(mockWriteText).toHaveBeenCalledWith('Hello World')
-        expect(onCopy).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('supports accessibility attributes', () => {
-      render(<Text {...defaultProps} ariaLabel="Greeting text" />)
-
-      const text = screen.getByText('Hello World')
-      expect(text).toHaveAttribute('aria-label', 'Greeting text')
-    })
-
-    it('renders with default role', () => {
-      render(<Text {...defaultProps} />)
-
-      const text = screen.getByText('Hello World') as HTMLElement
-      expect(text).toHaveAttribute('role', 'text')
-    })
-
-    it('renders with custom role and ariaLabel', () => {
-      render(<Text {...defaultProps} ariaLabel="Custom label" role="button" />)
-
-      const text = screen.getByRole('button', { name: 'Custom label' }) as HTMLElement
-      expect(text).toBeInTheDocument()
-      expect(text).toHaveAttribute('role', 'button')
-      expect(text).toHaveAttribute('aria-label', 'Custom label')
-    })
-
-    it('supports accessibilityRole prop', () => {
-      render(<Text {...defaultProps} accessibilityRole="link" />)
-
-      const text = screen.getByText('Hello World') as HTMLElement
-      expect(text).toHaveAttribute('role', 'link')
-    })
-
-    it('has clickable styling when clickable', () => {
-      render(<Text {...defaultProps} clickable />)
-
-      const text = screen.getByText('Hello World') as HTMLElement
-      expect(text).toHaveClass('taro-uno-h5-text--clickable')
-    })
-
-    it('has correct disabled state styling', () => {
-      render(<Text {...defaultProps} disabled />)
-
-      const text = screen.getByText('Hello World') as HTMLElement
-      expect(text).toHaveClass('taro-uno-h5-text--disabled')
-    })
-
-    it('has correct loading state styling', () => {
-      render(<Text {...defaultProps} loading />)
-
-      const text = screen.getByText('Hello World') as HTMLElement
-      expect(text).toHaveClass('taro-uno-h5-text--loading')
-    })
-  })
-
-  describe('Ref API', () => {
-    it('exposes ref methods', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      expect(ref.current).toBeTruthy()
-      expect(ref.current.element).toBeTruthy()
-      expect(typeof ref.current.getText).toBe('function')
-      expect(typeof ref.current.setText).toBe('function')
-      expect(typeof ref.current.copy).toBe('function')
-      expect(typeof ref.current.setDisabled).toBe('function')
-      expect(typeof ref.current.setLoading).toBe('function')
-    })
-
-    it('can get text content via ref', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      expect(ref.current.getText()).toBe('Hello World')
-    })
-
-    it('can set text content via ref', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      ref.current.setText('New Text')
-      expect(ref.current.getText()).toBe('New Text')
-    })
-
-    it('can set disabled state via ref', async () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      ref.current.setDisabled(true)
-
-      // Wait for state update and re-render
-      await waitFor(() => {
-        const text = screen.getByText('Hello World')
-        expect(text).toHaveClass('taro-uno-h5-text--disabled')
-      })
-    })
-
-    it('can set loading state via ref', async () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      ref.current.setLoading(true)
-
-      // Wait for state update and re-render
-      await waitFor(() => {
-        const text = screen.getByText('Hello World')
-        expect(text).toHaveClass('taro-uno-h5-text--loading')
-      })
-    })
-
-    it('can get color via ref', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} color="primary" ref={ref} />)
-
-      expect(ref.current.getColor()).toBe('primary')
-    })
-
-    it('can set color via ref', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      ref.current.setColor('#ff0000')
-
-      const text = screen.getByText('Hello World')
-      expect(text.style.color).toBe('rgb(255, 0, 0)')
-    })
-
-    it('can get size via ref', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} size="lg" ref={ref} />)
-
-      expect(ref.current.getSize()).toBe('lg')
-    })
-
-    it('can set size via ref', () => {
-      const ref = React.createRef<any>()
-      render(<Text {...defaultProps} ref={ref} />)
-
-      ref.current.setSize('xl')
-
-      const text = screen.getByText('Hello World')
-      expect(text.style.fontSize).toBe('36px')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('renders without children', () => {
-      const { container } = render(<Text {...defaultProps} children={undefined} />)
-      const text = container.querySelector('.taro-uno-h5-text')
-      expect(text).toBeInTheDocument()
-    })
-
-    it('renders with empty string children', () => {
-      const { container } = render(<Text {...defaultProps} children="" />)
-
-      const text = container.querySelector('.taro-uno-h5-text')
-      expect(text).toBeInTheDocument()
-      expect(text?.textContent).toBe('')
-    })
-
-    it('renders with null children', () => {
-      const { container } = render(<Text {...defaultProps} children={null} />)
-      const text = container.querySelector('.taro-uno-h5-text')
-      expect(text).toBeInTheDocument()
-    })
-  })
-})

package/src/components/basic/Text/Text.tsx

@@ -1,340 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { Text as TaroText, View } from '@tarojs/components';
-import { textStyles } from './Text.styles';
-import type { TextProps, TextRef } from './Text.types';
-import { useSecurity } from '../../common/SecurityProvider';
-import { useTheme } from '../../common/ThemeProvider';
-
-/** 文本组件 */
-export const TextComponent = forwardRef<TextRef, TextProps>((props, ref) => {
-  const {
-    children,
-    size = 'md',
-    weight = 'normal',
-    color = 'inherit',
-    align = 'left',
-    decoration = 'none',
-    transform = 'none',
-    overflow = 'clip',
-    direction = 'ltr',
-    fontStyle = 'normal',
-    variant = 'normal',
-    letterSpacing = 'normal',
-    lineHeight = 'normal',
-    status = 'normal',
-    type = 'body',
-    clickable = false,
-    loading = false,
-    disabled = false,
-    block = false,
-    inlineBlock = false,
-    selectable = false,
-    copyable = false,
-    onCopy,
-    className,
-    onClick,
-    style,
-    maxLines,
-    animated = false,
-    animationDuration = 300,
-    href,
-    target = '_self',
-    underline = false,
-    strikethrough = false,
-    highlight = false,
-    highlightColor = '#fef3c7',
-    ellipsis = false,
-    wrap = true,
-    breakWord = false,
-    textShadow,
-    textOutline,
-    gradient,
-    fontFamily,
-    wordSpacing,
-    textIndent,
-    whiteSpace,
-    verticalAlign,
-    writingMode,
-    textRendering,
-    ariaLabel,
-    role = 'text',
-    // 排除可能与Taro组件冲突的React属性
-    dangerouslySetInnerHTML,
-    suppressContentEditableWarning,
-    suppressHydrationWarning,
-    ...restProps
-  } = props;
-
-  const { sanitizeInput } = useSecurity();
-  const { isDark } = useTheme();
-
-  const sanitizedChildren = typeof children === 'string' ? sanitizeInput(children) : children;
-
-  const textRef = useRef<HTMLParagraphElement | HTMLSpanElement>(null);
-  const [internalStatus, setInternalStatus] = useState(status);
-  const [internalLoading, setInternalLoading] = useState(loading);
-  const [internalDisabled, setInternalDisabled] = useState(disabled);
-  const [isCopied, setIsCopied] = useState(false);
-
-  // 更新内部状态
-  useEffect(() => {
-    setInternalStatus(status);
-  }, [status]);
-
-  useEffect(() => {
-    setInternalLoading(loading);
-  }, [loading]);
-
-  useEffect(() => {
-    setInternalDisabled(disabled);
-  }, [disabled]);
-
-  // 处理点击事件
-  const handleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (internalDisabled || internalLoading || !clickable) return;
-
-      // 处理链接跳转
-      if (href) {
-        if (target === '_blank') {
-          window.open(href, '_blank');
-        } else {
-          window.location.href = href;
-        }
-      }
-
-      onClick?.(event);
-    },
-    [onClick, href, target, internalDisabled, internalLoading, clickable],
-  );
-
-  // 处理复制功能
-  const handleCopy = useCallback(async () => {
-    if (!copyable || !textRef.current) return;
-
-    try {
-      const text = textRef.current.textContent || '';
-      await navigator.clipboard.writeText(text);
-      setIsCopied(true);
-      onCopy?.();
-
-      // 2秒后重置复制状态
-      setTimeout(() => setIsCopied(false), 2000);
-    } catch (error) {
-      console.error('Failed to copy text:', error);
-    }
-  }, [copyable, onCopy]);
-
-  // 处理选择功能
-  const handleSelect = useCallback(() => {
-    if (!selectable || !textRef.current) return;
-
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(textRef.current);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-  }, [selectable]);
-
-  // 渲染加载状态
-  const renderLoading = () => {
-    return <View className="taro-uno-text__loading" style={textStyles['getLoadingStyle']()} />;
-  };
-
-  // 渲染复制按钮
-  const renderCopyButton = () => {
-    if (!copyable) return null;
-
-    return (
-      <View
-        className="taro-uno-text__copy-button"
-        onClick={handleCopy}
-        style={{
-          marginLeft: '8px',
-          cursor: 'pointer',
-          opacity: isCopied ? 0.6 : 1,
-          transition: 'opacity 0.2s',
-        }}
-      >
-        {isCopied ? '✓' : '📋'}
-      </View>
-    );
-  };
-
-  // 计算最终样式
-  const baseStyleProps = {
-    size,
-    weight,
-    color,
-    align,
-    decoration,
-    transform,
-    overflow,
-    direction,
-    fontStyle,
-    variant,
-    letterSpacing,
-    lineHeight,
-    status: internalStatus,
-    loading: internalLoading,
-    disabled: internalDisabled,
-    animated,
-    animationDuration,
-    underline,
-    strikethrough,
-    highlight,
-    highlightColor,
-    ellipsis,
-    wrap,
-    breakWord,
-    style: style ?? {},
-  };
-
-  const optionalStyleProps = {
-    ...(maxLines !== undefined && { maxLines }),
-    ...(textShadow !== undefined && { textShadow }),
-    ...(textOutline !== undefined && { textOutline }),
-    ...(gradient !== undefined && { gradient }),
-    ...(fontFamily !== undefined && { fontFamily }),
-    ...(wordSpacing !== undefined && { wordSpacing }),
-    ...(textIndent !== undefined && { textIndent }),
-    ...(whiteSpace !== undefined && { whiteSpace }),
-    ...(verticalAlign !== undefined && { verticalAlign }),
-    ...(writingMode !== undefined && { writingMode }),
-    ...(textRendering !== undefined && { textRendering }),
-  };
-
-  const getStyleProps = { ...baseStyleProps, ...optionalStyleProps } as Partial<TextProps>;
-  const textStyle = textStyles['getStyle'](getStyleProps);
-
-  // 计算最终类名
-  const textClassName =
-    textStyles['getClassName']({
-      size,
-      weight,
-      color,
-      align,
-      decoration,
-      transform,
-      overflow,
-      direction,
-      fontStyle,
-      variant,
-      letterSpacing,
-      lineHeight,
-      status: internalStatus,
-      type,
-      clickable,
-      loading: internalLoading,
-      disabled: internalDisabled,
-      block,
-      inlineBlock,
-      selectable,
-      copyable,
-      animated,
-      underline,
-      strikethrough,
-      highlight,
-      ellipsis,
-      wrap,
-      breakWord,
-      className: className ?? '',
-    }) + ` ${isDark ? 'dark' : 'light'}`;
-
-  // 选择渲染元素
-  const TextElement = href ? 'a' : block ? 'div' : inlineBlock ? 'span' : TaroText;
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: textRef.current,
-      getText: () => textRef.current?.textContent || '',
-      setText: (text: string) => {
-        if (textRef.current) {
-          textRef.current.textContent = text;
-        }
-      },
-      copy: async () => {
-        if (textRef.current) {
-          const text = textRef.current.textContent || '';
-          await navigator.clipboard.writeText(text);
-        }
-      },
-      select: handleSelect,
-      setDisabled: (disabled: boolean) => {
-        setInternalDisabled(disabled);
-        setInternalStatus(disabled ? 'disabled' : 'normal');
-      },
-      setLoading: (loading: boolean) => {
-        setInternalLoading(loading);
-        setInternalStatus(loading ? 'loading' : 'normal');
-      },
-      getStatus: () => internalStatus,
-      getSize: () => size,
-      getColor: () => {
-        return color || '';
-      },
-      setColor: (newColor: string) => {
-        if (textRef.current) {
-          textRef.current.style.color = newColor;
-        }
-      },
-      setSize: (newSize: typeof size) => {
-        if (textRef.current) {
-          const sizeStyles = textStyles.SIZE_MAP[newSize];
-          textRef.current.style.fontSize = `${sizeStyles['fontSize']}px`;
-          textRef.current.style.lineHeight = `${sizeStyles._lineHeight}`;
-        }
-      },
-      setWeight: (newWeight: typeof weight) => {
-        if (textRef.current) {
-          const weightValue = textStyles.WEIGHT_MAP[newWeight];
-          textRef.current.style.fontWeight = String(weightValue);
-        }
-      },
-      scrollIntoView: (options?: ScrollIntoViewOptions) => {
-        textRef.current?.scrollIntoView(options);
-      },
-    }),
-    [internalDisabled, internalLoading, internalStatus, size, color, weight, handleSelect],
-  );
-
-  // 处理链接属性
-  const linkProps = href
-    ? {
-        href,
-        target,
-        rel: target === '_blank' ? 'noopener noreferrer' : undefined,
-      }
-    : {};
-
-  return (
-    <View className="taro-uno-text-wrapper" style={{ display: 'flex', alignItems: 'center' }}>
-      {internalLoading && renderLoading()}
-
-      <TextElement
-        ref={textRef as any}
-        className={textClassName}
-        style={textStyle}
-        onClick={handleClick}
-        selectable={selectable}
-        aria-label={ariaLabel}
-        role={role}
-        {...linkProps}
-        {...(restProps as any)}
-      >
-        {sanitizedChildren}
-      </TextElement>
-
-      {renderCopyButton()}
-    </View>
-  );
-});
-
-/** 文本组件显示名称 */
-TextComponent.displayName = 'Text';
-
-/** 导出文本组件 */
-export const Text = TextComponent;
-export default TextComponent;