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

package/src/stories/compositions/TicketPage.stories.ts

@@ -0,0 +1,300 @@
+/**
+ * Composition Story: 整理券ページ
+ *
+ * イベント物販の整理券発行画面を模した構成。
+ * AppFrame をルートに、AppBar・AppBody・AppBottomBar の3層を組み、
+ * AppBottomBar に「ページ固有CTA + グローバルタブ」を Stack するパターンの実例。
+ */
+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 AppBottomBar from '@/components/foundation/AppBottomBar.vue'
+import Tabs from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.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 Callout from '@/components/elements/Callout.vue'
+import AnnounceBar from '@/components/features/AnnounceBar.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Card from '@/components/layouts/Card.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-app-bottom-bar': AppBottomBar,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-button': Button,
+      'rn-label': Label,
+      'rn-text': Text,
+      'rn-icon': Icon,
+      'rn-divider': Divider,
+      'rn-callout': Callout,
+      'rn-stack': Stack,
+      'rn-card': Card,
+    },
+    setup() {
+      // 店舗配下の画面。AppBar 左端から店舗横断ホームへ戻れるようにする
+      const home = { title: 'すべての店舗トップ', action: () => {} }
+      return { home }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="KIRITO OFFICIAL GOODS STORE" :home="home" />
+
+        <rn-app-body>
+          <rn-card>
+            <rn-stack direction="vertical" gap="lg" horizontalReSize="fill">
+              <!-- ステータス + 整理券名（近接グルーピング） -->
+              <rn-stack direction="vertical" gap="sm" horizontalReSize="fill">
+                <rn-stack horizontalReSize="fill">
+                  <rn-label variant="outline" color="success">受付中</rn-label>
+                </rn-stack>
+                <rn-text size="title" weight="bold">
+                  RENI Official Store ドームツアー2025 整理券
+                </rn-text>
+              </rn-stack>
+
+              <!-- 開催情報 -->
+              <rn-stack direction="vertical" gap="sm" horizontalReSize="fill">
+                <rn-stack gap="sm" verticalAlign="center">
+                  <rn-icon icon="calendar-outline" color="subtle" />
+                  <rn-text size="body" color="subtle">
+                    2025年12月14日15:00 - 21:00
+                  </rn-text>
+                </rn-stack>
+                <rn-stack gap="sm" verticalAlign="center">
+                  <rn-icon icon="location-dot-outline" color="subtle" />
+                  <rn-text size="body" color="subtle">
+                    苗場スキー場 オフィシャルグッズ売り場
+                  </rn-text>
+                </rn-stack>
+              </rn-stack>
+
+              <!-- 注意事項: 案内系 Callout と同じデフォルトのテイスト（白背景＋枠線＋グレー info アイコン） -->
+              <rn-callout title="注意事項">
+                ※ このデバイスで取得できるのは1枚のみです。<br />
+                ※ 発行後のキャンセル・変更はできません。
+              </rn-callout>
+
+              <!-- 発行ボタン: 受付中のため活性 -->
+              <rn-button block color="default">整理券を発行</rn-button>
+            </rn-stack>
+          </rn-card>
+        </rn-app-body>
+
+        <rn-app-bottom-bar>
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab icon="ticket-outline" label="整理券" :active="true" />
+            <rn-tab icon="tote-bag-outline" label="オーダーシート" />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const 受付開始前: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-button': Button,
+      'rn-label': Label,
+      'rn-text': Text,
+      'rn-icon': Icon,
+      'rn-divider': Divider,
+      'rn-callout': Callout,
+      'rn-stack': Stack,
+      'rn-card': Card,
+    },
+    setup() {
+      // 店舗配下の画面。AppBar 左端から店舗横断ホームへ戻れるようにする
+      const home = { title: 'すべての店舗トップ', action: () => {} }
+      return { home }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="KIRITO OFFICIAL GOODS STORE" :home="home" />
+
+        <rn-app-body>
+          <rn-card>
+            <rn-stack direction="vertical" gap="lg" horizontalReSize="fill">
+              <!-- ステータス + 整理券名（近接グルーピング） -->
+              <rn-stack direction="vertical" gap="sm" horizontalReSize="fill">
+                <rn-stack horizontalReSize="fill">
+                  <rn-label variant="solid" color="subtle">受付開始前</rn-label>
+                </rn-stack>
+                <rn-text size="title" weight="bold">
+                  RENI Official Store ドームツアー2025 整理券
+                </rn-text>
+              </rn-stack>
+
+              <!-- 開催情報 -->
+              <rn-stack direction="vertical" gap="sm" horizontalReSize="fill">
+                <rn-stack gap="sm" verticalAlign="center">
+                  <rn-icon icon="calendar-outline" color="subtle" />
+                  <rn-text size="body" color="subtle">
+                    2025年12月14日15:00 - 21:00
+                  </rn-text>
+                </rn-stack>
+                <rn-stack gap="sm" verticalAlign="center">
+                  <rn-icon icon="location-dot-outline" color="subtle" />
+                  <rn-text size="body" color="subtle">
+                    苗場スキー場 オフィシャルグッズ売り場
+                  </rn-text>
+                </rn-stack>
+              </rn-stack>
+
+              <!-- 注意事項: 案内系 Callout と同じデフォルトのテイスト（白背景＋枠線＋グレー info アイコン） -->
+              <rn-callout title="注意事項">
+                ※ このデバイスで取得できるのは1枚のみです。<br />
+                ※ 発行後のキャンセル・変更はできません。
+              </rn-callout>
+
+              <!-- 発行ボタン: 受付開始前のため非活性 -->
+              <rn-button block disabled>現在発行していません</rn-button>
+            </rn-stack>
+          </rn-card>
+        </rn-app-body>
+
+        <rn-app-bottom-bar>
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab icon="ticket-outline" label="整理券" :active="true" />
+            <rn-tab icon="tote-bag-outline" label="オーダーシート" />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}
+
+export const 呼び出し待ち: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-app-bar': AppBar,
+      'rn-app-body': AppBody,
+      'rn-app-bottom-bar': AppBottomBar,
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-button': Button,
+      'rn-label': Label,
+      'rn-text': Text,
+      'rn-callout': Callout,
+      'rn-announce-bar': AnnounceBar,
+      'rn-stack': Stack,
+      'rn-card': Card,
+    },
+    setup() {
+      // 店舗配下の画面。AppBar 左端から店舗横断ホームへ戻れるようにする
+      const home = { title: 'すべての店舗トップ', action: () => {} }
+      return { home }
+    },
+    template: /* html */ `
+      <rn-app-frame>
+        <rn-app-bar title="KIRITO OFFICIAL GOODS STORE" :home="home" />
+
+        <rn-app-body>
+          <rn-card>
+            <rn-stack direction="vertical" gap="lg" horizontalReSize="fill">
+              <rn-text size="title" weight="bold">
+                東京ドーム 公演前物販 A ゲート 整理券
+              </rn-text>
+
+              <!-- 整理番号: 画面の主役。caption ラベル + 巨大な番号を中央に -->
+              <rn-stack
+                direction="vertical"
+                horizontalAlign="center"
+                horizontalReSize="fill"
+              >
+                <rn-text size="subtitle" color="subtle">あなたの整理番号</rn-text>
+                <!-- 整理番号は画面の主役。headline をさらに拡大して視認性を最大化 -->
+                <rn-text
+                  size="headline"
+                  weight="bold"
+                  fontType="accent"
+                  style="font-size: 7rem; line-height: 1.1;"
+                >
+                  150
+                </rn-text>
+                <rn-label size="lg" color="success" variant="solid">
+                  呼び出し待ち
+                </rn-label>
+              </rn-stack>
+
+              <!-- 現在の呼び出し範囲: 数値を強調 -->
+              <rn-stack
+                gap="xs"
+                horizontalAlign="center"
+                verticalAlign="baseline"
+                horizontalReSize="fill"
+              >
+                <rn-text size="subtitle">現在</rn-text>
+                <rn-text size="subtitle" weight="bold">30〜90</rn-text>
+                <rn-text size="subtitle">番を呼び出し中</rn-text>
+              </rn-stack>
+
+              <!-- 案内系の Callout は関連が近いため gap を詰めてグルーピング -->
+              <rn-stack direction="vertical" horizontalReSize="fill">
+                <!-- 自動切り替えの案内 -->
+                <rn-callout
+                  message="お呼び出し時、この画面は自動で切り替わります。"
+                />
+
+                <!-- 通知設定への導線: action スロットに CTA -->
+                <rn-callout
+                  color="warning"
+                  variant="tonal"
+                  icon="bell-outline"
+                  title="お呼び出し通知を設定"
+                  message="メールでお呼び出しの通知を受け取れます。"
+                >
+                  <template #action>
+                    <rn-button color="warning" size="sm">設定する</rn-button>
+                  </template>
+                </rn-callout>
+              </rn-stack>
+            </rn-stack>
+          </rn-card>
+        </rn-app-body>
+
+        <rn-app-bottom-bar>
+          <!-- タブ上に常駐する案内バー。オーダーシートの事前作成を訴求 -->
+          <!-- info(default): 本文とタブ帯の境界に置く帯。ベタ塗りでゾーンの区切りを明確にする -->
+          <rn-announce-bar
+            color="info"
+            title="オーダーシートを作成しましょう"
+            subtitle="事前に作成するとスムーズにお会計ができます"
+            url="#"
+          />
+          <rn-tabs variant="icon" :isStretched="true">
+            <rn-tab icon="ticket-outline" label="整理券" :active="true" />
+            <rn-tab icon="tote-bag-outline" label="オーダーシート" />
+          </rn-tabs>
+        </rn-app-bottom-bar>
+      </rn-app-frame>
+    `,
+  }),
+}

