taro-uno-ui 1.0.0 → 1.0.2

package/src/components/display/Calendar/Calendar.types.ts

@@ -1,91 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-
-export interface CalendarDate {
-  /** 年份 */
-  year: number;
-  /** 月份 (1-12) */
-  month: number;
-  /** 日期 (1-31) */
-  day: number;
-  /** 是否为当前月 */
-  isCurrentMonth?: boolean;
-  /** 是否为今天 */
-  isToday?: boolean;
-  /** 是否被选中 */
-  isSelected?: boolean;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 事件数据 */
-  events?: CalendarEvent[];
-}
-
-export interface CalendarEvent {
-  /** 事件ID */
-  id: string;
-  /** 事件标题 */
-  title: string;
-  /** 事件描述 */
-  description?: string;
-  /** 事件类型 */
-  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
-  /** 事件颜色 */
-  color?: string;
-  /** 开始时间 */
-  startTime?: string;
-  /** 结束时间 */
-  endTime?: string;
-}
-
-export interface CalendarProps {
-  /** 当前选中日期 */
-  value?: Date;
-  /** 默认日期 */
-  defaultValue?: Date;
-  /** 显示模式 */
-  mode?: 'month' | 'year';
-  /** 是否显示今天按钮 */
-  showToday?: boolean;
-  /** 是否显示事件 */
-  showEvents?: boolean;
-  /** 事件数据 */
-  events?: CalendarEvent[];
-  /** 禁用日期函数 */
-  disabledDate?: (_date: Date) => boolean;
-  /** 自定义日期渲染 */
-  dateRender?: (_date: CalendarDate) => ReactNode;
-  /** 自定义月份渲染 */
-  monthRender?: (_month: number, year: number) => ReactNode;
-  /** 日期选择事件 */
-  onSelect?: (_date: Date) => void;
-  /** 日期变化事件 */
-  onChange?: (_date: Date) => void;
-  /** 模式变化事件 */
-  onModeChange?: (_mode: 'month' | 'year') => void;
-  /** 自定义样式 */
-  style?: CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-  /** 无障碍标签 */
-  ariaLabel?: string;
-  /** 无障碍角色 */
-  role?: string;
-}
-
-export interface CalendarRef {
-  /** DOM 元素 */
-  element: any;
-  /** 获取当前日期 */
-  getCurrentDate: () => Date;
-  /** 设置日期 */
-  setDate: (_date: Date) => void;
-  /** 获取显示模式 */
-  getMode: () => 'month' | 'year';
-  /** 设置显示模式 */
-  setMode: (_mode: 'month' | 'year') => void;
-  /** 跳转到今天 */
-  goToToday: () => void;
-  /** 上一个月/年 */
-  goPrev: () => void;
-  /** 下一个月/年 */
-  goNext: () => void;
-}

package/src/components/display/Calendar/index.ts

@@ -1,3 +0,0 @@
-export { Calendar } from './Calendar';
-export { calendarStyles } from './Calendar.styles';
-export type { CalendarProps, CalendarRef, CalendarDate, CalendarEvent } from './Calendar.types';

package/src/components/display/Card/Card.styles.ts

@@ -1,89 +0,0 @@
-import { createStyles } from '@/theme/styles';
-
-export const CardStyles = createStyles({
-  base: 'bg-white dark:bg-gray-800 rounded-lg overflow-hidden transition-all duration-200',
-
-  shadow: {
-    none: '',
-    small: 'shadow-sm',
-    default: 'shadow-md',
-    large: 'shadow-lg',
-  },
-
-  bordered: `
-    border border-gray-200 dark:border-gray-700
-  `,
-
-  hoverable: `
-    hover:shadow-lg
-    hover:scale-[1.02]
-    cursor-pointer
-  `,
-
-  loading: `
-    opacity-70
-    pointer-events-none
-  `,
-
-  cover: `
-    w-full
-    h-48
-    overflow-hidden
-  `,
-
-  header: `
-    flex
-    items-center
-    justify-between
-    p-4
-    border-b border-gray-200 dark:border-gray-700
-  `,
-
-  headerContent: `
-    flex-1
-  `,
-
-  title: `
-    text-lg
-    font-semibold
-    text-gray-900 dark:text-white
-  `,
-
-  subtitle: `
-    text-sm
-    text-gray-500 dark:text-gray-400
-    mt-1
-  `,
-
-  extra: `
-    flex-shrink-0
-  `,
-
-  content: `
-    p-4
-  `,
-
-  loadingContent: `
-    space-y-3
-  `,
-
-  loadingSkeleton: `
-    h-4
-    bg-gray-200 dark:bg-gray-700
-    rounded
-    animate-pulse
-  `,
-
-  actions: `
-    flex
-    items-center
-    justify-end
-    p-4
-    border-t border-gray-200 dark:border-gray-700
-    space-x-2
-  `,
-
-  action: `
-    flex-shrink-0
-  `,
-});

