managarten/picture/apps/mobile/components/Text.tsx

import { forwardRef } from 'react';
import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native';
import { useTheme } from '~/contexts/ThemeContext';

type TextVariant =
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'title'
  | 'body'
  | 'bodyLarge'
  | 'bodySmall'
  | 'caption'
  | 'label'
  | 'button';

type TextColor =
  | 'primary'
  | 'secondary'
  | 'tertiary'
  | 'inverse'
  | 'error'
  | 'success'
  | 'warning';

type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';

type TextProps = {
  variant?: TextVariant;
  color?: TextColor;
  weight?: TextWeight;
  align?: 'left' | 'center' | 'right';
  children?: React.ReactNode;
} & RNTextProps;

export const Text = forwardRef<RNText, TextProps>(({
  variant = 'body',
  color = 'primary',
  weight,
  align = 'left',
  style,
  children,
  ...props
}, ref) => {
  const { theme } = useTheme();

  // Variant styles
  const getVariantStyle = (): TextStyle => {
    switch (variant) {
      case 'h1':
        return {
          fontSize: 32,
          fontWeight: '700',
          lineHeight: 40,
        };
      case 'h2':
        return {
          fontSize: 28,
          fontWeight: '700',
          lineHeight: 36,
        };
      case 'h3':
        return {
          fontSize: 24,
          fontWeight: '600',
          lineHeight: 32,
        };
      case 'h4':
        return {
          fontSize: 20,
          fontWeight: '600',
          lineHeight: 28,
        };
      case 'title':
        return {
          fontSize: 44,
          fontWeight: '800',
          lineHeight: 52,
        };
      case 'bodyLarge':
        return {
          fontSize: 18,
          fontWeight: '400',
          lineHeight: 28,
        };
      case 'body':
        return {
          fontSize: 16,
          fontWeight: '400',
          lineHeight: 24,
        };
      case 'bodySmall':
        return {
          fontSize: 14,
          fontWeight: '400',
          lineHeight: 20,
        };
      case 'caption':
        return {
          fontSize: 12,
          fontWeight: '400',
          lineHeight: 16,
        };
      case 'label':
        return {
          fontSize: 14,
          fontWeight: '500',
          lineHeight: 20,
        };
      case 'button':
        return {
          fontSize: 16,
          fontWeight: '600',
          lineHeight: 24,
        };
      default:
        return {};
    }
  };

  // Color mapping
  const getTextColor = (): string => {
    switch (color) {
      case 'primary':
        return theme.colors.text.primary;
      case 'secondary':
        return theme.colors.text.secondary;
      case 'tertiary':
        return theme.colors.text.tertiary;
      case 'inverse':
        return theme.colors.text.inverse;
      case 'error':
        return theme.colors.error;
      case 'success':
        return theme.colors.success;
      case 'warning':
        return theme.colors.warning;
      default:
        return theme.colors.text.primary;
    }
  };

  // Weight mapping
  const getFontWeight = (): TextStyle['fontWeight'] => {
    if (weight) {
      const weightMap: Record<TextWeight, TextStyle['fontWeight']> = {
        regular: '400',
        medium: '500',
        semibold: '600',
        bold: '700',
      };
      return weightMap[weight];
    }
    return undefined;
  };

  const textStyle: TextStyle = {
    ...getVariantStyle(),
    color: getTextColor(),
    textAlign: align,
    ...(weight && { fontWeight: getFontWeight() }),
    ...(style as TextStyle),
  };

  return (
    <RNText ref={ref} style={textStyle} {...props}>
      {children}
    </RNText>
  );
});

Text.displayName = 'Text';