@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/Collapsible/Collapsible.tsx

@@ -1,88 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { withTheme, makeStyles, useTheme } from '@rneui/themed';
-import TapasIcon from '../Icons/TapasIcon';
-import TapasText from '../Text/Text';
-
-export interface CollapsibleProps extends PropsWithChildren {
-  title: string;
-  initialOpen?: boolean;
-  onToggle?: (isOpen: boolean) => void;
-  titleStyle?: any;
-  contentStyle?: any;
-  iconColor?: string;
-  iconSize?: number;
-  testID?: string;
-}
-
-const Collapsible: React.FC<CollapsibleProps> = ({ 
-  children, 
-  title,
-  initialOpen = false,
-  testID,
-  onToggle,
-  titleStyle,
-  contentStyle,
-  iconColor,
-  iconSize = 18,
-}) => {
-  const [isOpen, setIsOpen] = useState(initialOpen);
-  const theme = useTheme();
-  const styles = useStyles();
-
-  const handleToggle = () => {
-    const newState = !isOpen;
-    setIsOpen(newState);
-    onToggle?.(newState);
-  };
-
-  return (
-    <View style={styles.container} testID={testID}>
-      <TouchableOpacity
-        style={styles.heading}
-        onPress={handleToggle}
-        activeOpacity={0.8}
-      >
-        <TapasIcon
-          name={isOpen ? 'expand_less' : 'expand_more'}
-          size={iconSize}
-          color={iconColor || theme.theme.colors.grey1}
-        />
-        <TapasText style={[styles.title, titleStyle]}>
-          {title}
-        </TapasText>
-      </TouchableOpacity>
-      {isOpen && (
-        <View style={[styles.content, contentStyle]}>
-          {children}
-        </View>
-      )}
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    backgroundColor: theme.colors.background,
-  },
-  heading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingVertical: 12,
-    paddingHorizontal: 4,
-  },
-  title: {
-    flex: 1,
-    fontSize: 16,
-    fontWeight: '600',
-    color: theme.colors.primary,
-  },
-  content: {
-    marginTop: 6,
-    marginLeft: 24,
-    paddingBottom: 12,
-  },
-}));
-
-export default withTheme(React.memo(Collapsible));

package/components/ComboChart/ComboChart.tsx

