@unif/react-native-design 0.8.1 → 0.9.0

package/src/theme/shadow.ts

@@ -4,7 +4,10 @@
 // 暗色下中性阴影 shadowOpacity / elevation 全部置 0:视觉层次靠 surface 5 层
 // 明度差表达(layered surface 替代 shadow)。
 
-const BRAND = '#EB6E00';
+import { BRAND_ORANGE } from './colors';
+
+// 模块级别名保持历史可读性,同时指向 colors.ts 单一来源。
+const BRAND = BRAND_ORANGE;
 
 export const lightShadow = {
   /** 轻提示浮起 —— Segmented active 段 */
@@ -106,28 +109,34 @@ export const lightShadow = {
   },
 } as const;
 
+// readonly 加到嵌套字段:顶层 key 经同态映射已只读,但嵌套 shadowOffset 字段
+// 在运行时仍可合法赋值(t.card.shadowOffset.height = 5 会静默串改全部共享引用)。
+// 此处显式声明 readonly 让 tsc 在编译期捕获误改。
 export type ShadowTokens = {
-  [K in keyof typeof lightShadow]: {
-    shadowColor: string;
-    shadowOffset: { width: number; height: number };
-    shadowOpacity: number;
-    shadowRadius: number;
-    elevation: number;
+  readonly [K in keyof typeof lightShadow]: {
+    readonly shadowColor: string;
+    readonly shadowOffset: { readonly width: number; readonly height: number };
+    readonly shadowOpacity: number;
+    readonly shadowRadius: number;
+    readonly elevation: number;
   };
 };
 
-/** 暗色统一置零 —— dark theme 用 surface 明度差替代 shadow */
-const darkZero = {
-  shadowOffset: { width: 0, height: 0 },
-  shadowOpacity: 0,
-  shadowRadius: 0,
-  elevation: 0,
-};
+// darkZero 辅助函数:每次调用返回独立 offset 对象,消除多 token 共享同一 shadowOffset
+// 引用的隐患——虽然 ShadowTokens readonly 已在类型层阻止赋值,防御深度更好。
+const darkZero = (shadowColor: string) =>
+  ({
+    shadowColor,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  }) as const;
 
 export const darkShadow: ShadowTokens = {
-  subtle: { ...darkZero, shadowColor: '#000' },
-  card: { ...darkZero, shadowColor: '#000' },
-  /** floating 暗色不走 darkZero:浮动胶囊在暗 bg 上需要黑色 drop shadow,
+  subtle: darkZero('#000'),
+  card: darkZero('#000'),
+  /** floating 暗色不置零:浮动胶囊在暗 bg 上需要黑色 drop shadow,
    *  否则跟暗背景贴平,视觉无层级。 */
   floating: {
     shadowColor: '#000',
@@ -136,12 +145,12 @@ export const darkShadow: ShadowTokens = {
     shadowRadius: 60,
     elevation: 16,
   },
-  brandSm: { ...darkZero, shadowColor: BRAND },
-  brandMd: { ...darkZero, shadowColor: BRAND },
-  brandLg: { ...darkZero, shadowColor: BRAND },
-  brandXl: { ...darkZero, shadowColor: BRAND },
-  brandAbout: { ...darkZero, shadowColor: BRAND },
-  brandAssistant: { ...darkZero, shadowColor: BRAND },
+  brandSm: darkZero(BRAND),
+  brandMd: darkZero(BRAND),
+  brandLg: darkZero(BRAND),
+  brandXl: darkZero(BRAND),
+  brandAbout: darkZero(BRAND),
+  brandAssistant: darkZero(BRAND),
   /** brandAvatar 暗色不置零:暗色 ring 0.10 几乎隐去,靠橙光晕(0.40 比亮色 0.28 更强)
    *  托起头像。 */
   brandAvatar: {
@@ -160,5 +169,5 @@ export const darkShadow: ShadowTokens = {
     shadowRadius: 18,
     elevation: 6,
   },
-  none: { ...darkZero, shadowColor: 'transparent' },
+  none: darkZero('transparent'),
 };

package/src/theme/tokens.ts

@@ -17,9 +17,9 @@ export const type = {
   xs: rf(13),
   xxs: rf(12),
   micro: rf(11),
-  nano: rf(10), // TabBar/Grid/Citation/Sources 角标/小标签 10pt
+  nano: rf(10), // TabBar/Grid 角标/小标签 10pt
   // ── 半档微调(0.5 step,加于"近似 token + delta"反模式收敛) ──
-  /** micro(11)与 xxs(12)之间:VersionPill / profileCard / Splash / carousel 副标题。 */
+  /** micro(11)与 xxs(12)之间:VersionPill / Splash / carousel 副标题。 */
   microPlus: rf(11.5),
   /** xs(13)与 sm(14)之间:Privacy 长文阅读字号。 */
   xsPlus: rf(13.5),
@@ -28,7 +28,7 @@ export const type = {
   smPlus: rf(14.5),
   /** Hero 区主标题档(一级 brand hero,带 Logo,Login 屏)。 */
   heroLg: rf(26),
-  /** Hero 区中等档(独立屏 + NavBar 的二级 hero,ForgotPassword)。 */
+  /** Hero 区中等档(独立屏 + NavBar 的二级 hero)。 */
   heroMd: rf(22),
   /** Hero 区小档(承接式 hero,Group 选组/选角色子区)。 */
   heroSm: rf(18),
@@ -57,7 +57,7 @@ export const space = {
 } as const;
 
 export const radius = {
-  'xs': r(4), // Radio/Checkbox/Tag/Citation 内圈 4pt
+  'xs': r(4), // Radio/Checkbox 内圈 4pt
   'sm': r(6),
   'md': r(8),
   'lg': r(10),
@@ -98,7 +98,7 @@ export const control = {
 
 /** 散尺寸 —— 未归到 avatar/icon/control 阶梯的单点常量。 */
 export const dim = {
-  /** 发送按钮 32px —— chat PromptInput / 主送出按钮专用,与 avatar.md 同值 */
+  /** 发送按钮 32px —— 主送出/发送按钮专用,与 avatar.md 同值 */
   sendBtn: r(32),
 } as const;
 
@@ -117,3 +117,8 @@ export const motion = {
   slow: 300,
   pulse: 1600,
 } as const;
+
+/** 按压态透明度 —— Pressable pressed 时 opacity 的共享常量。
+ *  ButtonBase、Chip、Cell、Grid、EntryCard、Tabs、Segmented、TabBar 等
+ *  凡需要「按压反馈」的组件统一引用此值,避免散落多处手写 0.7 后不同步。 */
+export const pressedOpacity = 0.7;

package/src/theme/usePrefersReducedMotion.ts

@@ -0,0 +1,9 @@
+/**
+ * 系统「减弱动态效果」开关。
+ *
+ * native 端的动画由 reanimated 默认 `ReduceMotion.System` 处理(reduce-motion 下自动
+ * 跳到端值),此 hook 只有 web 平台的 CSS/JS 动画需要 —— native 恒返回 false,见 `.web.ts`。
+ */
+export function usePrefersReducedMotion(): boolean {
+  return false;
+}

package/src/theme/usePrefersReducedMotion.web.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+// tsconfig 不带 DOM lib(库本体是 RN),用 globalThis 兜底访问浏览器 matchMedia,
+// 类型用 any 通过 strict(本文件只在 web bundle 命中,window 一定有)。
+const win: any = globalThis as any;
+
+/**
+ * web:监听系统「减弱动态效果」开关,返回当前是否开启;开关变化时自动更新。
+ * native 端走 reanimated 的 `ReduceMotion.System`,对应 `.ts` 版恒返回 false。
+ */
+export function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState<boolean>(() =>
+    typeof win.matchMedia === 'function' ? win.matchMedia(QUERY).matches : false
+  );
+
+  useEffect(() => {
+    if (typeof win.matchMedia !== 'function') return;
+    const mq = win.matchMedia(QUERY);
+    const onChange = () => setReduced(mq.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
+  return reduced;
+}

package/src/theme/useTheme.ts

@@ -9,8 +9,23 @@ const FALLBACK: ThemeContextValue = {
   shadow: lightShadow,
 };
 
+// 静默回退而非 throw:FALLBACK 是模块级稳定引用,useThemedStyles 缓存契约不受影响。
+// 缺点:漏包 ThemeProvider 时整 app 永远 light、暗色失效且零信号——
+// 因此在 dev 下一次性告警提示接入方补 Provider。
+// 用 typeof __DEV__ 守卫:裸 __DEV__ 在非 Metro 打包器(Webpack/Next.js)下会 ReferenceError,
+// logger.ts:12 已有同等先例。
+let _warnedMissingProvider = false;
+
 export function useTheme(): ThemeContextValue {
   const ctx = useContext(ThemeContext);
+  if (ctx === undefined && !_warnedMissingProvider) {
+    _warnedMissingProvider = true;
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn(
+        '[unif/theme] useTheme: ThemeContext 未找到 —— 请在 app 根部渲染 <ThemeProvider>，否则暗色切换不生效。'
+      );
+    }
+  }
   return ctx ?? FALLBACK;
 }
 

package/src/utils/logger/logger.ts

@@ -61,9 +61,13 @@ export function getLogLevel(): LogLevel {
 
 export function addTransport(t: LogTransport): void {
   removeTransport(t.id);
-  state.transports.push(t);
+  // push 后立即赋新数组:保证 emit 的 for-of 迭代期间若调用 addTransport,
+  // 迭代的旧快照不受影响(重入安全)。
+  state.transports = [...state.transports, t];
 }
 
 export function removeTransport(id: string): void {
+  // filter 返回新数组,不原地变更 —— 保证 emit 的 for-of 迭代期间若调用
+  // removeTransport(自移除等场景),迭代的旧快照仍完整走完(重入安全)。
   state.transports = state.transports.filter((t) => t.id !== id);
 }

package/src/utils/testID/testID.ts

@@ -1,17 +1,20 @@
 /**
  * `childTestID` —— 把"父 testID + 子 id → 子 testID"的拼接逻辑收口。
  *
- * 业务侧 7 处 list-like 组件(Tabs / Segmented / TabBar / Grid / Task /
- * Sources / ChainOfThought)重复同一三元:
+ * 本仓已接入的 list-like 组件(Tabs / Segmented / TabBar / Grid)原来各自重复:
  *
  * ```ts
  * const itemTestID = item.testID ?? (testID ? `${testID}-${item.id}` : undefined);
  * ```
  *
  * 抽 helper:
- * - `override` 命中 → 用 caller 显式指定
+ * - `override` 命中(truthy)→ 用 caller 显式指定
  * - 父 `parent` 缺失 → undefined(testID 不强制)
  * - 都没问题 → `{parent}-{id}` 拼接
+ *
+ * 注意:与旧式 `??` 不同,**空串 override 视为未提供、回落拼接**。
+ * 这是刻意设计:空 testID 没有语义价值,用例已钉死此边界
+ * (`__tests__/utils/testID.test.ts:31-33`),勿改回 `??` 判定。
  */
 export function childTestID(
   parent: string | undefined,

package/lib/module/components/index.js

@@ -1,5 +0,0 @@
-"use strict";
-
-export * from "./ui/index.js";
-export * from "./business/index.js";
-//# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,eAAM;AACpB,cAAc,qBAAY","ignoreList":[]}

package/lib/typescript/src/components/index.d.ts

@@ -1,3 +0,0 @@
-export * from './ui';
-export * from './business';
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,YAAY,CAAC"}

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from './ui';
-export * from './business';