@unif/react-native-design 0.1.0

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+
+/** internal — Input / Textarea 共享 props。
+ *  caller 不直接消费,通过 InputProps / TextareaProps 间接传入。 */
+export type TextFieldBaseProps = TextInputProps & {
+  /** false(默认)= Input 行为(单行,固定 height);true = Textarea 行为
+   *  (multiline,minHeight/maxHeight 控高,文字顶对齐) */
+  multiline?: boolean;
+  /** 单行 height(multiline=false 时生效),默认 control.lg */
+  height?: number;
+  /** 最小高度(multiline=true 时生效),默认 96 */
+  minHeight?: number;
+  /** 最大高度(multiline=true 时生效);超出 ScrollView 内滚 */
+  maxHeight?: number;
+  /** 左侧 slot —— Icon / 装饰 */
+  leading?: ReactNode;
+  /** 右侧 slot —— Icon / 操作按钮 */
+  trailing?: ReactNode;
+  /** 错误文案 —— 非空字符串时 wrap border 切 error 色,下方显示文本。
+   *  空串 `""` / undefined 都不进 error 态(truthy 判定)。 */
+  error?: string;
+  /** 整体禁用 —— opacity 0.5 + TextInput editable=false,优先级高于 editable */
+  disabled?: boolean;
+  /** 外层 View 附加 style */
+  containerStyle?: StyleProp<ViewStyle>;
+};

package/src/components/ui/Textarea/Textarea.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { TextFieldBase, type TextInputRef } from '../TextField/TextFieldBase';
+import type { TextareaProps } from './types';
+
+/**
+ * 多行文本输入框 —— 视觉与 Input 一致(idle/focus/filled/error/disabled)。
+ *
+ * 跟 Input 区别:
+ *  - 内置 `multiline=true`,业务不用传
+ *  - 高度走 `minHeight` / `maxHeight`,超过 maxHeight 内部滚动
+ *  - 文本顶对齐(textAlignVertical='top'),跨平台统一
+ *
+ * 实现层走 `<TextFieldBase multiline>`,本组件是薄 wrap。
+ *
+ * Ref:forwardRef<TextInput>,业务可调 `ref.current?.focus()`。
+ */
+export const Textarea = forwardRef<TextInputRef, TextareaProps>(
+  function Textarea(props, ref) {
+    return <TextFieldBase ref={ref} multiline {...props} />;
+  }
+);
+
+Textarea.displayName = 'Textarea';

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

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

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
+
+/**
+ * 多行文本输入框（评论 / 长备注 / 多行说明）。单行用 `<Input />`。
+ *
+ * 内部固定 `multiline=true`；高度在 `[minHeight, maxHeight]` 之间根据内容增长。
+ * 继承除 `style` / `multiline` / `numberOfLines` 之外的 RN `TextInputProps`。
+ */
+export type TextareaProps = Omit<
+  TextInputProps,
+  'style' | 'multiline' | 'numberOfLines'
+> & {
+  /** 可选的前置插槽（图标、label 等） */
+  leading?: ReactNode;
+  /** 可选的后置插槽（如字符计数器） */
+  trailing?: ReactNode;
+  /** 错误信息 —— 容器进入错误态并在下方显示 */
+  error?: string;
+  /** 最小高度，默认 96（约 5 行） */
+  minHeight?: number;
+  /** 最大高度（超过后内部滚动），默认不限制 */
+  maxHeight?: number;
+  /** 容器外层样式（含 leading/trailing 整个 wrap） */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 整体禁用：editable=false + 视觉变灰；优先级高于 RN 原生 `editable` */
+  disabled?: boolean;
+};

