@unif/react-native-design 0.1.0

package/src/components/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { r, useColors, useThemedStyles } from '../../../theme';
+import { Icon } from '../Icon';
+import { makeStyles } from './styles';
+import type { CheckboxProps } from './types';
+
+/**
+ * 多选复选框。20×20 盒子。
+ * 关：透明背景 + 细线边框。
+ * 开：主色填充 + 白色对勾。
+ *
+ * `shape='circle'` —— 必勾确认项专用(协议同意等),圆形以示区别。
+ */
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  shape = 'square',
+  disabled,
+  testID,
+}: CheckboxProps): React.JSX.Element {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <Pressable
+      onPress={() => !disabled && onChange(!checked)}
+      disabled={disabled}
+      hitSlop={4}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled: !!disabled }}
+      accessibilityLabel={label}
+      testID={testID}
+      style={({ pressed }) => [
+        styles.row,
+        { opacity: disabled ? 0.5 : pressed ? 0.7 : 1 },
+      ]}
+    >
+      <View
+        style={[
+          styles.box,
+          shape === 'circle' && { borderRadius: r(20) / 2 },
+          checked && {
+            backgroundColor: c.primary,
+            borderColor: c.primary,
+          },
+        ]}
+      >
+        {checked ? (
+          <Icon name="check" size={14} color={c.onPrimary} strokeWidth={2.5} />
+        ) : null}
+      </View>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </Pressable>
+  );
+}

package/src/components/ui/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './types';

package/src/components/ui/Checkbox/styles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { fw, r, radius, space, type as t } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[4],
+    },
+    box: {
+      width: r(20),
+      height: r(20),
+      borderRadius: radius.xs,
+      borderWidth: r(1.5),
+      borderColor: c.outline,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    label: {
+      fontSize: t.sm,
+      color: c.foreground,
+      fontWeight: fw.regular,
+    },
+  });

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

@@ -0,0 +1,14 @@
+export type CheckboxProps = {
+  /** 当前选中状态（受控） */
+  checked: boolean;
+  /** 状态变化回调，传入新的 checked 值 */
+  onChange: (checked: boolean) => void;
+  /** 旁标文字（不传则只渲染勾选方框） */
+  label?: string;
+  /** 形状,默认方形;'circle' 用于需要强调的必勾项(如协议同意) */
+  shape?: 'square' | 'circle';
+  /** 禁用 */
+  disabled?: boolean;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Chip/Chip.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { useThemedStyles } from '../../../theme';
+import { makeStyles } from './styles';
+import type { ChipProps } from './types';
+
+/**
+ * 胶囊形可点击 chip。
+ * - 默认：白底 + 细线边框，fg-1 文本
+ * - 选中：主色边框 + 主色文本
+ * - 按下：透明度 0.7
+ *
+ * 常用于建议 chip、筛选 pill、多选标签等。
+ */
+export function Chip({
+  label,
+  selected,
+  onPress,
+  leading,
+  trailing,
+  style,
+  testID,
+}: ChipProps): React.JSX.Element {
+  const styles = useThemedStyles(makeStyles);
+  const inner = (
+    <View
+      style={[styles.chip, selected && styles.chipOn, style]}
+      testID={onPress ? undefined : testID}
+    >
+      {leading != null ? <View>{leading}</View> : null}
+      <Text style={[styles.text, selected && styles.textOn]} numberOfLines={1}>
+        {label}
+      </Text>
+      {trailing != null ? <View>{trailing}</View> : null}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityState={{ selected: !!selected }}
+        accessibilityLabel={label}
+        testID={testID}
+        style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}
+      >
+        {inner}
+      </Pressable>
+    );
+  }
+  return inner;
+}

package/src/components/ui/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './types';

