taro-uno-ui 0.9.0 → 1.0.1

package/src/components/feedback/Result/Result.styles.ts

@@ -9,63 +9,63 @@ export const resultStyles: Record<string, CSSProperties> = {
     padding: '48px 32px',
     textAlign: 'center',
   },
-  
+
   iconContainer: {
     marginBottom: '24px',
   },
-  
+
   icon: {
     fontSize: '72px',
     fontWeight: 'bold',
     lineHeight: 1,
   },
-  
+
   iconSuccess: {
     color: '#22c55e',
   },
-  
+
   iconError: {
     color: '#ef4444',
   },
-  
+
   iconInfo: {
     color: '#0ea5e9',
   },
-  
+
   iconWarning: {
     color: '#f59e0b',
   },
-  
+
   iconLoading: {
     color: '#6b7280',
   },
-  
+
   icon404: {
     color: '#6b7280',
   },
-  
+
   icon403: {
     color: '#6b7280',
   },
-  
+
   icon500: {
     color: '#6b7280',
   },
-  
+
   content: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     gap: '16px',
   },
-  
+
   title: {
     fontSize: '24px',
     fontWeight: '600',
     color: '#1f2937',
     margin: 0,
   },
-  
+
   subTitle: {
     fontSize: '16px',
     color: '#6b7280',
@@ -73,67 +73,67 @@ export const resultStyles: Record<string, CSSProperties> = {
     lineHeight: 1.5,
     maxWidth: '400px',
   },
-  
+
   children: {
     marginTop: '24px',
     width: '100%',
   },
-  
+
   extra: {
     marginTop: '24px',
   },
-  
+
   // Status variations
   success: {
     color: '#22c55e',
   },
-  
+
   error: {
     color: '#ef4444',
   },
-  
+
   info: {
     color: '#0ea5e9',
   },
-  
+
   warning: {
     color: '#f59e0b',
   },
-  
+
   loading: {
     color: '#6b7280',
   },
-  
+
   // Size variations
   small: {
     padding: '24px 16px',
   },
-  
+
   smallIcon: {
     fontSize: '48px',
   },
-  
+
   smallTitle: {
     fontSize: '18px',
   },
-  
+
   smallSubTitle: {
     fontSize: '14px',
   },
-  
+
   large: {
     padding: '64px 48px',
   },
-  
+
   largeIcon: {
     fontSize: '96px',
   },
-  
+
   largeTitle: {
     fontSize: '32px',
   },
-  
+
   largeSubTitle: {
     fontSize: '18px',
   },
-};
+};

package/src/components/feedback/Result/Result.tsx

@@ -187,39 +187,27 @@ export const ResultComponent = forwardRef<ResultRef, ResultProps>((props, ref) =
   };
 
   return (
-    <View
-      ref={containerRef}
-      style={containerStyle}
-      {...restProps}
-    >
+    <View ref={containerRef} style={containerStyle} {...restProps}>
       <View style={iconContainerStyle}>
         <View style={iconStyle}>
           <Text>{getStatusIcon()}</Text>
         </View>
       </View>
-      
+
       <View style={contentStyle}>
         <View style={titleStyle}>
           <Text>{internalTitle || getStatusText()}</Text>
         </View>
-        
+
         {internalSubTitle && (
           <View style={subTitleStyle}>
             <Text>{internalSubTitle}</Text>
           </View>
         )}
-        
-        {children && (
-          <View style={childrenStyle}>
-            {children}
-          </View>
-        )}
-        
-        {extra && (
-          <View style={extraStyle}>
-            {extra}
-          </View>
-        )}
+
+        {children && <View style={childrenStyle}>{children}</View>}
+
+        {extra && <View style={extraStyle}>{extra}</View>}
       </View>
     </View>
   );
@@ -230,4 +218,4 @@ ResultComponent.displayName = 'Result';
 
 /** 导出结果组件 */
 export const Result = ResultComponent;
