@cakejp/design-system 0.3.0

package/contracts/rules.json

@@ -0,0 +1,559 @@
+{
+  "meta": {
+    "name": "Cake.jp Design System — Rules Contracts",
+    "version": "0.1.0",
+    "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
+  },
+  "prohibited": [
+    {
+      "id": "P1",
+      "severity": "error",
+      "category": "production",
+      "message": "本番実装を確認せずにコンポーネントを新規作成する",
+      "fix": "まず www-test-htdocs/app/views/elements/2023/ を検索する"
+    },
+    {
+      "id": "P2",
+      "severity": "error",
+      "category": "production",
+      "message": "本番CDN画像（assets.cake.jp）をSVGやコードで再現する",
+      "fix": "CDN URLをそのまま <img src> で使う"
+    },
+    {
+      "id": "P3",
+      "severity": "error",
+      "category": "production",
+      "message": "CDNアセットをダウンロードしてリポジトリに含める",
+      "fix": "CDN URLを直接参照する"
+    },
+    {
+      "id": "P4",
+      "severity": "error",
+      "category": "production",
+      "message": "本番のCSSバリアント体系を無視して独自命名する",
+      "fix": "cakejp.css のバリアント体系（--sale, --coupon 等）を尊重する"
+    },
+    {
+      "id": "R1",
+      "severity": "warning",
+      "category": "typography",
+      "pattern": "font-bold|font-semibold|font-medium|font-light",
+      "excludes": [".stories.", "cva", "variants", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "text-sm font-bold 等の個別クラス組み合わせ禁止",
+      "fix": "typo-label-md 等 typo-* クラスを使う"
+    },
+    {
+      "id": "R2",
+      "severity": "warning",
+      "category": "typography",
+      "pattern": "typo-[a-z-]+ font-(bold|semibold|medium)",
+      "message": "typo-* に font-weight を追加禁止（typo-* が既に含んでいる）",
+      "fix": "太字が必要なら typo-label-* に変更する"
+    },
+    {
+      "id": "R3",
+      "severity": "warning",
+      "category": "typography",
+      "pattern": "typo-[a-z-]+ text-[a-z]",
+      "message": "typo-* にtext-sizeを追加禁止（二重定義）",
+      "fix": "typo-* だけを使う"
+    },
+    {
+      "id": "R4",
+      "severity": "warning",
+      "category": "typography",
+      "pattern": "text-\\[[0-9]+px\\]|leading-\\[[0-9.]+\\]",
+      "excludes": [".stories."],
+      "message": "px直書き・leading直書き禁止",
+      "fix": "typo-body-md 等 typo-* クラスを使う"
+    },
+    {
+      "id": "R5",
+      "severity": "warning",
+      "category": "typography",
+      "pattern": "tracking-tight",
+      "message": "tracking-tight禁止（日本語の可読性が著しく低下）",
+      "fix": "typo-* のデフォルト字間のままにする"
+    },
+    {
+      "id": "R6",
+      "severity": "warning",
+      "category": "color",
+      "pattern": "text-gray-|text-orange-|text-red-|text-green-|text-blue-|bg-gray-|bg-orange-|bg-red-|bg-green-|bg-blue-",
+      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "Tailwind標準色クラス禁止",
+      "fix": "text-[var(--Text-High-Emphasis)] 等セマンティックトークンを使う"
+    },
+    {
+      "id": "R7",
+      "severity": "warning",
+      "category": "color",
+      "pattern": "bg-orange-[0-9]+|text-orange-[0-9]+",
+      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "Primitiveカラー直接使用禁止",
+      "fix": "bg-[var(--Brand-Cake-Orange)] 等セマンティックトークンを使う"
+    },
+    {
+      "id": "R8",
+      "severity": "warning",
+      "category": "color",
+      "pattern": "#[0-9A-Fa-f]{6}",
+      "excludes": [".stories.", ".css", "shadow", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "HEXハードコード禁止",
+      "fix": "var(--Brand-Cake-Orange) 等セマンティックトークンを使う"
+    },
+    {
+      "id": "R9",
+      "severity": "error",
+      "category": "accessibility",
+      "message": "赤色だけでエラーを伝える",
+      "fix": "赤色 + ⚠ アイコン + テキストの3点セット必須"
+    },
+    {
+      "id": "R10",
+      "severity": "warning",
+      "category": "color",
+      "pattern": "text-black\\b",
+      "excludes": [".stories."],
+      "message": "text-black (#000) 禁止",
+      "fix": "text-[var(--Text-High-Emphasis)]（#1C1A1A）"
+    },
+    {
+      "id": "R10b",
+      "severity": "warning",
+      "category": "color",
+      "pattern": "Border-High-Emphasis",
+      "excludes": ["hover:", "focus:", "active:", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "Border-High-Emphasis を静的なカード・コンテナに使用禁止",
+      "fix": "通常枠は Border-Medium-Emphasis。hover時のみ hover:border-[var(--Border-High-Emphasis)]"
+    },
+    {
+      "id": "R11",
+      "severity": "warning",
+      "category": "spacing",
+      "pattern": "p-\\[[0-9]*[13579]px\\]|m-\\[[0-9]*[13579]px\\]",
+      "message": "4pxグリッド外の余白値禁止",
+      "fix": "p-3（12px）等4の倍数のTailwindクラスを使う"
+    },
+    {
+      "id": "R12",
+      "severity": "warning",
+      "category": "spacing",
+      "pattern": "gap-\\[[0-9]*[13579]px\\]",
+      "message": "4pxグリッド外のgap値禁止",
+      "fix": "gap-1.5（6px）or gap-2（8px）"
+    },
+    {
+      "id": "R13",
+      "severity": "warning",
+      "category": "spacing",
+      "pattern": "style=\\{\\{.*margin|style=\\{\\{.*padding",
+      "message": "インラインスタイルで余白を指定禁止",
+      "fix": "m-* / p-* 等Tailwindクラスで指定する"
+    },
+    {
+      "id": "R14",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<button\\b",
+      "excludes": ["data-slot", ".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "生の <button> 禁止",
+      "fix": "<Button variant='...' size='...'> を使う"
+    },
+    {
+      "id": "R15",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<input\\b",
+      "excludes": ["data-slot", ".stories.", "type=\"search\"", "type=\"file\"", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "生の <input> 禁止",
+      "fix": "<Input> コンポーネントを使う"
+    },
+    {
+      "id": "R16",
+      "severity": "warning",
+      "category": "component",
+      "pattern": "<Tag.*onClick|onClick.*<Tag",
+      "message": "TagにonClickを付けない（Tag は表示専用）",
+      "fix": "押せるようにしたいなら <Chip> を使う"
+    },
+    {
+      "id": "R17",
+      "severity": "warning",
+      "category": "component",
+      "message": "Badgeに×ボタンを付けない（Badge はステータス表示専用）",
+      "fix": "削除できるラベルは <Chip> を使う"
+    },
+    {
+      "id": "R18",
+      "severity": "warning",
+      "category": "component",
+      "pattern": "`\\$\\{.*\\?.*\\}`",
+      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "テンプレートリテラルでclassNameを組み立てない",
+      "fix": "cn(base, active && 'bg-red') を使う"
+    },
+    {
+      "id": "R18b",
+      "severity": "warning",
+      "category": "component",
+      "message": "CardのpaddingをCard本体とchildで分離しない",
+      "fix": "Card本体が p-4 で管理。全幅コンテンツは -mx-4 で突き破る"
+    },
+    {
+      "id": "R19",
+      "severity": "error",
+      "category": "image",
+      "pattern": "<img\\b",
+      "excludes": ["AspectRatio", "aspect-ratio", ".stories.", "components/foundations/", "components/primitives/", "components/ec/", "object-cover"],
+      "message": "裸の <img> 禁止（CLS発生）",
+      "fix": "<AspectRatio ratio={1}> で囲む"
+    },
+    {
+      "id": "R20",
+      "severity": "warning",
+      "category": "image",
+      "message": "商品画像に object-cover を付け忘れない",
+      "fix": "<img className='object-cover w-full h-full'>"
+    },
+    {
+      "id": "R21",
+      "severity": "warning",
+      "category": "accessibility",
+      "pattern": "alt=\"\"",
+      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "alt='' 禁止（スクリーンリーダーが読めない）",
+      "fix": "alt='苺のショートケーキ' のように日本語で内容を書く"
+    },
+    {
+      "id": "R22",
+      "severity": "warning",
+      "category": "form",
+      "message": "placeholderだけ書いてLabelを省略しない",
+      "fix": "<Label>お名前</Label> + placeholder='例: 山田太郎'"
+    },
+    {
+      "id": "R23",
+      "severity": "warning",
+      "category": "form",
+      "message": "必須項目に * を付け忘れない",
+      "fix": "<span className='text-[var(--Text-Caution)]'>*</span>"
+    },
+    {
+      "id": "R24",
+      "severity": "warning",
+      "category": "form",
+      "pattern": "type=\"text\"",
+      "message": "メールアドレス欄に type='text' を使わない",
+      "fix": "type='email'。電話は type='tel'"
+    },
+    {
+      "id": "R25",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<select\\b",
+      "excludes": ["components/foundations/"],
+      "message": "HTMLネイティブの <select> 禁止",
+      "fix": "<Select> コンポーネントを使う"
+    },
+    {
+      "id": "R26",
+      "severity": "error",
+      "category": "modal",
+      "message": "モーダル内のボタン配置を間違えない（削除=左、キャンセル=右は逆）",
+      "fix": "左=キャンセル(secondary)、右=削除する(destructive)"
+    },
+    {
+      "id": "R27",
+      "severity": "error",
+      "category": "modal",
+      "pattern": "fixed inset-0",
+      "excludes": ["components/foundations/"],
+      "message": "div.fixed.inset-0 で自作モーダル禁止",
+      "fix": "<Dialog> or <Sheet> を使う（ESC・Tab・背景スクロールを自動処理）"
+    },
+    {
+      "id": "R28",
+      "severity": "error",
+      "category": "modal",
+      "message": "削除ボタン押下で即削除しない",
+      "fix": "<AlertDialog> で確認を挟む"
+    },
+    {
+      "id": "R29",
+      "severity": "warning",
+      "category": "table",
+      "message": "金額列を左寄せにしない",
+      "fix": "<TableCell className='text-right'>"
+    },
+    {
+      "id": "R30",
+      "severity": "warning",
+      "category": "table",
+      "message": "テーブル行にhoverを付け忘れない",
+      "fix": "<TableRow> に hover:bg-muted/50 が既に入っている"
+    },
+    {
+      "id": "R31",
+      "severity": "warning",
+      "category": "table",
+      "message": "truncateで切ったテキストを放置しない",
+      "fix": "<Tooltip> で全文をホバー表示する"
+    },
+    {
+      "id": "R32",
+      "severity": "warning",
+      "category": "layout",
+      "pattern": "width:\\s*375px|w-\\[375px\\]",
+      "message": "固定幅375px等を指定しない",
+      "fix": "w-full max-w-[375px]"
+    },
+    {
+      "id": "R33",
+      "severity": "warning",
+      "category": "layout",
+      "pattern": "position:\\s*absolute",
+      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "position: absolute で要素を並べない",
+      "fix": "Flexbox / Grid を使う"
+    },
+    {
+      "id": "R34",
+      "severity": "warning",
+      "category": "layout",
+      "pattern": "z-\\[9999\\]|z-\\[999\\]|z-index:\\s*9999",
+      "message": "z-index: 9999 禁止",
+      "fix": "z-50 を使う"
+    },
+    {
+      "id": "R35",
+      "severity": "warning",
+      "category": "layout",
+      "message": "セクション間の余白を毎回違う値にしない",
+      "fix": "gap-4（16px）を基準に統一"
+    },
+    {
+      "id": "R47",
+      "severity": "warning",
+      "category": "component",
+      "pattern": "border-l-4|border-t-4|border-r-4|border-b-4",
+      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "トーストに左ボーダーで状態色を付けない",
+      "fix": "背景色全体で状態を表現（!bg-[var(--Surface-Caution-Light)]）"
+    },
+    {
+      "id": "R36",
+      "severity": "warning",
+      "category": "animation",
+      "pattern": "duration-[3-9][0-9][0-9]|duration-[0-9]{4}",
+      "message": "duration-300以上の遅いアニメーション禁止",
+      "fix": "hover は duration-150、開閉は duration-200"
+    },
+    {
+      "id": "R38",
+      "severity": "warning",
+      "category": "component",
+      "message": "disabledボタンを色だけで表現しない",
+      "fix": "opacity-50 cursor-not-allowed + disabled属性"
+    },
+    {
+      "id": "R39",
+      "severity": "error",
+      "category": "accessibility",
+      "pattern": "aria-label=\"\"",
+      "message": "アイコンのみボタンにaria-labelなし禁止",
+      "fix": "aria-label='閉じる' を日本語で付ける"
+    },
+    {
+      "id": "R40",
+      "severity": "warning",
+      "category": "accessibility",
+      "pattern": "aria-label=\"[A-Z][a-z]",
+      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "aria-labelを英語で書かない（cake.jpは日本語サービス）",
+      "fix": "aria-label='閉じる'（'Close'にしない）"
+    },
+    {
+      "id": "R41",
+      "severity": "error",
+      "category": "accessibility",
+      "pattern": "outline-none\\b",
+      "excludes": ["focus-visible", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "outline-none でフォーカスリングを消す禁止",
+      "fix": "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
+    },
+    {
+      "id": "R42",
+      "severity": "error",
+      "category": "accessibility",
+      "pattern": "<div.*onClick|<span.*onClick",
+      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "<div onClick> でクリック処理禁止",
+      "fix": "<button> か <a> を使う"
+    },
+    {
+      "id": "AI1",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "pattern": "border-t-4 border-.*-[0-9]+",
+      "message": "AI生成パターン: カード上部カラーバー禁止",
+      "fix": "border border-[var(--Border-Low-Emphasis)] で全周ボーダー"
+    },
+    {
+      "id": "AI2",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "pattern": "border-l-4 border-.*-[0-9]+",
+      "message": "AI生成パターン: 左端カラーストライプ禁止（Alert含む）",
+      "fix": "border rounded-lg で全周ボーダー"
+    },
+    {
+      "id": "AI3",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "pattern": "bg-gradient-to-",
+      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "AI生成パターン: グラデーション背景禁止",
+      "fix": "セマンティックトークンの単色背景"
+    },
+    {
+      "id": "AI4",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "pattern": "tracking-tight",
+      "message": "AI生成パターン: tracking-tight禁止（日本語の可読性が著しく低下）",
+      "fix": "typo-* クラスに含まれる値を使う"
+    },
+    {
+      "id": "AI6",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "pattern": "animate-spin|animate-bounce|animate-ping",
+      "excludes": [".stories.", "components/foundations/"],
+      "message": "AI生成パターン: 常時ループアニメーション禁止",
+      "fix": "スケルトンのpulseのみ許可"
+    },
+    {
+      "id": "AI7",
+      "severity": "warning",
+      "category": "ai-pattern",
+      "pattern": "rounded-md\\b|rounded-xl\\b|rounded-3xl\\b",
+      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "message": "AI生成パターン: DS定義外の角丸禁止（rounded-md/xl/3xl）",
+      "fix": "DS定義の角丸のみ使用する"
+    },
+    {
+      "id": "R44",
+      "severity": "warning",
+      "category": "storybook",
+      "pattern": "title:.*[ぁ-んァ-ン一-龥]",
+      "message": "Storybookタイトルを日本語にしない",
+      "fix": "\"UI/Button\" 形式（英語）で統一"
+    },
+    {
+      "id": "R46",
+      "severity": "warning",
+      "category": "storybook",
+      "pattern": "max-w-\\[.*\\]|style=\\{\\{.*maxWidth",
+      "message": "Storybookラッパーに固定幅を入れない",
+      "fix": "幅はStorybookのビューポート切替に委ねる"
+    },
+    {
+      "id": "R48",
+      "severity": "warning",
+      "category": "component",
+      "message": "SectionHeaderをCardTitle+Buttonで手書きしない",
+      "fix": "<SectionHeader title='お知らせ' moreHref='#' moreLabel='すべて見る' />"
+    },
+    {
+      "id": "R49",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<input type=\"date\"|<input type='date'",
+      "message": "input type='date' のネイティブ日付ピッカー禁止",
+      "fix": "<Popover> + <Calendar> でDS準拠の日付ピッカーを組む"
+    },
+    {
+      "id": "R51",
+      "severity": "warning",
+      "category": "component",
+      "message": "テーブル選択時の一括操作バーをdivで手書きしない",
+      "fix": "<BulkActionBar selectedCount={selected.size}> を使う"
+    },
+    {
+      "id": "R52",
+      "severity": "warning",
+      "category": "component",
+      "message": "管理画面のテーブルをui/tableで組まない",
+      "fix": "<DataTable> を使う（ソート・選択行・アクションメニュー対応）"
+    }
+  ],
+  "accessibility": {
+    "wcag": "2.1 AA",
+    "requirements": [
+      { "id": "A001", "rule": "通常テキスト（18px未満）のコントラスト比 4.5:1 以上" },
+      { "id": "A002", "rule": "大テキスト（18px以上bold/24px以上normal）のコントラスト比 3:1 以上" },
+      { "id": "A003", "rule": "UIコンポーネント境界・アイコンのコントラスト比 3:1 以上" },
+      { "id": "A004", "rule": "フォーカスインジケーターのコントラスト比 3:1（隣接色との差）" },
+      { "id": "A005", "rule": "フォーカスリング必須: focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50" },
+      { "id": "A006", "rule": "アイコンのみボタンに日本語のaria-label必須" },
+      { "id": "A007", "rule": "全フォーム入力に <Label> または aria-label を紐付ける" },
+      { "id": "A008", "rule": "フォームエラーは aria-describedby でエラーメッセージを紐付ける" },
+      { "id": "A009", "rule": "動的に変化する情報は aria-live='polite' で通知する" },
+      { "id": "A010", "rule": "セマンティックHTML: nav/main/section/header/footer を適切に使用する" }
+    ]
+  },
+  "darkMode": {
+    "rule": "全コンポーネント・ストーリーはライトモード・ダークモード両方で確認必須",
+    "commonMistakes": [
+      "bg-[var(--Text-High-Emphasis)] をダーク固定背景として使う → ダークモードで白背景になる。bg-[var(--Primitive-Gray-900)] を使うこと",
+      "text-white をダーク固定背景上で使う → text-[var(--Primitive-White-alpha-1000)] を使うこと"
+    ]
+  },
+  "typography": {
+    "rule": "必ず typo-* クラスを使用。text-sm font-bold 等の個別指定禁止。",
+    "classes": [
+      { "class": "typo-heading-3xl", "size": "28px", "weight": "bold" },
+      { "class": "typo-heading-2xl", "size": "24px", "weight": "bold" },
+      { "class": "typo-heading-xl",  "size": "21px", "weight": "bold" },
+      { "class": "typo-heading-lg",  "size": "18px", "weight": "bold" },
+      { "class": "typo-heading-md",  "size": "16px", "weight": "bold" },
+      { "class": "typo-heading-sm",  "size": "14px", "weight": "bold" },
+      { "class": "typo-body-lg",     "size": "16px", "weight": "normal" },
+      { "class": "typo-body-md",     "size": "14px", "weight": "normal" },
+      { "class": "typo-body-sm",     "size": "12px", "weight": "normal" },
+      { "class": "typo-body-xs",     "size": "10px", "weight": "normal" },
+      { "class": "typo-label-lg",    "size": "16px", "weight": "bold" },
+      { "class": "typo-label-md",    "size": "14px", "weight": "bold" },
+      { "class": "typo-label-sm",    "size": "12px", "weight": "semibold" },
+      { "class": "typo-label-xs",    "size": "10px", "weight": "semibold" }
+    ]
+  },
+  "tokens": {
+    "spacing": {
+      "rule": "4pxグリッド。gap-1〜gap-6 / p-1〜p-6 のみ使用。",
+      "base": "4px",
+      "grid": "8px"
+    },
+    "touchTarget": {
+      "rule": "タッチターゲット最小サイズを守ること",
+      "values": [
+        { "element": "Button(CTA)", "min": "40px", "recommended": "48px" },
+        { "element": "Icon button", "min": "40px", "recommended": "44px" },
+        { "element": "Text input", "min": "44px", "recommended": "48px" },
+        { "element": "Chip/Filter", "min": "32px", "recommended": "36px" },
+        { "element": "Navigation item", "min": "44px", "recommended": "48px" }
+      ]
+    }
+  },
+  "writing": {
+    "rules": [
+      "和文は全角、欧文・算用数字は半角",
+      "見出し文末に「。」をつけない",
+      "バリデーションエラー文末に句読点をつけない",
+      "日付: YYYY/MM/DD（0なし: 2024/8/1）",
+      "お届け日: M月D日（曜日）（例: 8月1日（木））",
+      "価格: ¥{数字,区切り}（税込）（例: ¥3,980（税込））"
+    ]
+  }
+}