package/src/components/ui/Thumbnail/Thumbnail.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { useThemedStyles } from '../../../theme';
+import { makeStyles, sizingFor } from './styles';
+import type { ThumbnailProps } from './types';
+
+/** 缩略图基础组件 —— 列表 / 卡片 / chat 行内通用 16:9.5 小图。
+ *
+ *  尺寸阶梯:sm / md(默认 113×67)/ lg,与 NewsList / NewsArea 历史一致。
+ *  bg 占位 = c.surfaceContainer(图加载中 / 失败时不至于空白)。
+ *
+ *  用法:
+ *  - 远程 URL:`<Thumbnail uri={item.coverUrl} />`
+ *  - 本地资源:`<Thumbnail source={require('./fallback.png')} />`
+ *  - 自定义尺寸:`<Thumbnail uri={...} size="lg" />` */
+export function Thumbnail({
+  uri,
+  source,
+  size = 'md',
+  style,
+  resizeMode = 'cover',
+  accessibilityLabel,
+  testID,
+}: ThumbnailProps): React.JSX.Element | null {
+  const styles = useThemedStyles(makeStyles);
+  if (!uri && !source) return null;
+  const dim = sizingFor(size);
+  return (
+    <Image
+      source={uri ? { uri } : (source as NonNullable<typeof source>)}
+      style={[styles.base, dim, style]}
+      resizeMode={resizeMode}
+      accessibilityLabel={accessibilityLabel}
+      accessible={!!accessibilityLabel}
+      testID={testID}
+    />
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Thumbnail } from './Thumbnail';
+export type { ThumbnailProps, ThumbnailSize } from './types';

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

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { r, type ColorTokens } from '../../../theme';
+import type { ThumbnailSize } from './types';
+
+/** Thumbnail 静态 base —— 占位色,Image 加载中 / 失败时不至于空白。 */
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    base: {
+      backgroundColor: c.surfaceContainer,
+    },
+  });
+
+/** Thumbnail size 阶梯 —— width / height / borderRadius 全 r() 缩放。
+ *  新增 size 在 types.ts 加 union + 这里加 case,两处同步。 */
+export const sizingFor = (size: ThumbnailSize) => {
+  switch (size) {
+    case 'sm':
+      return { width: r(64), height: r(40), borderRadius: r(6) };
+    case 'lg':
+      return { width: r(160), height: r(96), borderRadius: r(10) };
+    case 'md':
+    default:
+      // 113×67 与 NewsList / NewsArea 历史一致,16:9.5 接近视频宽高比
+      return { width: r(113), height: r(67), borderRadius: r(8) };
+  }
+};

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

@@ -0,0 +1,24 @@
+import type { StyleProp, ImageStyle, ImageSourcePropType } from 'react-native';
+
+/** 缩略图尺寸阶梯 —— 跨场景统一,新增 size 在这里 + sizingFor.ts 同步。
+ *  - sm:64×40 chat 行内、列表二级图缩略
+ *  - md:113×67 NewsList / NewsArea 公告右侧缩略(默认)
+ *  - lg:160×96 详情顶部 hero 小图、卡片头图缩略 */
+export type ThumbnailSize = 'sm' | 'md' | 'lg';
+
+export type ThumbnailProps = {
+  /** 远程 URL(http/https/data URI)。和 source 二选一,优先 uri。 */
+  uri?: string;
+  /** RN Image source —— 本地 require('...') / { uri:... } 完整对象。 */
+  source?: ImageSourcePropType;
+  /** 视觉尺寸阶梯,默认 'md'。 */
+  size?: ThumbnailSize;
+  /** 自定义样式覆盖(尺寸 / 圆角 / bg 由 size 决定,style 仅做微调如 marginLeft)。 */
+  style?: StyleProp<ImageStyle>;
+  /** Image.resizeMode,默认 'cover'(裁切撑满)。 */
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+  /** a11y 描述,SR 朗读;不传 RN Image 默认 hidden。 */
+  accessibilityLabel?: string;
+  /** 测试 testID */
+  testID?: string;
+};

