@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/components/toast/toast.tsx

@@ -0,0 +1,248 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Platform,
+  Text,
+  View,
+} from 'react-native';
+import { useNativeDriver } from '../../internal/overlay';
+import { PressableBase } from '../../internal/pressable-base';
+import { useReducedMotion } from '../../internal/use-reduced-motion';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type ToastTone = 'neutral' | 'success' | 'destructive';
+
+export type ToastOptions = {
+  message: string;
+  /** 기본 'neutral' */
+  tone?: ToastTone;
+  /** ms. 기본 2500, action이 있으면 4000 */
+  duration?: number;
+  /** 메시지 오른쪽 텍스트 버튼 (예: 실행 취소). 누르면 Toast가 닫힌다 */
+  action?: ToastAction;
+};
+
+export type ToastAction = { label: string; onPress: () => void };
+
+type Current = {
+  id: number;
+  message: string;
+  tone: ToastTone;
+  action?: ToastAction;
+};
+
+/** Provider 하나가 가진 상태. show를 불러도 Provider 아래 화면은 다시 렌더링되지 않는다. */
+function createToastStore() {
+  let current: Current | null = null;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let seq = 0;
+  let hosts: string[] = [];
+  const listeners = new Set<() => void>();
+  const emit = () => listeners.forEach((l) => l());
+
+  const hide = () => {
+    clearTimeout(timer);
+    current = null;
+    emit();
+  };
+
+  return {
+    bottomInset: 0,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getCurrent: () => current,
+    /** 가장 나중에 붙은 host(가장 위의 Modal)만 그린다 */
+    getTopHost: () => hosts[hosts.length - 1],
+    addHost(id: string) {
+      hosts = [...hosts, id];
+      emit();
+      return () => {
+        hosts = hosts.filter((h) => h !== id);
+        emit();
+      };
+    },
+    show({ message, tone = 'neutral', duration, action }: ToastOptions) {
+      clearTimeout(timer);
+      current = { id: ++seq, message, tone, action };
+      timer = setTimeout(hide, duration ?? (action ? 4000 : 2500));
+      emit();
+      if (Platform.OS === 'ios')
+        AccessibilityInfo.announceForAccessibility(message);
+    },
+    hide,
+  };
+}
+
+type ToastStore = ReturnType<typeof createToastStore>;
+
+const StoreContext = createContext<ToastStore | null>(null);
+
+export type ToastProviderProps = {
+  /** 하단 안전 영역 높이. 앱의 safe-area 값을 넘긴다 */
+  bottomInset?: number;
+  children: ReactNode;
+};
+
+export function ToastProvider({
+  bottomInset = 0,
+  children,
+}: ToastProviderProps) {
+  const [store] = useState(createToastStore);
+  store.bottomInset = bottomInset;
+  useEffect(() => () => store.hide(), [store]);
+  return (
+    <StoreContext.Provider value={store}>
+      {children}
+      <ToastHost />
+    </StoreContext.Provider>
+  );
+}
+
+export function useToast(): { show: (options: ToastOptions) => void } {
+  const store = useContext(StoreContext);
+  if (!store) throw new Error('useToast must be used inside <ToastProvider>.');
+  return store;
+}
+
+const useStyles = makeStyles((t) => ({
+  layer: {
+    position: 'absolute',
+    left: t.space[4],
+    right: t.space[4],
+    alignItems: 'center',
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: 480,
+    minHeight: 48,
+    paddingHorizontal: t.space[4],
+    paddingVertical: t.space[3],
+    borderRadius: t.radius.md,
+    boxShadow: t.shadow.md,
+  },
+  withAction: {
+    alignSelf: 'stretch',
+    paddingVertical: 0,
+    paddingRight: t.space[2],
+  },
+  message: { ...t.typography.body, flexShrink: 1, fontFamily: t.fontFamily },
+  messageFill: { flex: 1, fontSize: 14 },
+  action: { paddingHorizontal: t.space[3], justifyContent: 'center' },
+  actionLabel: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '700',
+  },
+}));
+
+/**
+ * Toast를 그리는 자리. Provider가 하나 두고, Modal을 쓰는 컴포넌트(Sheet · Dialog)가
+ * Modal 안에 하나씩 더 둔다. 가장 위의 host만 그린다.
+ */
+export function ToastHost() {
+  const store = useContext(StoreContext);
+  return store ? <ToastHostInner store={store} /> : null;
+}
+
+function ToastHostInner({ store }: { store: ToastStore }) {
+  const t = useTheme();
+  const s = useStyles();
+  const id = useId();
+  const reduced = useReducedMotion();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const current = useSyncExternalStore(store.subscribe, store.getCurrent);
+  const isTop = useSyncExternalStore(
+    store.subscribe,
+    () => store.getTopHost() === id
+  );
+
+  useEffect(() => store.addHost(id), [store, id]);
+
+  useEffect(() => {
+    if (!current) return;
+    opacity.setValue(reduced ? 1 : 0);
+    if (reduced) return;
+    const animation = Animated.timing(opacity, {
+      toValue: 1,
+      duration: t.motion.duration,
+      useNativeDriver,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [current, opacity, reduced, t.motion.duration]);
+
+  if (!current || !isTop) return null;
+
+  const [bg, fg] = {
+    neutral: [t.colors.foreground, t.colors.background],
+    success: [t.colors.success, t.colors.successForeground],
+    destructive: [t.colors.destructive, t.colors.destructiveForeground],
+  }[current.tone];
+  // 어두운 바탕(light) 위에서는 밝은 파랑, 밝은 바탕(dark) 위에서는 진한 파랑
+  const actionColor =
+    current.tone !== 'neutral'
+      ? fg
+      : t.scheme === 'light'
+        ? '#93c5fd'
+        : '#1d4ed8';
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[s.layer, { bottom: t.space[4] + store.bottomInset }]}
+    >
+      <Animated.View
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+        style={[
+          s.toast,
+          !!current.action && s.withAction,
+          { backgroundColor: bg, opacity },
+        ]}
+      >
+        <Text
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.message, !!current.action && s.messageFill, { color: fg }]}
+        >
+          {current.message}
+        </Text>
+        {current.action ? (
+          <PressableBase
+            accessibilityRole="button"
+            accessibilityLabel={current.action.label}
+            touchHeight={44}
+            style={s.action}
+            onPress={() => {
+              current.action?.onPress();
+              store.hide();
+            }}
+          >
+            <Text
+              maxFontSizeMultiplier={t.maxFontScale}
+              style={[s.actionLabel, { color: actionColor }]}
+            >
+              {current.action.label}
+            </Text>
+          </PressableBase>
+        ) : null}
+      </Animated.View>
+    </View>
+  );
+}

