@unif/react-native-ui 0.4.0 → 1.0.0

package/src/button/index.tsx

@@ -1,103 +0,0 @@
-/**
- * 按钮组件
- *
- * type + size + semantic styles。
- */
-
-import React, { useMemo } from 'react';
-import { Pressable, Text, View, ActivityIndicator } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { ButtonSemanticStyles } from './style';
-import {
-  DEFAULT_STYLES,
-  SIZE_STYLES,
-  createTypeStyles,
-  DISABLED_STYLES,
-  BLOCK_STYLES,
-  PRESSED_STYLE,
-  loadingStyle,
-} from './style';
-
-export interface ButtonProps {
-  /** 按钮类型 */
-  type?: 'primary' | 'outline' | 'ghost' | 'danger';
-  /** 按钮尺寸 */
-  size?: 'default' | 'small';
-  /** 左侧图标 */
-  icon?: React.ReactNode;
-  /** 禁用状态 */
-  disabled?: boolean;
-  /** 撑满容器宽度 */
-  block?: boolean;
-  /** 加载状态，禁用点击 */
-  loading?: boolean;
-  /** 点击回调 */
-  onPress: () => void;
-  /** 容器样式 */
-  style?: ViewStyle;
-  /** 语义样式覆盖 */
-  styles?: Partial<ButtonSemanticStyles>;
-  /** 测试标识 */
-  testID?: string;
-  /** 按钮内容 */
-  children: React.ReactNode;
-}
-
-const Button: React.FC<ButtonProps> = ({
-  type = 'primary',
-  size = 'default',
-  icon,
-  disabled,
-  block,
-  loading,
-  onPress,
-  style,
-  styles: semanticStyles,
-  testID,
-  children,
-}: ButtonProps) => {
-  const tokens = useTokens();
-  const typeStyles = useMemo(() => createTypeStyles(tokens), [tokens]);
-
-  const s = useMemo(
-    () =>
-      mergeStyles<ButtonSemanticStyles>(
-        DEFAULT_STYLES,
-        SIZE_STYLES[size],
-        typeStyles[type],
-        disabled ? DISABLED_STYLES : undefined,
-        block ? BLOCK_STYLES : undefined,
-        semanticStyles
-      ),
-    [type, size, disabled, block, semanticStyles, typeStyles]
-  );
-
-  return (
-    <Pressable
-      style={({ pressed }) => [s.root, pressed && PRESSED_STYLE, style]}
-      onPress={onPress}
-      disabled={disabled || loading}
-      accessibilityRole="button"
-      accessibilityState={{ disabled: !!disabled || !!loading }}
-      testID={testID}
-    >
-      {icon && <View style={s.icon}>{icon}</View>}
-      {loading && (
-        <ActivityIndicator
-          color={(s.content?.color as string) ?? tokens.colorTextSecondary}
-          size="small"
-          style={loadingStyle}
-        />
-      )}
-      {typeof children === 'string' ? (
-        <Text style={s.content}>{children}</Text>
-      ) : (
-        children
-      )}
-    </Pressable>
-  );
-};
-
-export default Button;

package/src/button/style/index.tsx

@@ -1,75 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type ButtonSemanticStyles = {
-  root?: ViewStyle;
-  icon?: ViewStyle;
-  content?: TextStyle;
-};
-
-export const DEFAULT_STYLES: ButtonSemanticStyles = {
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    marginRight: 6,
-  },
-  content: {
-    fontSize: 14,
-  },
-};
-
-export const SIZE_STYLES: Record<
-  'default' | 'small',
-  Partial<ButtonSemanticStyles>
-> = {
-  default: {
-    root: { paddingVertical: 10, borderRadius: 8 },
-    content: { fontSize: 14 },
-  },
-  small: {
-    root: { paddingVertical: 6, borderRadius: 6 },
-    content: { fontSize: 12 },
-  },
-};
-
-export const createTypeStyles = (
-  t: Tokens
-): Record<
-  'primary' | 'outline' | 'ghost' | 'danger',
-  Partial<ButtonSemanticStyles>
-> => ({
-  primary: {
-    root: { backgroundColor: t.colorPrimary },
-    content: { color: '#FFF', fontWeight: '600' },
-  },
-  outline: {
-    root: { borderWidth: 1, borderColor: t.colorBorder },
-    content: { color: t.colorTextSecondary },
-  },
-  ghost: {
-    root: { borderWidth: 1, borderColor: t.colorPrimary },
-    content: { color: t.colorPrimary },
-  },
-  danger: {
-    root: { backgroundColor: t.colorError },
-    content: { color: '#FFF', fontWeight: '600' },
-  },
-});
-
-export const DISABLED_STYLES: Partial<ButtonSemanticStyles> = {
-  root: { opacity: 0.5 },
-};
-
-export const BLOCK_STYLES: Partial<ButtonSemanticStyles> = {
-  root: { flex: 1 },
-};
-
-export const PRESSED_STYLE: ViewStyle = { opacity: 0.7 };
-
-export const loadingStyle = StyleSheet.create({
-  s: { marginRight: 6 },
-}).s;