package/src/components/ui/Toast/ToastHost.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Text, View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useColors, useThemedStyles, motion } from '../../../theme';
+import { dotColorFor, makeStyles } from './styles';
+import { _subs } from './toast';
+import type { Subscriber, ToastEntry, ToastHostProps } from './types';
+
+/**
+ * 在根附近挂一次。监听 toast() 调用并渲染当前 toast。
+ * 同一时间只显示一条 —— 新的会替换旧的。
+ */
+export function ToastHost({
+  testID,
+}: ToastHostProps = {}): React.JSX.Element | null {
+  const c = useColors();
+  const styles = useThemedStyles(makeStyles);
+  const [entry, setEntry] = useState<ToastEntry | null>(null);
+  const op = useSharedValue(0);
+  const ty = useSharedValue(8);
+  const dismissTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const sub: Subscriber = (next) => {
+      if (dismissTimer.current) clearTimeout(dismissTimer.current);
+      setEntry(next);
+    };
+    _subs.add(sub);
+    return () => {
+      _subs.delete(sub);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!entry) return;
+    cancelAnimation(op);
+    cancelAnimation(ty);
+    op.value = withTiming(1, { duration: motion.base });
+    ty.value = withTiming(0, { duration: motion.base });
+
+    dismissTimer.current = setTimeout(() => {
+      op.value = withTiming(0, { duration: motion.base });
+      ty.value = withTiming(8, { duration: motion.base }, (finished) => {
+        if (finished) runOnJS(setEntry)(null);
+      });
+    }, entry.duration);
+
+    return () => {
+      if (dismissTimer.current) clearTimeout(dismissTimer.current);
+      cancelAnimation(op);
+      cancelAnimation(ty);
+    };
+  }, [entry, op, ty]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: op.value,
+    transform: [{ translateY: ty.value }],
+  }));
+
+  if (!entry) return null;
+
+  const dotColor = dotColorFor(entry.kind, c);
+
+  return (
+    <View style={styles.host} pointerEvents="none" testID={testID}>
+      <Animated.View style={[styles.toast, animatedStyle]}>
+        {dotColor ? (
+          <View style={[styles.dot, { backgroundColor: dotColor }]} />
+        ) : null}
+        <Text
+          style={styles.text}
+          testID={testID ? `${testID}-text` : undefined}
+        >
+          {entry.message}
+        </Text>
+      </Animated.View>
+    </View>
+  );
+}

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

@@ -0,0 +1,8 @@
+export { toast } from './toast';
+export { ToastHost } from './ToastHost';
+export type {
+  ToastEntry,
+  ToastHostProps,
+  ToastInput,
+  ToastKind,
+} from './types';

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

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import type { ColorTokens } from '../../../theme';
+import { fw, r, radius, space, type as t } from '../../../theme';
+import type { ToastKind } from './types';
+
+export const makeStyles = (c: ColorTokens) =>
+  StyleSheet.create({
+    host: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: space[10],
+      alignItems: 'center',
+      // zIndex: toast 浮层 —— 盖在 Screen 内容之上(navigator / overlay 之下)。
+      // 同级兄弟节点无 z 顺序需求,但作为 absolute 浮岛对其他屏内 absolute 节点
+      // 需要显式 200 抢占,保留并锁数值。
+      zIndex: 200,
+    },
+    toast: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[2],
+      backgroundColor: c.inverseSurface,
+      borderRadius: radius.md,
+      paddingHorizontal: space[6],
+      paddingVertical: space[4],
+      maxWidth: '85%',
+    },
+    dot: {
+      // 6×6 视觉原子:dot 直径/圆角无语义 token,保留 r() 缩放原始值
+      width: r(6),
+      height: r(6),
+      borderRadius: r(3),
+    },
+    text: {
+      color: c.inverseOnSurface,
+      fontSize: t.sm,
+      fontWeight: fw.medium,
+      flexShrink: 1,
+    },
+  });
+
+/** kind → dot 颜色派生(返 style 值,§8 入 styles.ts)。
+ *  info 无圆点(返 null),success / error 走对应 status token。 */
+export function dotColorFor(kind: ToastKind, c: ColorTokens): string | null {
+  switch (kind) {
+    case 'success':
+      return c.success;
+    case 'error':
+      return c.error;
+    case 'info':
+      return null;
+  }
+}

package/src/components/ui/Toast/toast.ts

@@ -0,0 +1,36 @@
+/**
+ * 命令式 `toast()` API —— 与 `<ToastHost />` 配对使用。
+ *
+ * 文件名故意小写 `toast.ts`,host 组件叫 `ToastHost.tsx`,避免 APFS 大小写冲突。
+ */
+import type { Subscriber, ToastEntry, ToastInput, ToastKind } from './types';
+
+let _id = 0;
+export const _subs = new Set<Subscriber>();
+
+function emit(input: ToastInput, kind: ToastKind = 'info') {
+  const entry: ToastEntry =
+    typeof input === 'string'
+      ? { id: ++_id, message: input, kind, duration: 3000 }
+      : {
+          id: ++_id,
+          message: input.message,
+          kind: input.kind ?? kind,
+          duration: input.duration ?? 3000,
+        };
+  _subs.forEach((s) => s(entry));
+}
+
+/**
+ * 命令式 toast API。在 app 根附近挂一次 `<ToastHost />` 即可。
+ *
+ * toast('已切换到日报');
+ * toast.success('订单提交成功');
+ * toast.error('网络异常，请重试');
+ * toast({ message: '正在同步…', duration: 5000 });
+ */
+export const toast = Object.assign((input: ToastInput) => emit(input, 'info'), {
+  info: (input: ToastInput) => emit(input, 'info'),
+  success: (input: ToastInput) => emit(input, 'success'),
+  error: (input: ToastInput) => emit(input, 'error'),
+});

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

