@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,131 @@
+import { Animated, Modal, Text, View } from 'react-native';
+import { Backdrop, useOverlayTransition } from '../../internal/overlay';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Button } from '../button/button';
+import { ToastHost } from '../toast/toast';
+
+export type DialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  /** 확인을 눌렀을 때. 닫는 것은 부모가 onOpenChange로 정한다 */
+  onConfirm: () => void;
+  /** 기본 '확인' */
+  confirmLabel?: string;
+  /** 기본 '취소' */
+  cancelLabel?: string;
+  /** 되돌릴 수 없는 작업이면 확인 버튼을 destructive로 */
+  destructive?: boolean;
+  /** 확인 버튼을 로딩 상태로 */
+  loading?: boolean;
+  /** false면 배경 · 뒤로가기로 닫히지 않는다. 기본 true */
+  dismissible?: boolean;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, justifyContent: 'center', padding: t.space[6] },
+  panel: {
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: 360,
+    paddingTop: 28,
+    paddingHorizontal: t.space[5],
+    paddingBottom: t.space[5],
+    gap: t.space[5],
+    borderRadius: 16,
+    backgroundColor: t.colors.background,
+    boxShadow: t.shadow.md,
+  },
+  title: {
+    fontFamily: t.fontFamily,
+    fontSize: 18,
+    lineHeight: 26,
+    fontWeight: '700',
+    textAlign: 'center',
+    color: t.colors.foreground,
+  },
+  actions: { flexDirection: 'row', gap: t.space[2] },
+  action: { flex: 1, borderRadius: t.radius.lg },
+}));
+
+/** 확인 · 취소를 묻는 대화상자. 제목 한 줄로 무엇을 하는지 말한다 */
+export function Dialog({
+  open,
+  onOpenChange,
+  title,
+  onConfirm,
+  confirmLabel = '확인',
+  cancelLabel = '취소',
+  destructive = false,
+  loading = false,
+  dismissible = true,
+}: DialogProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const { mounted, progress } = useOverlayTransition(open);
+
+  const close = () => {
+    if (dismissible && !loading) onOpenChange(false);
+  };
+
+  return (
+    <Modal
+      visible={mounted}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      navigationBarTranslucent
+      onRequestClose={close}
+    >
+      <Backdrop progress={progress} onPress={close} label={cancelLabel} />
+      <View pointerEvents="box-none" style={s.root}>
+        <Animated.View
+          accessibilityViewIsModal
+          accessibilityRole="alert"
+          style={[
+            s.panel,
+            {
+              opacity: progress,
+              transform: [
+                {
+                  scale: progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0.96, 1],
+                  }),
+                },
+              ],
+            },
+          ]}
+        >
+          <Text
+            accessibilityRole="header"
+            maxFontSizeMultiplier={t.maxFontScale}
+            style={s.title}
+          >
+            {title}
+          </Text>
+          <View style={s.actions}>
+            <Button
+              variant="secondary"
+              style={s.action}
+              disabled={loading}
+              onPress={() => onOpenChange(false)}
+            >
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={destructive ? 'destructive' : 'solid'}
+              style={s.action}
+              loading={loading}
+              onPress={onConfirm}
+            >
+              {confirmLabel}
+            </Button>
+          </View>
+        </Animated.View>
+      </View>
+      <ToastHost />
+    </Modal>
+  );
+}

package/src/components/dialog/index.ts

@@ -0,0 +1 @@
+export { Dialog, type DialogProps } from './dialog';

package/src/components/divider/divider.tsx

