taro-uno-ui 0.9.0 → 1.0.0

package/src/components/navigation/Steps/Steps.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, useImperativeHandle } from 'react'
-import { View, Text } from '@tarojs/components'
-import { StepsProps, StepsRef, Step } from './Steps.types'
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { View, Text } from '@tarojs/components';
+import { StepsProps, StepsRef, Step } from './Steps.types';
 import {
   getStepsStyle,
   getStepStyle,
@@ -9,105 +9,104 @@ import {
   getStepContentStyle,
   getStepTitleStyle,
   getStepDescriptionStyle,
-  getStepTailStyle
-} from './Steps.styles'
+  getStepTailStyle,
+} from './Steps.styles';
 // import { Step } from './Step'
 
-export const Steps = forwardRef<StepsRef, StepsProps>(({
-  className,
-  style,
-  current = 0,
-  direction = 'horizontal',
-  labelPlacement = 'horizontal',
-  progressDot = false,
-  initial = 0,
-  status,
-  size = 'default',
-  items,
-  children,
-  onChange,
-  ...props
-}, ref) => {
-  const stepsRef = React.useRef<HTMLDivElement>(null)
+export const Steps = forwardRef<StepsRef, StepsProps>(
+  (
+    {
+      className,
+      style,
+      current = 0,
+      direction = 'horizontal',
+      labelPlacement: _labelPlacement = 'horizontal',
+      progressDot = false,
+      initial: _initial = 0,
+      status,
+      size = 'default',
+      items,
+      children: _children,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const stepsRef = React.useRef<HTMLDivElement>(null);
 
-  useImperativeHandle(ref, () => ({
-    getSteps: () => stepsRef.current,
-  }))
+    useImperativeHandle(ref, () => ({
+      getSteps: () => stepsRef.current,
+    }));
 
-  const getStepStatus = (index: number): 'wait' | 'process' | 'finish' | 'error' => {
-    if (status) {
-      if (index === current && status !== 'finish') {
-        return status
+    const getStepStatus = (index: number): 'wait' | 'process' | 'finish' | 'error' => {
+      if (status) {
+        if (index === current && status !== 'finish') {
+          return status;
+        }
       }
-    }
 
-    if (index < current) {
-      return 'finish'
-    }
-    if (index === current) {
-      return 'process'
-    }
-    return 'wait'
-  }
+      if (index < current) {
+        return 'finish';
+      }
+      if (index === current) {
+        return 'process';
+      }
+      return 'wait';
+    };
 
-  const handleStepClick = (index: number) => {
-    if (onChange) {
-      onChange(index)
-    }
-  }
+    const handleStepClick = (index: number) => {
+      if (onChange) {
+        onChange(index);
+      }
+    };
 
-  const steps: Step[] = items || [];
+    const steps: Step[] = items || [];
 
-  return (
-    <View
-      ref={stepsRef}
-      className={className}
-      style={getStepsStyle(direction, style) as React.CSSProperties}
-      {...props}
-    >
-      {steps.map((step, index) => {
-        const stepStatus = step.status || getStepStatus(index)
-        const isLast = index === steps.length - 1
+    return (
+      <View
+        ref={stepsRef}
+        className={className}
+        style={getStepsStyle(direction, style) as React.CSSProperties}
+        {...props}
+      >
+        {steps.map((step, index) => {
+          const stepStatus = step.status || getStepStatus(index);
+          const isLast = index === steps.length - 1;
 
-        return (
-          <View
-            key={index}
-            style={getStepStyle(direction, isLast) as React.CSSProperties}
-            onClick={() => !step.disabled && handleStepClick(index)}
-          >
-            <View style={getStepItemStyle() as React.CSSProperties}>
-              {progressDot ? (
-                typeof progressDot === 'function' ? (
-                  progressDot(index, stepStatus, step.title, step.description)
+          return (
+            <View
+              key={index}
+              style={getStepStyle(direction, isLast) as React.CSSProperties}
+              onClick={() => !step.disabled && handleStepClick(index)}
+            >
+              <View style={getStepItemStyle() as React.CSSProperties}>
+                {progressDot ? (
+                  typeof progressDot === 'function' ? (
+                    progressDot(index, stepStatus, step.title, step.description)
+                  ) : (
+                    <View style={getStepIconStyle(stepStatus, size) as React.CSSProperties}>•</View>
+                  )
                 ) : (
-                  <View style={getStepIconStyle(stepStatus, size) as React.CSSProperties}>•</View>
-                )
-              ) : (
-                <View style={getStepIconStyle(stepStatus, size) as React.CSSProperties}>
-                  {step.icon || index + 1}
-                </View>
-              )}
-              <View style={getStepContentStyle() as React.CSSProperties}>
-                <Text style={getStepTitleStyle(stepStatus) as React.CSSProperties}>
-                  {step.title}
-                </Text>
-                {step.description && (
-                  <Text style={getStepDescriptionStyle() as React.CSSProperties}>
-                    {step.description}
-                  </Text>
+                  <View style={getStepIconStyle(stepStatus, size) as React.CSSProperties}>
+                    {step.icon || index + 1}
+                  </View>
                 )}
+                <View style={getStepContentStyle() as React.CSSProperties}>
+                  <Text style={getStepTitleStyle(stepStatus) as React.CSSProperties}>{step.title}</Text>
+                  {step.description && (
+                    <Text style={getStepDescriptionStyle() as React.CSSProperties}>{step.description}</Text>
+                  )}
+                </View>
               </View>
+              {!isLast && <View style={getStepTailStyle(direction, stepStatus === 'finish') as React.CSSProperties} />}
             </View>
-            {!isLast && (
-              <View style={getStepTailStyle(direction, stepStatus === 'finish') as React.CSSProperties} />
-            )}
-          </View>
-        )
-      })}
-    </View>
-  )
-})
+          );
+        })}
+      </View>
+    );
+  },
+);
 
-Steps.displayName = 'Steps'
+Steps.displayName = 'Steps';
 
-export default Steps
+export default Steps;

package/src/components/navigation/Steps/Steps.types.ts

@@ -1,47 +1,47 @@
-import { ReactNode } from 'react'
-import { ViewProps } from '@tarojs/components'
+import { ReactNode } from 'react';
+import { ViewProps } from '@tarojs/components';
 
 export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
 export type StepDirection = 'horizontal' | 'vertical';
 
 export interface Step {
-  title: ReactNode
-  description?: ReactNode
-  status?: 'wait' | 'process' | 'finish' | 'error'
-  icon?: ReactNode
-  disabled?: boolean
+  title: ReactNode;
+  description?: ReactNode;
+  status?: 'wait' | 'process' | 'finish' | 'error';
+  icon?: ReactNode;
+  disabled?: boolean;
 }
 
 export interface StepsProps extends ViewProps {
-  className?: string
-  style?: React.CSSProperties
-  current?: number
-  direction?: 'horizontal' | 'vertical'
-  labelPlacement?: 'horizontal' | 'vertical'
-  progressDot?: boolean | ((_index: number, status: string, title: ReactNode, description: ReactNode) => ReactNode)
-  initial?: number
-  status?: 'wait' | 'process' | 'finish' | 'error'
-  size?: 'default' | 'small'
-  items?: Step[]
-  children?: ReactNode
-  onChange?: (_current: number) => void
+  className?: string;
+  style?: React.CSSProperties;
+  current?: number;
+  direction?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
+  progressDot?: boolean | ((_index: number, status: string, title: ReactNode, description: ReactNode) => ReactNode);
+  initial?: number;
+  status?: 'wait' | 'process' | 'finish' | 'error';
+  size?: 'default' | 'small';
+  items?: Step[];
+  children?: ReactNode;
+  onChange?: (_current: number) => void;
 }
 
 export interface StepsRef {
-  getSteps: () => HTMLDivElement | null
+  getSteps: () => HTMLDivElement | null;
 }
 
 export interface StepProps extends ViewProps {
-  className?: string
-  style?: React.CSSProperties
-  title: ReactNode
-  description?: ReactNode
-  status?: 'wait' | 'process' | 'finish' | 'error'
-  icon?: ReactNode
-  disabled?: boolean
-  stepNumber?: number
+  className?: string;
+  style?: React.CSSProperties;
+  title: ReactNode;
+  description?: ReactNode;
+  status?: 'wait' | 'process' | 'finish' | 'error';
+  icon?: ReactNode;
+  disabled?: boolean;
+  stepNumber?: number;
 }
 
 export interface StepRef {
-  getStep: () => HTMLDivElement | null
-}
+  getStep: () => HTMLDivElement | null;
+}

package/src/components/navigation/Steps/index.tsx

@@ -1,3 +1,3 @@
 export { Steps } from './Steps';
 export type { StepsProps, StepsRef, StepProps, StepStatus, StepDirection } from './Steps.types';
-export { stepsStyles } from './Steps.styles';
+export { stepsStyles } from './Steps.styles';

package/src/components/navigation/Tabs/Tabs.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent, act } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { Tabs } from '../Tabs'
 import type { TabsProps, TabsRef, TabItem } from '../Tabs.types'
 
@@ -53,7 +54,7 @@ vi.mock('../Tabs.styles', () => ({
       cursor: 'pointer',
       color: '#1890ff'
     }),
-    getContentStyle: (position: any, animated: any) => ({
+    getContentStyle: (_position: any, _animated: any) => ({
       flex: 1,
       position: 'relative',
       overflow: 'hidden'
@@ -307,7 +308,7 @@ describe('Tabs Component', () => {
 
   describe('Custom Rendering', () => {
     it('uses custom tab bar render', () => {
-      const customTabBar = (props: TabsProps) => (
+      const customTabBar = (_props: TabsProps) => (
         <div data-testid="custom-tab-bar">Custom Tab Bar</div>
       )
       render(<Tabs items={mockItems} renderTabBar={customTabBar} data-testid="tabs" />)

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 // import { View } from '@tarojs/components'; // Commented out - unused
-import { BaseComponentProps, Size } from '../../../types';
+import { Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
 
 /** Tab位置 */
 export type TabPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -52,7 +53,7 @@ export interface TabsRef {
 }
 
 /** Tabs组件属性 */
-export interface TabsProps extends BaseComponentProps {
+export interface TabsProps extends StandardBaseComponentProps {
   /** Tab项列表 */
   items: TabItem[];
   /** 激活的键值 */
@@ -96,7 +97,7 @@ export interface TabsProps extends BaseComponentProps {
 }
 
 /** TabPane组件属性 */
-export interface TabPaneProps extends BaseComponentProps {
+export interface TabPaneProps extends StandardBaseComponentProps {
   /** Tab键值 */
   tabKey: string;
   /** Tab标题 */

package/src/components/navigation/index.tsx

@@ -1,14 +1,20 @@
-// 导出导航组件
-export * from './Menu';
-export * from './Tabs';
-export * from './Pagination';
-export * from './Steps';
-export * from './NavBar';
-export * from './Tree';
+/**
+ * Taro-Uno 导航组件库
+ * 提供用于页面导航的 UI 组件，包括菜单、标签页、分页、步骤条等
+ */
 
-// 导出类型
+// 导出 Menu 组件
+export { Menu } from './Menu';
+export type { MenuProps, MenuRef, MenuItem, MenuMode, MenuTheme } from './Menu/Menu.types';
+export { menuStyles } from './Menu/Menu.styles';
+
+// 导出 Tabs 组件
+export { Tabs } from './Tabs';
 export type { TabsProps, TabsRef, TabPosition, TabType, TabSize, TabItem, TabPaneProps } from './Tabs/Tabs.types';
+export { tabsStyles } from './Tabs/Tabs.styles';
 
+// 导出 Pagination 组件
+export { Pagination } from './Pagination';
 export type {
   PaginationProps,
   PaginationRef,
@@ -16,17 +22,16 @@ export type {
   PaginationPosition,
   PaginationAlign,
 } from './Pagination/Pagination.types';
+export { paginationStyles } from './Pagination/Pagination.styles';
 
-export type { MenuProps, MenuRef, MenuItem, MenuMode, MenuTheme } from './Menu/Menu.types';
-
+// 导出 Steps 组件
+export { Steps } from './Steps';
 export type { StepsProps, StepsRef, StepProps, StepStatus, StepDirection } from './Steps/Steps.types';
-export type { NavBarProps, NavBarRef, NavBarPosition, NavBarTheme } from './NavBar/NavBar.types';
-
-// 导出样式
-export { tabsStyles } from './Tabs/Tabs.styles';
-export { paginationStyles } from './Pagination/Pagination.styles';
-export { menuStyles } from './Menu/Menu.styles';
 export { stepsStyles } from './Steps/Steps.styles';
+
+// 导出 NavBar 组件
+export { NavBar } from './NavBar';
+export type { NavBarProps, NavBarRef, NavBarPosition, NavBarTheme } from './NavBar/NavBar.types';
 export { navBarStyles } from './NavBar/NavBar.styles';
 
 // 导航组件工具函数

package/src/constants/index.ts

@@ -637,7 +637,7 @@ export const REGEX_PATTERNS = {
   idCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
 
   // URL
-  url: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,
+  url: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/,
 
   // IP地址
   ipAddress: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,

package/src/hooks/index.ts

@@ -3,108 +3,58 @@
  * 提供所有自定义hooks的统一访问入口
  */
 
-import { useState, useEffect, useCallback, useRef } from 'react';
-export * from './useAsync';
-
-// ==================== 通用Hook工具类型 ====================
-
-/** Hook返回值的通用类型 */
-export type HookResult<T> = [T, (value: T) => void];
-
-/** 异步Hook返回值类型 */
-export type AsyncHookResult<T, E = Error> = {
-  data: T | null;
-  loading: boolean;
-  error: E | null;
-  execute: () => Promise<void>;
-  reset: () => void;
-};
-
-/** 事件处理Hook返回值类型 */
-export type EventHandlerResult = {
-  handler: (event: unknown) => void;
-  cancel: () => void;
-};
-
-// ==================== 便捷Hook ====================
-
-/** 获取最新状态值的Hook */
-export function useLatestState<T>(initialValue: T): [T, (value: T) => void, T] {
-  const [state, setState] = useState<T>(initialValue);
-  const latestRef = useRef<T>(state);
-
-  const setLatestState = useCallback((value: T) => {
-    latestRef.current = value;
-    setState(value);
-  }, []);
-
-  return [state, setLatestState, latestRef.current];
-}
-
-/** 条件执行的Hook */
-export function useConditionalEffect(
-  effect: React.EffectCallback,
-  deps: React.DependencyList,
-  condition: (deps: React.DependencyList) => boolean
-) {
-  return useEffect(() => {
-    if (condition(deps)) {
-      return effect();
-    }
-  }, deps);
-}
+// State management
+export * from './useToggle';
+export * from './useCounter';
+export * from './useStorage';
 
-// ==================== Hook验证工具 ====================
+export * from './useStateManagement';
 
-/** Hook依赖验证 */
-export function useHookDepsValidator(
-  hookName: string,
-  deps: React.DependencyList,
-  validator: (deps: React.DependencyList) => boolean
-): void {
-  useEffect(() => {
-    if (!validator(deps)) {
-      console.warn(`[${hookName}] Invalid dependencies detected`, deps);
-    }
-  }, deps);
-}
-
-/** Hook性能监控 */
-export function useHookPerformance(hookName: string): void {
-  const startTime = useRef<number>(Date.now());
-
-  useEffect(() => {
-    const endTime = Date.now();
-    const duration = endTime - startTime.current;
-
-    if (duration > 16) { // 超过一帧的时间
-      console.warn(`[${hookName}] Hook execution took ${duration}ms`);
-    }
-
-    startTime.current = Date.now();
-  });
-}
-
-// ==================== Hook组合模式 ====================
-
-/** 组合多个Hook的返回值 */
-export function useCombinedHooks<T extends Record<string, unknown>>(
-  hooks: { [K in keyof T]: () => T[K] }
-): T {
-  const result = {} as T;
-
-  for (const key in hooks) {
-    result[key] = hooks[key]();
-  }
-
-  return result;
-}
+export * from './useAsync';
 
-/** 条件Hook执行 */
-export function useConditionalHook<T>(
-  condition: boolean,
-  hook: () => T,
-  fallback?: () => T
-): T | undefined {
-  return condition ? hook() : fallback?.();
-}
+// Event handling - only export non-debounce/throttle hooks
+export { useClickHandler, useLongPress, useDrag, useKeyboard, useEventDelegate } from './useEventHandling';
+
+// Lifecycle hooks - only export non-media-query hooks
+export {
+  useMounted,
+  useLifecycle,
+  useOnce,
+  useConditionalEffect,
+  useAsyncEffect,
+  useTimer,
+  useDelay,
+  useNetworkState,
+  usePageVisibility,
+  useWindowSize,
+  useScrollPosition,
+} from './useLifecycle';
+
+// Data fetching
+export * from './useRequest';
+export * from './useMutation';
+
+// UI interactions
+export * from './useClickOutside';
+export * from './useEventListener';
+
+// Utility hooks
+export * from './useDebounce';
+export * from './useDeepCompareEffect';
+export * from './usePrevious';
+
+export * from './useMediaQuery';
+
+// Performance
+export * from './usePerformance';
+export * from './usePerformanceMonitor';
+
+export * from './usePlatform';
+export * from './useStyle';
+export * from './useTheme';
+export * from './useVirtualScroll';
+export * from './types';
+
+// Re-export common types
+export type { UseRequestOptions, UseRequestResult } from './useRequest';
+export type { UseMutationResult } from './useMutation';

package/src/hooks/types.ts

@@ -1,10 +1,9 @@
-export type AsyncState<T> = {
-    data: T | undefined;
-    error: Error | undefined;
-    loading: boolean;
+export type HookAsyncState<T> = {
+  data: T | undefined;
+  error: Error | undefined;
+  loading: boolean;
 };
 
 export type Mutation<T> = (updater: T | ((prev: T | undefined) => T)) => void;
 
 export type QueryKey = string | readonly unknown[];
-