@ezpg/app-ui 0.3.0 → 0.5.0

package/src/templates/result-template.tsx

@@ -0,0 +1,268 @@
+import { useState, type ReactNode } from 'react';
+import {
+  Modal,
+  ScrollView,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { Text } from '../components/text/text';
+import { CloseGlyph } from '../internal/glyphs';
+import { PressableBase } from '../internal/pressable-base';
+import { useTheme } from '../theme/theme-provider';
+import { makeStyles } from '../utils/styles';
+import {
+  BottomBar,
+  Notice,
+  type TemplateAction,
+  type TemplateNotice,
+} from './parts';
+
+export type ResultPreview = {
+  key: string;
+  label: string;
+  render: (mode: 'card' | 'full') => ReactNode;
+};
+
+export type ResultTemplateProps = {
+  previews: readonly ResultPreview[];
+  index: number;
+  onIndexChange: (index: number) => void;
+  progress?: ReactNode;
+  notice?: TemplateNotice;
+  primaryAction?: TemplateAction;
+  secondaryAction?: TemplateAction;
+  openLabel?: string;
+  closeLabel?: string;
+  bottomInset?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  body: { flex: 1, paddingTop: t.space[2] },
+  pager: { flex: 1 },
+  page: { gap: t.space[2] },
+  card: {
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius: t.radius.lg,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.muted,
+  },
+  caption: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  dots: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: t.space[2],
+    paddingVertical: t.layout.groupGap,
+  },
+  dot: {
+    width: t.space[2],
+    height: t.space[2],
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.input,
+  },
+  dotOn: { width: t.space[5], backgroundColor: t.colors.foreground },
+  progress: { flex: 1, paddingHorizontal: t.layout.screenX },
+  notice: { paddingBottom: t.layout.groupGap },
+  viewer: { flex: 1, backgroundColor: t.colors.background },
+  viewerHead: {
+    height: t.headerHeight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: t.space[1],
+    gap: t.space[1],
+  },
+  close: {
+    width: t.minTouchSize,
+    height: t.minTouchSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  full: { flex: 1 },
+}));
+
+function Viewer({
+  previews,
+  index,
+  onIndexChange,
+  onClose,
+  primaryAction,
+  closeLabel,
+  bottomInset,
+}: {
+  previews: readonly ResultPreview[];
+  index: number;
+  onIndexChange: (index: number) => void;
+  onClose: () => void;
+  primaryAction?: TemplateAction;
+  closeLabel: string;
+  bottomInset: number;
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  const [width, setWidth] = useState(0);
+  const current = previews[index];
+  return (
+    <View style={s.viewer}>
+      <View style={s.viewerHead}>
+        <PressableBase
+          onPress={onClose}
+          accessibilityLabel={closeLabel}
+          style={s.close}
+        >
+          <CloseGlyph color={t.colors.foreground} size={t.iconSize.md} />
+        </PressableBase>
+        <Text variant="bodyLg" weight="semibold" accessibilityRole="header">
+          {current
+            ? `${current.label} · ${index + 1} / ${previews.length}`
+            : ''}
+        </Text>
+      </View>
+      <ScrollView
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onLayout={(e: LayoutChangeEvent) =>
+          setWidth(e.nativeEvent.layout.width)
+        }
+        contentOffset={{ x: index * width, y: 0 }}
+        onMomentumScrollEnd={(e: NativeSyntheticEvent<NativeScrollEvent>) =>
+          width &&
+          onIndexChange(Math.round(e.nativeEvent.contentOffset.x / width))
+        }
+        style={s.full}
+      >
+        {previews.map((preview) => (
+          <View key={preview.key} style={{ width }}>
+            {preview.render('full')}
+          </View>
+        ))}
+      </ScrollView>
+      {primaryAction ? (
+        <BottomBar primaryAction={primaryAction} bottomInset={bottomInset} />
+      ) : null}
+    </View>
+  );
+}
+
+export function ResultTemplate({
+  previews,
+  index,
+  onIndexChange,
+  progress,
+  notice,
+  primaryAction,
+  secondaryAction,
+  openLabel = '크게 보기',
+  closeLabel = '닫기',
+  bottomInset = 0,
+}: ResultTemplateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const [width, setWidth] = useState(0);
+  const [open, setOpen] = useState(false);
+  const page = Math.max(0, width - t.layout.screenX * 2 - t.space[6]);
+  const step = page + t.layout.itemGap;
+
+  return (
+    <View style={s.root}>
+      <View
+        style={s.body}
+        onLayout={(e: LayoutChangeEvent) =>
+          setWidth(e.nativeEvent.layout.width)
+        }
+      >
+        {progress ? (
+          <View style={s.progress}>{progress}</View>
+        ) : (
+          <>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              snapToInterval={step || undefined}
+              decelerationRate="fast"
+              contentContainerStyle={{
+                gap: t.layout.itemGap,
+                paddingHorizontal: t.layout.screenX,
+              }}
+              onMomentumScrollEnd={(
+                e: NativeSyntheticEvent<NativeScrollEvent>
+              ) =>
+                step &&
+                onIndexChange(Math.round(e.nativeEvent.contentOffset.x / step))
+              }
+              style={s.pager}
+            >
+              {previews.map((preview, i) => (
+                <View key={preview.key} style={[s.page, { width: page }]}>
+                  <PressableBase
+                    onPress={() => {
+                      onIndexChange(i);
+                      setOpen(true);
+                    }}
+                    accessibilityLabel={`${preview.label} ${openLabel}`}
+                    style={s.card}
+                  >
+                    {preview.render('card')}
+                  </PressableBase>
+                  <View style={s.caption}>
+                    <Text variant="label" weight="semibold">
+                      {preview.label}
+                    </Text>
+                    <Text variant="label" tone="muted">
+                      {openLabel}
+                    </Text>
+                  </View>
+                </View>
+              ))}
+            </ScrollView>
+            {previews.length > 1 ? (
+              <View style={s.dots}>
+                {previews.map((preview, i) => (
+                  <View
+                    key={preview.key}
+                    style={[s.dot, i === index ? s.dotOn : null]}
+                  />
+                ))}
+              </View>
+            ) : null}
+          </>
+        )}
+      </View>
+      {notice ? (
+        <View style={s.notice}>
+          <Notice notice={notice} />
+        </View>
+      ) : null}
+      {primaryAction ? (
+        <BottomBar
+          primaryAction={primaryAction}
+          secondaryAction={secondaryAction}
+          bottomInset={bottomInset}
+        />
+      ) : null}
+      <Modal
+        visible={open}
+        animationType="slide"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Viewer
+          previews={previews}
+          index={index}
+          onIndexChange={onIndexChange}
+          onClose={() => setOpen(false)}
+          primaryAction={primaryAction}
+          closeLabel={closeLabel}
+          bottomInset={bottomInset}
+        />
+      </Modal>
+    </View>
+  );
+}

package/src/templates/scroll-templates.tsx

@@ -0,0 +1,140 @@
+import type { ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  RefreshControl,
+  ScrollView,
+  View,
+} from 'react-native';
+import { useTheme } from '../theme/theme-provider';
+import { makeStyles } from '../utils/styles';
+import {
+  BottomBar,
+  Notice,
+  type TemplateAction,
+  type TemplateNotice,
+} from './parts';
+
+type ScrollTemplateProps = {
+  top?: ReactNode;
+  notice?: TemplateNotice;
+  primaryAction?: TemplateAction;
+  secondaryAction?: TemplateAction;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  bottomInset?: number;
+  children: ReactNode;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  content: { paddingBottom: t.layout.sectionGap },
+  top: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: t.layout.itemGap,
+    paddingTop: t.space[2],
+    paddingHorizontal: t.layout.screenX,
+  },
+  notice: { paddingTop: t.layout.groupGap },
+}));
+
+function ScrollTemplate({
+  top,
+  notice,
+  primaryAction,
+  secondaryAction,
+  refreshing = false,
+  onRefresh,
+  bottomInset = 0,
+  children,
+}: ScrollTemplateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <KeyboardAvoidingView behavior="padding" style={s.root}>
+      <ScrollView
+        contentContainerStyle={[
+          s.content,
+          primaryAction
+            ? null
+            : { paddingBottom: t.layout.sectionGap + bottomInset },
+        ]}
+        keyboardShouldPersistTaps="handled"
+        refreshControl={
+          onRefresh ? (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          ) : undefined
+        }
+      >
+        {top ? <View style={s.top}>{top}</View> : null}
+        {notice ? (
+          <View style={s.notice}>
+            <Notice notice={notice} />
+          </View>
+        ) : null}
+        {children}
+      </ScrollView>
+      {primaryAction ? (
+        <BottomBar
+          primaryAction={primaryAction}
+          secondaryAction={secondaryAction}
+          bottomInset={bottomInset}
+        />
+      ) : null}
+    </KeyboardAvoidingView>
+  );
+}
+
+export type DetailTemplateProps = {
+  status?: ReactNode;
+  notice?: TemplateNotice;
+  primaryAction?: TemplateAction;
+  secondaryAction?: TemplateAction;
+  bottomInset?: number;
+  children: ReactNode;
+};
+
+export function DetailTemplate({ status, ...rest }: DetailTemplateProps) {
+  return <ScrollTemplate top={status} {...rest} />;
+}
+
+export type FormTemplateProps = {
+  notice?: TemplateNotice;
+  saveAction: TemplateAction;
+  bottomInset?: number;
+  children: ReactNode;
+};
+
+export function FormTemplate({ saveAction, ...rest }: FormTemplateProps) {
+  return <ScrollTemplate primaryAction={saveAction} {...rest} />;
+}
+
+export type MenuTemplateProps = {
+  bottomInset?: number;
+  children: ReactNode;
+};
+
+export function MenuTemplate(props: MenuTemplateProps) {
+  return <ScrollTemplate {...props} />;
+}
+
+export type DashboardTemplateProps = {
+  banner?: ReactNode;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  bottomInset?: number;
+  children: ReactNode;
+};
+
+export function DashboardTemplate({
+  banner,
+  children,
+  ...rest
+}: DashboardTemplateProps) {
+  return (
+    <ScrollTemplate {...rest}>
+      {banner}
+      {children}
+    </ScrollTemplate>
+  );
+}

