@beppla/tapas-ui 1.5.10 → 1.5.12

package/package/module/WordCloud/README.md

@@ -0,0 +1,379 @@
+# WordCloud 组件
+
+`WordCloud` 是一个多功能词云组件，支持传统词云和气泡词云两种展示模式，用于可视化文本数据的频率或重要性。
+
+## 功能特性
+
+### 🎨 两种展示模式
+
+- **Traditional（传统模式）**：经典的词云布局，文字紧密堆叠，根据权重调整字号
+- **Bubble（气泡模式）**：全新的圆形气泡布局，每个词在独立圆形内显示，更现代化的设计
+
+### 🌐 跨平台支持
+
+- **Web 端**
+  - 传统模式：使用 `react-wordcloud`（基于 D3）
+  - 气泡模式：使用 `d3-hierarchy` 的 pack 布局算法
+- **React Native 端**
+  - 传统模式：自定义 SVG 螺旋布局
+  - 气泡模式：自定义圆形打包算法
+
+### ✨ 核心功能
+
+- ✅ 自动根据数值调整大小（字号或气泡半径）
+- ✅ 支持自定义颜色方案
+- ✅ 文字旋转支持（传统模式）
+- ✅ Hashtag 前缀支持（气泡模式）
+- ✅ 响应式布局
+- ✅ 交互事件支持（点击、悬停）
+- ✅ 空数据状态处理
+
+## 安装依赖
+
+### 必需依赖
+
+```bash
+npm install react react-native
+```
+
+### WordCloud 可选依赖
+
+根据你的使用场景安装对应的依赖：
+
+#### 传统词云（Web 端）
+
+```bash
+# Web 端需要
+npm install react-wordcloud d3-cloud
+```
+
+#### 气泡词云（Web 端）
+
+```bash
+# Web 端气泡模式需要
+npm install d3-hierarchy
+```
+
+#### React Native 端
+
+```bash
+# RN 端需要（两种模式都需要）
+npm install react-native-svg
+```
+
+### 完整安装（推荐）
+
+如果你想使用所有功能，建议一次性安装：
+
+```bash
+# Web 端完整依赖
+npm install react-wordcloud d3-cloud d3-hierarchy
+
+# React Native 端依赖
+npm install react-native-svg
+```
+
+### ⚠️ 依赖说明
+
+- 这些依赖被标记为 `optional`，不会自动安装
+- 如果缺少依赖，组件会优雅降级并显示提示信息
+- **警告处理**：如果你看到 `Module not found: Can't resolve 'd3-hierarchy'` 警告，这是正常的。你可以：
+  - **方案 1（推荐）**：安装 `d3-hierarchy` 以使用气泡词云功能
+  - **方案 2**：如果只使用传统词云，可以忽略这个警告（不影响使用）
+  - **方案 3**：在 webpack 配置中添加 `IgnorePlugin` 忽略警告（见下方）
+
+### 忽略警告（Webpack）
+
+如果你不需要气泡词云功能，可以在 webpack 配置中忽略警告：
+
+```js
+// webpack.config.js
+module.exports = {
+  plugins: [
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^d3-hierarchy$/,
+      contextRegExp: /@beppla\/tapas-ui/,
+    }),
+  ],
+};
+```
+
+或者使用 `externals`：
+
+```js
+// webpack.config.js
+module.exports = {
+  externals: {
+    'd3-hierarchy': 'd3-hierarchy',
+  },
+};
+```
+
+---
+
+### 传统词云
+
+```tsx
+import { WordCloud } from '@beppla/tapas-ui';
+
+const data = [
+  { text: 'React', value: 100 },
+  { text: 'TypeScript', value: 90 },
+  { text: 'JavaScript', value: 85 },
+  // ... more words
+];
+
+function App() {
+  return (
+    <WordCloud
+      words={data}
+      height={400}
+      colors={['#FF6B00', '#0066CC', '#00B894']}
+    />
+  );
+}
+```
+
+### 气泡词云
+
+```tsx
+import { WordCloud } from '@beppla/tapas-ui';
+
+const data = [
+  { text: 'Antioxidant', value: 100 },
+  { text: 'Vitamin C', value: 85 },
+  { text: 'Healthy', value: 70 },
+  // ... more words
+];
+
+function App() {
+  return (
+    <WordCloud
+      variant="bubble"
+      words={data}
+      height={600}
+      width={800}
+      showHashtag={true}
+      bubbleColors={{
+        primary: '#8B6F47',
+        secondary: '#D4C4B0',
+        text: '#FFFFFF',
+      }}
+      onBubbleClick={(word) => {
+        console.log('Clicked:', word.text);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+### 公共属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `words` | `WordCloudData[]` | **必填** | 词云数据数组 |
+| `width` | `number` | `undefined` | 宽度（px），不设置则自适应 |
+| `height` | `number` | `400` | 高度（px） |
+| `variant` | `'traditional' \| 'bubble'` | `'traditional'` | 展示模式 |
+| `style` | `ViewStyle` | `undefined` | 容器样式 |
+| `testID` | `string` | `undefined` | 测试 ID |
+
+### 传统模式属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `colors` | `string[]` | 棕色系 | 文字颜色数组 |
+| `fontFamily` | `string` | `'Arial, sans-serif'` | 字体 |
+| `fontSizes` | `[number, number]` | `[14, 60]` | 字号范围 [最小, 最大] |
+| `rotate` | `number` | `0` | 旋转角度（0 表示不旋转） |
+| `spiral` | `'archimedean' \| 'rectangular'` | `'archimedean'` | 螺旋布局算法 |
+| `padding` | `number` | `2` | 词间距 |
+
+### 气泡模式属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `bubbleColors` | `BubbleColors` | 见下方 | 气泡颜色配置 |
+| `showHashtag` | `boolean` | `true` | 是否显示 # 前缀 |
+| `minBubbleSize` | `number` | `30` | 最小气泡半径（px） |
+| `maxBubbleSize` | `number` | `150` | 最大气泡半径（px） |
+| `bubblePadding` | `number` | `4` | 气泡间距（px） |
+| `fontFamily` | `string` | `'Arial, sans-serif'` | 字体 |
+| `onBubbleClick` | `(word: WordCloudData) => void` | `undefined` | 气泡点击回调 |
+
+### 数据类型
+
+```typescript
+interface WordCloudData {
+  text: string;      // 词文本
+  value: number;     // 权重/频率
+  color?: string;    // 自定义颜色（可选）
+}
+
+interface BubbleColors {
+  primary: string;   // 深色气泡（高权重）
+  secondary: string; // 浅色气泡（低权重）
+  text?: string;     // 文字颜色
+}
+```
+
+### 默认气泡颜色
+
+```typescript
+const DEFAULT_BUBBLE_COLORS = {
+  primary: '#8B6F47',    // 深棕色
+  secondary: '#D4C4B0',  // 浅米色
+  text: '#FFFFFF',       // 白色
+};
+```
+
+## 使用场景
+
+### 传统词云适用于
+
+- 📊 热门话题分析
+- 🔍 关键词提取展示
+- 📈 用户反馈词频统计
+- 🏷️ 标签云
+- 📝 文章摘要可视化
+
+### 气泡词云适用于
+
+- 🎯 产品特性展示
+- 💼 品牌关键词
+- 🌟 用户兴趣标签
+- 📱 移动端友好展示
+- 🎨 现代化 Dashboard
+
+## 高级示例
+
+### Figma 设计复刻
+
+完全复刻提供的 Figma 设计：
+
+```tsx
+<WordCloud
+  variant="bubble"
+  words={[
+    { text: 'Antioxidant', value: 100 },
+    { text: 'Anti-inflammatory', value: 95 },
+    { text: 'Vitamin C', value: 88 },
+    { text: 'Boost immune system', value: 85 },
+    { text: 'Dietary', value: 72 },
+    { text: 'Healthy', value: 70 },
+    { text: 'Super food', value: 68 },
+    { text: 'Veggie', value: 65 },
+    { text: 'Kale', value: 62 },
+    { text: 'Organic', value: 50 },
+  ]}
+  height={600}
+  width={1000}
+  showHashtag={true}
+  bubbleColors={{
+    primary: '#8B6F47',
+    secondary: '#D4C4B0',
+    text: '#FFFFFF',
+  }}
+  minBubbleSize={40}
+  maxBubbleSize={180}
+  bubblePadding={8}
+/>
+```
+
+### 自定义颜色方案
+
+```tsx
+<WordCloud
+  variant="bubble"
+  words={techWords}
+  bubbleColors={{
+    primary: '#61DAFB',    // React 蓝
+    secondary: '#3178C6',  // TypeScript 蓝
+    text: '#FFFFFF',
+  }}
+  showHashtag={false}
+/>
+```
+
+### 交互式气泡
+
+```tsx
+<WordCloud
+  variant="bubble"
+  words={words}
+  onBubbleClick={(word) => {
+    // 处理点击事件
+    console.log('Clicked:', word.text, word.value);
+    // 可以触发导航、弹窗等
+  }}
+/>
+```
+
+## 性能优化
+
+### 数据量建议
+
+- **传统模式**：推荐 10-50 个词
+- **气泡模式**：推荐 8-20 个词（更多词会导致气泡变小）
+
+### 优化提示
+
+```tsx
+// 1. 使用 useMemo 缓存数据
+const wordsData = useMemo(() => processWords(rawData), [rawData]);
+
+// 2. 控制数据量
+const topWords = words.slice(0, 20);
+
+// 3. 合理设置尺寸
+<WordCloud
+  words={topWords}
+  height={600}  // 气泡模式建议 >= 500
+  width={800}   // 气泡模式建议 >= 600
+/>
+```
+
+## 注意事项
+
+1. **依赖安装**：确保已安装对应平台的依赖库
+2. **容器尺寸**：气泡模式需要足够的空间（建议 width >= 600, height >= 500）
+3. **文字长度**：过长的文本会自动截断或缩小字号
+4. **浏览器兼容**：Web 端需要支持 SVG 的现代浏览器
+5. **性能考虑**：大数据量时建议只显示 Top N 的词
+
+## 浏览器/平台支持
+
+- ✅ Chrome / Edge (最新版)
+- ✅ Firefox (最新版)
+- ✅ Safari (最新版)
+- ✅ iOS (React Native)
+- ✅ Android (React Native)
+
+## Changelog
+
+### v1.4.32 (Latest)
+
+- ✨ 新增气泡词云（bubble variant）
+- ✨ 支持 Hashtag 前缀显示
+- ✨ 新增气泡点击事件
+- ✨ 支持自定义气泡颜色和大小
+- 📚 新增 6 个气泡词云 Story 示例
+- 🧪 新增气泡模式测试用例
+
+### v1.4.30 之前
+
+- ✅ 传统词云基础功能
+- ✅ Web 和 RN 跨平台支持
+- ✅ 自定义颜色和字号
+
+## 相关链接
+
+- [Storybook 示例](https://your-storybook-url.com)
+- [API 文档](https://your-api-docs-url.com)
+- [GitHub Issues](https://github.com/your-repo/issues)
+
+## License
+
+MIT © Beppla

package/package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@beppla/tapas-ui",
+  "version": "1.5.12",
+  "description": "Tapas UI Component Library - A comprehensive React Native component library with Expo support",
+  "main": "./commonjs/index.js",
+  "module": "./module/index.js",
+  "types": "./typescript/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./typescript/index.d.ts",
+      "import": "./module/index.js",
+      "require": "./commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "commonjs/",
+    "module/",
+    "typescript/",
+    "assets/",
+    "init.js",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "postinstall": "node init.js"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "ui",
+    "components",
+    "tapas",
+    "beppla",
+    "typescript",
+    "mobile",
+    "design-system",
+    "ui-kit"
+  ],
+  "author": "Beppla Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/beppla/tapas-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/beppla/tapas-ui/issues"
+  },
+  "homepage": "https://github.com/beppla/tapas-ui#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@rneui/base": "^4.0.0-rc.7",
+    "@rneui/themed": "^4.0.0-rc.7",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-calendars": "^1.1305.0",
+    "react-native-circular-progress": "^1.3.8",
+    "react-native-svg": "^15.2.0",
+    "react-native-reanimated": "^3.10.1",
+    "react-native-safe-area-context": "^4.12.0",
+    "expo-font": "^12.0.10",
+    "expo-asset": "^10.0.10"
+  },
+  "devDependencies": {},
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "private": false
+}

package/package/typescript/Navigation/Navigation.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { ImageSourcePropType } from "react-native";
+export interface Permissions {
+    resource: string;
+    action: string;
+}
+export interface NavItem {
+    name: string;
+    iconName: string;
+    url?: string;
+    permissions?: Permissions[];
+    /** Test ID for individual nav item (E2E testing) */
+    testID?: string;
+}
+export interface Props {
+    navItems?: NavItem[];
+    systemItems?: NavItem[];
+    expanded?: boolean;
+    onItemPress?: (item: NavItem) => void;
+    onLogoPress?: () => void;
+    logoImg?: ImageSourcePropType;
+    defaultSelectedItem?: SelectedItem;
+    visible?: boolean;
+    onMaskPress?: () => void;
+    selectedIndex?: number;
+    navigation?: {
+        navigate: (routeName: string, params?: any) => void;
+    };
+    /** Test ID for E2E testing */
+    testID?: string;
+}
+export declare enum NavItemType {
+    Nav = "nav",
+    System = "system"
+}
+export interface SelectedItem {
+    type: NavItemType;
+    selectedItemIndex: number;
+}
+declare const _default: React.FunctionComponent<React.PropsWithChildren<Props>> | React.ForwardRefExoticComponent<React.RefAttributes<React.PropsWithChildren<Props>>>;
+export default _default;
+//# sourceMappingURL=Navigation.d.ts.map

package/package/typescript/Navigation/Navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../components/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAKL,mBAAmB,EAEpB,MAAM,cAAc,CAAC;AAItB,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE;QACX,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;;AAyRD,wBAAwD"}