package/src/components/display/Card/Card.test.tsx

@@ -1,182 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { vi, describe, test, expect, beforeEach } from 'vitest'
-import { Card } from './Card'
-
-// Mock Taro components
-vi.mock('@tarojs/components', () => ({
-  View: React.forwardRef<any, any>(({ children, ...props }, ref) => {
-    const { className, style, id, role, hidden, onClick, ...rest } = props as any
-    const allowed: Record<string, any> = { 
-      className, style, id, role, hidden, onClick, ref 
-    }
-    Object.keys(rest).forEach((key) => {
-      if (key.startsWith('aria-') || key.startsWith('data-')) {
-        allowed[key] = rest[key]
-      }
-    })
-    return <div {...allowed}>{children}</div>
-  }),
-}))
-
-// Mock @/utils
-vi.mock('@/utils', () => ({
-  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
-  PlatformDetector: {
-    getPlatform: () => 'h5',
-  },
-}))
-
-describe('Card Component', () => {
-  const mockOnPress = vi.fn()
-
-  beforeEach(() => {
-    mockOnPress.mockClear()
-  })
-
-  test('renders basic card', () => {
-    render(<Card>Card Content</Card>)
-    expect(screen.getByText('Card Content')).toBeInTheDocument()
-  })
-
-  test('renders card with title', () => {
-    render(<Card title="Card Title">Content</Card>)
-    expect(screen.getByText('Card Title')).toBeInTheDocument()
-    expect(screen.getByText('Content')).toBeInTheDocument()
-  })
-
-  test('renders card with title and subtitle', () => {
-    render(
-      <Card title="Card Title" subtitle="Card Subtitle">
-        Content
-      </Card>
-    )
-    expect(screen.getByText('Card Title')).toBeInTheDocument()
-    expect(screen.getByText('Card Subtitle')).toBeInTheDocument()
-    expect(screen.getByText('Content')).toBeInTheDocument()
-  })
-
-  test('renders card with extra content', () => {
-    render(
-      <Card title="Card Title" extra={<button>Extra</button>}>
-        Content
-      </Card>
-    )
-    expect(screen.getByText('Card Title')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Extra' })).toBeInTheDocument()
-  })
-
-  test('renders card with cover', () => {
-    render(
-      <Card cover={<div data-testid="cover">Cover</div>}>
-        Content
-      </Card>
-    )
-    expect(screen.getByTestId('cover')).toBeInTheDocument()
-  })
-
-  test('renders card with actions', () => {
-    const actions = [
-      <button key="1">Action 1</button>,
-      <button key="2">Action 2</button>
-    ]
-    render(
-      <Card actions={actions}>
-        Content
-      </Card>
-    )
-    expect(screen.getByText('Action 1')).toBeInTheDocument()
-    expect(screen.getByText('Action 2')).toBeInTheDocument()
-  })
-
-  test('handles press event when hoverable', () => {
-    render(
-      <Card hoverable onPress={mockOnPress}>
-        Content
-      </Card>
-    )
-    const card = screen.getByTestId('card')
-    fireEvent.click(card)
-    expect(mockOnPress).toHaveBeenCalledTimes(1)
-  })
-
-  test('does not handle press event when not hoverable', () => {
-    render(
-      <Card onPress={mockOnPress}>
-        Content
-      </Card>
-    )
-    const card = screen.getByTestId('card')
-    fireEvent.click(card)
-    expect(mockOnPress).not.toHaveBeenCalled()
-  })
-
-  test('shows loading state', () => {
-    render(<Card loading>Content</Card>)
-    const card = screen.getByTestId('card')
-    expect(card).toHaveClass('opacity-70')
-    expect(card).toHaveClass('pointer-events-none')
-    expect(card).toHaveClass('taro-uno-h5-card--loading')
-    expect(screen.getByTestId('card-loading-content')).toBeInTheDocument()
-  })
-
-  test('applies border when bordered', () => {
-    render(<Card bordered>Content</Card>)
-    const card = screen.getByTestId('card')
-    expect(card).toHaveClass('taro-uno-h5-card--bordered')
-    expect(card).toHaveAttribute('data-bordered', 'true')
-  })
-
-  test('does not apply border when not bordered', () => {
-    render(<Card bordered={false}>Content</Card>)
-    const card = screen.getByTestId('card')
-    expect(card).not.toHaveClass('taro-uno-h5-card--bordered')
-    expect(card).toHaveAttribute('data-bordered', 'false')
-  })
-
-  test('applies shadow based on shadow prop', () => {
-    const { rerender } = render(<Card shadow="none">Content</Card>)
-    let card = screen.getByTestId('card')
-    expect(card).not.toHaveClass('taro-uno-h5-card--shadow-small')
-    expect(card).not.toHaveClass('taro-uno-h5-card--shadow-default')
-    expect(card).not.toHaveClass('taro-uno-h5-card--shadow-large')
-    expect(card).toHaveAttribute('data-shadow', 'none')
-
-    rerender(<Card shadow="small">Content</Card>)
-    card = screen.getByTestId('card')
-    expect(card).toHaveClass('taro-uno-h5-card--shadow-small')
-    expect(card).toHaveAttribute('data-shadow', 'small')
-
-    rerender(<Card shadow="default">Content</Card>)
-    card = screen.getByTestId('card')
-    expect(card).toHaveClass('taro-uno-h5-card--shadow-default')
-    expect(card).toHaveAttribute('data-shadow', 'default')
-
-    rerender(<Card shadow="large">Content</Card>)
-    card = screen.getByTestId('card')
-    expect(card).toHaveClass('taro-uno-h5-card--shadow-large')
-    expect(card).toHaveAttribute('data-shadow', 'large')
-  })
-
-  test('applies custom className', () => {
-    render(<Card className="custom-class">Content</Card>)
-    const card = screen.getByTestId('card')
-    expect(card).toHaveClass('custom-class')
-  })
-
-  test('applies custom style', () => {
-    const customStyle = { backgroundColor: 'red' }
-    render(<Card style={customStyle}>Content</Card>)
-    const card = screen.getByTestId('card')
-    const styleAttr = card.getAttribute('style')
-    expect(styleAttr).toContain('background-color: red')
-  })
-
-  test('forwards ref correctly', () => {
-    const ref = React.createRef<any>()
-    render(<Card ref={ref}>Content</Card>)
-    expect(ref.current).toBeTruthy()
-    expect(ref.current.getElement).toBeTruthy()
-    expect(screen.getByTestId('card')).toBe(ref.current.getElement())
-  })
-})

package/src/components/display/Card/Card.tsx

@@ -1,135 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View } from '@tarojs/components';
-import { CardProps, CardRef } from './Card.types';
-import { cn } from '@/utils/index';
-import { CardStyles } from './Card.styles';
-
-export const Card = forwardRef<CardRef, CardProps>((props, ref) => {
-  const {
-    children,
-    title,
-    subtitle,
-    extra,
-    cover,
-    actions,
-    hoverable = false,
-    bordered = true,
-    shadow = 'default',
-    loading = false,
-    className,
-    style,
-    onPress,
-    onLongPress,
-    ...rest
-  } = props;
-
-  // Create ref for DOM element access
-  const innerRef = React.useRef<any>(null);
-
-  // Handle ref forwarding
-  useImperativeHandle(ref, () => ({
-    getElement: () => innerRef.current,
-    getTitle: () => title?.toString() || null,
-    getContent: () => innerRef.current?.querySelector('[data-testid="card-content"]'),
-  }));
-
-  const handlePress = (e: any) => {
-    if (hoverable && onPress) {
-      onPress(e);
-    }
-  };
-
-  const renderCover = () => {
-    if (!cover) return null;
-    return (
-      <View className={CardStyles['cover']} data-testid="card-cover">
-        {cover}
-      </View>
-    );
-  };
-
-  const renderHeader = () => {
-    if (!title && !subtitle && !extra) return null;
-    return (
-      <View className={CardStyles['header']} data-testid="card-header">
-        <View className={CardStyles['headerContent']}>
-          {title && (
-            <View className={CardStyles['title']} data-testid="card-title">
-              {title}
-            </View>
-          )}
-          {subtitle && (
-            <View className={CardStyles['subtitle']} data-testid="card-subtitle">
-              {subtitle}
-            </View>
-          )}
-        </View>
-        {extra && (
-          <View className={CardStyles['extra']} data-testid="card-extra">
-            {extra}
-          </View>
-        )}
-      </View>
-    );
-  };
-
-  const renderActions = () => {
-    if (!actions || actions.length === 0) return null;
-    return (
-      <View className={CardStyles['actions']} data-testid="card-actions">
-        {actions.map((action, index) => (
-          <View key={index} className={CardStyles['action']} data-testid={`card-action-${index}`}>
-            {action}
-          </View>
-        ))}
-      </View>
-    );
-  };
-
-  const cardClasses = cn(
-    'taro-uno-h5-card',
-    CardStyles['base'],
-    CardStyles['shadow'][shadow],
-    bordered && CardStyles['bordered'],
-    bordered && 'taro-uno-h5-card--bordered',
-    shadow && `taro-uno-h5-card--shadow-${shadow}`,
-    hoverable && CardStyles['hoverable'],
-    hoverable && 'taro-uno-h5-card--hoverable',
-    loading && CardStyles['loading'],
-    loading && 'taro-uno-h5-card--loading',
-    className,
-  );
-
-  return (
-    <View
-      ref={innerRef}
-      className={cardClasses}
-      style={style}
-      onClick={handlePress}
-      onLongPress={onLongPress}
-      data-testid="card"
-      data-shadow={shadow}
-      data-bordered={bordered}
-      data-hoverable={hoverable}
-      data-loading={loading}
-      {...rest}
-    >
-      {renderCover()}
-      {renderHeader()}
-      <View className={CardStyles['content']} data-testid="card-content">
-        {loading ? (
-          <View className={CardStyles['loadingContent']} data-testid="card-loading-content">
-            <View className={CardStyles['loadingSkeleton']} data-testid="card-loading-skeleton" />
-            <View className={CardStyles['loadingSkeleton']} data-testid="card-loading-skeleton" />
-            <View className={CardStyles['loadingSkeleton']} data-testid="card-loading-skeleton" />
-          </View>
-        ) : (
-          children
-        )}
-      </View>
-      {renderActions()}
-    </View>
-  );
-});
-
-Card.displayName = 'Card';