package/src/components/ui/Chip/styles.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { fw, radius, space, type as t, type ColorTokens } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    chip: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[2],
+      paddingHorizontal: space[5],
+      paddingVertical: space[3],
+      backgroundColor: c.surface,
+      borderWidth: 1,
+      borderColor: c.outline,
+      borderRadius: radius.pill,
+      alignSelf: 'flex-start',
+    },
+    chipOn: {
+      borderColor: c.primary,
+      backgroundColor: c.primaryContainerSubtle,
+    },
+    text: {
+      fontSize: t.xs,
+      color: c.foreground,
+      fontWeight: fw.regular,
+    },
+    textOn: {
+      color: c.primary,
+    },
+  });

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type ChipProps = {
+  label: string;
+  selected?: boolean;
+  onPress?: () => void;
+  /** 可选的前置插槽 —— 如 <Icon name="spark" /> */
+  leading?: ReactNode;
+  /** 可选的后置插槽 —— 如一个小的 × 关闭按钮 */
+  trailing?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Confirm/ConfirmHost.tsx

@@ -0,0 +1,134 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Text, View } from 'react-native';
+import {
+  BottomSheetBackdrop,
+  BottomSheetFooter,
+  BottomSheetModal,
+  BottomSheetView,
+  type BottomSheetBackdropProps,
+  type BottomSheetFooterProps,
+} from '@gorhom/bottom-sheet';
+import { useThemedStyles } from '../../../theme';
+import { Button } from '../Button';
+import { _subs } from './confirm';
+import { makeStyles } from './styles';
+import type { ConfirmEntry, Subscriber } from './types';
+
+/** Scrim backdrop —— 单色半透黑 opacity 0.5 */
+function ScrimBackdrop(props: BottomSheetBackdropProps) {
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      opacity={0.5}
+    />
+  );
+}
+
+/**
+ * Confirm 对话框 Portal —— App 根挂一次,监听 `confirm()` 调用并渲染。
+ *
+ * 走 `<BottomSheetModal>` + `<BottomSheetModalProvider>`,通过 Provider Portal
+ * 自动渲染到 App 顶层 —— 整屏 backdrop + 不受 React tree 位置影响。
+ */
+export function ConfirmHost(): React.JSX.Element | null {
+  const styles = useThemedStyles(makeStyles);
+  const modalRef = useRef<BottomSheetModal>(null);
+  const [entry, setEntry] = useState<ConfirmEntry | null>(null);
+
+  useEffect(() => {
+    const sub: Subscriber = (next) => {
+      setEntry(next);
+      if (next) {
+        modalRef.current?.present();
+      } else {
+        modalRef.current?.dismiss();
+      }
+    };
+    _subs.add(sub);
+    return () => {
+      _subs.delete(sub);
+    };
+  }, []);
+
+  // onDismiss:drag-to-close / backdrop tap / 程序 dismiss 都触发,entry 还在视为取消
+  // 三个 handler 都用 useCallback + [entry] deps —— 让 renderFooter 的 useCallback
+  // deps 能正确锁定它们,引用稳定 = @gorhom 不会因 backdrop 重生成而抖动。
+  const handleDismiss = useCallback(() => {
+    if (entry) {
+      entry.resolve(false);
+      setEntry(null);
+    }
+  }, [entry]);
+
+  const handleConfirm = useCallback(() => {
+    entry?.resolve(true);
+    modalRef.current?.dismiss();
+  }, [entry]);
+
+  const handleCancel = useCallback(() => {
+    entry?.resolve(false);
+    modalRef.current?.dismiss();
+  }, [entry]);
+
+  const snapPoints = useMemo(() => ['30%'], []);
+
+  // 用 BottomSheetFooter 浮按钮:BottomSheetView 内部 absolute top/left/right 无 bottom,
+  // flex marginTop:auto 推不动按钮,所以必须走 footer + bottomInset 自动避让键盘。
+  const renderFooter = useCallback(
+    (props: BottomSheetFooterProps) =>
+      entry ? (
+        <BottomSheetFooter {...props} bottomInset={0}>
+          <View style={styles.actions}>
+            <Button
+              testID="confirm-cancel"
+              label={entry.cancelLabel ?? '取消'}
+              variant="secondary"
+              block
+              onPress={handleCancel}
+            />
+            <Button
+              testID="confirm-ok"
+              label={entry.confirmLabel ?? '确认'}
+              variant={entry.destructive ? 'danger' : 'primary'}
+              block
+              onPress={handleConfirm}
+            />
+          </View>
+        </BottomSheetFooter>
+      ) : null,
+    [entry, styles.actions, handleCancel, handleConfirm]
+  );
+
+  return (
+    <BottomSheetModal
+      ref={modalRef}
+      snapPoints={snapPoints}
+      index={0}
+      enableDynamicSizing={false}
+      enableOverDrag={false}
+      backdropComponent={ScrimBackdrop}
+      backgroundStyle={styles.sheetBackground}
+      footerComponent={renderFooter}
+      onDismiss={handleDismiss}
+    >
+      <BottomSheetView style={styles.sheet}>
+        {entry ? (
+          <>
+            <Text style={styles.title}>{entry.title}</Text>
+            {entry.message ? (
+              <Text style={styles.message}>{entry.message}</Text>
+            ) : null}
+          </>
+        ) : null}
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+}

package/src/components/ui/Confirm/confirm.ts

@@ -0,0 +1,53 @@
+/**
+ * 命令式 `confirm()` API —— 跟 `<ConfirmHost />` 配对使用。
+ *
+ * 业务任意位置 `const ok = await confirm({title, message, ...})`,
+ * 不用维护 useState / open / onClose。
+ *
+ * 同一时间只允许 1 个 confirm 活跃;若已有正在显示,新请求立即 resolve(false) 并 warn。
+ */
+import { createLogger } from '../../../utils/logger';
+import type { ConfirmOptions, ConfirmEntry, Subscriber } from './types';
+
+const log = createLogger('confirm');
+
+let _id = 0;
+let _activeEntry: ConfirmEntry | null = null;
+export const _subs = new Set<Subscriber>();
+
+/**
+ * 弹出确认对话框,返回 Promise<boolean>。
+ * - 用户点确认 → resolve(true)
+ * - 用户点取消 / 点 backdrop / 拖关闭 → resolve(false)
+ *
+ * 示例:
+ * ```ts
+ * const ok = await confirm({
+ *   title: '确认注销账号?',
+ *   message: '注销后所有数据删除,无法恢复',
+ *   confirmLabel: '确认注销',
+ *   destructive: true,
+ * });
+ * if (ok) doLogout();
+ * ```
+ */
+export function confirm(options: ConfirmOptions): Promise<boolean> {
+  if (_activeEntry) {
+    log.warn(
+      'confirm() 已有一个对话框在显示,新请求被拒绝(同一时间只 1 个,避免叠加)。'
+    );
+    return Promise.resolve(false);
+  }
+  return new Promise<boolean>((resolve) => {
+    const entry: ConfirmEntry = {
+      id: ++_id,
+      ...options,
+      resolve: (confirmed: boolean) => {
+        _activeEntry = null;
+        resolve(confirmed);
+      },
+    };
+    _activeEntry = entry;
+    _subs.forEach((s) => s(entry));
+  });
+}

package/src/components/ui/Confirm/index.ts

@@ -0,0 +1,3 @@
+export { confirm } from './confirm';
+export { ConfirmHost } from './ConfirmHost';
+export type { ConfirmOptions } from './types';

package/src/components/ui/Confirm/styles.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { fw, space, type as t } from '../../../theme';
+import type { ColorTokens } from '../../../theme';
+
+/** Confirm 对话框 styles —— title/message 走 BottomSheetView 顶部段,
+ *  actions 走 BottomSheetFooter 自动浮到 sheet 底部。 */
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    sheetBackground: {
+      backgroundColor: c.surface,
+    },
+    sheet: {
+      paddingHorizontal: space['9'],
+      paddingTop: space['4'],
+      gap: space['5'],
+    },
+    title: {
+      fontSize: t.heroSm,
+      fontWeight: fw.semi,
+      color: c.foreground,
+      letterSpacing: -0.2,
+    },
+    message: {
+      fontSize: t.body,
+      color: c.foregroundMuted,
+      lineHeight: t.body * 1.45,
+    },
+    actions: {
+      flexDirection: 'row',
+      gap: space['4'],
+      paddingHorizontal: space['9'],
+      paddingTop: space['5'],
+      paddingBottom: space['7'],
+    },
+  });

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

