@ezpg/app-ui 0.0.0-stage → 0.2.0

package/src/blocks/brand-profile-card/brand-profile-card.tsx

@@ -0,0 +1,85 @@
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Photo } from '../../components/photo/photo';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type BrandProfileCardProps = {
+  name: string;
+  industry: string;
+  tagline?: string;
+  logo?: ImageSourcePropType;
+  colors?: readonly string[];
+  keywords?: readonly string[];
+  onEdit?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[3] },
+  logo: { width: 56 },
+  title: { flex: 1, gap: 2 },
+  row: { flexDirection: 'row', flexWrap: 'wrap', gap: t.space[2] },
+  dot: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+  },
+}));
+
+export function BrandProfileCard({
+  name,
+  industry,
+  tagline,
+  logo,
+  colors = [],
+  keywords = [],
+  onEdit,
+  style,
+}: BrandProfileCardProps) {
+  const s = useStyles();
+  return (
+    <Card style={style}>
+      <View style={s.head}>
+        {logo ? (
+          <View style={s.logo}>
+            <Photo source={logo} />
+          </View>
+        ) : null}
+        <View style={s.title}>
+          <Text variant="title" numberOfLines={1}>
+            {name}
+          </Text>
+          <Text variant="caption" tone="muted">
+            {industry}
+          </Text>
+        </View>
+        {onEdit ? (
+          <Button size="sm" variant="ghost" onPress={onEdit}>
+            수정
+          </Button>
+        ) : null}
+      </View>
+      {tagline ? <Text>{tagline}</Text> : null}
+      {colors.length ? (
+        <View
+          style={s.row}
+          accessibilityLabel={`브랜드 색 ${colors.length}가지`}
+        >
+          {colors.map((c) => (
+            <View key={c} style={[s.dot, { backgroundColor: c }]} />
+          ))}
+        </View>
+      ) : null}
+      {keywords.length ? <Text>{keywords.join(' · ')}</Text> : null}
+    </Card>
+  );
+}

package/src/blocks/brand-profile-card/index.ts

@@ -0,0 +1,4 @@
+export {
+  BrandProfileCard,
+  type BrandProfileCardProps,
+} from './brand-profile-card';

package/src/blocks/bulk-ship-list/bulk-ship-list.tsx