package/src/stories/compositions/TopPage.stories.ts

@@ -33,37 +33,37 @@ const mockProducts = [
     product_id: '1',
     title: 'オリジナルTシャツ',
     price_sale: 3980,
-    img_urls: ['https://placehold.co/400x400?text=T-shirt'],
+    img_urls: ['/placeholder-400x400.svg'],
   },
   {
     product_id: '2',
     title: 'アクリルキーホルダー',
     price_sale: 1200,
-    img_urls: ['https://placehold.co/400x400?text=Keychain'],
+    img_urls: ['/placeholder-400x400.svg'],
   },
   {
     product_id: '3',
     title: 'トートバッグ',
     price_sale: 2500,
-    img_urls: ['https://placehold.co/400x400?text=Tote+Bag'],
+    img_urls: ['/placeholder-400x400.svg'],
   },
   {
     product_id: '4',
     title: 'ステッカーセット',
     price_sale: 800,
-    img_urls: ['https://placehold.co/400x400?text=Stickers'],
+    img_urls: ['/placeholder-400x400.svg'],
   },
   {
     product_id: '5',
     title: 'マグカップ',
     price_sale: 1800,
-    img_urls: ['https://placehold.co/400x400?text=Mug'],
+    img_urls: ['/placeholder-400x400.svg'],
   },
   {
     product_id: '6',
     title: 'ポスター A2',
     price_sale: 1500,
-    img_urls: ['https://placehold.co/400x400?text=Poster'],
+    img_urls: ['/placeholder-400x400.svg'],
   },
 ]
 
