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

package/src/stories/ProductPurchase.stories.ts

@@ -0,0 +1,807 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ProductPurchase, {
+  type ProductPurchaseProps,
+} from '@/components/features/ProductPurchase.vue'
+import { action } from '@storybook/addon-actions'
+import { ref } from 'vue'
+
+const meta: Meta<typeof ProductPurchase> = {
+  title: 'Features/ProductPurchase',
+  component: ProductPurchase,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '商品情報の表示とカートに入れる機能を持つコンポーネント。レスポンシブデザインで、スマホでは縦レイアウト、PCでは横レイアウトになります。',
+      },
+    },
+  },
+  argTypes: {
+    product: {
+      control: 'object',
+      description: '商品情報オブジェクト',
+    },
+    defaultVariationId: {
+      control: 'text',
+      description: '初期選択バリエーションID',
+    },
+    defaultQuantity: {
+      control: 'number',
+      description: '初期数量',
+    },
+    quantityMin: {
+      control: 'number',
+      description: '最小数量',
+    },
+    quantityMax: {
+      control: 'number',
+      description: '最大数量',
+    },
+    quantityStep: {
+      control: 'number',
+      description: '数量ステップ',
+    },
+    disabled: {
+      control: 'boolean',
+      description: '全体無効化',
+    },
+    submitting: {
+      control: 'boolean',
+      description: '送信中状態',
+    },
+    showImage: {
+      control: 'boolean',
+      description: '画像表示',
+    },
+    showQuantity: {
+      control: 'boolean',
+      description: '数量選択表示',
+    },
+    showVariation: {
+      control: 'boolean',
+      description: 'バリエーション選択表示',
+    },
+    addToCartLabel: {
+      control: 'text',
+      description: 'カートボタンのラベル',
+    },
+    // Events
+    addToCart: {
+      action: 'add-to-cart',
+      description: 'カートに追加時に発火するイベント',
+      control: false,
+      table: {
+        category: 'Events',
+        type: {
+          summary:
+            '(payload: { product: Product, variationId: string | null, quantity: number }) => void',
+        },
+      },
+    },
+    // Slots
+    description: {
+      control: false,
+      description: '商品説明を表示するスロット',
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'slot',
+        },
+      },
+    },
+  },
+  args: {
+    product: {
+      id: 'product-1',
+      title: 'Product name',
+      price: 3000,
+      price_prefix_freeWord: '各種 ',
+      subtitle1: 'Title1',
+      subtitle2: 'Title2',
+      imageUrls: [
+        'https://placehold.jp/600x600/ff6b6b/fff?text=Product+1',
+        'https://placehold.jp/600x600/4ecdc4/fff?text=Product+2',
+        'https://placehold.jp/600x600/45b7d1/fff?text=Product+3',
+        'https://placehold.jp/600x600/f9ca24/000?text=Product+4',
+      ],
+      variations: [
+        { id: 'var1', label: 'ホワイト / S', available: true },
+        { id: 'var2', label: 'ブラック / S', available: true },
+        { id: 'var3', label: 'ホワイト / M', available: true },
+        { id: 'var4', label: 'ブラック / M', available: false },
+      ],
+    },
+    defaultQuantity: 1,
+    quantityMin: 1,
+    quantityMax: 99,
+    quantityStep: 1,
+    disabled: false,
+    submitting: false,
+    showImage: true,
+    showQuantity: true,
+    showVariation: true,
+    addToCartLabel: 'カートに入れる',
+  },
+}
+
+export default meta
+type StoryArgs = ProductPurchaseProps
+type Story = StoryObj<StoryArgs>
+
+// モックの商品データ
+const createMockProduct = (overrides = {}) => ({
+  id: 'product-1',
+  title: 'オフィシャルTシャツ',
+  price: 3500,
+  price_prefix_freeWord: '各種 ',
+  subtitle1: 'RENI',
+  subtitle2: 'Official Merchandise',
+  imageUrls: [
+    'https://placehold.jp/600x600/ff6b6b/fff?text=Product+Front',
+    'https://placehold.jp/600x600/4ecdc4/fff?text=Product+Back',
+    'https://placehold.jp/600x600/45b7d1/fff?text=Detail+1',
+    'https://placehold.jp/600x600/f9ca24/000?text=Detail+2',
+    'https://placehold.jp/600x600/6c5ce7/fff?text=Model+Wear',
+  ],
+  variations: [
+    { id: 'white-s', label: 'ホワイト / S', available: true },
+    { id: 'white-m', label: 'ホワイト / M', available: true },
+    { id: 'white-l', label: 'ホワイト / L', available: true },
+    { id: 'black-s', label: 'ブラック / S', available: true },
+    { id: 'black-m', label: 'ブラック / M', available: true },
+    { id: 'black-l', label: 'ブラック / L', available: false },
+  ],
+  ...overrides,
+})
+
+export const 価格プレフィックスなし: Story = {
+  args: {
+    product: createMockProduct({
+      price_prefix_freeWord: '', // プレフィックスなし
+      price: 2980,
+    }),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>価格プレフィックスなし</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 基本表示: Story = {
+  args: {
+    product: createMockProduct(),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>基本表示</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 単一バリエーション_I_F確認: Story = {
+  args: {
+    product: createMockProduct({
+      variations: [
+        { id: 'only-variation', label: 'ワンサイズ', available: true },
+      ],
+      imageUrls: [
+        'https://placehold.jp/600x600/27ae60/fff?text=Single+Variation',
+      ],
+    }),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const submitting = ref(false)
+      const disabled = ref(false)
+      const lastAddToCartData = ref<any>(null)
+
+      const handleAddToCart = async (payload: any) => {
+        action('add-to-cart')(payload)
+
+        // I/F情報を保存
+        lastAddToCartData.value = payload
+
+        // 送信中状態をシミュレート
+        submitting.value = true
+
+        await new Promise((resolve) => setTimeout(resolve, 1500))
+
+        submitting.value = false
+      }
+
+      const toggleDisabled = () => {
+        disabled.value = !disabled.value
+      }
+
+      const clearData = () => {
+        lastAddToCartData.value = null
+      }
+
+      return {
+        args,
+        handleAddToCart,
+        submitting,
+        disabled,
+        toggleDisabled,
+        lastAddToCartData,
+        clearData,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>🔍 単一バリエーション addToCart I/F確認</h3>
+        <div style="margin-bottom: 16px;">
+          <button @click="toggleDisabled" style="padding: 8px 16px; margin-right: 8px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            {{ disabled ? '有効化' : '無効化' }}
+          </button>
+          <button v-if="lastAddToCartData" @click="clearData" style="padding: 8px 16px; margin-right: 8px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            データをクリア
+          </button>
+          <span style="color: #6c757d;">※ セレクトボックスが非表示でも、カートに追加時にvariationIdが渡されることを確認</span>
+        </div>
+        
+        <!-- addToCartイベントのI/F表示 -->
+        <div v-if="lastAddToCartData" style="background: #d4edda; border: 1px solid #27ae60; border-radius: 8px; padding: 20px; margin-bottom: 24px;">
+          <h4 style="margin-top: 0; color: #27ae60; display: flex; align-items: center;">
+            <span style="margin-right: 8px;">🎯</span>
+            addToCart イベントデータ（単一バリエーション）
+          </h4>
+          
+          <div style="background: #ffffff; padding: 16px; border-radius: 6px; margin-bottom: 16px;">
+            <pre style="margin: 0; overflow-x: auto; font-size: 14px; line-height: 1.4;">{{ JSON.stringify(lastAddToCartData, null, 2) }}</pre>
+          </div>
+          
+          <div style="font-size: 14px; color: #495057;">
+            <h5 style="margin: 0 0 8px 0; color: #27ae60;">✅ 重要ポイント</h5>
+            <div style="background: #f8f9fa; padding: 12px; border-radius: 4px; border-left: 4px solid #27ae60;">
+              <div style="margin-bottom: 8px;">• セレクトボックスは非表示（バリエーションが1つのため）</div>
+              <div style="margin-bottom: 8px;">• <code style="background: #e9ecef; padding: 2px 6px; border-radius: 3px;">variationId</code> には自動で "only-variation" が設定される</div>
+              <div style="margin-bottom: 8px;">• ユーザーは選択操作なしでカートに追加可能</div>
+              <div>• バリエーション情報は確実に渡される</div>
+            </div>
+          </div>
+        </div>
+        
+        <rn-product-purchase 
+          v-bind="args" 
+          :submitting="submitting"
+          :disabled="disabled"
+          @add-to-cart="handleAddToCart"
+        >
+          <template #description>
+            <div style="padding: 16px; background: #d1ecf1; border: 1px solid #17a2b8; border-radius: 8px; margin-top: 16px;">
+              <h4>📝 動作確認ポイント</h4>
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li>バリエーション選択エリアが表示されない</li>
+                <li>「カートに入れる」ボタンがすぐに押せる</li>
+                <li>AddCart時にvariationId="only-variation"が渡される</li>
+                <li>ユーザー体験として自然な流れ</li>
+              </ul>
+            </div>
+          </template>
+        </rn-product-purchase>
+      </div>
+    `,
+  }),
+}
+
+export const addToCartI_F確認: Story = {
+  args: {
+    product: createMockProduct(),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const submitting = ref(false)
+      const disabled = ref(false)
+      const lastAddToCartData = ref<any>(null)
+
+      const handleAddToCart = async (payload: any) => {
+        action('add-to-cart')(payload)
+
+        // I/F情報を保存
+        lastAddToCartData.value = payload
+
+        // 送信中状態をシミュレート
+        submitting.value = true
+
+        await new Promise((resolve) => setTimeout(resolve, 1500))
+
+        submitting.value = false
+      }
+
+      const toggleDisabled = () => {
+        disabled.value = !disabled.value
+      }
+
+      const clearData = () => {
+        lastAddToCartData.value = null
+      }
+
+      return {
+        args,
+        handleAddToCart,
+        submitting,
+        disabled,
+        toggleDisabled,
+        lastAddToCartData,
+        clearData,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>🔍 addToCart イベントI/F確認（複数バリエーション）</h3>
+        <div style="margin-bottom: 16px;">
+          <button @click="toggleDisabled" style="padding: 8px 16px; margin-right: 8px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            {{ disabled ? '有効化' : '無効化' }}
+          </button>
+          <button v-if="lastAddToCartData" @click="clearData" style="padding: 8px 16px; margin-right: 8px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
+            データをクリア
+          </button>
+          <span style="color: #6c757d;">※ カートに追加ボタンを押すと、下にイベントデータが表示されます</span>
+        </div>
+        
+        <!-- addToCartイベントのI/F表示 -->
+        <div v-if="lastAddToCartData" style="background: #d1edff; border: 1px solid #0066cc; border-radius: 8px; padding: 20px; margin-bottom: 24px;">
+          <h4 style="margin-top: 0; color: #0066cc; display: flex; align-items: center;">
+            <span style="margin-right: 8px;">🎯</span>
+            addToCart イベントデータ
+          </h4>
+          
+          <div style="background: #ffffff; padding: 16px; border-radius: 6px; margin-bottom: 16px;">
+            <pre style="margin: 0; overflow-x: auto; font-size: 14px; line-height: 1.4;">{{ JSON.stringify(lastAddToCartData, null, 2) }}</pre>
+          </div>
+          
+          <div style="font-size: 14px; color: #495057;">
+            <h5 style="margin: 0 0 8px 0; color: #0066cc;">📋 イベントI/F仕様</h5>
+            <div style="background: #f8f9fa; padding: 12px; border-radius: 4px; border-left: 4px solid #0066cc;">
+              <div style="margin-bottom: 8px;"><code style="background: #e9ecef; padding: 2px 6px; border-radius: 3px;">product</code>: 商品オブジェクト (object)</div>
+              <div style="padding-left: 16px; font-size: 13px; color: #6c757d; margin-bottom: 8px;">
+                • id, title, price, subtitle1, subtitle2, imageUrls, variations を含む
+              </div>
+              <div style="margin-bottom: 8px;"><code style="background: #e9ecef; padding: 2px 6px; border-radius: 3px;">variationId</code>: 選択バリエーションID (string | null)</div>
+              <div style="padding-left: 16px; font-size: 13px; color: #6c757d; margin-bottom: 8px;">
+                • バリエーションが選択されていない場合はnull
+              </div>
+              <div><code style="background: #e9ecef; padding: 2px 6px; border-radius: 3px;">quantity</code>: 選択数量 (number)</div>
+              <div style="padding-left: 16px; font-size: 13px; color: #6c757d;">
+                • SpinButtonで選択された数量
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <rn-product-purchase 
+          v-bind="args" 
+          :submitting="submitting"
+          :disabled="disabled"
+          @add-to-cart="handleAddToCart"
+        >
+          <template #description>
+            <div style="padding: 16px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; margin-top: 16px;">
+              <h4>💡 使用方法</h4>
+              <ol style="margin: 8px 0; padding-left: 20px;">
+                <li>バリエーション（サイズ・カラー）を選択</li>
+                <li>数量を調整</li>
+                <li>「カートに入れる」ボタンをクリック</li>
+                <li>上に表示されるイベントデータを確認</li>
+              </ol>
+              <p style="margin: 8px 0 0 0; font-size: 14px; color: #856404;">
+                <strong>Actionsタブ</strong> でも同じデータを確認できます。
+              </p>
+            </div>
+          </template>
+        </rn-product-purchase>
+      </div>
+    `,
+  }),
+}
+
+export const 説明スロット付き: Story = {
+  args: {
+    product: createMockProduct(),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>説明スロット付き</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        >
+          <template #description>
+            <div style="padding: 16px; background: #f5f5f5; border-radius: 8px; margin-top: 16px;">
+              <p><strong>商品説明</strong></p>
+              <p>こちらはProductの公式グッズです。高品質なコットン100%で作られており、着心地抜群です。</p>
+              <ul>
+                <li>素材：コットン100%</li>
+                <li>サイズ：S, M, L展開</li>
+                <li>カラー：ホワイト、ブラック</li>
+                <li>洗濯：冷水で手洗い推奨</li>
+              </ul>
+            </div>
+          </template>
+        </rn-product-purchase>
+      </div>
+    `,
+  }),
+}
+
+export const バリエーション無し: Story = {
+  args: {
+    product: createMockProduct({
+      variations: [],
+      imageUrls: [
+        'https://placehold.jp/600x600/f39c12/fff?text=Single+Image+Product',
+      ],
+    }),
+    showVariation: false,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>バリエーション無し</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 単一バリエーション: Story = {
+  args: {
+    product: createMockProduct({
+      variations: [{ id: 'only-one', label: 'フリーサイズ', available: true }],
+      imageUrls: [
+        'https://placehold.jp/600x600/e74c3c/fff?text=Free+Size+Only',
+      ],
+    }),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>単一バリエーション（セレクトボックス非表示・自動選択）</h3>
+        <p style="color: #666; margin-bottom: 16px;">バリエーションが1つの場合、セレクトボックスは表示されず、AddCart時に暗黙的にそのバリエーションが選択されます。</p>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 画像無し: Story = {
+  args: {
+    product: createMockProduct({
+      imageUrls: [],
+    }),
+    showImage: false,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>画像無し</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 数量制限: Story = {
+  args: {
+    product: createMockProduct(),
+    quantityMin: 2,
+    quantityMax: 5,
+    defaultQuantity: 2,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>数量制限（最小2個、最大5個）</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 無効化状態: Story = {
+  args: {
+    product: createMockProduct(),
+    disabled: true,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>無効化状態</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 送信中状態: Story = {
+  args: {
+    product: createMockProduct(),
+    submitting: true,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>送信中状態</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const カスタムボタンテキスト: Story = {
+  args: {
+    product: createMockProduct(),
+    addToCartLabel: '今すぐ購入',
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>カスタムボタンテキスト</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 最小構成: Story = {
+  args: {
+    product: createMockProduct({
+      subtitle1: undefined,
+      subtitle2: undefined,
+      imageUrls: [],
+      variations: [],
+    }),
+    showImage: false,
+    showVariation: false,
+    showQuantity: false,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>最小構成（タイトルとボタンのみ）</h3>
+        <rn-product-purchase 
+          v-bind="args" 
+          @add-to-cart="handleAddToCart"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const インタラクティブデモ: Story = {
+  args: {
+    product: createMockProduct(),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const submitting = ref(false)
+      const disabled = ref(false)
+
+      const handleAddToCart = async (payload: any) => {
+        action('add-to-cart')(payload)
+
+        // 送信中状態をシミュレート
+        submitting.value = true
+
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+
+        submitting.value = false
+        alert(
+          `カートに追加しました！\n商品ID: ${payload.product.id}\nバリエーション: ${payload.variationId}\n数量: ${payload.quantity}個`,
+        )
+      }
+
+      const toggleDisabled = () => {
+        disabled.value = !disabled.value
+      }
+
+      return {
+        args,
+        handleAddToCart,
+        submitting,
+        disabled,
+        toggleDisabled,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; max-width: 1200px;">
+        <h3>インタラクティブデモ</h3>
+        <div style="margin-bottom: 16px;">
+          <button @click="toggleDisabled" style="padding: 8px 16px; margin-right: 8px;">
+            {{ disabled ? '有効化' : '無効化' }}
+          </button>
+          <span>※カートに追加すると送信中状態をシミュレートします</span>
+        </div>
+        
+        <rn-product-purchase 
+          v-bind="args" 
+          :submitting="submitting"
+          :disabled="disabled"
+          @add-to-cart="handleAddToCart"
+        >
+          <template #description>
+            <div style="padding: 16px; background: #f0f8ff; border: 1px solid #b3d9ff; border-radius: 8px; margin-top: 16px;">
+              <h4>🎵 RENI オフィシャルグッズ</h4>
+              <p>RENIの公式Tシャツです。ファン必見のアイテム！</p>
+              <p><strong>特徴：</strong></p>
+              <ul>
+                <li>高品質プリント技術を使用</li>
+                <li>着心地の良いコットン素材</li>
+                <li>オフィシャルライセンス商品</li>
+                <li>数量限定生産</li>
+              </ul>
+            </div>
+          </template>
+        </rn-product-purchase>
+      </div>
+    `,
+  }),
+}
+
+export const レスポンシブプレビュー: Story = {
+  args: {
+    product: createMockProduct(),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-purchase': ProductPurchase,
+    },
+    setup() {
+      const handleAddToCart = action('add-to-cart')
+      return { args, handleAddToCart }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>レスポンシブプレビュー</h3>
+        <p>ブラウザの幅を変更して、レイアウトの変化を確認してください。</p>
+        <p>768px未満：縦レイアウト（画像上、情報下）</p>
+        <p>768px以上：横レイアウト（画像左、情報右）</p>
+        
+        <!-- PCレイアウトプレビュー -->
+        <div style="margin-bottom: 40px;">
+          <h4>PCレイアウト (768px以上)</h4>
+          <div style="min-width: 800px; border: 2px dashed #ccc; padding: 16px;">
+            <rn-product-purchase 
+              v-bind="args" 
+              @add-to-cart="handleAddToCart"
+            />
+          </div>
+        </div>
+        
+        <!-- スマホレイアウトプレビュー -->
+        <div>
+          <h4>スマホレイアウト (767px以下)</h4>
+          <div style="max-width: 375px; border: 2px dashed #ccc; padding: 16px;">
+            <rn-product-purchase 
+              v-bind="args" 
+              @add-to-cart="handleAddToCart"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}