@unikit-bridge/ui 0.0.0-stage → 0.2.0

package/src/bridge/types.ts

@@ -0,0 +1,174 @@
+/**
+ * 브리지 프리미티브의 공개 타입 — 플랫폼 공통 부분집합.
+ *
+ * `@unikit-bridge/ui/primitives`는 package.json exports의 조건분기로 해석된다:
+ * - 네이티브(Metro, "react-native" 조건) → native.tsx — RN View/Text/Pressable/TextInput
+ *   + uniwind(className을 RN 스타일로 컴파일)
+ * - 웹(Next/Vite 등, "default" 조건) → web.tsx — div/span/button/input에 className을
+ *   그대로 싣고 표준 Tailwind CSS v4가 스타일링한다
+ *
+ * 두 구현 모두 이 파일의 타입을 충족해야 한다(컴포넌트 소스는 플랫폼 무관하게
+ * 한 벌로 컴파일된다). 프로퍼티는 v0.1 컴포넌트·데모가 실제 쓰는 공통 부분집합이며,
+ * 플랫폼 고유 프로퍼티(hitSlop 등)는 웹에서 무시된다.
+ */
+import type { ReactNode } from "react";
+
+export type BridgeColorScheme = "light" | "dark";
+
+/**
+ * 플랫폼 공통 인라인 스타일 최소 계약 — className 문자열로 표현할 수 없는
+ * 동적 값(진행률 폭 %, 가로세로 비율 등)용. RN 스타일 객체와 DOM
+ * CSSProperties의 실용 교집합(프로퍼티 이름은 camelCase, 값은 문자열·숫자).
+ * 정적 스타일은 여전히 className이 원칙이고, 여기는 동적 값 전용이다.
+ */
+export type BridgeStyle = Record<string, string | number | undefined>;
+
+/**
+ * 플랫폼 공통 접근성 역할 — RN accessibilityRole과 ARIA role의 교집합(컴포넌트
+ * 카탈로그 확장 시 필요한 역할까지 포함). 웹에서는 그대로 role 속성이 된다.
+ */
+export type BridgeRole =
+  | "button"
+  | "link"
+  | "search"
+  | "image"
+  | "text"
+  | "tab"
+  | "tablist"
+  | "tabpanel"
+  | "switch"
+  | "checkbox"
+  | "radio"
+  | "radiogroup"
+  | "option"
+  | "menuitem"
+  | "separator"
+  | "heading"
+  | "list"
+  | "listitem"
+  | "progressbar"
+  | "alert"
+  | "status"
+  | "combobox";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export type ViewProps = {
+  className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
+  children?: ReactNode;
+  /** 네이티브 nativeID — 웹에서는 id로 전달된다 */
+  nativeID?: string;
+  testID?: string;
+  accessibilityRole?: BridgeRole;
+  accessibilityLabel?: string;
+  /** 장식용 요소 표시 — 웹 aria-hidden, 네이티브 accessibilityElementsHidden */
+  "aria-hidden"?: boolean;
+};
+
+export type TextProps = {
+  className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
+  children?: ReactNode;
+  nativeID?: string;
+  testID?: string;
+  onPress?: () => void;
+  accessibilityRole?: BridgeRole;
+  accessibilityLabel?: string;
+};
+
+export type PressableProps = {
+  className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
+  children?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  accessibilityRole?: BridgeRole;
+  /** RN 0.7x+ 관용 — 웹 DOM에서도 동일 속성으로 전달된다 */
+  "aria-disabled"?: boolean;
+  /** 눌림 유지형 컨트롤(toggle) 상태 — 웹 DOM 그대로, 네이티브는 시각 상태로만 반영 */
+  "aria-pressed"?: boolean;
+  /** 체크형 컨트롤(checkbox/radio/switch) 상태 — 네이티브 accessibilityState.checked로 */
+  "aria-checked"?: boolean | "mixed";
+  /** 탭·옵션 등 선택 상태 — 네이티브 accessibilityState.selected로 */
+  "aria-selected"?: boolean;
+  /** 아코디언·콤보박스 등 전개 상태 — 네이티브 accessibilityState.expanded로 */
+  "aria-expanded"?: boolean;
+  "aria-controls"?: string;
+  "aria-labelledby"?: string;
+  /** RN 전용 터치 타깃 확장(px) — 웹에서는 무시 */
+  hitSlop?: number | { top: number; bottom: number; left: number; right: number };
+  nativeID?: string;
+  testID?: string;
+};
+
+export type ImageProps = {
+  className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
+  /** 원격 이미지 — 네이티브 RN source, 웹 img src. require() 정적 소스는 네이티브 전용 */
+  source: { uri: string };
+  /** 웹 img alt — 네이티브에서는 accessibilityLabel로 전달된다 */
+  alt?: string;
+  /** 로드 실패 콜백(무인자) — Avatar 등의 폴백 전환용 */
+  onError?: () => void;
+  accessibilityLabel?: string;
+  nativeID?: string;
+  testID?: string;
+};
+
+export type TextInputProps = {
+  className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  /** RN 관용 — 웹에서는 readOnly로 치환 */
+  editable?: boolean;
+  /** 웹 관용 disabled — 네이티브에서는 editable={false}로 치환된다(Input이 처리) */
+  disabled?: boolean;
+  onChangeText?: (text: string) => void;
+  nativeID?: string;
+  testID?: string;
+  /** 웹 DOM에서 aria-labelledby로 전달 — 입력창↔라벨 연결 */
+  accessibilityLabelledBy?: string;
+  /** RN 0.7x+ 관용 — 웹 DOM에서도 동일 속성으로 전달된다 */
+  "aria-disabled"?: boolean;
+  autoFocus?: boolean;
+  secureTextEntry?: boolean;
+  inputMode?: "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+  /** 여러 줄 입력 — 네이티브 RN multiline, 웹은 <input> 대신 <textarea>로 렌더 */
+  multiline?: boolean;
+};
+
+// ---------------------------------------------------------------------------
+// Refs — 컴포넌트가 실제로 호출하는 메서드만 계약으로 선언(구조적 타이핑).
+// 네이티브 인스턴스(RN)와 DOM 요소(웹) 모두 이 인터페이스를 충족한다.
+// ---------------------------------------------------------------------------
+
+export interface BridgeViewRef {}
+export interface BridgeTextRef {}
+export interface BridgePressableRef {}
+export interface BridgeImageRef {}
+export interface BridgeTextInputRef {
+  focus(): void;
+  blur(): void;
+}
+
+// ---------------------------------------------------------------------------
+// 테마 엔진 바인딩
+// ---------------------------------------------------------------------------
+
+/**
+ * 색 스킴을 스타일링 엔진에 반영한다(UnikitThemeProvider가 호출).
+ * - native.tsx → uniwind `Uniwind.setTheme()`(native 표준 다이얼로그까지 동기)
+ * - web.tsx → document.documentElement의 `.dark` 클래스 토글(표준 Tailwind dark 변형)
+ */
+export type ApplyColorScheme = (colorScheme: BridgeColorScheme) => void;

