@ezpg/app-ui 0.3.0 → 0.5.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/group.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+import { Text } from '../components/text/text';
+import { makeStyles } from '../utils/styles';
+
+export type GroupProps = {
+  title?: string;
+  aside?: string;
+  children: ReactNode;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.layout.groupGap },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: t.space[2],
+  },
+  title: { flexShrink: 1 },
+}));
+
+export function Group({ title, aside, children }: GroupProps) {
+  const s = useStyles();
+  return (
+    <View style={s.root}>
+      {title || aside ? (
+        <View style={s.head}>
+          {title ? (
+            <Text
+              variant="bodyLg"
+              weight="semibold"
+              accessibilityRole="header"
+              style={s.title}
+            >
+              {title}
+            </Text>
+          ) : null}
+          {aside ? (
+            <Text variant="label" tone="muted">
+              {aside}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      {children}
+    </View>
+  );
+}

package/src/templates/index.ts

@@ -0,0 +1,28 @@
+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 { Group } from './group';
+export type { GroupProps } from './group';
+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>
+  );
+}