@@ -1,216 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import Text from '../Text/Text';
-
-// 动态导入依赖
-let RechartsComboChart: any, RechartsLine: any, RechartsBar: any, RechartsXAxis: any, RechartsYAxis: any, CartesianGrid: any, Tooltip: any, Legend: any, ResponsiveContainer: any;
-
-if (Platform.OS === 'web') {
-  // Web 环境使用 recharts
-  try {
-    const recharts = require('recharts');
-    RechartsComboChart = recharts.ComposedChart;
-    RechartsLine = recharts.Line;
-    RechartsBar = recharts.Bar;
-    RechartsXAxis = recharts.XAxis;
-    RechartsYAxis = recharts.YAxis;
-    CartesianGrid = recharts.CartesianGrid;
-    Tooltip = recharts.Tooltip;
-    Legend = recharts.Legend;
-    ResponsiveContainer = recharts.ResponsiveContainer;
-  } catch (e) {
-    console.warn('Recharts not available for Web', e);
-  }
-}
-
-const DEFAULT_COMBO_COLORS = ['#FF6B00', '#0066CC', '#00B894', '#6C5CE7', '#FFB800', '#D63031'];
-
-export interface ComboChartDataSeries {
-  name: string;
-  data: number[];
-  type: 'bar' | 'line';
-  color?: string;
-  yAxisId?: 'left' | 'right';
-  // 折线图样式配置
-  strokeWidth?: number;
-  dotRadius?: number;
-  activeDotRadius?: number;
-  hideDot?: boolean;
-}
-
-export interface ComboChartProps {
-  categories: string[];
-  series: ComboChartDataSeries[];
-  width?: number;
-  height?: number;
-  showGrid?: boolean;
-  showLabels?: boolean;
-  showLegend?: boolean;
-  legendPosition?: 'top' | 'bottom' | 'left' | 'right'; // 图例位置，默认 bottom
-  xAxisAngle?: number; // X轴标签旋转角度，默认-45（逆时针旋转），0表示不旋转
-  xAxisInterval?: number | 'preserveStartEnd' | 'preserveStart' | 'preserveEnd'; // X轴标签显示间隔
-  yAxisFormat?: (value: number) => string;
-  style?: any;
-  testID?: string;
-}
-
-export const ComboChart: React.FC<ComboChartProps> = ({
-  categories,
-  series,
-  width,
-  height = 350,
-  showGrid = true,
-  showLabels = true,
-  showLegend = true,
-  legendPosition = 'bottom',
-  xAxisAngle = -45,
-  xAxisInterval = 0,
-  yAxisFormat = (value) => value.toString(),
-  style,
-  testID,
-}) => {
-  if (!categories || categories.length === 0 || !series || series.length === 0) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <Text style={styles.emptyText}>No data available</Text>
-      </View>
-    );
-  }
-
-  // Web 环境使用 Recharts
-  if (Platform.OS === 'web' && RechartsComboChart) {
-    // 转换数据格式 (memoized at hook level would require moving out of platform check)
-    const chartData = categories.map((category, categoryIndex) => {
-      const point: any = { name: category };
-      series.forEach((serie) => {
-        point[serie.name] = serie.data[categoryIndex] || 0;
-      });
-      return point;
-    });
-
-    const defaultColors = DEFAULT_COMBO_COLORS;
-    const hasRightAxis = series.some(s => s.yAxisId === 'right');
-
-    // 根据 xAxisAngle 计算底部边距
-    const bottomMargin = showLabels 
-      ? (xAxisAngle !== 0 ? Math.max(60, Math.abs(xAxisAngle) * 0.5 + 40) : 60)
-      : 20;
-
-    const ChartComponent = (
-      <RechartsComboChart 
-        data={chartData}
-        margin={{ top: 20, right: hasRightAxis ? 30 : 20, left: 20, bottom: bottomMargin }}
-      >
-        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
-        
-        {showLabels && (
-          <RechartsXAxis 
-            dataKey="name"
-            angle={xAxisAngle}
-            textAnchor={xAxisAngle !== 0 ? (xAxisAngle < 0 ? 'end' : 'start') : 'middle'}
-            height={xAxisAngle !== 0 ? Math.max(60, Math.abs(xAxisAngle) * 0.5 + 40) : undefined}
-            interval={xAxisInterval}
-            style={{ fontSize: 10 }}
-          />
-        )}
-        
-        <RechartsYAxis 
-          yAxisId="left"
-          tickFormatter={yAxisFormat} 
-          style={{ fontSize: 10 }} 
-        />
-        
-        {hasRightAxis && (
-          <RechartsYAxis 
-            yAxisId="right"
-            orientation="right"
-            tickFormatter={yAxisFormat}
-            style={{ fontSize: 10 }}
-          />
-        )}
-        
-        <Tooltip 
-          contentStyle={{ 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          }}
-        />
-        
-        {showLegend && (
-          <Legend 
-            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'top'}
-            align={legendPosition === 'left' || legendPosition === 'right' ? legendPosition : 'center'}
-            layout={legendPosition === 'left' || legendPosition === 'right' ? 'vertical' : 'horizontal'}
-            wrapperStyle={{
-              paddingBottom: legendPosition === 'top' ? 24 : 0,
-            }}
-          />
-        )}
-        
-        {series.map((serie, index) => {
-          const serieColor = serie.color || defaultColors[index % defaultColors.length];
-          const yAxis = serie.yAxisId || 'left';
-          
-          if (serie.type === 'bar') {
-            return (
-              <RechartsBar
-                key={serie.name}
-                dataKey={serie.name}
-                fill={serieColor}
-                yAxisId={yAxis}
-              />
-            );
-          } else {
-            return (
-              <RechartsLine
-                key={serie.name}
-                type="monotone"
-                dataKey={serie.name}
-                stroke={serieColor}
-                strokeWidth={serie.strokeWidth ?? 2}
-                dot={serie.hideDot ? false : { fill: serieColor, r: serie.dotRadius ?? 4 }}
-                activeDot={{ r: serie.activeDotRadius ?? 6 }}
-                yAxisId={yAxis}
-              />
-            );
-          }
-        })}
-      </RechartsComboChart>
-    );
-
-    return (
-      <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-        {ResponsiveContainer ? (
-          <ResponsiveContainer width="100%" height={height - 20}>
-            {ChartComponent}
-          </ResponsiveContainer>
-        ) : (
-          ChartComponent
-        )}
-      </View>
-    );
-  }
-
-  // React Native 端暂时不支持，显示提示信息
-  return (
-    <View style={[styles.container, { height }, style]}>
-      <Text style={styles.emptyText}>
-        ComboChart is currently only available on Web platform.{'\n'}
-        Please use BarChart and LineChart separately for mobile.
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-  },
-  emptyText: {
-    textAlign: 'center',
-    marginTop: 100,
-    color: '#999',
-  },
-});
-

