@beppla/tapas-ui 1.5.11 → 1.5.13

package/package.json

@@ -1,222 +1,84 @@
 {
   "name": "@beppla/tapas-ui",
-  "version": "1.5.11",
-  "main": "package/commonjs/index.js",
-  "module": "package/module/index.js",
-  "types": "package/typescript/index.d.ts",
-  "license": "MIT",
-  "files": [
-    "package",
-    "components",
-    "assets",
-    "scripts/patch-rneui-react19.js",
-    "init.js",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
-  ],
+  "version": "1.5.13",
+  "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": "./package/typescript/index.d.ts",
-      "import": "./package/module/index.js",
-      "require": "./package/commonjs/index.js"
-    }
+      "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": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web --port 19015",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:ci": "jest --coverage --watchAll=false --passWithNoTests",
-    "lint": "eslint . --max-warnings 0 || echo 'Linting completed with issues'",
-    "lint:fix": "eslint . --fix",
-    "type-check": "tsc --noEmit",
-    "storybook:web": "storybook dev -p 19015",
-    "storybook:build": "storybook build",
-    "storybook:deploy": "storybook build && gh-pages -d storybook-static",
-    "storybook:start": "./scripts/start-storybook.sh start",
-    "storybook:stop": "./scripts/start-storybook.sh stop",
-    "storybook:restart": "./scripts/start-storybook.sh restart",
-    "storybook:status": "./scripts/start-storybook.sh status",
-    "storybook:logs": "./scripts/start-storybook.sh logs",
-    "build-storybook": "storybook build",
-    "postinstall": "patch-package && node scripts/patch-rneui-react19.js",
-    "build": "node scripts/build-package.js",
-    "build:bump": "node scripts/build-package.js --bump",
-    "build:bump:minor": "node scripts/build-package.js --bump --minor",
-    "build:bump:major": "node scripts/build-package.js --bump --major",
-    "build:clean": "rimraf package && yarn build",
-    "build:fast": "node scripts/build-package.js --skip-build",
-    "storybook-generate": "sb-rn-get-stories --config-path .ondevice",
-    "storybook": "cross-env STORYBOOK_ENABLED='true' expo start",
-    "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo start --ios",
-    "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo start --android",
-    "prepare": "husky install || echo 'Husky not installed'",
-    "pre-commit": "lint-staged",
-    "pre-push": "./scripts/pre-push.sh",
-    "push": "./scripts/push.sh",
-    "push:quick": "./scripts/push.sh -q",
-    "push:force": "./scripts/push.sh -f",
-    "validate": "yarn type-check && yarn lint && yarn test:ci && yarn build",
-    "release": "./scripts/release.sh",
-    "release:beta": "node scripts/publish.js --beta",
-    "release:alpha": "node scripts/publish.js --alpha",
-    "release:dry": "./scripts/release.sh --dry-run patch",
-    "publish:local": "npm pack package && echo 'Local package created'",
-    "publish:npm": "npm publish package --access public",
-    "deps:check": "npx npm-check-updates",
-    "deps:update": "npx npm-check-updates -u && yarn install",
-    "clean": "rimraf node_modules package coverage .expo .storybook-static && yarn install",
-    "analyze": "yarn build && du -sh package/* && echo 'Build analysis complete'",
-    "dev:full": "concurrently \"yarn storybook\" \"yarn type-check --watch\" || echo 'Dev tools started'",
-    "health-check": "yarn type-check && yarn lint && yarn test:ci && yarn build",
-    "dev": "./scripts/dev.sh",
-    "dev:install": "./scripts/dev.sh install",
-    "dev:check": "./scripts/dev.sh check",
-    "dev:test": "./scripts/dev.sh test",
-    "dev:build": "./scripts/dev.sh build",
-    "dev:storybook": "./scripts/dev.sh storybook",
-    "dev:clean": "./scripts/dev.sh clean",
-    "dev:all": "./scripts/dev.sh all",
-    "release:patch": "./scripts/release.sh patch",
-    "release:minor": "./scripts/release.sh minor",
-    "release:major": "./scripts/release.sh major",
-    "release:prerelease": "./scripts/release.sh prerelease",
-    "release:enhanced": "./scripts/release-enhanced.sh",
-    "release:enhanced:patch": "./scripts/release-enhanced.sh patch",
-    "release:enhanced:minor": "./scripts/release-enhanced.sh minor",
-    "release:enhanced:major": "./scripts/release-enhanced.sh major",
-    "release:enhanced:prerelease": "./scripts/release-enhanced.sh prerelease",
-    "release:enhanced:dry": "./scripts/release-enhanced.sh --dry-run patch",
-    "deploy": "./scripts/deploy.sh",
-    "deploy:dev": "./scripts/deploy.sh dev",
-    "deploy:prod": "./scripts/deploy.sh prod",
-    "deploy:build": "./scripts/deploy.sh --build-only",
-    "deploy:package": "./scripts/deploy.sh --package-only dev",
-    "deploy:rollback": "./scripts/deploy.sh --rollback",
-    "deploy:health": "./scripts/deploy.sh --health-check",
-    "test:robust": "./scripts/test-robust.sh",
-    "test:robust:ci": "./scripts/test-robust.sh ci",
-    "test:robust:coverage": "./scripts/test-robust.sh coverage",
-    "test:robust:single": "./scripts/test-robust.sh single",
-    "test:quick": "./scripts/test-quick.sh"
+    "postinstall": "node init.js"
   },