-export default Result;
+export default Result;

package/src/components/feedback/Result/Result.types.ts

@@ -57,7 +57,7 @@ export interface ResultConfig {
   extraStyle?: React.CSSProperties;
 }
 
-export interface ResultUtils {
+export interface ResultUtilsType {
   /** 获取状态对应的颜色 */
   getStatusColor: (_status: ResultStatus) => string;
   /** 获取状态对应的图标 */
@@ -70,7 +70,7 @@ export interface ResultUtils {
   validateStatus: (_status: string) => boolean;
 }
 
-export const ResultUtils: ResultUtils = {
+export const ResultUtils: ResultUtilsType = {
   getStatusColor: (status: ResultStatus) => {
     const colorMap = {
       success: '#22c55e',
@@ -84,7 +84,7 @@ export const ResultUtils: ResultUtils = {
     };
     return colorMap[status] || '#6b7280';
   },
-  
+
   getStatusIcon: (status: ResultStatus) => {
     const iconMap = {
       success: '✓',
@@ -98,7 +98,7 @@ export const ResultUtils: ResultUtils = {
     };
     return iconMap[status] || '';
   },
-  
+
   getStatusTitle: (status: ResultStatus) => {
     const titleMap = {
       success: '成功',
@@ -112,7 +112,7 @@ export const ResultUtils: ResultUtils = {
     };
     return titleMap[status] || status;
   },
-  
+
   formatResultData: (data: any) => {
     return {
       ...data,
@@ -120,9 +120,9 @@ export const ResultUtils: ResultUtils = {
       formattedTime: new Date().toLocaleString(),
     };
   },
-  
+
   validateStatus: (status: string) => {
     const validStatuses = ['success', 'error', 'info', 'warning', 'loading', '404', '403', '500'];
     return validStatuses.includes(status);
   },
-};
+};

package/src/components/feedback/Result/index.tsx

@@ -1,3 +1,3 @@
 export { Result } from './Result';
 export type { ResultProps, ResultRef, ResultStatus } from './Result.types';
-export { resultStyles } from './Result.styles';
+export { resultStyles } from './Result.styles';

package/src/components/feedback/Toast/Toast.styles.ts

@@ -13,5 +13,5 @@ export const toastStyles = {
   error: 'bg-red-500/90',
   warning: 'bg-yellow-500/90',
   info: 'bg-blue-500/90',
-  loading: 'bg-gray-500/90'
+  loading: 'bg-gray-500/90',
 };

package/src/components/feedback/Toast/Toast.tsx

@@ -15,7 +15,6 @@ export const ToastComponent = forwardRef<ToastRef, ToastProps>((props, ref) => {
     closable = false,
     showIcon = true,
     icon,
-    animated = true,
     animationDuration = 300,
     closeable = false,
     onShow,
@@ -24,7 +23,6 @@ export const ToastComponent = forwardRef<ToastRef, ToastProps>((props, ref) => {
     onClick,
     className,
     style,
-    ...restProps
   } = props;
 
   const toastRef = useRef<any>(null);
@@ -100,7 +98,7 @@ export const ToastComponent = forwardRef<ToastRef, ToastProps>((props, ref) => {
 
   // 处理点击
   const handleClick = useCallback(
-    (event: React.MouseEvent) => {
+    (event: any) => {
       onClick?.(event);
     },
     [onClick],
@@ -193,7 +191,7 @@ export const ToastComponent = forwardRef<ToastRef, ToastProps>((props, ref) => {
   }
 
   return (
-    <View ref={toastRef} className={toastClassName} style={toastStyle} onClick={handleClick} {...restProps}>
+    <View ref={toastRef} className={toastClassName} style={toastStyle} onClick={handleClick}>
       {getIcon() && (
         <View className="taro-uno-toast__icon" style={{ marginRight: '8px', fontSize: '16px' }}>
           {getIcon()}
@@ -203,7 +201,11 @@ export const ToastComponent = forwardRef<ToastRef, ToastProps>((props, ref) => {
         <Text>{internalMessage}</Text>
       </View>
       {(closable || closeable) && (
-        <View className="taro-uno-toast__close" style={{ marginLeft: '8px', fontSize: '16px', color: 'white' }} onClick={handleClose}>
+        <View
+          className="taro-uno-toast__close"
+          style={{ marginLeft: '8px', fontSize: '16px', color: 'white' }}
+          onClick={handleClose}
+        >
           ×
         </View>
       )}
@@ -279,8 +281,6 @@ const createGlobalToastContainer = () => {
     opacity: 0;
   `;
 
-  
-
   // 添加图标
   if (props.showIcon !== false) {
     const iconElement = document.createElement('span');
@@ -324,30 +324,42 @@ const createGlobalToastContainer = () => {
           toastElement.parentNode.removeChild(toastElement);
         }
       }, 300);
-    }
+    },
   };
 
   return globalToastInstance;
 };
 
 (Toast as any).info = (config: ToastMethodConfig | string) => {
-  return (Toast as any).show(typeof config === 'string' ? { message: config, type: 'info' } : { ...config, type: 'info' });
+  return (Toast as any).show(
+    typeof config === 'string' ? { message: config, type: 'info' } : { ...config, type: 'info' },
+  );
 };
 
 (Toast as any).success = (config: ToastMethodConfig | string) => {
-  return (Toast as any).show(typeof config === 'string' ? { message: config, type: 'success' } : { ...config, type: 'success' });
+  return (Toast as any).show(
+    typeof config === 'string' ? { message: config, type: 'success' } : { ...config, type: 'success' },
+  );
 };
 
 (Toast as any).warning = (config: ToastMethodConfig | string) => {
-  return (Toast as any).show(typeof config === 'string' ? { message: config, type: 'warning' } : { ...config, type: 'warning' });
+  return (Toast as any).show(
+    typeof config === 'string' ? { message: config, type: 'warning' } : { ...config, type: 'warning' },
+  );
 };
 
 (Toast as any).error = (config: ToastMethodConfig | string) => {
-  return (Toast as any).show(typeof config === 'string' ? { message: config, type: 'error' } : { ...config, type: 'error' });
+  return (Toast as any).show(
+    typeof config === 'string' ? { message: config, type: 'error' } : { ...config, type: 'error' },
+  );
 };
 
 (Toast as any).loading = (config: ToastMethodConfig | string) => {
-  return (Toast as any).show(typeof config === 'string' ? { message: config, type: 'loading', duration: 0 } : { ...config, type: 'loading', duration: 0 });
+  return (Toast as any).show(
+    typeof config === 'string'
+      ? { message: config, type: 'loading', duration: 0 }
+      : { ...config, type: 'loading', duration: 0 },
+  );
 };
 
 (Toast as any).hide = () => {

package/src/components/feedback/Tooltip/Tooltip.examples.tsx

@@ -8,7 +8,7 @@ import { Tooltip } from './Tooltip';
 
 export const TooltipExamples = () => {
   const [visible, setVisible] = useState(false);
-  const tooltipRef = useRef < any > (null);
+  const tooltipRef = useRef<any>(null);
 
   return (
     <div className="p-8 space-y-8">
@@ -180,10 +180,7 @@ export const TooltipExamples = () => {
             <Tooltip title="受控 Tooltip" visible={visible}>
               <button className="px-4 py-2 bg-purple-500 text-white rounded">受控模式</button>
             </Tooltip>
-            <button
-              onClick={() => setVisible(!visible)}
-              className="px-4 py-2 bg-gray-500 text-white rounded"
-            >
+            <button onClick={() => setVisible(!visible)} className="px-4 py-2 bg-gray-500 text-white rounded">
               {visible ? '隐藏' : '显示'}
             </button>
           </div>
@@ -200,7 +197,7 @@ export const TooltipExamples = () => {
                 color: 'white',
                 borderRadius: '8px',
                 padding: '16px',
-                boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+                boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
               }}
             >
               <button className="px-4 py-2 bg-blue-500 text-white rounded">自定义样式</button>
@@ -211,7 +208,7 @@ export const TooltipExamples = () => {
               arrow
               popupStyle={{
                 backgroundColor: '#ff6b6b',
-                color: 'white'
+                color: 'white',
               }}
             >
               <button className="px-4 py-2 bg-green-500 text-white rounded">自定义箭头</button>
@@ -298,17 +295,11 @@ export const TooltipExamples = () => {
         <div className="space-y-2">
           <h3 className="text-lg font-medium">偏移量</h3>
           <div className="flex space-x-4">
-            <Tooltip
-              title="偏移量 [10, 10]"
-              offset={[10, 10]}
-            >
+            <Tooltip title="偏移量 [10, 10]" offset={[10, 10]}>
               <button className="px-4 py-2 bg-blue-500 text-white rounded">偏移 10px</button>
             </Tooltip>
 
-            <Tooltip
-              title="偏移量 [20, -10]"
-              offset={[20, -10]}
-            >
+            <Tooltip title="偏移量 [20, -10]" offset={[20, -10]}>
               <button className="px-4 py-2 bg-green-500 text-white rounded">偏移 20px</button>
             </Tooltip>
           </div>
@@ -328,31 +319,19 @@ export const TooltipExamples = () => {
         <div className="space-y-2">
           <h3 className="text-lg font-medium">API 调用</h3>
           <div className="flex space-x-4">
-            <Tooltip
-              title="可通过 ref 调用"
-              ref={tooltipRef}
-            >
+            <Tooltip title="可通过 ref 调用" ref={tooltipRef}>
               <button className="px-4 py-2 bg-purple-500 text-white rounded">API 控制</button>
             </Tooltip>
 
-            <button
-              onClick={() => tooltipRef.current?.show()}
-              className="px-4 py-2 bg-green-500 text-white rounded"
-            >
+            <button onClick={() => tooltipRef.current?.show()} className="px-4 py-2 bg-green-500 text-white rounded">
               显示
             </button>
 
-            <button
-              onClick={() => tooltipRef.current?.hide()}
-              className="px-4 py-2 bg-red-500 text-white rounded"
-            >
+            <button onClick={() => tooltipRef.current?.hide()} className="px-4 py-2 bg-red-500 text-white rounded">
               隐藏
             </button>
 
-            <button
-              onClick={() => tooltipRef.current?.toggle()}
-              className="px-4 py-2 bg-gray-500 text-white rounded"
-            >
+            <button onClick={() => tooltipRef.current?.toggle()} className="px-4 py-2 bg-gray-500 text-white rounded">
               切换
             </button>
           </div>
@@ -369,11 +348,7 @@ export const TooltipExamples = () => {
           <div className="space-y-4">
             <div className="flex items-center space-x-4">
               <label className="w-24">用户名：</label>
-              <input
-                type="text"
-                className="px-3 py-2 border rounded"
-                placeholder="请输入用户名"
-              />
+              <input type="text" className="px-3 py-2 border rounded" placeholder="请输入用户名" />
               <Tooltip title="用户名长度应为 3-20 个字符">
                 <span className="text-gray-400 cursor-help">?</span>
               </Tooltip>
@@ -381,11 +356,7 @@ export const TooltipExamples = () => {
 
             <div className="flex items-center space-x-4">
               <label className="w-24">密码：</label>
-              <input
-                type="password"
-                className="px-3 py-2 border rounded"
-                placeholder="请输入密码"
-              />
+              <input type="password" className="px-3 py-2 border rounded" placeholder="请输入密码" />
               <Tooltip title="密码应包含字母、数字和特殊字符">
                 <span className="text-gray-400 cursor-help">?</span>
               </Tooltip>
@@ -438,15 +409,21 @@ export const TooltipExamples = () => {
           <h3 className="text-lg font-medium">链接提示</h3>
           <div className="flex space-x-4">
             <Tooltip title="访问官方网站">
-              <a href="#" className="text-blue-500 underline">官方网站</a>
+              <a href="#" className="text-blue-500 underline">
+                官方网站
+              </a>
             </Tooltip>
 
             <Tooltip title="查看文档">
-              <a href="#" className="text-blue-500 underline">文档</a>
+              <a href="#" className="text-blue-500 underline">
+                文档
+              </a>
             </Tooltip>
 
             <Tooltip title="提交问题">
-              <a href="#" className="text-blue-500 underline">问题反馈</a>
+              <a href="#" className="text-blue-500 underline">
+                问题反馈
+              </a>
             </Tooltip>
           </div>
         </div>

package/src/components/feedback/Tooltip/Tooltip.styles.ts

@@ -187,10 +187,11 @@ export const tooltipStyles = {
 
   // 获取提示框样式
   getTooltipStyle: (placement?: TooltipPlacement, color?: string, overlayStyle?: CSSProperties): CSSProperties => {
-    const placementStyle = placement && tooltipStyles['placements'][placement] 
-      ? tooltipStyles['placements'][placement] 
-      : tooltipStyles['placements'].top;
-    
+    const placementStyle =
+      placement && tooltipStyles['placements'][placement]
+        ? tooltipStyles['placements'][placement]
+        : tooltipStyles['placements'].top;
+
     return {
       ...tooltipStyles['tooltip'],
       ...placementStyle,
@@ -202,12 +203,12 @@ export const tooltipStyles = {
   // 获取箭头样式
   getArrowStyle: (placement?: TooltipPlacement, color?: string, arrow?: boolean): CSSProperties => {
     if (!arrow) return {};
-    
-    const arrowKey = `${placement}Arrow` as keyof typeof tooltipStyles['placements'];
+
+    const arrowKey = `${placement}Arrow` as keyof (typeof tooltipStyles)['placements'];
     const arrowStyle = tooltipStyles['placements'][arrowKey];
-    
+
     if (!arrowStyle) return {};
-    
+
     return {
       ...tooltipStyles['arrow'],
       ...arrowStyle,
@@ -286,30 +287,23 @@ export const tooltipStyles = {
 
   // 获取主题样式
   getThemeStyle: (theme?: string): CSSProperties => {
-    const themeKey = theme as keyof typeof tooltipStyles['themes'];
+    const themeKey = theme as keyof (typeof tooltipStyles)['themes'];
     return tooltipStyles['themes'][themeKey] || tooltipStyles['themes'].dark;
   },
 };
 
 // CSS 类名工具函数
 export const getTooltipClasses = (placement: TooltipPlacement, visible: boolean): string => {
-  const baseClasses = [
-    'tooltip',
-    `tooltip-${placement}`,
-    visible ? 'tooltip-visible' : 'tooltip-hidden',
-  ];
-  
+  const baseClasses = ['tooltip', `tooltip-${placement}`, visible ? 'tooltip-visible' : 'tooltip-hidden'];
+
   return baseClasses.join(' ');
 };
 
 export const getArrowClasses = (placement: TooltipPlacement, arrow: boolean): string => {
   if (!arrow) return '';
-  
-  const baseClasses = [
-    'tooltip-arrow',
-    `tooltip-arrow-${placement}`,
-  ];
-  
+
+  const baseClasses = ['tooltip-arrow', `tooltip-arrow-${placement}`];
+
   return baseClasses.join(' ');
 };
 
@@ -343,4 +337,4 @@ export const tooltipCssClasses = {
   info: 'tooltip-info',
 };
 
-export default tooltipStyles;
+export default tooltipStyles;

package/src/components/feedback/Tooltip/Tooltip.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { vi, describe, test, expect, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { Tooltip } from './Tooltip';