@ezpg/app-ui 0.0.0-stage → 0.2.0

package/src/blocks/credit-wallet/credit-wallet.tsx

@@ -0,0 +1,111 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type CreditWalletProps = {
+  balance: number;
+  expiring?: number;
+  todayUsed: number;
+  dailyLimit: number | null;
+  onBuy?: () => void;
+  onHistory?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[3] },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+  },
+  expiring: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 44,
+    paddingHorizontal: t.space[3],
+    borderRadius: t.radius.md,
+    backgroundColor: `${t.colors.warning}24`,
+  },
+  meter: {
+    height: 6,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.muted,
+    overflow: 'hidden',
+  },
+  fill: { height: '100%', backgroundColor: t.colors.primary },
+  actions: { flexDirection: 'row', gap: t.space[2] },
+  action: { flex: 1 },
+}));
+
+export function CreditWallet({
+  balance,
+  expiring,
+  todayUsed,
+  dailyLimit,
+  onBuy,
+  onHistory,
+  style,
+}: CreditWalletProps) {
+  const s = useStyles();
+  const ratio =
+    dailyLimit === null
+      ? 0
+      : dailyLimit > 0
+        ? Math.min(1, todayUsed / dailyLimit)
+        : 1;
+  return (
+    <View style={[s.root, style]}>
+      <Card>
+        <View style={s.row}>
+          <Text weight="semibold">보유 크레딧</Text>
+          <Text variant="display">{formatPrice(balance, '')}</Text>
+        </View>
+        {expiring !== undefined && expiring > 0 ? (
+          <View style={s.expiring}>
+            <Text>이번 달 소멸</Text>
+            <Text weight="bold">{formatPrice(expiring, '')}개</Text>
+          </View>
+        ) : null}
+        {onBuy || onHistory ? (
+          <View style={s.actions}>
+            {onHistory ? (
+              <Button variant="secondary" style={s.action} onPress={onHistory}>
+                내역
+              </Button>
+            ) : null}
+            {onBuy ? (
+              <Button style={s.action} onPress={onBuy}>
+                충전
+              </Button>
+            ) : null}
+          </View>
+        ) : null}
+      </Card>
+      <Card>
+        <View style={s.row}>
+          <Text weight="semibold">오늘 생성</Text>
+          <Text>
+            <Text weight="bold">{todayUsed}</Text> /{' '}
+            {dailyLimit === null ? '무제한' : dailyLimit}
+          </Text>
+        </View>
+        {dailyLimit === null ? null : (
+          <View
+            accessible
+            accessibilityRole="progressbar"
+            accessibilityLabel="오늘 생성"
+            accessibilityValue={{ min: 0, max: dailyLimit, now: todayUsed }}
+            style={s.meter}
+          >
+            <View style={[s.fill, { width: `${ratio * 100}%` }]} />
+          </View>
+        )}
+      </Card>
+    </View>
+  );
+}

package/src/blocks/credit-wallet/index.ts

@@ -0,0 +1 @@
+export { CreditWallet, type CreditWalletProps } from './credit-wallet';

package/src/blocks/generation-progress/generation-progress.tsx

