@cakejp/design-system 0.16.0 → 0.17.0

package/dist/types/components/primitives/notification-list.d.ts

@@ -5,7 +5,7 @@
  *
  * ### インポート
  * ```tsx
- * import { NotificationList } from '../../components/primitives/notification-list'
+ * import { NotificationList } from '../../../components/primitives/notification-list'
  * ```
  *
  * ### Props（主要なもの）

package/dist/types/components/primitives/search-panel.d.ts

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { SearchPanel } from '../../components/primitives/search-panel'
+ * import { SearchPanel } from '../../../components/primitives/search-panel'
  * ```
  *
  * ### Props

package/dist/types/components/primitives/section-nav.d.ts

@@ -43,7 +43,7 @@ export interface SectionNavProps extends React.HTMLAttributes<HTMLElement> {
  *
  * ### インポート
  * ```tsx
- * import { SectionNav } from '../../components/primitives/section-nav'
+ * import { SectionNav } from '../../../components/primitives/section-nav'
  * ```
  *
  * ### 使い方（vertical＝既定）

package/dist/types/components/primitives/side-nav.d.ts

@@ -51,7 +51,7 @@ export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
  *
  * ### インポート
  * ```tsx
- * import { SideNav } from '../../components/primitives/side-nav'
+ * import { SideNav } from '../../../components/primitives/side-nav'
  * ```
  *
  * ### 使い方

package/dist/types/components/primitives/social-login-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type SocialPlatform } from "../../components/foundations/social-icon";
+import { type SocialPlatform } from "../../../components/foundations/social-icon";
 export type SocialProvider = Extract<SocialPlatform, "line" | "amazon" | "google" | "apple">;
 export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** ソーシャルプロバイダー */

package/dist/types/lib/field-labelling.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ## フィールドのラベル関連付け（DS 全体の方針 / issue #202）
+ *
+ * Radix ベースのコントロール（Select / Switch / Checkbox / Slider 等）は
+ * `<button>` や `<span role="...">` として描画されるため、**隣に `<Label htmlFor>` を
+ * 置いてもアクセシブルネームにならない**（`<label for>` が名前を与えるのは
+ * labelable な要素だけで、`<button>` は対象外）。
+ *
+ * そこで DS は次の方針を採る:
+ *
+ * 1. フィールドのラッパー（`FormField`）がラベル要素に **id を採番**し、
+ *    その id を context で配下のコントロールへ渡す。
+ * 2. コントロール側は `aria-labelledby` を **既定値として** その id にする。
+ *    利用側が `aria-label` / `aria-labelledby` を明示した場合はそちらを優先する。
+ * 3. ラッパー無しで単体利用するときは、利用側が `aria-label`（日本語）を書く。
+ *
+ * `<label for>` が有効なネイティブ入力（Input / Textarea）は従来どおり
+ * `htmlFor` ↔ `id` の関連付けで足りるため、context の `controlId` を使う。
+ */
+import * as React from "react";
+export interface FieldLabellingValue {
+    /** ラベル要素の id。コントロールの aria-labelledby 既定値になる */
+    labelId: string;
+    /** コントロールに割り当てる id（ネイティブ入力の htmlFor 対応用） */
+    controlId: string;
+    /** 説明文の id。存在するときだけ設定される */
+    descriptionId?: string;
+    /** エラーメッセージの id。存在するときだけ設定される */
+    errorId?: string;
+}
+/**
+ * ラッパー（FormField 等）が配下のコントロールへ id を渡す context。
+ * Provider は利用側で `<FieldLabellingContext.Provider value={...}>` として使う
+ * （このファイルはコンポーネントを export しない = fast refresh の制約に合わせる）。
+ */
+declare const FieldLabellingContext: React.Context<FieldLabellingValue>;
+/** ラッパー内かどうかを問わず使える。ラッパー外では null。 */
+declare function useFieldLabelling(): FieldLabellingValue | null;
+/**
+ * Radix トリガー系コントロール向けの aria 属性を解決する。
+ *
+ * 利用側の明示指定（aria-label / aria-labelledby / id / aria-describedby）を必ず優先し、
+ * 何も指定が無いときだけラッパーの id を当てる。
+ */
+declare function resolveFieldAria(props: {
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}, field: FieldLabellingValue | null): {
+    id?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+};
+/**
+ * ネイティブ入力（Input / Textarea）向け。
+ * 名前は `<label for>` ↔ `id` で付くので、ここでは id と説明の関連付けだけ行う。
+ */
+declare function resolveNativeFieldAria(props: {
+    id?: string;
+    "aria-describedby"?: string;
+}, field: FieldLabellingValue | null): {
+    id?: string;
+    "aria-describedby"?: string;
+};
+export { FieldLabellingContext, useFieldLabelling, resolveFieldAria, resolveNativeFieldAria, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -80,7 +80,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+    "build:lib": "vite build --config vite.config.lib.ts && node scripts/append-tailwind-source-manifest.mjs && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
     "prepack": "npm run build:lib",
     "prepare": "npm run build:lib",
     "postinstall": "node ./bin/init.js postinstall",

package/scripts/codemod/README.md

@@ -9,6 +9,15 @@ node scripts/codemod/v1-to-v2.mjs --dry ./src
 node scripts/codemod/v1-to-v2.mjs ./src
 ```
 
+ここに置いたファイル名がそのまま consumer 側の codemod 名になります（dispatch の
+書き換えは不要）。`template.mjs` と `check-migration.mjs` は一覧から除外されます。
+
+```bash
+npx cakejp-ds codemod              # 使える codemod 名の一覧
+npx cakejp-ds codemod v1-to-v2 --dry ./src
+npx cakejp-ds codemod v1-to-v2 ./src
+```
+
 正規表現ベースのため、必ずコミット済みの利用側で `--dry` を先に実行し、
 適用後は `git diff` と ESLint の `@cakejp/design-system/eslint/deprecated`
 で残件を確認してください。