@particle-network/ui-native 0.0.2 → 0.0.4

package/README.md

@@ -1,57 +1,289 @@
-![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
+# @particle-network/ui-native
 
-# getting started
+<div align="center">
+  <p align="center">
+    <strong>UniversalX Design System - React Native 组件库</strong>
+  </p>
+  
+  <p align="center">
+    为 iOS 和 Android 提供一致、优雅的原生移动端 UI 组件
+  </p>
 
-```sh
-npx create-expo-app --template expo-template-storybook AwesomeStorybook
+  <p align="center">
+    <a href="https://www.npmjs.com/package/@particle-network/ui-native">
+      <img src="https://img.shields.io/npm/v/@particle-network/ui-native.svg" alt="npm version" />
+    </a>
+    <img src="https://img.shields.io/npm/l/@particle-network/ui-native.svg" alt="license" />
+    <img src="https://img.shields.io/npm/dm/@particle-network/ui-native.svg" alt="downloads" />
+  </p>
+</div>
+
+## ✨ 特性
+
+- 📱 **原生体验** - 遵循 iOS 和 Android 平台设计规范
+- 🎨 **统一设计** - 与 Web 端保持一致的设计语言
+- 🚀 **高性能** - 基于 React Native 优化的组件实现
+- 🛡 **TypeScript** - 完整的类型定义支持
+- 📦 **丰富组件** - 覆盖常见移动端场景的组件库
+- 🎯 **Expo 支持** - 完美支持 Expo 开发工作流
+
+## 📦 安装
+
+### 使用 Expo (推荐)
+
+```bash
+expo install @particle-network/ui-native
 ```
 
-or
+### 使用 React Native CLI
 
-```sh
-yarn create expo-app --template expo-template-storybook AwesomeStorybook
+```bash
+# npm
+npm install @particle-network/ui-native
+
+# yarn
+yarn add @particle-network/ui-native
 ```
 
-# app
+### 安装依赖
 
-```sh
-yarn start
+某些组件需要额外的原生依赖：
+
+```bash
+# 必需依赖
+expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context
+
+# 可选依赖（根据使用的组件）
+expo install react-native-svg expo-haptics
 ```
 
-# RN Storybook (ondevice)
+## 🚀 快速开始
 
-In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
-This works via env variables and expo constants.
+### 基础设置
 
-```sh
-# either
+在应用入口包裹 Provider：
+
+```tsx
+import { UXProvider } from '@particle-network/ui-native';
+
+export default function App() {
+  return (
+    <UXProvider>
+      <YourApp />
+    </UXProvider>
+  );
+}
+```
+
+### 使用组件
+
+```tsx
+import { VStack, UXButton, UXInput, UXSwitch } from '@particle-network/ui-native';
+import { View } from 'react-native';
+
+function LoginScreen() {
+  const [rememberMe, setRememberMe] = useState(false);
+
+  return (
+    <View style={{ flex: 1, padding: 20 }}>
+      <VStack spacing='md'>
+        <UXInput placeholder='用户名' autoCapitalize='none' />
+        <UXInput placeholder='密码' secureTextEntry />
+        <UXSwitch value={rememberMe} onValueChange={setRememberMe} label='记住我' />
+        <UXButton color='primary' onPress={() => console.log('登录')}>
+          登录
+        </UXButton>
+      </VStack>
+    </View>
+  );
+}
+```
+
+## 📚 组件列表
+
+### 布局组件
+
+- `Box` - 基础容器
+- `Center` - 居中布局
+- `Circle` - 圆形容器
+- `Square` - 正方形容器
+- `Flex` - 弹性布局
+- `HStack` - 水平堆叠
+- `VStack` - 垂直堆叠
+
+### 表单组件
+
+- `UXButton` - 按钮
+- `UXInput` - 输入框
+- `UXNumberInput` - 数字输入
+- `UXCheckbox` - 复选框
+- `UXRadio` - 单选框
+- `UXSwitch` - 开关
+
+### 交互组件
+
+- `UXPressable` - 可按压组件
+- `UXTouchableOpacity` - 触摸反馈
+
+### 反馈组件
+
+- `UXModal` - 模态框
+- `UXTooltip` - 工具提示
+- `UXHint` - 提示信息
+
+### 数据展示
+
+- `UXTabs` - 标签页
+- `UXChip` - 标签
+- `UXDivider` - 分割线
+- `ProgressWrapper` - 进度条
+- `Text` - 文本组件
+
+## 🎨 主题定制
+
+### 使用主题
+
+```tsx
+import { UXProvider } from '@particle-network/ui-native';
+import { customTheme } from './theme';
+
+export default function App() {
+  return (
+    <UXProvider theme={customTheme}>
+      <YourApp />
+    </UXProvider>
+  );
+}
+```
+
+### 自定义主题
+
+```tsx
+const customTheme = {
+  colors: {
+    primary: '#1890ff',
+    secondary: '#52c41a',
+    danger: '#ff4d4f',
+    warning: '#faad14',
+    success: '#52c41a',
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+  borderRadius: {
+    sm: 4,
+    md: 8,
+    lg: 16,
+  },
+};
+```
+
+## 🔧 开发工具
+
+### Storybook
+
+本项目集成了 Storybook，方便组件开发和测试：
+
+```bash
+# Web 版 Storybook（推荐用于开发）
+yarn storybook:web
+
+# 设备上的 Storybook
 yarn storybook
 
-# ios
+# iOS
 yarn storybook:ios
 
-# android
+# Android
 yarn storybook:android
 ```
 
-If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
+### 开发命令
 
-To update the stories one time
+```bash
+# 安装依赖
+yarn install
 
-```sh
-yarn storybook-generate
-```
+# 启动开发
+yarn start
+
+# 构建库
+yarn build
 
-# Web
+# 运行测试
+yarn test
 
-Start react native web storybook:
+# 类型检查
+yarn type-check
 
+# 代码检查
+yarn lint
 ```
-yarn storybook:web
+
+## 📱 平台支持
+
+| 平台         | 版本要求       |
+| ------------ | -------------- |
+| iOS          | 13.0+          |
+| Android      | 5.0+ (API 21+) |
+| Expo SDK     | 48+            |
+| React Native | 0.71+          |
+
+## 🎯 最佳实践
+
+### 性能优化
+
+```tsx
+import { memo } from 'react';
+import { UXButton } from '@particle-network/ui-native';
+
+// 使用 memo 优化组件
+const OptimizedButton = memo(({ onPress, title }) => <UXButton onPress={onPress}>{title}</UXButton>);
 ```
 
-build react native web storybook:
+### 响应式设计
+
+```tsx
+import { useResponsive } from '@particle-network/ui-native';
 
-```sh
-yarn build-storybook
+function ResponsiveComponent() {
+  const { isTablet } = useResponsive();
+
+  return <VStack spacing={isTablet ? 'lg' : 'md'}>{/* 根据设备类型调整布局 */}</VStack>;
+}
 ```
+
+## 🤝 贡献
+
+欢迎贡献代码！请查看[贡献指南](../../CONTRIBUTING.md)了解更多信息。
+
+## 📄 许可证
+
+MIT © [UniversalX Team](https://github.com/particle-network)
+
+## 🔗 相关链接
+
+- [文档站点](https://ux-design.minijoy.work)
+- [Storybook 演示](https://storybook.ux-design.minijoy.work)
+- [GitHub 仓库](https://gitlab.minijoy.work/frontend/ux-design)
+- [NPM 包](https://www.npmjs.com/package/@particle-network/ui-native)
+- [更新日志](./CHANGELOG.md)
+
+## 🙏 致谢
+
+感谢以下开源项目：
+
+- [React Native](https://reactnative.dev/)
+- [Expo](https://expo.dev/)
+- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)
+- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/)
+
+---
+
+<div align="center">
+  Made with ❤️ by UniversalX Team
+</div>

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "MIT",
   "main": "./entry.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "react-native": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",