package/src/components/wizard-steps/index.ts

@@ -0,0 +1 @@
+export { WizardSteps, type WizardStepsProps } from './wizard-steps';

package/src/components/wizard-steps/wizard-steps.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 WizardStepsProps = {
+  /** 단계 이름 */
+  steps: readonly string[];
+  /** 지금 단계 (0부터) */
+  current: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  bar: { flexDirection: 'row', gap: t.space[1] },
+  segment: {
+    flex: 1,
+    height: 4,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.muted,
+  },
+  done: { backgroundColor: t.colors.primary },
+  label: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+  },
+  name: { color: t.colors.foreground, fontWeight: '600' },
+}));
+
+/** 여러 단계로 나뉜 입력 흐름의 진행 표시 */
+export function WizardSteps({ steps, current, style }: WizardStepsProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const index = Math.min(Math.max(current, 0), steps.length - 1);
+  return (
+    <View
+      style={[s.root, style]}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`${steps.length}단계 중 ${index + 1}단계, ${steps[index] ?? ''}`}
+      accessibilityValue={{ min: 1, max: steps.length, now: index + 1 }}
+    >
+      <View style={s.bar}>
+        {steps.map((step, i) => (
+          <View key={step} style={[s.segment, i <= index && s.done]} />
+        ))}
+      </View>
+      <Text maxFontSizeMultiplier={t.maxFontScale} style={s.label}>
+        {index + 1}/{steps.length} · <Text style={s.name}>{steps[index]}</Text>
+      </Text>
+    </View>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,56 @@
+export { createTheme, defaultThemes } from './theme/create-theme';
+export {
+  ThemeProvider,
+  useTheme,
+  type ThemeProviderProps,
+} from './theme/theme-provider';
+export { makeStyles } from './utils/styles';
+export {
+  PressableBase,
+  type PressableBaseProps,
+} from './internal/pressable-base';
+export type { IconRenderProps, IconSlot } from './internal/icon';
+export { renderIcon } from './internal/icon';
+export {
+  AlertGlyph,
+  CheckGlyph,
+  ChevronGlyph,
+  CloseGlyph,
+  PlusGlyph,
+  SearchGlyph,
+} from './internal/glyphs';
+export { contrastRatio, pickForeground } from './utils/color';
+
+export * from './components/button';
+export * from './components/checkbox';
+export * from './components/chip';
+export * from './components/chip-group';
+export * from './components/dialog';
+export * from './components/divider';
+export * from './components/empty-state';
+export * from './components/field';
+export * from './components/list-row';
+export * from './components/photo';
+export * from './components/price';
+export * from './components/search-field';
+export * from './components/segmented-tabs';
+export * from './components/sheet';
+export * from './components/skeleton';
+export * from './components/status-badge';
+export * from './components/switch';
+export * from './components/text';
+export * from './components/toast';
+export * from './components/wizard-steps';
+
+export type {
+  ColorScheme,
+  Theme,
+  ThemeColors,
+  ThemeOverrides,
+  Themes,
+  ThemeTokens,
+  TypographyToken,
+  TypographyVariant,
+} from './types';
+
+export * from './blocks';

package/src/internal/glyphs.tsx

@@ -0,0 +1,158 @@
+import { StyleSheet, View } from 'react-native';
+import type { IconRenderProps } from './icon';
+
+// svg 없이 그리는 최소 아이콘. 아이콘 세트는 앱이 슬롯으로 넣는다.
+
+export function SearchGlyph({ color, size }: IconRenderProps) {
+  const ring = size * 0.62;
+  const stroke = Math.max(1.5, size / 10);
+  return (
+    <View style={{ width: size, height: size }}>
+      <View
+        style={{
+          width: ring,
+          height: ring,
+          borderRadius: ring / 2,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={[
+          styles.absolute,
+          {
+            width: size * 0.36,
+            height: stroke,
+            backgroundColor: color,
+            borderRadius: stroke,
+            right: size * 0.02,
+            bottom: size * 0.14,
+            transform: [{ rotate: '45deg' }],
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function CloseGlyph({ color, size }: IconRenderProps) {
+  const stroke = Math.max(1.5, size / 10);
+  const bar = {
+    position: 'absolute' as const,
+    width: size * 0.8,
+    height: stroke,
+    borderRadius: stroke,
+    backgroundColor: color,
+    top: (size - stroke) / 2,
+    left: size * 0.1,
+  };
+  return (
+    <View style={{ width: size, height: size }}>
+      <View style={[bar, { transform: [{ rotate: '45deg' }] }]} />
+      <View style={[bar, { transform: [{ rotate: '-45deg' }] }]} />
+    </View>
+  );
+}
+
+export function CheckGlyph({ color, size }: IconRenderProps) {
+  const stroke = Math.max(2, size / 7);
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      <View
+        style={{
+          width: size * 0.32,
+          height: size * 0.6,
+          marginTop: -size * 0.12,
+          borderRightWidth: stroke,
+          borderBottomWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  absolute: { position: 'absolute' },
+  center: { alignItems: 'center', justifyContent: 'center' },
+});
+
+export function ChevronGlyph({ color, size }: IconRenderProps) {
+  const stroke = Math.max(1.5, size / 10);
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      <View
+        style={{
+          width: size * 0.42,
+          height: size * 0.42,
+          marginLeft: -size * 0.16,
+          borderTopWidth: stroke,
+          borderRightWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** filled면 원을 칠하고 느낌표를 onColor로 그린다 */
+export function AlertGlyph({
+  color,
+  size,
+  filled = false,
+  onColor = '#ffffff',
+}: IconRenderProps & { filled?: boolean; onColor?: string }) {
+  const stroke = Math.max(1.5, size / (filled ? 10 : 16));
+  const mark = filled ? onColor : color;
+  const ring = filled ? 0 : stroke;
+  return (
+    <View
+      style={[
+        styles.center,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: ring,
+          borderColor: color,
+          backgroundColor: filled ? color : undefined,
+        },
+      ]}
+    >
+      <View
+        style={{
+          width: stroke,
+          height: size * 0.28,
+          borderRadius: stroke,
+          backgroundColor: mark,
+        }}
+      />
+      <View
+        style={{
+          width: stroke * 1.4,
+          height: stroke * 1.4,
+          marginTop: size * 0.08,
+          borderRadius: stroke,
+          backgroundColor: mark,
+        }}
+      />
+    </View>
+  );
+}
+
+export function PlusGlyph({ color, size }: IconRenderProps) {
+  const stroke = Math.max(1.5, size / 16);
+  const bar = {
+    position: 'absolute' as const,
+    backgroundColor: color,
+    borderRadius: stroke,
+  };
+  return (
+    <View style={[styles.center, { width: size, height: size }]}>
+      <View style={[bar, { width: size * 0.6, height: stroke }]} />
+      <View style={[bar, { width: stroke, height: size * 0.6 }]} />
+    </View>
+  );
+}

package/src/internal/icon.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type IconRenderProps = { color: string; size: number };
+
+/** 아이콘 자리. 함수로 넘기면 컴포넌트의 글자색과 크기를 받는다. */
+export type IconSlot = ReactNode | ((props: IconRenderProps) => ReactNode);
+
+export function renderIcon(slot: IconSlot, props: IconRenderProps): ReactNode {
+  return typeof slot === 'function' ? slot(props) : slot;
+}

package/src/internal/overlay.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Platform, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../theme/theme-provider';
+import { useReducedMotion } from './use-reduced-motion';
+
+export const useNativeDriver = Platform.OS !== 'web';
+
+/**
+ * Modal 위 패널의 열림 · 닫힘 전환. 닫힘 애니메이션이 끝난 뒤 mounted가 false가 된다.
+ * progress는 0(닫힘) → 1(열림).
+ */
+export function useOverlayTransition(open: boolean) {
+  const t = useTheme();
+  const reduced = useReducedMotion();
+  const progress = useRef(new Animated.Value(0)).current;
+  const [mounted, setMounted] = useState(open);
+
+  useEffect(() => {
+    if (open) setMounted(true);
+    const animation = Animated.timing(progress, {
+      toValue: open ? 1 : 0,
+      duration: reduced ? 0 : t.motion.duration,
+      useNativeDriver,
+    });
+    animation.start(({ finished }) => {
+      if (finished && !open) setMounted(false);
+    });
+    return () => animation.stop();
+  }, [open, progress, reduced, t.motion.duration]);
+
+  return { mounted, progress };
+}
+
+const styles = StyleSheet.create({
+  backdrop: { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
+});
+
+export function Backdrop({
+  progress,
+  onPress,
+  label,
+}: {
+  progress: Animated.Value;
+  onPress: () => void;
+  label: string;
+}) {
+  return (
+    <Animated.View
+      style={[StyleSheet.absoluteFill, styles.backdrop, { opacity: progress }]}
+    >
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      />
+    </Animated.View>
+  );
+}

package/src/internal/pressable-base.tsx

@@ -0,0 +1,55 @@
+import type { ComponentRef, Ref } from 'react';
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../theme/theme-provider';
+
+export type PressableBaseProps = Omit<PressableProps, 'style'> & {
+  ref?: Ref<ComponentRef<typeof Pressable>>;
+  style?: StyleProp<ViewStyle>;
+  /** 눌렸을 때 추가 스타일. 기본은 opacity.pressed */
+  pressedStyle?: StyleProp<ViewStyle>;
+  /** 눈에 보이는 높이. 최소 터치 크기보다 작으면 hitSlop으로 보완한다 */
+  touchHeight?: number;
+};
+
+/** 눌림 · 비활성 · 접근성 상태 · 최소 터치 영역을 한곳에서 처리하는 Pressable */
+export function PressableBase({
+  style,
+  pressedStyle,
+  touchHeight,
+  disabled,
+  hitSlop,
+  accessibilityRole = 'button',
+  accessibilityState,
+  ...rest
+}: PressableBaseProps) {
+  const t = useTheme();
+  const slop =
+    hitSlop ??
+    (touchHeight !== undefined && touchHeight < t.minTouchSize
+      ? {
+          top: Math.ceil((t.minTouchSize - touchHeight) / 2),
+          bottom: Math.ceil((t.minTouchSize - touchHeight) / 2),
+        }
+      : undefined);
+  return (
+    <Pressable
+      {...rest}
+      disabled={disabled}
+      hitSlop={slop}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={{ ...accessibilityState, disabled: !!disabled }}
+      style={({ pressed }) => [
+        style,
+        pressed &&
+          !disabled &&
+          (pressedStyle ?? { opacity: t.opacity.pressed }),
+        disabled && { opacity: t.opacity.disabled },
+      ]}
+    />
+  );
+}

package/src/internal/use-reduced-motion.ts

@@ -0,0 +1,32 @@
+import { useSyncExternalStore } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+// 앱 전체에서 구독 하나를 공유한다.
+let reduced = false;
+let started = false;
+const listeners = new Set<() => void>();
+
+function set(value: boolean) {
+  if (value === reduced) return;
+  reduced = value;
+  listeners.forEach((l) => l());
+}
+
+function subscribe(listener: () => void) {
+  if (!started) {
+    started = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then(set)
+      .catch(() => {});
+    AccessibilityInfo.addEventListener('reduceMotionChanged', set);
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** 기기의 '동작 줄이기' 설정 */
+export function useReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, () => reduced);
+}

package/src/sortable/index.ts

@@ -0,0 +1,8 @@
+export { moveItem } from './move';
+export {
+  SortableGrid,
+  SortableHandle,
+  type SortableChange,
+  type SortableGridProps,
+} from './sortable-grid';
+export { SortableList, type SortableListProps } from './sortable-list';