@beppla/tapas-ui 1.5.11 → 1.5.13

package/package/module/WordCloud/README.md

@@ -1,379 +0,0 @@
-# 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

@@ -1,84 +0,0 @@
-{
-  "name": "@beppla/tapas-ui",
-  "version": "1.5.11",
-  "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/scripts/patch-rneui-react19.js

@@ -1,129 +0,0 @@
-#!/usr/bin/env node
-/**
- * Patch @rneui/themed and @rneui/base for React 19 compatibility.
- *
- * Fixes:
- * 1. withTheme.js: Replace ThemeConsumer (Context.Consumer render props) with useContext hook
- * 2. Remove defaultProps from function components (deprecated in React 19)
- *
- * Run: node scripts/patch-rneui-react19.js [node_modules_path]
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const nodeModulesPath = process.argv[2] || path.join(__dirname, '..', 'node_modules');
-
-function patchFile(filePath, patches) {
-  if (!fs.existsSync(filePath)) {
-    console.log(`  SKIP (not found): ${filePath}`);
-    return false;
-  }
-  let content = fs.readFileSync(filePath, 'utf8');
-  let changed = false;
-  for (const [search, replace] of patches) {
-    if (content.includes(search)) {
-      content = content.replace(search, replace);
-      changed = true;
-    }
-  }
-  if (changed) {
-    fs.writeFileSync(filePath, content, 'utf8');
-    console.log(`  PATCHED: ${path.relative(nodeModulesPath, filePath)}`);
-  } else {
-    console.log(`  OK (already patched): ${path.relative(nodeModulesPath, filePath)}`);
-  }
-  return changed;
-}
-
-function removeDefaultProps(filePath) {
-  if (!fs.existsSync(filePath)) return;
-  let content = fs.readFileSync(filePath, 'utf8');
-  // Remove: ComponentName.defaultProps = { ... };
-  const before = content.length;
-  // Match multiline defaultProps blocks (greedy to closing };)
-  content = content.replace(/\n\w+\.defaultProps\s*=\s*\{[\s\S]*?\n\};/g, '');
-  if (content.length !== before) {
-    fs.writeFileSync(filePath, content, 'utf8');
-    console.log(`  PATCHED (defaultProps removed): ${path.relative(nodeModulesPath, filePath)}`);
-  }
-}
-
-console.log('Patching @rneui for React 19 compatibility...');
-console.log(`node_modules: ${nodeModulesPath}\n`);
-
-// 1. Patch withTheme.js — replace ThemeConsumer with useContext
-const withThemePath = path.join(nodeModulesPath, '@rneui/themed/dist/config/withTheme.js');
-patchFile(withThemePath, [
-  [
-    "import React from 'react';",
-    "import React, { useContext } from 'react';"
-  ],
-  [
-    "import { ThemeConsumer } from './ThemeProvider';",
-    "import { ThemeContext } from './ThemeProvider';"
-  ],
-  [
-    `        return (React.createElement(ThemeConsumer, null, ({ theme, updateTheme, replaceTheme }) => {
-            var _a;
-            if (!theme) {
-                const newProps = Object.assign(Object.assign({}, rest), { theme: { colors: lightColors, spacing: defaultSpacing }, children });
-                return React.createElement(WrappedComponent, Object.assign({ ref: forwardedRef }, newProps));
-            }
-            const { components } = theme, restTheme = __rest(theme, ["components"]);
-            const themedProps = typeof (components === null || components === void 0 ? void 0 : components[themeKey]) === 'function'
-                ? (_a = components === null || components === void 0 ? void 0 : components[themeKey]) === null || _a === void 0 ? void 0 : _a.call(components, rest, restTheme)
-                : components === null || components === void 0 ? void 0 : components[themeKey];
-            const newProps = Object.assign(Object.assign({ theme: restTheme, updateTheme,
-                replaceTheme }, deepmerge(themedProps || {}, rest, {
-                customMerge: combineByStyles,
-                clone: false,
-            })), { children });
-            return React.createElement(WrappedComponent, Object.assign({ ref: forwardedRef }, newProps));
-        }));`,
-    `        const context = useContext(ThemeContext);
-        const { theme, updateTheme, replaceTheme } = context;
-        if (!theme) {
-            const newProps = Object.assign(Object.assign({}, rest), { theme: { colors: lightColors, spacing: defaultSpacing }, children });
-            return React.createElement(WrappedComponent, Object.assign({ ref: forwardedRef }, newProps));
-        }
-        var _a;
-        const { components } = theme, restTheme = __rest(theme, ["components"]);
-        const themedProps = typeof (components === null || components === void 0 ? void 0 : components[themeKey]) === 'function'
-            ? (_a = components === null || components === void 0 ? void 0 : components[themeKey]) === null || _a === void 0 ? void 0 : _a.call(components, rest, restTheme)
-            : components === null || components === void 0 ? void 0 : components[themeKey];
-        const newProps = Object.assign(Object.assign({ theme: restTheme, updateTheme,
-            replaceTheme }, deepmerge(themedProps || {}, rest, {
-            customMerge: combineByStyles,
-            clone: false,
-        })), { children });
-        return React.createElement(WrappedComponent, Object.assign({ ref: forwardedRef }, newProps));`
-  ],
-]);
-
-// 2. Remove defaultProps from function components
-console.log('\nRemoving defaultProps...');
-const defaultPropsFiles = [
-  '@rneui/base/dist/SearchBar/SearchBar.js',
-  '@rneui/base/dist/SearchBar/SearchBar-ios.js',
-  '@rneui/base/dist/SearchBar/SearchBar-android.js',
-  '@rneui/base/dist/SearchBar/SearchBar-default.js',
-  '@rneui/base/dist/Slider/Slider.js',
-  '@rneui/base/dist/Dialog/Dialog.Button.js',
-  '@rneui/base/dist/Dialog/Dialog.Loading.js',
-];
-for (const f of defaultPropsFiles) {
-  removeDefaultProps(path.join(nodeModulesPath, f));
-}
-
-// 3. Patch react-native-web renderApplication to use createRoot instead of legacy render
-console.log('\nPatching react-native-web for React 19 (createRoot)...');
-const renderAppPath = path.join(nodeModulesPath, 'react-native-web/dist/exports/AppRegistry/renderApplication.js');
-patchFile(renderAppPath, [
-  [
-    'var renderFn = shouldHydrate ? mode === \'concurrent\' ? hydrate : hydrateLegacy : mode === \'concurrent\' ? render : renderLegacy;',
-    'var renderFn = shouldHydrate ? hydrate : render;'
-  ],
-]);
-
-console.log('\nDone! @rneui and react-native-web are now React 19 compatible.');