@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/components/price/price.tsx

@@ -0,0 +1,84 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { TypographyVariant } from '../../types';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+/** 12000 → '12,000원'. 웹 · Jest · 네이티브에서 같은 결과를 내도록 Intl을 쓰지 않는다 */
+export function formatPrice(value: number, unit = '원'): string {
+  const n = Math.round(value);
+  const digits = String(Math.abs(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return `${n < 0 ? '-' : ''}${digits}${unit}`;
+}
+
+export type PriceProps = {
+  value: number;
+  /** 할인 전 가격. value보다 클 때만 취소선으로 표시한다 */
+  originalValue?: number;
+  /** 기본 'body' */
+  variant?: TypographyVariant;
+  unit?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'baseline', gap: t.space[2] },
+  value: {
+    fontFamily: t.fontFamily,
+    fontWeight: '700',
+    color: t.colors.foreground,
+  },
+  original: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+    textDecorationLine: 'line-through',
+  },
+  rate: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    fontWeight: '700',
+    color: t.colors.destructive,
+  },
+}));
+
+export function Price({
+  value,
+  originalValue,
+  variant = 'body',
+  unit,
+  style,
+}: PriceProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const discounted = originalValue !== undefined && originalValue > value;
+  const rate = discounted ? Math.round((1 - value / originalValue) * 100) : 0;
+  const label = discounted
+    ? `${formatPrice(value, unit)}, 할인 전 ${formatPrice(originalValue, unit)}`
+    : formatPrice(value, unit);
+  return (
+    <View style={[s.row, style]} accessible accessibilityLabel={label}>
+      {discounted ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.rate}>
+          {rate}%
+        </Text>
+      ) : null}
+      <Text
+        maxFontSizeMultiplier={t.maxFontScale}
+        style={[
+          s.value,
+          {
+            fontSize: t.typography[variant].fontSize,
+            lineHeight: t.typography[variant].lineHeight,
+          },
+        ]}
+      >
+        {formatPrice(value, unit)}
+      </Text>
+      {discounted ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.original}>
+          {formatPrice(originalValue, unit)}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/search-field/index.ts

@@ -0,0 +1 @@
+export { SearchField, type SearchFieldProps } from './search-field';

package/src/components/search-field/search-field.tsx

