@beppla/tapas-ui 1.5.13 → 1.5.15

package/components/common/bridgelessUtils.ts

@@ -0,0 +1,22 @@
+/**
+ * RN 0.77 Bridgeless 模式工具函数
+ * 用于检测和处理 Bridgeless 模式的兼容性问题
+ */
+
+/**
+ * 检测是否运行在 Bridgeless 模式下
+ */
+export const isBridgelessMode = (): boolean => {
+  try {
+    // RN 0.77+ Bridgeless 模式的检测方法
+    // 检查是否存在全局的 __turboModuleProxy 或相关标识
+    if (typeof global !== 'undefined') {
+      const g = global as Record<string, unknown>;
+      return !!(g.__turboModuleProxy || g.__turboModuleRegistry);
+    }
+    return false;
+  } catch {
+    return false;
+  }
+};
+

package/components/common/hooks/useBridgelessFix.ts

@@ -0,0 +1,85 @@
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { Platform, Keyboard } from 'react-native';
+import { isBridgelessMode } from '../bridgelessUtils';
+
+/**
+ * Custom hook to handle React Native 0.77 Bridgeless mode focus/blur compatibility
+ * Provides keyboard and focus management fixes for inputs in Bridgeless mode
+ */
+export function useBridgelessFix(
+    onFocus?: (e: any) => void,
+    onBlur?: (e: any) => void,
+    enableFix: boolean = true
+) {
+    const shouldRefocusRef = useRef(false);
+    const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const keyboardShowListenerRef = useRef<any>(null);
+    const keyboardHideListenerRef = useRef<any>(null);
+    const isBridgeless = useRef(isBridgelessMode());
+    const isFocusedRef = useRef(false);
+    const lastFocusTimeRef = useRef<number>(0);
+    const FOCUS_SWITCH_PROTECTION_PERIOD = 200;
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleFocus = useCallback((e: any) => {
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+            blurTimeoutRef.current = null;
+        }
+
+        setIsFocused(true);
+        isFocusedRef.current = true;
+        lastFocusTimeRef.current = Date.now();
+
+        if (enableFix && isBridgeless.current && Platform.OS !== 'web') {
+            shouldRefocusRef.current = false;
+            const listener = Keyboard.addListener('keyboardDidHide', () => {
+                if (isFocusedRef.current) {
+                    shouldRefocusRef.current = true;
+                }
+            });
+            keyboardHideListenerRef.current = listener;
+        }
+
+        onFocus?.(e);
+    }, [enableFix, onFocus]);
+
+    const handleBlur = useCallback((e: any) => {
+        isFocusedRef.current = false;
+
+        if (enableFix && isBridgeless.current && Platform.OS !== 'web') {
+            blurTimeoutRef.current = setTimeout(() => {
+                if (
+                    shouldRefocusRef.current &&
+                    Date.now() - lastFocusTimeRef.current > FOCUS_SWITCH_PROTECTION_PERIOD
+                ) {
+                    // Refocus logic would be implemented by the caller
+                }
+                shouldRefocusRef.current = false;
+            }, 0);
+        } else {
+            setIsFocused(false);
+        }
+
+        onBlur?.(e);
+    }, [enableFix, onBlur]);
+
+    // Cleanup listeners on unmount
+    useEffect(() => {
+        return () => {
+            if (blurTimeoutRef.current) {
+                clearTimeout(blurTimeoutRef.current);
+            }
+            keyboardShowListenerRef.current?.remove?.();
+            keyboardHideListenerRef.current?.remove?.();
+        };
+    }, []);
+
+    return {
+        handleFocus,
+        handleBlur,
+        isFocused,
+        shouldRefocusRef,
+        isBridgeless: isBridgeless.current,
+    };
+}

package/components/common.ts

