@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/sortable/move.ts

@@ -0,0 +1,19 @@
+/** from 위치의 항목을 to 위치로 옮긴 새 배열 */
+export function moveItem<T>(
+  items: readonly T[],
+  from: number,
+  to: number
+): T[] {
+  const next = [...items];
+  if (
+    from < 0 ||
+    from >= next.length ||
+    to < 0 ||
+    to >= next.length ||
+    from === to
+  )
+    return next;
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item as T);
+  return next;
+}

package/src/sortable/sortable-grid.tsx

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+import Sortable from 'react-native-sortables';
+import { useTheme } from '../theme/theme-provider';
+import { moveItem } from './move';
+
+export type SortableChange = { from: number; to: number };
+
+export type SortableGridProps<T> = {
+  data: readonly T[];
+  keyExtractor: (item: T) => string;
+  renderItem: (info: { item: T; index: number }) => ReactNode;
+  /** 순서가 바뀐 새 배열 */
+  onDataChange: (data: T[], change: SortableChange) => void;
+  /** 기본 3 */
+  columns?: number;
+  /** 항목 사이 간격. 기본 space[2] */
+  gap?: number;
+  /** true면 SortableHandle을 눌러야만 끈다 */
+  handle?: boolean;
+  /** false면 끌 수 없다. 기본 true */
+  enabled?: boolean;
+  /** 항목의 접근성 라벨. 넘기면 앞으로 · 뒤로 이동 동작을 제공한다 */
+  itemLabel?: (item: T) => string;
+  /** 접근성 동작 이름. 기본 ['앞으로 이동', '뒤로 이동'] */
+  moveLabels?: [string, string];
+};
+
+/**
+ * 길게 눌러 순서를 바꾸는 격자. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다.
+ * columns={1}이면 세로 목록이다.
+ */
+export function SortableGrid<T>({
+  data,
+  keyExtractor,
+  renderItem,
+  onDataChange,
+  columns = 3,
+  gap,
+  handle = false,
+  enabled = true,
+  itemLabel,
+  moveLabels = ['앞으로 이동', '뒤로 이동'],
+}: SortableGridProps<T>) {
+  const t = useTheme();
+  const spacing = gap ?? t.space[2];
+
+  const move = (from: number, to: number) => {
+    if (to < 0 || to >= data.length) return;
+    onDataChange(moveItem(data, from, to), { from, to });
+  };
+
+  return (
+    <Sortable.Grid
+      data={[...data]}
+      keyExtractor={keyExtractor}
+      columns={columns}
+      rowGap={spacing}
+      columnGap={spacing}
+      customHandle={handle}
+      sortEnabled={enabled}
+      activeItemScale={1.03}
+      inactiveItemOpacity={1}
+      onDragEnd={({ data: next, fromIndex, toIndex }) => {
+        if (fromIndex !== toIndex)
+          onDataChange(next, { from: fromIndex, to: toIndex });
+      }}
+      renderItem={({ item, index }) =>
+        itemLabel ? (
+          <View
+            accessible
+            accessibilityLabel={itemLabel(item)}
+            accessibilityActions={[
+              { name: 'decrement', label: moveLabels[0] },
+              { name: 'increment', label: moveLabels[1] },
+            ]}
+            onAccessibilityAction={(e) =>
+              move(
+                index,
+                e.nativeEvent.actionName === 'decrement' ? index - 1 : index + 1
+              )
+            }
+          >
+            {renderItem({ item, index })}
+          </View>
+        ) : (
+          renderItem({ item, index })
+        )
+      }
+    />
+  );
+}
+
+/** handle을 켠 SortableGrid · SortableList 안에서 끄는 손잡이 */
+export function SortableHandle({ children }: { children: ReactNode }) {
+  return <Sortable.Handle>{children}</Sortable.Handle>;
+}

package/src/sortable/sortable-list.tsx

