@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/charts/line-chart.tsx

@@ -0,0 +1,177 @@
+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[];
+  /** 기본 200 */
+  height?: number;
+  /** y축 라벨. 기본은 천 단위 쉼표 */
+  formatY?: (value: number) => string;
+  /** x축 라벨. 기본은 label 그대로 */
+  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;
+
+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(...yLabels.map((l) => l.length)) * FONT_SIZE * 0.62 + 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>
+  );
+}

package/src/charts/scale.ts

@@ -0,0 +1,49 @@
+export type Point = { x: number; y: number };
+
+const STEPS = [1, 2, 2.5, 5, 10];
+
+/** 보기 좋은 눈금. 값이 하나뿐이거나 모두 같아도 범위를 만든다 */
+export function niceTicks(min: number, max: number, count = 4): number[] {
+  let lo = Math.min(min, max);
+  let hi = Math.max(min, max);
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0, 1];
+  if (lo === hi) {
+    if (hi === 0) hi = 1;
+    else if (hi > 0) lo = 0;
+    else hi = 0;
+  }
+  const raw = (hi - lo) / Math.max(1, count - 1);
+  const magnitude = 10 ** Math.floor(Math.log10(raw));
+  const step = (STEPS.find((s) => s * magnitude >= raw) ?? 10) * magnitude;
+  const start = Math.floor(lo / step) * step;
+  const end = Math.ceil(hi / step) * step;
+  const ticks: number[] = [];
+  for (let v = start; v <= end + step / 2; v += step) {
+    ticks.push(Math.round(v / step) * step);
+  }
+  return ticks;
+}
+
+/** [d0, d1] → [r0, r1] 선형 변환. 범위 폭이 0이면 가운데로 */
+export function linearScale(domain: [number, number], range: [number, number]) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  return (v: number) =>
+    d1 === d0 ? (r0 + r1) / 2 : r0 + ((v - d0) / (d1 - d0)) * (r1 - r0);
+}
+
+export function linePath(points: Point[]): string {
+  return points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');
+}
+
+export function areaPath(points: Point[], baseline: number): string {
+  if (points.length === 0) return '';
+  const first = points[0]!;
+  const last = points[points.length - 1]!;
+  return `${linePath(points)} L${last.x},${baseline} L${first.x},${baseline} Z`;
+}
+
+/** 라벨이 겹치지 않게 최대 maxLabels개만 남길 간격 */
+export function labelStep(count: number, maxLabels: number): number {
+  return Math.max(1, Math.ceil(count / Math.max(1, maxLabels)));
+}

package/src/charts/sparkline.tsx

