@ezpg/app-ui 0.0.0-stage → 0.2.0

package/src/charts/scale.ts

@@ -0,0 +1,46 @@
+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;
+}
+
+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`;
+}
+
+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,60 @@
+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[];
+  width?: number;
+  height?: number;
+  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,10 @@
+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,116 @@
+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'
+> & {
+  variant?: ButtonVariant;
+  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,90 @@
+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;
+  count?: number;
+  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',
+  },
+  count: { fontVariant: ['tabular-nums'], fontWeight: '700' },
+}));
+
+export function Chip({
+  selected = false,
+  leftIcon,
+  count,
+  children,
+  style,
+  accessibilityState,
+  accessibilityLabel,
+  ...rest
+}: ChipProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const color = selected ? t.colors.primaryForeground : t.colors.foreground;
+  return (
+    <PressableBase
+      {...rest}
+      accessibilityLabel={
+        accessibilityLabel ??
+        (count === undefined ? undefined : `${children}, ${count}건`)
+      }
+      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>
+      {count === undefined ? null : (
+        <Text
+          numberOfLines={1}
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.label, s.count, { color }]}
+        >
+          {count}
+        </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;
+  count?: number;
+  disabled?: boolean;
+};
+
+type Single<T extends string> = {
+  multiple?: false;
+  value: T | null;
+  onValueChange: (value: T | null) => void;
+  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}
+            count={item.count}
+            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';

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,124 @@
+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;
+  onConfirm: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  loading?: boolean;
+  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,24 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+
+export type DividerProps = {
+  inset?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+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';