package/src/center/index.tsx

@@ -1,18 +0,0 @@
-/**
- * 居中布局容器
- *
- * justifyContent + alignItems 均为 'center'。
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import type { ViewProps } from 'react-native';
-import { baseStyle } from './style';
-
-export type CenterProps = ViewProps;
-
-const Center: React.FC<CenterProps> = ({ style, ...rest }) => (
-  <View style={[baseStyle, style]} {...rest} />
-);
-
-export default Center;

package/src/center/style/index.tsx

@@ -1,8 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const baseStyle = StyleSheet.create({
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-}).center;

package/src/chip/index.tsx

@@ -1,110 +0,0 @@
-/**
- * Chip 基础组件
- *
- * 胶囊标签，支持选中态、禁用态和图标。
- */
-
-import React, { useMemo } from 'react';
-import { View, Text, Pressable } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { ChipSemanticStyles } from './style';
-import {
-  createDefaultStyles,
-  createSelectedStyles,
-  DISABLED_STYLES,
-  createSmallStyles,
-} from './style';
-
-export interface ChipProps {
-  /** 胶囊内容 */
-  children: React.ReactNode;
-  /** 点击回调 */
-  onPress?: () => void;
-  /** 选中状态 */
-  selected?: boolean;
-  /** 禁用状态 */
-  disabled?: boolean;
-  /** 胶囊尺寸 */
-  size?: 'default' | 'small';
-  /** 左侧图标 */
-  icon?: React.ReactNode;
-  /** 容器样式 */
-  style?: ViewStyle;
-  /** 语义样式覆盖 */
-  styles?: Partial<ChipSemanticStyles>;
-  /** 测试标识 */
-  testID?: string;
-}
-
-const PRESSED_STYLE: ViewStyle = { opacity: 0.7 };
-
-const Chip: React.FC<ChipProps> = ({
-  children,
-  onPress,
-  selected,
-  disabled,
-  size = 'default',
-  icon,
-  style,
-  styles: semanticStyles,
-  testID,
-}) => {
-  const tokens = useTokens();
-  const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-  const selectedStyles = useMemo(() => createSelectedStyles(tokens), [tokens]);
-  const smallStyles = useMemo(() => createSmallStyles(tokens), [tokens]);
-
-  const s = useMemo(
-    () =>
-      mergeStyles<ChipSemanticStyles>(
-        defaultStyles,
-        size === 'small' ? smallStyles : undefined,
-        selected ? selectedStyles : undefined,
-        disabled ? DISABLED_STYLES : undefined,
-        semanticStyles
-      ),
-    [
-      size,
-      selected,
-      disabled,
-      semanticStyles,
-      defaultStyles,
-      selectedStyles,
-      smallStyles,
-    ]
-  );
-
-  const content = (
-    <View style={[s.root, style]}>
-      {icon && <View style={s.iconWrapper}>{icon}</View>}
-      {typeof children === 'string' ? (
-        <Text style={s.content} numberOfLines={1}>
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
-    </View>
-  );
-
-  if (onPress) {
-    return (
-      <Pressable
-        accessibilityRole="button"
-        accessibilityState={{ disabled: !!disabled, selected: !!selected }}
-        onPress={onPress}
-        disabled={disabled}
-        style={({ pressed }) => pressed && PRESSED_STYLE}
-        testID={testID}
-      >
-        {content}
-      </Pressable>
-    );
-  }
-
-  return content;
-};
-
-export default Chip;

package/src/chip/style/index.tsx

@@ -1,55 +0,0 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type ChipSemanticStyles = {
-  root?: ViewStyle;
-  iconWrapper?: ViewStyle;
-  content?: TextStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): ChipSemanticStyles => ({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#F0F0F5',
-    borderRadius: t.radiusFull,
-    paddingHorizontal: 14,
-    paddingVertical: 7,
-  },
-  iconWrapper: {
-    marginRight: 4,
-  },
-  content: {
-    fontSize: t.fontSizeSm,
-    color: t.colorText,
-  },
-});
-
-export const createSelectedStyles = (
-  t: Tokens
-): Partial<ChipSemanticStyles> => ({
-  root: {
-    borderWidth: 1,
-    borderColor: t.colorPrimary,
-    backgroundColor: '#FFF5EB',
-  },
-  content: {
-    color: t.colorPrimary,
-  },
-});
-
-export const DISABLED_STYLES: Partial<ChipSemanticStyles> = {
-  root: {
-    opacity: 0.5,
-  },
-};
-
-export const createSmallStyles = (t: Tokens): Partial<ChipSemanticStyles> => ({
-  root: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-  },
-  content: {
-    fontSize: t.fontSizeXs,
-  },
-});

