@petnow/ui 5.3.1 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # Changelog
 
+## 6.0.0
+
+### Breaking
+
+- **`Select`** is no longer a native `<select>`. It is built on Radix Select, like the Select in
+  petify-admin-console: the trigger keeps the `TextField` look, and the options open in a panel below it
+  (portal to `body`, 8px radius, border, shadow) with a check in front of the picked option and the
+  picked option in the accent color. Keyboard (arrows, Enter, Escape, typeahead) and ARIA come from Radix.
+  - `ref` reaches the trigger `<button>` (`HTMLButtonElement`), and the rest props are button attributes,
+    not `<select>` attributes. `name`, `form` and `required` still work: inside a form, Radix renders a
+    hidden `<select>`, so the value reaches `FormData` and browser validation.
+  - Mobile browsers show this panel instead of the system picker.
+  - An option value cannot be `""`; `""` means nothing is picked and shows `placeholder`. Options with
+    `""` are left out. Once picked, the user cannot go back to "nothing picked"; the native `<select>`
+    let them pick the placeholder again. Set `value` to `""` in code if a form needs that.
+  - A form `reset` restores `defaultValue` (or nothing) on screen and in the hidden `<select>`; a
+    controlled `Select` gets it through `onChange`.
+- **`TextFieldSelect`** is removed. It was only a button that called `onPress`, without a list. Use
+  `Select` (or `Combobox` to search). See [`docs/migration/v5-to-v6.md`](docs/migration/v5-to-v6.md).
+
+### Changes
+
+- `Combobox` opens its list in the same panel as `Select`, through a Radix Popover portal, so a parent with
+  `overflow: hidden` or a scroll container no longer clips it, and the list flips above the input when
+  there is no room below. Its options use the `Select` row (left check slot, accent color for the picked
+  option). The list is in the DOM only while it is open, so the input and toggle set `aria-controls` only
+  then. Escape on an open list closes only the list, not a surrounding dialog.
+- TextField stories no longer show select-like fields: the `SelectField` and `SelectFieldSmallError`
+  stories are removed, and `NormalWithErrorAndCounter` no longer shows a dropdown chevron.
+
+## 5.4.0
+
+### Added
+
+- **React Native `Chip`**: Expo apps import it from the same path, `@petnow/ui/chip`. The export has a
+  `react-native` condition, which the React Native and Expo Metro default config (`getDefaultConfig`)
+  asserts for iOS and Android, so Metro resolves `dist/native/chip.js`
+  (`Pressable` + `Text`, styled by the app's Uniwind) while Next.js and Vite keep the web file. Its props
+  match the web Chip (`label`, `icon`, `selected`, `disabled`, `onPress`, `className`) plus `Pressable`
+  props. `icon` also receives `color`, `width` and `height` resolved from the icon token, so
+  `react-native-svg` icons drawn with `currentColor` follow the theme. Checked in petify-app (Expo 54,
+  React Native 0.81, Uniwind 1.13) on the iOS simulator and Android emulator.
+- **`@petnow/ui/petnow-design-system-v1.uniwind.css`**: the v1 tokens as a Uniwind theme for Expo apps,
+  generated from `petnow-design-system-v1.css` by `pnpm generate:native-theme`. It defines the Uniwind
+  themes `light` (Petnow), `dark` (same values as light) and `petify` (switch with
+  `Uniwind.setTheme("petify")`; `extraThemes: ["petify"]` in `withUniwindConfig` is required, or the CSS
+  fails to compile), the
+  typography utilities with a Pretendard face per weight (`Pretendard-Regular`, `-Medium`, `-Bold`) and
+  without `line-height: normal`, and registers `dist/native` as a Tailwind source. Setup is in the README
+  (Expo 앱에서 사용).
+- `react-native` (>= 0.81) and `uniwind` (^1.13) are optional peer dependencies.
+
+### Changes
+
+- `tailwind.css` skips `dist/native` (`@source not`), so web builds do not generate classes used only by
+  the native components.
+- `Chip` keeps its web output (classes, snapshot). Its props are now `ChipBaseProps` (`Chip.types.ts`)
+  plus button attributes, with the classes shared with the native file in `Chip.variants.ts`.
+
+### Fixes
+
+- `bg-surface-base-neutral-1-alpha-1` now has a value: white at 60% (`#ffffff99`) in both themes, the
+  value petify-app already uses. `petnow-design-system-v1.css` mapped it in `@theme inline` but never
+  declared `--surface-base-neutral-1-alpha-1`, so the class drew nothing on the web and the Uniwind theme
+  left it out.
+
 ## 5.3.1
 
 ### Fixes

package/README.md

@@ -1,6 +1,7 @@
 # @petnow/ui
 
-사내 웹 프로젝트에서 쓰는 공용 컴포넌트 라이브러리다. React 19와 Tailwind CSS v4를 쓰는 소비 레포를 전제로 한다.
+사내 웹 프로젝트와 Expo 앱에서 쓰는 공용 컴포넌트 라이브러리다. 웹은 React 19와 Tailwind CSS v4, Expo 앱은
+Uniwind 1.x(Tailwind CSS v4)를 쓰는 소비 레포를 전제로 한다.
 
 - Storybook: https://components.petnow.co/
 - 변경 내역: [CHANGELOG.md](CHANGELOG.md)
@@ -46,18 +47,93 @@
 
 Petify 테마는 상위 요소에 `petify` 클래스를 붙이면 v1 시맨틱 컬러가 바뀐다.
 
+## Expo 앱에서 사용
+
+네이티브 구현(`<Component>.native.tsx`)이 있는 컴포넌트는 웹과 같은 경로로 import한다. 지금은 `Chip`
+(`@petnow/ui/chip`)이다. Expo·React Native의 Metro 기본 설정(`getDefaultConfig`)은 iOS·Android 번들에서
+`package.json` `exports`의 `react-native` 조건을 쓰므로 `dist/native/`의 네이티브 구현을 가져오고, Next.js·Vite는
+이 조건을 쓰지 않아 웹 구현을 가져온다. 루트 경로(`@petnow/ui`)와 deprecated `@petnow/ui/v1/*` 경로는 웹 전용이다.
+Expo web 번들은 확인하지 않았다. petify-app(Expo 54, React Native 0.81, Uniwind 1.13)의 iOS 시뮬레이터와
+Android 에뮬레이터에서 확인했다.
+
+1. 설치. `react-native`(0.81 이상)와 `uniwind`(1.13 이상)는 optional peer dependency다.
+
+   ```sh
+   bun add @petnow/ui
+   ```
+
+2. Metro를 Uniwind로 감싼다. 패키지 테마 CSS가 `@variant petify`를 정의하므로 `extraThemes: ["petify"]`는
+   필수다. 빠지면 CSS 컴파일이 `Cannot use @variant with unknown variant: petify`로 실패한다.
+
+   ```js
+   // metro.config.js
+   const { getDefaultConfig } = require("expo/metro-config");
+   const { withUniwindConfig } = require("uniwind/metro");
+
+   module.exports = withUniwindConfig(getDefaultConfig(__dirname), {
+     cssEntryFile: "./global.css",
+     extraThemes: ["petify"],
+   });
+   ```
+
+3. Uniwind CSS 엔트리에서 Tailwind와 Uniwind 다음에 패키지 테마를 import한다.
+
+   ```css
+   /* global.css */
+   @import "tailwindcss";
+   @import "uniwind";
+   @import "@petnow/ui/petnow-design-system-v1.uniwind.css";
+   ```
+
+   `petnow-design-system-v1.uniwind.css`는 `petnow-design-system-v1.css`에서 생성한 파일이다. v1 참조색·시맨틱
+   컬러·타이포그래피 유틸리티와 Uniwind 테마 `light`(Petnow), `dark`(아직 light와 같은 값), `petify`를 정의하고,
+   패키지의 `dist/native`를 `@source`로 등록한다. 웹과 같이 `red`·`green` 등 Tailwind 기본 팔레트와 이름이 겹치는
+   참조색은 `--color-*`로 매핑하지 않는다. 네이티브에서는 `.petify` 클래스가 동작하지 않는다.
+
+4. 테마는 앱 전체에 적용된다. Petify 테마로 바꾼다.
+
+   ```ts
+   import { Uniwind } from "uniwind";
+
+   Uniwind.setTheme("petify");
+   ```
+
+5. 타이포그래피 유틸리티(`text-body-14-medium` 등)는 굵기별로 `font-family: Pretendard-Regular`,
+   `Pretendard-Medium`, `Pretendard-Bold`를 지정한다. 앱이 Pretendard를 이 이름으로 로드해야 한다.
+
+   ```ts
+   const [fontsLoaded] = useFonts({
+     "Pretendard-Regular": require("./assets/fonts/Pretendard-Regular.otf"),
+     "Pretendard-Medium": require("./assets/fonts/Pretendard-Medium.otf"),
+     "Pretendard-Bold": require("./assets/fonts/Pretendard-Bold.otf"),
+   });
+   ```
+
+6. 컴포넌트를 쓴다. 타입은 `expo/tsconfig.base`의 `customConditions: ["react-native"]`로 네이티브 선언
+   파일에서 풀린다.
+
+   ```tsx
+   import { Chip } from "@petnow/ui/chip";
+
+   <Chip label="전체" selected={selected} onPress={() => setSelected(true)} icon={FilterIcon} />;
+   ```
+
+   네이티브 `Chip`의 `icon`은 `className`과 함께 토큰에서 풀어 낸 `color`·`width`·`height`를 받는다.
+   `react-native-svg`의 `SvgProps`를 받는 아이콘(`fill="currentColor"`)이면 그대로 동작한다.
+
 ## 구조
 
 ```
 @petnow/ui
 ├── tailwind.css                  - 소비 레포가 import하는 Tailwind 엔트리 (v0 토큰은 deprecated)
 ├── petnow-design-system-v1.css   - v1 토큰(ref·시맨틱 컬러, 타이포그래피)
+├── petnow-design-system-v1.uniwind.css - Expo 앱용 Uniwind 테마 (생성 파일, `pnpm generate:native-theme`)
 ├── index.ts                      - 패키지 엔트리
 ├── src
 │   ├── components
 │   │   ├── ui    - 내부 전용 primitive (export하지 않음)
 │   │   ├── icons - 아이콘 (action, static)
-│   │   └── <컴포넌트> - 컴포넌트와 스토리 (badge, checkbox, cta-button, …)
+│   │   └── <컴포넌트> - 컴포넌트와 스토리 (badge, checkbox, cta-button, …), 네이티브 구현은 *.native.tsx
 │   ├── styles/components.css - dist/index.css로 복사되는 일반 CSS
 │   ├── index.css             - Storybook 엔트리
 │   └── utils
@@ -76,9 +152,12 @@ Node 버전은 `mise.toml`로 고정한다. pnpm은 `package.json`의 `packageMa
 ```sh
 mise install
 pnpm i
-pnpm storybook        # http://localhost:6006
+pnpm storybook:native # http://localhost:6007, 네이티브 컴포넌트(react-native-web). 6006보다 먼저 띄운다
+pnpm storybook        # http://localhost:6006, 6007이 떠 있으면 "React Native"로 합성
 pnpm jest
-pnpm build            # tsc + vite 라이브러리 빌드 + dist/index.css 복사
+pnpm build            # tsc + vite 라이브러리 빌드(웹, dist/native) + dist/index.css 복사
+pnpm check:dist && pnpm check:dist:native
+pnpm generate:native-theme   # petnow-design-system-v1.css를 바꾼 뒤 Uniwind 테마 재생성
 ```
 
 ## 배포
@@ -88,5 +167,6 @@ npm Trusted Publishing(OIDC)으로 배포한다. GitHub Actions가 발급하는
 
 1. PR을 만들어 main에 merge한다. PR에서는 테스트, 포맷 검사, 빌드, Storybook 빌드가 돈다.
 2. semver에 맞춰 `v*` 태그를 push한다(예: `v5.0.0`). `.github/workflows/publish-npm.yaml`이 태그 버전으로
-   `package.json`을 맞춰 npm에 배포하고, 버전 커밋을 main에 남긴다.
+   `package.json`을 맞춰 npm에 배포하고, 버전 커밋을 main에 남긴 뒤 GitHub Release(본문은 CHANGELOG의
+   해당 버전 절과 PR 목록)를 만든다. 태그를 push하기 전에 CHANGELOG에 `## <버전>` 절을 적는다.
 3. 하위 호환을 깨는 변경은 [CHANGELOG.md](CHANGELOG.md)와 `docs/migration/`에 적는다.

package/dist/Chip-Bu5q0mhe.js

@@ -0,0 +1,53 @@
+"use client";
+import { t as e } from "./TailwindUtil-DiNvXuNl.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { cva as r } from "class-variance-authority";
+//#region src/components/chip/Chip.variants.ts
+var i = "items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]", a = {
+	true: "bg-surface-base-accent-1 border-border-prominent-accent",
+	false: "bg-surface-base-neutral-1 border-border-base-neutral-2"
+}, o = "opacity-40", s = r("text-body-14-medium", {
+	variants: { selected: {
+		true: "text-text-prominent-accent-1",
+		false: "text-text-base-neutral-3"
+	} },
+	defaultVariants: { selected: !1 }
+}), c = r("size-[18px] shrink-0", {
+	variants: { selected: {
+		true: "text-icon-prominent-accent-1",
+		false: "text-icon-base-neutral-3"
+	} },
+	defaultVariants: { selected: !1 }
+}), l = r(`inline-flex ${i} transition-colors duration-200`, {
+	variants: {
+		selected: a,
+		disabled: {
+			true: `${o} pointer-events-none`,
+			false: ""
+		}
+	},
+	defaultVariants: {
+		selected: !1,
+		disabled: !1
+	}
+}), u = ({ className: r, label: i, icon: a, selected: o = !1, disabled: u = !1, onPress: d, onClick: f, type: p = "button", ...m }) => /* @__PURE__ */ n("button", {
+	type: p,
+	className: e(l({
+		selected: o,
+		disabled: u
+	}), r),
+	onClick: (e) => {
+		f?.(e), e.defaultPrevented || d?.();
+	},
+	disabled: u,
+	...m,
+	children: [a && /* @__PURE__ */ t(a, { className: c({ selected: o }) }), /* @__PURE__ */ t("span", {
+		className: s({ selected: o }),
+		children: i
+	})]
+});
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=Chip-Bu5q0mhe.js.map

package/dist/Chip-Bu5q0mhe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-Bu5q0mhe.js","names":[],"sources":["../src/components/chip/Chip.variants.ts","../src/components/chip/Chip.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n// 웹·네이티브 공통 클래스. Uniwind(React Native)에서도 동작하는 유틸리티만 둔다.\n// 플랫폼 전용 클래스(inline-flex, transition, pointer-events 등)는 각 구현 파일에서 더한다.\nexport const chipBaseClassName = \"items-center justify-center gap-1 rounded-full border px-[11px] py-[7px]\";\n\nexport const chipSelectedClassNames = {\n  true: \"bg-surface-base-accent-1 border-border-prominent-accent\",\n  false: \"bg-surface-base-neutral-1 border-border-base-neutral-2\",\n};\n\nexport const chipDisabledClassName = \"opacity-40\";\n\nexport const chipTextVariants = cva(\"text-body-14-medium\", {\n  variants: {\n    selected: {\n      true: \"text-text-prominent-accent-1\",\n      false: \"text-text-base-neutral-3\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n  },\n});\n\nexport const chipIconVariants = cva(\"size-[18px] shrink-0\", {\n  variants: {\n    selected: {\n      true: \"text-icon-prominent-accent-1\",\n      false: \"text-icon-base-neutral-3\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n  },\n});\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport {\n  chipBaseClassName,\n  chipDisabledClassName,\n  chipIconVariants,\n  chipSelectedClassNames,\n  chipTextVariants,\n} from \"./Chip.variants\";\nimport { cn } from \"../../utils/TailwindUtil\";\n\nimport type { ChipBaseProps } from \"./Chip.types\";\n\nexport interface ChipProps\n  extends ChipBaseProps,\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | keyof ChipBaseProps> {}\n\nconst chipVariants = cva(`inline-flex ${chipBaseClassName} transition-colors duration-200`, {\n  variants: {\n    selected: chipSelectedClassNames,\n    disabled: {\n      true: `${chipDisabledClassName} pointer-events-none`,\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    selected: false,\n    disabled: false,\n  },\n});\n\nconst Chip = ({\n  className,\n  label,\n  icon: Icon,\n  selected = false,\n  disabled = false,\n  onPress,\n  onClick,\n  type = \"button\",\n  ...props\n}: ChipProps) => {\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented) {\n      onPress?.();\n    }\n  };\n\n  return (\n    <button\n      type={type}\n      className={cn(chipVariants({ selected, disabled }), className)}\n      onClick={handleClick}\n      disabled={disabled}\n      {...props}\n    >\n      {Icon && <Icon className={chipIconVariants({ selected })} />}\n      <span className={chipTextVariants({ selected })}>{label}</span>\n    </button>\n  );\n};\n\nexport { Chip };\n"],"mappings":";;;;;;AAIA,IAAa,IAAoB,4EAEpB,IAAyB;CACpC,MAAM;CACN,OAAO;AACT,GAEa,IAAwB,cAExB,IAAmB,EAAI,uBAAuB;CACzD,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GAEY,IAAmB,EAAI,wBAAwB;CAC1D,UAAU,EACR,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GCfK,IAAe,EAAI,eAAe,EAAkB,kCAAkC;CAC1F,UAAU;EACR,UAAU;EACV,UAAU;GACR,MAAM,GAAG,EAAsB;GAC/B,OAAO;EACT;CACF;CACA,iBAAiB;EACf,UAAU;EACV,UAAU;CACZ;AACF,CAAC,GAEK,KAAQ,EACZ,cACA,UACA,MAAM,GACN,cAAW,IACX,cAAW,IACX,YACA,YACA,UAAO,UACP,GAAG,QAWD,kBAAC,UAAD;CACQ;CACN,WAAW,EAAG,EAAa;EAAE;EAAU;CAAS,CAAC,GAAG,CAAS;CAC7D,UAZiB,MAA+C;EAGlE,AAFA,IAAU,CAAK,GAEV,EAAM,oBACT,IAAU;CAEd;CAOc;CACV,GAAI;WALN,CAOG,KAAQ,kBAAC,GAAD,EAAM,WAAW,EAAiB,EAAE,YAAS,CAAC,EAAI,CAAA,GAC3D,kBAAC,QAAD;EAAM,WAAW,EAAiB,EAAE,YAAS,CAAC;YAAI;CAAY,CAAA,CACxD"}

package/dist/chip.js

@@ -1,53 +1,3 @@
 "use client";
-import { t as e } from "./TailwindUtil-DiNvXuNl.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import "react";
-import { cva as r } from "class-variance-authority";
-//#region src/components/chip/Chip.tsx
-var i = r("inline-flex items-center justify-center gap-1 rounded-full border px-[11px] py-[7px] transition-colors duration-200", {
-	variants: {
-		selected: {
-			true: "bg-surface-base-accent-1 border-border-prominent-accent",
-			false: "bg-surface-base-neutral-1 border-border-base-neutral-2"
-		},
-		disabled: {
-			true: "opacity-40 pointer-events-none",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		selected: !1,
-		disabled: !1
-	}
-}), a = r("text-body-14-medium", {
-	variants: { selected: {
-		true: "text-text-prominent-accent-1",
-		false: "text-text-base-neutral-3"
-	} },
-	defaultVariants: { selected: !1 }
-}), o = r("size-[18px] shrink-0", {
-	variants: { selected: {
-		true: "text-icon-prominent-accent-1",
-		false: "text-icon-base-neutral-3"
-	} },
-	defaultVariants: { selected: !1 }
-}), s = ({ className: r, label: s, icon: c, selected: l = !1, disabled: u = !1, onPress: d, onClick: f, type: p = "button", ...m }) => /* @__PURE__ */ n("button", {
-	type: p,
-	className: e(i({
-		selected: l,
-		disabled: u
-	}), r),
-	onClick: (e) => {
-		f?.(e), e.defaultPrevented || d?.();
-	},
-	disabled: u,
-	...m,
-	children: [c && /* @__PURE__ */ t(c, { className: o({ selected: l }) }), /* @__PURE__ */ t("span", {
-		className: a({ selected: l }),
-		children: s
-	})]
-});
-//#endregion
-export { s as Chip };
-
-//# sourceMappingURL=chip.js.map
+import { t as e } from "./Chip-Bu5q0mhe.js";
+export { e as Chip };