@@ -0,0 +1,8 @@
+import { Platform } from "react-native";
+
+export const isMobile = Platform.OS !== 'web' || (Platform.OS === 'web' && typeof window !== 'undefined' && window?.innerWidth <= 430);
+
+export const capitalizeFirstLetter = (str?: string): string => {
+  if (!str) return '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};

package/components/index.tsx

@@ -0,0 +1,217 @@
+// Web兼容性说明：
+// 1. 某些组件在Web环境中可能需要额外的依赖
+// 2. react-native-vector-icons 在Web中需要特殊处理
+// 3. 建议在使用方项目中安装必要的Web兼容依赖
+
+// 基础组件
+export { default as TapasButton } from "./Button/Button";
+export { default as TapasButtonGroup } from "./Button/ButtonGroup";
+export { default as TapasText } from "./Text/Text";
+export { default as TapasInput } from "./Input/Input";
+export { default as TapasNumericInput } from "./NumericInput/NumericInput";
+export { default as TapasCheckBox } from "./CheckBox/CheckBox";
+export { default as TapasCheckBoxItem } from "./CheckBox/CheckBoxItem";
+export { default as TapasGroupCheckBox } from "./CheckBox/GroupCheckBox";
+export { default as TapasRadioButton } from "./RadioButton/RadioButton";
+export { default as TapasTag } from "./Tag/Tag";
+export { default as TapasStatus } from "./Status/Status";
+export { default as TapasProgress } from "./Progress/Progress";
+export { default as TapasCircularProgress } from "./CircularProgress/CircularProgress";
+export { default as TapasSteps } from "./Steps/Steps";
+export { default as TapasTimeline } from "./Timeline/Timeline";
+export { default as TapasTask } from "./Task/Task";
+export { default as TapasListItem } from "./ListItem/ListItem";
+export { default as TapasSheetTitle } from "./SheetTitle/SheetTitle";
+export { default as TapasOverlay } from "./Overlay/Overlay";
+export { default as TapasPopover } from "./Popover/Popover";
+export { default as TapasPagination } from "./Pagination/Pagination";
+export { default as TapasDashboardCard } from "./DashboardCard/DashboardCard";
+export { default as TapasImage } from "./Image/PreviewImg";
+export { default as TapasImageComponent } from "./Image/Image";
+export { default as TapasNavigation } from "./Navigation/Navigation";
+export { default as TapasShell } from "./Shell/Shell";
+export { TapasTab } from "./Tab/TapasTab";
+
+// 图标组件
+export { default as TapasIcon, registerIcons, getIconNames } from "./Icons/TapasIcon";
+export { default as TapasIconExpo } from "./Icons/TapasIconExpo";
+export { fontLoader, useFontLoader } from "./Icons/fontLoader";
+export { expoFontLoader, useExpoFontLoader } from "./Icons/expoFontLoader";
+export { smartFontLoader, useSmartFontLoader } from "./Icons/smartFontLoader";
+
+// 布局组件
+export { default as TapasLayout } from "./Layout/Layout";
+export { default as TapasDrawer } from "./Drawer/Drawer";
+export { default as TapasHeader } from "./Header/Header";
+
+// 表单组件
+export { default as TapasDropdown, TapasDropdownModal } from "./Dropdown/Dropdown";
+export { default as TapasCustomDropdown } from "./Dropdown/CustomDropdown";
+export { default as TapasInputDropdown } from "./Dropdown/InputDropdown";
+
+// 日历组件
+export { default as TapasCalendar } from "./Calendar/Calendar";
+export { default as TapasCalendarBase } from "./Calendar/Calendar.base";
+export { default as TapasDaySelector } from "./Calendar/DaySelector";
+export { default as TapasMonthSelector } from "./Calendar/MonthSelector";
+export { default as TapasWeekDaySelector } from "./Calendar/WeekDaySelector";
+export { default as TapasTimeSelector } from "./Calendar/TimeSelector";
+export { default as TapasConcreteTimeSelector } from "./Calendar/ConcreteTimeSelector";
+export { default as TapasCustomRange } from "./Calendar/CustomRange";
+
+// 高级组件
+export { default as TapasGantt } from "./Gantt/Gantt";
+export { default as TapasFixedSizeGrid } from "./Grid/FixedSizeGrid";
+export { default as TapasVariableSizeGrid } from "./Grid/VariableSizeGrid";
+export { default as TapasStaticFixedSizeGrid } from "./Grid/StaticFixedSizeGrid";
+export { default as TapasDraggableFlatList } from "./DraggableFlatList/DraggableFlatList";
+
+// WebView 通信组件
+export { WebViewBridge, useWebViewBridge, createWebViewInjectedScript, handleNativeWebViewMessage } from "./WebViewBridge";
+export type { WebViewBridgeProps, WebViewBridgeRef, WebViewMessage } from "./WebViewBridge";
+
+// 通知组件
+export { default as TapasToast } from "./Toast/Toast";
+export { default as TapasAlert } from "./Alert/Alert";
+
+// 主题和工具
+export { default as TapasThemeProvider } from "./Theme/ThemeProvider";
+
+// 为了确保构建后正确导出，使用明确的导出
+import { defaultTheme } from "./Theme/defaultTheme";
+export const TapasDefaultTheme = defaultTheme;
+
+// 创建一个默认主题实例，方便应用端直接使用
+export const TapasDefaultThemeInstance = defaultTheme();
+
+// React 19 兼容的 withTheme 和 makeStyles（替代 @rneui/themed 原版）
+export { withTheme } from "./Theme/withTheme";
+export { makeStyles } from "./Theme/makeStyles";
+
+// 重新导出 @rneui/themed 的核心功能（withTheme/makeStyles 已在上面覆盖）
+export {
+  useTheme,
+  // withTheme,    -- 使用上面的 React 19 兼容版
+  // makeStyles,   -- 使用上面的 React 19 兼容版
+  ThemeProvider,
+  Text,
+  ListItem,
+  Overlay,
+  BottomSheet,
+  Avatar,
+  Divider,
+  TabView,
+  Tab,
+  SearchBar,
+  Input,
+  Button
+} from "@rneui/themed";
+
+// 类型导出 - 简化版本
+export type { Props as TapasButtonProps } from "./Button/Button";
+export type { TapasInputProps } from "./Input/Input";
+export type { SearchInputProps, SearchHistoryEntry } from "./SearchInput/SearchInput";
+export type { ReasonModalProps, ReasonOption } from "./ReasonModal/ReasonModal";
+export type { TapasModalProps } from "./Modal/Modal";
+export type { TapasUserSwitcherProps, UserData } from "./UserSwitcher/UserSwitcher";
+export type { TapasTabProps } from "./Tab/TapasTab";
+export type { TapasTabTitleProps } from "./TabTitle/TabTitle";
+export type { TapasAnimatedNavItemProps } from "./AnimatedNavItem/AnimatedNavItem";
+export type { TapasTableColumnHeaderProps, SortDirection, SortState } from "./TableColumnHeader/TableColumnHeader";
+export type { TapasDataCellProps, DataType, StatusConfig, ActionItem } from "./DataCell/DataCell";
+export type { CellAlignment as DataCellAlignment } from "./DataCell/DataCell";
+export type { TapasMultiSelectorProps, TapasMultiSelectorItem } from "./MultiSelector/MultiSelector";
+export type { TapasQuantityProps } from "./Quantity/Quantity";
+export type { DropdownProps, TapasDropDownItem } from "./Dropdown/Dropdown";
+
+// 重新导出 @rneui/themed 的常用类型
+export type { 
+  ButtonProps,
+  InputProps,
+  ListItemProps,
+  TextProps,
+  BottomSheetProps,
+  OverlayProps,
+  TabProps,
+  TabItemProps,
+  Theme
+} from "@rneui/themed";
+
+// 导出其他类型文件
+export * from "./Calendar/types";
+export * from "./Gantt/types";
+export { defaultTheme } from "./Theme/defaultTheme";
+export * from "./Theme/types";
+export * from "./Shell/types";
+
+// 新增的遗漏组件
+export { default as TapasLoading } from "./Loading/Loading";
+export { default as TapasScanButton } from "./ScanButton/ScanButton";
+export { default as TapasIconText } from "./IconText/IconText";
+export { default as TapasExternalLink } from "./ExternalLink/ExternalLink";
+export { default as TapasCollapsible } from "./Collapsible/Collapsible";
+export { default as TapasCard } from "./Card/Card";
+export { default as TapasTextArea } from "./TextArea/TextArea";
+export { default as TapasMessageBox } from "./MessageBox/MessageBox";
+export { default as TapasSearchInput } from "./SearchInput/SearchInput";
+export { default as TapasHelloWave } from "./HelloWave/HelloWave";
+export { default as TapasDeviceSelectionModal } from "./DeviceSelectionModal/DeviceSelectionModal";
+export { default as TapasReasonModal } from "./ReasonModal/ReasonModal";
+export { default as TapasModal } from "./Modal/Modal";
+export { default as TapasUserSwitcher } from "./UserSwitcher/UserSwitcher";
+export { default as TapasTabTitle } from "./TabTitle/TabTitle";
+export { default as TapasAnimatedNavItem } from "./AnimatedNavItem/AnimatedNavItem";
+export { default as TapasTableColumnHeader } from "./TableColumnHeader/TableColumnHeader";
+export { default as TapasDataCell } from "./DataCell/DataCell";
+export { default as TapasMultiSelector } from "./MultiSelector/MultiSelector";
+export { default as TapasQuantity } from "./Quantity/Quantity";
+export { default as TapasNotification } from "./Notification";
+export { default as TapasSwitch } from "./Switch/Switch";
+export { default as TapasUpload } from "./Upload/Upload";
+export type { TapasSwitchProps } from "./Switch/Switch";
+export type { TapasUploadProps } from "./Upload/Upload";
+
+// 图表组件（新增）
+export { BarChart } from "./BarChart";
+export type { BarChartProps, BarChartData } from "./BarChart";
+export type { BarChartSeriesData } from "./BarChart/BarChart";
+export { ComboChart } from "./ComboChart";
+export type { ComboChartProps, ComboChartDataSeries } from "./ComboChart";
+export { WordCloud } from "./WordCloud";
+export type { WordCloudProps, WordCloudData } from "./WordCloud";
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LineChartDataPoint, LineChartSeriesData } from "./LineChart";
+export { PieChart, NestedPieChart } from "./PieChart";
+export type { PieChartProps, PieChartData } from "./PieChart";
+export type {
+  NestedPieChartProps,
+  NestedPieChartNode,
+  NestedPieChartFlatData,
+  LegendMode,
+  LegendContent,
+  LegendSortStrategy,
+  ColorStrategy,
+  ValueFormatter,
+  PercentFormatter,
+  SliceClickEvent,
+  LegendClickEvent,
+  ProcessedSliceData,
+  LegendGroupData,
+} from "./PieChart";
+export { DataTable } from "./DataTable";
+export type { DataTableProps, DataTableColumn } from "./DataTable";
+export { StatisticCard } from "./StatisticCard";
+export type { StatisticCardProps } from "./StatisticCard";
+export { StatisticsTable } from "./StatisticsTable";
+export type { 
+  StatisticsTableProps, 
+  StatisticsTableColumn, 
+  StatisticsTableCell,
+  StatisticsTableAction,
+  CellAlignment,
+  CellDataType,
+} from "./StatisticsTable";
+
+// 工具函数和 hooks
+export { isMobile, capitalizeFirstLetter } from "./common";
+export { useBridgelessFix } from "./common/hooks/useBridgelessFix";