@@ -0,0 +1,46 @@
+import { CloseGlyph, SearchGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { Field, type FieldProps } from '../field/field';
+
+export type SearchFieldProps = Omit<
+  FieldProps,
+  'leading' | 'trailing' | 'value' | 'onChangeText' | 'defaultValue'
+> & {
+  value: string;
+  onChangeText: (text: string) => void;
+  /** 지우기 버튼의 접근성 라벨. 기본 '검색어 지우기' */
+  clearLabel?: string;
+};
+
+export function SearchField({
+  value,
+  onChangeText,
+  clearLabel = '검색어 지우기',
+  ...rest
+}: SearchFieldProps) {
+  const t = useTheme();
+  return (
+    <Field
+      returnKeyType="search"
+      accessibilityRole="search"
+      autoCorrect={false}
+      {...rest}
+      value={value}
+      onChangeText={onChangeText}
+      leading={SearchGlyph}
+      trailing={
+        value ? (
+          <PressableBase
+            accessibilityLabel={clearLabel}
+            touchHeight={t.iconSize.md}
+            hitSlop={12}
+            onPress={() => onChangeText('')}
+          >
+            <CloseGlyph color={t.colors.mutedForeground} size={t.iconSize.sm} />
+          </PressableBase>
+        ) : undefined
+      }
+    />
+  );
+}

package/src/components/segmented-tabs/index.ts

@@ -0,0 +1,5 @@
+export {
+  SegmentedTabs,
+  type SegmentedTabsItem,
+  type SegmentedTabsProps,
+} from './segmented-tabs';

package/src/components/segmented-tabs/segmented-tabs.tsx

@@ -0,0 +1,81 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type SegmentedTabsItem<T extends string> = { value: T; label: string };
+
+export type SegmentedTabsProps<T extends string> = {
+  /** 2~4개 */
+  items: readonly SegmentedTabsItem<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const HEIGHT = 40;
+
+const useStyles = makeStyles((t) => ({
+  track: {
+    flexDirection: 'row',
+    height: HEIGHT,
+    padding: t.space[1],
+    gap: t.space[1],
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: t.radius.sm,
+  },
+  selected: { backgroundColor: t.colors.background, boxShadow: t.shadow.sm },
+  label: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    color: t.colors.mutedForeground,
+  },
+  selectedLabel: { color: t.colors.foreground },
+}));
+
+export function SegmentedTabs<T extends string>({
+  items,
+  value,
+  onValueChange,
+  style,
+}: SegmentedTabsProps<T>) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View accessibilityRole="tablist" style={[s.track, style]}>
+      {items.map((item) => {
+        const selected = item.value === value;
+        return (
+          <PressableBase
+            key={item.value}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+            accessibilityLabel={item.label}
+            touchHeight={HEIGHT}
+            pressedStyle={{}}
+            onPress={() => {
+              if (!selected) onValueChange(item.value);
+            }}
+            style={[s.tab, selected && s.selected]}
+          >
+            <Text
+              numberOfLines={1}
+              maxFontSizeMultiplier={t.maxFontScale}
+              style={[s.label, selected && s.selectedLabel]}
+            >
+              {item.label}
+            </Text>
+          </PressableBase>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/sheet/index.ts

@@ -0,0 +1 @@
+export { Sheet, type SheetProps } from './sheet';

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react';
+import {
+  Animated,
+  KeyboardAvoidingView,
+  Modal,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Backdrop, useOverlayTransition } from '../../internal/overlay';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { ToastHost } from '../toast/toast';
+
+export type SheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  /** 하단 안전 영역 높이. 앱의 safe-area 값을 넘긴다 */
+  bottomInset?: number;
+  /** false면 배경을 눌러도 닫히지 않는다. 기본 true */
+  dismissible?: boolean;
+  /** 배경 닫기 버튼의 접근성 라벨. 기본 '닫기' */
+  closeLabel?: string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, justifyContent: 'flex-end' },
+  panel: {
+    maxHeight: '90%',
+    paddingTop: t.space[2],
+    paddingHorizontal: t.space[4],
+    gap: t.space[3],
+    borderTopLeftRadius: t.radius.lg,
+    borderTopRightRadius: t.radius.lg,
+    backgroundColor: t.colors.background,
+    boxShadow: t.shadow.md,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 36,
+    height: 4,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.border,
+  },
+  title: {
+    ...t.typography.title,
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground,
+  },
+}));
+
+export function Sheet({
+  open,
+  onOpenChange,
+  title,
+  bottomInset = 0,
+  dismissible = true,
+  closeLabel = '닫기',
+  children,
+  style,
+}: SheetProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const { height } = useWindowDimensions();
+  const { mounted, progress } = useOverlayTransition(open);
+
+  const close = () => {
+    if (dismissible) onOpenChange(false);
+  };
+
+  return (
+    <Modal
+      visible={mounted}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      navigationBarTranslucent
+      onRequestClose={close}
+    >
+      <KeyboardAvoidingView behavior="padding" style={s.root}>
+        <Backdrop progress={progress} onPress={close} label={closeLabel} />
+        <Animated.View
+          accessibilityViewIsModal
+          style={[
+            s.panel,
+            { paddingBottom: t.space[4] + bottomInset },
+            {
+              transform: [
+                {
+                  translateY: progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [height, 0],
+                  }),
+                },
+              ],
+            },
+            style,
+          ]}
+        >
+          <View style={s.handle} />
+          {title ? (
+            <Text
+              accessibilityRole="header"
+              maxFontSizeMultiplier={t.maxFontScale}
+              style={s.title}
+            >
+              {title}
+            </Text>
+          ) : null}
+          {children}
+        </Animated.View>
+      </KeyboardAvoidingView>
+      <ToastHost />
+    </Modal>
+  );
+}

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps } from './skeleton';

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+import {
+  Animated,
+  type DimensionValue,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useNativeDriver } from '../../internal/overlay';
+import { useReducedMotion } from '../../internal/use-reduced-motion';
+import { useTheme } from '../../theme/theme-provider';
+
+export type SkeletonProps = {
+  /** 기본 '100%' */
+  width?: DimensionValue;
+  /** 기본 16 */
+  height?: DimensionValue;
+  /** 기본 radius.sm */
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** 불러오는 중인 자리. '동작 줄이기'가 켜져 있으면 깜빡이지 않는다 */
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  radius,
+  style,
+}: SkeletonProps) {
+  const t = useTheme();
+  const reduced = useReducedMotion();
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (reduced) {
+      opacity.setValue(0.7);
+      return;
+    }
+    const half = t.motion.duration * 4;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.5,
+          duration: half,
+          useNativeDriver,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: half,
+          useNativeDriver,
+        }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity, reduced, t.motion.duration]);
+
+  return (
+    <Animated.View
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        {
+          width,
+          height,
+          borderRadius: radius ?? t.radius.sm,
+          backgroundColor: t.colors.muted,
+          opacity,
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/components/status-badge/index.ts

@@ -0,0 +1,5 @@
+export {
+  StatusBadge,
+  type StatusBadgeProps,
+  type StatusBadgeTone,
+} from './status-badge';

package/src/components/status-badge/status-badge.tsx

@@ -0,0 +1,54 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type StatusBadgeTone =
+  'neutral' | 'info' | 'success' | 'warning' | 'destructive';
+
+export type StatusBadgeProps = {
+  /** 기본 'neutral' */
+  tone?: StatusBadgeTone;
+  children: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  base: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: t.space[2],
+    paddingVertical: 2,
+    borderRadius: t.radius.full,
+  },
+  label: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    fontWeight: '600',
+  },
+}));
+
+export function StatusBadge({
+  tone = 'neutral',
+  children,
+  style,
+}: StatusBadgeProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const [bg, fg] = {
+    neutral: [t.colors.muted, t.colors.mutedForeground],
+    info: [t.colors.info, t.colors.infoForeground],
+    success: [t.colors.success, t.colors.successForeground],
+    warning: [t.colors.warning, t.colors.warningForeground],
+    destructive: [t.colors.destructive, t.colors.destructiveForeground],
+  }[tone];
+  return (
+    <View style={[s.base, { backgroundColor: bg }, style]}>
+      <Text
+        numberOfLines={1}
+        maxFontSizeMultiplier={t.maxFontScale}
+        style={[s.label, { color: fg }]}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}

package/src/components/switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './switch';

package/src/components/switch/switch.tsx

@@ -0,0 +1,26 @@
+import type { ComponentRef, Ref } from 'react';
+import {
+  Switch as RNSwitch,
+  type SwitchProps as RNSwitchProps,
+} from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+
+export type SwitchProps = Omit<RNSwitchProps, 'value' | 'onValueChange'> & {
+  ref?: Ref<ComponentRef<typeof RNSwitch>>;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+};
+
+export function Switch({ disabled, style, ...rest }: SwitchProps) {
+  const t = useTheme();
+  return (
+    <RNSwitch
+      trackColor={{ false: t.colors.border, true: t.colors.primary }}
+      thumbColor={t.colors.background}
+      ios_backgroundColor={t.colors.border}
+      {...rest}
+      disabled={disabled}
+      style={[disabled && { opacity: t.opacity.disabled }, style]}
+    />
+  );
+}

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextProps, type TextTone, type TextWeight } from './text';

