taro-uno-ui 1.0.1 → 1.0.2

package/src/components/layout/Container/Container.styles.ts

@@ -1,163 +0,0 @@
-import type { ContainerProps } from './Container.types';
-import type { Size, CSSUnit } from '../../../types';
-
-/** Container组件样式管理器 */
-export const containerStyles = {
-  /** 尺寸映射表 */
-  SIZE_MAP: {
-    small: 320,
-    medium: 768,
-    large: 1024,
-    default: 1200,
-    full: '100%',
-    fluid: '100%',
-  } as const,
-
-  /** 对齐方式映射表 */
-  ALIGN_MAP: {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-  } as const,
-
-  /**
-   * 解析尺寸值
-   */
-  parseSize: (size: Size | number | `${number}${CSSUnit}`): number | string => {
-    if (typeof size === 'number') {
-      return `${size}px`;
-    }
-
-    if (typeof size === 'string') {
-      if (size in containerStyles.SIZE_MAP) {
-        return containerStyles.SIZE_MAP[size as keyof typeof containerStyles.SIZE_MAP];
-      }
-      return size;
-    }
-
-    return `${containerStyles.SIZE_MAP.default}px`;
-  },
-
-  /**
-   * 获取基础样式
-   */
-  getBaseStyle: (props: ContainerProps): React.CSSProperties => {
-    const {
-      size = 'default',
-      maxWidth,
-      padding = 'medium',
-      margin = 'medium',
-      align = 'stretch',
-      center = false,
-      scrollable = false,
-      scrollDirection = 'vertical',
-      style = {},
-    } = props;
-
-    // 计算宽度
-    const width = size === 'fluid' ? '100%' : size === 'full' ? '100%' : containerStyles['parseSize'](size);
-
-    // 计算最大宽度
-    const finalMaxWidth =
-      maxWidth !== undefined
-        ? typeof maxWidth === 'number'
-          ? `${maxWidth}px`
-          : containerStyles['parseSize'](maxWidth as Size)
-        : size === 'fluid'
-          ? 'none'
-          : containerStyles.SIZE_MAP[size as keyof typeof containerStyles.SIZE_MAP];
-
-    // 计算内边距
-    const paddingValue =
-      typeof padding === 'number'
-        ? `${padding}px`
-        : typeof padding === 'string' && padding in containerStyles.SIZE_MAP
-          ? `${containerStyles.SIZE_MAP[padding as keyof typeof containerStyles.SIZE_MAP]}px`
-          : containerStyles['parseSize'](padding);
-
-    // 计算外边距
-    const marginValue =
-      typeof margin === 'number'
-        ? `${margin}px`
-        : typeof margin === 'string' && margin in containerStyles.SIZE_MAP
-          ? `${containerStyles.SIZE_MAP[margin as keyof typeof containerStyles.SIZE_MAP]}px`
-          : containerStyles['parseSize'](margin);
-
-    // 计算对齐方式
-    const justifyContent = center ? 'center' : containerStyles['ALIGN_MAP'][align] || 'stretch';
-
-    // 计算滚动样式
-    const overflow = scrollable
-      ? {
-          overflowX: (scrollDirection === 'horizontal' || scrollDirection === 'both' ? 'auto' : 'hidden') as any,
-          overflowY: (scrollDirection === 'vertical' || scrollDirection === 'both' ? 'auto' : 'hidden') as any,
-        }
-      : {
-          overflow: 'visible' as any,
-        };
-
-    return {
-      width,
-      maxWidth: finalMaxWidth,
-      padding: paddingValue,
-      margin: center ? '0 auto' : marginValue,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent,
-      alignItems: center ? 'center' : undefined,
-      boxSizing: 'border-box',
-      ...overflow,
-      ...style,
-    };
-  },
-
-  /**
-   * 获取类名
-   */
-  getClassName: (props: ContainerProps): string => {
-    const { size = 'default', align = 'stretch', center = false, scrollable = false, className = '' } = props;
-
-    const baseClass = 'taro-uno-container';
-    const sizeClass = `${baseClass}--${size}`;
-    const alignClass = `${baseClass}--${align}`;
-    const centerClass = center ? `${baseClass}--center` : '';
-    const scrollableClass = scrollable ? `${baseClass}--scrollable` : '';
-
-    return [baseClass, sizeClass, alignClass, centerClass, scrollableClass, className].filter(Boolean).join(' ');
-  },
-
-  /**
-   * 获取响应式样式
-   */
-  getResponsiveStyle: (responsive: ContainerProps['responsive']): React.CSSProperties => {
-    if (!responsive) return {};
-
-    const responsiveStyle: React.CSSProperties = {};
-
-    Object.entries(responsive).forEach(([_breakpoint, props]) => {
-      if (props) {
-        // 这里需要配合CSS-in-JS库来处理响应式样式
-        // 暂时返回空对象
-        // Breakpoint value: containerStyles['getBreakpointValue'](breakpoint)
-      }
-    });
-
-    return responsiveStyle;
-  },
-
-  /**
-   * 获取断点值
-   */
-  getBreakpointValue: (breakpoint: string): number => {
-    const breakpoints = {
-      xs: 0,
-      sm: 640,
-      md: 768,
-      lg: 1024,
-      xl: 1280,
-      xxl: 1536,
-    };
-    return breakpoints[breakpoint as keyof typeof breakpoints] || 0;
-  },
-};