@@ -0,0 +1,26 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+
+export type DividerProps = {
+  /** 왼쪽 들여쓰기(px). ListRow의 leading 뒤부터 긋을 때 쓴다 */
+  inset?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** 가로 구분선. 목록에서는 FlatList의 ItemSeparatorComponent로 쓴다 */
+export function Divider({ inset = 0, style }: DividerProps) {
+  const t = useTheme();
+  return (
+    <View
+      accessible={false}
+      style={[
+        {
+          height: StyleSheet.hairlineWidth,
+          marginLeft: inset,
+          backgroundColor: t.colors.border,
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './divider';

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,152 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AlertGlyph, SearchGlyph } from '../../internal/glyphs';
+import { renderIcon, type IconSlot } from '../../internal/icon';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Button } from '../button/button';
+
+/**
+ * - default: 목록 전체가 비었을 때
+ * - search: 검색 · 필터 결과가 없을 때 (결과 변화를 화면낭독기에 알림)
+ * - error: 불러오지 못했을 때
+ * - section: 화면 안 한 섹션이 비었을 때 (한 줄)
+ */
+export type EmptyStateVariant = 'default' | 'search' | 'error' | 'section';
+
+export type EmptyStateProps = {
+  /** 상태를 말하는 한 줄. 예) '아직 주문이 없어요' */
+  title: string;
+  variant?: EmptyStateVariant;
+  /** 기본: search는 검색, error는 경고 아이콘 */
+  icon?: IconSlot;
+  /** 다음 행동 하나. section에서는 텍스트 링크로 보인다 */
+  action?: { label: string; onPress: () => void; icon?: IconSlot };
+  style?: StyleProp<ViewStyle>;
+};
+
+const ICON = { screen: 40, section: 20 };
+
+const useStyles = makeStyles((t) => ({
+  // 시각 중심을 맞추려고 아래쪽을 더 띄운다
+  screen: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: t.space[8],
+    paddingTop: t.space[8],
+    paddingBottom: t.space[8] + t.space[12] * 2,
+  },
+  title: {
+    ...t.typography.bodyLg,
+    marginTop: t.space[4],
+    fontFamily: t.fontFamily,
+    fontWeight: '600',
+    color: t.colors.foreground,
+    textAlign: 'center',
+  },
+  button: { marginTop: t.space[5], height: 48, paddingHorizontal: t.space[5] },
+  section: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: 52,
+    paddingLeft: t.space[4],
+    paddingRight: t.space[1],
+  },
+  sectionTitle: {
+    ...t.typography.body,
+    flex: 1,
+    fontSize: 14,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+  },
+  link: {
+    minHeight: t.minTouchSize,
+    justifyContent: 'center',
+    paddingHorizontal: t.space[3],
+  },
+  linkLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground,
+  },
+}));
+
+/** 비어 있거나 불러오지 못한 상태. 설명 문단 없이 아이콘 · 한 줄 · 행동 하나로 보여준다 */
+export function EmptyState({
+  title,
+  variant = 'default',
+  icon,
+  action,
+  style,
+}: EmptyStateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const slot =
+    icon ??
+    (variant === 'search'
+      ? SearchGlyph
+      : variant === 'error'
+        ? AlertGlyph
+        : undefined);
+
+  if (variant === 'section') {
+    return (
+      <View style={[s.section, style]}>
+        {slot
+          ? renderIcon(slot, {
+              color: t.colors.mutedForeground,
+              size: ICON.section,
+            })
+          : null}
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.sectionTitle}>
+          {title}
+        </Text>
+        {action ? (
+          <PressableBase
+            accessibilityRole="link"
+            onPress={action.onPress}
+            style={s.link}
+          >
+            <Text maxFontSizeMultiplier={t.maxFontScale} style={s.linkLabel}>
+              {action.label}
+            </Text>
+          </PressableBase>
+        ) : null}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      accessibilityRole={variant === 'error' ? 'alert' : undefined}
+      accessibilityLiveRegion={variant === 'default' ? 'none' : 'polite'}
+      style={[s.screen, style]}
+    >
+      {slot
+        ? renderIcon(slot, {
+            color: t.colors.mutedForeground,
+            size: ICON.screen,
+          })
+        : null}
+      <Text
+        accessibilityRole="header"
+        maxFontSizeMultiplier={t.maxFontScale}
+        style={s.title}
+      >
+        {title}
+      </Text>
+      {action ? (
+        <Button
+          leftIcon={action.icon}
+          style={s.button}
+          onPress={action.onPress}
+        >
+          {action.label}
+        </Button>
+      ) : null}
+    </View>
+  );
+}

package/src/components/empty-state/index.ts

@@ -0,0 +1,5 @@
+export {
+  EmptyState,
+  type EmptyStateProps,
+  type EmptyStateVariant,
+} from './empty-state';

package/src/components/field/field.tsx

@@ -0,0 +1,151 @@
+import { useState, type ComponentRef, type Ref } from 'react';
+import {
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { AlertGlyph } from '../../internal/glyphs';
+import { renderIcon, type IconSlot } from '../../internal/icon';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type FieldProps = Omit<TextInputProps, 'style'> & {
+  ref?: Ref<ComponentRef<typeof TextInput>>;
+  label?: string;
+  /** 있으면 오류 상태로 표시하고 입력칸 아래에 보여준다 */
+  error?: string;
+  leading?: IconSlot;
+  trailing?: IconSlot;
+  /** 바깥 컨테이너 스타일 */
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  label: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    color: t.colors.foreground,
+  },
+  frame: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    height: 52,
+    paddingHorizontal: t.space[4],
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: t.colors.input,
+    backgroundColor: t.colors.background,
+  },
+  // 테두리가 두꺼워져도 글자가 밀리지 않게 padding을 줄인다
+  focused: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.primary,
+  },
+  invalid: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.destructive,
+  },
+  disabled: { opacity: t.opacity.disabled, backgroundColor: t.colors.muted },
+  input: {
+    flex: 1,
+    alignSelf: 'stretch',
+    paddingVertical: 0,
+    fontFamily: t.fontFamily,
+    fontSize: 16,
+    color: t.colors.foreground,
+  },
+  error: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.destructive,
+  },
+  errorLabel: { color: t.colors.destructive },
+}));
+
+export function Field({
+  label,
+  error,
+  leading,
+  trailing,
+  style,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...input
+}: FieldProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const [focused, setFocused] = useState(false);
+  const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
+
+  return (
+    <View style={[s.root, style]}>
+      {label ? (
+        <Text
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.label, !!error && s.errorLabel]}
+        >
+          {label}
+        </Text>
+      ) : null}
+      <View
+        style={[
+          s.frame,
+          focused && s.focused,
+          !!error && s.invalid,
+          !editable && s.disabled,
+        ]}
+      >
+        {leading ? renderIcon(leading, icon) : null}
+        <TextInput
+          placeholderTextColor={t.colors.mutedForeground}
+          selectionColor={t.colors.ring}
+          maxFontSizeMultiplier={t.maxFontScale}
+          accessibilityLabel={label}
+          accessibilityHint={error}
+          {...input}
+          editable={editable}
+          style={s.input}
+          onFocus={(e) => {
+            setFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setFocused(false);
+            onBlur?.(e);
+          }}
+        />
+        {error ? (
+          <AlertGlyph
+            filled
+            color={t.colors.destructive}
+            onColor={t.colors.destructiveForeground}
+            size={t.iconSize.md}
+          />
+        ) : trailing ? (
+          renderIcon(trailing, icon)
+        ) : null}
+      </View>
+      {error ? (
+        <Text
+          maxFontSizeMultiplier={t.maxFontScale}
+          accessibilityLiveRegion="polite"
+          style={s.error}
+        >
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/field/index.ts

@@ -0,0 +1 @@
+export { Field, type FieldProps } from './field';

package/src/components/list-row/index.ts

@@ -0,0 +1 @@
+export { ListRow, type ListRowProps } from './list-row';

package/src/components/list-row/list-row.tsx

@@ -0,0 +1,115 @@
+import { Text, View } from 'react-native';
+import { ChevronGlyph } from '../../internal/glyphs';
+import { renderIcon, type IconSlot } from '../../internal/icon';
+import {
+  PressableBase,
+  type PressableBaseProps,
+} from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type ListRowProps = Omit<
+  PressableBaseProps,
+  'children' | 'touchHeight'
+> & {
+  title: string;
+  description?: string;
+  leading?: IconSlot;
+  /** 오른쪽 내용 (Switch, StatusBadge, 값 텍스트 등) */
+  trailing?: IconSlot;
+  /** 오른쪽 화살표. 기본은 onPress가 있을 때 true */
+  chevron?: boolean;
+  /** 제목 줄 수. 기본 1 */
+  titleLines?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: Math.max(t.minTouchSize, 56),
+    paddingVertical: t.space[3],
+    paddingHorizontal: t.space[4],
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+  body: { flex: 1, gap: 2 },
+  title: {
+    ...t.typography.body,
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground,
+  },
+  description: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+  },
+  trailing: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+}));
+
+export function ListRow({
+  title,
+  description,
+  leading,
+  trailing,
+  chevron,
+  titleLines = 1,
+  onPress,
+  style,
+  ...rest
+}: ListRowProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
+  const showChevron = chevron ?? !!onPress;
+
+  const content = (
+    <>
+      {leading ? renderIcon(leading, icon) : null}
+      <View style={s.body}>
+        <Text
+          numberOfLines={titleLines}
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={s.title}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text
+            numberOfLines={2}
+            maxFontSizeMultiplier={t.maxFontScale}
+            style={s.description}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {trailing || showChevron ? (
+        <View style={s.trailing}>
+          {trailing ? renderIcon(trailing, icon) : null}
+          {showChevron ? (
+            <ChevronGlyph
+              color={t.colors.mutedForeground}
+              size={t.iconSize.sm}
+            />
+          ) : null}
+        </View>
+      ) : null}
+    </>
+  );
+
+  if (!onPress) {
+    return <View style={[s.row, style]}>{content}</View>;
+  }
+  return (
+    <PressableBase
+      {...rest}
+      onPress={onPress}
+      pressedStyle={s.pressed}
+      style={[s.row, style]}
+    >
+      {content}
+    </PressableBase>
+  );
+}

