@cakejp/design-system 0.3.0

package/contracts/components.json

@@ -0,0 +1,730 @@
+{
+  "meta": {
+    "name": "Cake.jp Design System — Component Contracts",
+    "version": "0.1.0",
+    "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
+    "counts": {
+      "foundations": 46,
+      "primitives": 34,
+      "ec": 23,
+      "total": 103
+    }
+  },
+  "foundations": [
+    {
+      "name": "Accordion",
+      "path": "src/components/foundations/accordion.tsx"
+    },
+    {
+      "name": "AlertDialog",
+      "path": "src/components/foundations/alert-dialog.tsx",
+      "rules": [
+        "破壊的操作の確認に使用。削除ボタン押下後に必ず挟む"
+      ]
+    },
+    {
+      "name": "Alert",
+      "path": "src/components/foundations/alert.tsx",
+      "variants": [
+        "default",
+        "destructive"
+      ]
+    },
+    {
+      "name": "AspectRatio",
+      "path": "src/components/foundations/aspect-ratio.tsx",
+      "rules": [
+        "<img>を裸で置かない。必ずAspectRatioで囲む"
+      ]
+    },
+    {
+      "name": "Avatar",
+      "path": "src/components/foundations/avatar.tsx",
+      "subcomponents": [
+        "AvatarImage",
+        "AvatarFallback"
+      ]
+    },
+    {
+      "name": "Badge",
+      "path": "src/components/foundations/badge.tsx",
+      "rules": [
+        "ステータス・件数表示専用。削除ボタンを付けない（削除できるものはChip）"
+      ]
+    },
+    {
+      "name": "Breadcrumb",
+      "path": "src/components/foundations/breadcrumb.tsx",
+      "subcomponents": [
+        "BreadcrumbList",
+        "BreadcrumbItem",
+        "BreadcrumbLink",
+        "BreadcrumbPage",
+        "BreadcrumbSeparator"
+      ]
+    },
+    {
+      "name": "Button",
+      "path": "src/components/foundations/button.tsx",
+      "variants": [
+        "default",
+        "secondary",
+        "tertiary",
+        "destructive",
+        "ghost",
+        "link"
+      ],
+      "sizes": [
+        "xs",
+        "sm",
+        "default",
+        "lg",
+        "xl"
+      ],
+      "accessibility": [
+        "aria-label必須（アイコンのみの場合）"
+      ],
+      "rules": [
+        "<button>を直接使わない。必ずButtonコンポーネントを使う"
+      ]
+    },
+    {
+      "name": "Calendar",
+      "path": "src/components/foundations/calendar.tsx",
+      "rules": [
+        "<input type='date'>を使わない。PopoverとCalendarを組み合わせる"
+      ]
+    },
+    {
+      "name": "Card",
+      "path": "src/components/foundations/card.tsx",
+      "subcomponents": [
+        "CardHeader",
+        "CardTitle",
+        "CardDescription",
+        "CardContent",
+        "CardFooter"
+      ],
+      "rules": [
+        "paddingはCard本体のp-4で一括管理。全幅コンテンツは-mx-4で突き破る"
+      ]
+    },
+    {
+      "name": "CheckboxCard",
+      "path": "src/components/foundations/checkbox-card.tsx"
+    },
+    {
+      "name": "CheckboxGroup",
+      "path": "src/components/foundations/checkbox-group.tsx"
+    },
+    {
+      "name": "Checkbox",
+      "path": "src/components/foundations/checkbox.tsx",
+      "accessibility": [
+        "必ずLabelと紐付ける"
+      ]
+    },
+    {
+      "name": "Collapsible",
+      "path": "src/components/foundations/collapsible.tsx",
+      "subcomponents": [
+        "CollapsibleTrigger",
+        "CollapsibleContent"
+      ]
+    },
+    {
+      "name": "Command",
+      "path": "src/components/foundations/command.tsx"
+    },
+    {
+      "name": "ContextMenu",
+      "path": "src/components/foundations/context-menu.tsx"
+    },
+    {
+      "name": "DataTable",
+      "path": "src/components/foundations/data-table.tsx",
+      "rules": [
+        "管理画面のテーブルはui/tableでなくこちらを使う。ソート・選択行・アクションメニュー対応"
+      ]
+    },
+    {
+      "name": "Dialog",
+      "path": "src/components/foundations/dialog.tsx",
+      "subcomponents": [
+        "DialogTrigger",
+        "DialogContent",
+        "DialogHeader",
+        "DialogTitle",
+        "DialogDescription",
+        "DialogFooter",
+        "DialogClose"
+      ],
+      "rules": [
+        "div.fixed.inset-0で自作しない。ESC・Tab・背景スクロールを自動処理"
+      ]
+    },
+    {
+      "name": "Drawer",
+      "path": "src/components/foundations/drawer.tsx"
+    },
+    {
+      "name": "DropdownMenu",
+      "path": "src/components/foundations/dropdown-menu.tsx"
+    },
+    {
+      "name": "Form",
+      "path": "src/components/foundations/form.tsx",
+      "accessibility": [
+        "aria-describedbyでエラーメッセージを紐付ける"
+      ]
+    },
+    {
+      "name": "HoverCard",
+      "path": "src/components/foundations/hover-card.tsx"
+    },
+    {
+      "name": "Input",
+      "path": "src/components/foundations/input.tsx",
+      "accessibility": [
+        "必ずLabelと紐付ける"
+      ],
+      "rules": [
+        "<input>を直接使わない。type='email'/'tel'を適切に指定する"
+      ]
+    },
+    {
+      "name": "Label",
+      "path": "src/components/foundations/label.tsx",
+      "rules": [
+        "全フォーム入力に紐付け必須"
+      ]
+    },
+    {
+      "name": "Menubar",
+      "path": "src/components/foundations/menubar.tsx"
+    },
+    {
+      "name": "NavigationMenu",
+      "path": "src/components/foundations/navigation-menu.tsx"
+    },
+    {
+      "name": "Pagination",
+      "path": "src/components/foundations/pagination.tsx"
+    },
+    {
+      "name": "Popover",
+      "path": "src/components/foundations/popover.tsx",
+      "subcomponents": [
+        "PopoverTrigger",
+        "PopoverContent",
+        "PopoverAnchor"
+      ]
+    },
+    {
+      "name": "Progress",
+      "path": "src/components/foundations/progress.tsx"
+    },
+    {
+      "name": "RadioGroup",
+      "path": "src/components/foundations/radio-group.tsx",
+      "accessibility": [
+        "各RadioGroupItemにLabel必須"
+      ]
+    },
+    {
+      "name": "ResponsiveDialog",
+      "path": "src/components/foundations/responsive-dialog.tsx",
+      "rules": [
+        "デスクトップ=Dialog、モバイル=Sheetを自動切替"
+      ]
+    },
+    {
+      "name": "ScrollArea",
+      "path": "src/components/foundations/scroll-area.tsx"
+    },
+    {
+      "name": "Select",
+      "path": "src/components/foundations/select.tsx",
+      "rules": [
+        "<select>HTMLネイティブを使わない"
+      ]
+    },
+    {
+      "name": "Separator",
+      "path": "src/components/foundations/separator.tsx"
+    },
+    {
+      "name": "Sheet",
+      "path": "src/components/foundations/sheet.tsx",
+      "subcomponents": [
+        "SheetTrigger",
+        "SheetContent",
+        "SheetHeader",
+        "SheetTitle",
+        "SheetDescription",
+        "SheetFooter",
+        "SheetClose"
+      ]
+    },
+    {
+      "name": "Skeleton",
+      "path": "src/components/foundations/skeleton.tsx",
+      "rules": [
+        "アニメーションはpulseのみ許可"
+      ]
+    },
+    {
+      "name": "Slider",
+      "path": "src/components/foundations/slider.tsx"
+    },
+    {
+      "name": "Sonner",
+      "path": "src/components/foundations/sonner.tsx",
+      "rules": [
+        "トースト内にアクションリンクを入れない。左ボーダーではなく背景色全体で状態を表現"
+      ]
+    },
+    {
+      "name": "Spinner",
+      "path": "src/components/foundations/spinner.tsx"
+    },
+    {
+      "name": "Switch",
+      "path": "src/components/foundations/switch.tsx",
+      "accessibility": [
+        "Label必須"
+      ]
+    },
+    {
+      "name": "Table",
+      "path": "src/components/foundations/table.tsx",
+      "rules": [
+        "管理画面ではDataTableを使う。数値列はtext-right"
+      ]
+    },
+    {
+      "name": "Tabs",
+      "path": "src/components/foundations/tabs.tsx",
+      "subcomponents": [
+        "TabsList",
+        "TabsTrigger",
+        "TabsContent"
+      ]
+    },
+    {
+      "name": "Textarea",
+      "path": "src/components/foundations/textarea.tsx",
+      "accessibility": [
+        "Label必須"
+      ]
+    },
+    {
+      "name": "ToggleGroup",
+      "path": "src/components/foundations/toggle-group.tsx",
+      "rules": [
+        "水平パディングはコンポーネント内に入れない。親が管理する"
+      ]
+    },
+    {
+      "name": "Toggle",
+      "path": "src/components/foundations/toggle.tsx"
+    },
+    {
+      "name": "Tooltip",
+      "path": "src/components/foundations/tooltip.tsx",
+      "rules": [
+        "truncateで切ったテキストには必ずTooltipで全文表示"
+      ]
+    }
+  ],
+  "primitives": [
+    {
+      "name": "CoachMark",
+      "path": "src/components/primitives/coach-mark.tsx"
+    },
+    {
+      "name": "BannerCarousel",
+      "path": "src/components/primitives/banner-carousel.tsx"
+    },
+    {
+      "name": "StickyActionBar",
+      "path": "src/components/primitives/sticky-action-bar.tsx",
+      "rules": [
+        "モバイル固定フッターCTA"
+      ]
+    },
+    {
+      "name": "BottomTabBar",
+      "path": "src/components/primitives/bottom-tab-bar.tsx",
+      "rules": [
+        "モバイル専用。safe-area-inset-bottom対応必須"
+      ]
+    },
+    {
+      "name": "BulkActionBar",
+      "path": "src/components/primitives/bulk-action-bar.tsx",
+      "rules": [
+        "テーブル選択時の一括操作バー。div手書き禁止"
+      ]
+    },
+    {
+      "name": "CategoryShortcuts",
+      "path": "src/components/primitives/category-shortcuts.tsx"
+    },
+    {
+      "name": "CategoryScroll",
+      "path": "src/components/primitives/category-scroll.tsx"
+    },
+    {
+      "name": "Chip",
+      "path": "src/components/primitives/chip.tsx",
+      "variants": [
+        "default",
+        "active",
+        "disabled"
+      ],
+      "features": [
+        "count"
+      ],
+      "rules": [
+        "フィルター・ステータスタブに使う。ToggleGroup+Badge手書き禁止",
+        "Tagと違い押せる・削除できる"
+      ]
+    },
+    {
+      "name": "EmptyState",
+      "path": "src/components/primitives/empty-state.tsx",
+      "rules": [
+        "必ずアクションまたは説明を含める"
+      ]
+    },
+    {
+      "name": "ErrorState",
+      "path": "src/components/primitives/error-state.tsx",
+      "rules": [
+        "色+アイコン+テキスト必須。リトライアクションを含める"
+      ]
+    },
+    {
+      "name": "FilterBar",
+      "path": "src/components/primitives/filter-bar.tsx",
+      "features": [
+        "chips",
+        "sort",
+        "count"
+      ]
+    },
+    {
+      "name": "Footer",
+      "path": "src/components/primitives/footer.tsx"
+    },
+    {
+      "name": "FormField",
+      "path": "src/components/primitives/form-field.tsx",
+      "rules": [
+        "Label+Input+エラーメッセージをセットで管理"
+      ]
+    },
+    {
+      "name": "ImageCarousel",
+      "path": "src/components/primitives/image-carousel.tsx",
+      "features": [
+        "scroll-snap",
+        "dots",
+        "arrows",
+        "autoPlay"
+      ]
+    },
+    {
+      "name": "ImageGallery",
+      "path": "src/components/primitives/image-gallery.tsx"
+    },
+    {
+      "name": "ImageUploader",
+      "path": "src/components/primitives/image-uploader.tsx",
+      "features": [
+        "upload",
+        "delete",
+        "grid"
+      ]
+    },
+    {
+      "name": "KebabMenu",
+      "path": "src/components/primitives/kebab-menu.tsx",
+      "rules": [
+        "テーブル行アクション用"
+      ]
+    },
+    {
+      "name": "ListItem",
+      "path": "src/components/primitives/list-item.tsx"
+    },
+    {
+      "name": "MenuDrawer",
+      "path": "src/components/primitives/menu-drawer.tsx"
+    },
+    {
+      "name": "SubNav",
+      "path": "src/components/primitives/sub-nav.tsx"
+    },
+    {
+      "name": "NotificationBadge",
+      "path": "src/components/primitives/notification-badge.tsx",
+      "rules": [
+        "最大表示: 99+"
+      ]
+    },
+    {
+      "name": "NotificationList",
+      "path": "src/components/primitives/notification-list.tsx",
+      "layouts": [
+        "vertical",
+        "horizontal"
+      ]
+    },
+    {
+      "name": "PriceDisplay",
+      "path": "src/components/primitives/price-display.tsx",
+      "features": [
+        "sale",
+        "strikethrough",
+        "tax-inclusive"
+      ],
+      "rules": [
+        "価格表記: ¥{数字,区切り}（税込）"
+      ]
+    },
+    {
+      "name": "ProgressSteps",
+      "path": "src/components/primitives/progress-steps.tsx"
+    },
+    {
+      "name": "QuantitySelector",
+      "path": "src/components/primitives/quantity-selector.tsx",
+      "features": [
+        "increment",
+        "decrement",
+        "trash-icon"
+      ]
+    },
+    {
+      "name": "SearchBar",
+      "path": "src/components/primitives/search-bar.tsx"
+    },
+    {
+      "name": "SearchPanel",
+      "path": "src/components/primitives/search-panel.tsx",
+      "layouts": [
+        "grid",
+        "flex"
+      ]
+    },
+    {
+      "name": "SectionHeader",
+      "path": "src/components/primitives/section-header.tsx",
+      "rules": [
+        "タイトル+もっと見るボタンをCardTitle+Button手書き禁止。SectionHeaderを使う"
+      ]
+    },
+    {
+      "name": "ShareButtons",
+      "path": "src/components/primitives/share-buttons.tsx"
+    },
+    {
+      "name": "SocialLoginButton",
+      "path": "src/components/primitives/social-login-button.tsx"
+    },
+    {
+      "name": "StatusCountTabs",
+      "path": "src/components/primitives/status-count-tabs.tsx",
+      "rules": [
+        "ToggleGroup+Badge手書き禁止。Chip count propを使う"
+      ]
+    },
+    {
+      "name": "Tag",
+      "path": "src/components/primitives/tag.tsx",
+      "rules": [
+        "表示専用。onClickを付けない（押せるものはChip）"
+      ]
+    },
+    {
+      "name": "SideNav",
+      "path": "src/components/primitives/side-nav.tsx",
+      "category": "navigation"
+    }
+  ],
+  "ec": [
+    {
+      "name": "AdminLayout",
+      "path": "src/components/ec/admin-layout.tsx",
+      "rules": [
+        "管理画面のレイアウトシェル"
+      ]
+    },
+    {
+      "name": "AnniversaryCard",
+      "path": "src/components/ec/anniversary-card.tsx"
+    },
+    {
+      "name": "CakeLogo",
+      "path": "src/components/ec/cake-logo.tsx"
+    },
+    {
+      "name": "ChartControls",
+      "path": "src/components/ec/chart-controls.tsx"
+    },
+    {
+      "name": "CountdownTimer",
+      "path": "src/components/ec/countdown-timer.tsx",
+      "variants": [
+        "before",
+        "active",
+        "ended"
+      ]
+    },
+    {
+      "name": "CouponCard",
+      "path": "src/components/ec/coupon-card.tsx",
+      "layouts": [
+        "vertical",
+        "horizontal"
+      ]
+    },
+    {
+      "name": "DeliveryCalendar",
+      "path": "src/components/ec/delivery-calendar.tsx"
+    },
+    {
+      "name": "OrderSection",
+      "path": "src/components/ec/order-section.tsx",
+      "variants": [
+        "default",
+        "empty",
+        "error"
+      ]
+    },
+    {
+      "name": "OrderSummary",
+      "path": "src/components/ec/order-summary.tsx"
+    },
+    {
+      "name": "PaymentMethod",
+      "path": "src/components/ec/payment-method.tsx"
+    },
+    {
+      "name": "ProductCard",
+      "path": "src/components/ec/product-card.tsx",
+      "layouts": [
+        "vertical",
+        "horizontal"
+      ],
+      "features": [
+        "favorite",
+        "discount-badge",
+        "rating"
+      ]
+    },
+    {
+      "name": "ProductCarousel",
+      "path": "src/components/ec/product-carousel.tsx"
+    },
+    {
+      "name": "ProductCTA",
+      "path": "src/components/ec/product-cta.tsx",
+      "variants": [
+        "cart",
+        "timesale",
+        "reserve",
+        "restock"
+      ]
+    },
+    {
+      "name": "ProductDetailBar",
+      "path": "src/components/ec/product-detail-bar.tsx",
+      "rules": [
+        "スティッキーヘッダー。タブ+評価表示"
+      ]
+    },
+    {
+      "name": "ProductDetailSidebar",
+      "path": "src/components/ec/product-detail-sidebar.tsx"
+    },
+    {
+      "name": "ProductOption",
+      "path": "src/components/ec/product-option.tsx",
+      "variants": [
+        "quantity",
+        "select",
+        "text",
+        "checkbox",
+        "image",
+        "candle",
+        "letter"
+      ]
+    },
+    {
+      "name": "RatingStars",
+      "path": "src/components/ec/rating-stars.tsx",
+      "features": [
+        "sparkle-icon",
+        "review-count"
+      ]
+    },
+    {
+      "name": "ReviewCard",
+      "path": "src/components/ec/review-card.tsx",
+      "variants": [
+        "list",
+        "card",
+        "pc"
+      ],
+      "features": [
+        "helpful-count",
+        "like"
+      ]
+    },
+    {
+      "name": "ReviewForm",
+      "path": "src/components/ec/review-form.tsx",
+      "features": [
+        "rating",
+        "text",
+        "image-upload"
+      ]
+    },
+    {
+      "name": "ReviewSummary",
+      "path": "src/components/ec/review-summary.tsx",
+      "features": [
+        "average-score",
+        "star-gauge"
+      ]
+    },
+    {
+      "name": "ShopCard",
+      "path": "src/components/ec/shop-card.tsx",
+      "features": [
+        "rating",
+        "delivery-date",
+        "bookmark"
+      ]
+    },
+    {
+      "name": "StatCard",
+      "path": "src/components/ec/stat-card.tsx"
+    },
+    {
+      "name": "Header",
+      "path": "src/components/primitives/header.tsx"
+    },
+    {
+      "name": "ProductListItem",
+      "path": "src/components/ec/product-list-item.tsx",
+      "category": "display",
+      "rules": [
+        "カート/注文履歴/レビュー variant を持つ商品リスト行"
+      ]
+    }
+  ]
+}