@@ -94,7 +94,7 @@ export const トップページ: Story = {
 
         <rn-hero
           layout="overlay"
-          media="https://placehold.co/1200x600?text=Hero+Image"
+          media="/placeholder-1200x600.svg"
           eyebrow="NEW ARRIVAL"
           title="Spring Collection 2025"
           subtitle="新作アイテムが続々入荷"
@@ -129,7 +129,7 @@ export const トップページ: Story = {
         </div>
 
         <rn-banner
-          imageUrl="https://placehold.co/1200x400?text=Campaign+Banner"
+          imageUrl="/placeholder-1200x400.svg"
           title="コラボレーション企画"
           description="人気クリエイター × ブランドの限定コラボアイテム"
           variant="overlay"

package/src/stories/SnsLink.stories.ts

@@ -1,259 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import SnsLink, { SnsLinkProps } from '@/components/features/SnsLink.vue'
-import { ColorOptions, SNSOptions } from '@/constants'
-import { Color } from '@/types'
-
-const meta: Meta<typeof SnsLink> = {
-  title: 'Features/SnsLink',
-  component: SnsLink,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: Object.keys(SNSOptions),
-    },
-    href: {
-      control: 'text',
-    },
-    color: {
-      control: 'select',
-      options: Object.keys(ColorOptions) as Color[],
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-    },
-    target: {
-      control: 'select',
-      options: ['_blank', '_self'],
-    },
-    variant: {
-      control: 'select',
-      options: ['icon', 'label'],
-    },
-  },
-  args: {
-    type: 'x-twitter',
-    href: '#',
-    color: 'default',
-    size: 'md',
-    target: '_blank',
-    variant: 'icon',
-  },
-}
-
-export default meta
-type StoryArgs = SnsLinkProps
-type Story = StoryObj<StoryArgs>
-type OverridesStory = Omit<Story, 'argTypes'> & {
-  argTypes?: Record<string, any>
-}
-
-export const 基本: OverridesStory = {
-  args: {},
-  argTypes: {
-    default: { table: { disable: true } },
-  },
-  render: (args: StoryArgs) => ({
-    components: { 'rn-sns-link': SnsLink },
-    setup() {
-      return { args }
-    },
-    template: /* html */ `
-      <div class='sb-canvas'>
-        <rn-sns-link
-          :type="args.type"
-          :href="args.href"
-          :color="args.color"
-          :size="args.size"
-          :target="args.target"
-          :variant="args.variant"
-        />
-      </div>
-    `,
-  }),
-}
-
-export const アイコン一覧: OverridesStory = {
-  args: {
-    variant: 'icon',
-    size: 'lg',
-  },
-  argTypes: {
-    default: { table: { disable: true } },
-  },
-  render: (args: StoryArgs) => ({
-    components: { 'rn-sns-link': SnsLink },
-    setup() {
-      return { args }
-    },
-    template: /* html */ `
-      <div class='sb-canvas' style='display: flex; gap: 16px; align-items: center;'>
-        <rn-sns-link
-          type="x-twitter"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="youtube"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="instagram"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="tiktok"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="facebook"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="line"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="pixiv"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="twitch"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="spotify"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="nicovideo"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="music_line"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="music_apple"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-      </div>
-    `,
-  }),
-}
-
-export const ラベル付き: OverridesStory = {
-  args: {
-    variant: 'label',
-    size: 'md',
-  },
-  argTypes: {
-    default: { table: { disable: true } },
-  },
-  render: (args: StoryArgs) => ({
-    components: { 'rn-sns-link': SnsLink },
-    setup() {
-      return { args }
-    },
-    template: /* html */ `
-      <div class='sb-canvas' style='display: flex; flex-direction: column; gap: 12px;'>
-        <rn-sns-link
-          type="x-twitter"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="youtube"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="instagram"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="tiktok"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="facebook"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="line"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="pixiv"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="twitch"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="spotify"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="nicovideo"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="music_line"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-        <rn-sns-link
-          type="music_apple"
-          href="#"
-          :size="args.size"
-          :variant="args.variant"
-        />
-      </div>
-    `,
-  }),
-}