package/src/templates/system-template.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+import { Text } from '../components/text/text';
+import { renderIcon, type IconSlot } from '../internal/icon';
+import { useTheme } from '../theme/theme-provider';
+import { makeStyles } from '../utils/styles';
+import { BottomBar, type TemplateAction } from './parts';
+
+export type SystemTemplateProps = {
+  icon?: IconSlot;
+  title: string;
+  primaryAction?: TemplateAction;
+  actions?: ReactNode;
+  bottomInset?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: t.layout.titleGap,
+    paddingHorizontal: t.layout.screenX,
+  },
+  title: { textAlign: 'center' },
+  actions: {
+    gap: t.layout.itemGap,
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.layout.footerTop,
+  },
+}));
+
+export function SystemTemplate({
+  icon,
+  title,
+  primaryAction,
+  actions,
+  bottomInset = 0,
+}: SystemTemplateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View style={s.root}>
+      <View style={s.center}>
+        {icon
+          ? renderIcon(icon, {
+              color: t.colors.foreground,
+              size: t.controlSize.lg,
+            })
+          : null}
+        <Text variant="screenTitle" accessibilityRole="header" style={s.title}>
+          {title}
+        </Text>
+      </View>
+      {actions ? (
+        <View
+          style={[
+            s.actions,
+            { paddingBottom: t.layout.footerBottom + bottomInset },
+          ]}
+        >
+          {actions}
+        </View>
+      ) : primaryAction ? (
+        <BottomBar primaryAction={primaryAction} bottomInset={bottomInset} />
+      ) : null}
+    </View>
+  );
+}