@@ -0,0 +1,180 @@
+import {
+  ActivityIndicator,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { AlertGlyph, CheckGlyph } from '../../internal/glyphs';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type GenerationStatus = 'queued' | 'running' | 'done' | 'failed';
+
+export type GenerationStep = { key: string; label: string };
+
+export type GenerationProgressProps = {
+  steps: readonly GenerationStep[];
+  current: string | null;
+  status: GenerationStatus;
+  errorText?: string;
+  onRetry?: () => void;
+  creditNote?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+type StepState = 'done' | 'active' | 'waiting' | 'pending' | 'failed';
+
+const HEADLINE: Record<GenerationStatus, string> = {
+  queued: '접수했어요. 곧 시작해요',
+  running: '만들고 있어요',
+  done: '다 만들었어요',
+  failed: '만들지 못했어요',
+};
+
+const STATE_LABEL: Record<StepState, string> = {
+  done: '완료',
+  active: '진행 중',
+  waiting: '대기 중',
+  pending: '대기',
+  failed: '실패',
+};
+
+const DOT = 24;
+
+const useStyles = makeStyles((t) => ({
+  list: { gap: t.space[3] },
+  row: { flexDirection: 'row', alignItems: 'center', gap: t.space[3] },
+  label: { flex: 1 },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  doneDot: { backgroundColor: t.colors.primary },
+  pendingDot: { borderWidth: 2, borderColor: t.colors.input },
+  waitingDot: { borderWidth: 2, borderColor: t.colors.primary },
+  start: { alignSelf: 'flex-start' },
+}));
+
+function stepState(
+  index: number,
+  currentIndex: number,
+  status: GenerationStatus
+): StepState {
+  if (status === 'done') return 'done';
+  if (currentIndex < 0) return 'pending';
+  if (index < currentIndex) return 'done';
+  if (index > currentIndex) return 'pending';
+  if (status === 'failed') return 'failed';
+  return status === 'running' ? 'active' : 'waiting';
+}
+
+export function GenerationProgress({
+  steps,
+  current,
+  status,
+  errorText,
+  onRetry,
+  creditNote,
+  style,
+}: GenerationProgressProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const currentIndex =
+    current === null ? -1 : steps.findIndex((step) => step.key === current);
+  const indicator = (state: StepState) => {
+    switch (state) {
+      case 'done':
+        return (
+          <View style={[s.dot, s.doneDot]}>
+            <CheckGlyph color={t.colors.primaryForeground} size={14} />
+          </View>
+        );
+      case 'active':
+        return (
+          <View style={s.dot}>
+            <ActivityIndicator size="small" color={t.colors.primary} />
+          </View>
+        );
+      case 'failed':
+        return (
+          <View style={s.dot}>
+            <AlertGlyph
+              filled
+              color={t.colors.destructive}
+              onColor={t.colors.destructiveForeground}
+              size={DOT}
+            />
+          </View>
+        );
+      case 'waiting':
+        return <View style={[s.dot, s.waitingDot]} />;
+      default:
+        return <View style={[s.dot, s.pendingDot]} />;
+    }
+  };
+  return (
+    <Card style={style}>
+      <Text
+        variant="bodyLg"
+        weight="bold"
+        accessibilityRole="header"
+        accessibilityLiveRegion="polite"
+      >
+        {HEADLINE[status]}
+      </Text>
+      <View style={s.list}>
+        {steps.map((step, i) => {
+          const state = stepState(i, currentIndex, status);
+          return (
+            <View
+              key={step.key}
+              accessible
+              accessibilityLabel={`${step.label}, ${STATE_LABEL[state]}`}
+              style={s.row}
+            >
+              {indicator(state)}
+              <Text
+                style={s.label}
+                tone={
+                  state === 'failed'
+                    ? 'destructive'
+                    : state === 'pending'
+                      ? 'muted'
+                      : 'default'
+                }
+                weight={
+                  state === 'active' || state === 'failed'
+                    ? 'semibold'
+                    : undefined
+                }
+              >
+                {step.label}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+      {status === 'failed' && errorText ? (
+        <Text tone="destructive" accessibilityLiveRegion="polite">
+          {errorText}
+        </Text>
+      ) : null}
+      {status === 'failed' && onRetry ? (
+        <Button variant="outline" onPress={onRetry} style={s.start}>
+          다시 시도
+        </Button>
+      ) : null}
+      {creditNote ? (
+        <Text variant="caption" tone="muted">
+          {creditNote}
+        </Text>
+      ) : null}
+    </Card>
+  );
+}

package/src/blocks/generation-progress/index.ts

@@ -0,0 +1,6 @@
+export {
+  GenerationProgress,
+  type GenerationProgressProps,
+  type GenerationStatus,
+  type GenerationStep,
+} from './generation-progress';

package/src/blocks/image-grid/image-grid.tsx

@@ -0,0 +1,275 @@
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Photo } from '../../components/photo/photo';
+import { Text } from '../../components/text/text';
+import { CloseGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { SortableGrid, SortableHandle } from '../../sortable/sortable-grid';
+
+export type GridImage = {
+  id: string;
+  uri: string;
+  status?: 'uploading' | 'failed';
+};
+
+export type ImageGridProps = {
+  images: readonly GridImage[];
+  onImagesChange: (images: GridImage[]) => void;
+  onAdd?: () => void;
+  onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  max?: number;
+  columns?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const ADD: GridImage = { id: '__add', uri: '' };
+const RADIUS = 10;
+
+const useStyles = makeStyles((t) => ({
+  fill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: RADIUS,
+  },
+  dim: { backgroundColor: `${t.colors.background}B3` },
+  light: { gap: 2, backgroundColor: `${t.colors.background}D9` },
+  failed: { fontSize: 12, lineHeight: 16, color: t.colors.destructive },
+  cover: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingVertical: 2,
+    borderBottomLeftRadius: RADIUS,
+    borderBottomRightRadius: RADIUS,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  coverText: { color: '#ffffff', textAlign: 'center' },
+  remove: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 44,
+    height: 44,
+    alignItems: 'flex-end',
+    padding: t.space[1],
+  },
+  removeDot: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: t.colors.foreground,
+  },
+  add: {
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    borderRadius: RADIUS,
+    borderWidth: 1,
+    borderColor: t.colors.input,
+    backgroundColor: t.colors.muted,
+  },
+  count: { fontSize: 13, fontVariant: ['tabular-nums'] },
+}));
+
+const g = StyleSheet.create({
+  center: { alignItems: 'center', justifyContent: 'center' },
+  column: { alignItems: 'center' },
+  bump: { borderBottomWidth: 0 },
+  open: { borderTopColor: 'transparent', transform: [{ rotate: '45deg' }] },
+  head: { position: 'absolute' },
+});
+
+function CameraGlyph({ color, size }: { color: string; size: number }) {
+  const stroke = Math.max(1.5, size / 14);
+  const line = { borderWidth: stroke, borderColor: color };
+  return (
+    <View style={[g.column, { width: size, height: size }]}>
+      <View
+        style={[
+          line,
+          g.bump,
+          {
+            width: size * 0.34,
+            height: size * 0.16,
+            marginTop: size * 0.1,
+            borderTopLeftRadius: stroke,
+            borderTopRightRadius: stroke,
+          },
+        ]}
+      />
+      <View
+        style={[
+          line,
+          g.center,
+          {
+            width: size * 0.84,
+            height: size * 0.58,
+            borderRadius: size * 0.12,
+          },
+        ]}
+      >
+        <View
+          style={[
+            line,
+            {
+              width: size * 0.3,
+              height: size * 0.3,
+              borderRadius: size * 0.15,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}
+
+function RetryGlyph({ color, size }: { color: string; size: number }) {
+  const stroke = Math.max(2, size / 11);
+  const ring = size * 0.76;
+  return (
+    <View style={[g.center, { width: size, height: size }]}>
+      <View
+        style={[
+          g.open,
+          {
+            width: ring,
+            height: ring,
+            borderRadius: ring / 2,
+            borderWidth: stroke,
+            borderColor: color,
+          },
+        ]}
+      />
+      <View
+        style={[
+          g.head,
+          {
+            top: size * 0.08,
+            right: size * 0.1,
+            width: size * 0.3,
+            height: size * 0.3,
+            borderTopWidth: stroke,
+            borderRightWidth: stroke,
+            borderColor: color,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function ImageGrid({
+  images,
+  onImagesChange,
+  onAdd,
+  onRemove,
+  onRetry,
+  max = 10,
+  columns = 4,
+  style,
+}: ImageGridProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const data = onAdd ? [ADD, ...images] : [...images];
+  const canAdd = images.length < max;
+  return (
+    <View style={style}>
+      <SortableGrid
+        data={data}
+        columns={columns}
+        gap={10}
+        handle
+        keyExtractor={(img) => img.id}
+        onDataChange={(next) => onImagesChange(next.filter((i) => i !== ADD))}
+        itemLabel={(img) => {
+          if (img === ADD) return `사진 추가, ${max}장 중 ${images.length}장`;
+          const n = images.indexOf(img) + 1;
+          const state =
+            img.status === 'uploading'
+              ? ', 업로드 중'
+              : img.status === 'failed'
+                ? ', 업로드 실패'
+                : '';
+          return `사진 ${n}${n === 1 ? ', 대표' : ''}${state}`;
+        }}
+        renderItem={({ item }) => {
+          if (item === ADD) {
+            return (
+              <PressableBase
+                accessibilityLabel={`사진 추가, ${max}장 중 ${images.length}장`}
+                disabled={!canAdd}
+                onPress={onAdd}
+                style={s.add}
+              >
+                <CameraGlyph color={t.colors.mutedForeground} size={24} />
+                <Text weight="semibold" style={s.count}>
+                  {images.length}/{max}
+                </Text>
+              </PressableBase>
+            );
+          }
+          const n = images.indexOf(item) + 1;
+          return (
+            <SortableHandle>
+              <View>
+                <Photo source={{ uri: item.uri }} radius={RADIUS} />
+                {n === 1 && !item.status ? (
+                  <View style={s.cover}>
+                    <Text variant="caption" weight="bold" style={s.coverText}>
+                      대표
+                    </Text>
+                  </View>
+                ) : null}
+                {item.status === 'uploading' ? (
+                  <View style={[s.fill, s.dim]}>
+                    <ActivityIndicator color={t.colors.foreground} />
+                  </View>
+                ) : item.status === 'failed' ? (
+                  <PressableBase
+                    accessibilityLabel={`사진 ${n} 업로드 실패, 다시 시도`}
+                    disabled={!onRetry}
+                    onPress={() => onRetry?.(item.id)}
+                    style={[s.fill, s.light]}
+                  >
+                    <RetryGlyph color={t.colors.destructive} size={22} />
+                    <Text weight="bold" style={s.failed}>
+                      실패
+                    </Text>
+                  </PressableBase>
+                ) : null}
+                {onRemove && item.status !== 'uploading' ? (
+                  <PressableBase
+                    accessibilityLabel={`사진 ${n} 삭제`}
+                    onPress={() => onRemove(item.id)}
+                    style={s.remove}
+                  >
+                    <View style={s.removeDot}>
+                      <CloseGlyph color={t.colors.background} size={12} />
+                    </View>
+                  </PressableBase>
+                ) : null}
+              </View>
+            </SortableHandle>
+          );
+        }}
+      />
+    </View>
+  );
+}

package/src/blocks/image-grid/index.ts

@@ -0,0 +1 @@
+export { ImageGrid, type GridImage, type ImageGridProps } from './image-grid';

package/src/blocks/index.tsx

@@ -0,0 +1,22 @@
+export * from './brand-profile-card';
+export * from './bulk-ship-list';
+export * from './claim-row';
+export * from './color-swatch-picker';
+export * from './copy-variant-picker';
+export * from './credit-wallet';
+export * from './generation-progress';
+export * from './invoice-row';
+export * from './logo-candidate-grid';
+export * from './oauth-buttons';
+export * from './order-card';
+export * from './plan-card';
+export * from './product-list-empty';
+export * from './review-row';
+export * from './selection-bar';
+export * from './service-state-banner';
+export * from './shipping-tracking-row';
+export * from './site-preview-frame';
+export * from './stat-card';
+export * from './step-screen';
+export * from './supply-item-card';
+export { formatDeadline, formatManwon } from './internal/format';

package/src/blocks/internal/card.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { CheckGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+const MARK = 22;
+
+const useStyles = makeStyles((t) => ({
+  card: {
+    gap: t.space[3],
+    padding: t.space[4],
+    borderRadius: t.radius.lg,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+  selected: {
+    borderWidth: 2,
+    padding: t.space[4] - 1,
+    paddingRight: MARK + t.space[3],
+    borderColor: t.colors.primary,
+  },
+  mark: {
+    position: 'absolute',
+    top: t.space[2],
+    right: t.space[2],
+    width: MARK,
+    height: MARK,
+    borderRadius: MARK / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: t.colors.primary,
+  },
+}));
+
+export function Card({
+  children,
+  onPress,
+  onLongPress,
+  selected,
+  accessibilityLabel,
+  style,
+}: {
+  children: ReactNode;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  selected?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  const frame = [s.card, selected && s.selected, style];
+  const mark = selected ? (
+    <View style={s.mark} testID="card-selected-mark">
+      <CheckGlyph color={t.colors.primaryForeground} size={14} />
+    </View>
+  ) : null;
+  if (!onPress && !onLongPress) {
+    return (
+      <View
+        style={frame}
+        accessibilityState={selected === undefined ? undefined : { selected }}
+      >
+        {children}
+        {mark}
+      </View>
+    );
+  }
+  return (
+    <PressableBase
+      onPress={onPress}
+      onLongPress={onLongPress}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={selected === undefined ? undefined : { selected }}
+      pressedStyle={s.pressed}
+      style={frame}
+    >
+      {children}
+      {mark}
+    </PressableBase>
+  );
+}