@@ -0,0 +1,64 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { formatPrice } from '../components/price/price';
+import { useTheme } from '../theme/theme-provider';
+import { linearScale, linePath } from './scale';
+import { summarize } from './summary';
+
+export type SparklineProps = {
+  data: readonly number[];
+  /** 기본 80 */
+  width?: number;
+  /** 기본 24 */
+  height?: number;
+  /** 기본 primary */
+  color?: string;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** 축 없는 작은 추세선 */
+export function Sparkline({
+  data,
+  width = 80,
+  height = 24,
+  color,
+  accessibilityLabel,
+  style,
+}: SparklineProps) {
+  const t = useTheme();
+  const values = [...data];
+  const stroke = 1.5;
+  const y = linearScale(
+    [Math.min(...values), Math.max(...values)],
+    [height - stroke, stroke]
+  );
+  const x = linearScale(
+    [0, Math.max(1, values.length - 1)],
+    [stroke, width - stroke]
+  );
+  const points = values.map((v, i) => ({ x: x(i), y: y(v) }));
+  return (
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={
+        accessibilityLabel ?? summarize(values, (v) => formatPrice(v, ''))
+      }
+      style={[{ width, height }, style]}
+    >
+      {points.length > 1 ? (
+        <Svg width={width} height={height}>
+          <Path
+            d={linePath(points)}
+            fill="none"
+            stroke={color ?? t.colors.primary}
+            strokeWidth={stroke}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+        </Svg>
+      ) : null}
+    </View>
+  );
+}

package/src/charts/summary.ts

@@ -0,0 +1,11 @@
+/** 차트 전체를 한 문장으로. 스크린 리더용 */
+export function summarize(
+  values: number[],
+  format: (v: number) => string
+): string {
+  if (values.length === 0) return '데이터 없음';
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const last = values[values.length - 1]!;
+  return `${values.length}개 구간, 최고 ${format(max)}, 최저 ${format(min)}, 마지막 ${format(last)}`;
+}

package/src/charts.tsx

@@ -0,0 +1,2 @@
+export * from './charts/index';
+export * from './blocks/sales-chart/index';

package/src/components/button/button.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react';
+import { ActivityIndicator, Text, View } from 'react-native';
+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 ButtonVariant =
+  'solid' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export type ButtonProps = Omit<
+  PressableBaseProps,
+  'children' | 'touchHeight'
+> & {
+  /** 기본 'solid' */
+  variant?: ButtonVariant;
+  /** 기본 'md' */
+  size?: ButtonSize;
+  /** 스피너를 보여주고 누를 수 없게 한다 */
+  loading?: boolean;
+  leftIcon?: IconSlot;
+  rightIcon?: IconSlot;
+  children: ReactNode;
+};
+
+const heights: Record<ButtonSize, number> = { sm: 44, md: 48, lg: 52 };
+
+const useStyles = makeStyles((t) => ({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: t.space[2],
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  sm: {
+    height: heights.sm,
+    paddingHorizontal: t.space[3],
+    borderRadius: t.radius.md,
+  },
+  md: { height: heights.md, paddingHorizontal: t.space[4], borderRadius: 10 },
+  lg: {
+    height: heights.lg,
+    paddingHorizontal: t.space[5],
+    borderRadius: t.radius.lg,
+  },
+  solid: { backgroundColor: t.colors.primary },
+  secondary: { backgroundColor: t.colors.muted },
+  outline: {
+    backgroundColor: t.colors.background,
+    borderColor: t.colors.input,
+  },
+  ghost: { backgroundColor: 'transparent' },
+  destructive: { backgroundColor: t.colors.destructive },
+  label: { fontFamily: t.fontFamily, fontWeight: '600' },
+  smLabel: { fontSize: 14, lineHeight: 20 },
+  mdLabel: {
+    fontSize: t.typography.body.fontSize,
+    lineHeight: t.typography.body.lineHeight,
+  },
+  lgLabel: { fontSize: 16, lineHeight: 24 },
+}));
+
+export function Button({
+  variant = 'solid',
+  size = 'md',
+  loading = false,
+  disabled,
+  leftIcon,
+  rightIcon,
+  children,
+  style,
+  accessibilityState,
+  ...rest
+}: ButtonProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const color = {
+    solid: t.colors.primaryForeground,
+    secondary: t.colors.foreground,
+    outline: t.colors.foreground,
+    ghost: t.colors.foreground,
+    destructive: t.colors.destructiveForeground,
+  }[variant];
+  const icon = { color, size: size === 'sm' ? t.iconSize.sm : t.iconSize.md };
+
+  return (
+    <PressableBase
+      {...rest}
+      disabled={disabled || loading}
+      touchHeight={heights[size]}
+      accessibilityState={{ ...accessibilityState, busy: loading }}
+      style={[s.base, s[size], s[variant], style]}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={color} />
+      ) : leftIcon ? (
+        <View>{renderIcon(leftIcon, icon)}</View>
+      ) : null}
+      {typeof children === 'string' ? (
+        <Text
+          numberOfLines={1}
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.label, s[`${size}Label`], { color }]}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+      {rightIcon ? <View>{renderIcon(rightIcon, icon)}</View> : null}
+    </PressableBase>
+  );
+}

package/src/components/button/index.ts

@@ -0,0 +1,6 @@
+export {
+  Button,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+} from './button';

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,79 @@
+import { Text, View } from 'react-native';
+import { CheckGlyph } from '../../internal/glyphs';
+import {
+  PressableBase,
+  type PressableBaseProps,
+} from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type CheckboxProps = Omit<
+  PressableBaseProps,
+  'children' | 'onPress' | 'touchHeight'
+> & {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  label?: string;
+};
+
+const BOX = 20;
+
+const useStyles = makeStyles((t) => ({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    alignSelf: 'flex-start',
+  },
+  box: {
+    width: BOX,
+    height: BOX,
+    borderRadius: t.radius.sm,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checked: { backgroundColor: t.colors.primary, borderColor: t.colors.primary },
+  label: {
+    ...t.typography.body,
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground,
+  },
+}));
+
+export function Checkbox({
+  value,
+  onValueChange,
+  label,
+  style,
+  accessibilityState,
+  ...rest
+}: CheckboxProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <PressableBase
+      accessibilityRole="checkbox"
+      accessibilityLabel={label}
+      {...rest}
+      accessibilityState={{ ...accessibilityState, checked: value }}
+      touchHeight={label ? t.typography.body.lineHeight : BOX}
+      pressedStyle={{}}
+      onPress={() => onValueChange(!value)}
+      style={[s.row, style]}
+    >
+      <View style={[s.box, value && s.checked]}>
+        {value ? (
+          <CheckGlyph color={t.colors.primaryForeground} size={14} />
+        ) : null}
+      </View>
+      {label ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.label}>
+          {label}
+        </Text>
+      ) : null}
+    </PressableBase>
+  );
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './checkbox';

