@ezpg/app-ui 0.0.0-stage → 0.2.0

package/src/blocks/site-preview-frame/site-preview-frame.tsx

@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react';
+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';
+
+export type SitePublishStatus = 'draft' | 'published' | 'unpublishedChanges';
+
+export type SitePreviewFrameProps = {
+  screenshot?: ImageSourcePropType;
+  renderPreview?: () => ReactNode;
+  status: SitePublishStatus;
+  onPublish?: () => void;
+  publishing?: boolean;
+  publishDisabled?: boolean;
+  blockedReason?: string;
+  onRevert?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[3] },
+  device: {
+    alignSelf: 'center',
+    width: '72%',
+    maxWidth: 300,
+    aspectRatio: 9 / 19.5,
+    padding: t.space[2],
+    borderRadius: 36,
+    backgroundColor: t.colors.foreground,
+    boxShadow: t.shadow.md,
+  },
+  screen: {
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius: 28,
+    backgroundColor: t.colors.background,
+  },
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    minHeight: 60,
+    paddingLeft: t.space[4],
+    paddingRight: t.space[2],
+    borderRadius: t.radius.lg,
+    backgroundColor: t.colors.muted,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: t.colors.warning,
+  },
+  barLabel: { flex: 1 },
+  barButton: { paddingHorizontal: t.space[4] },
+  actions: { gap: t.space[2] },
+  reason: { textAlign: 'center' },
+}));
+
+export function SitePreviewFrame({
+  screenshot,
+  renderPreview,
+  status,
+  onPublish,
+  publishing,
+  publishDisabled,
+  blockedReason,
+  onRevert,
+  style,
+}: SitePreviewFrameProps) {
+  const s = useStyles();
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.device} accessibilityLabel="사이트 미리보기">
+        <View style={s.screen}>
+          {renderPreview ? (
+            renderPreview()
+          ) : screenshot ? (
+            <Photo source={screenshot} aspectRatio={9 / 19.5} radius={0} />
+          ) : null}
+        </View>
+      </View>
+      {status === 'unpublishedChanges' ? (
+        <View accessibilityLiveRegion="polite" style={s.bar}>
+          <View style={s.dot} />
+          <Text weight="semibold" style={s.barLabel}>
+            게시 안 된 변경사항
+          </Text>
+          {onPublish ? (
+            <Button
+              size="sm"
+              onPress={onPublish}
+              loading={publishing}
+              disabled={publishDisabled}
+              style={s.barButton}
+            >
+              게시
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+      <View style={s.actions}>
+        {onPublish && status === 'draft' ? (
+          <Button
+            size="lg"
+            onPress={onPublish}
+            loading={publishing}
+            disabled={publishDisabled}
+          >
+            사이트 게시하기
+          </Button>
+        ) : null}
+        {publishDisabled &&
+        blockedReason &&
+        onPublish &&
+        status !== 'published' ? (
+          <Text tone="muted" accessibilityLiveRegion="polite" style={s.reason}>
+            {blockedReason}
+          </Text>
+        ) : null}
+        {onRevert && status !== 'draft' ? (
+          <Button variant="ghost" onPress={onRevert}>
+            직전 게시본으로 되돌리기
+          </Button>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/blocks/stat-card/index.ts

@@ -0,0 +1 @@
+export { StatCard, type StatCardProps } from './stat-card';

package/src/blocks/stat-card/stat-card.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type StatCardProps = {
+  label: string;
+  value: string;
+  change?: number | null;
+  chart?: ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'flex-end', gap: t.space[3] },
+  body: { flex: 1, gap: t.space[1] },
+  value: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'baseline',
+    columnGap: t.space[2],
+  },
+  down: { color: t.colors.info },
+}));
+
+export function StatCard({
+  label,
+  value,
+  change,
+  chart,
+  onPress,
+  style,
+}: StatCardProps) {
+  const s = useStyles();
+  const hasChange =
+    change !== undefined && change !== null && Number.isFinite(change);
+  const flat = hasChange && Math.abs(change) < 0.05;
+  const up = hasChange && change > 0;
+  const rate = hasChange ? `${Math.abs(change).toFixed(1)}%` : '';
+  return (
+    <Card
+      onPress={onPress}
+      accessibilityLabel={`${label} ${value}${
+        hasChange && !flat ? ` ${rate} ${up ? '증가' : '감소'}` : ''
+      }`}
+      style={style}
+    >
+      <View style={s.row}>
+        <View style={s.body}>
+          <Text tone="muted">{label}</Text>
+          <View style={s.value}>
+            <Text variant="title" weight="bold">
+              {value}
+            </Text>
+            {hasChange ? (
+              <Text
+                weight="bold"
+                tone={flat ? 'muted' : up ? 'destructive' : 'default'}
+                style={!flat && !up && s.down}
+              >
+                {flat ? '변동 없음' : `${up ? '▲' : '▼'} ${rate}`}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        {chart}
+      </View>
+    </Card>
+  );
+}

package/src/blocks/step-screen/index.ts

@@ -0,0 +1,5 @@
+export {
+  StepScreen,
+  type StepAction,
+  type StepScreenProps,
+} from './step-screen';

package/src/blocks/step-screen/step-screen.tsx

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react';
+import { KeyboardAvoidingView, ScrollView, View } from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { ChevronGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type StepAction = {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+export type StepScreenProps = {
+  title: string;
+  total?: number;
+  current?: number;
+  onBack?: () => void;
+  backLabel?: string;
+  primaryAction: StepAction;
+  secondaryAction?: StepAction;
+  bottomInset?: number;
+  children?: ReactNode;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  header: {
+    height: 52,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: t.space[1],
+  },
+  back: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backIcon: { transform: [{ scaleX: -1 }] },
+  track: { height: 3, backgroundColor: t.colors.muted },
+  fill: { height: 3, backgroundColor: t.colors.primary },
+  body: {
+    gap: t.space[5],
+    paddingTop: t.space[6],
+    paddingHorizontal: t.space[5],
+    paddingBottom: t.space[4],
+  },
+  title: { fontSize: 24, lineHeight: 32 },
+  footer: {
+    gap: t.space[2],
+    paddingHorizontal: t.space[5],
+    paddingTop: t.space[3],
+    backgroundColor: t.colors.background,
+  },
+}));
+
+export function StepScreen({
+  title,
+  total,
+  current = 0,
+  onBack,
+  backLabel = '이전',
+  primaryAction,
+  secondaryAction,
+  bottomInset = 0,
+  children,
+}: StepScreenProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const step = total ? Math.min(total, Math.max(1, current + 1)) : 0;
+  return (
+    <KeyboardAvoidingView behavior="padding" style={s.root}>
+      {onBack ? (
+        <View style={s.header}>
+          <PressableBase
+            onPress={onBack}
+            accessibilityLabel={backLabel}
+            style={s.back}
+          >
+            <View style={s.backIcon}>
+              <ChevronGlyph color={t.colors.foreground} size={24} />
+            </View>
+          </PressableBase>
+        </View>
+      ) : null}
+      {total ? (
+        <View
+          accessibilityRole="progressbar"
+          accessibilityLabel={`${total}단계 중 ${step}단계`}
+          accessibilityValue={{ min: 1, max: total, now: step }}
+          style={s.track}
+        >
+          <View style={[s.fill, { width: `${(step / total) * 100}%` }]} />
+        </View>
+      ) : null}
+      <ScrollView
+        contentContainerStyle={s.body}
+        keyboardShouldPersistTaps="handled"
+      >
+        <Text weight="bold" accessibilityRole="header" style={s.title}>
+          {title}
+        </Text>
+        {children}
+      </ScrollView>
+      <View style={[s.footer, { paddingBottom: t.space[4] + bottomInset }]}>
+        <Button
+          size="lg"
+          onPress={primaryAction.onPress}
+          disabled={primaryAction.disabled}
+          loading={primaryAction.loading}
+        >
+          {primaryAction.label}
+        </Button>
+        {secondaryAction ? (
+          <Button
+            variant="ghost"
+            onPress={secondaryAction.onPress}
+            disabled={secondaryAction.disabled}
+            loading={secondaryAction.loading}
+          >
+            {secondaryAction.label}
+          </Button>
+        ) : null}
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

package/src/blocks/supply-item-card/index.ts

@@ -0,0 +1,6 @@
+export {
+  SupplyItemCard,
+  type SupplyItemCardProps,
+  type SupplyOption,
+  type SupplyQuantity,
+} from './supply-item-card';

package/src/blocks/supply-item-card/supply-item-card.tsx

@@ -0,0 +1,139 @@
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { ChipGroup } from '../../components/chip-group/chip-group';
+import { Photo } from '../../components/photo/photo';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { PressableBase } from '../../internal/pressable-base';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type SupplyOption = { id: string; label: string };
+
+export type SupplyQuantity = { quantity: number; price: number };
+
+export type SupplyItemCardProps = {
+  name: string;
+  image: ImageSourcePropType;
+  options?: readonly SupplyOption[];
+  selectedOptionId?: string | null;
+  onSelectOption?: (id: string) => void;
+  quantities: readonly SupplyQuantity[];
+  selectedQuantity: number | null;
+  onSelectQuantity: (quantity: number) => void;
+  unit?: string;
+  onAdd?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  card: { gap: t.space[4] },
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[3] },
+  image: { width: 64 },
+  name: { flex: 1 },
+  group: {
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: 52,
+    paddingHorizontal: 14,
+  },
+  divided: { borderTopWidth: 1, borderTopColor: t.colors.border },
+  pressed: { backgroundColor: t.colors.muted },
+  radio: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: t.colors.input,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioOn: { borderColor: t.colors.primary },
+  radioDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: t.colors.primary,
+  },
+  quantity: { flex: 1 },
+}));
+
+export function SupplyItemCard({
+  name,
+  image,
+  options = [],
+  selectedOptionId = null,
+  onSelectOption,
+  quantities,
+  selectedQuantity,
+  onSelectQuantity,
+  unit = '장',
+  onAdd,
+  style,
+}: SupplyItemCardProps) {
+  const s = useStyles();
+  const selected = quantities.find((q) => q.quantity === selectedQuantity);
+  return (
+    <Card style={[s.card, style]}>
+      <View style={s.head}>
+        <View style={s.image}>
+          <Photo source={image} />
+        </View>
+        <Text variant="bodyLg" weight="bold" style={s.name}>
+          {name}
+        </Text>
+      </View>
+      {options.length > 1 ? (
+        <ChipGroup
+          items={options.map((o) => ({ value: o.id, label: o.label }))}
+          value={selectedOptionId}
+          onValueChange={(id) => id && onSelectOption?.(id)}
+        />
+      ) : null}
+      <View accessibilityRole="radiogroup" style={s.group}>
+        {quantities.map((q, i) => {
+          const on = q.quantity === selectedQuantity;
+          const qty = `${formatPrice(q.quantity, '')}${unit}`;
+          return (
+            <PressableBase
+              key={q.quantity}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: on }}
+              accessibilityLabel={`${qty} ${formatPrice(q.price)}`}
+              pressedStyle={s.pressed}
+              onPress={() => onSelectQuantity(q.quantity)}
+              style={[s.row, i > 0 && s.divided]}
+            >
+              <View style={[s.radio, on && s.radioOn]}>
+                {on ? <View style={s.radioDot} /> : null}
+              </View>
+              <Text weight={on ? 'semibold' : undefined} style={s.quantity}>
+                {qty}
+              </Text>
+              <Text weight={on ? 'semibold' : undefined}>
+                {formatPrice(q.price)}
+              </Text>
+            </PressableBase>
+          );
+        })}
+      </View>
+      {onAdd ? (
+        <Button size="lg" disabled={!selected} onPress={onAdd}>
+          {selected ? `${formatPrice(selected.price)} 담기` : '담기'}
+        </Button>
+      ) : null}
+    </Card>
+  );
+}

