@ezpg/app-ui 0.0.0-stage → 0.2.0

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,141 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AlertGlyph, SearchGlyph } from '../../internal/glyphs';
+import { renderIcon, type IconSlot } from '../../internal/icon';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Button } from '../button/button';
+
+export type EmptyStateVariant = 'default' | 'search' | 'error' | 'section';
+
+export type EmptyStateProps = {
+  title: string;
+  variant?: EmptyStateVariant;
+  icon?: IconSlot;
+  action?: { label: string; onPress: () => void; icon?: IconSlot };
+  style?: StyleProp<ViewStyle>;
+};
+
+const ICON = { screen: 40, section: 20 };
+
+const useStyles = makeStyles((t) => ({
+  screen: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: t.space[8],
+    paddingTop: t.space[8],
+    paddingBottom: t.space[8] + t.space[12] * 2,
+  },
+  title: {
+    ...t.typography.bodyLg,
+    marginTop: t.space[4],
+    fontFamily: t.fontFamily,
+    fontWeight: '600',
+    color: t.colors.foreground,
+    textAlign: 'center',
+  },
+  button: { marginTop: t.space[5], height: 48, paddingHorizontal: t.space[5] },
+  section: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: 52,
+    paddingLeft: t.space[4],
+    paddingRight: t.space[1],
+  },
+  sectionTitle: {
+    ...t.typography.body,
+    flex: 1,
+    fontSize: 14,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+  },
+  link: {
+    minHeight: t.minTouchSize,
+    justifyContent: 'center',
+    paddingHorizontal: t.space[3],
+  },
+  linkLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground,
+  },
+}));
+
+export function EmptyState({
+  title,
+  variant = 'default',
+  icon,
+  action,
+  style,
+}: EmptyStateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const slot =
+    icon ??
+    (variant === 'search'
+      ? SearchGlyph
+      : variant === 'error'
+        ? AlertGlyph
+        : undefined);
+
+  if (variant === 'section') {
+    return (
+      <View style={[s.section, style]}>
+        {slot
+          ? renderIcon(slot, {
+              color: t.colors.mutedForeground,
+              size: ICON.section,
+            })
+          : null}
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.sectionTitle}>
+          {title}
+        </Text>
+        {action ? (
+          <PressableBase
+            accessibilityRole="link"
+            onPress={action.onPress}
+            style={s.link}
+          >
+            <Text maxFontSizeMultiplier={t.maxFontScale} style={s.linkLabel}>
+              {action.label}
+            </Text>
+          </PressableBase>
+        ) : null}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      accessibilityRole={variant === 'error' ? 'alert' : undefined}
+      accessibilityLiveRegion={variant === 'default' ? 'none' : 'polite'}
+      style={[s.screen, style]}
+    >
+      {slot
+        ? renderIcon(slot, {
+            color: t.colors.mutedForeground,
+            size: ICON.screen,
+          })
+        : null}
+      <Text
+        accessibilityRole="header"
+        maxFontSizeMultiplier={t.maxFontScale}
+        style={s.title}
+      >
+        {title}
+      </Text>
+      {action ? (
+        <Button
+          leftIcon={action.icon}
+          style={s.button}
+          onPress={action.onPress}
+        >
+          {action.label}
+        </Button>
+      ) : null}
+    </View>
+  );
+}

package/src/components/empty-state/index.ts

@@ -0,0 +1,5 @@
+export {
+  EmptyState,
+  type EmptyStateProps,
+  type EmptyStateVariant,
+} from './empty-state';

package/src/components/field/field.tsx