@@ -0,0 +1,37 @@
+/** Toast 类型：info=灰点 / success=绿点 / error=红点 */
+export type ToastKind = 'info' | 'success' | 'error';
+
+/**
+ * `toast(...)` 调用入参：
+ * - 字符串简写：默认 info kind 跟 2200ms duration
+ * - 对象形式：可指定 kind 跟 duration
+ */
+export type ToastInput =
+  | string
+  | {
+      /** 消息文本 */
+      message: string;
+      /** Toast 类型，默认 'info' */
+      kind?: ToastKind;
+      /** 自动消失毫秒数，默认 2200 */
+      duration?: number;
+    };
+
+export type ToastEntry = {
+  /** 唯一 id（自增），用于动画切换识别 */
+  id: number;
+  /** 消息文本 */
+  message: string;
+  /** Toast 类型 */
+  kind: ToastKind;
+  /** 显示毫秒数 */
+  duration: number;
+};
+
+/** Toast 订阅者函数签名（ToastHost 内部用） */
+export type Subscriber = (entry: ToastEntry) => void;
+
+export type ToastHostProps = {
+  /** E2E / 测试定位（业务读 toast 文本时用） */
+  testID?: string;
+};

package/src/components/ui/index.ts

@@ -0,0 +1,81 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarVariant } from './Avatar';
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
+export { BlurLayer } from './BlurLayer';
+export type { BlurLayerProps } from './BlurLayer';
+export { Button } from './Button';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './Button';
+export { Card } from './Card';
+export type { CardProps, CardVariant } from './Card';
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
+export { Cell, List } from './Cell';
+export type { CellProps, ListProps } from './Cell';
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';
+export { confirm, ConfirmHost } from './Confirm';
+export type { ConfirmOptions } from './Confirm';
+export { DrawerHeader } from './DrawerHeader';
+export type { DrawerHeaderProps } from './DrawerHeader';
+export { Empty } from './Empty';
+export type { EmptyProps } from './Empty';
+export { EntryCard } from './EntryCard';
+export type { EntryCardProps } from './EntryCard';
+export { Form, FormGroup, FormRow } from './Form';
+export type { FormProps, FormGroupProps, FormRowProps } from './Form';
+export { Grid } from './Grid';
+export type { GridItem, GridProps } from './Grid';
+export { Icon } from './Icon';
+export type { IconName, IconProps } from './Icon';
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+export { Input } from './Input';
+export type { InputProps } from './Input';
+export { Logo } from './Logo';
+export type { LogoProps } from './Logo';
+export { NavBar } from './NavBar';
+export type { NavBarProps, NavBarSlotConfig } from './NavBar';
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps } from './PasswordInput';
+export { Pulse, PulseDot, usePulse } from './Pulse';
+export type { PulseOptions, PulseProps, PulseDotProps } from './Pulse';
+export { Radio } from './Radio';
+export type { GroupProps as RadioGroupProps, RadioProps } from './Radio';
+export { Search } from './Search';
+export type { SearchProps } from './Search';
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonShape } from './Skeleton';
+export { Segmented } from './Segmented';
+export type { SegmentedProps } from './Segmented';
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { StatusDot } from './StatusDot';
+export type {
+  StatusDotProps,
+  StatusDotStatus,
+  StatusDotTone,
+} from './StatusDot';
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperSize } from './Stepper';
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { TabBar } from './TabBar';
+export type { TabBarItem, TabBarProps } from './TabBar';
+export { Tabs } from './Tabs';
+export type { TabItem, TabsProps } from './Tabs';
+export { Tag } from './Tag';
+export type { TagProps, TagSize, TagVariant } from './Tag';
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { Thumbnail } from './Thumbnail';
+export type { ThumbnailProps, ThumbnailSize } from './Thumbnail';
+export { toast, ToastHost } from './Toast';
+export type {
+  ToastEntry,
+  ToastHostProps,
+  ToastInput,
+  ToastKind,
+} from './Toast';