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

package/src/stories/ProductList.stories.ts

@@ -110,15 +110,15 @@ const generateMockProducts = (count: number) => {
       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_sale: 1000 + (i * 1234) % 8000,
       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`,
+        `/placeholder-400x400.svg`,
+        `/placeholder-400x400.svg`,
+        `/placeholder-400x400.svg`,
+        `/placeholder-400x400.svg`,
       ],
       label_urls: labelUrls,
       label_texts: labelTexts,
@@ -151,6 +151,45 @@ export const 基本リスト: Story = {
   }),
 }
 
+export const NEWバッジ: Story = {
+  args: {
+    displayMode: 'list',
+    promotedLabelIds: ['NEW'],
+    data: (() => {
+      const products = generateMockProducts(8)
+      // 一部の商品に NEW ラベルを追加
+      products[0].label_texts = [
+        { id: 'NEW', text: 'NEW' },
+        ...products[0].label_texts,
+      ]
+      products[2].label_texts = [
+        { id: 'NEW', text: 'NEW' },
+        ...products[2].label_texts,
+      ]
+      products[5].label_texts = [
+        { id: 'NEW', text: 'NEW' },
+        ...products[5].label_texts,
+      ]
+      return products
+    })(),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>NEWバッジ（promotedLabelIds）</h3>
+        <p>label_texts に id: "NEW" を持つ商品に上部バッジが表示されます</p>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
 export const カルーセル: Story = {
   args: {
     displayMode: 'carousel',
@@ -173,6 +212,33 @@ export const カルーセル: Story = {
   }),
 }
 
+export const カルーセル_ナビ非表示: Story = {
+  args: {
+    displayMode: 'carousel',
+    paginationType: 'bullets',
+    pcRows: 1,
+    pcColumns: 4,
+    spRows: 1,
+    spColumns: 2,
+    data: generateMockProducts(4),
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-product-list': ProductList,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="sb-canvas" style="padding: 20px;">
+        <h3>カルーセル（ナビ非表示）</h3>
+        <p>アイテム数が1ページに収まる場合、左右の矢印が非表示になります</p>
+        <rn-product-list v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
 export const カルーセルピーク: Story = {
   args: {
     displayMode: 'carousel-peek',

package/src/stories/SwipeConfirm.stories.ts

@@ -0,0 +1,144 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SwipeConfirm, {
+  type SwipeConfirmProps,
+} from '@/components/interactive/SwipeConfirm.vue'
+import { Color } from '@/types'
+import { ColorOptions } from '@/constants'
+
+const meta: Meta<typeof SwipeConfirm> = {
+  title: 'Interactive/SwipeConfirm',
+  component: SwipeConfirm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'ハンドルを最後までスライドさせると確定するスワイプ確定バー。決済確定・申込確定・入場処理など、誤タップを避けたい「取り消しにくい確定操作」に利用する。確定は一方向（解除は親が v-model で制御）。',
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: Object.keys(ColorOptions) as Color[],
+      description: '確定時の塗り色',
+    },
+    label: { control: 'text', description: '未確定時のラベル' },
+    confirmedLabel: { control: 'text', description: '確定後のラベル' },
+    threshold: {
+      control: { type: 'range', min: 0.1, max: 1, step: 0.05 },
+      description: '確定とみなすドラッグ割合',
+    },
+    disabled: { control: 'boolean' },
+    reversed: { control: 'boolean', description: '180° 回転（向かい側操作向け）' },
+  },
+  args: {
+    label: 'スワイプでチェックイン',
+    confirmedLabel: '入場済み',
+    color: 'success',
+    threshold: 0.9,
+    disabled: false,
+    reversed: false,
+  },
+  render: (args) => ({
+    components: { 'rn-swipe-confirm': SwipeConfirm },
+    setup() {
+      const confirmed = ref(false)
+      return { args, confirmed }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='max-width: 360px;'>
+        <rn-swipe-confirm
+          v-model:confirmed='confirmed'
+          :label='args.label'
+          :confirmedLabel='args.confirmedLabel'
+          :color='args.color'
+          :threshold='args.threshold'
+          :disabled='args.disabled'
+          :reversed='args.reversed'
+          @confirm="() => {}"
+        />
+        <p style='margin-top: 24px;'>confirmed：{{ confirmed }}</p>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = SwipeConfirmProps
+type Story = StoryObj<StoryArgs>
+
+export const 基本: Story = {
+  args: {},
+}
+
+export const 確定済み: Story = {
+  render: (args) => ({
+    components: { 'rn-swipe-confirm': SwipeConfirm },
+    setup() {
+      const confirmed = ref(true)
+      return { args, confirmed }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='max-width: 360px;'>
+        <rn-swipe-confirm
+          v-model:confirmed='confirmed'
+          :label='args.label'
+          :confirmedLabel='args.confirmedLabel'
+          :color='args.color'
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 無効: Story = {
+  args: { disabled: true },
+}
+
+export const 反転: Story = {
+  args: { reversed: true },
+}
+
+export const 一覧: Story = {
+  render: () => ({
+    components: { 'rn-swipe-confirm': SwipeConfirm },
+    setup() {
+      const a = ref(false)
+      const b = ref(true)
+      const c = ref(false)
+      const d = ref(false)
+      return { a, b, c, d }
+    },
+    template: /* html */ `
+      <div
+        class='sb-canvas'
+        style='display: flex; flex-direction: column; gap: 24px; max-width: 360px;'
+      >
+        <rn-swipe-confirm
+          v-model:confirmed='a'
+          label='スワイプでチェックイン'
+          confirmedLabel='入場済み'
+        />
+        <rn-swipe-confirm
+          v-model:confirmed='b'
+          label='スワイプでチェックイン'
+          confirmedLabel='入場済み'
+        />
+        <rn-swipe-confirm
+          v-model:confirmed='c'
+          label='スワイプで決済確定'
+          confirmedLabel='決済完了'
+          color='primary'
+        />
+        <rn-swipe-confirm
+          v-model:confirmed='d'
+          label='無効状態'
+          confirmedLabel='確定済み'
+          disabled
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/Tab.stories.ts

@@ -31,7 +31,7 @@ const meta: Meta<typeof Tab> = {
   args: {
     active: false,
     variant: 'inline',
-    icon: 'check',
+    icon: 'check-outline',
     label: 'タブ',
   },
   render: (args: TabProps) => ({

package/src/stories/TabGroup.stories.ts

@@ -47,11 +47,11 @@ type OverridesStory = Omit<Story, 'argTypes'> & {
 
 const tabLabels = ['ホーム', 'カテゴリ', 'お気に入り', 'カート', 'マイページ']
 const tabIcons: string[] = [
-  'check',
-  'check',
-  'check',
-  'check',
-  'check',
+  'home-outline',
+  'bars-outline',
+  'star-outline',
+  'cart-shopping-outline',
+  'user-outline',
 ]
 
 export const Inline: OverridesStory = {

package/src/stories/Tabs.stories.ts

@@ -94,7 +94,7 @@ export const WithIconLabel: OverridesStory = {
           <rn-tab
             v-for="(_value, index) in new Array(5)"
             :active="slotProps.currentIndex === index"
-            :icon="'check'"
+            :icon="'check-outline'"
             :label="'Tab ' + index"
             @click=handleVisible(index)
           />
@@ -107,6 +107,14 @@ export const WithIconLabel: OverridesStory = {
 export const Bottom: OverridesStory = {
   args: {},
   argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'variant="icon" でボトムナビゲーション用のスタイルになります。実際のアプリでは AppBottomBar に入れて下端固定で使います。',
+      },
+    },
+  },
   render: (args: TabsProps) => ({
     components: { 'rn-tabs': Tabs, 'rn-tab': Tab },
     setup() {
@@ -120,13 +128,14 @@ export const Bottom: OverridesStory = {
       <div class='sb-canvas'>
         <rn-tabs
           :modelValue=current
-          variant="bottom"
+          variant="icon"
+          :isStretched="true"
           v-slot=slotProps
         >
           <rn-tab
             v-for="(_value, index) in new Array(4)"
             :active="slotProps.currentIndex === index"
-            :icon="'check'"
+            :icon="'check-outline'"
             :label="'Tab ' + index"
             @click=handleVisible(index)
           />
@@ -158,7 +167,7 @@ export const Stretched: OverridesStory = {
           <rn-tab
             v-for="(_value, index) in new Array(5)"
             :active="slotProps.currentIndex === index"
-            :icon="'check'"
+            :icon="'check-outline'"
             :label="'Tab ' + index"
             @click=handleVisible(index)
           />

package/src/stories/compositions/DomainMixedHome.stories.ts

@@ -0,0 +1,217 @@
+/**
+ * Composition Story: ドメイン機能混合ホーム
+ *
+ * イベント物販アプリのホーム画面を模した構成。
+ * 整理券・オーダーシートという複数ドメイン機能を 1 画面に混在させて一覧する。
+ *
+ * 構成のポイント:
+ * - 「呼び出し中」ヒーローカード: Card に data-dark 属性 + success 背景を与え、
+ *   ダークサーフェスのトークン切り替え（テキスト・Divider が白系に反転）を活用する実例
+ * - 待機中カード: Progress による呼び出し待ち人数の可視化
+ */
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import AppFrame from '@/components/foundation/AppFrame.vue'
+import AppBar from '@/components/foundation/AppBar.vue'
+import AppBody from '@/components/foundation/AppBody.vue'
+import Button from '@/components/elements/Button.vue'
+import Label from '@/components/elements/Label.vue'
+import Text from '@/components/elements/Text.vue'
+import Icon from '@/components/elements/Icon.vue'
+import Divider from '@/components/elements/Divider.vue'
+import Progress from '@/components/elements/Progress.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Card from '@/components/layouts/Card.vue'
+import Page from '@/components/layouts/Page.vue'
+
+const meta: Meta = {
+  title: 'Example/ホーム',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+export const ドメイン機能混合: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-button': Button,
+      'rn-label': Label,
+      'rn-text': Text,
+      'rn-icon': Icon,
+      'rn-divider': Divider,
+      'rn-progress': Progress,
+      'rn-stack': Stack,
+      'rn-card': Card,
+      'rn-page': Page,
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="ホーム" />
+
+        <rn-app-body>
+          <rn-page>
+            <template #body>
+          <rn-stack direction="vertical" gap="md" horizontalReSize="fill">
+
+
+            <!-- 呼び出し中: ダークサーフェス（data-dark + success 背景） -->
+            <rn-card
+              :elevation="true"
+              data-dark
+              style="background: var(--rn-success); border: none;"
+            >
+              <rn-stack direction="vertical" gap="md" horizontalReSize="fill">
+                <rn-stack
+                  direction="horizontal"
+                  horizontalAlign="between"
+                  verticalAlign="center"
+                  horizontalReSize="fill"
+                >
+                  <rn-label variant="outline">呼び出し中</rn-label>
+                </rn-stack>
+
+                <rn-stack direction="vertical" gap="xs" horizontalReSize="fill">
+                  <rn-text size="subtitle" weight="bold">RENI Official Store</rn-text>
+                  <rn-text size="headline" weight="bold" fontType="accent">
+                    142
+                  </rn-text>
+                  <rn-text color="subtle">
+                    ただいまお呼び出し中です。入場口へお越しください。
+                  </rn-text>
+                </rn-stack>
+
+                <!-- data-dark 配下では --rn-text-primary が白に反転し、
+                     light ボタン（白背景）の文字が見えなくなるため明示的に戻す -->
+                <rn-button
+                  block
+                  color="light"
+                  withArrow
+                  style="--rn-text-primary: var(--rn-grey-800);"
+                >
+                  受け取りへ進む
+                </rn-button>
+
+                <rn-divider />
+
+                <rn-stack
+                  direction="horizontal"
+                  horizontalAlign="between"
+                  verticalAlign="center"
+                  horizontalReSize="fill"
+                >
+                  <rn-stack gap="xs" verticalAlign="center">
+                    <rn-icon icon="clipboard-outline" color="inherit" />
+                    <rn-text size="body" weight="bold">
+                      オーダーシート
+                    </rn-text>
+                  </rn-stack>
+                  <rn-stack gap="xs" verticalAlign="center">
+                    <rn-text size="body" weight="bold">4点 · ¥8,400</rn-text>
+                    <rn-icon icon="chevron-right-outline" color="inherit" />
+                  </rn-stack>
+                </rn-stack>
+              </rn-stack>
+            </rn-card>
+
+            <!-- 呼び出し待ち: Progress で待ち状況を可視化 -->
+            <rn-card :elevation="false">
+              <rn-stack direction="vertical" gap="md" horizontalReSize="fill">
+                <rn-stack gap="sm" verticalAlign="center" direction="vertical">
+                  <rn-text size="subtitle" weight="bold">Sampleストア A</rn-text>
+                  <rn-text size="caption" color="subtle">
+                    幕張メッセ 9-11 ホール · 物販
+                  </rn-text>
+                </rn-stack>
+
+                <rn-divider />
+
+                <rn-stack
+                  direction="horizontal"
+                  horizontalAlign="between"
+                  verticalAlign="center"
+                  horizontalReSize="fill"
+                >
+                  <rn-text size="caption" color="subtle">マイ整理券</rn-text>
+                  <rn-label size="sm" color="success">呼び出し待ち</rn-label>
+                </rn-stack>
+
+                <rn-stack
+                  direction="horizontal"
+                  horizontalAlign="between"
+                  verticalAlign="center"
+                  horizontalReSize="fill"
+                >
+                  <rn-text size="headline" weight="bold" fontType="accent">
+                    C-124
+                  </rn-text>
+                  <rn-icon icon="chevron-right-outline" color="subtle" />
+                </rn-stack>
+
+                <rn-stack gap="sm" verticalAlign="center" horizontalReSize="fill">
+                  <div style="flex: 1;">
+                    <rn-progress :value="6" :max="12" color="success" />
+                  </div>
+                  <rn-text size="caption" color="subtle">あと 6人</rn-text>
+                </rn-stack>
+
+                <rn-divider />
+
+                <rn-stack
+                  direction="horizontal"
+                  horizontalAlign="between"
+                  verticalAlign="center"
+                  horizontalReSize="fill"
+                >
+                  <rn-stack gap="xs" verticalAlign="center">
+                    <rn-icon icon="plus-outline" color="success" />
+                    <rn-text size="body" weight="bold" color="success">
+                      オーダーシートを作成
+                    </rn-text>
+                  </rn-stack>
+                  <rn-text size="caption" color="subtle">
+                    待ち時間に注文を準備
+                  </rn-text>
+                </rn-stack>
+              </rn-stack>
+            </rn-card>
+
+            <!-- オーダーシートのみ -->
+            <rn-card :elevation="false">
+              <rn-stack direction="vertical" gap="md" horizontalReSize="fill">
+                <rn-stack gap="sm" verticalAlign="center" direction="vertical">
+                  <rn-text size="subtitle" weight="bold">Sampleストア B</rn-text>
+                  <rn-text size="caption" color="subtle">
+                    渋谷 PARCO 4F · 期間限定
+                  </rn-text>
+                </rn-stack>
+
+                <rn-divider />
+
+                <rn-stack
+                  direction="horizontal"
+                  horizontalAlign="between"
+                  verticalAlign="center"
+                  horizontalReSize="fill"
+                >
+                  <rn-text size="body" color="subtle">オーダーシート</rn-text>
+                  <rn-stack gap="xs" verticalAlign="center">
+                    <rn-text size="body" weight="bold">4点 · ¥8,400</rn-text>
+                    <rn-icon icon="chevron-right-outline" color="subtle" />
+                  </rn-stack>
+                </rn-stack>
+              </rn-stack>
+            </rn-card>
+
+          </rn-stack>
+            </template>
+          </rn-page>
+        </rn-app-body>
+      </rn-app-frame>
+    `,
+  }),
+}

package/src/stories/compositions/EventPage.stories.ts

@@ -116,14 +116,14 @@ export const イベント一覧: Story = {
               :active="slotProps.currentIndex === 0"
               @click="handleTabChange(0)"
             >
-              <rn-icon icon="calendar" />
+              <rn-icon icon="calendar-outline" />
               開催予定
             </rn-tab>
             <rn-tab
               :active="slotProps.currentIndex === 1"
               @click="handleTabChange(1)"
             >
-              <rn-icon icon="check-circle" />
+              <rn-icon icon="circle-check-outline" />
               開催済み
             </rn-tab>
           </rn-tabs>