package/src/components/photo/index.ts

@@ -0,0 +1 @@
+export { Photo, type PhotoProps } from './photo';

package/src/components/photo/photo.tsx

@@ -0,0 +1,87 @@
+import { useState, type ReactNode } from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  type ImageProps,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+
+export type PhotoProps = Omit<ImageProps, 'source' | 'style'> & {
+  source: ImageSourcePropType;
+  /** 가로 / 세로. 기본 1 */
+  aspectRatio?: number;
+  /** 기본 radius.md */
+  radius?: number;
+  /** 불러오지 못했을 때 보여줄 내용 */
+  fallback?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+function sourceKey(source: ImageSourcePropType): string {
+  if (typeof source === 'number') return String(source);
+  if (Array.isArray(source)) return source.map((s) => s.uri ?? '').join('|');
+  return (source as { uri?: string }).uri ?? '';
+}
+
+/** 로딩 중에는 muted 배경, 실패하면 fallback을 보여주는 이미지 */
+export function Photo(props: PhotoProps) {
+  // 주소가 바뀌면 로딩 · 실패 상태를 처음부터 다시 잡는다.
+  return <PhotoInner key={sourceKey(props.source)} {...props} />;
+}
+
+function PhotoInner({
+  source,
+  aspectRatio = 1,
+  radius,
+  fallback,
+  style,
+  onLoad,
+  onError,
+  ...rest
+}: PhotoProps) {
+  const t = useTheme();
+  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>(
+    'loading'
+  );
+  return (
+    <View
+      style={[
+        styles.frame,
+        {
+          aspectRatio,
+          borderRadius: radius ?? t.radius.md,
+          backgroundColor: t.colors.muted,
+        },
+        style,
+      ]}
+    >
+      {status === 'error' ? (
+        <View style={styles.center}>{fallback}</View>
+      ) : (
+        <Image
+          {...rest}
+          source={source}
+          resizeMode={rest.resizeMode ?? 'cover'}
+          style={StyleSheet.absoluteFill}
+          onLoad={(e) => {
+            setStatus('loaded');
+            onLoad?.(e);
+          }}
+          onError={(e) => {
+            setStatus('error');
+            onError?.(e);
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: { width: '100%', overflow: 'hidden' },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/src/components/price/index.ts

@@ -0,0 +1 @@
+export { formatPrice, Price, type PriceProps } from './price';