@reni-corp/reni-2c-ui 0.3.27 → 0.3.29

package/src/stories/AppLayout.stories.ts

@@ -0,0 +1,870 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, computed } from 'vue'
+import AppFrame from '@/components/foundation/AppFrame.vue'
+import AppBar, {
+  AppBarAction,
+  AppBarMenuItem,
+} from '@/components/foundation/AppBar.vue'
+import AppBody from '@/components/foundation/AppBody.vue'
+import AppFooter, {
+  SnsLinkItem,
+  LogoItem,
+} from '@/components/foundation/AppFooter.vue'
+import { MenuItem } from '@/types'
+import Page from '@/components/layouts/Page.vue'
+import Section from '@/components/layouts/Section.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Button from '@/components/elements/Button.vue'
+import Text from '@/components/elements/Text.vue'
+import Icon from '@/components/elements/Icon.vue'
+import Divider from '@/components/elements/Divider.vue'
+import Label from '@/components/elements/Label.vue'
+import SpinButton from '@/components/elements/SpinButton.vue'
+import Gallery from '@/components/interactive/Gallery.vue'
+import AnnounceBar from '@/components/features/AnnounceBar.vue'
+import BrandLogo from '@/components/features/BrandLogo.vue'
+import SnsLink from '@/components/features/SnsLink.vue'
+import ProductList from '@/components/features/ProductList.vue'
+import VariationSelector from '@/components/features/VariationSelector.vue'
+import Image from '@/components/elements/Image.vue'
+import Spinner from '@/components/elements/Spinner.vue'
+import Card from '@/components/layouts/Card.vue'
+import Alert from '@/components/elements/Alert.vue'
+
+const meta: Meta<typeof AppFrame> = {
+  title: 'Example/配送通販',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+アプリケーション全体のレイアウト構成例です。AppFrame、AppBar、AppBody、AppFooterを組み合わせた実際の使用例を示します。
+
+## レイアウト仕様
+- **AppBar高さ**: PC 72px / SP 56px
+- **X方向パディング**: PC 40px / SP 16px（AppBar, AppBody, AppFooter共通）
+- **AppBar SP時**: CSS Grid 3カラムでタイトル中央配置
+
+## AppFooter レスポンシブ
+- **子供ありメニュー**: PC=セクション表示 / SP=Disclosure折りたたみ
+- **子供なしメニュー**: PC=横並び / SP=縦リスト
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppFrame>
+
+// モックデータ
+const mockShopData = {
+  shopName: 'Sample Store',
+  shopUrl: '/',
+  logoUrl: 'https://placehold.co/200x60?text=LOGO',
+  logoWidth: 120,
+}
+
+// AppBar用メニュー
+const mockAppBarMenu: AppBarMenuItem[] = [
+  { title: '新着商品', url: '/products?sort=new' },
+  {
+    title: 'カテゴリ',
+    children: [
+      { title: 'トップス', url: '/category/tops' },
+      { title: 'ボトムス', url: '/category/bottoms' },
+      { title: 'アクセサリー', url: '/category/accessories' },
+    ],
+  },
+  { title: 'ランキング', url: '/products?sort=ranking' },
+  { title: 'セール', url: '/sale' },
+]
+
+// AppBar用アクション
+const mockAppBarActions: AppBarAction[] = [
+  {
+    title: '検索',
+    icon: ['far', 'magnifying-glass'],
+    action: () => console.log('検索'),
+  },
+  { title: 'アカウント', icon: ['far', 'user'], url: '/account' },
+  { title: 'カート', icon: ['far', 'cart-shopping'], url: '/cart' },
+]
+
+// AppFooter用データ
+const mockFooterLogos: LogoItem[] = [
+  {
+    href: '/',
+    logoUrl: 'https://placehold.co/160x40?text=LOGO',
+    title: 'Sample Store',
+    width: 120,
+  },
+]
+
+const mockFooterSnsLinks: SnsLinkItem[] = [
+  { type: 'x-twitter', href: 'https://twitter.com/' },
+  { type: 'instagram', href: 'https://instagram.com/' },
+  { type: 'youtube', href: 'https://youtube.com/' },
+]
+
+// 子供ありフッターメニュー
+const mockFooterMenusWithChildren: MenuItem[] = [
+  {
+    title: 'サポート',
+    children: [
+      { title: 'FAQ', url: '/faq' },
+      { title: 'お問い合わせ', url: '/contact' },
+      { title: '配送について', url: '/shipping' },
+    ],
+  },
+  {
+    title: '規約・免責',
+    children: [
+      { title: '利用規約', url: '/terms' },
+      { title: 'プライバシーポリシー', url: '/privacy' },
+      { title: '特定商取引法に基づく表記', url: '/legal' },
+    ],
+  },
+  {
+    title: 'アカウント',
+    children: [
+      { title: 'サインアップ', url: '/signup' },
+      { title: 'ログイン', url: '/login' },
+    ],
+  },
+]
+
+// 商品詳細ページ用モックデータ
+const mockProduct = {
+  title: 'サンプル商品名',
+  title2: 'ブランド名',
+  title3: '商品コード: ABC-123',
+  price_sale: '3,980',
+  comment:
+    'この商品は高品質な素材を使用した人気アイテムです。\n\n快適な着心地と耐久性を両立しています。\n\n日常使いからアウトドアまで幅広いシーンでお使いいただけます。',
+  img_urls: [
+    'https://placehold.co/600x600/e0e0e0/666666?text=Image+1',
+    'https://placehold.co/600x600/d0d0d0/666666?text=Image+2',
+    'https://placehold.co/600x600/c0c0c0/666666?text=Image+3',
+    'https://placehold.co/600x600/b0b0b0/666666?text=Image+4',
+  ],
+  tags: [
+    { tag_code: 'new', name: '新着' },
+    { tag_code: 'popular', name: '人気' },
+    { tag_code: 'limited', name: '限定' },
+  ],
+}
+
+const mockVariationOptions = [
+  { label: 'S', value: 's' },
+  { label: 'M', value: 'm' },
+  { label: 'L', value: 'l' },
+  { label: 'XL', value: 'xl', disabled: true },
+]
+
+const mockRelatedProducts = [
+  {
+    product_id: '1',
+    title: '関連商品1',
+    price_sale: 2980,
+    img_urls: ['https://placehold.co/300x300/e0e0e0/666666?text=Product+1'],
+  },
+  {
+    product_id: '2',
+    title: '関連商品2',
+    price_sale: 3480,
+    img_urls: ['https://placehold.co/300x300/d0d0d0/666666?text=Product+2'],
+  },
+  {
+    product_id: '3',
+    title: '関連商品3',
+    price_sale: 4980,
+    img_urls: ['https://placehold.co/300x300/c0c0c0/666666?text=Product+3'],
+  },
+  {
+    product_id: '4',
+    title: '関連商品4',
+    price_sale: 2480,
+    img_urls: ['https://placehold.co/300x300/b0b0b0/666666?text=Product+4'],
+  },
+]
+
+export const 商品詳細ページ: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-footer': AppFooter,
+      'rn-page': Page,
+      'rn-section': Section,
+      'rn-stack': Stack,
+      'rn-button': Button,
+      'rn-text': Text,
+      'rn-icon': Icon,
+      'rn-divider': Divider,
+      'rn-label': Label,
+      'rn-spin-button': SpinButton,
+      'rn-gallery': Gallery,
+      'rn-announce-bar': AnnounceBar,
+      'rn-product-list': ProductList,
+      'rn-variation-selector': VariationSelector,
+    },
+    setup() {
+      const variation = ref('m')
+      const quantity = ref(1)
+
+      const handleAddToCart = () => {
+        console.log('カートに追加:', {
+          variation: variation.value,
+          quantity: quantity.value,
+        })
+      }
+
+      return {
+        // Shop data
+        shopData: mockShopData,
+        appBarMenu: mockAppBarMenu,
+        appBarActions: mockAppBarActions,
+        // Footer data
+        footerLogos: mockFooterLogos,
+        footerSnsLinks: mockFooterSnsLinks,
+        footerMenus: mockFooterMenusWithChildren,
+        // Product data
+        product: mockProduct,
+        variationOptions: mockVariationOptions,
+        relatedProducts: mockRelatedProducts,
+        // State
+        variation,
+        quantity,
+        // Methods
+        handleAddToCart,
+      }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <!-- AppBar - Propsベース -->
+        <rn-app-bar
+          :title-logo="shopData.logoUrl"
+          :title="shopData.shopName"
+          :menu="appBarMenu"
+          :actions="appBarActions"
+        />
+
+        <!-- AppBody -->
+        <rn-app-body>
+          <rn-page sticky-mode="body" :main-ratio="60">
+            <!-- Banner: フルワイズ表示 -->
+            <template #banner>
+              <rn-announce-bar
+                color="info"
+                title="🎉 期間限定セール開催中！全品10%OFF"
+              />
+            </template>
+
+            <template #body>
+              <rn-gallery
+                :max-visible-thumbs="4"
+                :image-urls="product.img_urls"
+                :autoplay="false"
+              />
+            </template>
+            <template #aside>
+              <rn-stack horizontal-resize="fill" direction="vertical" gap="lg">
+                <!-- 商品情報 -->
+                <rn-stack direction="vertical">
+                  <rn-stack direction="vertical" gap="xs">
+                    <rn-text>{{ product.title2 }}</rn-text>
+                    <rn-text size="title">{{ product.title }}</rn-text>
+                    <rn-text size="caption">{{ product.title3 }}</rn-text>
+                  </rn-stack>
+                  <rn-text>
+                    ¥{{ product.price_sale }}
+                    <rn-text size="caption">（税込）</rn-text>
+                  </rn-text>
+                </rn-stack>
+
+                <!-- バリエーション選択 -->
+                <rn-stack direction="vertical">
+                  <rn-text>サイズを選択</rn-text>
+                  <rn-variation-selector
+                    v-model="variation"
+                    :options="variationOptions"
+                  />
+                </rn-stack>
+
+                <!-- 数量選択 -->
+                <rn-stack direction="vertical">
+                  <rn-text>数量</rn-text>
+                  <rn-spin-button
+                    v-model="quantity"
+                    size="lg"
+                    :min="1"
+                    :max="10"
+                  />
+                </rn-stack>
+
+                <!-- カートボタン -->
+                <rn-button block @click="handleAddToCart">
+                  カートに入れる
+                </rn-button>
+
+                <rn-divider />
+
+                <!-- 商品説明 -->
+                <rn-stack direction="vertical" gap="xs">
+                  <rn-text weight="bold">商品説明</rn-text>
+                  <rn-text style="white-space: pre-line;">{{ product.comment }}</rn-text>
+                </rn-stack>
+
+                <!-- タグ -->
+                <rn-stack v-if="product.tags.length" wrap="wrap" gap="sm">
+                  <rn-text weight="bold">Tags:</rn-text>
+                  <rn-stack wrap="wrap" gap="sm">
+                    <rn-button
+                      v-for="tag in product.tags"
+                      :key="tag.tag_code"
+                      variant="text"
+                    >
+                      <rn-label>#{{ tag.name }}</rn-label>
+                    </rn-button>
+                  </rn-stack>
+                </rn-stack>
+              </rn-stack>
+            </template>
+
+            <!-- 関連商品 -->
+            <template #bottom>
+              <rn-section title="関連する商品">
+                <template #body>
+                  <rn-product-list
+                    :data="relatedProducts"
+                    :loading="false"
+                    :error="null"
+                    :pc-columns="4"
+                    :sp-columns="2"
+                    :pc-rows="1"
+                    :sp-rows="1"
+                  />
+                </template>
+              </rn-section>
+            </template>
+          </rn-page>
+        </rn-app-body>
+
+        <!-- AppFooter - Propsベース -->
+        <rn-app-footer
+          :logos="footerLogos"
+          :sns-links="footerSnsLinks"
+          :menus="footerMenus"
+          copyright="© 2024 Sample Store. All rights reserved."
+        />
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const Slotカスタマイズ版: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-footer': AppFooter,
+      'rn-section': Section,
+      'rn-stack': Stack,
+      'rn-button': Button,
+      'rn-text': Text,
+      'rn-icon': Icon,
+      'rn-brand-logo': BrandLogo,
+      'rn-sns-link': SnsLink,
+    },
+    setup() {
+      return {
+        shopData: mockShopData,
+        footerSnsLinks: mockFooterSnsLinks,
+        footerLogos: mockFooterLogos,
+      }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <!-- AppBar - Slotベースでカスタマイズ -->
+        <rn-app-bar>
+          <template #title>
+            <rn-brand-logo
+              :href="shopData.shopUrl"
+              :title="shopData.shopName"
+              :logo-url="shopData.logoUrl"
+              :width="shopData.logoWidth"
+              height="auto"
+            />
+          </template>
+          <template #menu>
+            <rn-stack direction="horizontal" gap="sm">
+              <a href="/new">新着</a>
+              <a href="/ranking">ランキング</a>
+              <a href="/sale">セール</a>
+            </rn-stack>
+          </template>
+          <template #actions>
+            <rn-icon :icon="['far', 'magnifying-glass']" />
+            <rn-icon :icon="['far', 'user']" />
+            <rn-icon :icon="['far', 'cart-shopping']" />
+          </template>
+          <template #extra>
+            <div style="background: #fef3c7; padding: 8px 16px; text-align: center; font-size: 12px;">
+              🎉 期間限定セール開催中！全品10%OFF
+            </div>
+          </template>
+        </rn-app-bar>
+
+        <!-- AppBody -->
+        <rn-app-body>
+          <rn-section title="Slotカスタマイズ版">
+            <template #body>
+              <rn-text>
+                このストーリーはAppBar/AppFooterのSlotを使ったカスタマイズ例です。
+              </rn-text>
+              <rn-stack direction="vertical" gap="md" style="margin-top: 24px;">
+                <rn-text weight="bold">レイアウト仕様:</rn-text>
+                <ul style="margin: 0; padding-left: 20px;">
+                  <li>AppBar高さ: PC 72px / SP 56px</li>
+                  <li>X方向パディング: PC 40px / SP 16px</li>
+                  <li>SP時: CSS Grid 3カラムでタイトル中央配置</li>
+                </ul>
+              </rn-stack>
+            </template>
+          </rn-section>
+        </rn-app-body>
+
+        <!-- AppFooter - Slotベース -->
+        <rn-app-footer>
+          <template #logos>
+            <rn-brand-logo
+              v-for="logo in footerLogos"
+              :key="logo.logoUrl"
+              :href="logo.href"
+              :title="logo.title || ''"
+              :logo-url="logo.logoUrl"
+              :width="logo.width || 120"
+              height="auto"
+            />
+          </template>
+          <template #sns-links>
+            <rn-sns-link
+              v-for="sns in footerSnsLinks"
+              :key="sns.type"
+              :type="sns.type"
+              :href="sns.href"
+              variant="icon"
+            />
+          </template>
+          <template #menus>
+            <rn-stack direction="horizontal" gap="xl">
+              <rn-stack direction="vertical">
+                <rn-text weight="bold">カスタムセクション1</rn-text>
+                <rn-stack direction="vertical" gap="sm">
+                  <a href="#">リンク1</a>
+                  <a href="#">リンク2</a>
+                </rn-stack>
+              </rn-stack>
+              <rn-stack direction="vertical">
+                <rn-text weight="bold">カスタムセクション2</rn-text>
+                <rn-stack direction="vertical" gap="sm">
+                  <a href="#">リンク3</a>
+                  <a href="#">リンク4</a>
+                </rn-stack>
+              </rn-stack>
+            </rn-stack>
+          </template>
+          <template #copyright>
+            <rn-text size="caption">© 2024 Sample Store. All rights reserved.</rn-text>
+          </template>
+        </rn-app-footer>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+// カートページ用モックデータ
+interface CartItem {
+  product_sku_id: string
+  product_name: string
+  unit_price: number
+  quantity: number
+  image_url: string
+}
+
+const mockCartItems: CartItem[] = [
+  {
+    product_sku_id: 'sku-001',
+    product_name: 'オリジナルTシャツ / ブラック / Lサイズ',
+    unit_price: 3980,
+    quantity: 2,
+    image_url: 'https://placehold.co/100x100/333333/ffffff?text=T-Shirt',
+  },
+  {
+    product_sku_id: 'sku-002',
+    product_name: 'トートバッグ / ナチュラル',
+    unit_price: 2480,
+    quantity: 1,
+    image_url: 'https://placehold.co/100x100/e0d5c0/666666?text=Tote',
+  },
+  {
+    product_sku_id: 'sku-003',
+    product_name: 'アクリルキーホルダー / 限定デザインA',
+    unit_price: 880,
+    quantity: 3,
+    image_url: 'https://placehold.co/100x100/ffcccc/666666?text=Key',
+  },
+]
+
+// 価格フォーマット関数
+const formatPrice = (price: number): string => {
+  return price.toLocaleString('ja-JP')
+}
+
+export const カートページ: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-footer': AppFooter,
+      'rn-page': Page,
+      'rn-stack': Stack,
+      'rn-button': Button,
+      'rn-text': Text,
+      'rn-icon': Icon,
+      'rn-divider': Divider,
+      'rn-spin-button': SpinButton,
+      'rn-image': Image,
+      'rn-card': Card,
+      'rn-alert': Alert,
+      'rn-spinner': Spinner,
+    },
+    setup() {
+      const cartItems = ref<CartItem[]>([...mockCartItems])
+      const isLoading = ref(false)
+      const error = ref<{ message: string } | null>(null)
+
+      // 商品小計
+      const productSubtotal = computed(() =>
+        cartItems.value.reduce(
+          (sum, item) => sum + item.unit_price * item.quantity,
+          0
+        )
+      )
+
+      // 手数料（固定値）
+      const otherFee = computed(() => 500)
+
+      // 合計
+      const total = computed(() => productSubtotal.value + otherFee.value)
+
+      // 数量変更
+      const handleQuantityChange = (item: CartItem, newQuantity: number) => {
+        const target = cartItems.value.find(
+          (i) => i.product_sku_id === item.product_sku_id
+        )
+        if (target) {
+          target.quantity = newQuantity
+        }
+      }
+
+      // 削除
+      const deleteCartListItemHandle = (item: CartItem) => {
+        cartItems.value = cartItems.value.filter(
+          (i) => i.product_sku_id !== item.product_sku_id
+        )
+      }
+
+      return {
+        // Shop data
+        shopData: mockShopData,
+        appBarMenu: mockAppBarMenu,
+        appBarActions: mockAppBarActions,
+        // Footer data
+        footerLogos: mockFooterLogos,
+        footerSnsLinks: mockFooterSnsLinks,
+        footerMenus: mockFooterMenusWithChildren,
+        // Cart data
+        cartItems,
+        isLoading,
+        error,
+        productSubtotal,
+        otherFee,
+        total,
+        // Methods
+        handleQuantityChange,
+        deleteCartListItemHandle,
+        formatPrice,
+      }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar
+          :title-logo="shopData.logoUrl"
+          :title="shopData.shopName"
+          :menu="appBarMenu"
+          :actions="appBarActions"
+        />
+
+        <rn-app-body>
+          <rn-page title="カート" sticky-mode="aside" :main-ratio="70">
+            <template #extra>
+              <rn-alert v-if="error" :message="error.message" type="error" />
+            </template>
+
+            <template #body>
+              <rn-stack horizontal-re-size="fill" direction="vertical">
+                <rn-spinner v-if="isLoading" />
+                <template v-else-if="cartItems.length > 0">
+                  <rn-stack direction="vertical" horizontal-re-size="fill">
+                    <template v-for="item in cartItems" :key="item.product_sku_id">
+                      <rn-stack horizontal-re-size="fill">
+                        <rn-image
+                          v-if="item.image_url"
+                          :src="item.image_url"
+                          alt="商品画像"
+                          width="100"
+                          height="100"
+                        />
+                        <rn-stack direction="vertical" horizontal-re-size="fill">
+                          <rn-stack direction="vertical" gap="xs">
+                            <rn-text>{{ item.product_name }}</rn-text>
+                            <rn-text color="subtle">¥{{ formatPrice(item.unit_price) }}</rn-text>
+                          </rn-stack>
+                          <rn-stack
+                            vertical-align="center"
+                            horizontal-re-size="fill"
+                            horizontal-align="between"
+                          >
+                            <rn-stack vertical-align="center">
+                              <rn-spin-button
+                                :model-value="item.quantity"
+                                :min="1"
+                                :show-delete-at-min="true"
+                                @update:model-value="(newValue) => handleQuantityChange(item, newValue)"
+                                @delete="deleteCartListItemHandle(item)"
+                              />
+                              <rn-button variant="text" @click="deleteCartListItemHandle(item)">
+                                <rn-icon :icon="['far', 'trash']" />
+                              </rn-button>
+                            </rn-stack>
+                            <rn-text>¥{{ formatPrice(item.unit_price * item.quantity) }}</rn-text>
+                          </rn-stack>
+                        </rn-stack>
+                      </rn-stack>
+                      <rn-divider />
+                    </template>
+                  </rn-stack>
+                </template>
+                <template v-else>
+                  <rn-stack
+                    horizontal-re-size="fill"
+                    direction="vertical"
+                    horizontal-align="center"
+                    vertical-align="center"
+                    style="min-height: 400px"
+                  >
+                    <rn-text size="subtitle" weight="bold">カートに商品はありません。</rn-text>
+                    <rn-button variant="text">
+                      <rn-icon :icon="['far', 'arrow-left']" size="sm" />
+                      TOPに戻る
+                    </rn-button>
+                  </rn-stack>
+                </template>
+              </rn-stack>
+            </template>
+
+            <template #aside>
+              <rn-stack v-if="cartItems.length > 0" horizontal-re-size="fill" direction="vertical">
+                <rn-stack horizontal-re-size="fill" direction="vertical">
+                  <rn-stack horizontal-re-size="fill" horizontal-align="between">
+                    <rn-text>商品小計</rn-text>
+                    <rn-text>¥{{ formatPrice(productSubtotal) }}</rn-text>
+                  </rn-stack>
+                  <rn-stack horizontal-re-size="fill" horizontal-align="between">
+                    <rn-text>手数料</rn-text>
+                    <rn-text>¥{{ formatPrice(otherFee) }}</rn-text>
+                  </rn-stack>
+                  <rn-stack horizontal-re-size="fill" horizontal-align="between">
+                    <rn-text>合計(税込)</rn-text>
+                    <rn-text>¥{{ formatPrice(total) }}</rn-text>
+                  </rn-stack>
+                </rn-stack>
+
+                <rn-stack horizontal-re-size="fill">
+                  <rn-text size="caption" color="subtle">
+                    ＊決済手数料はチェックアウト時に計算されます。
+                  </rn-text>
+                </rn-stack>
+
+                <rn-stack horizontal-re-size="fill">
+                  <rn-button :style="{ width: '100%' }">購入の手続きに進む</rn-button>
+                </rn-stack>
+
+                <rn-stack horizontal-re-size="fill" horizontal-align="center">
+                  <rn-button variant="text">
+                    <rn-stack direction="horizontal" vertical-align="center" gap="sm">
+                      <rn-icon :icon="['fas', 'chevron-left']" size="sm" color="subtle" />
+                      <rn-text color="subtle">買い物を続ける</rn-text>
+                    </rn-stack>
+                  </rn-button>
+                </rn-stack>
+
+                <rn-card :elevation="false" color="muted" variant="tonal">
+                  <template #header>
+                    <rn-stack gap="xs" vertical-align="center">
+                      <rn-icon :icon="['far', 'circle-info']" size="sm" />
+                      <rn-text size="subtitle" weight="bold">注意事項</rn-text>
+                    </rn-stack>
+                  </template>
+                  <rn-stack direction="vertical" gap="xs">
+                    <rn-text size="caption">
+                      ※ご注文確定するまでは、カートに商品が入っていても在庫は確保されません。予めご了承ください。
+                    </rn-text>
+                    <rn-text size="caption">
+                      ※在庫の少ない商品は、ご注文手続き中に在庫切れとなる場合があります。
+                    </rn-text>
+                    <rn-text size="caption">
+                      ※ご注文手続き中に、ご注文商品の販売期間が終了してしまった場合、ご注文はできません
+                    </rn-text>
+                  </rn-stack>
+                </rn-card>
+              </rn-stack>
+            </template>
+          </rn-page>
+        </rn-app-body>
+
+        <rn-app-footer
+          :logos="footerLogos"
+          :sns-links="footerSnsLinks"
+          :menus="footerMenus"
+          copyright="© 2024 Sample Store. All rights reserved."
+        />
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const カートページ_空の状態: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-footer': AppFooter,
+      'rn-page': Page,
+      'rn-stack': Stack,
+      'rn-button': Button,
+      'rn-text': Text,
+      'rn-icon': Icon,
+    },
+    setup() {
+      return {
+        shopData: mockShopData,
+        appBarMenu: mockAppBarMenu,
+        appBarActions: mockAppBarActions,
+        footerLogos: mockFooterLogos,
+        footerSnsLinks: mockFooterSnsLinks,
+        footerMenus: mockFooterMenusWithChildren,
+      }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar
+          :title-logo="shopData.logoUrl"
+          :title="shopData.shopName"
+          :menu="appBarMenu"
+          :actions="appBarActions"
+        />
+
+        <rn-app-body>
+          <rn-page title="カート" sticky-mode="aside" :main-ratio="70">
+            <template #body>
+              <rn-stack
+                horizontal-re-size="fill"
+                direction="vertical"
+                horizontal-align="center"
+                vertical-align="center"
+                style="min-height: 400px"
+              >
+                <rn-text size="subtitle" weight="bold">カートに商品はありません。</rn-text>
+                <rn-button variant="text">
+                  <rn-icon :icon="['far', 'arrow-left']" size="sm" />
+                  TOPに戻る
+                </rn-button>
+              </rn-stack>
+            </template>
+          </rn-page>
+        </rn-app-body>
+
+        <rn-app-footer
+          :logos="footerLogos"
+          :sns-links="footerSnsLinks"
+          :menus="footerMenus"
+          copyright="© 2024 Sample Store. All rights reserved."
+        />
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const カートページ_ローディング: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-footer': AppFooter,
+      'rn-page': Page,
+      'rn-stack': Stack,
+      'rn-spinner': Spinner,
+    },
+    setup() {
+      return {
+        shopData: mockShopData,
+        appBarMenu: mockAppBarMenu,
+        appBarActions: mockAppBarActions,
+        footerLogos: mockFooterLogos,
+        footerSnsLinks: mockFooterSnsLinks,
+        footerMenus: mockFooterMenusWithChildren,
+      }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar
+          :title-logo="shopData.logoUrl"
+          :title="shopData.shopName"
+          :menu="appBarMenu"
+          :actions="appBarActions"
+        />
+
+        <rn-app-body>
+          <rn-page title="カート" sticky-mode="aside" :main-ratio="70">
+            <template #body>
+              <rn-stack
+                horizontal-re-size="fill"
+                direction="vertical"
+                horizontal-align="center"
+                vertical-align="center"
+                style="min-height: 400px"
+              >
+                <rn-spinner />
+              </rn-stack>
+            </template>
+          </rn-page>
+        </rn-app-body>
+
+        <rn-app-footer
+          :logos="footerLogos"
+          :sns-links="footerSnsLinks"
+          :menus="footerMenus"
+          copyright="© 2024 Sample Store. All rights reserved."
+        />
+      </rn-app-frame>
+    `,
+  }),
+}