package/src/bridge/uniwind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="uniwind/types" />

package/src/bridge/web.tsx

@@ -0,0 +1,247 @@
+/**
+ * 웹 브리지 — 표준 Tailwind CSS v4 소비자용(Next.js/Vite 등).
+ *
+ * 같은 className 문자열을 DOM 요소에 그대로 얹는다. 스타일링 엔진이 별도로
+ * 필요하지 않다 — 소비자 앱의 Tailwind CSS가 클래스를 생성하고 브라우저가
+ * 적용한다(hover/focus-visible/:active 등 웹 전용 변형도 CSS 표준 동작).
+ *
+ * RN 프리미티브 관용 프로퍼티는 DOM 속성으로 치환된다:
+ *   onPress→onClick · accessibilityRole→role · accessibilityLabel→aria-label ·
+ *   nativeID→id · accessibilityLabelledBy→aria-labelledby · editable→readOnly ·
+ *   secureTextEntry→type="password" · onChangeText→onChange(value 추출)
+ * 치환은 View/Text/Pressable 전 프리미티브에 동일 적용된다(M-1 — React DOM은
+ * camelCase 미지 prop을 렌더에서 제거하므로 치환 없이는 role·라벨이 사라진다).
+ * hitSlop은 웹에서 무시된다(포인터 정밀도가 높아 불필요).
+ */
+import { forwardRef, type ChangeEvent } from "react";
+
+import { cn } from "../lib/utils";
+import type {
+  ApplyColorScheme,
+  BridgeImageRef,
+  BridgePressableRef,
+  BridgeStyle,
+  BridgeTextRef,
+  BridgeTextInputRef,
+  BridgeViewRef,
+  ImageProps,
+  PressableProps,
+  TextProps,
+  TextInputProps,
+  ViewProps,
+} from "./types";
+
+// 공유 타입 전량 재수출 — 소비자는 @unikit-bridge/ui/primitives에서 타입까지 한 번에 import
+export type * from "./types";
+
+// ---------------------------------------------------------------------------
+// View → <div> — RN View 기본값(display:flex, flexDirection:column)을
+// 기본 클래스로 재현한다. 충돌 시 tailwind-merge(cn)이 방향 유틸리티를 정리한다.
+// ---------------------------------------------------------------------------
+const View = forwardRef<BridgeViewRef, ViewProps>(
+  (
+    { className, style, children, nativeID, testID, accessibilityLabel, accessibilityRole, ...rest },
+    ref,
+  ) => (
+    <div
+      ref={ref as React.Ref<HTMLDivElement>}
+      id={nativeID}
+      data-testid={testID}
+      role={accessibilityRole}
+      aria-label={accessibilityLabel}
+      className={cn("flex flex-col", className)}
+      style={style as React.CSSProperties}
+      {...rest}
+    >
+      {children}
+    </div>
+  ),
+);
+View.displayName = "View";
+
+// ---------------------------------------------------------------------------
+// Text → <span>
+// ---------------------------------------------------------------------------
+const Text = forwardRef<BridgeTextRef, TextProps>(
+  (
+    { className, style, children, nativeID, testID, onPress, accessibilityLabel, accessibilityRole, ...rest },
+    ref,
+  ) => (
+    <span
+      ref={ref as React.Ref<HTMLSpanElement>}
+      id={nativeID}
+      data-testid={testID}
+      role={accessibilityRole}
+      aria-label={accessibilityLabel}
+      className={className}
+      style={style as React.CSSProperties}
+      onClick={onPress}
+      {...rest}
+    >
+      {children}
+    </span>
+  ),
+);
+Text.displayName = "Text";
+
+// ---------------------------------------------------------------------------
+// Pressable → <button type="button">
+// disabled는 네이티브 속성으로 전달돼 CSS :disabled/disabled: 변형과 포커스·클릭
+// 차단이 함께 동작한다. active: 변형은 브라우저 :active와 대응한다.
+// ---------------------------------------------------------------------------
+const Pressable = forwardRef<BridgePressableRef, PressableProps>(
+  (
+    {
+      className,
+      style,
+      children,
+      onPress,
+      disabled,
+      accessibilityLabel,
+      accessibilityRole,
+      nativeID,
+      testID,
+      hitSlop: _hitSlop,
+      ...rest
+    },
+    ref,
+  ) => (
+    <button
+      ref={ref as React.Ref<HTMLButtonElement>}
+      type="button"
+      id={nativeID}
+      data-testid={testID}
+      className={className}
+      style={style as React.CSSProperties}
+      onClick={onPress}
+      disabled={disabled}
+      aria-label={accessibilityLabel}
+      role={accessibilityRole}
+      {...rest}
+    >
+      {children}
+    </button>
+  ),
+);
+Pressable.displayName = "Pressable";
+
+// ---------------------------------------------------------------------------
+// TextInput → <input>
+// ---------------------------------------------------------------------------
+const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
+  (
+    {
+      className,
+      style,
+      value,
+      defaultValue,
+      placeholder,
+      editable,
+      disabled,
+      onChangeText,
+      nativeID,
+      testID,
+      accessibilityLabelledBy,
+      autoFocus,
+      secureTextEntry,
+      inputMode,
+      multiline,
+      ...rest
+    },
+    ref,
+  ) => {
+    const handleChange = (
+      event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ) => {
+      onChangeText?.(event.target.value);
+    };
+    // multiline → <textarea>(웹 표준 여러 줄 입력). 나머지 계약은 <input>과 동일.
+    if (multiline) {
+      return (
+        <textarea
+          ref={ref as React.Ref<HTMLTextAreaElement>}
+          id={nativeID}
+          data-testid={testID}
+          aria-labelledby={accessibilityLabelledBy}
+          className={className}
+          style={style as React.CSSProperties}
+          value={value}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={editable === false}
+          autoFocus={autoFocus}
+          inputMode={inputMode}
+          onChange={handleChange}
+          {...rest}
+        />
+      );
+    }
+    return (
+      <input
+        ref={ref as React.Ref<HTMLInputElement>}
+        id={nativeID}
+        data-testid={testID}
+        aria-labelledby={accessibilityLabelledBy}
+        className={className}
+        style={style as React.CSSProperties}
+        value={value}
+        defaultValue={defaultValue}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={editable === false}
+        autoFocus={autoFocus}
+        type={secureTextEntry ? "password" : undefined}
+        inputMode={inputMode}
+        onChange={handleChange}
+        {...rest}
+      />
+    );
+  },
+);
+TextInput.displayName = "TextInput";
+
+// ---------------------------------------------------------------------------
+// Image → <img> — 원격 {uri} 소스를 src로 푼다. 정적 require() 소스는
+// 네이티브 전용 기능이라 웹 계약에 없다.
+// ---------------------------------------------------------------------------
+const Image = forwardRef<BridgeImageRef, ImageProps>(
+  (
+    {
+      className,
+      style,
+      source,
+      alt = "",
+      onError,
+      accessibilityLabel, // 웹은 alt가 스크린리더 텍스트 표준
+      nativeID,
+      testID,
+      ...rest
+    },
+    ref,
+  ) => (
+    <img
+      ref={ref as React.Ref<HTMLImageElement>}
+      id={nativeID}
+      data-testid={testID}
+      src={source.uri}
+      alt={alt || accessibilityLabel}
+      loading="lazy"
+      className={className}
+      style={style as React.CSSProperties}
+      onError={onError}
+      {...rest}
+    />
+  ),
+);
+Image.displayName = "Image";
+
+// ---------------------------------------------------------------------------
+// 테마 바인딩
+// ---------------------------------------------------------------------------
+/** 색 스킴 → 문서 루트의 .dark 클래스(표준 Tailwind dark 변형 — @custom-variant dark) */
+const applyColorScheme: ApplyColorScheme = (colorScheme) => {
+  document.documentElement.classList.toggle("dark", colorScheme === "dark");
+};
+
+export { View, Text, Pressable, TextInput, Image, applyColorScheme };