-  "dependencies": {
-    "@rneui/base": "^4.0.0-rc.8",
-    "@rneui/themed": "^4.0.0-rc.8",
-    "d3-hierarchy": "^3.1.2",
-    "memoize-one": "^6.0.0",
-    "react-native-calendars": "^1.1313.0",
-    "react-native-circular-progress": "^1.4.1",
-    "react-native-reanimated": "^3.19.4",
-    "react-native-safe-area-context": "4.14.1",
-    "react-native-svg": "14.2.0",
-    "react-native-svg-charts": "^5.4.0",
-    "react-native-vector-icons": "^10.3.0"
+  "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": ">=18.0.0",
-    "react-native": ">=0.72.0"
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
   },
   "peerDependenciesMeta": {
-    "react-native-hoverable": {
-      "optional": true
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
     }
   },
-  "optionalDependencies": {
-    "d3-cloud": "^1.2.7",
-    "react-wordcloud": "^1.2.7",
-    "recharts": "^3.5.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-private-methods": "^7.27.1",
-    "@babel/plugin-transform-private-property-in-object": "^7.27.1",
-    "@babel/preset-react": "^7.28.5",
-    "@react-native-community/eslint-config": "^3.2.0",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-ondevice-actions": "^9.1.4",
-    "@storybook/addon-ondevice-backgrounds": "^9.1.4",
-    "@storybook/addon-ondevice-controls": "^9.1.4",
-    "@storybook/addon-ondevice-notes": "^9.1.4",
-    "@storybook/addon-react-native-web": "^0.0.29",
-    "@storybook/react-native": "^9.1.4",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.9.0",
-    "@types/jest": "^29.5.12",
-    "@types/memoize-one": "^5.1.2",
-    "@types/react": "~18.2.45",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "babel-loader": "^8.4.1",
-    "babel-plugin-react-docgen-typescript": "^1.5.1",
-    "babel-plugin-react-native-web": "^0.21.1",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-native": "^5.0.0",
-    "eslint-plugin-storybook": "0.8.0",
-    "expo": "~52.0.0",
-    "expo-constants": "~16.0.0",
-    "expo-font": "latest",
-    "fontkit": "^2.0.4",
-    "fs-extra": "^11.3.1",
-    "gh-pages": "^6.3.0",
-    "husky": "^9.1.7",
-    "jest": "^29.7.0",
-    "jest-expo": "^52.0.0",
-    "lint-staged": "^16.1.5",
-    "null-loader": "^4.0.1",
-    "patch-package": "^8.0.1",
-    "react-dom": "19.0.0",
-    "react-native": "0.76.9",
-    "react-native-builder-bob": "^0.40.16",
-    "react-native-hoverable": "^0.2.0",
-    "react-native-svg-web": "^1.0.9",
-    "react-native-web": "^0.21.2",
-    "react-native-web-linear-gradient": "^1.1.2",
-    "react-test-renderer": "19.0.0",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.6.14",
-    "typescript": "^5.9.3",
-    "webpack": "^5.103.0",
-    "webpack-cli": "^6.0.1"
-  },
-  "resolutions": {
-    "react-docgen-typescript": "2.2.2"
-  },
-  "overrides": {
-    "react-docgen-typescript": "2.2.2"
-  },
-  "pnpm": {
-    "overrides": {
-      "react-docgen-typescript": "2.2.2"
-    }
+  "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"
   },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{json,md,yml,yaml}": [
-      "prettier --write"
-    ]
+  "devDependencies": {},
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn type-check && yarn test:ci"
-    }
+  "publishConfig": {
+    "access": "restricted"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+  "private": false
+}

package/components/Alert/Alert.tsx

