@ezpg/app-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,149 @@
+export const semantic = {
+  light: {
+    background: '#ffffff',
+    foreground: '#0a0a0a',
+    muted: '#f5f5f5',
+    mutedForeground: '#525252',
+    border: '#e5e5e5',
+    input: '#d4d4d4',
+    ring: '#a3a3a3',
+    primary: '#171717',
+    primaryForeground: '#fafafa',
+    danger: '#b91c1c',
+    dangerForeground: '#ffffff',
+    success: '#15803d',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#0a0a0a',
+    warningText: '#b45309',
+    info: '#2563eb',
+    infoForeground: '#ffffff',
+  },
+  dark: {
+    background: '#0a0a0a',
+    foreground: '#fafafa',
+    muted: '#262626',
+    mutedForeground: '#a3a3a3',
+    border: '#262626',
+    input: '#404040',
+    ring: '#737373',
+    primary: '#fafafa',
+    primaryForeground: '#171717',
+    danger: '#f87171',
+    dangerForeground: '#0a0a0a',
+    success: '#4ade80',
+    successForeground: '#0a0a0a',
+    warning: '#fbbf24',
+    warningForeground: '#0a0a0a',
+    warningText: '#fbbf24',
+    info: '#60a5fa',
+    infoForeground: '#0a0a0a',
+  },
+} as const;
+
+export const space = {
+  '0': 0,
+  '1': 4,
+  '2': 8,
+  '3': 12,
+  '4': 16,
+  '5': 20,
+  '6': 24,
+  '8': 32,
+  '10': 40,
+  '12': 48,
+  '16': 64,
+} as const;
+
+export const radius = {
+  sm: 6,
+  md: 8,
+  lg: 12,
+  full: 9999,
+} as const;
+
+export const typography = {
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: '400',
+  },
+  bodyLg: {
+    fontSize: 17,
+    lineHeight: 24,
+    fontWeight: '400',
+  },
+  title: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: '600',
+  },
+  screenTitle: {
+    fontSize: 24,
+    lineHeight: 32,
+    fontWeight: '700',
+  },
+  display: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: '700',
+  },
+} as const;
+
+export const shadow = {
+  sm: '0px 1px 2px rgba(0, 0, 0, 0.08)',
+  md: '0px 4px 12px rgba(0, 0, 0, 0.12)',
+} as const;
+
+export const motion = {
+  duration: 200,
+} as const;
+
+export const opacity = {
+  pressed: 0.8,
+  disabled: 0.5,
+} as const;
+
+export const iconSize = {
+  sm: 16,
+  md: 20,
+} as const;
+
+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,90 +1,39 @@
 import { Platform } from 'react-native';
 import type { ColorScheme, ThemeColors, ThemeTokens } from '../types';
+import {
+  controlSize,
+  frame,
+  iconSize,
+  layout,
+  motion,
+  opacity,
+  radius,
+  semantic,
+  shadow,
+  space,
+  touch,
+  typography,
+} from './base';
 
-const neutral = {
-  50: '#fafafa',
-  100: '#f5f5f5',
-  200: '#e5e5e5',
-  300: '#d4d4d4',
-  400: '#a3a3a3',
-  500: '#737373',
-  700: '#404040',
-  800: '#262626',
-  900: '#171717',
-  950: '#0a0a0a',
-};
-
-export const colors: Record<ColorScheme, ThemeColors> = {
-  light: {
-    background: '#ffffff',
-    foreground: neutral[950],
-    muted: neutral[100],
-    mutedForeground: neutral[500],
-    border: neutral[200],
-    input: neutral[300],
-    ring: neutral[400],
-    primary: neutral[900],
-    primaryForeground: neutral[50],
-    destructive: '#dc2626',
-    destructiveForeground: '#ffffff',
-    success: '#15803d',
-    successForeground: '#ffffff',
-    warning: '#f59e0b',
-    warningForeground: neutral[950],
-    info: '#2563eb',
-    infoForeground: '#ffffff',
-  },
-  dark: {
-    background: neutral[950],
-    foreground: neutral[50],
-    muted: neutral[800],
-    mutedForeground: neutral[400],
-    border: neutral[800],
-    input: neutral[700],
-    ring: neutral[500],
-    primary: neutral[50],
-    primaryForeground: neutral[900],
-    destructive: '#f87171',
-    destructiveForeground: neutral[950],
-    success: '#4ade80',
-    successForeground: neutral[950],
-    warning: '#fbbf24',
-    warningForeground: neutral[950],
-    info: '#60a5fa',
-    infoForeground: neutral[950],
-  },
-};
+export const colors: Record<ColorScheme, ThemeColors> = semantic;
 
 export const tokens: ThemeTokens = {
-  space: {
-    0: 0,
-    1: 4,
-    2: 8,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    8: 32,
-    10: 40,
-    12: 48,
-    16: 64,
-  },
-  radius: { sm: 6, md: 8, lg: 12, full: 9999 },
-  typography: {
-    caption: { fontSize: 12, lineHeight: 16, fontWeight: '400' },
-    body: { fontSize: 15, lineHeight: 22, fontWeight: '400' },
-    bodyLg: { fontSize: 17, lineHeight: 24, fontWeight: '400' },
-    title: { fontSize: 20, lineHeight: 28, fontWeight: '600' },
-    display: { fontSize: 28, lineHeight: 34, fontWeight: '700' },
-  },
+  space,
+  radius,
+  typography,
   fontFamily: undefined,
   maxFontScale: 1.3,
-  shadow: {
-    sm: '0px 1px 2px rgba(0, 0, 0, 0.08)',
-    md: '0px 4px 12px rgba(0, 0, 0, 0.12)',
+  shadow,
+  motion,
+  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,
   },
-  motion: { duration: 200 },
-  opacity: { pressed: 0.8, disabled: 0.5 },
-  iconSize: { sm: 16, md: 20 },
-  minTouchSize: Platform.OS === 'ios' ? 44 : 48,
 };

package/src/types/index.ts

@@ -12,18 +12,19 @@ export type ThemeColors = {
   ring: string;
   primary: string;
   primaryForeground: string;
-  destructive: string;
-  destructiveForeground: string;
+  danger: string;
+  dangerForeground: string;
   success: string;
   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 & {