package/src/components/display/Card/Card.types.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
-
-export interface CardProps extends StandardBaseComponentProps {
-  /** 卡片内容 */
-  children: React.ReactNode;
-  /** 卡片标题 */
-  title?: React.ReactNode;
-  /** 卡片副标题 */
-  subtitle?: React.ReactNode;
-  /** 卡片操作区域 */
-  extra?: React.ReactNode;
-  /** 卡片封面 */
-  cover?: React.ReactNode;
-  /** 卡片操作按钮 */
-  actions?: React.ReactNode[];
-  /** 是否可点击 */
-  hoverable?: boolean;
-  /** 是否显示边框 */
-  bordered?: boolean;
-  /** 阴影级别 */
-  shadow?: 'none' | 'small' | 'default' | 'large';
-  /** 加载状态 */
-  loading?: boolean;
-  /** 自定义类名 */
-  className?: string;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 点击事件 */
-  onPress?: (_event: React.MouseEvent | any) => void;
-  /** 长按事件 */
-  onLongPress?: (_event: React.MouseEvent | any) => void;
-}
-
-export interface CardRef {
-  /** 获取卡片元素 */
-  getElement: () => HTMLElement | null;
-  /** 获取卡片标题 */
-  getTitle: () => string | null;
-  /** 获取卡片内容 */
-  getContent: () => HTMLElement | null;
-}
-
-export interface CardStyleProps {
-  /** 平台类型 */
-  platform: string;
-  /** 阴影级别 */
-  shadow: CardProps['shadow'];
-  /** 是否可点击 */
-  hoverable: boolean;
-  /** 是否显示边框 */
-  bordered: boolean;
-  /** 加载状态 */
-  loading: boolean;
-}

package/src/components/display/Card/index.ts

@@ -1,3 +0,0 @@
-export { Card } from './Card';
-export { CardStyles as cardStyles } from './Card.styles';
-export type { CardProps, CardRef } from './Card.types';