@unikit-bridge/ui 0.0.0-stage → 0.1.0

package/src/bridge/web.tsx

@@ -0,0 +1,166 @@
+/**
+ * 웹 브리지 — 표준 Tailwind CSS v4 소비자용(Next.js/Vite 등).
+ *
+ * 같은 className 문자열을 DOM 요소에 그대로 얹는다. 스타일링 엔진이 별도로
+ * 필요하지 않다 — 소비자 앱의 Tailwind CSS가 클래스를 생성하고 브라우저가
+ * 적용한다(hover/focus-visible/:active 등 웹 전용 변형도 CSS 표준 동작).
+ *
+ * RN 프리미티브 관용 프로퍼티는 DOM 속성으로 치환된다:
+ *   onPress→onClick · accessibilityLabel→aria-label · nativeID→id ·
+ *   accessibilityLabelledBy→aria-labelledby · editable→readOnly ·
+ *   secureTextEntry→type="password" · onChangeText→onChange(value 추출)
+ * hitSlop은 웹에서 무시된다(포인터 정밀도가 높아 불필요).
+ */
+import { forwardRef, type ChangeEvent } from "react";
+
+import { cn } from "../lib/utils";
+import type {
+  ApplyColorScheme,
+  BridgePressableRef,
+  BridgeTextRef,
+  BridgeTextInputRef,
+  BridgeViewRef,
+  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, children, nativeID, testID, ...rest }, ref) => (
+    <div
+      ref={ref as React.Ref<HTMLDivElement>}
+      id={nativeID}
+      data-testid={testID}
+      className={cn("flex flex-col", className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  ),
+);
+View.displayName = "View";
+
+// ---------------------------------------------------------------------------
+// Text → <span>
+// ---------------------------------------------------------------------------
+const Text = forwardRef<BridgeTextRef, TextProps>(
+  ({ className, children, nativeID, testID, onPress, ...rest }, ref) => (
+    <span
+      ref={ref as React.Ref<HTMLSpanElement>}
+      id={nativeID}
+      data-testid={testID}
+      className={className}
+      onClick={onPress}
+      {...rest}
+    >
+      {children}
+    </span>
+  ),
+);
+Text.displayName = "Text";
+
+// ---------------------------------------------------------------------------
+// Pressable → <button type="button">
+// disabled는 네이티브 속성으로 전달돼 CSS :disabled/disabled: 변형과 포커스·클릭
+// 차단이 함께 동작한다. active: 변형은 브라우저 :active와 대응한다.
+// ---------------------------------------------------------------------------
+const Pressable = forwardRef<BridgePressableRef, PressableProps>(
+  (
+    {
+      className,
+      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}
+      onClick={onPress}
+      disabled={disabled}
+      aria-label={accessibilityLabel}
+      role={accessibilityRole}
+      {...rest}
+    >
+      {children}
+    </button>
+  ),
+);
+Pressable.displayName = "Pressable";
+
+// ---------------------------------------------------------------------------
+// TextInput → <input>
+// ---------------------------------------------------------------------------
+const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      placeholder,
+      editable,
+      disabled,
+      onChangeText,
+      nativeID,
+      testID,
+      accessibilityLabelledBy,
+      autoFocus,
+      secureTextEntry,
+      inputMode,
+      ...rest
+    },
+    ref,
+  ) => {
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      onChangeText?.(event.target.value);
+    };
+    return (
+      <input
+        ref={ref as React.Ref<HTMLInputElement>}
+        id={nativeID}
+        data-testid={testID}
+        aria-labelledby={accessibilityLabelledBy}
+        className={className}
+        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";
+
+// ---------------------------------------------------------------------------
+// 테마 바인딩
+// ---------------------------------------------------------------------------
+/** 색 스킴 → 문서 루트의 .dark 클래스(표준 Tailwind dark 변형 — @custom-variant dark) */
+const applyColorScheme: ApplyColorScheme = (colorScheme) => {
+  document.documentElement.classList.toggle("dark", colorScheme === "dark");
+};
+
+export { View, Text, Pressable, TextInput, applyColorScheme };

package/src/components/badge.tsx

@@ -0,0 +1,65 @@
+// Badge — docs/sdd/02-design.md v2 §3.5 그대로.
+// 이중 지정 원칙(§0.5): 배경·테두리는 View, 전경색은 내부 Text에 명시(Button과 동일 패턴).
+import { forwardRef } from "react";
+import {
+  Text,
+  View,
+  type BridgeTextRef,
+  type BridgeViewRef,
+  type TextProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// View(컨테이너)
+const badgeVariants = cva(
+  "flex flex-row items-center rounded-md border px-2.5 py-0.5",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary",
+        secondary: "border-transparent bg-secondary",
+        destructive: "border-transparent bg-destructive",
+        outline: "border-border",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// 내부 Text
+const badgeTextVariants = cva("font-sans text-xs font-semibold", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type BadgeProps = ViewProps &
+  VariantProps<typeof badgeVariants>;
+
+const Badge = forwardRef<BridgeViewRef, BadgeProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    >
+      <Text className={cn(badgeTextVariants({ variant }))}>{children}</Text>
+    </View>
+  ),
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants, badgeTextVariants };

package/src/components/button.tsx

@@ -0,0 +1,106 @@
+// Button — docs/sdd/02-design.md v2 §3.1 그대로.
+// 이중 지정 원칙(§0.5): 배경·테두리는 Pressable, 전경색·밑줄은 내부 Text에 명시.
+// (DOM 브리지에서도 span은 부모 상속이 막히므로 전경색 명시가 양쪽에 필요)
+import { forwardRef, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  type BridgePressableRef,
+  type PressableProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// Pressable(컨테이너) — base + focus-visible(전역)은 §3.1 표의 문자열을 그대로 사용.
+const buttonVariants = cva(
+  "flex flex-row items-center justify-center gap-2 rounded-md web:select-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary web:hover:bg-primary/90 active:bg-primary/90",
+        secondary: "bg-secondary web:hover:bg-secondary/80 active:bg-secondary/80",
+        destructive:
+          "bg-destructive web:hover:bg-destructive/90 active:bg-destructive/90",
+        outline:
+          "border border-input bg-background web:hover:bg-accent active:bg-accent",
+        ghost: "web:hover:bg-accent active:bg-accent",
+        link: "",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+// 내부 Text — 변형별 전경색. active:* 눌림 전파 — 네이티브는 uniwind(Pressable 상태), 웹은 <button>의 :active.
+const buttonTextVariants = cva(
+  "font-sans text-sm font-medium web:whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        secondary: "text-secondary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "text-foreground active:text-accent-foreground",
+        ghost: "text-foreground active:text-accent-foreground",
+        link: "text-primary underline underline-offset-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// 터치 타깃 44px 보정(§3.1): hitSlop = max(0, (44 − 시각높이px) / 2) — 각 방향 px.
+const HIT_SLOP = {
+  sm: 4,
+  default: 2,
+  lg: 0,
+  icon: 2,
+} as const;
+
+// Pressable의 함수형 children((state) => ReactNode)은 내부 Text 래핑 구조(§3.1)와
+// 양립하지 않으므로 children은 ReactNode로 한정한다(v0.1은 문자열 children 사용).
+export type ButtonProps = PressableProps &
+  VariantProps<typeof buttonVariants> & {
+    children?: ReactNode;
+  };
+
+const Button = forwardRef<BridgePressableRef, ButtonProps>(
+  (
+    { className, variant, size, disabled, hitSlop, children, ...props },
+    ref,
+  ) => {
+    const resolvedSize = size ?? "default";
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        disabled={disabled}
+        aria-disabled={disabled ? true : undefined}
+        hitSlop={hitSlop ?? HIT_SLOP[resolvedSize]}
+        className={cn(
+          buttonVariants({ variant, size }),
+          disabled && "web:pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <Text className={cn(buttonTextVariants({ variant }))}>{children}</Text>
+      </Pressable>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants, buttonTextVariants };

package/src/components/card.tsx

@@ -0,0 +1,112 @@
+// Card — docs/sdd/02-design.md v2 §3.2 그대로. 하위 컴포넌트 5종 포함 총 6종 export.
+// Card의 text-card-foreground는 §0.5(상속 차단)로 자식 Text에 닿지 않아 클래스에서 제외됨.
+// CardContent 안의 본문 텍스트는 사용처에서 색·폰트를 명시한다(§1.2 표기 규칙).
+import { forwardRef } from "react";
+import {
+  Text,
+  View,
+  type BridgeTextRef,
+  type BridgeViewRef,
+  type TextProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const cardVariants = cva("rounded-xl border border-border bg-card shadow-sm");
+const cardHeaderVariants = cva("flex flex-col gap-1.5 p-6");
+const cardTitleVariants = cva(
+  "font-sans text-foreground text-2xl web:tracking-tight font-semibold",
+);
+const cardDescriptionVariants = cva("font-sans text-sm text-muted-foreground");
+const cardContentVariants = cva("p-6 pt-0");
+const cardFooterVariants = cva("flex-row items-center gap-2 p-6 pt-0");
+
+export type CardProps = ViewProps;
+export type CardHeaderProps = ViewProps;
+export type CardTitleProps = TextProps;
+export type CardDescriptionProps = TextProps;
+export type CardContentProps = ViewProps;
+export type CardFooterProps = ViewProps;
+
+const Card = forwardRef<BridgeViewRef, CardProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardVariants(), className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<BridgeViewRef, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardHeaderVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<BridgeTextRef, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(cardTitleVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<BridgeTextRef, CardDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(cardDescriptionVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<BridgeViewRef, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardContentVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<BridgeViewRef, CardFooterProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardFooterVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+};

package/src/components/input.tsx

@@ -0,0 +1,39 @@
+// Input — docs/sdd/02-design.md v2 §3.3 그대로.
+// forwardRef로 입력 인스턴스(focus()·blur())를 노출 — §3.4 Label의
+// onPress → ref.focus() 라벨-입력창 클릭 연결용.
+import { forwardRef } from "react";
+import {
+  TextInput,
+  type BridgeTextInputRef,
+  type TextInputProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const inputVariants = cva(
+  "font-sans h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base text-foreground placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background web:focus-visible:border-ring disabled:opacity-50",
+);
+
+// InputProps — TextInputProps 그대로. 웹 관용 disabled의 치환 계약
+// (native: 아래 editable={false} · web: input[disabled] + aria-disabled)은
+// bridge/types.ts의 disabled 주석이 단일 출처다.
+export type InputProps = TextInputProps;
+
+const Input = forwardRef<BridgeTextInputRef, InputProps>(
+  ({ className, disabled, editable, ...props }, ref) => (
+    <TextInput
+      ref={ref}
+      editable={disabled ? false : editable}
+      aria-disabled={disabled ? true : undefined}
+      className={cn(inputVariants(), className)}
+      {...props}
+      // 브리지 계약에는 editable 치환으로 이미 반영됐으므로 disabled는 그대로 전달
+      // (웹 input[disabled] · RN은 위 editable={false}가 차단)
+      disabled={disabled}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };

package/src/components/label.tsx

@@ -0,0 +1,33 @@
+// Label — docs/sdd/02-design.md v2 §3.4 그대로.
+//
+// 입력창 연결 방법(§3.4 — RN 프리미티브만으로 <label for>를 렌더할 수 없는 대안):
+// 1. (필수) Label에 nativeID를 지정하고 대상 Input에 accessibilityLabelledBy로 같은 값을 전달
+//    예: <Label nativeID="unikit-label-name">이름</Label>
+//        <Input accessibilityLabelledBy="unikit-label-name" ... />
+//    → 웹 DOM에서 id ↔ aria-labelledby로 연결된다.
+// 2. (권장) Label의 onPress에서 입력창 ref의 focus()를 호출하면 클릭→포커스가 이어진다.
+//    (Input은 forwardRef로 focus() 노출)
+import { forwardRef } from "react";
+import { Text, type BridgeTextRef, type TextProps } from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const labelVariants = cva(
+  "font-sans text-sm font-medium leading-none text-foreground",
+);
+
+export type LabelProps = TextProps;
+
+const Label = forwardRef<BridgeTextRef, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(labelVariants(), className)}
+      {...props}
+    />
+  ),
+);
+Label.displayName = "Label";
+
+export { Label, labelVariants };

package/src/index.ts

@@ -0,0 +1,45 @@
+// @unikit-bridge/ui 공개 API (T-6 완성)
+export { cn } from "./lib/utils";
+
+export {
+  Button,
+  buttonVariants,
+  buttonTextVariants,
+  type ButtonProps,
+} from "./components/button";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+  type CardProps,
+  type CardHeaderProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
+  type CardFooterProps,
+} from "./components/card";
+
+export { Input, inputVariants, type InputProps } from "./components/input";
+
+export { Label, labelVariants, type LabelProps } from "./components/label";
+
+export {
+  Badge,
+  badgeVariants,
+  badgeTextVariants,
+  type BadgeProps,
+} from "./components/badge";
+
+// 테마(T-5가 packages/unikit/src/theme/ 을 병렬 생성) — 디렉터리 존재 여부와
+// 무관하게 이 라인은 항상 유지한다(T-6 지시).
+export * from "./theme";

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** shadcn/ui 표준 cn 유틸 — clsx(조건 결합) + tailwind-merge(클래스 충돌 병합) */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+// UniKit 테마 공개 내보내기 — tokens(단일 출처) + Provider.
+// src/index.ts(T-6 소유)의 `export * from "./theme";`가 이 파일을 가리킨다.
+export * from "./tokens";
+export * from "./provider";