@unif/react-native-design 0.1.0 → 0.1.2

package/README.md

@@ -1,37 +1,100 @@
-# react-native-designdd
+# @unif/react-native-design
 
-@unif/react-native-design
+Unif 设计系统 —— theme + icons + utils + components,面向 React Native 0.85 新架构(Fabric + concurrent React)。
 
-## Installation
+## 安装
 
+```sh
+yarn add @unif/react-native-design
+```
+
+需要在宿主工程提前安装的 peer dependencies:
 
 ```sh
-npm install react-native-designdd
+yarn add react-native-svg react-native-gesture-handler react-native-reanimated \
+  react-native-worklets react-native-safe-area-context \
+  react-native-reanimated-carousel @gorhom/bottom-sheet @sbaiahmed1/react-native-blur
 ```
 
+## 用法
 
-## Usage
+在 app 根附近挂一次 `ThemeProvider`,并按需挂载命令式 host:
 
+```tsx
+import { ThemeProvider, ToastHost, ConfirmHost } from '@unif/react-native-design';
 
-```js
-import { multiply } from 'react-native-designdd';
+export function App() {
+  return (
+    <ThemeProvider>
+      {/* ...你的导航 / 屏幕... */}
+      <ToastHost />
+      <ConfirmHost />
+    </ThemeProvider>
+  );
+}
+```
 
-// ...
+组件内通过 `useThemedStyles` 拿当前主题的 `StyleSheet`:
+
+```tsx
+import { Button, useThemedStyles, type ColorTokens } from '@unif/react-native-design';
+import { View } from 'react-native';
+
+// makeStyles 必须定义在模块顶层,不要写在组件里 inline
+const makeStyles = (c: ColorTokens) => ({
+  wrap: { padding: 16, backgroundColor: c.surface },
+});
+
+export function Demo() {
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={styles.wrap}>
+      <Button label="保存" onPress={() => {}} />
+    </View>
+  );
+}
+```
 
-const result = multiply(3, 7);
+命令式 API:
+
+```tsx
+import { toast, confirm } from '@unif/react-native-design';
+
+toast.success('已保存');
+
+const ok = await confirm({
+  title: '确认注销账号?',
+  message: '注销后数据无法恢复',
+  destructive: true,
+});
 ```
 
+## 包结构
 
-## Contributing
+- **theme** —— `ThemeProvider` / `useTheme` / `useColors` / `useShadow` / `useThemedStyles`,以及 color / shadow / type / space / radius / icon / control / motion 等 token,`r` / `rf` 尺寸 & 字号缩放
+- **icons** —— `IconName` 联合类型 + `ICONS` 数据(用 `<Icon name="..." />` 渲染)
+- **components/ui** —— 原子组件:Button、Card、Cell、NavBar、BottomSheet、Toast、Confirm、Input、Search、Tabs、Switch 等约 37 个
+- **components/business** —— 通用业务复合组件:AvatarWithRing、Decorations、GlassStats、VersionPill(耦合 navigation / store 的组件留在消费者仓库)
+- **utils** —— `createLogger(scope)` 日志器、`childTestID` 列表型组件 testID 拼接助手
 
-- [Development workflow](CONTRIBUTING.md#development-workflow)
-- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
-- [Code of conduct](CODE_OF_CONDUCT.md)
+## Example
 
-## License
+`example/` 是接通本库的 RN 宿主应用:
 
-MIT
+```sh
+yarn
+yarn example start         # metro
+yarn example ios           # 或 yarn example android
+```
+
+源码改动会通过 Metro monorepo 配置直接热更新,不需要重新构建原生。
 
----
+## 贡献
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+- [开发流程](CONTRIBUTING.md#development-workflow)
+- [提交 PR](CONTRIBUTING.md#sending-a-pull-request)
+- [行为准则](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT

package/lib/module/components/ui/Logo/Logo.js

@@ -3,28 +3,25 @@
 import React from 'react';
 import { Image } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
-// Native/Metro:require() 返回 asset 数字 ID;Web/webpack:返回 URL 字符串,
-// 但 RN-Web Image 不解析 webpack URL,所以走 docusaurus 镜像的 `/img/logo.png` 公开路径。
-const RAW_SOURCE = require('../../../assets/logo.png');
-const SOURCE = typeof RAW_SOURCE === 'string' ? {
-  uri: '/img/logo.png'
-} : RAW_SOURCE;
-
 /**
- * Unif 主品牌标 —— 1024×1024 RGBA PNG。
+ * 品牌 logo 容器组件 —— 提供尺寸 / 圆角 / a11y 标准化包装。
+ *
+ * 不持有任何品牌资产。consumer 通过 `source` prop 传入自己品牌的图片
+ * (推荐 1024×1024 RGBA PNG / SVG 转 png)。
  *
- * **不要重画 / 改色 / 描边 / 加阴影**,品牌标准图。
- * 最小尺寸 24×24,更小请改用 `static/img/favicon.svg`。
+ * @example
+ * <Logo source={require('@/assets/logo.png')} size={64} label="Unif" />
  */
 export function Logo({
+  source,
   size = 64,
   borderRadius,
-  label = 'Unif',
+  label = 'Logo',
   style,
   testID
 }) {
   return /*#__PURE__*/_jsx(Image, {
-    source: SOURCE,
+    source: source,
     accessibilityLabel: label,
     style: [{
       width: size,

package/lib/module/components/ui/Logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Image","jsx","_jsx","RAW_SOURCE","require","SOURCE","uri","Logo","size","borderRadius","label","style","testID","source","accessibilityLabel","width","height","resizeMode"],"sourceRoot":"../../../../../src","sources":["components/ui/Logo/Logo.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrC;AACA;AACA,MAAMC,UAAU,GAAGC,OAAO,CAAC,0BAA0B,CAAC;AACtD,MAAMC,MAAgC,GACpC,OAAOF,UAAU,KAAK,QAAQ,GAAG;EAAEG,GAAG,EAAE;AAAgB,CAAC,GAAGH,UAAU;;AAExE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,IAAIA,CAAC;EACnBC,IAAI,GAAG,EAAE;EACTC,YAAY;EACZC,KAAK,GAAG,MAAM;EACdC,KAAK;EACLC;AACS,CAAC,EAAqB;EAC/B,oBACEV,IAAA,CAACF,KAAK;IACJa,MAAM,EAAER,MAAO;IACfS,kBAAkB,EAAEJ,KAAM;IAC1BC,KAAK,EAAE,CACL;MACEI,KAAK,EAAEP,IAAI;MACXQ,MAAM,EAAER,IAAI;MACZC,YAAY,EAAEA,YAAY,IAAID,IAAI,GAAG;IACvC,CAAC,EACDG,KAAK,CACL;IACFM,UAAU,EAAC,OAAO;IAClBL,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}
+{"version":3,"names":["React","Image","jsx","_jsx","Logo","source","size","borderRadius","label","style","testID","accessibilityLabel","width","height","resizeMode"],"sourceRoot":"../../../../../src","sources":["components/ui/Logo/Logo.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAIA,CAAC;EACnBC,MAAM;EACNC,IAAI,GAAG,EAAE;EACTC,YAAY;EACZC,KAAK,GAAG,MAAM;EACdC,KAAK;EACLC;AACS,CAAC,EAAqB;EAC/B,oBACEP,IAAA,CAACF,KAAK;IACJI,MAAM,EAAEA,MAAO;IACfM,kBAAkB,EAAEH,KAAM;IAC1BC,KAAK,EAAE,CACL;MACEG,KAAK,EAAEN,IAAI;MACXO,MAAM,EAAEP,IAAI;MACZC,YAAY,EAAEA,YAAY,IAAID,IAAI,GAAG;IACvC,CAAC,EACDG,KAAK,CACL;IACFK,UAAU,EAAC,OAAO;IAClBJ,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}

package/lib/typescript/src/components/ui/Logo/Logo.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { LogoProps } from './types';
 /**
- * Unif 主品牌标 —— 1024×1024 RGBA PNG。
+ * 品牌 logo 容器组件 —— 提供尺寸 / 圆角 / a11y 标准化包装。
  *
- * **不要重画 / 改色 / 描边 / 加阴影**,品牌标准图。
- * 最小尺寸 24×24,更小请改用 `static/img/favicon.svg`。
+ * 不持有任何品牌资产。consumer 通过 `source` prop 传入自己品牌的图片
+ * (推荐 1024×1024 RGBA PNG / SVG 转 png)。
+ *
+ * @example
+ * <Logo source={require('@/assets/logo.png')} size={64} label="Unif" />
  */
-export declare function Logo({ size, borderRadius, label, style, testID, }: LogoProps): React.JSX.Element;
+export declare function Logo({ source, size, borderRadius, label, style, testID, }: LogoProps): React.JSX.Element;
 //# sourceMappingURL=Logo.d.ts.map

package/lib/typescript/src/components/ui/Logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAQzC;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAS,EACT,YAAY,EACZ,KAAc,EACd,KAAK,EACL,MAAM,GACP,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiB/B"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAM,EACN,IAAS,EACT,YAAY,EACZ,KAAc,EACd,KAAK,EACL,MAAM,GACP,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiB/B"}

package/lib/typescript/src/components/ui/Logo/types.d.ts

@@ -1,10 +1,12 @@
-import type { ImageStyle, StyleProp } from 'react-native';
+import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native';
 export type LogoProps = {
-    /** 渲染尺寸（正方形）。默认 64。 */
+    /** 品牌 logo 图片源 —— consumer 必传(`require('./logo.png')` / `{ uri: '...' }`)。 */
+    source: ImageSourcePropType;
+    /** 渲染尺寸(正方形)。默认 64。 */
     size?: number;
-    /** 覆盖圆角。默认 `size / 4`，呈柔和的 squircle。 */
+    /** 覆盖圆角。默认 `size / 4`,呈柔和的 squircle。 */
     borderRadius?: number;
-    /** 无障碍朗读文本。默认 'Unif';业务侧需要 APP_NAME 时显式传入。 */
+    /** SR / 测试用文案,默认 'Logo'。 */
     label?: string;
     style?: StyleProp<ImageStyle>;
     /** E2E / 测试定位 */

package/lib/typescript/src/components/ui/Logo/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Logo/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Logo/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB,8EAA8E;IAC9E,MAAM,EAAE,mBAAmB,CAAC;IAC5B,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-design",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Unif 设计系统:theme + icons + utils + components",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -136,6 +136,7 @@
   },
   "jest": {
     "preset": "@react-native/jest-preset",
+    "testEnvironment": "node",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"

package/src/components/ui/Logo/Logo.tsx

@@ -2,28 +2,26 @@ import React from 'react';
 import { Image } from 'react-native';
 import type { LogoProps } from './types';
 
-// Native/Metro:require() 返回 asset 数字 ID;Web/webpack:返回 URL 字符串,
-// 但 RN-Web Image 不解析 webpack URL,所以走 docusaurus 镜像的 `/img/logo.png` 公开路径。
-const RAW_SOURCE = require('../../../assets/logo.png');
-const SOURCE: number | { uri: string } =
-  typeof RAW_SOURCE === 'string' ? { uri: '/img/logo.png' } : RAW_SOURCE;
-
 /**
- * Unif 主品牌标 —— 1024×1024 RGBA PNG。
+ * 品牌 logo 容器组件 —— 提供尺寸 / 圆角 / a11y 标准化包装。
+ *
+ * 不持有任何品牌资产。consumer 通过 `source` prop 传入自己品牌的图片
+ * (推荐 1024×1024 RGBA PNG / SVG 转 png)。
  *
- * **不要重画 / 改色 / 描边 / 加阴影**,品牌标准图。
- * 最小尺寸 24×24,更小请改用 `static/img/favicon.svg`。
+ * @example
+ * <Logo source={require('@/assets/logo.png')} size={64} label="Unif" />
  */
 export function Logo({
+  source,
   size = 64,
   borderRadius,
-  label = 'Unif',
+  label = 'Logo',
   style,
   testID,
 }: LogoProps): React.JSX.Element {
   return (
     <Image
-      source={SOURCE}
+      source={source}
       accessibilityLabel={label}
       style={[
         {

package/src/components/ui/Logo/types.ts

@@ -1,11 +1,13 @@
-import type { ImageStyle, StyleProp } from 'react-native';
+import type { ImageSourcePropType, ImageStyle, StyleProp } from 'react-native';
 
 export type LogoProps = {
-  /** 渲染尺寸（正方形）。默认 64。 */
+  /** 品牌 logo 图片源 —— consumer 必传(`require('./logo.png')` / `{ uri: '...' }`)。 */
+  source: ImageSourcePropType;
+  /** 渲染尺寸(正方形)。默认 64。 */
   size?: number;
-  /** 覆盖圆角。默认 `size / 4`，呈柔和的 squircle。 */
+  /** 覆盖圆角。默认 `size / 4`,呈柔和的 squircle。 */
   borderRadius?: number;
-  /** 无障碍朗读文本。默认 'Unif';业务侧需要 APP_NAME 时显式传入。 */
+  /** SR / 测试用文案,默认 'Logo'。 */
   label?: string;
   style?: StyleProp<ImageStyle>;
   /** E2E / 测试定位 */