package/package/README.md

@@ -0,0 +1,107 @@
+# Tapas UI
+![image](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png)
+
+一个现代化的 React Native UI 组件库，支持 Web 和移动端。
+
+## 🚀 特性
+
+- 🎨 丰富的 UI 组件
+- 📱 React Native 原生支持
+- 🌐 Web 兼容性
+- 🎯 TypeScript 支持
+- 🎭 主题系统
+- 📖 Storybook 文档
+
+## 📦 安装
+
+```bash
+npm install @beppla/tapas-ui
+# 或
+yarn add @beppla/tapas-ui
+```
+
+## 🔧 依赖要求
+
+### 必需依赖
+
+```json
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-native": "^0.70.0"
+  }
+}
+```
+
+### Web 环境依赖
+
+如果您在 Web 环境中使用，需要安装以下依赖：
+
+```bash
+npm install react-native-web react-native-vector-icons
+# 或
+yarn add react-native-web react-native-vector-icons
+```
+
+**⚠️ 关于图表组件的警告信息**
+
+如果您在 React Native 项目中看到关于 `react-wordcloud` 或 `recharts` 的警告，请参阅 [WEB_DEPENDENCIES.md](./WEB_DEPENDENCIES.md) 了解详情。这些警告不会影响应用功能。
+
+### 图标支持
+
+组件库使用 `react-native-vector-icons` 提供图标支持。在 Web 环境中，您可能需要额外的配置：
+
+```bash
+# 安装字体文件
+npm install @expo/vector-icons
+# 或
+yarn add @expo/vector-icons
+```
+
+## 🎯 使用方法
+
+```tsx
+import React from 'react';
+import { TapasButton, TapasText } from '@beppla/tapas-ui';
+
+const App = () => {
+  return (
+    <div>
+      <TapasText>Hello Tapas UI!</TapasText>
+      <TapasButton title="Click me" onPress={() => alert('Hello!')} />
+    </div>
+  );
+};
+```
+
+## 🌐 Web 兼容性
+
+### 已知问题
+
+1. **图标组件**: 在 Web 环境中，某些图标可能显示为文本占位符
+2. **原生模块**: 某些 React Native 特定功能在 Web 中不可用
+3. **字体文件**: 需要确保字体文件在 Web 环境中正确加载
+
+### 解决方案
+
+1. 安装 `react-native-web` 和相关依赖
+2. 配置 Webpack 别名和 fallback
+3. 使用提供的 Web 兼容组件
+
+## 📚 文档
+
+访问 [Storybook](https://your-storybook-url.com) 查看完整的组件文档和示例。
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 许可证
+
+MIT License
+
+## 🔗 相关链接
+
+- [React Native](https://reactnative.dev/)
+- [React Native Web](https://necolas.github.io/react-native-web/)
+- [Storybook](https://storybook.js.org/)