@@ -0,0 +1,22 @@
+/** Confirm 入参。 */
+export type ConfirmOptions = {
+  /** 主标题 —— 短且明确,如 "确认注销账号?" */
+  title: string;
+  /** 说明文本 —— 1-2 句解释操作后果。可选 */
+  message?: string;
+  /** 确认按钮文案,默认 "确认" */
+  confirmLabel?: string;
+  /** 取消按钮文案,默认 "取消" */
+  cancelLabel?: string;
+  /** 标记为破坏性操作 —— 确认按钮变红(c.error),用于"删除 / 注销 / 取消订单" */
+  destructive?: boolean;
+};
+
+/** Host 内部 entry —— options + resolve 回调,用户点 确认/取消/backdrop 时 resolve。 */
+export type ConfirmEntry = ConfirmOptions & {
+  id: number;
+  resolve: (confirmed: boolean) => void;
+};
+
+/** ConfirmHost 监听器签名 —— 收到 entry 渲染对话框;收到 null 表示关闭。 */
+export type Subscriber = (entry: ConfirmEntry | null) => void;

package/src/components/ui/DrawerHeader/DrawerHeader.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Image, Text, View } from 'react-native';
+import { useThemedStyles } from '../../../theme';
+import { makeStyles } from './styles';
+import type { DrawerHeaderProps } from './types';
+
+/**
+ * 品牌橙色抽屉头 —— 导航抽屉顶部区(`@react-navigation/drawer` 的 `drawerContent`)。
+ * 内容:橙色面板 + 56×56 单字头像 + 名称 + 可选副标题。
+ */
+export function DrawerHeader({
+  name,
+  subtitle,
+  source,
+  testID,
+}: DrawerHeaderProps): React.JSX.Element {
+  const styles = useThemedStyles(makeStyles);
+  const [imageFailed, setImageFailed] = useState(false);
+  // 避免 unmount 后 Image 网络回包仍调 setState 的 React warning
+  const mountedRef = useRef(true);
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    []
+  );
+  const handleImageError = () => {
+    if (mountedRef.current) setImageFailed(true);
+  };
+  const initial = name.trim()[0] ?? '?';
+  const showImage = source != null && !imageFailed;
+  return (
+    <View style={styles.header} testID={testID}>
+      <View style={[styles.avatar, showImage && styles.avatarImageMode]}>
+        {showImage ? (
+          <Image
+            source={source}
+            onError={handleImageError}
+            style={styles.avatarImage}
+            resizeMode="cover"
+            accessibilityLabel={name}
+          />
+        ) : (
+          <Text style={styles.avatarText}>{initial}</Text>
+        )}
+      </View>
+      <Text style={styles.name} numberOfLines={1}>
+        {name}
+      </Text>
+      {subtitle ? (
+        <Text style={styles.subtitle} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/ui/DrawerHeader/index.ts

@@ -0,0 +1,2 @@
+export { DrawerHeader } from './DrawerHeader';
+export type { DrawerHeaderProps } from './types';

package/src/components/ui/DrawerHeader/styles.ts

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import type { ColorTokens } from '../../../theme';
+import { fw, icon, rf, space, type as t } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    header: {
+      backgroundColor: c.primary,
+      paddingHorizontal: space[9],
+      paddingTop: space[10],
+      paddingBottom: space[9],
+      gap: space[3],
+    },
+    avatar: {
+      width: icon['2xl'],
+      height: icon['2xl'],
+      borderRadius: icon['2xl'] / 2,
+      backgroundColor: c.primaryPressed,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    avatarImageMode: {
+      overflow: 'hidden',
+    },
+    avatarImage: {
+      width: icon['2xl'],
+      height: icon['2xl'],
+    },
+    avatarText: {
+      color: c.onPrimary,
+      fontWeight: fw.bold,
+      fontSize: rf(24),
+    },
+    name: {
+      color: c.onPrimary,
+      fontSize: t.h2,
+      fontWeight: fw.semi,
+      marginTop: space[3],
+    },
+    subtitle: {
+      color: c.onPrimaryMuted,
+      fontSize: t.xxs,
+    },
+  });

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

@@ -0,0 +1,12 @@
+import type { ImageSourcePropType } from 'react-native';
+
+export type DrawerHeaderProps = {
+  /** 用户名（首字符渲染到圆形 brand 头像里；source 提供时仅作为 a11y label / fallback） */
+  name: string;
+  /** 副标题（comGroup · role 之类的辅助信息） */
+  subtitle?: string;
+  /** 真实头像图片（URL 或 require）；提供时优先渲染 image，加载失败 fallback 到 letter */
+  source?: ImageSourcePropType;
+  /** E2E / 测试定位 */
+  testID?: string;
+};

package/src/components/ui/Empty/Empty.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useColors, useThemedStyles } from '../../../theme';
+import { Icon } from '../Icon';
+import { makeStyles } from './styles';
+import type { EmptyProps } from './types';
+
+/**
+ * 空态 / 占位组件 —— `primary-0` 圆盘上的 spark 插画 + 标题 + 描述。
+ */
+export function Empty({ title, desc, testID }: EmptyProps): React.JSX.Element {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  return (
+    <View style={styles.wrap} testID={testID}>
+      <View style={styles.illust}>
+        <Icon name="spark" size={28} color={c.primary} />
+      </View>
+      <Text style={styles.title}>{title}</Text>
+      {desc ? <Text style={styles.desc}>{desc}</Text> : null}
+    </View>
+  );
+}

package/src/components/ui/Empty/index.ts

@@ -0,0 +1,2 @@
+export { Empty } from './Empty';
+export type { EmptyProps } from './types';

package/src/components/ui/Empty/styles.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { fw, icon, space, type ColorTokens, type as t } from '../../../theme';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    wrap: {
+      alignItems: 'center',
+      paddingHorizontal: space[3],
+      paddingVertical: space[7],
+      gap: space[4],
+    },
+    illust: {
+      width: icon['2xl'],
+      height: icon['2xl'],
+      borderRadius: icon['2xl'] / 2,
+      backgroundColor: c.primaryContainer,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      fontSize: t.h3,
+      fontWeight: fw.semi,
+      color: c.foreground,
+    },
+    desc: {
+      fontSize: t.xs,
+      color: c.foregroundSubtle,
+      textAlign: 'center',
+    },
+  });

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

@@ -0,0 +1,8 @@
+export type EmptyProps = {
+  /** 主标题（如「暂无数据」） */
+  title: string;
+  /** 副描述（建议下一步操作） */
+  desc?: string;
+  /** E2E / 测试定位 */
+  testID?: string;
+};