@ezpg/app-ui 0.2.0 → 0.4.0

package/src/templates/editor-template.tsx

@@ -0,0 +1,164 @@
+import type { ReactNode } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Button } from '../components/button/button';
+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';
+
+export type EditorTool = {
+  key: string;
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+};
+
+export type EditorSheet = {
+  title: string;
+  onClose: () => void;
+  headerAction?: ReactNode;
+  children: ReactNode;
+};
+
+export type EditorTemplateProps = {
+  preview: ReactNode;
+  tools: readonly EditorTool[];
+  sheet?: EditorSheet | null;
+  closeLabel?: string;
+  bottomInset?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.muted },
+  canvas: {
+    flex: 1,
+    paddingTop: t.layout.groupGap,
+    paddingHorizontal: t.layout.screenX,
+  },
+  preview: {
+    flex: 1,
+    overflow: 'hidden',
+    borderTopLeftRadius: t.radius.lg,
+    borderTopRightRadius: t.radius.lg,
+    backgroundColor: t.colors.background,
+  },
+  tools: {
+    flexDirection: 'row',
+    gap: t.layout.itemGap,
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.layout.footerTop,
+    borderTopWidth: 1,
+    borderTopColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  tool: { flex: 1 },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    maxHeight: '60%',
+    borderTopLeftRadius: t.radius.lg,
+    borderTopRightRadius: t.radius.lg,
+    borderTopWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  grab: {
+    alignSelf: 'center',
+    width: t.space[8],
+    height: t.space[1],
+    marginTop: t.space[2],
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.input,
+  },
+  sheetHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    paddingLeft: t.layout.screenX,
+    paddingRight: t.space[1],
+    minHeight: t.controlSize.md,
+  },
+  sheetTitle: { flex: 1 },
+  close: {
+    width: t.minTouchSize,
+    height: t.minTouchSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sheetBody: {
+    gap: t.space[4],
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.space[2],
+  },
+}));
+
+export function EditorTemplate({
+  preview,
+  tools,
+  sheet,
+  closeLabel = '닫기',
+  bottomInset = 0,
+}: EditorTemplateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View style={s.root}>
+      <View style={s.canvas}>
+        <View style={s.preview}>{preview}</View>
+      </View>
+      <View
+        style={[
+          s.tools,
+          { paddingBottom: t.layout.footerBottom + bottomInset },
+        ]}
+      >
+        {tools.map((tool) => (
+          <Button
+            key={tool.key}
+            variant="outline"
+            onPress={tool.onPress}
+            disabled={tool.disabled}
+            style={s.tool}
+          >
+            {tool.label}
+          </Button>
+        ))}
+      </View>
+      {sheet ? (
+        <View style={s.sheet}>
+          <View style={s.grab} />
+          <View style={s.sheetHead}>
+            <Text
+              variant="bodyLg"
+              weight="semibold"
+              accessibilityRole="header"
+              style={s.sheetTitle}
+            >
+              {sheet.title}
+            </Text>
+            {sheet.headerAction}
+            <PressableBase
+              onPress={sheet.onClose}
+              accessibilityLabel={closeLabel}
+              style={s.close}
+            >
+              <CloseGlyph color={t.colors.foreground} size={t.iconSize.md} />
+            </PressableBase>
+          </View>
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={[
+              s.sheetBody,
+              { paddingBottom: t.layout.footerBottom + bottomInset },
+            ]}
+          >
+            {sheet.children}
+          </ScrollView>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/templates/index.ts

@@ -0,0 +1,26 @@
+export {
+  DetailTemplate,
+  DashboardTemplate,
+  FormTemplate,
+  MenuTemplate,
+} from './scroll-templates';
+export type {
+  DashboardTemplateProps,
+  DetailTemplateProps,
+  FormTemplateProps,
+  MenuTemplateProps,
+} from './scroll-templates';
+export { EditorTemplate } from './editor-template';
+export type {
+  EditorSheet,
+  EditorTemplateProps,
+  EditorTool,
+} from './editor-template';
+export { ListTemplate } from './list-template';
+export type { ListTemplateProps, ListTemplateStatus } from './list-template';
+export { ResultTemplate } from './result-template';
+export type { ResultPreview, ResultTemplateProps } from './result-template';
+export { SystemTemplate } from './system-template';
+export type { SystemTemplateProps } from './system-template';
+export { ListSection } from './parts';
+export type { NoticeReason, TemplateAction, TemplateNotice } from './parts';

package/src/templates/list-template.tsx

@@ -0,0 +1,124 @@
+import type { ReactElement, ReactNode } from 'react';
+import {
+  FlatList,
+  RefreshControl,
+  View,
+  type ListRenderItem,
+} from 'react-native';
+import { EmptyState } from '../components/empty-state/empty-state';
+import { Skeleton } from '../components/skeleton/skeleton';
+import { useTheme } from '../theme/theme-provider';
+import { makeStyles } from '../utils/styles';
+import type { TemplateAction } from './parts';
+
+export type ListTemplateStatus = 'ready' | 'loading' | 'error';
+
+export type ListTemplateProps<T> = {
+  data: readonly T[];
+  renderItem: ListRenderItem<T>;
+  keyExtractor: (item: T) => string;
+  status?: ListTemplateStatus;
+  filters?: ReactNode;
+  pinned?: ReactNode;
+  empty: { title: string; action?: Pick<TemplateAction, 'label' | 'onPress'> };
+  error?: { title: string; onRetry: () => void };
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  onEndReached?: () => void;
+  selectionBar?: ReactElement | null;
+  bottomInset?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  filters: {
+    gap: t.layout.groupGap,
+    paddingTop: t.space[2],
+    paddingBottom: t.space[2],
+    paddingHorizontal: t.layout.screenX,
+  },
+  loading: {
+    gap: t.space[4],
+    paddingTop: t.space[2],
+    paddingHorizontal: t.layout.screenX,
+  },
+  grow: { flexGrow: 1 },
+}));
+
+export function ListTemplate<T>({
+  data,
+  renderItem,
+  keyExtractor,
+  status = 'ready',
+  filters,
+  pinned,
+  empty,
+  error,
+  refreshing = false,
+  onRefresh,
+  onEndReached,
+  selectionBar,
+  bottomInset = 0,
+}: ListTemplateProps<T>) {
+  const t = useTheme();
+  const s = useStyles();
+  const head = filters ? <View style={s.filters}>{filters}</View> : null;
+
+  if (status === 'loading') {
+    return (
+      <View style={s.root}>
+        {head}
+        <View style={s.loading}>
+          {[0, 1, 2, 3, 4].map((i) => (
+            <Skeleton key={i} height={t.listRow.oneLine} />
+          ))}
+        </View>
+      </View>
+    );
+  }
+
+  if (status === 'error' && error) {
+    return (
+      <View style={s.root}>
+        {head}
+        <EmptyState
+          variant="error"
+          title={error.title}
+          action={{ label: '다시 시도', onPress: error.onRetry }}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={s.root}>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={
+          head || pinned ? (
+            <>
+              {head}
+              {pinned}
+            </>
+          ) : undefined
+        }
+        ListEmptyComponent={
+          <EmptyState title={empty.title} action={empty.action} />
+        }
+        contentContainerStyle={[
+          data.length === 0 ? s.grow : null,
+          selectionBar ? null : { paddingBottom: bottomInset },
+        ]}
+        refreshControl={
+          onRefresh ? (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          ) : undefined
+        }
+        onEndReached={onEndReached}
+      />
+      {selectionBar}
+    </View>
+  );
+}

package/src/templates/parts.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+import { Button } from '../components/button/button';
+import { Text } from '../components/text/text';
+import { AlertGlyph } from '../internal/glyphs';
+import { useTheme } from '../theme/theme-provider';
+import { makeStyles } from '../utils/styles';
+
+export type TemplateAction = {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+export type NoticeReason = 'error' | 'money' | 'irreversible' | 'legal';
+
+export type TemplateNotice = { reason: NoticeReason; text: string };
+
+const useStyles = makeStyles((t) => ({
+  bar: {
+    gap: t.layout.itemGap,
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.layout.footerTop,
+    backgroundColor: t.colors.background,
+  },
+  notice: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: t.space[2],
+    marginHorizontal: t.layout.screenX,
+    paddingVertical: t.space[3],
+    paddingHorizontal: t.space[4],
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted,
+  },
+  noticeText: { flex: 1 },
+  section: { paddingBottom: t.space[2] },
+  sectionHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: t.space[4],
+    paddingBottom: t.space[2],
+    paddingHorizontal: t.layout.screenX,
+  },
+  inset: { paddingHorizontal: t.layout.screenX },
+}));
+
+export function BottomBar({
+  primaryAction,
+  secondaryAction,
+  bottomInset = 0,
+}: {
+  primaryAction: TemplateAction;
+  secondaryAction?: TemplateAction;
+  bottomInset?: number;
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View
+      style={[s.bar, { paddingBottom: t.layout.footerBottom + 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>
+  );
+}
+
+export function Notice({ notice }: { notice: TemplateNotice }) {
+  const t = useTheme();
+  const s = useStyles();
+  const danger = notice.reason === 'error';
+  return (
+    <View accessibilityRole={danger ? 'alert' : undefined} style={s.notice}>
+      <AlertGlyph
+        color={danger ? t.colors.danger : t.colors.mutedForeground}
+        size={t.iconSize.md}
+      />
+      <Text
+        variant="label"
+        tone={danger ? 'danger' : 'default'}
+        style={s.noticeText}
+      >
+        {notice.text}
+      </Text>
+    </View>
+  );
+}
+
+export function ListSection({
+  title,
+  action,
+  inset,
+  children,
+}: {
+  title?: string;
+  action?: ReactNode;
+  inset?: boolean;
+  children: ReactNode;
+}) {
+  const s = useStyles();
+  return (
+    <View style={s.section}>
+      {title ? (
+        <View style={s.sectionHead}>
+          <Text
+            variant="label"
+            tone="muted"
+            weight="semibold"
+            accessibilityRole="header"
+          >
+            {title}
+          </Text>
+          {action}
+        </View>
+      ) : null}
+      {inset ? <View style={s.inset}>{children}</View> : children}
+    </View>
+  );
+}

package/src/templates/result-template.tsx

@@ -0,0 +1,266 @@
+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: () => 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()}
+          </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()}
+                  </PressableBase>
+                  <View style={s.caption}>
+                    <Text variant="label" weight="semibold">
+                      {preview.label}
+                    </Text>
+                    <Text variant="label" tone="muted">
+                      {openLabel}
+                    </Text>
+                  </View>
+                </View>
+              ))}
+            </ScrollView>
+            <View style={s.dots}>
+              {previews.map((preview, i) => (
+                <View
+                  key={preview.key}
+                  style={[s.dot, i === index ? s.dotOn : null]}
+                />
+              ))}
+            </View>
+          </>
+        )}
+      </View>
+      {notice ? (
+        <View style={s.notice}>
+          <Notice notice={notice} />
+        </View>
+      ) : null}
+      {primaryAction && !progress ? (
+        <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>
+  );
+}