package/src/components/accordion.tsx

@@ -0,0 +1,231 @@
+// Accordion — shadcn/ui(new-york-v4) accordion.tsx 유니버설 포팅 (사이클 30, T-3b).
+// 원본: shadcn-ref/src/accordion/accordion.tsx — radix Accordion 엔진을 제거하고
+// 전개 상태는 React state + context로 직접 관리한다(collapsible.tsx의 다중 항목
+// 확장 구조). 원본의 data-state·셀렉터 클래스는 조건부 클래스·글리프 교체로 전개.
+//
+// 포팅 판단(원본 대비 차이):
+// - ChevronDown 아이콘 → 글리프 Text(닫힘 ⌄ / 펼침 ⌃ 교체). 원본의 회전 전이
+//   애니메이션은 상실(로드맵) — 글자 교체로 상태를 즉시 표시한다.
+// - 항목 구분선의 마지막 항목 제외(last 변형)는 위치 셀렉터라 네이티브 재현 불가
+//   — 제거. 마지막 항목 하단선 제거는 사용처 className 오버라이드로 한다.
+// - 콘텐츠 전이 애니메이션 미지원 — value 일치 시에만 마운트(즉시 전환).
+//   원본의 이중 뷰(애니메이션용 바깥쪽 + 패딩 안쪽)는 애니메이션 상실로 한 벌로
+//   통합하고 사용처 className은 같은 패딩 토큰 위에 병합된다.
+// - single 모드의 collapsible은 기본 true(shadcn 관용 — 원본 radix 기본값은 false).
+// - aria-controls ↔ 콘텐츠 nativeID를 루트 useId 토대로 결정적으로 연결한다.
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type BridgePressableRef,
+  type BridgeViewRef,
+  type PressableProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+
+import { cn } from "../lib/utils";
+
+type AccordionContextValue = {
+  type: "single" | "multiple";
+  collapsible: boolean;
+  openItems: string[];
+  toggleItem: (value: string) => void;
+  /** 트리거 aria-controls ↔ 콘텐츠 nativeID 연결용 토대 ID */
+  baseId: string;
+};
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext(component: string): AccordionContextValue {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(`<${component}>는 <Accordion> 안에서 사용해야 합니다.`);
+  }
+  return ctx;
+}
+
+type AccordionItemContextValue = {
+  value: string;
+  open: boolean;
+  toggle: () => void;
+  contentId: string;
+};
+
+const AccordionItemContext = createContext<AccordionItemContextValue | null>(
+  null,
+);
+
+function useAccordionItemContext(
+  component: string,
+): AccordionItemContextValue {
+  const ctx = useContext(AccordionItemContext);
+  if (!ctx) {
+    throw new Error(`<${component}>는 <AccordionItem> 안에서 사용해야 합니다.`);
+  }
+  return ctx;
+}
+
+// 콘텐츠 패널 ID — value의 공백은 ID에 쓸 수 없어 치환.
+function contentIdOf(baseId: string, value: string) {
+  return `${baseId}-accordion-content-${value.replace(/\s+/g, "-")}`;
+}
+
+function toItems(value: string | string[] | undefined): string[] {
+  if (value === undefined) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+export type AccordionProps = ViewProps & {
+  type?: "single" | "multiple";
+  /** single 모드에서 펼친 항목 다시 접기 허용 여부(기본 true — shadcn 관용) */
+  collapsible?: boolean;
+  /** single 모드에서는 문자열 1개, multiple 모드에서는 펼친 value 배열 */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+};
+
+const Accordion = forwardRef<BridgeViewRef, AccordionProps>(
+  (
+    { type = "single", collapsible = true, value, defaultValue, onValueChange, children, ...props },
+    ref,
+  ) => {
+    // 비제어 상태 — 제어(value 지정)면 무시된다.
+    const [internalItems, setInternalItems] = useState(() =>
+      toItems(defaultValue),
+    );
+    const openItems = value !== undefined ? toItems(value) : internalItems;
+    const toggleItem = (itemValue: string) => {
+      const isOpen = openItems.includes(itemValue);
+      let next: string[];
+      if (isOpen) {
+        // single 비접이형(collapsible=false)은 마지막 펼침 항목을 유지한다.
+        if (type === "single" && !collapsible) return;
+        next = openItems.filter((v) => v !== itemValue);
+      } else {
+        next =
+          type === "single"
+            ? [itemValue]
+            : [...openItems, itemValue];
+      }
+      if (value === undefined) setInternalItems(next);
+      if (type === "single") onValueChange?.(next[0] ?? "");
+      else onValueChange?.(next);
+    };
+    const baseId = useId();
+    return (
+      <AccordionContext.Provider
+        value={{ type, collapsible, openItems, toggleItem, baseId }}
+      >
+        <View ref={ref} {...props}>
+          {children}
+        </View>
+      </AccordionContext.Provider>
+    );
+  },
+);
+Accordion.displayName = "Accordion";
+
+export type AccordionItemProps = ViewProps & {
+  value: string;
+};
+
+const AccordionItem = forwardRef<BridgeViewRef, AccordionItemProps>(
+  ({ value, className, children, ...props }, ref) => {
+    const accordion = useAccordionContext("AccordionItem");
+    const open = accordion.openItems.includes(value);
+    return (
+      <AccordionItemContext.Provider
+        value={{
+          value,
+          open,
+          toggle: () => accordion.toggleItem(value),
+          contentId: contentIdOf(accordion.baseId, value),
+        }}
+      >
+        <View
+          ref={ref}
+          className={cn("border-b border-border", className)}
+          {...props}
+        >
+          {children}
+        </View>
+      </AccordionItemContext.Provider>
+    );
+  },
+);
+AccordionItem.displayName = "AccordionItem";
+
+export type AccordionTriggerProps = PressableProps & {
+  // 함수형 children은 내부 Text 래핑 구조와 양립하지 않아 문자열 children 권장.
+  children?: ReactNode;
+};
+
+const AccordionTrigger = forwardRef<BridgePressableRef, AccordionTriggerProps>(
+  ({ className, children, disabled, onPress, ...props }, ref) => {
+    const item = useAccordionItemContext("AccordionTrigger");
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        aria-expanded={item.open}
+        aria-controls={item.contentId}
+        disabled={disabled}
+        onPress={() => {
+          item.toggle();
+          onPress?.();
+        }}
+        className={cn(
+          "flex-row items-start justify-between gap-4 rounded-md py-4 web:transition-all",
+          "web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background",
+          disabled && "web:pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {/* 이중 지정: 전경색·밑줄은 내부 Text에(네이티브는 색 상속 불가) */}
+        <Text className="flex-1 font-sans text-left text-sm font-medium text-foreground web:hover:underline">
+          {children}
+        </Text>
+        {/* 펼침 표시 글리프 — 원본 svg 회전 대신 글자 교체(⌄ 닫힘 / ⌃ 펼침) */}
+        <View aria-hidden>
+          <Text className="text-base text-muted-foreground web:select-none">
+            {item.open ? "⌃" : "⌄"}
+          </Text>
+        </View>
+      </Pressable>
+    );
+  },
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export type AccordionContentProps = ViewProps;
+
+const AccordionContent = forwardRef<BridgeViewRef, AccordionContentProps>(
+  ({ className, children, nativeID, ...props }, ref) => {
+    const item = useAccordionItemContext("AccordionContent");
+    // 펼침 항목만 렌더 — 마운트/언마운트 방식(애니메이션 없음).
+    if (!item.open) return null;
+    return (
+      <View
+        ref={ref}
+        nativeID={nativeID ?? item.contentId}
+        className={cn("overflow-hidden pb-4 pt-0", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };