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

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.9",
+  "version": "0.4.11",
   "type": "module",
   "main": "./dist/script.umd.js",
   "module": "./dist/index.es.js",
@@ -51,7 +51,10 @@
     "typecheck": "tsc --noEmit --skipLibCheck",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:vrt": "playwright test --config playwright.config.ts"
+    "test:vrt": "playwright test --config playwright.config.ts",
+    "test:vrt:update": "playwright test --config playwright.config.ts --update-snapshots",
+    "test:vrt:docker": "docker run --rm -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble npx playwright test --config playwright.config.ts",
+    "test:vrt:docker:update": "docker run --rm -v $(pwd):/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble npx playwright test --config playwright.config.ts --update-snapshots"
   },
   "dependencies": {
     "@awesome.me/kit-37f9c6ad08": "^1.0.24",

package/src/stories/ItemFilter.stories.ts

@@ -76,7 +76,7 @@ const generateMockProducts = (count: number) => {
       title: productNames[(i - 1) % productNames.length],
       title2: '',
       price_sale: [2200, 3300, 4400, 5500, 6600, 1650, 3850, 1100][i % 8],
-      price_prefix_freeWord: '',
+      price_prefix_freeword: '',
       slide: 1,
       product_url: `https://example.com/products/product_${i}`,
       img_urls: [
@@ -196,7 +196,7 @@ export const キー指定マッチ: Story = {
         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: '',
+        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}`],

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>
+    `,
+  }),
+}

package/src/stories/ProductList.stories.ts

