@reni-corp/reni-2c-ui 0.3.291 → 0.4.1

package/src/stories/Lightbox.stories.ts

@@ -0,0 +1,231 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Lightbox, {
+  type LightboxProps,
+} from '@/components/interactive/Lightbox.vue'
+import Button from '@/components/elements/Button.vue'
+import FloatingBanner from '@/components/features/FloatingBanner.vue'
+
+const meta: Meta<typeof Lightbox> = {
+  title: 'Interactive/Lightbox',
+  component: Lightbox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Lightboxコンポーネントです。画像やコンテンツをオーバーレイで拡大表示するためのコンポーネント。activator slotでトリガー要素を指定するか、v-model:visibleで外部から制御できます。',
+      },
+    },
+  },
+  argTypes: {
+    visible: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    visible: false,
+  },
+}
+
+export default meta
+type StoryArgs = LightboxProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'activator slotを使用した基本的な使い方。ボタンをクリックすると画像が表示されます。',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-lightbox': Lightbox, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 600px; padding: 20px;'>
+          <rn-lightbox>
+            <template #activator="{ open }">
+              <rn-button @click="open">画像を表示</rn-button>
+            </template>
+            <img
+              src="https://placehold.co/600x400/EEE/31343C?text=Sample+Image"
+              alt="サンプル画像"
+              style="width: 100%; display: block;"
+            />
+          </rn-lightbox>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 縦長画像: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: '縦に長い画像の場合、コンテンツ領域がスクロール可能になります。',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-lightbox': Lightbox, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 600px; padding: 20px;'>
+          <rn-lightbox>
+            <template #activator="{ open }">
+              <rn-button @click="open">サイズ表を見る</rn-button>
+            </template>
+            <img
+              src="https://placehold.co/600x3000/EEE/31343C?text=Size+Chart\\n(Tall+Image)"
+              alt="サイズ表"
+              style="width: 100%; display: block;"
+            />
+          </rn-lightbox>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 外部制御: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'v-model:visible を使用して外部から表示状態を制御する例。',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-lightbox': Lightbox, 'rn-button': Button },
+    setup() {
+      const visible = ref(false)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 600px; padding: 20px;'>
+          <rn-button @click="handleVisible">画像を表示（外部制御）</rn-button>
+          <rn-lightbox
+            :visible="visible"
+            @onChangeVisible="handleVisible"
+          >
+            <img
+              src="https://placehold.co/600x400/EEE/31343C?text=External+Control"
+              alt="外部制御サンプル"
+              style="width: 100%; display: block;"
+            />
+          </rn-lightbox>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const FloatingBannerとの組み合わせ: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'FloatingBannerをactivatorとして使用し、クリックでLightboxを開く例。',
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      'rn-lightbox': Lightbox,
+      'rn-floating-banner': FloatingBanner,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 600px; padding: 20px;'>
+          <p>画面下部のフローティングバナーをクリックすると、Lightboxが開きます。</p>
+          <rn-lightbox>
+            <template #activator="{ open }">
+              <rn-floating-banner
+                image-url="https://placehold.co/480x80/E8D5B7/31343C?text=Campaign+Banner"
+                @click="open"
+              />
+            </template>
+            <img
+              src="https://placehold.co/600x800/E8D5B7/31343C?text=Campaign+Detail"
+              alt="キャンペーン詳細"
+              style="width: 100%; display: block;"
+            />
+          </rn-lightbox>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const カスタムコンテンツ: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: '画像以外のHTMLコンテンツも表示できます。',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-lightbox': Lightbox, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 600px; padding: 20px;'>
+          <rn-lightbox>
+            <template #activator="{ open }">
+              <rn-button variant="text" @click="open">利用規約を確認</rn-button>
+            </template>
+            <div style="padding: 24px;">
+              <h3 style="margin: 0 0 16px; font-size: 18px; font-weight: bold;">利用規約</h3>
+              <p style="margin: 0 0 12px; font-size: 14px; line-height: 1.6;">
+                この利用規約（以下「本規約」）は、当サービスの利用条件を定めるものです。
+                ユーザーの皆様には、本規約に同意いただいた上で、当サービスをご利用いただきます。
+              </p>
+              <p style="margin: 0 0 12px; font-size: 14px; line-height: 1.6;">
+                第1条（適用）本規約は、ユーザーと当社との間の本サービスの利用に関わる一切の関係に適用されるものとします。
+              </p>
+              <p style="margin: 0 0 12px; font-size: 14px; line-height: 1.6;">
+                第2条（利用登録）登録希望者が当社の定める方法によって利用登録を申請し、
+                当社がこれを承認することによって、利用登録が完了するものとします。
+              </p>
+              <p style="margin: 0; font-size: 14px; line-height: 1.6;">
+                第3条（禁止事項）ユーザーは、本サービスの利用にあたり、以下の行為をしてはなりません。
+                法令または公序良俗に違反する行為、犯罪行為に関連する行為、その他当社が不適切と判断する行為。
+              </p>
+            </div>
+          </rn-lightbox>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/List.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import List, { type ListProps } from '@/components/layouts/List.vue'
+import Card from '@/components/layouts/Card.vue'
 import { Size } from '@/types'
 import { SizeOptions } from '@/constants'
 import Text from '@/components/elements/Text.vue'
@@ -49,6 +50,12 @@ const meta: Meta<typeof List> = {
     loading: {
       control: 'boolean',
     },
+    icon: {
+      control: 'text',
+    },
+    arrow: {
+      control: 'text',
+    },
   },
   args: {
     items: [
@@ -73,6 +80,8 @@ const meta: Meta<typeof List> = {
     },
     emptyText: 'empty',
     loading: false,
+    icon: 'icon',
+    arrow: 'withArrow',
   },
 }
 export default meta
@@ -87,25 +96,63 @@ export const 基本: OverridesStory = {
   args: {},
   argTypes: {},
   render: (args) => ({
-    components: { 'rn-list': List, 'rn-text': Text },
+    components: { 'rn-list': List, 'rn-text': Text, 'rn-card': Card },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-card title="リスト" :elevation="false">
+          <rn-list v-bind="args">
+            <template #default="{ item }">
+              <rn-text>{{ item.name }}</rn-text>
+            </template>
+          </rn-list>
+        </rn-card>
+      </div>
+    `,
+  }),
+}
+
+export const アイコンと矢印: OverridesStory = {
+  args: {
+    items: [
+      {
+        name: 'マイページ',
+        icon: ['far', 'user'],
+        withArrow: true,
+      },
+      {
+        name: 'お気に入り',
+        icon: 'check',
+        withArrow: true,
+      },
+      {
+        name: '設定',
+        icon: ['far', 'pen-to-square'],
+        withArrow: true,
+      },
+      {
+        name: 'ショッピングカート',
+        icon: ['far', 'cart-shopping'],
+        withArrow: false,
+      },
+    ],
+    withDivider: true,
+    icon: 'icon',
+    arrow: 'withArrow',
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: { 'rn-list': List, 'rn-card': Card },
     setup() {
       return { args }
     },
     template: /* html */ `
       <div class='sb-canvas'>
-        <rn-list
-          :items=args.items
-          :withDivider=args.withDivider
-          :dense=args.dense
-          :gap=args.gap
-          :contentInset=args.contentInset
-          :emptyText=args.emptyText
-          :loading=args.loading
-        >
-          <template #default="{ item }">
-            <rn-text>{{ item.name }}</rn-text>
-          </template>
-        </rn-list>
+        <rn-card title="アイコンと矢印" :elevation="false">
+          <rn-list v-bind="args" />
+        </rn-card>
       </div>
     `,
   }),

package/src/stories/Modal.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Modal, { ModalProps } from '@/components/interactive/Modal.vue'
 import Button from '@/components/elements/Button.vue'
 import Icon from '@/components/elements/Icon.vue'

package/src/stories/Notification.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Notification, {
   NotificationProps,
 } from '@/components/interactive/Notification.vue'

package/src/stories/Page.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Page from '@/components/layouts/Page.vue'
 import Card from '@/components/layouts/Card.vue'
 import Stack from '@/components/layouts/Stack.vue'
@@ -15,6 +15,11 @@ const meta: Meta<typeof Page> = {
       control: 'text',
       description: 'ページタイトル',
     },
+    titleFont: {
+      control: 'select',
+      options: ['default', 'key', 'mono'],
+      description: 'タイトルのフォントファミリー',
+    },
     fluid: {
       control: 'boolean',
       description: '最大幅制限を無効にする',
@@ -47,6 +52,7 @@ const meta: Meta<typeof Page> = {
   },
   args: {
     title: 'ページタイトル',
+    titleFont: 'default',
     fluid: false,
     pending: false,
     withBack: false,
@@ -412,3 +418,32 @@ AppBodyのsafearea padding（PC: 40px / SP: 16px）をネガティブマージ
     `,
   }),
 }
+
+export const タイトルフォント選択: OverridesStory = {
+  args: {
+    title: 'ブランドフォントのページタイトル',
+    titleFont: 'key',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-page': Page, 'rn-card': Card, 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :title-font="args.titleFont"
+        >
+          <template #body>
+            <rn-card title="コンテンツ" elevation>
+              <rn-text>
+                ページタイトルにブランドフォント（key）を適用しています。
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}

package/src/stories/PasswordField.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import PasswordField, {
   type PasswordFieldProps,
 } from '@/components/elements/PasswordField.vue'

package/src/stories/ProductList.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ProductList, {
   type ProductListProps,
 } from '@/components/features/ProductList.vue'
@@ -28,6 +28,10 @@ const meta: Meta<typeof ProductList> = {
       control: 'select',
       options: ['default', 'boxed'],
     },
+    variant: {
+      control: 'select',
+      options: ['flat', 'bordered', 'card'],
+    },
     pcRows: { control: 'number' },
     pcColumns: { control: 'number' },
     spRows: { control: 'number' },
@@ -45,6 +49,7 @@ const meta: Meta<typeof ProductList> = {
     paginationType: 'bullets',
     theme: 'light',
     itemType: 'default',
+    variant: 'flat',
     pcRows: 2,
     pcColumns: 4,
     spRows: 2,
@@ -82,9 +87,11 @@ const generateMockProducts = (count: number) => {
         'https://assets.official-goods-store.jp/label/KTK007.png',
       ]
     } else if (i % 7 === 3) {
-      // Soldoutラベル（7個に1個）
+      // Soldout画像ラベル（7個に1個）
       soldoutUrl =
         'https://official-goods-store.jp/yuuri/assets/img/yuuri/soldout.png'
+    } else if (i % 7 === 4) {
+      // Soldoutテキストラベル（soldout_url なし）
     }
 
     if (i % 7 === 1) {
@@ -116,6 +123,7 @@ const generateMockProducts = (count: number) => {
       label_urls: labelUrls,
       label_texts: labelTexts,
       soldout_url: soldoutUrl,
+      is_soldout: i % 7 === 3 || i % 7 === 4, // soldout_url ありと なし の2パターン
       is_forced_publish: i % 5 === 0, // 5個に1個は受付期間外
     })
   }
@@ -667,7 +675,7 @@ export const title2表示制御: Story = {
             <span style="color: #666;">現在の設定: {{ showTitle2 ? '表示' : '非表示' }}</span>
           </rn-stack>
           
-          <rn-product-list 
+          <rn-product-list
             :data="args.data"
             :display-mode="args.displayMode"
             :show-title2="showTitle2"
@@ -677,3 +685,57 @@ export const title2表示制御: Story = {
     `,
   }),
 }
+
+export const バリアント比較: Story = {
+  args: {
+    displayMode: 'list',
+    data: generateMockProducts(8),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+      'rn-stack': Stack,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h2>アイテムバリアント比較</h2>
+        <p>各商品アイテム（ProductListItem）のスタイルバリアント3種類を比較できます</p>
+
+        <rn-stack direction="vertical" gap="xl" style="margin-top: 32px;">
+          <!-- Flat -->
+          <div>
+            <h3>Flat（デフォルト）</h3>
+            <p style="color: #666; margin: 8px 0;">背景・ボーダー・影・パディングなし</p>
+            <rn-product-list
+              v-bind="args"
+              variant="flat"
+            />
+          </div>
+
+          <!-- Bordered -->
+          <div style="margin-top: 48px;">
+            <h3>Bordered</h3>
+            <p style="color: #666; margin: 8px 0;">ボーダー + パディング（角丸なし）</p>
+            <rn-product-list
+              v-bind="args"
+              variant="bordered"
+            />
+          </div>
+
+          <!-- Card -->
+          <div style="margin-top: 48px;">
+            <h3>Card</h3>
+            <p style="color: #666; margin: 8px 0;">背景色 + 薄いボーダー + 影 + パディング + 角丸</p>
+            <rn-product-list
+              v-bind="args"
+              variant="card"
+            />
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/ProductPurchase.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ProductPurchase, {
   type ProductPurchaseProps,
 } from '@/components/features/ProductPurchase.vue'
-import { action } from '@storybook/addon-actions'
+import { action } from 'storybook/actions'
 import { ref } from 'vue'
 
 const meta: Meta<typeof ProductPurchase> = {

package/src/stories/Progress.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Progress, { ProgressProps } from '@/components/elements/Progress.vue'
 
 const meta: Meta<typeof Progress> = {