コンテンツにスキップ

フロントエンド共通コンポーネント

このドキュメントでは、Storefront で使用される共通コンポーネントの仕様と使用ガイドラインをまとめます。

EmptyState

データが空の状態（お気に入りがない、検索結果がゼロ、カートが空など）を表示するための共通コンポーネントです。

  • ファイル: apps/storefront/src/components/common/empty-state.tsx
  • React Cosmos: Components/Common/EmptyState

プロパティ (Props)

プロパティ名 型 デフォルト 説明
icon LucideIcon - 表示するアイコン（Lucide React）
title string - メインの見出しテキスト
description ReactNode - 説明文（文字列またはJSX）
action ReactNode - アクションボタンなどのJSX
variant "default" \| "card" "default" 表示スタイル（下記参照）
className string - 追加のCSSクラス
testId string - E2Eテスト用の data-testid

バリエーション

1. default (デフォルト)

アイコンを中心に配置し、上下に広めの余白（py-16）を持つスタイルです。マイページのお気に入り一覧や注文履歴など、ページ全体のメインコンテンツが空の場合に適しています。

使用例:

<EmptyState
  icon={Heart}
  title="お気に入り商品はまだありません"
  description="商品ページでハートアイコンをクリックしてお気に入りに追加できます"
  action={<Button>商品を探す</Button>}
/>

2. card (カード形式)

枠線（border）と背景色（bg-card）を持ち、比較的コンパクトなスタイルです。検索結果リストの途中や、サイドバー、特定のセクション内での「該当なし」表示に適しています。

使用例:

<EmptyState
  variant="card"
  title="該当する商品が見つかりませんでした"
  description="検索条件を変更して再度お試しください。"
/>

導入済み箇所

  • お気に入り一覧: favorites-page-content.tsx
  • 商品検索結果 / collection 一覧: products-page-content.tsx
  • カートページ: cart-page-content.tsx
  • 注文履歴: account-order-list.tsx
  • 登録済み配送先: account-addresses.tsx
  • キャンペーン一覧: campaigns-page-content.tsx
  • 記事一覧: articles-page-content.tsx
  • お知らせ一覧: announcements-page-content.tsx

実装上の注意点

  • E2Eテストの安定性を維持するため、既存の data-testid を継承して使用してください。
  • variant="card" の場合、必要に応じて className="p-6" などでパディングを微調整してください。

ページ階層と戻り先を一貫した UI で表示する共通コンポーネントです。商品詳細ページやアカウント系ページのように、親階層への導線を明示したい画面で使用します。

  • ファイル: apps/storefront/src/components/layout/breadcrumb.tsx

プロパティ (Props)

プロパティ名 型 デフォルト 説明
items BreadcrumbItem[] - パンくずの並び順。空配列の場合は何も描画しない
ariaLabel string "パンくずリスト" <nav> のアクセシビリティラベル
className string - ルートの <nav> に追加する CSS クラス
listClassName string - <ol> に追加する CSS クラス
linkClassName string - リンク項目に追加する CSS クラス
currentItemClassName string - 現在地テキストに追加する CSS クラス
separator ReactNode "/" 区切り記号
separatorClassName string - 区切り記号に追加する CSS クラス
testId string - ルートの data-testid。各項目は testIdSuffix と併用
プロパティ名 型 説明
label string 表示するラベル
href string 遷移先。未指定の場合はリンク化せずテキスト表示する
testIdSuffix string testId と組み合わせて各項目の data-testid を付与したいときに使う

使用例

<Breadcrumb
  testId="product-breadcrumb"
  items={[
    { label: "ホーム", href: "/", testIdSuffix: "home" },
    { label: "商品一覧", href: "/products", testIdSuffix: "products" },
    { label: "商品詳細", testIdSuffix: "current" },
  ]}
/>

導入済み箇所

  • 商品詳細ページ: apps/storefront/src/routes/product.$slug.tsx
  • マイページ: apps/storefront/src/components/account/account-dashboard.tsx

実装上の注意点

  • 末尾の項目は自動的に現在地として扱われ、aria-current="page" 付きのテキストで描画されます。
  • href を省略した項目はリンクにならないため、「クリック不可の途中項目」を明示したいときにも使えます。
  • E2E で個別項目を参照する場合は、testId だけでなく testIdSuffix もセットで渡してください。