package/components/ComboChart/index.tsx

@@ -1,3 +0,0 @@
-export { ComboChart } from './ComboChart';
-export type { ComboChartProps, ComboChartDataSeries } from './ComboChart';
-

package/components/DashboardCard/DashboardCard.tsx

@@ -1,221 +0,0 @@
-import React, {useState} from 'react';
-import TapasIcon from  '../Icons/TapasIcon';
-import {View, Text, TouchableOpacity, StyleProp, ViewStyle} from 'react-native';
-import {makeStyles} from "@rneui/themed";
-import Hoverable from "../Hoverable/Hoverable";
-export interface Props {
-    cardContainerStyle?: StyleProp<ViewStyle>;
-    cardStyle?: StyleProp<ViewStyle>;
-    contentStyle?: StyleProp<ViewStyle>;
-    headerStyle?: StyleProp<ViewStyle>;
-    titleStyle?: StyleProp<ViewStyle>;
-    disabled?: boolean;
-    testID?: string;
-    header?: {
-        icon?: string;
-        title?: string;
-        description?: string[];
-        action?: React.ReactNode;
-        onPressAction?: (value: any) => void;
-        actionStyle?: StyleProp<ViewStyle>;
-    }
-    content?: string;
-    footer?: {
-        title?: string;
-        description?: string;
-        onPress?: () => void;
-        icon?: string;
-    };
-    onCardPress?: () => void;
-}
-const useStyles = makeStyles((theme, ...props) => {
-    const {disabled} = props[0] as { disabled?: boolean };
-    return {
-        cardWrap: {
-            display: "flex",
-            backgroundColor: disabled ? theme.colors.grey5 : theme.colors.white,
-            borderRadius: theme.radius.rounded,
-            borderColor: theme.colors.grey5,
-            flex: 1,
-        },
-        cardWrapHover: {
-            shadowColor: theme.colors.grey5,
-            shadowOffset: { width: 0, height: 8 }, // 第一部分的 offset
-            shadowRadius: 24,
-        },
-        headerWrap: {
-            display: "flex",
-            flexDirection: "row",
-            paddingLeft: 16,
-            paddingRight: 10,
-            paddingTop: 10,
-            paddingBottom:8,
-            justifyContent: "space-between",
-        },
-        titleWrap: {
-            display: "flex",
-            flexDirection: "column",
-            maxWidth: "100%",
-        },
-        title: {
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            flexGrow: 1,
-        },
-        titleText: {
-            marginLeft: 8,
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightL,
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-            overflow: "hidden",
-            maxWidth: '100%',
-        },
-        icon: {},
-        descriptionWrap: {
-            marginTop: 4,
-            display: "flex",
-            flexDirection: "row",
-        },
-        description: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeS,
-            fontWeight: theme.fonts.weightR,
-            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
-            backgroundColor: theme.colors.grey5,
-            padding: 4,
-            marginRight: 4,
-        },
-        actionStyle: {
-            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
-        },
-        footerWrap: {
-            display: "flex",
-            flexDirection: "row",
-            padding: 16,
-            justifyContent: "space-between"
-        },
-        footerTitleWrap: {
-
-        },
-        footerDescriptionText:{
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeL,
-            fontWeight: theme.fonts.weightR,
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        footerTitleText: {
-            fontFamily: theme.fonts.fontFamily,
-            fontSize: theme.fonts.sizeXs,
-            fontWeight: theme.fonts.weightL,
-            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
-        },
-        footerIcon: {
-            borderRadius: 14,
-            borderWidth: 1,
-            borderColor: disabled ? theme.colors.grey2 : theme.colors.grey3,
-            height: 28,
-            width: 28,
-            transform: "rotate(180deg)",
-            justifyContent: "center",
-            alignItems: "center",
-        },
-        footerIconStyle: {
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        titleIcon: {
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        contentTextStyle: {
-            color: disabled ? theme.colors.grey2 : theme.colors.primary,
-        },
-        disabled: {
-            backgroundColor: theme.colors.grey5,
-        }
-    }
-});
-const DashboardCard: React.FC<Props> = ({header, content, footer, onCardPress, testID, ...props}) => {
-    const styles = useStyles(props);
-    const [isHovered, setIsHovered] = useState(false);
-    const handleMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-    };
-    return <Hoverable
-        onHoverIn={handleMouseEnter}
-        onHoverOut={handleMouseLeave}
-        style={props.cardContainerStyle}
-    >
-        <TouchableOpacity 
-            testID={testID}
-            onPress={() => {
-                if (props?.disabled) return;
-                onCardPress && onCardPress();
-            }}
-        >
-            <View
-                style={[styles.cardWrap,  isHovered && !props?.disabled && styles.cardWrapHover ,props.cardStyle]}
-            >
-                <View style={[styles.headerWrap, props.headerStyle]}>
-                    <View style={[styles.titleWrap, props.titleStyle]}>
-                        <View style={styles.title}>
-                            {
-                                header?.icon && <TapasIcon name={header?.icon} size={24} style={styles.titleIcon} />
-                            }
-                            {
-                                header?.title &&  <Text style={styles.titleText} numberOfLines={1} ellipsizeMode="tail">{header?.title}</Text>
-                            }
-                        </View>
-                        {
-                            header?.description && header?.description?.length > 0 && <View style={styles.descriptionWrap}>
-                                {
-                                    header?.description?.map((desc, index) => {
-                                        return desc && <Text style={styles.description}  key={index}>{desc}</Text>
-                                    })
-                                }
-                            </View>
-                        }
-                    </View>
-                    {
-                        header?.action && <TouchableOpacity style={header?.actionStyle} onPress={() => {header?.onPressAction && header?.onPressAction(header)}} accessibilityRole="button" accessibilityLabel="More actions">
-                            {
-                                header?.action
-                            }
-                        </TouchableOpacity>
-                    }
-                </View>
-                <View style={props.contentStyle}>{
-                    content && typeof content === 'string' ? <Text style={styles.contentTextStyle}>{content}</Text> : content
-                }</View>
-               <View style={styles.footerWrap}>
-                   <View style={styles.footerTitleWrap}>
-                       {
-                           footer?.title && <View>
-                               <Text style={styles.footerTitleText}>{footer?.title}</Text>
-                           </View>
-                       }
-                       {
-                           footer?.description && <View>
-                               <Text style={styles.footerDescriptionText}>{footer?.description}</Text>
-                           </View>
-                       }
-                   </View>
-                   {
-                       footer?.icon && <TouchableOpacity style={styles.footerIcon} onPress={() => {
-                           if(props?.disabled) return;
-                         footer?.onPress && footer?.onPress();
-                     }} accessibilityRole="button" accessibilityLabel={footer?.title || 'Footer action'}>
-                           <TapasIcon name={footer?.icon || ''} size={20} style={styles.footerIconStyle} />
-                       </TouchableOpacity>
-                   }
-               </View>
-            </View>
-        </TouchableOpacity>
-    </Hoverable>
-};
-
-export default React.memo(DashboardCard);