package/src/components/text/text.tsx

@@ -0,0 +1,54 @@
+import type { ComponentRef, Ref } from 'react';
+import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import type { TypographyVariant } from '../../types';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type TextTone = 'default' | 'muted' | 'destructive' | 'success';
+
+export type TextProps = RNTextProps & {
+  ref?: Ref<ComponentRef<typeof RNText>>;
+  /** 기본 'body' */
+  variant?: TypographyVariant;
+  /** 기본 'default' */
+  tone?: TextTone;
+  /** 지정하지 않으면 variant의 굵기 */
+  weight?: TextWeight;
+};
+
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+const useStyles = makeStyles((t) => ({
+  caption: t.typography.caption,
+  body: t.typography.body,
+  bodyLg: t.typography.bodyLg,
+  title: t.typography.title,
+  display: t.typography.display,
+  default: { color: t.colors.foreground },
+  muted: { color: t.colors.mutedForeground },
+  destructive: { color: t.colors.destructive },
+  success: { color: t.colors.success },
+  font: { fontFamily: t.fontFamily },
+  regular: { fontWeight: '400' },
+  medium: { fontWeight: '500' },
+  semibold: { fontWeight: '600' },
+  bold: { fontWeight: '700' },
+}));
+
+export function Text({
+  variant = 'body',
+  tone = 'default',
+  weight,
+  style,
+  ...rest
+}: TextProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <RNText
+      maxFontSizeMultiplier={t.maxFontScale}
+      {...rest}
+      style={[s.font, s[variant], s[tone], weight && s[weight], style]}
+    />
+  );
+}

package/src/components/toast/index.ts

@@ -0,0 +1,9 @@
+export {
+  ToastHost,
+  ToastProvider,
+  useToast,
+  type ToastAction,
+  type ToastOptions,
+  type ToastProviderProps,
+  type ToastTone,
+} from './toast';