@reni-corp/reni-2c-ui 0.4.8 → 0.4.10

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reni-corp/reni-2c-ui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "type": "module",
   "main": "./dist/script.umd.js",
   "module": "./dist/index.es.js",
@@ -107,6 +107,8 @@
     "eslint-plugin-vue": "^9.29.0",
     "globals": "^15.12.0",
     "happy-dom": "^20.0.0",
+    "msw": "^2.12.10",
+    "msw-storybook-addon": "^2.0.6",
     "plop": "^3.1.2",
     "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
@@ -130,5 +132,10 @@
     "vitest": "^4.0.18",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^1.8.5"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }

package/src/stories/DataProvider.stories.ts

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DataProvider from '@/components/renderless/DataProvider.vue'
+import ProductList from '@/components/features/ProductList.vue'
+import Tabs from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.vue'
+import Button from '@/components/elements/Button.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Text from '@/components/elements/Text.vue'
+import Spinner from '@/components/elements/Spinner.vue'
+import Divider from '@/components/elements/Divider.vue'
+import { ref, computed } from 'vue'
+
+const meta: Meta<typeof DataProvider> = {
+  title: 'Renderless/DataProvider',
+  component: DataProvider,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof DataProvider>
+
+const storyComponents = {
+  'rn-data-provider': DataProvider,
+  'rn-product-list': ProductList,
+  'rn-tabs': Tabs,
+  'rn-tab': Tab,
+  'rn-button': Button,
+  'rn-stack': Stack,
+  'rn-text': Text,
+  'rn-spinner': Spinner,
+  'rn-divider': Divider,
+}
+
+export const 基本: Story = {
+  render: () => ({
+    components: storyComponents,
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-data-provider url="/api/products" :limit="8" v-slot="{ data, loading, error }">
+          <rn-stack direction="vertical" horizontal-re-size="fill" gap="md">
+            <rn-stack v-if="loading" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" style="min-height: 200px;">
+              <rn-spinner size="md" />
+            </rn-stack>
+            <rn-text v-else-if="error" color="danger">{{ error.message }}</rn-text>
+            <rn-product-list v-else :data="data" :pc-columns="4" :sp-columns="2" />
+          </rn-stack>
+        </rn-data-provider>
+      </div>
+    `,
+  }),
+}
+
+export const ページネーション: Story = {
+  render: () => ({
+    components: storyComponents,
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-data-provider
+          url="/api/products"
+          :limit="8"
+          :pagination="true"
+          v-slot="{ data, loading, currentPage, next, prev }"
+        >
+          <rn-stack direction="vertical" horizontal-re-size="fill" gap="lg">
+            <rn-stack v-if="loading" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" style="min-height: 200px;">
+              <rn-spinner size="md" />
+            </rn-stack>
+            <template v-else>
+              <rn-product-list :data="data" :pc-columns="4" :sp-columns="2" />
+              <rn-stack direction="horizontal" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" gap="md">
+                <rn-button variant="outlined" size="sm" :disabled="currentPage <= 1" @click="prev">前へ</rn-button>
+                <rn-text size="body" weight="bold">{{ currentPage }}</rn-text>
+                <rn-button variant="outlined" size="sm" :disabled="data.length === 0" @click="next">次へ</rn-button>
+              </rn-stack>
+            </template>
+          </rn-stack>
+        </rn-data-provider>
+      </div>
+    `,
+  }),
+}
+
+export const 無限スクロール風: Story = {
+  render: () => ({
+    components: storyComponents,
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-data-provider
+          url="/api/products"
+          :limit="8"
+          :pagination="true"
+          :accumulate="true"
+          v-slot="{ data, loading, moreLoading, next }"
+        >
+          <rn-stack direction="vertical" horizontal-re-size="fill" gap="lg">
+            <rn-stack v-if="loading" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" style="min-height: 200px;">
+              <rn-spinner size="md" />
+            </rn-stack>
+            <rn-product-list
+              v-else
+              :data="data"
+              :pc-columns="4"
+              :sp-columns="2"
+              :infinite-scroll="true"
+              :has-more="data.length % 8 === 0"
+              :loading-more="moreLoading"
+              @load-more="next"
+            />
+          </rn-stack>
+        </rn-data-provider>
+      </div>
+    `,
+  }),
+}
+
+export const タグ絞り込み_LoadMore: Story = {
+  render: () => ({
+    components: storyComponents,
+    setup() {
+      const tabIndex = ref(0)
+      const activeTagCode = ref<string | null>(null)
+      const productQuery = computed(() =>
+        activeTagCode.value ? `tag_codes=${activeTagCode.value}` : '',
+      )
+      const selectTag = (code: string | null, index: number) => {
+        activeTagCode.value = code
+        tabIndex.value = index
+      }
+      return { tabIndex, activeTagCode, productQuery, selectTag }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-data-provider url="/api/tags" v-slot="{ data: tags, loading: tagsLoading }">
+          <rn-stack v-if="tagsLoading" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" style="min-height: 200px;">
+            <rn-spinner size="md" />
+          </rn-stack>
+          <rn-stack v-else direction="vertical" horizontal-re-size="fill" gap="md">
+            <div>
+              <rn-tabs :modelValue="tabIndex" :is-scrollable="true">
+                <rn-tab
+                  label="すべて"
+                  :active="!activeTagCode"
+                  @click="selectTag(null, 0)"
+                />
+                <rn-tab
+                  v-for="(tag, i) in tags"
+                  :key="tag.code"
+                  :label="tag.name"
+                  :active="activeTagCode === tag.code"
+                  @click="selectTag(tag.code, i + 1)"
+                />
+              </rn-tabs>
+              <rn-divider />
+            </div>
+            <rn-data-provider
+              url="/api/products"
+              :query="productQuery"
+              :limit="8"
+              :pagination="true"
+              :accumulate="true"
+              v-slot="{ data: products, loading, moreLoading, next }"
+            >
+              <rn-stack v-if="loading" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" style="min-height: 200px;">
+                <rn-spinner size="md" />
+              </rn-stack>
+              <rn-product-list
+                v-else
+                :data="products"
+                :pc-columns="4"
+                :sp-columns="2"
+                :infinite-scroll="true"
+                :has-more="products.length % 8 === 0"
+                :loading-more="moreLoading"
+                @load-more="next"
+              />
+            </rn-data-provider>
+          </rn-stack>
+        </rn-data-provider>
+      </div>
+    `,
+  }),
+}

package/src/stories/ItemFilter.stories.ts

@@ -0,0 +1,283 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ItemFilter, {
+  type ItemFilterProps,
+} from '@/components/renderless/ItemFilter.vue'
+import DataProvider from '@/components/renderless/DataProvider.vue'
+import ProductList from '@/components/features/ProductList.vue'
+import Tabs from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Spinner from '@/components/elements/Spinner.vue'
+import Divider from '@/components/elements/Divider.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof ItemFilter> = {
+  title: 'Renderless/ItemFilter',
+  component: ItemFilter,
+  tags: ['autodocs'],
+}
+
+export default meta
+type StoryArgs = ItemFilterProps
+type Story = StoryObj<StoryArgs>
+
+// --- タグデータ（実API構造準拠） ---
+const mockTags = [
+  { id: '2649', name: 'Tshirt / Long Sleeve Tshirt', code: 'OMT-T-001' },
+  { id: '2650', name: 'Bag', code: 'OMT-T-002' },
+  { id: '2651', name: 'Other', code: 'OMT-T-003' },
+  { id: '2652', name: 'CD / Cassette / 7inch', code: 'OMT-T-004' },
+  { id: '3266', name: 'Live at 日本武道館', code: 'OMT-T-011' },
+  { id: '3082', name: 'ONE MAN TOUR 2012-2025 Shinka', code: 'OMT-T-010' },
+]
+
+// --- 商品データ（タグ多対多） ---
+const tagAssignments = [
+  [{ id: '2649', text: 'Tshirt / Long Sleeve Tshirt' }],
+  [
+    { id: '2649', text: 'Tshirt / Long Sleeve Tshirt' },
+    { id: '3266', text: 'Live at 日本武道館' },
+  ],
+  [{ id: '2650', text: 'Bag' }],
+  [{ id: '2652', text: 'CD / Cassette / 7inch' }],
+  [
+    { id: '2651', text: 'Other' },
+    { id: '3082', text: 'ONE MAN TOUR 2012-2025 Shinka' },
+  ],
+  [{ id: '3266', text: 'Live at 日本武道館' }],
+  [
+    { id: '2650', text: 'Bag' },
+    { id: '3266', text: 'Live at 日本武道館' },
+  ],
+  [{ id: '3082', text: 'ONE MAN TOUR 2012-2025 Shinka' }],
+]
+
+const productNames = [
+  'ロゴ Tシャツ',
+  '武道館限定 ロングスリーブ',
+  'キャンバストートバッグ',
+  '1st Album「Ammolite」',
+  'Shinka ツアータオル',
+  '武道館公演 パンフレット',
+  '武道館限定 サコッシュ',
+  'Shinka ラバーバンド',
+  'フォトTシャツ BLACK',
+  'フォトTシャツ WHITE',
+  '2nd EP「Pieces」',
+  'アクリルキーホルダー',
+]
+
+const generateMockProducts = (count: number) => {
+  const products = []
+  for (let i = 1; i <= count; i++) {
+    products.push({
+      product_id: `product_${i}`,
+      product_code: `OMT-${String(i).padStart(3, '0')}`,
+      title: productNames[(i - 1) % productNames.length],
+      title2: '',
+      price_sale: [2200, 3300, 4400, 5500, 6600, 1650, 3850, 1100][i % 8],
+      price_prefix_freeWord: '',
+      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`,
+      ],
+      label_urls: [],
+      label_texts: tagAssignments[(i - 1) % tagAssignments.length],
+      soldout_url: '',
+      is_soldout: i % 7 === 0,
+      is_forced_publish: i % 11 === 0,
+    })
+  }
+  return products
+}
+
+const mockProducts = generateMockProducts(24)
+
+// --- ストーリー共通コンポーネント ---
+const storyComponents = {
+  'rn-item-filter': ItemFilter,
+  'rn-data-provider': DataProvider,
+  'rn-product-list': ProductList,
+  'rn-tabs': Tabs,
+  'rn-tab': Tab,
+  'rn-stack': Stack,
+  'rn-spinner': Spinner,
+  'rn-divider': Divider,
+}
+
+export const 基本: Story = {
+  render: () => ({
+    components: storyComponents,
+    setup() {
+      const current = ref(0)
+      const tags = mockTags
+      const products = mockProducts
+      return { current, tags, products }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-item-filter
+          :groups="tags"
+          :items="products"
+          :item-groups="(p) => p.label_texts"
+          all-label="すべて"
+        >
+          <template #default="{ filteredItems, groups, setActive }">
+            <rn-tabs :modelValue="current" :is-scrollable="true">
+              <rn-tab
+                v-for="(g, index) in groups"
+                :key="g.key"
+                :label="g.label"
+                :active="g.isActive"
+                @click="current = index; setActive(g.key)"
+              />
+            </rn-tabs>
+            <rn-divider />
+            <rn-product-list :data="filteredItems" :pc-columns="4" :sp-columns="2"  />
+          </template>
+        </rn-item-filter>
+      </div>
+    `,
+  }),
+}
+
+export const プレフィルタ付き: Story = {
+  render: () => ({
+    components: storyComponents,
+    setup() {
+      const current = ref(0)
+      const tags = mockTags
+      const products = mockProducts
+      const availableFilter = (p: any) => !p.is_soldout && !p.is_forced_publish
+      return { current, tags, products, availableFilter }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-item-filter
+          :groups="tags"
+          :items="products"
+          :item-groups="(p) => p.label_texts"
+          :filter="availableFilter"
+          all-label="すべて"
+        >
+          <template #default="{ filteredItems, groups, setActive }">
+            <rn-tabs :modelValue="current" :is-scrollable="true">
+              <rn-tab
+                v-for="(g, index) in groups"
+                :key="g.key"
+                :label="g.label"
+                :active="g.isActive"
+                @click="current = index; setActive(g.key)"
+              />
+            </rn-tabs>
+            <rn-divider />
+            <rn-product-list :data="filteredItems" :pc-columns="4" :sp-columns="2"  />
+          </template>
+        </rn-item-filter>
+      </div>
+    `,
+  }),
+}
+
+export const キー指定マッチ: Story = {
+  render: () => ({
+    components: storyComponents,
+    setup() {
+      const current = ref(0)
+      const categories = [
+        { code: 'apparel', name: 'アパレル' },
+        { code: 'goods', name: 'グッズ' },
+        { code: 'media', name: 'CD / メディア' },
+      ]
+      const products = Array.from({ length: 18 }, (_, i) => ({
+        product_id: `product_${i + 1}`,
+        product_code: `CAT-${String(i + 1).padStart(3, '0')}`,
+        title: productNames[i % productNames.length],
+        price_sale: [2200, 3300, 4400, 5500, 1650][i % 5],
+        price_prefix_freeWord: '',
+        slide: 1,
+        product_url: `https://example.com/products/product_${i + 1}`,
+        img_urls: [`https://placehold.jp/400x400.png?text=Product${i + 1}`],
+        label_urls: [],
+        label_texts: [],
+        soldout_url: '',
+        is_soldout: false,
+        is_forced_publish: false,
+        category: categories[i % categories.length].code,
+      }))
+      return { current, categories, products }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-item-filter
+          :groups="categories"
+          :items="products"
+          item-groups="category"
+          group-key="code"
+          group-label="name"
+          all-label="すべて"
+        >
+          <template #default="{ filteredItems, groups, setActive }">
+            <rn-tabs :modelValue="current" :is-scrollable="true">
+              <rn-tab
+                v-for="(g, index) in groups"
+                :key="g.key"
+                :label="g.label"
+                :active="g.isActive"
+                @click="current = index; setActive(g.key)"
+              />
+            </rn-tabs>
+            <rn-divider />
+            <rn-product-list :data="filteredItems" :pc-columns="4" :sp-columns="2"  />
+          </template>
+        </rn-item-filter>
+      </div>
+    `,
+  }),
+}
+
+export const API連携: Story = {
+  render: () => ({
+    components: storyComponents,
+    setup() {
+      const current = ref(0)
+      return { current }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <rn-data-provider url="/api/tags" v-slot="{ data: tags, loading: tagsLoading }">
+          <rn-data-provider url="/api/products" :limit="48" v-slot="{ data: products, loading: productsLoading }">
+            <rn-stack v-if="tagsLoading || productsLoading" horizontal-re-size="fill" horizontal-align="center" vertical-align="center" style="min-height: 200px;">
+              <rn-spinner size="md" />
+            </rn-stack>
+            <rn-item-filter
+              v-else
+              :groups="tags"
+              :items="products"
+              :item-groups="(p) => p.label_texts"
+              all-label="すべて"
+            >
+              <template #default="{ filteredItems, groups, setActive }">
+                <rn-stack direction="vertical" horizontal-re-size="fill" gap="md">
+                  <rn-tabs :modelValue="current" :is-scrollable="true">
+                    <rn-tab
+                      v-for="(g, index) in groups"
+                      :key="g.key"
+                      :label="g.label"
+                      :active="g.isActive"
+                      @click="current = index; setActive(g.key)"
+                    />
+                  </rn-tabs>
+                  <rn-divider />
+                  <rn-product-list :data="filteredItems" :pc-columns="4" :sp-columns="2" />
+                </rn-stack>
+              </template>
+            </rn-item-filter>
+          </rn-data-provider>
+        </rn-data-provider>
+      </div>
+    `,
+  }),
+}