package/src/theme/base.ts

@@ -3,18 +3,19 @@ export const semantic = {
     background: '#ffffff',
     foreground: '#0a0a0a',
     muted: '#f5f5f5',
-    mutedForeground: '#737373',
+    mutedForeground: '#525252',
     border: '#e5e5e5',
     input: '#d4d4d4',
     ring: '#a3a3a3',
     primary: '#171717',
     primaryForeground: '#fafafa',
-    danger: '#dc2626',
+    danger: '#b91c1c',
     dangerForeground: '#ffffff',
     success: '#15803d',
     successForeground: '#ffffff',
     warning: '#f59e0b',
     warningForeground: '#0a0a0a',
+    warningText: '#b45309',
     info: '#2563eb',
     infoForeground: '#ffffff',
   },
@@ -34,6 +35,7 @@ export const semantic = {
     successForeground: '#0a0a0a',
     warning: '#fbbf24',
     warningForeground: '#0a0a0a',
+    warningText: '#fbbf24',
     info: '#60a5fa',
     infoForeground: '#0a0a0a',
   },
@@ -66,6 +68,11 @@ export const typography = {
     lineHeight: 16,
     fontWeight: '400',
   },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+  },
   body: {
     fontSize: 15,
     lineHeight: 22,
@@ -81,6 +88,11 @@ export const typography = {
     lineHeight: 28,
     fontWeight: '600',
   },
+  screenTitle: {
+    fontSize: 24,
+    lineHeight: 32,
+    fontWeight: '700',
+  },
   display: {
     fontSize: 28,
     lineHeight: 34,
@@ -111,3 +123,27 @@ export const touch = {
   ios: 44,
   android: 48,
 } as const;
+
+export const layout = {
+  screenX: 16,
+  screenTop: 24,
+  titleGap: 24,
+  sectionGap: 32,
+  groupGap: 12,
+  itemGap: 8,
+  footerTop: 12,
+  footerBottom: 16,
+} as const;
+
+export const controlSize = {
+  sm: 44,
+  md: 48,
+  lg: 52,
+} as const;
+
+export const frame = {
+  header: 52,
+  listRow: 56,
+  listRow2: 72,
+  listRow3: 88,
+} as const;

package/src/theme/contract.ts

@@ -0,0 +1,21 @@
+export const TONES = [
+  'neutral',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'primary',
+] as const;
+export type Tone = (typeof TONES)[number];
+
+export const BUTTON_VARIANTS = [
+  'primary',
+  'secondary',
+  'outline',
+  'ghost',
+  'danger',
+] as const;
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+
+export const BUTTON_SIZES = ['sm', 'md', 'lg'] as const;
+export type ButtonSize = (typeof BUTTON_SIZES)[number];

package/src/theme/tokens.ts

@@ -1,7 +1,10 @@
 import { Platform } from 'react-native';
 import type { ColorScheme, ThemeColors, ThemeTokens } from '../types';
 import {
+  controlSize,
+  frame,
   iconSize,
+  layout,
   motion,
   opacity,
   radius,
@@ -25,4 +28,12 @@ export const tokens: ThemeTokens = {
   opacity,
   iconSize,
   minTouchSize: Platform.OS === 'ios' ? touch.ios : touch.android,
+  layout,
+  controlSize,
+  headerHeight: frame.header,
+  listRow: {
+    oneLine: frame.listRow,
+    twoLine: frame.listRow2,
+    threeLine: frame.listRow3,
+  },
 };

package/src/types/index.ts

@@ -18,12 +18,13 @@ export type ThemeColors = {
   successForeground: string;
   warning: string;
   warningForeground: string;
+  warningText: string;
   info: string;
   infoForeground: string;
 };
 
 export type TypographyVariant =
-  'caption' | 'body' | 'bodyLg' | 'title' | 'display';
+  'caption' | 'label' | 'body' | 'bodyLg' | 'title' | 'screenTitle' | 'display';
 
 export type TypographyToken = {
   fontSize: number;
@@ -54,6 +55,19 @@ export type ThemeTokens = {
   opacity: { pressed: number; disabled: number };
   iconSize: { sm: number; md: number };
   minTouchSize: number;
+  layout: {
+    screenX: number;
+    screenTop: number;
+    titleGap: number;
+    sectionGap: number;
+    groupGap: number;
+    itemGap: number;
+    footerTop: number;
+    footerBottom: number;
+  };
+  controlSize: { sm: number; md: number; lg: number };
+  headerHeight: number;
+  listRow: { oneLine: number; twoLine: number; threeLine: number };
 };
 
 export type Theme = ThemeTokens & {