package/src/column/index.tsx

@@ -1,43 +0,0 @@
-/**
- * 垂直布局容器
- *
- * 语义化的 View，显式 flexDirection: 'column'。
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import type { ViewProps, ViewStyle } from 'react-native';
-import { baseStyle } from './style';
-
-type AlignItems = ViewStyle['alignItems'];
-type JustifyContent = ViewStyle['justifyContent'];
-
-export interface ColumnProps extends ViewProps {
-  /** alignItems */
-  align?: AlignItems;
-  /** justifyContent */
-  justify?: JustifyContent;
-  /** 子元素间距 */
-  gap?: number;
-}
-
-const Column: React.FC<ColumnProps> = ({
-  align,
-  justify,
-  gap,
-  style,
-  ...rest
-}: ColumnProps) => (
-  <View
-    style={[
-      baseStyle,
-      align != null && { alignItems: align },
-      justify != null && { justifyContent: justify },
-      gap != null && { gap },
-      style,
-    ]}
-    {...rest}
-  />
-);
-
-export default Column;

package/src/column/style/index.tsx

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const baseStyle = StyleSheet.create({
-  column: {
-    flexDirection: 'column',
-  },
-}).column;

package/src/divider/index.tsx

@@ -1,37 +0,0 @@
-/**
- * 分割线组件
- */
-
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { useTokens } from '../theme/context';
-import { createHairlineStyle, createStandardStyle } from './style';
-
-interface DividerProps {
-  hairline?: boolean;
-  marginHorizontal?: number;
-  style?: ViewStyle;
-}
-
-const Divider: React.FC<DividerProps> = ({
-  hairline = true,
-  marginHorizontal,
-  style,
-}: DividerProps) => {
-  const tokens = useTokens();
-  const hairlineStyle = useMemo(() => createHairlineStyle(tokens), [tokens]);
-  const standardStyle = useMemo(() => createStandardStyle(tokens), [tokens]);
-
-  return (
-    <View
-      style={[
-        hairline ? hairlineStyle : standardStyle,
-        marginHorizontal != null && { marginHorizontal },
-        style,
-      ]}
-    />
-  );
-};
-
-export default Divider;

package/src/divider/style/index.tsx

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export const createHairlineStyle = (t: Tokens) =>
-  StyleSheet.create({
-    line: {
-      height: StyleSheet.hairlineWidth,
-      backgroundColor: t.colorBorder,
-    },
-  }).line;
-
-export const createStandardStyle = (t: Tokens) =>
-  StyleSheet.create({
-    line: { height: 1, backgroundColor: t.colorBorder },
-  }).line;

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { mergeStyles } from './useMergeStyles';

package/src/hooks/useMergeStyles.ts

@@ -1,27 +0,0 @@
-/**
- * 语义样式合并
- *
- * 纯函数版本，调用方通过 useMemo 控制缓存策略。
- */
-
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-
-type StyleValue = ViewStyle | TextStyle | ImageStyle;
-
-/**
- * 按 slot 维度合并多来源样式。
- */
-export function mergeStyles<T extends Record<string, StyleValue | undefined>>(
-  ...sources: (Partial<T> | undefined)[]
-): T {
-  const merged = {} as Record<string, StyleValue>;
-  for (const source of sources) {
-    if (!source) {
-      continue;
-    }
-    for (const key of Object.keys(source)) {
-      merged[key] = { ...(merged[key] as object), ...(source[key] as object) };
-    }
-  }
-  return merged as T;
-}

package/src/input/index.tsx