package/src/components/chip/chip.tsx

@@ -0,0 +1,73 @@
+import { Text, View } from 'react-native';
+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 ChipProps = Omit<PressableBaseProps, 'children' | 'touchHeight'> & {
+  selected?: boolean;
+  leftIcon?: IconSlot;
+  children: string;
+};
+
+const HEIGHT = 32;
+
+const useStyles = makeStyles((t) => ({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: t.space[1],
+    height: HEIGHT,
+    paddingHorizontal: t.space[3],
+    borderRadius: t.radius.full,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  selected: {
+    backgroundColor: t.colors.primary,
+    borderColor: t.colors.primary,
+  },
+  label: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+  },
+}));
+
+export function Chip({
+  selected = false,
+  leftIcon,
+  children,
+  style,
+  accessibilityState,
+  ...rest
+}: ChipProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const color = selected ? t.colors.primaryForeground : t.colors.foreground;
+  return (
+    <PressableBase
+      {...rest}
+      accessibilityState={{ ...accessibilityState, selected }}
+      touchHeight={HEIGHT}
+      style={[s.base, selected && s.selected, style]}
+    >
+      {leftIcon ? (
+        <View>{renderIcon(leftIcon, { color, size: t.iconSize.sm })}</View>
+      ) : null}
+      <Text
+        numberOfLines={1}
+        maxFontSizeMultiplier={t.maxFontScale}
+        style={[s.label, { color }]}
+      >
+        {children}
+      </Text>
+    </PressableBase>
+  );
+}

package/src/components/chip/index.ts

@@ -0,0 +1 @@
+export { Chip, type ChipProps } from './chip';

package/src/components/chip-group/chip-group.tsx

@@ -0,0 +1,86 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { makeStyles } from '../../utils/styles';
+import { Chip } from '../chip/chip';
+
+export type ChipGroupItem<T extends string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
+type Single<T extends string> = {
+  multiple?: false;
+  value: T | null;
+  onValueChange: (value: T | null) => void;
+  /** 선택된 칩을 다시 누르면 해제. 기본 false */
+  deselectable?: boolean;
+};
+
+type Multiple<T extends string> = {
+  multiple: true;
+  value: readonly T[];
+  onValueChange: (value: T[]) => void;
+  /** 최대 선택 개수 */
+  max?: number;
+};
+
+export type ChipGroupProps<T extends string> = (Single<T> | Multiple<T>) & {
+  items: readonly ChipGroupItem<T>[];
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flexDirection: 'row', flexWrap: 'wrap', gap: t.space[2] },
+}));
+
+export function ChipGroup<T extends string>(props: ChipGroupProps<T>) {
+  const s = useStyles();
+  const { items, style } = props;
+
+  const isSelected = (v: T) =>
+    props.multiple ? props.value.includes(v) : props.value === v;
+
+  const press = (v: T) => {
+    if (props.multiple) {
+      if (props.value.includes(v)) {
+        props.onValueChange(props.value.filter((x) => x !== v));
+      } else if (props.max === undefined || props.value.length < props.max) {
+        props.onValueChange([...props.value, v]);
+      }
+    } else if (props.value === v) {
+      if (props.deselectable) props.onValueChange(null);
+    } else {
+      props.onValueChange(v);
+    }
+  };
+
+  const full =
+    props.multiple &&
+    props.max !== undefined &&
+    props.value.length >= props.max;
+
+  return (
+    <View
+      accessibilityRole={props.multiple ? undefined : 'radiogroup'}
+      style={[s.root, style]}
+    >
+      {items.map((item) => {
+        const selected = isSelected(item.value);
+        return (
+          <Chip
+            key={item.value}
+            selected={selected}
+            disabled={item.disabled || (full && !selected)}
+            accessibilityRole={props.multiple ? 'checkbox' : 'radio'}
+            accessibilityState={
+              props.multiple ? { checked: selected } : { selected }
+            }
+            onPress={() => press(item.value)}
+          >
+            {item.label}
+          </Chip>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/chip-group/index.ts

@@ -0,0 +1,5 @@
+export {
+  ChipGroup,
+  type ChipGroupItem,
+  type ChipGroupProps,
+} from './chip-group';