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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reni-corp/reni-2c-ui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "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/dist/components/renderless/OptionGroupSwitchController.vue.d.ts

@@ -1,41 +0,0 @@
-export type OptionGroupSwitchControllerProps = {
-    itemMapKey: string;
-    groupMapKey: string;
-    groups: any[];
-    items: any[];
-    defaultActiveValue: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            optionGroups: any[];
-            optionGroupByContents: {
-                isActive: boolean;
-                mapKey: any;
-                group: any;
-                items: any[];
-            }[];
-            activeValue: string;
-            updateActiveValue: (value: string) => void;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<OptionGroupSwitchControllerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OptionGroupSwitchControllerProps> & Readonly<{}>, {
-    items: any[];
-    itemMapKey: string;
-    groupMapKey: string;
-    groups: any[];
-    defaultActiveValue: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=OptionGroupSwitchController.vue.d.ts.map

package/dist/components/renderless/OptionGroupSwitchController.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionGroupSwitchController.vue.d.ts","sourceRoot":"","sources":["../../../src/components/renderless/OptionGroupSwitchController.vue"],"names":[],"mappings":"AAQA;AAkEA,MAAM,MAAM,gCAAgC,GAAG;IAC7C,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,GAAG,EAAE,CAAA;IACb,KAAK,EAAE,GAAG,EAAE,CAAA;IACZ,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAwDD,iBAAS,cAAc;WAwBT,OAAO,IAA6B;;;;;;;;;;;uCA/ChB,MAAM;YAqCX,GAAG;;;;EAe/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;WArGZ,GAAG,EAAE;gBAHA,MAAM;iBACL,MAAM;YACX,GAAG,EAAE;wBAEO,MAAM;6EA2G1B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}