@@ -1,122 +0,0 @@
-/**
- * Input 基础组件
- *
- * TextInput 容器，支持多行、工具栏插槽、自动聚焦。
- */
-
-import React, { useRef, useEffect, useMemo, forwardRef } from 'react';
-import { View, TextInput } from 'react-native';
-import type { ViewStyle, ReturnKeyTypeOptions } from 'react-native';
-import { mergeStyles } from '../hooks';
-import { useTokens } from '../theme/context';
-import type { InputSemanticStyles } from './style';
-import { createDefaultStyles } from './style';
-
-export interface InputProps {
-  /** 输入值 */
-  value?: string;
-  /** 文本变更回调 */
-  onChangeText?: (text: string) => void;
-  /** 占位提示文本 */
-  placeholder?: string;
-  /** 是否多行输入 */
-  multiline?: boolean;
-  /** 最大字符数 */
-  maxLength?: number;
-  /** 多行模式下的最大高度 */
-  maxHeight?: number;
-  /** 自动聚焦 */
-  autoFocus?: boolean;
-  /** 键盘回车键类型 */
-  returnKeyType?: ReturnKeyTypeOptions;
-  /** 提交编辑回调 */
-  onSubmitEditing?: () => void;
-  /** 失焦回调 */
-  onBlur?: () => void;
-  /** 聚焦回调 */
-  onFocus?: () => void;
-  /** 提交时是否收起键盘 */
-  blurOnSubmit?: boolean;
-  /** 禁用状态 */
-  disabled?: boolean;
-  /** 底部工具栏插槽 */
-  toolbar?: React.ReactNode;
-  /** 容器样式 */
-  style?: ViewStyle;
-  /** 语义样式覆盖 */
-  styles?: Partial<InputSemanticStyles>;
-  /** 测试标识 */
-  testID?: string;
-}
-
-type InputRef = React.ElementRef<typeof TextInput>;
-
-const Input = forwardRef<InputRef, InputProps>(
-  (
-    {
-      value,
-      onChangeText,
-      placeholder,
-      multiline = false,
-      maxLength,
-      maxHeight,
-      autoFocus,
-      returnKeyType,
-      onSubmitEditing,
-      onBlur,
-      onFocus,
-      blurOnSubmit,
-      disabled,
-      toolbar,
-      style,
-      styles: semanticStyles,
-      testID,
-    },
-    ref
-  ) => {
-    const inputRef = useRef<InputRef>(null);
-    const tokens = useTokens();
-    const defaultStyles = useMemo(() => createDefaultStyles(tokens), [tokens]);
-
-    React.useImperativeHandle(ref, () => inputRef.current as InputRef);
-
-    const s = useMemo(
-      () => mergeStyles<InputSemanticStyles>(defaultStyles, semanticStyles),
-      [defaultStyles, semanticStyles]
-    );
-
-    useEffect(() => {
-      if (autoFocus) {
-        inputRef.current?.focus();
-      }
-    }, [autoFocus]);
-
-    return (
-      <View style={[s.root, style]}>
-        <TextInput
-          ref={inputRef}
-          testID={testID}
-          style={[s.input, maxHeight ? { maxHeight } : undefined]}
-          value={value}
-          onChangeText={onChangeText}
-          placeholder={placeholder}
-          placeholderTextColor={tokens.colorTextPlaceholder}
-          accessibilityLabel={placeholder}
-          multiline={multiline}
-          maxLength={maxLength}
-          returnKeyType={returnKeyType}
-          onSubmitEditing={onSubmitEditing}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          editable={!disabled}
-          blurOnSubmit={blurOnSubmit ?? !multiline}
-        />
-        {toolbar && <View style={s.toolbar}>{toolbar}</View>}
-      </View>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export default Input;

package/src/input/style/index.tsx

@@ -1,32 +0,0 @@
-import { Platform } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import type { Tokens } from '../../theme/tokens';
-
-export type InputSemanticStyles = {
-  root?: ViewStyle;
-  input?: TextStyle;
-  toolbar?: ViewStyle;
-};
-
-export const createDefaultStyles = (t: Tokens): InputSemanticStyles => ({
-  root: {
-    backgroundColor: t.colorBgElevated,
-    borderRadius: t.radiusXl,
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 6,
-    ...t.shadow,
-  },
-  input: {
-    fontSize: t.fontSize,
-    color: t.colorText,
-    lineHeight: t.lineHeight,
-    paddingVertical: Platform.OS === 'ios' ? 4 : 2,
-    paddingHorizontal: 4,
-  },
-  toolbar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingTop: 4,
-  },
-});