@@ -1,85 +0,0 @@
-import React, {Fragment} from 'react';
-import {View, StyleProp, ViewStyle, TouchableOpacity} from 'react-native';
-import {makeStyles, withTheme, Text as RNText} from '@rneui/themed';
-import Icon from '../Icons/TapasIcon';
-
-export interface AlertProps {
-  type: 'success' | 'info' | 'warning' | 'error';
-  closable?: boolean;
-  /** Content of Alert */
-  message: React.ReactNode;
-  icon?: string;
-  onClose?: Function;
-  style?: StyleProp<ViewStyle>;
-  /** Test ID for E2E testing (default: "alert") */
-  testID?: string;
-}
-
-const useStyles = makeStyles((theme: any) => {
-  // const {type} = props[0] as AlertProps;
-  const color = theme.colors.colorTextBrand,
-    bgColor = '#EBDFB5';
-  return {
-    flx: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    flxStart: {
-      justifyContent: 'flex-start'
-    },
-    alertWrap: {
-      width: '100%',
-      paddingHorizontal: 24,
-      paddingVertical: 4,
-      backgroundColor: bgColor
-    },
-    textItem: {
-      color: color
-    },
-    statusIcon: {
-      marginRight: 4,
-      color: color
-    },
-    closeIcon: {
-      marginLeft: 4,
-      color: color
-    }
-  };
-});
-const Alert: React.FC<AlertProps> = ({
-  // @ts-expect-error theme injected by withTheme HOC
-  theme,
-  ...props
-}) => {
-  const styles = useStyles(props);
-  const {message, closable, icon} = props;
-
-  return (
-    <View style={[styles.flx, styles.alertWrap, props.style]} testID={props.testID ?? "alert"}>
-      <View style={[styles.flx, styles.flxStart]}>
-        <Icon name={icon ?? 'error'} size={20} style={styles.statusIcon} />
-        <RNText style={[styles.textItem]} numberOfLines={1}>
-          {message}
-        </RNText>
-      </View>
-      {closable && (
-        <Fragment>
-          {
-            <TouchableOpacity
-              onPress={(e) => {
-                e.stopPropagation();
-                props.onClose && props.onClose();
-              }}
-            >
-              <Icon name="close" size={20} style={styles.closeIcon} />
-            </TouchableOpacity>
-          }
-        </Fragment>
-      )}
-    </View>
-  );
-};
-
-export default withTheme(Alert);