package/src/charts/index.ts

@@ -0,0 +1,2 @@
+export { LineChart, type ChartDatum, type LineChartProps } from './line-chart';
+export { Sparkline, type SparklineProps } from './sparkline';

package/src/charts/line-chart.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, {
+  Circle,
+  Line,
+  Path,
+  Rect,
+  Text as SvgText,
+} from 'react-native-svg';
+import { formatPrice } from '../components/price/price';
+import { useTheme } from '../theme/theme-provider';
+import { areaPath, labelStep, linearScale, linePath, niceTicks } from './scale';
+import { summarize } from './summary';
+
+export type ChartDatum = { label: string; value: number };
+
+export type LineChartProps = {
+  data: readonly ChartDatum[];
+  height?: number;
+  formatY?: (value: number) => string;
+  formatX?: (label: string, index: number) => string;
+  onPointPress?: (datum: ChartDatum, index: number) => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const defaultFormat = (v: number) => formatPrice(v, '');
+const PAD = { top: 8, right: 12, bottom: 24, gap: 8 };
+const FONT_SIZE = 11;
+const WIDE = /[\u1100-\u11ff\u3000-\u9fff\uac00-\ud7af\uff00-\uffef]/;
+const NARROW = /[,.:'\s]/;
+
+export function estimateLabelWidth(label: string, fontSize = FONT_SIZE) {
+  let em = 0;
+  for (const ch of label) {
+    em += WIDE.test(ch) ? 1 : NARROW.test(ch) ? 0.34 : 0.64;
+  }
+  return Math.ceil(em * fontSize) + 2;
+}
+
+export function LineChart({
+  data,
+  height = 200,
+  formatY = defaultFormat,
+  formatX = (label) => label,
+  onPointPress,
+  accessibilityLabel,
+  style,
+}: LineChartProps) {
+  const t = useTheme();
+  const [width, setWidth] = useState(0);
+  const values = data.map((d) => d.value);
+  const ticks = niceTicks(Math.min(0, ...values), Math.max(0, ...values));
+  const yLabels = ticks.map(formatY);
+  const left =
+    Math.max(0, ...yLabels.map((l) => estimateLabelWidth(l))) + PAD.gap;
+  const plot = {
+    x0: left,
+    x1: width - PAD.right,
+    y0: PAD.top,
+    y1: height - PAD.bottom,
+  };
+  const y = linearScale(
+    [ticks[0]!, ticks[ticks.length - 1]!],
+    [plot.y1, plot.y0]
+  );
+  const x = linearScale([0, Math.max(1, data.length - 1)], [plot.x0, plot.x1]);
+  const points = data.map((d, i) => ({
+    x: data.length === 1 ? (plot.x0 + plot.x1) / 2 : x(i),
+    y: y(d.value),
+  }));
+  const step = labelStep(
+    data.length,
+    Math.max(1, Math.floor((plot.x1 - plot.x0) / 56))
+  );
+  const last = points[points.length - 1];
+  const slot =
+    data.length > 1
+      ? (plot.x1 - plot.x0) / (data.length - 1)
+      : plot.x1 - plot.x0;
+
+  return (
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel ?? summarize(values, formatY)}
+      onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
+      style={[{ height }, style]}
+    >
+      {width > 0 ? (
+        <Svg width={width} height={height}>
+          {ticks.map((tick, i) => (
+            <Line
+              key={`g${tick}`}
+              x1={plot.x0}
+              x2={plot.x1}
+              y1={y(tick)}
+              y2={y(tick)}
+              stroke={t.colors.border}
+              strokeWidth={1}
+              strokeDasharray={i === 0 ? undefined : '3 4'}
+            />
+          ))}
+          {ticks.map((tick, i) => (
+            <SvgText
+              key={`y${tick}`}
+              x={plot.x0 - PAD.gap}
+              y={y(tick) + FONT_SIZE / 3}
+              fontSize={FONT_SIZE}
+              fontFamily={t.fontFamily}
+              fill={t.colors.mutedForeground}
+              textAnchor="end"
+            >
+              {yLabels[i]}
+            </SvgText>
+          ))}
+          {data.map((d, i) =>
+            i % step === 0 || i === data.length - 1 ? (
+              <SvgText
+                key={`x${i}`}
+                x={points[i]!.x}
+                y={height - 6}
+                fontSize={FONT_SIZE}
+                fontFamily={t.fontFamily}
+                fill={t.colors.mutedForeground}
+                textAnchor={
+                  i === 0 && data.length > 1
+                    ? 'start'
+                    : i === data.length - 1 && data.length > 1
+                      ? 'end'
+                      : 'middle'
+                }
+              >
+                {formatX(d.label, i)}
+              </SvgText>
+            ) : null
+          )}
+          {points.length > 1 ? (
+            <>
+              <Path
+                d={areaPath(points, plot.y1)}
+                fill={t.colors.primary}
+                fillOpacity={0.12}
+              />
+              <Path
+                d={linePath(points)}
+                fill="none"
+                stroke={t.colors.primary}
+                strokeWidth={2}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+              />
+            </>
+          ) : null}
+          {last ? (
+            <Circle
+              cx={last.x}
+              cy={last.y}
+              r={4}
+              fill={t.colors.primary}
+              stroke={t.colors.background}
+              strokeWidth={2}
+            />
+          ) : null}
+          {onPointPress
+            ? data.map((d, i) => (
+                <Rect
+                  key={`hit${i}`}
+                  x={points[i]!.x - slot / 2}
+                  y={plot.y0}
+                  width={slot}
+                  height={plot.y1 - plot.y0}
+                  fill="transparent"
+                  onPress={() => onPointPress(d, i)}
+                />
+              ))
+            : null}
+        </Svg>
+      ) : null}
+    </View>
+  );
+}