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

package/src/stories/ProductList.stories.ts

@@ -0,0 +1,679 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ProductList, {
+  type ProductListProps,
+} from '@/components/features/ProductList.vue'
+import Button from '@/components/elements/Button.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Divider from '@/components/elements/Divider.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof ProductList> = {
+  title: 'Features/ProductList',
+  component: ProductList,
+  tags: ['autodocs'],
+  argTypes: {
+    displayMode: {
+      control: 'select',
+      options: ['list', 'carousel', 'carousel-peek'],
+    },
+    paginationType: {
+      control: 'select',
+      options: ['bullets', 'scrollbar'],
+    },
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+    itemType: {
+      control: 'select',
+      options: ['default', 'boxed'],
+    },
+    pcRows: { control: 'number' },
+    pcColumns: { control: 'number' },
+    spRows: { control: 'number' },
+    spColumns: { control: 'number' },
+    breakpoint: { control: 'number' },
+    loading: { control: 'boolean' },
+    autoplay: { control: 'boolean' },
+    infiniteScroll: { control: 'boolean' },
+    hasMore: { control: 'boolean' },
+    loadingMore: { control: 'boolean' },
+    showTitle2: { control: 'boolean' },
+  },
+  args: {
+    displayMode: 'list',
+    paginationType: 'bullets',
+    theme: 'light',
+    itemType: 'default',
+    pcRows: 2,
+    pcColumns: 4,
+    spRows: 2,
+    spColumns: 2,
+    breakpoint: 768,
+    loading: false,
+    autoplay: false,
+    infiniteScroll: false,
+    hasMore: false,
+    loadingMore: false,
+    showTitle2: true,
+  },
+}
+
+export default meta
+type StoryArgs = ProductListProps
+type Story = StoryObj<StoryArgs>
+
+// モックデータ生成関数
+const generateMockProducts = (count: number) => {
+  const products = []
+  for (let i = 1; i <= count; i++) {
+    let labelUrls: string[] = []
+    let labelTexts: { id: string; text: string }[] = []
+    let soldoutUrl = ''
+
+    // 各商品のラベル設定
+    if (i % 7 === 1) {
+      // 単一ラベル（7個に1個）
+      labelUrls = ['https://assets.official-goods-store.jp/label/YUR001.png']
+    } else if (i % 7 === 2) {
+      // 複数ラベル（7個に1個）
+      labelUrls = [
+        'https://assets.official-goods-store.jp/label/YUR001.png',
+        'https://assets.official-goods-store.jp/label/KTK007.png',
+      ]
+    } else if (i % 7 === 3) {
+      // Soldoutラベル（7個に1個）
+      soldoutUrl =
+        'https://official-goods-store.jp/yuuri/assets/img/yuuri/soldout.png'
+    }
+
+    if (i % 7 === 1) {
+      // 単一ラベルテキスト（7個に1個）
+      labelTexts = [{ id: 'YUR001', text: '受注生産' }]
+    } else if (i % 7 === 2) {
+      // 複数ラベルテキスト（7個に1個）
+      labelTexts = [
+        { id: 'YUR001', text: '受注生産' },
+        { id: 'KTK007', text: '新商品' },
+      ]
+    }
+
+    products.push({
+      product_id: `product_${i}`,
+      product_code: `ZMY-DESIGN3-${String(i).padStart(3, '0')}`,
+      title: `ZUTOMAYO 商品 ${i}`,
+      title2: `THE WORLD IS CHANGING ${i}`,
+      price_sale: Math.floor(Math.random() * 8000) + 1000,
+      price_prefix_freeWord: '', // 空文字（CurrencyValueで円記号が自動追加される）
+      slide: 1,
+      product_url: `https://example.com/products/product_${i}`,
+      img_urls: [
+        `https://placehold.jp/400x400.png?text=Product${i}`,
+        `https://placehold.jp/400x400.png?text=Image${i}-2`,
+        `https://placehold.jp/400x400.png?text=Image${i}-3`,
+        `https://placehold.jp/400x400.png?text=Image${i}-4`,
+      ],
+      label_urls: labelUrls,
+      label_texts: labelTexts,
+      soldout_url: soldoutUrl,
+      is_forced_publish: i % 5 === 0, // 5個に1個は受付期間外
+    })
+  }
+  return products
+}
+
+export const 基本リスト: Story = {
+  args: {
+    displayMode: 'list',
+    data: generateMockProducts(12),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>商品リスト（基本）</h3>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const カルーセル: Story = {
+  args: {
+    displayMode: 'carousel',
+    paginationType: 'bullets',
+    data: generateMockProducts(16),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>商品カルーセル（ドット）</h3>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const カルーセルピーク: Story = {
+  args: {
+    displayMode: 'carousel-peek',
+    data: generateMockProducts(10),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>商品カルーセル（ピーク効果）</h3>
+        <p>モバイルサイズでピーク効果を確認できます</p>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const スクロールバー: Story = {
+  args: {
+    displayMode: 'carousel',
+    paginationType: 'scrollbar',
+    data: generateMockProducts(20),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>カルーセル（スクロールバー）</h3>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const ダークテーマ: Story = {
+  args: {
+    displayMode: 'carousel',
+    theme: 'dark',
+    data: generateMockProducts(12),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px; background: #1a1a1a;">
+        <h3 style="color: white;">商品リスト（ダークテーマ）</h3>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const ローディング状態: Story = {
+  args: {
+    loading: true,
+    displayMode: 'list',
+    data: [],
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>ローディング状態</h3>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const エラー状態: Story = {
+  args: {
+    error: new Error('商品データの読み込みに失敗しました'),
+    displayMode: 'list',
+    data: [],
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>エラー状態</h3>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const 無限スクロール: Story = {
+  args: {
+    displayMode: 'list',
+    infiniteScroll: true,
+    hasMore: true,
+    loadingMore: false,
+    data: generateMockProducts(8),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      const products = ref([...args.data])
+      const loadingMore = ref(false)
+      const hasMore = ref(true)
+
+      const handleLoadMore = async () => {
+        loadingMore.value = true
+
+        // 模拟API调用
+        await new Promise((resolve) => setTimeout(resolve, 1500))
+
+        // 新しい商品を追加
+        const newProducts = generateMockProducts(4).map((item, index) => ({
+          ...item,
+          product_id: `product_${products.value.length + index + 1}`,
+          product_code: `ZMY-DESIGN3-${String(products.value.length + index + 1).padStart(3, '0')}`,
+          title: `ZUTOMAYO 商品 ${products.value.length + index + 1}`,
+        }))
+
+        products.value.push(...newProducts)
+        loadingMore.value = false
+
+        // 40個で終了
+        if (products.value.length >= 40) {
+          hasMore.value = false
+        }
+      }
+
+      return {
+        products,
+        loadingMore,
+        hasMore,
+        handleLoadMore,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>無限スクロール</h3>
+        <p>下にスクロールすると自動的に追加読み込みします</p>
+        <rn-product-list 
+          :data="products"
+          :infinite-scroll="true"
+          :has-more="hasMore"
+          :loading-more="loadingMore"
+          display-mode="list"
+          @load-more="handleLoadMore"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const appendスロット: Story = {
+  args: {
+    displayMode: 'list',
+    hasMore: true,
+    loadingMore: false,
+    data: generateMockProducts(8),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+      'rn-button': Button,
+    },
+    setup() {
+      const products = ref([...args.data])
+      const loadingMore = ref(false)
+      const hasMore = ref(true)
+
+      const handleLoadMore = async () => {
+        loadingMore.value = true
+
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
+        const newProducts = generateMockProducts(4).map((item, index) => ({
+          ...item,
+          product_id: `product_${products.value.length + index + 1}`,
+          product_code: `ZMY-DESIGN3-${String(products.value.length + index + 1).padStart(3, '0')}`,
+          title: `ZUTOMAYO 商品 ${products.value.length + index + 1}`,
+        }))
+
+        products.value.push(...newProducts)
+        loadingMore.value = false
+
+        if (products.value.length >= 24) {
+          hasMore.value = false
+        }
+      }
+
+      return {
+        products,
+        loadingMore,
+        hasMore,
+        handleLoadMore,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>appendスロット活用</h3>
+        <rn-product-list 
+          :data="products"
+          :has-more="hasMore"
+          :loading-more="loadingMore"
+          display-mode="list"
+          @load-more="handleLoadMore"
+        >
+          <template #append="{ hasMore, loadingMore, loadMore, totalItems }">
+            <div style="text-align: center; padding: 20px;" v-if="hasMore">
+              <rn-button 
+                @click="loadMore" 
+                :loading="loadingMore"
+                variant="fill"
+                color="primary"
+              >
+                さらに読み込む（{{ totalItems }}件表示中）
+              </rn-button>
+            </div>
+            <div v-else style="text-align: center; padding: 20px; color: #666;">
+              すべての商品を表示しました（{{ totalItems }}件）
+            </div>
+          </template>
+        </rn-product-list>
+      </div>
+    `,
+  }),
+}
+
+export const footerスロット: Story = {
+  args: {
+    displayMode: 'list',
+    data: generateMockProducts(12),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+      'rn-button': Button,
+      'rn-stack': Stack,
+      'rn-divider': Divider,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>footerスロット活用</h3>
+        <rn-product-list v-bind="args">
+          <template #footer="{ totalItems, displayMode }">
+            <rn-divider />
+            <rn-stack direction="vertical" gap="md" horizontal-align="center" style="padding: 24px 0;">
+              <p style="color: #666; margin: 0;">
+                {{ totalItems }}件の商品を{{ displayMode }}形式で表示中
+              </p>
+              <rn-stack direction="horizontal" gap="sm" horizontal-align="center">
+                <rn-button href="/products/all" variant="fill" color="primary">
+                  すべての商品を見る
+                </rn-button>
+                <rn-button href="/categories" variant="text" color="default">
+                  カテゴリから探す
+                </rn-button>
+              </rn-stack>
+            </rn-stack>
+          </template>
+        </rn-product-list>
+      </div>
+    `,
+  }),
+}
+
+export const 両方のスロット使用: Story = {
+  args: {
+    displayMode: 'carousel',
+    hasMore: true,
+    loadingMore: false,
+    data: generateMockProducts(8),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+      'rn-button': Button,
+      'rn-stack': Stack,
+      'rn-divider': Divider,
+    },
+    setup() {
+      const products = ref([...args.data])
+      const loadingMore = ref(false)
+      const hasMore = ref(true)
+
+      const handleLoadMore = async () => {
+        loadingMore.value = true
+        await new Promise((resolve) => setTimeout(resolve, 1200))
+
+        const newProducts = generateMockProducts(4).map((item, index) => ({
+          ...item,
+          product_id: `product_${products.value.length + index + 1}`,
+          product_code: `ZMY-DESIGN3-${String(products.value.length + index + 1).padStart(3, '0')}`,
+          title: `ZUTOMAYO 商品 ${products.value.length + index + 1}`,
+        }))
+
+        products.value.push(...newProducts)
+        loadingMore.value = false
+
+        if (products.value.length >= 20) {
+          hasMore.value = false
+        }
+      }
+
+      return {
+        products,
+        loadingMore,
+        hasMore,
+        handleLoadMore,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>appendスロット + footerスロット</h3>
+        <rn-product-list 
+          :data="products"
+          :has-more="hasMore"
+          :loading-more="loadingMore"
+          display-mode="carousel"
+          @load-more="handleLoadMore"
+        >
+          <template #append="{ hasMore, loadingMore, loadMore }">
+            <div v-if="hasMore" style="display: flex; align-items: center; justify-content: center; padding: 0 10px;">
+              <rn-button 
+                @click="loadMore" 
+                :loading="loadingMore"
+                variant="text"
+                color="primary"
+                size="sm"
+              >
+                もっと →
+              </rn-button>
+            </div>
+          </template>
+          
+          <template #footer="{ totalItems, displayMode }">
+            <rn-divider />
+            <rn-stack direction="vertical" gap="md" horizontal-align="center" style="padding: 24px 0;">
+              <p style="color: #666; margin: 0;">
+                {{ totalItems }}件の注目商品をご紹介
+              </p>
+              <rn-stack direction="horizontal" gap="sm" horizontal-align="center">
+                <rn-button href="/featured" variant="fill" color="primary">
+                  注目商品一覧
+                </rn-button>
+                <rn-button href="/new-arrivals" variant="text" color="default">
+                  新着商品
+                </rn-button>
+              </rn-stack>
+            </rn-stack>
+          </template>
+        </rn-product-list>
+      </div>
+    `,
+  }),
+}
+
+export const アイテムスロット設定: Story = {
+  args: {
+    displayMode: 'list',
+    pcRows: 2,
+    pcColumns: 5,
+    spRows: 3,
+    spColumns: 2,
+    breakpoint: 768,
+    data: generateMockProducts(20),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-text size="title">アイテムスロット活用 - ProductItemComponent利用</rn-text>
+        <rn-product-list v-bind="args">
+          <template #item="props">
+            <a :href="props.item.product_url" target="_blank">
+              <rn-product-list-item
+                :style="{ pointerEvents: 'none' }"
+                :item="props.item"
+                :autoplay="props.autoplay"
+                :type="props.itemType"
+              />
+            </a>
+          </template>
+        </rn-product-list>
+
+        <br><br><br>
+
+        <rn-text size="title">アイテムスロット活用 - 独自コンポーネント</rn-text>
+        <rn-product-list v-bind="args">
+          <template #item="{item}">
+             <rn-stack direction="vertical" gap="xs">
+               <rn-image :src="item.img_urls[0]" />
+               <rn-text size="caption">カスタマイズ表記テキスト</rn-text>
+               <rn-text>{{ item.title }}</rn-text>
+             </rn-stack>
+          </template>
+        </rn-product-list>        
+      </div>
+    `,
+  }),
+}
+
+export const レスポンシブ設定: Story = {
+  args: {
+    displayMode: 'list',
+    pcRows: 2,
+    pcColumns: 5,
+    spRows: 3,
+    spColumns: 2,
+    breakpoint: 768,
+    data: generateMockProducts(20),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>レスポンシブ設定</h3>
+        <p>PC: 5列×2行 / SP: 2列×3行（ブラウザサイズを変更して確認）</p>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const title2表示制御: Story = {
+  args: {
+    displayMode: 'list',
+    data: generateMockProducts(8),
+    showTitle2: true,
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      const showTitle2 = ref(args.showTitle2)
+
+      const toggleTitle2 = () => {
+        showTitle2.value = !showTitle2.value
+      }
+
+      return {
+        args: { ...args, showTitle2 },
+        toggleTitle2,
+        showTitle2,
+      }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <h3>title2表示制御</h3>
+            <p>showTitle2プロパティでtitle2（サブタイトル）の表示・非表示を制御できます</p>
+          </div>
+          
+          <rn-stack direction="horizontal" gap="sm">
+            <rn-button 
+              @click="toggleTitle2"
+              :variant="showTitle2 ? 'fill' : 'outline'"
+              color="primary"
+            >
+              {{ showTitle2 ? 'title2を非表示' : 'title2を表示' }}
+            </rn-button>
+            <span style="color: #666;">現在の設定: {{ showTitle2 ? '表示' : '非表示' }}</span>
+          </rn-stack>
+          
+          <rn-product-list 
+            :data="args.data"
+            :display-mode="args.displayMode"
+            :show-title2="showTitle2"
+          />
+        </rn-stack>
+      </div>
+    `,
+  }),
+}