package/src/stories/Pagination.stories.ts

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import Pagination, {
+  type PaginationProps,
+} from '@/components/elements/Pagination.vue'
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Elements/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  argTypes: {
+    totalPages: { control: 'number' },
+    siblingCount: { control: 'number' },
+    boundaryCount: { control: 'number' },
+  },
+  args: {
+    totalPages: 20,
+    siblingCount: 1,
+    boundaryCount: 1,
+  },
+}
+
+export default meta
+type StoryArgs = PaginationProps & { currentPage?: number }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    totalPages: 20,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-pagination': Pagination },
+    setup() {
+      const page = ref(1)
+      return { args, page }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-pagination
+          v-model:current-page="page"
+          :total-pages="args.totalPages"
+          :sibling-count="args.siblingCount"
+          :boundary-count="args.boundaryCount"
+        />
+        <p style="margin-top: 16px; font-size: 14px; color: #666;">
+          現在のページ: {{ page }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const SSRモード: OverridesStory = {
+  args: {
+    totalPages: 20,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-pagination': Pagination },
+    setup() {
+      const page = ref(5)
+      const href = (p: number) => `#page=${p}`
+      return { args, page, href }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-pagination
+          v-model:current-page="page"
+          :total-pages="args.totalPages"
+          :sibling-count="args.siblingCount"
+          :boundary-count="args.boundaryCount"
+          :href="href"
+        />
+        <p style="margin-top: 16px; font-size: 14px; color: #666;">
+          現在のページ: {{ page }}（SSR: &lt;a&gt; タグでレンダリング）
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const ページ数が少ない: OverridesStory = {
+  args: {
+    totalPages: 5,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-pagination': Pagination },
+    setup() {
+      const page = ref(3)
+      return { args, page }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-pagination
+          v-model:current-page="page"
+          :total-pages="args.totalPages"
+          :sibling-count="args.siblingCount"
+          :boundary-count="args.boundaryCount"
+        />
+        <p style="margin-top: 16px; font-size: 14px; color: #666;">
+          現在のページ: {{ page }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const _1ページのみ: OverridesStory = {
+  name: '1ページのみ',
+  args: {
+    totalPages: 1,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-pagination': Pagination },
+    setup() {
+      const page = ref(1)
+      return { args, page }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-pagination
+          v-model:current-page="page"
+          :total-pages="args.totalPages"
+        />
+        <p style="margin-top: 16px; font-size: 14px; color: #666;">
+          totalPages=1 のため非表示
+        </p>
+      </div>
+    `,
+  }),
+}