@@ -0,0 +1,11 @@
+import { SortableGrid, type SortableGridProps } from './sortable-grid';
+
+export type SortableListProps<T> = Omit<SortableGridProps<T>, 'columns'>;
+
+/** 길게 눌러 순서를 바꾸는 세로 목록. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다 */
+export function SortableList<T>({
+  moveLabels = ['위로 이동', '아래로 이동'],
+  ...props
+}: SortableListProps<T>) {
+  return <SortableGrid {...props} columns={1} moveLabels={moveLabels} />;
+}

package/src/sortable.tsx

@@ -0,0 +1,3 @@
+export * from './sortable/index';
+export * from './blocks/image-grid/index';
+export * from './blocks/option-editor/index';

package/src/theme/create-theme.ts

@@ -0,0 +1,67 @@
+import type {
+  ColorScheme,
+  Theme,
+  ThemeColors,
+  ThemeOverrides,
+  Themes,
+} from '../types';
+import { pickForeground } from '../utils/color';
+import { colors, tokens } from './tokens';
+
+type Plain = Record<string, unknown>;
+
+function merge<T>(base: T, override: unknown): T {
+  if (override === undefined) return base;
+  if (
+    typeof base !== 'object' ||
+    base === null ||
+    typeof override !== 'object'
+  ) {
+    return override as T;
+  }
+  const result: Plain = { ...(base as Plain) };
+  for (const [key, value] of Object.entries(override as Plain)) {
+    result[key] = merge(result[key], value);
+  }
+  return result as T;
+}
+
+function resolveColors(
+  scheme: ColorScheme,
+  override: Partial<ThemeColors>
+): ThemeColors {
+  const base = colors[scheme];
+  const result = { ...base, ...override };
+  // primary만 바꾸면 그 위 글자색은 대비로 정한다.
+  if (override.primary && !override.primaryForeground) {
+    result.primaryForeground = pickForeground(
+      override.primary,
+      colors.light.foreground,
+      '#ffffff'
+    );
+  }
+  return result;
+}
+
+/**
+ * 기본 토큰에 overrides를 덮어 light · dark 테마를 만든다.
+ * 렌더 밖(모듈 최상단)이나 useMemo 안에서 호출한다.
+ */
+export function createTheme(overrides: ThemeOverrides = {}): Themes {
+  const { colors: shared = {}, dark = {}, ...rest } = overrides;
+  const base = merge(tokens, rest);
+  const build = (
+    scheme: ColorScheme,
+    override: Partial<ThemeColors>
+  ): Theme => ({
+    ...base,
+    scheme,
+    colors: resolveColors(scheme, override),
+  });
+  return {
+    light: build('light', shared),
+    dark: build('dark', { ...shared, ...dark.colors }),
+  };
+}
+
+export const defaultThemes = createTheme();

package/src/theme/theme-provider.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
+import type { ColorScheme, Theme, Themes } from '../types';
+import { defaultThemes } from './create-theme';
+
+const ThemeContext = createContext<Theme>(defaultThemes.light);
+
+export type ThemeProviderProps = {
+  /** createTheme() 결과. 기본값은 기본 테마 */
+  themes?: Themes;
+  /** 기본값 'light'. 'system'은 기기 설정을 따른다 */
+  colorScheme?: ColorScheme | 'system';
+  children: ReactNode;
+};
+
+export function ThemeProvider({
+  themes = defaultThemes,
+  colorScheme = 'light',
+  children,
+}: ThemeProviderProps) {
+  const device = useColorScheme();
+  const scheme: ColorScheme =
+    colorScheme === 'system'
+      ? device === 'dark'
+        ? 'dark'
+        : 'light'
+      : colorScheme;
+  const theme = useMemo(() => themes[scheme], [themes, scheme]);
+  return (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+  );
+}
+
+/** 가장 가까운 ThemeProvider의 테마. Provider가 없으면 기본 light 테마 */
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}

package/src/theme/tokens.ts

@@ -0,0 +1,91 @@
+import { Platform } from 'react-native';
+import type { ColorScheme, ThemeColors, ThemeTokens } from '../types';
+
+// shadcn/ui neutral 기준
+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 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' },
+  },
+  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)',
+  },
+  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

