@ezpg/app-ui 0.1.0 → 0.2.0

package/src/internal/use-reduced-motion.ts

@@ -1,7 +1,6 @@
 import { useSyncExternalStore } from 'react';
 import { AccessibilityInfo } from 'react-native';
 
-// 앱 전체에서 구독 하나를 공유한다.
 let reduced = false;
 let started = false;
 const listeners = new Set<() => void>();
@@ -26,7 +25,6 @@ function subscribe(listener: () => void) {
   };
 }
 
-/** 기기의 '동작 줄이기' 설정 */
 export function useReducedMotion(): boolean {
   return useSyncExternalStore(subscribe, () => reduced);
 }

package/src/sortable/move.ts

@@ -1,4 +1,3 @@
-/** from 위치의 항목을 to 위치로 옮긴 새 배열 */
 export function moveItem<T>(
   items: readonly T[],
   from: number,

package/src/sortable/sortable-grid.tsx

@@ -10,26 +10,15 @@ 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,
@@ -91,7 +80,6 @@ export function SortableGrid<T>({
   );
 }
 
-/** handle을 켠 SortableGrid · SortableList 안에서 끄는 손잡이 */
 export function SortableHandle({ children }: { children: ReactNode }) {
   return <Sortable.Handle>{children}</Sortable.Handle>;
 }

package/src/sortable/sortable-list.tsx

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

package/src/theme/create-theme.ts

@@ -32,7 +32,6 @@ function resolveColors(
 ): ThemeColors {
   const base = colors[scheme];
   const result = { ...base, ...override };
-  // primary만 바꾸면 그 위 글자색은 대비로 정한다.
   if (override.primary && !override.primaryForeground) {
     result.primaryForeground = pickForeground(
       override.primary,
@@ -43,10 +42,6 @@ function resolveColors(
   return result;
 }
 
-/**
- * 기본 토큰에 overrides를 덮어 light · dark 테마를 만든다.
- * 렌더 밖(모듈 최상단)이나 useMemo 안에서 호출한다.
- */
 export function createTheme(overrides: ThemeOverrides = {}): Themes {
   const { colors: shared = {}, dark = {}, ...rest } = overrides;
   const base = merge(tokens, rest);

package/src/theme/theme-provider.tsx

@@ -6,9 +6,7 @@ import { defaultThemes } from './create-theme';
 const ThemeContext = createContext<Theme>(defaultThemes.light);
 
 export type ThemeProviderProps = {
-  /** createTheme() 결과. 기본값은 기본 테마 */
   themes?: Themes;
-  /** 기본값 'light'. 'system'은 기기 설정을 따른다 */
   colorScheme?: ColorScheme | 'system';
   children: ReactNode;
 };
@@ -31,7 +29,6 @@ export function ThemeProvider({
   );
 }
 
-/** 가장 가까운 ThemeProvider의 테마. Provider가 없으면 기본 light 테마 */
 export function useTheme(): Theme {
   return useContext(ThemeContext);
 }

package/src/theme/tokens.ts

@@ -1,7 +1,6 @@
 import { Platform } from 'react-native';
 import type { ColorScheme, ThemeColors, ThemeTokens } from '../types';
 
-// shadcn/ui neutral 기준
 const neutral = {
   50: '#fafafa',
   100: '#f5f5f5',

package/src/types/index.ts

@@ -8,7 +8,6 @@ export type ThemeColors = {
   muted: string;
   mutedForeground: string;
   border: string;
-  /** 입력칸 · outline 버튼 테두리 */
   input: string;
   ring: string;
   primary: string;
@@ -48,16 +47,12 @@ export type ThemeTokens = {
   };
   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;
 };
 
@@ -73,8 +68,6 @@ type DeepPartial<T> = {
 };
 
 export type ThemeOverrides = DeepPartial<ThemeTokens> & {
-  /** light · dark 공통 */
   colors?: Partial<ThemeColors>;
-  /** dark에만 적용 (colors보다 우선) */
   dark?: { colors?: Partial<ThemeColors> };
 };

package/src/utils/color.ts

@@ -1,4 +1,3 @@
-// #rgb · #rrggbb만 지원한다.
 function toRgb(hex: string): [number, number, number] {
   const value = hex.replace('#', '');
   const full =
@@ -26,7 +25,6 @@ function luminance(hex: string): 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,
@@ -35,7 +33,6 @@ export function contrastRatio(a: string, b: string): number {
   return (hi + 0.05) / (lo + 0.05);
 }
 
-/** 배경 위에서 대비가 더 큰 글자색 */
 export function pickForeground(
   background: string,
   dark: string,

package/src/utils/styles.ts

@@ -9,11 +9,6 @@ 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 {