@@ -0,0 +1,201 @@
+import { useState, type ComponentRef, type Ref } from 'react';
+import {
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { AlertGlyph } from '../../internal/glyphs';
+import { renderIcon, type IconSlot } from '../../internal/icon';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type FieldProps = Omit<TextInputProps, 'style'> & {
+  ref?: Ref<ComponentRef<typeof TextInput>>;
+  label?: string;
+  error?: string;
+  hint?: string;
+  warning?: string;
+  leading?: IconSlot;
+  trailing?: IconSlot;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  label: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    color: t.colors.foreground,
+  },
+  frame: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    height: 52,
+    paddingHorizontal: t.space[4],
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: t.colors.input,
+    backgroundColor: t.colors.background,
+  },
+  focused: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.primary,
+  },
+  invalid: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.destructive,
+  },
+  disabled: { opacity: t.opacity.disabled, backgroundColor: t.colors.muted },
+  input: {
+    flex: 1,
+    alignSelf: 'stretch',
+    paddingVertical: 0,
+    fontFamily: t.fontFamily,
+    fontSize: 16,
+    color: t.colors.foreground,
+  },
+  error: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.destructive,
+  },
+  errorLabel: { color: t.colors.destructive },
+  warned: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.warning,
+  },
+  noteRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: t.space[1],
+    paddingLeft: t.space[1],
+  },
+  grow: { flex: 1, paddingLeft: 0 },
+  hint: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.mutedForeground,
+  },
+  warning: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.foreground,
+  },
+}));
+
+export function Field({
+  label,
+  error,
+  hint,
+  warning,
+  leading,
+  trailing,
+  style,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...input
+}: FieldProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const [focused, setFocused] = useState(false);
+  const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
+  const warn = error ? undefined : warning;
+  const note = error ?? warn ?? hint;
+
+  return (
+    <View style={[s.root, style]}>
+      {label ? (
+        <Text
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.label, !!error && s.errorLabel]}
+        >
+          {label}
+        </Text>
+      ) : null}
+      <View
+        style={[
+          s.frame,
+          focused && s.focused,
+          !!error && s.invalid,
+          !!warn && s.warned,
+          !editable && s.disabled,
+        ]}
+      >
+        {leading ? renderIcon(leading, icon) : null}
+        <TextInput
+          placeholderTextColor={t.colors.mutedForeground}
+          selectionColor={t.colors.ring}
+          maxFontSizeMultiplier={t.maxFontScale}
+          accessibilityLabel={label}
+          accessibilityHint={note}
+          {...input}
+          editable={editable}
+          style={s.input}
+          onFocus={(e) => {
+            setFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setFocused(false);
+            onBlur?.(e);
+          }}
+        />
+        {error ? (
+          <AlertGlyph
+            filled
+            color={t.colors.destructive}
+            onColor={t.colors.destructiveForeground}
+            size={t.iconSize.md}
+          />
+        ) : trailing ? (
+          renderIcon(trailing, icon)
+        ) : null}
+      </View>
+      {error ? (
+        <Text
+          maxFontSizeMultiplier={t.maxFontScale}
+          accessibilityLiveRegion="polite"
+          style={s.error}
+        >
+          {error}
+        </Text>
+      ) : warn ? (
+        <View style={s.noteRow}>
+          <AlertGlyph
+            filled
+            color={t.colors.warning}
+            onColor={t.colors.warningForeground}
+            size={t.iconSize.sm}
+          />
+          <Text
+            maxFontSizeMultiplier={t.maxFontScale}
+            accessibilityLiveRegion="polite"
+            style={[s.warning, s.grow]}
+          >
+            {warn}
+          </Text>
+        </View>
+      ) : hint ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.hint}>
+          {hint}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/field/index.ts

@@ -0,0 +1 @@
+export { Field, type FieldProps } from './field';

package/src/components/list-row/index.ts

@@ -0,0 +1 @@
+export { ListRow, type ListRowProps } from './list-row';

package/src/components/list-row/list-row.tsx

@@ -0,0 +1,112 @@
+import { Text, View } from 'react-native';
+import { ChevronGlyph } from '../../internal/glyphs';
+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 ListRowProps = Omit<
+  PressableBaseProps,
+  'children' | 'touchHeight'
+> & {
+  title: string;
+  description?: string;
+  leading?: IconSlot;
+  trailing?: IconSlot;
+  chevron?: boolean;
+  titleLines?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: Math.max(t.minTouchSize, 56),
+    paddingVertical: t.space[3],
+    paddingHorizontal: t.space[4],
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+  body: { flex: 1, gap: 2 },
+  title: {
+    ...t.typography.body,
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground,
+  },
+  description: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+  },
+  trailing: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+}));
+
+export function ListRow({
+  title,
+  description,
+  leading,
+  trailing,
+  chevron,
+  titleLines = 1,
+  onPress,
+  style,
+  ...rest
+}: ListRowProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
+  const showChevron = chevron ?? !!onPress;
+
+  const content = (
+    <>
+      {leading ? renderIcon(leading, icon) : null}
+      <View style={s.body}>
+        <Text
+          numberOfLines={titleLines}
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={s.title}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text
+            numberOfLines={2}
+            maxFontSizeMultiplier={t.maxFontScale}
+            style={s.description}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {trailing || showChevron ? (
+        <View style={s.trailing}>
+          {trailing ? renderIcon(trailing, icon) : null}
+          {showChevron ? (
+            <ChevronGlyph
+              color={t.colors.mutedForeground}
+              size={t.iconSize.sm}
+            />
+          ) : null}
+        </View>
+      ) : null}
+    </>
+  );
+
+  if (!onPress) {
+    return <View style={[s.row, style]}>{content}</View>;
+  }
+  return (
+    <PressableBase
+      {...rest}
+      onPress={onPress}
+      pressedStyle={s.pressed}
+      style={[s.row, style]}
+    >
+      {content}
+    </PressableBase>
+  );
+}