@@ -0,0 +1,187 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { ChipGroup } from '../../components/chip-group/chip-group';
+import { Field } from '../../components/field/field';
+import { Text } from '../../components/text/text';
+import type { IconRenderProps } from '../../internal/icon';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type ShipCarrier = { code: string; name: string };
+
+export type BulkShipRow = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  trackingNo: string;
+};
+
+export type BulkShipListProps = {
+  carriers: readonly ShipCarrier[];
+  carrier: string | null;
+  onCarrierChange: (code: string) => void;
+  rows: readonly BulkShipRow[];
+  onTrackingChange: (id: string, value: string) => void;
+  onScan?: (id: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type TrackingIssue = 'invalid' | 'duplicate';
+
+const TRACKING = /^[0-9-]{8,20}$/;
+const INVALID = '숫자와 -만 8~20자리로 입력해 주세요';
+const DUPLICATE = '같은 송장 번호가 다른 주문에도 있어요';
+const FIELD_HEIGHT = 52;
+
+export function trackingIssues(
+  rows: readonly BulkShipRow[]
+): Record<string, TrackingIssue> {
+  const key = (v: string) => v.trim().replace(/-/g, '');
+  const seen = new Map<string, number>();
+  for (const row of rows) {
+    const k = key(row.trackingNo);
+    if (k && TRACKING.test(row.trackingNo.trim())) {
+      seen.set(k, (seen.get(k) ?? 0) + 1);
+    }
+  }
+  const issues: Record<string, TrackingIssue> = {};
+  for (const row of rows) {
+    const value = row.trackingNo.trim();
+    if (!value) continue;
+    if (!TRACKING.test(value)) issues[row.id] = 'invalid';
+    else if ((seen.get(key(value)) ?? 0) > 1) issues[row.id] = 'duplicate';
+  }
+  return issues;
+}
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[5] },
+  carrier: { gap: t.space[2] },
+  list: { gap: t.space[4] },
+  row: { gap: t.space[2] },
+  input: { flexDirection: 'row', alignItems: 'flex-start', gap: t.space[2] },
+  field: { flex: 1 },
+  scan: {
+    width: FIELD_HEIGHT,
+    height: FIELD_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: t.colors.input,
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+}));
+
+const g = StyleSheet.create({ absolute: { position: 'absolute' } });
+
+function ScanGlyph({ color, size }: IconRenderProps) {
+  const stroke = Math.max(1.5, size / 12);
+  const arm = size * 0.3;
+  const corner = (v: 'top' | 'bottom', h: 'left' | 'right') => ({
+    position: 'absolute' as const,
+    width: arm,
+    height: arm,
+    borderColor: color,
+    [v]: 0,
+    [h]: 0,
+    [v === 'top' ? 'borderTopWidth' : 'borderBottomWidth']: stroke,
+    [h === 'left' ? 'borderLeftWidth' : 'borderRightWidth']: stroke,
+  });
+  return (
+    <View style={{ width: size, height: size }}>
+      <View style={corner('top', 'left')} />
+      <View style={corner('top', 'right')} />
+      <View style={corner('bottom', 'left')} />
+      <View style={corner('bottom', 'right')} />
+      <View
+        style={[
+          g.absolute,
+          {
+            left: size * 0.12,
+            right: size * 0.12,
+            top: (size - stroke) / 2,
+            height: stroke,
+            borderRadius: stroke,
+            backgroundColor: color,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function BulkShipList({
+  carriers,
+  carrier,
+  onCarrierChange,
+  rows,
+  onTrackingChange,
+  onScan,
+  style,
+}: BulkShipListProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const issues = trackingIssues(rows);
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.carrier}>
+        <Text weight="semibold" accessibilityRole="header">
+          택배사
+        </Text>
+        <ChipGroup
+          items={carriers.map((c) => ({ value: c.code, label: c.name }))}
+          value={carrier}
+          onValueChange={(code) => {
+            if (code !== null) onCarrierChange(code);
+          }}
+        />
+      </View>
+      <View style={s.list}>
+        {rows.map((row) => {
+          const issue = issues[row.id];
+          return (
+            <View key={row.id} style={s.row}>
+              <View>
+                <Text weight="semibold" numberOfLines={1}>
+                  {row.title}
+                </Text>
+                {row.subtitle ? (
+                  <Text variant="caption" tone="muted" numberOfLines={1}>
+                    {row.subtitle}
+                  </Text>
+                ) : null}
+              </View>
+              <View style={s.input}>
+                <Field
+                  style={s.field}
+                  value={row.trackingNo}
+                  onChangeText={(v) => onTrackingChange(row.id, v)}
+                  placeholder="송장 번호"
+                  keyboardType="number-pad"
+                  inputMode="numeric"
+                  autoCorrect={false}
+                  maxLength={20}
+                  accessibilityLabel={`${row.title} 송장 번호`}
+                  error={issue === 'invalid' ? INVALID : undefined}
+                  warning={issue === 'duplicate' ? DUPLICATE : undefined}
+                />
+                {onScan ? (
+                  <PressableBase
+                    accessibilityLabel={`${row.title} 송장 스캔`}
+                    onPress={() => onScan(row.id)}
+                    pressedStyle={s.pressed}
+                    style={s.scan}
+                  >
+                    <ScanGlyph color={t.colors.foreground} size={22} />
+                  </PressableBase>
+                ) : null}
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/blocks/bulk-ship-list/index.ts

@@ -0,0 +1,8 @@
+export {
+  BulkShipList,
+  trackingIssues,
+  type BulkShipListProps,
+  type BulkShipRow,
+  type ShipCarrier,
+  type TrackingIssue,
+} from './bulk-ship-list';

package/src/blocks/claim-row/claim-row.tsx

@@ -0,0 +1,125 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type ClaimType = 'cancel' | 'return' | 'exchange';
+export type ClaimStatus =
+  | 'requested'
+  | 'collecting'
+  | 'collected'
+  | 'held'
+  | 'completed'
+  | 'rejected'
+  | 'withdrawn';
+
+export type ClaimRowProps = {
+  type: ClaimType;
+  status?: ClaimStatus;
+  amount: number;
+  reason?: string;
+  dueAt?: Date | string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const TYPE: Record<ClaimType, string> = {
+  cancel: '취소',
+  return: '반품',
+  exchange: '교환',
+};
+
+export const claimStatusLabel: Record<ClaimStatus, string> = {
+  requested: '요청',
+  collecting: '회수 중',
+  collected: '회수 완료',
+  held: '보류',
+  completed: '완료',
+  rejected: '거절',
+  withdrawn: '철회',
+};
+
+const OPEN: readonly ClaimStatus[] = [
+  'requested',
+  'collecting',
+  'collected',
+  'held',
+];
+
+const DAY = 86400000;
+
+function toDate(value: Date | string): Date {
+  if (typeof value !== 'string') return value;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  return m
+    ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+    : new Date(value);
+}
+
+function daysUntil(value: Date | string, now = new Date()): number | null {
+  const due = toDate(value);
+  if (Number.isNaN(due.getTime())) return null;
+  const a = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const b = new Date(due.getFullYear(), due.getMonth(), due.getDate());
+  return Math.round((b.getTime() - a.getTime()) / DAY);
+}
+
+function formatDday(days: number): string {
+  if (days < 0) return '기한 지남';
+  return days === 0 ? 'D-day' : `D-${days}`;
+}
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  grow: { flex: 1 },
+  head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
+  deadline: { fontSize: 14, lineHeight: 20, fontVariant: ['tabular-nums'] },
+}));
+
+export function ClaimRow({
+  type,
+  status = 'requested',
+  amount,
+  reason,
+  dueAt,
+  onPress,
+  style,
+}: ClaimRowProps) {
+  const s = useStyles();
+  const title = `${TYPE[type]} ${claimStatusLabel[status]}`;
+  const days =
+    OPEN.includes(status) && dueAt !== undefined ? daysUntil(dueAt) : null;
+  const deadline = days === null ? null : formatDday(days);
+  const label = [title, formatPrice(amount), reason, deadline]
+    .filter(Boolean)
+    .join(', ');
+  return (
+    <Card onPress={onPress} accessibilityLabel={label} style={style}>
+      <View style={s.row}>
+        <Text weight="bold" style={[s.head, s.grow]} numberOfLines={1}>
+          {title}
+        </Text>
+        <Text weight="bold" style={s.head}>
+          {formatPrice(amount)}
+        </Text>
+      </View>
+      {reason || deadline ? (
+        <View style={s.row}>
+          <Text style={s.grow} numberOfLines={1}>
+            {reason ?? ''}
+          </Text>
+          {deadline ? (
+            <Text
+              weight="bold"
+              tone={days !== null && days <= 1 ? 'destructive' : 'muted'}
+              style={s.deadline}
+            >
+              {deadline}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </Card>
+  );
+}

package/src/blocks/claim-row/index.ts

@@ -0,0 +1,7 @@
+export {
+  ClaimRow,
+  claimStatusLabel,
+  type ClaimRowProps,
+  type ClaimStatus,
+  type ClaimType,
+} from './claim-row';

package/src/blocks/color-swatch-picker/color-swatch-picker.tsx

@@ -0,0 +1,117 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/text/text';
+import { CheckGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { pickForeground } from '../../utils/color';
+import { makeStyles } from '../../utils/styles';
+
+export type ColorSwatch = { value: string; label: string };
+
+export type ColorSwatchPickerProps = {
+  colors: readonly ColorSwatch[];
+  value: string;
+  onValueChange: (value: string) => void;
+  variant?: 'circle' | 'card';
+  style?: StyleProp<ViewStyle>;
+};
+
+const DOT = 40;
+
+const useStyles = makeStyles((t) => ({
+  wrap: { flexDirection: 'row', flexWrap: 'wrap', gap: t.space[3] },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ring: {
+    padding: 3,
+    borderRadius: DOT,
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  ringOn: { borderColor: t.colors.foreground },
+  card: {
+    width: 148,
+    gap: t.space[2],
+    padding: t.space[3],
+    borderRadius: t.radius.lg,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  cardOn: {
+    borderColor: t.colors.foreground,
+    borderWidth: 2,
+    padding: t.space[3] - 1,
+  },
+  sample: {
+    height: 32,
+    borderRadius: t.radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  line: { height: 6, borderRadius: 3, backgroundColor: t.colors.muted },
+  long: { width: '70%' },
+  short: { width: '45%' },
+}));
+
+export function ColorSwatchPicker({
+  colors,
+  value,
+  onValueChange,
+  variant = 'circle',
+  style,
+}: ColorSwatchPickerProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View accessibilityRole="radiogroup" style={[s.wrap, style]}>
+      {colors.map((c) => {
+        const selected = c.value.toLowerCase() === value.toLowerCase();
+        const fg = pickForeground(c.value, '#0a0a0a', '#ffffff');
+        return (
+          <PressableBase
+            key={c.value}
+            accessibilityRole="radio"
+            accessibilityLabel={c.label}
+            accessibilityState={{ selected }}
+            touchHeight={DOT}
+            pressedStyle={{}}
+            onPress={() => onValueChange(c.value)}
+            style={
+              variant === 'card'
+                ? [s.card, selected && s.cardOn]
+                : [s.ring, selected && s.ringOn]
+            }
+          >
+            {variant === 'card' ? (
+              <>
+                <View style={[s.line, s.long]} />
+                <View style={[s.line, s.short]} />
+                <View style={[s.sample, { backgroundColor: c.value }]}>
+                  <Text
+                    variant="caption"
+                    weight="semibold"
+                    style={{ color: fg }}
+                  >
+                    {c.label}
+                  </Text>
+                </View>
+              </>
+            ) : (
+              <View style={[s.dot, { backgroundColor: c.value }]}>
+                {selected ? (
+                  <CheckGlyph color={fg} size={t.iconSize.md} />
+                ) : null}
+              </View>
+            )}
+          </PressableBase>
+        );
+      })}
+    </View>
+  );
+}

package/src/blocks/color-swatch-picker/index.ts

@@ -0,0 +1,5 @@
+export {
+  ColorSwatchPicker,
+  type ColorSwatch,
+  type ColorSwatchPickerProps,
+} from './color-swatch-picker';

package/src/blocks/copy-variant-picker/copy-variant-picker.tsx

@@ -0,0 +1,136 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type CopyVariant = { id: string; text: string; locked?: boolean };
+
+export type CopyVariantPickerProps = {
+  label: string;
+  variants: readonly CopyVariant[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onToggleLock?: (id: string) => void;
+  conflict?: boolean;
+  onReload?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: t.space[3],
+    padding: t.space[3],
+    borderRadius: t.radius.md,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  selected: {
+    borderColor: t.colors.primary,
+    borderWidth: 2,
+    padding: t.space[3] - 1,
+  },
+  radio: {
+    width: 18,
+    height: 18,
+    marginTop: 2,
+    borderRadius: 9,
+    borderWidth: 2,
+    borderColor: t.colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioOn: { borderColor: t.colors.primary },
+  radioDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: t.colors.primary,
+  },
+  body: { flex: 1, gap: t.space[2] },
+  meta: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  start: { alignSelf: 'flex-start' },
+  conflict: {
+    gap: t.space[2],
+    padding: t.space[3],
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted,
+  },
+}));
+
+export function CopyVariantPicker({
+  label,
+  variants,
+  selectedId,
+  onSelect,
+  onToggleLock,
+  conflict,
+  onReload,
+  style,
+}: CopyVariantPickerProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View style={[s.root, style]}>
+      <Text weight="semibold">{label}</Text>
+      {conflict ? (
+        <View style={s.conflict} accessibilityLiveRegion="polite">
+          <Text tone="destructive">다른 기기에서 먼저 수정했어요.</Text>
+          {onReload ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onPress={onReload}
+              style={s.start}
+            >
+              최신 내용 불러오기
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+      <View accessibilityRole="radiogroup" style={s.root}>
+        {variants.map((v) => {
+          const selected = v.id === selectedId;
+          return (
+            <PressableBase
+              key={v.id}
+              accessibilityRole="radio"
+              accessibilityState={{ selected }}
+              accessibilityLabel={v.text}
+              pressedStyle={{ backgroundColor: t.colors.muted }}
+              onPress={() => onSelect(v.id)}
+              style={[s.item, selected && s.selected]}
+            >
+              <View style={[s.radio, selected && s.radioOn]}>
+                {selected ? <View style={s.radioDot} /> : null}
+              </View>
+              <View style={s.body}>
+                <Text>{v.text}</Text>
+                {v.locked || onToggleLock ? (
+                  <View style={s.meta}>
+                    {onToggleLock ? (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onPress={() => onToggleLock(v.id)}
+                      >
+                        {v.locked ? '잠금 해제' : '잠그기'}
+                      </Button>
+                    ) : (
+                      <Text tone="muted">잠김</Text>
+                    )}
+                  </View>
+                ) : null}
+              </View>
+            </PressableBase>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/blocks/copy-variant-picker/index.ts

@@ -0,0 +1,5 @@
+export {
+  CopyVariantPicker,
+  type CopyVariant,
+  type CopyVariantPickerProps,
+} from './copy-variant-picker';