@@ -111,7 +111,7 @@ const generateMockProducts = (count: number) => {
       title: `ZUTOMAYO 商品 ${i}`,
       title2: `THE WORLD IS CHANGING ${i}`,
       price_sale: Math.floor(Math.random() * 8000) + 1000,
-      price_prefix_freeWord: '', // 空文字（CurrencyValueで円記号が自動追加される）
+      price_prefix_freeword: '', // 空文字（CurrencyValueで円記号が自動追加される）
       slide: 1,
       product_url: `https://example.com/products/product_${i}`,
       img_urls: [

package/src/stories/ProductPurchase.stories.ts

@@ -96,7 +96,7 @@ const meta: Meta<typeof ProductPurchase> = {
       id: 'product-1',
       title: 'Product name',
       price: 3000,
-      price_prefix_freeWord: '各種 ',
+      price_prefix_freeword: '各種 ',
       subtitle1: 'Title1',
       subtitle2: 'Title2',
       imageUrls: [
@@ -134,7 +134,7 @@ const createMockProduct = (overrides = {}) => ({
   id: 'product-1',
   title: 'オフィシャルTシャツ',
   price: 3500,
-  price_prefix_freeWord: '各種 ',
+  price_prefix_freeword: '各種 ',
   subtitle1: 'RENI',
   subtitle2: 'Official Merchandise',
   imageUrls: [
@@ -158,7 +158,7 @@ const createMockProduct = (overrides = {}) => ({
 export const 価格プレフィックスなし: Story = {
   args: {
     product: createMockProduct({
-      price_prefix_freeWord: '', // プレフィックスなし
+      price_prefix_freeword: '', // プレフィックスなし
       price: 2980,
     }),
   },

package/src/stories/VariationSelector.stories.ts

@@ -0,0 +1,241 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VariationSelector, {
+  type VariationSelectorProps,
+} from '@/components/features/VariationSelector.vue'
+
+const meta: Meta<typeof VariationSelector> = {
+  title: 'Features/VariationSelector',
+  component: VariationSelector,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'バリエーション選択用コンポーネント。フラットモード（単純な選択肢）とグループモード（カテゴリ→商品名のようなカスケード選択）に対応。chip（横並びボタン）と list（縦リスト）の2つの表示バリアントをサポート。',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['chip', 'list'],
+      description: 'アイテムの表示バリアント',
+    },
+    groupVariant: {
+      control: 'select',
+      options: ['chip', 'list'],
+      description: 'グループの表示バリアント',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+      description: '選択状態のアクセントカラー',
+    },
+    label: {
+      control: 'text',
+      description: 'アイテム側のラベル',
+    },
+    groupLabel: {
+      control: 'text',
+      description: 'グループ側のラベル',
+    },
+  },
+  args: {
+    variant: 'chip',
+    color: 'default',
+  },
+}
+
+export default meta
+type Story = StoryObj<VariationSelectorProps>
+
+const sizeItems = [
+  { label: 'S', value: 's' },
+  { label: 'M', value: 'm' },
+  { label: 'L', value: 'l' },
+  { label: 'XL', value: 'xl' },
+]
+
+export const 基本: Story = {
+  args: {
+    label: 'サイズ',
+    items: sizeItems,
+    variant: 'chip',
+  },
+  render: (args) => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector v-bind="args" v-model="selectedValue" />
+        <p style="margin-top: 16px; font-size: 13px; color: #666;">
+          選択中: {{ selectedValue || '未選択' }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const リストバリアント: Story = {
+  args: {
+    label: '商品名',
+    items: [
+      { label: '白上フブキ', value: 'fubuki' },
+      { label: '百鬼あやめ', value: 'ayame' },
+      { label: '癒月ちょこ', value: 'choco' },
+      { label: '猫又おかゆ', value: 'okayu' },
+      { label: '兎田ぺこら', value: 'pekora' },
+    ],
+    variant: 'list',
+  },
+  render: (args) => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector v-bind="args" v-model="selectedValue" />
+        <p style="margin-top: 16px; font-size: 13px; color: #666;">
+          選択中: {{ selectedValue || '未選択' }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const グループモード: Story = {
+  render: () => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const categories = [
+        { label: '7th fes. STAGE1', value: 'stage1' },
+        { label: '7th fes. STAGE2', value: 'stage2' },
+        { label: '7th fes. STAGE3', value: 'stage3' },
+        { label: '7th fes. STAGE4', value: 'stage4' },
+      ]
+      const products = [
+        { label: '白上フブキ', value: 'fubuki', stageId: 'stage1' },
+        { label: '百鬼あやめ', value: 'ayame', stageId: 'stage1' },
+        { label: '癒月ちょこ', value: 'choco', stageId: 'stage1' },
+        { label: '猫又おかゆ', value: 'okayu', stageId: 'stage2' },
+        { label: '兎田ぺこら', value: 'pekora', stageId: 'stage2' },
+        { label: '不知火フレア', value: 'flare', stageId: 'stage2' },
+        { label: '角巻わため', value: 'watame', stageId: 'stage3' },
+        { label: '雪花ラミィ', value: 'lamy', stageId: 'stage3' },
+        { label: '尾丸ポルカ', value: 'polka', stageId: 'stage4' },
+        { label: '鷹嶺ルイ', value: 'lui', stageId: 'stage4' },
+      ]
+
+      const selectedCategory = ref('stage1')
+      const selectedProduct = ref('')
+
+      return { categories, products, selectedCategory, selectedProduct }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector
+          group-label="商品カテゴリ"
+          label="商品名"
+          :groups="categories"
+          :items="products"
+          item-group="stageId"
+          group-variant="chip"
+          variant="list"
+          v-model:group="selectedCategory"
+          v-model="selectedProduct"
+        />
+        <div style="margin-top: 16px; font-size: 13px; color: #666;">
+          <p>カテゴリ: {{ selectedCategory || '未選択' }}</p>
+          <p>商品: {{ selectedProduct || '未選択' }}</p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 無効化オプション: Story = {
+  args: {
+    label: 'サイズ',
+    items: [
+      { label: 'S', value: 's' },
+      { label: 'M', value: 'm' },
+      { label: 'L', value: 'l', disabled: true },
+      { label: 'XL', value: 'xl', disabled: true },
+    ],
+    variant: 'chip',
+  },
+  render: (args) => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px;">
+        <rn-variation-selector v-bind="args" v-model="selectedValue" />
+        <p style="margin-top: 16px; font-size: 13px; color: #666;">
+          選択中: {{ selectedValue || '未選択' }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const Shopify商品バリアント: Story = {
+  render: () => ({
+    components: { 'rn-variation-selector': VariationSelector },
+    setup() {
+      const selectedColor = ref('')
+      const selectedSize = ref('')
+      return { selectedColor, selectedSize }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 480px; display: flex; flex-direction: column; gap: 24px;">
+        <rn-variation-selector
+          label="カラー"
+          :items="[
+            { label: 'ホワイト', value: 'white' },
+            { label: 'ブラック', value: 'black' },
+            { label: 'ネイビー', value: 'navy' },
+          ]"
+          variant="chip"
+          v-model="selectedColor"
+        />
+        <rn-variation-selector
+          label="サイズ"
+          :items="[
+            { label: 'S', value: 's' },
+            { label: 'M', value: 'm' },
+            { label: 'L', value: 'l' },
+            { label: 'XL', value: 'xl', disabled: true },
+          ]"
+          variant="chip"
+          v-model="selectedSize"
+        />
+        <div style="padding: 16px; background: var(--rn-bg-muted); border-radius: 8px;">
+          <p style="margin: 0; font-size: 14px; font-weight: 600;">選択中のバリアント</p>
+          <p style="margin: 8px 0 0; font-size: 13px; color: #666;">
+            カラー: {{ selectedColor || '未選択' }} / サイズ: {{ selectedSize || '未選択' }}
+          </p>
+        </div>
+      </div>
+    `,
+  }),
+}