taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,154 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { describe, vi } from 'vitest'
-import ButtonComponent from './Button'
-import type { ButtonProps } from './Button.types'
-
-// 使用实际的组件
-const Button = ButtonComponent
-
-describe('Button Component', () => {
-  const defaultProps: ButtonProps = {
-    children: 'Click me',
-    onClick: vi.fn()
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders button with default props', () => {
-      render(<Button {...defaultProps} />)
-
-      const button = screen.getByText('Click me')
-      expect(button).toBeInTheDocument()
-      expect(button).toHaveTextContent('Click me')
-    })
-
-    it('renders button with different variants', () => {
-      const variants: Array<ButtonProps['variant']> = ['solid', 'outline', 'ghost', 'text']
-
-      variants.forEach(variant => {
-        const { container } = render(<Button {...defaultProps} variant={variant} />)
-        const button = container.querySelector('button')
-        expect(button).toBeInTheDocument()
-        // Check that the button is rendered (variant affects styling, not structure)
-      })
-    })
-
-    it('renders button with different sizes', () => {
-      const sizes: Array<ButtonProps['size']> = ['small', 'medium', 'large']
-
-      sizes.forEach(size => {
-        const { container } = render(<Button {...defaultProps} size={size} />)
-        const button = container.querySelector('button')
-        expect(button).toBeInTheDocument()
-        // Check that the button is rendered (size affects styling, not structure)
-      })
-    })
-
-    it('renders disabled button', () => {
-      const { container } = render(<Button {...defaultProps} disabled />)
-      const button = container.querySelector('button')
-      expect(button).toBeInTheDocument()
-      expect(button).toBeDisabled()
-    })
-
-    it('renders loading button', () => {
-      const { container } = render(<Button {...defaultProps} loading />)
-      const button = container.querySelector('button')
-      expect(button).toBeInTheDocument()
-      expect(button).toBeDisabled()
-      // Check for loading content
-      expect(screen.getByText('加载中...')).toBeInTheDocument()
-    })
-
-    it('renders with custom className', () => {
-      const { container } = render(<Button {...defaultProps} className="custom-button" />)
-      const button = container.querySelector('button')
-      expect(button).toBeInTheDocument()
-      expect(button).toHaveClass('custom-button')
-    })
-  })
-
-  describe('Event Handling', () => {
-    it('handles click event', () => {
-      render(<Button {...defaultProps} />)
-
-      const button = screen.getByText('Click me')
-      fireEvent.click(button)
-
-      expect(defaultProps.onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('does not handle click when disabled', () => {
-      render(<Button {...defaultProps} disabled />)
-
-      const button = screen.getByText('Click me')
-      fireEvent.click(button)
-
-      expect(defaultProps.onClick).not.toHaveBeenCalled()
-    })
-
-    it('does not handle click when loading', () => {
-      render(<Button {...defaultProps} loading />)
-
-      const button = screen.getByText('加载中...')
-      fireEvent.click(button)
-
-      expect(defaultProps.onClick).not.toHaveBeenCalled()
-    })
-
-    it('handles key press events without errors', () => {
-      render(<Button {...defaultProps} />)
-
-      const button = screen.getByText('Click me')
-
-      // Test that key events don't cause errors (TaroButton might handle key events differently)
-      expect(() => {
-        fireEvent.keyDown(button, { key: 'Enter' })
-        fireEvent.keyDown(button, { key: ' ' })
-      }).not.toThrow()
-    })
-  })
-
-  
-  describe('Ref API', () => {
-    it('exposes ref methods', () => {
-      const ref = React.createRef<any>()
-      render(<Button {...defaultProps} ref={ref} />)
-
-      // The current Button component uses TaroButton which may not have extensive ref API
-      expect(ref.current).toBeTruthy()
-    })
-
-    it('can be referenced', () => {
-      const ref = React.createRef<any>()
-      render(<Button {...defaultProps} ref={ref} />)
-
-      expect(ref.current).toBeTruthy()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('renders without children', () => {
-      const { container } = render(<Button {...defaultProps} children={undefined} />)
-      const button = container.querySelector('button')
-      expect(button).toBeInTheDocument()
-    })
-
-    it('renders with empty string children', () => {
-      render(<Button {...defaultProps} children="" />)
-
-      const button = screen.getByTestId('button')
-      expect(button).toBeInTheDocument()
-    })
-
-    it('renders with null children', () => {
-      const { container } = render(<Button {...defaultProps} children={null} />)
-      const button = container.querySelector('button')
-      expect(button).toBeInTheDocument()
-    })
-  })
-})

package/src/components/basic/Button/Button.tsx

@@ -1,133 +0,0 @@
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { Button as TaroButton, Text, View } from '@tarojs/components';
-import { buttonStyles } from './Button.styles';
-import type { ButtonProps, ButtonRef } from './Button.types';
-import type { ITouchEvent } from '@tarojs/components';
-
-/** 按钮组件 */
-export const ButtonComponent = forwardRef<ButtonRef, ButtonProps>((props, ref) => {
-  const {
-    type = 'default',
-    size = 'md',
-    variant = 'solid',
-    shape = 'default',
-    disabled = false,
-    loading = false,
-    children,
-    icon,
-    onClick,
-    style,
-    className = '',
-    block = false,
-    accessibilityLabel,
-    accessibilityRole,
-    accessibilityState,
-    ...rest
-  } = props;
-
-  const handleClick = useCallback(
-    (event: ITouchEvent) => {
-      if (!disabled && !loading) {
-        onClick?.(event);
-      }
-    },
-    [disabled, loading, onClick],
-  );
-
-  // 优化样式生成，使用更高效的合并逻辑
-  const buttonStyle = useMemo(() => {
-    const shapeKey = shape === 'default' ? 'defaultShape' : shape;
-
-    // 预计算所有基础样式，避免多次 spread
-    const computedStyle = {
-      ...buttonStyles['base'],
-      ...buttonStyles[size === 'md' ? 'medium' : size],
-      ...buttonStyles[type],
-      ...buttonStyles[variant],
-      ...buttonStyles[shapeKey],
-      ...style,
-      display: block ? 'block' : 'inline-flex',
-      width: block ? '100%' : undefined,
-    };
-
-    // 只在需要时添加状态样式
-    if (disabled) {
-      Object.assign(computedStyle, buttonStyles['disabled']);
-    } else if (loading) {
-      Object.assign(computedStyle, buttonStyles['loading']);
-    }
-
-    return computedStyle;
-  }, [type, size, variant, shape, disabled, loading, style, block]);
-
-  const renderContent = () => {
-    if (loading) {
-      return (
-        <View style={buttonStyles['loadingContent'] || {}}>
-          <View style={buttonStyles['loadingIcon'] || {}} />
-          <Text style={buttonStyles['loadingText'] || {}}>加载中...</Text>
-        </View>
-      );
-    }
-
-    return (
-      <>
-        {icon && <View style={buttonStyles['icon'] || {}}>{icon}</View>}
-        {children && <Text style={buttonStyles['buttonText'] || {}}>{children}</Text>}
-      </>
-    );
-  };
-
-  // 实现 ButtonRef 方法
-  React.useImperativeHandle(ref, () => ({
-    element: undefined,
-    getType: () => type,
-    getSize: () => size,
-    getStatus: () => (disabled ? 'disabled' : loading ? 'loading' : type),
-    isDisabled: () => disabled || loading,
-    isLoading: () => loading,
-    disable: () => {},
-    enable: () => {},
-    setLoading: () => {},
-    setType: () => {},
-    setSize: () => {},
-    click: () => {},
-  }));
-
-  // Taro Button size mapping
-  const getTaroButtonSize = () => {
-    switch (size) {
-      case 'sm':
-        return 'mini';
-      case 'md':
-      case 'lg':
-        return 'default';
-      default:
-        return 'default';
-    }
-  };
-
-  return (
-    <TaroButton
-      type={type === 'primary' ? 'primary' : 'default'}
-      size={getTaroButtonSize()}
-      disabled={disabled || loading}
-      style={buttonStyle}
-      className={className}
-      onClick={handleClick}
-      data-testid="button"
-      accessible={true}
-      aria-label={accessibilityLabel}
-      aria-role={accessibilityRole}
-      aria-state={accessibilityState}
-      {...rest}
-    >
-      {renderContent()}
-    </TaroButton>
-  );
-});
-
-ButtonComponent.displayName = 'Button';
-
-export const Button = ButtonComponent;
-export default Button;

package/src/components/basic/Button/Button.types.ts

@@ -1,81 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { ITouchEvent } from '@tarojs/components';
-
-/** 按钮类型 */
-export type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
-
-/** 按钮尺寸 */
-export type ButtonSize = 'sm' | 'md' | 'lg';
-
-/** 按钮变体 */
-export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'text';
-
-/** 按钮形状 */
-export type ButtonShape = 'default' | 'round' | 'circle';
-
-/** 按钮状态 */
-export type ButtonStatus = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'disabled' | 'loading';
-
-export interface ButtonProps {
-  /** 按钮类型 */
-  type?: ButtonType;
-  /** 按钮尺寸 */
-  size?: ButtonSize;
-  /** 按钮变体 */
-  variant?: ButtonVariant;
-  /** 按钮形状 */
-  shape?: ButtonShape;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 是否加载中 */
-  loading?: boolean;
-  /** 子节点 */
-  children?: ReactNode;
-  /** 图标 */
-  icon?: ReactNode;
-  /** 点击事件 */
-  onClick?: (_event: ITouchEvent) => void;
-  /** 自定义样式 */
-  style?: CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-  /** 是否块级显示 */
-  block?: boolean;
-  /** 无障碍标签 */
-  accessibilityLabel?: string;
-  /** 无障碍角色 */
-  accessibilityRole?: string;
-  /** 无障碍状态 */
-  accessibilityState?: {
-    disabled?: boolean;
-    busy?: boolean;
-    selected?: boolean;
-  };
-}
-
-export interface ButtonRef {
-  /** DOM 元素 */
-  element: any;
-  /** 获取按钮类型 */
-  getType: () => ButtonType;
-  /** 获取按钮尺寸 */
-  getSize: () => ButtonSize;
-  /** 获取按钮状态 */
-  getStatus: () => ButtonStatus;
-  /** 检查是否禁用 */
-  isDisabled: () => boolean;
-  /** 检查是否加载中 */
-  isLoading: () => boolean;
-  /** 禁用按钮 */
-  disable: () => void;
-  /** 启用按钮 */
-  enable: () => void;
-  /** 设置加载状态 */
-  setLoading: (_loading: boolean) => void;
-  /** 设置按钮类型 */
-  setType: (_type: ButtonType) => void;
-  /** 设置按钮尺寸 */
-  setSize: (_size: ButtonSize) => void;
-  /** 点击按钮 */
-  click: () => void;
-}

package/src/components/basic/Button/index.tsx

@@ -1,6 +0,0 @@
-import ButtonComponent from './Button';
-
-export { ButtonComponent as Button };
-export type { ButtonProps, ButtonRef } from './Button.types';
-
-export default ButtonComponent;