package/src/components/photo/index.ts

@@ -0,0 +1 @@
+export { Photo, type PhotoProps } from './photo';

package/src/components/photo/photo.tsx

@@ -0,0 +1,82 @@
+import { useState, type ReactNode } from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  type ImageProps,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+
+export type PhotoProps = Omit<ImageProps, 'source' | 'style'> & {
+  source: ImageSourcePropType;
+  aspectRatio?: number;
+  radius?: number;
+  fallback?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+function sourceKey(source: ImageSourcePropType): string {
+  if (typeof source === 'number') return String(source);
+  if (Array.isArray(source)) return source.map((s) => s.uri ?? '').join('|');
+  return (source as { uri?: string }).uri ?? '';
+}
+
+export function Photo(props: PhotoProps) {
+  return <PhotoInner key={sourceKey(props.source)} {...props} />;
+}
+
+function PhotoInner({
+  source,
+  aspectRatio = 1,
+  radius,
+  fallback,
+  style,
+  onLoad,
+  onError,
+  ...rest
+}: PhotoProps) {
+  const t = useTheme();
+  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>(
+    'loading'
+  );
+  return (
+    <View
+      style={[
+        styles.frame,
+        {
+          aspectRatio,
+          borderRadius: radius ?? t.radius.md,
+          backgroundColor: t.colors.muted,
+        },
+        style,
+      ]}
+    >
+      {status === 'error' ? (
+        <View style={styles.center}>{fallback}</View>
+      ) : (
+        <Image
+          {...rest}
+          source={source}
+          resizeMode={rest.resizeMode ?? 'cover'}
+          style={StyleSheet.absoluteFill}
+          onLoad={(e) => {
+            setStatus('loaded');
+            onLoad?.(e);
+          }}
+          onError={(e) => {
+            setStatus('error');
+            onError?.(e);
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: { width: '100%', overflow: 'hidden' },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/src/components/price/index.ts

@@ -0,0 +1 @@
+export { formatPrice, Price, type PriceProps } from './price';

package/src/components/price/price.tsx

@@ -0,0 +1,81 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { TypographyVariant } from '../../types';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export function formatPrice(value: number, unit = '원'): string {
+  const n = Math.round(value);
+  const digits = String(Math.abs(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return `${n < 0 ? '-' : ''}${digits}${unit}`;
+}
+
+export type PriceProps = {
+  value: number;
+  originalValue?: number;
+  variant?: TypographyVariant;
+  unit?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'baseline', gap: t.space[2] },
+  value: {
+    fontFamily: t.fontFamily,
+    fontWeight: '700',
+    color: t.colors.foreground,
+  },
+  original: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    color: t.colors.mutedForeground,
+    textDecorationLine: 'line-through',
+  },
+  rate: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    fontWeight: '700',
+    color: t.colors.destructive,
+  },
+}));
+
+export function Price({
+  value,
+  originalValue,
+  variant = 'body',
+  unit,
+  style,
+}: PriceProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const discounted = originalValue !== undefined && originalValue > value;
+  const rate = discounted ? Math.round((1 - value / originalValue) * 100) : 0;
+  const label = discounted
+    ? `${formatPrice(value, unit)}, 할인 전 ${formatPrice(originalValue, unit)}`
+    : formatPrice(value, unit);
+  return (
+    <View style={[s.row, style]} accessible accessibilityLabel={label}>
+      {discounted ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.rate}>
+          {rate}%
+        </Text>
+      ) : null}
+      <Text
+        maxFontSizeMultiplier={t.maxFontScale}
+        style={[
+          s.value,
+          {
+            fontSize: t.typography[variant].fontSize,
+            lineHeight: t.typography[variant].lineHeight,
+          },
+        ]}
+      >
+        {formatPrice(value, unit)}
+      </Text>
+      {discounted ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.original}>
+          {formatPrice(originalValue, unit)}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/progress-bar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from './progress-bar';