package/components/AnimatedNavItem/AnimatedNavItem.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
-import {
-  Text,
-  Animated,
-  Pressable,
-  ViewProps,
-  TextStyle,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export interface TapasAnimatedNavItemProps extends Omit<ViewProps, 'id'> {
-  /** 唯一标识符 */
-  id?: number | string;
-  /** 图标名称 */
-  icon?: string;
-  /** 显示文本 */
-  text?: string;
-  /** 最小宽度 */
-  minWidth?: number;
-  /** 最大宽度（自动计算或手动指定） */
-  maxWidth?: number;
-  /** 是否展开状态 */
-  expanded?: boolean;
-  /** 是否被选中 */
-  selected?: boolean;
-  /** 图标大小 */
-  iconSize?: number;
-  /** 图标颜色（未展开时） */
-  iconColor?: string;
-  /** 图标颜色（展开时） */
-  expandedIconColor?: string;
-  /** 文本颜色 */
-  textColor?: string;
-  /** 背景颜色（未展开时） */
-  backgroundColor?: string;
-  /** 背景颜色（展开时） */
-  expandedBackgroundColor?: string;
-  /** 动画持续时间 */
-  animationDuration?: number;
-  /** 文本样式 */
-  textStyle?: StyleProp<TextStyle>;
-  /** 容器样式 */
-  containerStyle?: StyleProp<ViewStyle>;
-  /** 点击回调 */
-  onPress?: (id?: number | string) => void;
-  /** 长按回调 */
-  onLongPress?: (id?: number | string) => void;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 高度 */
-  height?: number;
-  /** 边距配置 */
-  padding?: {
-    horizontal?: number;
-    vertical?: number;
-  };
-}
-
-const TapasAnimatedNavItem: React.FC<TapasAnimatedNavItemProps> = ({
-  id,
-  icon,
-  text,
-  minWidth = 40,
-  maxWidth,
-  expanded = false,
-  selected = false,
-  iconSize = 20,
-  iconColor,
-  expandedIconColor,
-  textColor,
-  backgroundColor,
-  expandedBackgroundColor,
-  animationDuration = 200,
-  textStyle,
-  containerStyle,
-  onPress,
-  onLongPress,
-  disabled = false,
-  height = 40,
-  padding = { horizontal: 12, vertical: 0 },
-  style,
-  testID,
-  ...otherProps
-}) => {
-  const styles = useStyles({ height, padding });
-  
-  // 自动计算最大宽度（如果未指定）
-  const [calculatedMaxWidth, setCalculatedMaxWidth] = useState(maxWidth || minWidth);
-  const widthAnim = useRef(new Animated.Value(expanded ? calculatedMaxWidth : minWidth)).current;
-  
-  // 计算文本宽度
-  useEffect(() => {
-    if (!maxWidth && text) {
-      // 简单的文本宽度估算：字符数 * 平均字符宽度 + 图标宽度 + 内边距
-      const estimatedTextWidth = text.length * 10;
-      const iconWidth = icon ? iconSize + 8 : 0; // 图标宽度 + 间距
-      const paddingWidth = (padding.horizontal || 12) * 2;
-      const totalWidth = estimatedTextWidth + iconWidth + paddingWidth;
-      setCalculatedMaxWidth(Math.max(totalWidth, minWidth));
-    }
-  }, [text, maxWidth, icon, iconSize, padding.horizontal, minWidth]);
-
-  // 动画效果
-  useEffect(() => {
-    const targetWidth = expanded ? calculatedMaxWidth : minWidth;
-    
-    Animated.timing(widthAnim, {
-      toValue: targetWidth,
-      duration: animationDuration,
-      useNativeDriver: false,
-    }).start();
-  }, [expanded, calculatedMaxWidth, minWidth, animationDuration]);
-
-  // 处理点击事件
-  const handlePress = useCallback(() => {
-    if (!disabled && onPress) {
-      onPress(id);
-    }
-  }, [disabled, onPress, id]);
-
-  // 处理长按事件
-  const handleLongPress = useCallback(() => {
-    if (!disabled && onLongPress) {
-      onLongPress(id);
-    }
-  }, [disabled, onLongPress, id]);
-
-  // 获取当前状态的颜色
-  const getCurrentIconColor = () => {
-    if (expanded) {
-      return expandedIconColor || styles.expandedIcon.color;
-    }
-    return iconColor || styles.defaultIcon.color;
-  };
-
-  const getCurrentTextColor = () => {
-    return textColor || styles.text.color;
-  };
-
-  const getCurrentBackgroundColor = () => {
-    if (expanded || selected) {
-      return expandedBackgroundColor || styles.expandedContainer.backgroundColor;
-    }
-    return backgroundColor || 'transparent';
-  };
-
-  return (
-    <Pressable
-      {...otherProps}
-      testID={testID}
-      style={[
-        styles.container,
-        containerStyle,
-        style,
-        {
-          backgroundColor: getCurrentBackgroundColor(),
-          opacity: disabled ? 0.5 : 1,
-        },
-      ]}
-      onPress={handlePress}
-      onLongPress={handleLongPress}
-      disabled={disabled}
-    >
-      <Animated.View
-        style={[
-          styles.animatedContainer,
-          { width: widthAnim },
-        ]}
-      >
-        {icon && (
-          <TapasIcon
-            name={icon}
-            size={iconSize}
-            color={getCurrentIconColor()}
-          />
-        )}
-        {expanded && text && (
-          <Text
-            style={[
-              styles.text,
-              { color: getCurrentTextColor() },
-              textStyle,
-            ]}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {text}
-          </Text>
-        )}
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-const useStyles = makeStyles((theme, props?: { height?: number; padding?: { horizontal?: number; vertical?: number } }) => {
-  const height = props?.height || 40;
-  const paddingHorizontal = props?.padding?.horizontal || 12;
-  const paddingVertical = props?.padding?.vertical || 0;
-
-  return {
-    container: {
-      minWidth: 40,
-      width: "auto",
-      display: "flex",
-      flexDirection: "row",
-      height,
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: height / 2,
-      overflow: "hidden",
-    },
-    animatedContainer: {
-      height,
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingHorizontal,
-      paddingVertical,
-      gap: 8,
-    },
-    text: {
-      fontSize: 14,
-      fontWeight: "600",
-      alignSelf: "center",
-      color: theme?.colors?.white || "#FFFFFF",
-      flexShrink: 1,
-    },
-    defaultIcon: {
-      color: theme?.colors?.primary || "#007AFF",
-    },
-    expandedIcon: {
-      color: theme?.colors?.white || "#FFFFFF",
-    },
-    expandedContainer: {
-      backgroundColor: theme?.colors?.primary || "#007AFF",
-    },
-  };
-});
-
-export default withTheme(TapasAnimatedNavItem);
-
-// Export aliases for compatibility
-export const AnimatedNavItem = withTheme(TapasAnimatedNavItem);
-export { TapasAnimatedNavItem };

package/components/AnimatedNavItem/index.tsx

@@ -1,3 +0,0 @@
-export { default } from './AnimatedNavItem';
-export type { TapasAnimatedNavItemProps } from './AnimatedNavItem';
-export { AnimatedNavItem, TapasAnimatedNavItem } from './AnimatedNavItem';