@beppla/tapas-ui 1.4.32 → 1.4.34

package/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,88 @@
+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(Collapsible);

package/components/ComboChart/ComboChart.tsx

@@ -0,0 +1,214 @@
+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);
+  }
+}
+
+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) {
+    // 转换数据格式
+    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 = ['#FF6B00', '#0066CC', '#00B894', '#6C5CE7', '#FFB800', '#D63031'];
+    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

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

package/components/DEPENDENCY_WARNINGS.md

@@ -0,0 +1,242 @@
+# 依赖警告处理指南
+
+## 常见警告及解决方案
+
+### 1. `Module not found: Can't resolve 'd3-hierarchy'`
+
+**原因：** WordCloud 的气泡模式需要 `d3-hierarchy`，但该依赖被标记为可选，不会自动安装。
+
+**解决方案：**
+
+#### 方案 1：安装依赖（推荐）
+
+如果你需要使用气泡词云功能：
+
+```bash
+npm install d3-hierarchy
+# 或
+yarn add d3-hierarchy
+```
+
+#### 方案 2：忽略警告
+
+如果你只使用传统词云，可以忽略此警告，或在 webpack 配置中屏蔽：
+
+```js
+// webpack.config.js
+module.exports = {
+  plugins: [
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^d3-hierarchy$/,
+      contextRegExp: /@beppla\/tapas-ui/,
+    }),
+  ],
+};
+```
+
+#### 方案 3：条件导入
+
+在代码中使用时动态检测：
+
+```tsx
+import { WordCloud } from '@beppla/tapas-ui';
+
+// 只使用传统模式，不会触发 d3-hierarchy 加载
+<WordCloud
+  variant="traditional"  // 默认值
+  words={data}
+/>
+
+// 如果使用气泡模式，确保已安装 d3-hierarchy
+<WordCloud
+  variant="bubble"  // 需要 d3-hierarchy
+  words={data}
+/>
+```
+
+---
+
+### 2. `Module not found: NestedPieChart` 路径错误
+
+**错误示例：**
+
+```tsx
+// ❌ 错误：不要使用相对路径访问 node_modules 内部文件
+const m = require("../../../../../node_modules/@beppla/tapas-ui/commonjs/PieChart/NestedPieChart");
+```
+
+**原因：** 使用了错误的导入路径。
+
+**正确导入方式：**
+
+```tsx
+// ✅ 正确：从包的根路径导入
+import { NestedPieChart } from '@beppla/tapas-ui';
+
+// ✅ 或者从子路径导入（如果需要）
+import { NestedPieChart } from '@beppla/tapas-ui/PieChart';
+```
+
+**如果需要动态导入：**
+
+```tsx
+// ✅ 正确的动态导入
+let NestedPieChart;
+try {
+  if (Platform.OS === 'web') {
+    // 从包的正确导出路径导入
+    const module = await import('@beppla/tapas-ui');
+    NestedPieChart = module.NestedPieChart;
+  }
+} catch (error) {
+  console.warn('NestedPieChart not available');
+}
+```
+
+---
+
+## 完整依赖列表
+
+### WordCloud 组件
+
+| 依赖 | 用途 | 平台 | 是否必需 |
+|------|------|------|----------|
+| `react-wordcloud` | 传统词云 | Web | 可选 |
+| `d3-cloud` | 传统词云 | Web | 可选 |
+| `d3-hierarchy` | 气泡词云 | Web | 可选 |
+| `react-native-svg` | 所有模式 | RN | 可选 |
+
+### PieChart / NestedPieChart 组件
+
+| 依赖 | 用途 | 平台 | 是否必需 |
+|------|------|------|----------|
+| `recharts` | 图表渲染 | Web | 可选 |
+| `react-native-svg` | 图表渲染 | RN | 可选 |
+| `react-native-svg-charts` | 图表渲染 | RN | 可选 |
+
+### LineChart / BarChart / ComboChart 组件
+
+| 依赖 | 用途 | 平台 | 是否必需 |
+|------|------|------|----------|
+| `recharts` | 图表渲染 | Web | 可选 |
+| `react-native-svg-charts` | 图表渲染 | RN | 可选 |
+
+---
+
+## 按需安装策略
+
+### 策略 1：最小安装
+
+只使用基础组件（不包含图表）：
+
+```bash
+npm install @beppla/tapas-ui react react-native
+```
+
+### 策略 2：Web 图表
+
+使用 Web 端图表组件：
+
+```bash
+npm install @beppla/tapas-ui react react-native
+npm install recharts d3-hierarchy react-wordcloud
+```
+
+### 策略 3：RN 图表
+
+使用 React Native 图表组件：
+
+```bash
+npm install @beppla/tapas-ui react react-native
+npm install react-native-svg react-native-svg-charts
+```
+
+### 策略 4：全平台图表（推荐）
+
+同时支持 Web 和 RN：
+
+```bash
+npm install @beppla/tapas-ui react react-native
+
+# Web 依赖
+npm install recharts d3-hierarchy react-wordcloud d3-cloud
+
+# RN 依赖
+npm install react-native-svg react-native-svg-charts
+```
+
+---
+
+## 生产环境优化
+
+### Tree Shaking
+
+确保你的打包工具支持 tree-shaking，未使用的组件不会被打包：
+
+```js
+// 只导入需要的组件
+import { WordCloud, NestedPieChart } from '@beppla/tapas-ui';
+
+// ✅ 只有 WordCloud 和 NestedPieChart 会被打包
+// ✅ 未使用的组件（如 BarChart）不会被打包
+```
+
+### 按需加载
+
+对于大型应用，可以使用动态导入：
+
+```tsx
+// 懒加载气泡词云
+const BubbleCloudPage = lazy(() => 
+  import('./pages/BubbleCloud').then(module => ({
+    default: module.BubbleCloudPage
+  }))
+);
+```
+
+---
+
+## 常见问题
+
+### Q: 为什么不将这些依赖设为必需依赖？
+
+**A:** 这些依赖较大（如 `recharts` ~500KB），并且不是所有用户都需要所有功能。将它们设为可选依赖可以：
+- 减小默认包体积
+- 让用户按需安装
+- 支持更灵活的使用场景
+
+### Q: 警告会影响应用运行吗？
+
+**A:** 不会。这些警告只是提示缺少可选依赖，不影响：
+- 已安装依赖的功能正常使用
+- 应用的其他部分
+- 构建和部署流程
+
+### Q: 如何确认依赖是否正确安装？
+
+**A:** 运行以下命令：
+
+```bash
+# 检查 d3-hierarchy
+npm list d3-hierarchy
+
+# 检查 recharts
+npm list recharts
+
+# 检查所有 @beppla/tapas-ui 依赖
+npm list --depth=0 | grep -E "d3|recharts|svg"
+```
+
+---
+
+## 获取帮助
+
+如果遇到其他依赖问题：
+
+1. 查看 [完整文档](https://github.com/your-repo/tapas-ui)
+2. 搜索 [GitHub Issues](https://github.com/your-repo/tapas-ui/issues)
+3. 提交新的 Issue 并附上：
+   - 错误信息
+   - 你的 package.json
+   - 使用的平台（Web / RN）
+   - 组件代码示例