@@ -0,0 +1,80 @@
+import type { TextStyle } from 'react-native';
+
+export type ColorScheme = 'light' | 'dark';
+
+export type ThemeColors = {
+  background: string;
+  foreground: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  /** 입력칸 · outline 버튼 테두리 */
+  input: string;
+  ring: string;
+  primary: string;
+  primaryForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  info: string;
+  infoForeground: string;
+};
+
+export type TypographyVariant =
+  'caption' | 'body' | 'bodyLg' | 'title' | 'display';
+
+export type TypographyToken = {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: TextStyle['fontWeight'];
+};
+
+export type ThemeTokens = {
+  space: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    8: number;
+    10: number;
+    12: number;
+    16: number;
+  };
+  radius: { sm: number; md: number; lg: number; full: number };
+  typography: Record<TypographyVariant, TypographyToken>;
+  /** undefined이면 시스템 폰트 */
+  fontFamily: string | undefined;
+  /** 기기 글자 크기 설정이 적용되는 최대 배율 */
+  maxFontScale: number;
+  /** `boxShadow` 값 (New Architecture) */
+  shadow: { sm: string; md: string };
+  motion: { duration: number };
+  opacity: { pressed: number; disabled: number };
+  iconSize: { sm: number; md: number };
+  /** 최소 터치 영역 (iOS 44, Android 48) */
+  minTouchSize: number;
+};
+
+export type Theme = ThemeTokens & {
+  scheme: ColorScheme;
+  colors: ThemeColors;
+};
+
+export type Themes = Record<ColorScheme, Theme>;
+
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+export type ThemeOverrides = DeepPartial<ThemeTokens> & {
+  /** light · dark 공통 */
+  colors?: Partial<ThemeColors>;
+  /** dark에만 적용 (colors보다 우선) */
+  dark?: { colors?: Partial<ThemeColors> };
+};

package/src/utils/color.ts

@@ -0,0 +1,47 @@
+// #rgb · #rrggbb만 지원한다.
+function toRgb(hex: string): [number, number, number] {
+  const value = hex.replace('#', '');
+  const full =
+    value.length === 3
+      ? value
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : value;
+  if (!/^[0-9a-f]{6}$/i.test(full)) {
+    throw new Error(`Unsupported color "${hex}". Use #rgb or #rrggbb.`);
+  }
+  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16)) as [
+    number,
+    number,
+    number,
+  ];
+}
+
+function luminance(hex: string): number {
+  const [r, g, b] = toRgb(hex).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  }) as [number, number, number];
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** WCAG 대비 비율 (1~21) */
+export function contrastRatio(a: string, b: string): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [
+    number,
+    number,
+  ];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/** 배경 위에서 대비가 더 큰 글자색 */
+export function pickForeground(
+  background: string,
+  dark: string,
+  light: string
+): string {
+  return contrastRatio(background, dark) >= contrastRatio(background, light)
+    ? dark
+    : light;
+}

package/src/utils/styles.ts

@@ -0,0 +1,30 @@
+import {
+  StyleSheet,
+  type ImageStyle,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import type { Theme } from '../types';
+import { useTheme } from '../theme/theme-provider';
+
+type NamedStyles<T> = { [K in keyof T]: ViewStyle | TextStyle | ImageStyle };
+
+/**
+ * 테마로 스타일을 만드는 hook을 반환한다. 같은 테마에는 같은 스타일 객체를 돌려준다.
+ *
+ * const useStyles = makeStyles((t) => ({ box: { padding: t.space[4] } }));
+ */
+export function makeStyles<T extends NamedStyles<T>>(
+  factory: (theme: Theme) => T
+): () => T {
+  const cache = new WeakMap<Theme, T>();
+  return function useStyles() {
+    const theme = useTheme();
+    let styles = cache.get(theme);
+    if (!styles) {
+      styles = StyleSheet.create(factory(theme));
+      cache.set(theme, styles);
+    }
+    return styles;
+  };
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.