taro-uno-ui 0.9.0-beta

package/src/components/layout/Col/Col.types.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+import type { RowGutter } from '../Row/Row.types';
+
+/** Col组件跨度 */
+export type ColSpan = number | `${number}`;
+
+/** Col组件偏移量 */
+export type ColOffset = number | `${number}`;
+
+/** Col组件排序 */
+export type ColOrder = number | `${number}`;
+
+/** Col组件引用 */
+export interface ColRef {
+  /** 获取元素引用 */
+  element: any;
+  /** 获取当前跨度 */
+  getSpan: () => ColSpan;
+  /** 获取当前偏移量 */
+  getOffset: () => ColOffset;
+  /** 获取当前排序 */
+  getOrder: () => ColOrder;
+  /** 设置跨度 */
+  setSpan: (_span: ColSpan) => void;
+  /** 设置偏移量 */
+  setOffset: (_offset: ColOffset) => void;
+  /** 设置排序 */
+  setOrder: (_order: ColOrder) => void;
+  /** 滚动到视图 */
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+}
+
+/** Col组件属性 */
+export interface ColProps extends BaseComponentProps {
+  /** 子元素 */
+  children?: ReactNode;
+  /** 跨度 (1-24) */
+  span?: ColSpan;
+  /** 偏移量 */
+  offset?: ColOffset;
+  /** 排序 */
+  order?: ColOrder;
+  /** 从父组件Row继承的间距 */
+  gutter?: RowGutter;
+  /** 柔性布局 */
+  flex?: number | 'auto' | 'none';
+  /** 点击事件 */
+  onClick?: (_event: React.MouseEvent) => void;
+  /** 响应式断点 */
+  responsive?: {
+    xs?: Partial<ColProps>;
+    sm?: Partial<ColProps>;
+    md?: Partial<ColProps>;
+    lg?: Partial<ColProps>;
+    xl?: Partial<ColProps>;
+    xxl?: Partial<ColProps>;
+  };
+}

package/src/components/layout/Col/index.tsx

@@ -0,0 +1,3 @@
+export { Col, ColComponent } from './Col';
+export type { ColProps, ColRef, ColSpan, ColOffset, ColOrder } from './Col.types';
+export { colStyles } from './Col.styles';

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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,380 @@
+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()
+    })
+  })
+})