package/src/components/layout/Container/Container.test.tsx

@@ -1,380 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent, act } from '@testing-library/react'
-import { Container } from '../Container'
-import type { ContainerProps, ContainerRef } from '../Container.types'
-
-// Mock Taro components
-vi.mock('@tarojs/components', () => ({
-  View: 'div'
-}))
-
-// Mock styles
-vi.mock('../Container.styles', () => ({
-  containerStyles: {
-    SIZE_MAP: {
-      small: 320,
-      medium: 768,
-      large: 1024,
-      default: 1200,
-      full: '100%',
-      fluid: '100%'
-    },
-    ALIGN_MAP: {
-      start: 'flex-start',
-      center: 'center',
-      end: 'flex-end',
-      stretch: 'stretch'
-    },
-    parseSize: (size: any) => {
-      if (typeof size === 'number') return `${size}px`
-      const sizeMap = { small: 320, medium: 768, large: 1024, default: 1200, full: '100%', fluid: '100%' }
-      if (typeof size === 'string' && size in sizeMap) {
-        return sizeMap[size as keyof typeof sizeMap]
-      }
-      return size || '1200px'
-    },
-    getBaseStyle: (props: any) => ({
-      maxWidth: props.maxWidth || 1200,
-      padding: '16px',
-      margin: '16px',
-      display: 'flex',
-      alignItems: props.center ? 'center' : 'stretch',
-      overflow: props.scrollable ? 'auto' : 'visible'
-    }),
-    getResponsiveStyle: (responsive: any) => responsive ? { '@media (max-width: 768px)': { maxWidth: '100%' } } : {},
-    getClassName: (props: any) => `taro-uno-container taro-uno-container--${props.size} taro-uno-container--${props.align} ${props.className || ''}`
-  }
-}))
-
-describe('Container Component', () => {
-  const mockRef = React.createRef<ContainerRef>()
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders container with default props', () => {
-      render(<Container data-testid="container">Test Content</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-      expect(container).toHaveTextContent('Test Content')
-    })
-
-    it('renders container with custom size', () => {
-      render(<Container size="large" data-testid="container">Large Container</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('renders container with custom maxWidth', () => {
-      render(<Container maxWidth={800} data-testid="container">Custom Width</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('renders container with center alignment', () => {
-      render(<Container center data-testid="container">Centered</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('renders container with scrollable content', () => {
-      render(<Container scrollable data-testid="container">Scrollable</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('renders container with custom className', () => {
-      render(<Container className="custom-container" data-testid="container">Custom Class</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-      expect(container).toHaveClass('custom-container')
-    })
-
-    it('renders container with responsive props', () => {
-      render(<Container responsive={{ xs: { size: 'small' } }} data-testid="container">Responsive</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('renders empty container', () => {
-      render(<Container data-testid="container" />)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-      expect(container).toBeEmptyDOMElement()
-    })
-
-    it('renders container with multiple children', () => {
-      render(
-        <Container data-testid="container">
-          <div>Child 1</div>
-          <div>Child 2</div>
-          <div>Child 3</div>
-        </Container>
-      )
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-      expect(container.children).toHaveLength(3)
-    })
-  })
-
-  describe('Event Handling', () => {
-    it('handles click events', () => {
-      const handleClick = vi.fn()
-      render(<Container onClick={handleClick} data-testid="container">Clickable</Container>)
-      const container = screen.getByTestId('container')
-      fireEvent.click(container)
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('handles scroll events', () => {
-      const handleScroll = vi.fn()
-      render(<Container onScroll={handleScroll} data-testid="container">Scrollable</Container>)
-      const container = screen.getByTestId('container')
-      fireEvent.scroll(container)
-      expect(handleScroll).toHaveBeenCalledTimes(1)
-    })
-
-    it('handles multiple event handlers', () => {
-      const handleClick = vi.fn()
-      const handleScroll = vi.fn()
-      render(
-        <Container onClick={handleClick} onScroll={handleScroll} data-testid="container">
-          Events
-        </Container>
-      )
-      const container = screen.getByTestId('container')
-      fireEvent.click(container)
-      fireEvent.scroll(container)
-      expect(handleClick).toHaveBeenCalledTimes(1)
-      expect(handleScroll).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('Props Updates', () => {
-    it('updates size prop correctly', () => {
-      const { rerender } = render(<Container size="small" data-testid="container">Size Test</Container>)
-      const container = screen.getByTestId('container')
-      rerender(<Container size="large" data-testid="container">Size Test</Container>)
-      expect(container).toBeInTheDocument()
-    })
-
-    it('updates align prop correctly', () => {
-      const { rerender } = render(<Container align="start" data-testid="container">Align Test</Container>)
-      const container = screen.getByTestId('container')
-      rerender(<Container align="center" data-testid="container">Align Test</Container>)
-      expect(container).toBeInTheDocument()
-    })
-
-    it('updates center prop correctly', () => {
-      const { rerender } = render(<Container center={false} data-testid="container">Center Test</Container>)
-      const container = screen.getByTestId('container')
-      rerender(<Container center={true} data-testid="container">Center Test</Container>)
-      expect(container).toBeInTheDocument()
-    })
-
-    it('updates scrollable prop correctly', () => {
-      const { rerender } = render(<Container scrollable={false} data-testid="container">Scroll Test</Container>)
-      const container = screen.getByTestId('container')
-      rerender(<Container scrollable={true} data-testid="container">Scroll Test</Container>)
-      expect(container).toBeInTheDocument()
-    })
-
-    it('updates scrollDirection prop correctly', () => {
-      const { rerender } = render(<Container scrollDirection="vertical" data-testid="container">Direction Test</Container>)
-      const container = screen.getByTestId('container')
-      rerender(<Container scrollDirection="horizontal" data-testid="container">Direction Test</Container>)
-      expect(container).toBeInTheDocument()
-    })
-  })
-
-  describe('Ref API', () => {
-    it('exposes ref methods correctly', () => {
-      render(<Container ref={mockRef} data-testid="container">Ref Test</Container>)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(mockRef.current.getSize()).toBe('default')
-          expect(mockRef.current.getAlign()).toBe('stretch')
-          expect(mockRef.current.getMaxWidth()).toBe(1200)
-        }
-      })
-    })
-
-    it('sets size via ref method', () => {
-      render(<Container ref={mockRef} data-testid="container">Ref Size Test</Container>)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(() => mockRef.current.setSize('large')).not.toThrow()
-        }
-      })
-    })
-
-    it('sets align via ref method', () => {
-      render(<Container ref={mockRef} data-testid="container">Ref Align Test</Container>)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(() => mockRef.current.setAlign('center')).not.toThrow()
-        }
-      })
-    })
-
-    it('sets maxWidth via ref method', () => {
-      render(<Container ref={mockRef} data-testid="container">Ref MaxWidth Test</Container>)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(() => mockRef.current.setMaxWidth(800)).not.toThrow()
-        }
-      })
-    })
-
-    it('calls scrollIntoView via ref method', () => {
-      render(<Container ref={mockRef} data-testid="container">Ref Scroll Test</Container>)
-
-      act(() => {
-        if (mockRef.current) {
-          // In mock environment, scrollIntoView might not be available
-          // So we test that the method exists and can be called
-          expect(typeof mockRef.current.scrollIntoView).toBe('function')
-        }
-      })
-    })
-
-    it('provides element access via ref', () => {
-      render(<Container ref={mockRef} data-testid="container">Ref Element Test</Container>)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(mockRef.current.element).toBeDefined()
-        }
-      })
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('has proper role attribute', () => {
-      render(<Container role="main" data-testid="container">Accessible</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toHaveAttribute('role', 'main')
-    })
-
-    it('supports aria-label', () => {
-      render(<Container aria-label="Main container" data-testid="container">Labeled</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toHaveAttribute('aria-label', 'Main container')
-    })
-
-    it('supports aria-labelledby', () => {
-      render(<Container aria-labelledby="container-title" data-testid="container">Labelled By</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toHaveAttribute('aria-labelledby', 'container-title')
-    })
-
-    it('supports tabIndex for keyboard navigation', () => {
-      render(<Container tabIndex={0} data-testid="container">Tabbable</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toHaveAttribute('tabindex', '0')
-    })
-
-    it('supports data attributes', () => {
-      render(<Container data-testid="container" data-custom="value">Data Attr</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toHaveAttribute('data-custom', 'value')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('handles invalid size prop gracefully', () => {
-      render(<Container size="invalid" as any data-testid="container">Invalid Size</Container>)
-      expect(screen.getByTestId('container')).toBeInTheDocument()
-    })
-
-    it('handles invalid align prop gracefully', () => {
-      render(<Container align="invalid" as any data-testid="container">Invalid Align</Container>)
-      expect(screen.getByTestId('container')).toBeInTheDocument()
-    })
-
-    it('handles zero maxWidth', () => {
-      render(<Container maxWidth={0} data-testid="container">Zero Width</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles negative maxWidth gracefully', () => {
-      const { container } = render(<Container maxWidth={-100} data-testid="container">Negative Width</Container>)
-      expect(screen.getByTestId('container')).toBeInTheDocument()
-    })
-
-    it('handles very large maxWidth', () => {
-      render(<Container maxWidth={999999} data-testid="container">Large Width</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles undefined children', () => {
-      render(<Container data-testid="container">{undefined}</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles null children', () => {
-      render(<Container data-testid="container">{null}</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles boolean children', () => {
-      render(<Container data-testid="container">{true}</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-  })
-
-  describe('Responsive Behavior', () => {
-    it('applies responsive styles correctly', () => {
-      const responsiveProps = {
-        xs: { size: 'small' },
-        sm: { size: 'medium' },
-        md: { size: 'large' }
-      }
-      render(<Container responsive={responsiveProps} data-testid="container">Responsive</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles empty responsive object', () => {
-      render(<Container responsive={{}} data-testid="container">Empty Responsive</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-
-    it('handles partial responsive object', () => {
-      render(<Container responsive={{ xs: { size: 'small' } }} data-testid="container">Partial Responsive</Container>)
-      const container = screen.getByTestId('container')
-      expect(container).toBeInTheDocument()
-    })
-  })
-
-  describe('Performance', () => {
-    it('renders efficiently with many children', () => {
-      const children = Array.from({ length: 100 }, (_, i) => <div key={i}>Child {i}</div>)
-      const { container } = render(<Container data-testid="container">{children}</Container>)
-      expect(screen.getByTestId('container')).toBeInTheDocument()
-      expect(screen.getByTestId('container').children).toHaveLength(100)
-    })
-
-    it('handles frequent prop updates efficiently', () => {
-      const { rerender } = render(<Container size="small" data-testid="container">Performance</Container>)
-
-      for (let i = 0; i < 10; i++) {
-        rerender(<Container size={i % 2 === 0 ? 'small' : 'large'} data-testid="container">Performance</Container>)
-      }
-
-      expect(screen.getByTestId('container')).toBeInTheDocument()
-    })
-  })
-})

package/src/components/layout/Container/Container.tsx

@@ -1,123 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import { containerStyles } from './Container.styles';
-import type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container.types';
-
-/** Container组件 */
-export const ContainerComponent = forwardRef<ContainerRef, ContainerProps>((props, ref) => {
-  const {
-    children,
-    size = 'default',
-    maxWidth,
-    padding = 'medium',
-    margin = 'medium',
-    align = 'stretch',
-    center = false,
-    scrollable = false,
-    scrollDirection = 'vertical',
-    className,
-    style,
-    onClick,
-  } = props;
-
-  const containerRef = useRef<any>(null);
-  const [internalSize, setInternalSize] = useState<ContainerSize>(size);
-  const [internalAlign, setInternalAlign] = useState<ContainerAlign>(align);
-  const [internalCenter, setInternalCenter] = useState(center);
-  const [internalScrollable, setInternalScrollable] = useState(scrollable);
-  const [internalScrollDirection, setInternalScrollDirection] = useState(scrollDirection);
-
-  // 更新内部状态
-  useEffect(() => {
-    setInternalSize(size);
-  }, [size]);
-
-  useEffect(() => {
-    setInternalAlign(align);
-  }, [align]);
-
-  useEffect(() => {
-    setInternalCenter(center);
-  }, [center]);
-
-  useEffect(() => {
-    setInternalScrollable(scrollable);
-  }, [scrollable]);
-
-  useEffect(() => {
-    setInternalScrollDirection(scrollDirection);
-  }, [scrollDirection]);
-
-  // 处理点击事件
-  const handleClick = useCallback(
-    (event: any) => {
-      onClick?.(event);
-    },
-    [onClick],
-  );
-
-  // 计算样式
-  const containerStyle = containerStyles['getBaseStyle']({
-    size: internalSize,
-    maxWidth,
-    padding,
-    margin,
-    align: internalAlign,
-    center: internalCenter,
-    scrollable: internalScrollable,
-    scrollDirection: internalScrollDirection,
-    style: style || {},
-  });
-
-  // 计算类名
-  const containerClassName = containerStyles['getClassName']({
-    size: internalSize,
-    align: internalAlign,
-    center: internalCenter,
-    scrollable: internalScrollable,
-    className: className || '',
-  });
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: containerRef.current,
-      getSize: () => internalSize,
-      getAlign: () => internalAlign,
-      getMaxWidth: () => maxWidth || containerStyles.SIZE_MAP[internalSize as keyof typeof containerStyles.SIZE_MAP],
-      setSize: (newSize: ContainerSize) => {
-        setInternalSize(newSize);
-      },
-      setAlign: (newAlign: ContainerAlign) => {
-        setInternalAlign(newAlign);
-      },
-      setMaxWidth: (newMaxWidth: number | string) => {
-        if (containerRef.current) {
-          containerRef.current.style.maxWidth = typeof newMaxWidth === 'number' ? `${newMaxWidth}px` : newMaxWidth;
-        }
-      },
-      scrollIntoView: (options?: ScrollIntoViewOptions) => {
-        containerRef.current?.scrollIntoView(options);
-      },
-    }),
-    [internalSize, internalAlign, maxWidth],
-  );
-
-  return (
-    <View
-      ref={containerRef}
-      className={containerClassName}
-      style={{ ...containerStyle, ...style }}
-      onClick={handleClick}
-    >
-      {children}
-    </View>
-  );
-});
-
-/** Container组件显示名称 */
-ContainerComponent.displayName = 'Container';
-
-/** 导出Container组件 */
-export const Container = ContainerComponent;