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

package/src/stories/Label.stories.ts

@@ -28,7 +28,7 @@ const meta: Meta<typeof Label> = {
     },
     variant: {
       control: 'select',
-      options: ['filled', 'outline'],
+      options: ['solid', 'filled', 'outline'],
     },
   },
   args: {
@@ -92,6 +92,18 @@ export const カラー一覧: OverridesStory = {
     },
     template: /* html */ `
       <div class='sb-canvas'>
+        <h3>Solid</h3>
+        <rn-stack direction="horizontal" gap="sm" style="flex-wrap: wrap; margin-bottom: 24px;">
+          <rn-label
+            v-for="color in allColors"
+            :key="'solid-' + color"
+            :color="color"
+            variant="solid"
+          >
+            {{ color }}
+          </rn-label>
+        </rn-stack>
+
         <h3>Filled</h3>
         <rn-stack direction="horizontal" gap="sm" style="flex-wrap: wrap; margin-bottom: 24px;">
           <rn-label

package/src/stories/Text.stories.ts

@@ -67,3 +67,26 @@ export const 基本: OverridesStory = {
     `,
   }),
 }
+
+export const Nl2br: OverridesStory = {
+  args: {
+    nl2br: true,
+    slotText: '1行目のテキスト\n2行目のテキスト\n3行目のテキスト',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-text :size=args.size :color=args.color :weight=args.weight :nl2br=args.nl2br>
+          {{ args.slotText }}
+        </rn-text>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,184 @@
+/**
+ * Composition Story: イベントページ
+ *
+ * イベント・スケジュール一覧画面を模した構成。
+ * Tabs, Disclosure, Section, Stack, Card, Text を組み合わせ、
+ * タブ切り替え + アコーディオン開閉を含む画面をテストする。
+ */
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import Tabs from '@/components/interactive/Tabs.vue'
+import Tab from '@/components/interactive/Tab.vue'
+import Disclosure from '@/components/interactive/Disclosure.vue'
+import Section from '@/components/layouts/Section.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Card from '@/components/layouts/Card.vue'
+import Text from '@/components/elements/Text.vue'
+import Button from '@/components/elements/Button.vue'
+import Divider from '@/components/elements/Divider.vue'
+import Icon from '@/components/elements/Icon.vue'
+
+const meta: Meta = {
+  title: 'Example/イベントページ',
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+const mockEvents = [
+  {
+    id: 1,
+    title: '新作お披露目会',
+    date: '2025/04/20 14:00',
+    location: '東京・渋谷',
+    description:
+      '新作アイテムをいち早くお披露目します。限定グッズの先行販売もあります。',
+  },
+  {
+    id: 2,
+    title: 'ファンミーティング',
+    date: '2025/05/10 13:00',
+    location: '大阪・梅田',
+    description:
+      'クリエイターとファンが直接交流できるイベントです。サイン会も予定しています。',
+  },
+  {
+    id: 3,
+    title: 'ポップアップストア',
+    date: '2025/06/01 〜 06/07',
+    location: '名古屋・栄',
+    description: '期間限定ショップをオープン。イベント限定商品を販売します。',
+  },
+]
+
+const mockFaqItems = [
+  {
+    question: '参加には予約が必要ですか？',
+    answer:
+      'はい、全てのイベントは事前予約制です。各イベントの申し込みページからご予約ください。',
+  },
+  {
+    question: 'キャンセルはできますか？',
+    answer:
+      'イベント開催日の3日前までキャンセル可能です。それ以降のキャンセルはお受けできません。',
+  },
+  {
+    question: '物販はありますか？',
+    answer:
+      'イベントによって異なります。各イベントの詳細ページをご確認ください。',
+  },
+  {
+    question: '未成年でも参加できますか？',
+    answer:
+      '全てのイベントで年齢制限はありません。ただし、中学生以下のお子様は保護者の同伴が必要です。',
+  },
+]
+
+export const イベント一覧: Story = {
+  render: () => ({
+    components: {
+      'rn-tabs': Tabs,
+      'rn-tab': Tab,
+      'rn-disclosure': Disclosure,
+      'rn-section': Section,
+      'rn-stack': Stack,
+      'rn-card': Card,
+      'rn-text': Text,
+      'rn-button': Button,
+      'rn-divider': Divider,
+      'rn-icon': Icon,
+    },
+    setup() {
+      const currentTab = ref(0)
+
+      const handleTabChange = (index: number) => {
+        currentTab.value = index
+      }
+
+      return {
+        currentTab,
+        handleTabChange,
+        mockEvents,
+        mockFaqItems,
+      }
+    },
+    template: /* html */ `
+      <div style="width: 100%;">
+      <rn-stack direction="vertical" gap="xl" horizontalReSize="fill">
+
+        <rn-section title="イベント情報" description="今後のイベント・スケジュール">
+          <template #body>
+          <rn-tabs :modelValue="currentTab" v-slot="slotProps">
+            <rn-tab
+              :active="slotProps.currentIndex === 0"
+              @click="handleTabChange(0)"
+            >
+              <rn-icon icon="calendar" />
+              開催予定
+            </rn-tab>
+            <rn-tab
+              :active="slotProps.currentIndex === 1"
+              @click="handleTabChange(1)"
+            >
+              <rn-icon icon="check-circle" />
+              開催済み
+            </rn-tab>
+          </rn-tabs>
+
+          <rn-stack direction="vertical" gap="md" style="margin-top: 16px;">
+            <template v-if="currentTab === 0">
+              <rn-card v-for="event in mockEvents" :key="event.id">
+                <rn-stack direction="vertical" gap="sm" padding="md">
+                  <rn-text variant="title-sm">{{ event.title }}</rn-text>
+                  <rn-stack direction="horizontal" gap="md">
+                    <rn-text variant="body-sm" color="secondary">
+                      {{ event.date }}
+                    </rn-text>
+                    <rn-text variant="body-sm" color="secondary">
+                      {{ event.location }}
+                    </rn-text>
+                  </rn-stack>
+                  <rn-text variant="body-sm">{{ event.description }}</rn-text>
+                  <rn-button variant="outlined" size="sm">
+                    詳細を見る
+                  </rn-button>
+                </rn-stack>
+              </rn-card>
+            </template>
+            <template v-else>
+              <rn-card>
+                <rn-stack direction="vertical" gap="sm" padding="md" horizontalAlign="center">
+                  <rn-text variant="body-sm" color="secondary">
+                    過去のイベントはありません
+                  </rn-text>
+                </rn-stack>
+              </rn-card>
+            </template>
+          </rn-stack>
+          </template>
+        </rn-section>
+
+        <rn-divider />
+
+        <rn-section title="よくある質問">
+          <template #body>
+            <rn-stack direction="vertical" gap="sm">
+              <rn-disclosure
+                v-for="(faq, index) in mockFaqItems"
+                :key="index"
+                :title="faq.question"
+              >
+                <rn-text variant="body-sm">{{ faq.answer }}</rn-text>
+              </rn-disclosure>
+            </rn-stack>
+          </template>
+        </rn-section>
+
+      </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/compositions/FormPage.stories.ts

@@ -0,0 +1,222 @@
+/**
+ * Composition Story: フォームページ
+ *
+ * お届け先入力フォームを模した画面構成。
+ * TextField, SelectBox, CheckBox, Radio, TextArea, Button, Form を組み合わせ、
+ * バリデーション連携を含むリアルなフォーム画面をテストする。
+ */
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import Form from '@/components/renderless/Form.vue'
+import TextField from '@/components/elements/TextField.vue'
+import SelectBox from '@/components/elements/SelectBox.vue'
+import TextArea from '@/components/elements/TextArea.vue'
+import CheckBox from '@/components/elements/CheckBox.vue'
+import Radio from '@/components/elements/Radio.vue'
+import Button from '@/components/elements/Button.vue'
+import Text from '@/components/elements/Text.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Section from '@/components/layouts/Section.vue'
+import Card from '@/components/layouts/Card.vue'
+import Divider from '@/components/elements/Divider.vue'
+
+const meta: Meta = {
+  title: 'Example/フォームページ',
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+const prefectureItems = [
+  { label: '東京都', value: 'tokyo' },
+  { label: '神奈川県', value: 'kanagawa' },
+  { label: '大阪府', value: 'osaka' },
+  { label: '愛知県', value: 'aichi' },
+  { label: '福岡県', value: 'fukuoka' },
+]
+
+const paymentMethods = [
+  { label: 'クレジットカード', value: 'credit' },
+  { label: 'コンビニ払い', value: 'convenience' },
+  { label: '銀行振込', value: 'bank' },
+]
+
+export const お届け先入力: Story = {
+  render: () => ({
+    components: {
+      'rn-form': Form,
+      'rn-text-field': TextField,
+      'rn-select-box': SelectBox,
+      'rn-text-area': TextArea,
+      'rn-checkbox': CheckBox,
+      'rn-radio': Radio,
+      'rn-button': Button,
+      'rn-text': Text,
+      'rn-stack': Stack,
+      'rn-section': Section,
+      'rn-card': Card,
+      'rn-divider': Divider,
+    },
+    setup() {
+      const name = ref('')
+      const email = ref('')
+      const phone = ref('')
+      const postalCode = ref('')
+      const prefecture = ref(null)
+      const address = ref('')
+      const building = ref('')
+      const payment = ref('credit')
+      const notes = ref('')
+      const agreed = ref(false)
+
+      const handleSubmit = () => {
+        console.log('送信:', {
+          name: name.value,
+          email: email.value,
+          phone: phone.value,
+          postalCode: postalCode.value,
+          prefecture: prefecture.value,
+          address: address.value,
+          building: building.value,
+          payment: payment.value,
+          notes: notes.value,
+        })
+      }
+
+      return {
+        name,
+        email,
+        phone,
+        postalCode,
+        prefecture,
+        address,
+        building,
+        payment,
+        notes,
+        agreed,
+        prefectureItems,
+        paymentMethods,
+        handleSubmit,
+      }
+    },
+    template: /* html */ `
+      <div style="width: 100%;">
+      <rn-section title="お届け先情報">
+        <template #body>
+        <rn-form v-slot="{ canSubmit }">
+          <rn-stack direction="vertical" gap="lg" horizontalReSize="fill">
+
+            <rn-card>
+              <rn-stack direction="vertical" gap="md" padding="md">
+                <rn-text variant="title-sm">お届け先</rn-text>
+                <rn-text-field
+                  v-model="name"
+                  label="お名前"
+                  name="name"
+                  rules="required"
+                  placeholder="山田 太郎"
+                />
+                <rn-text-field
+                  v-model="email"
+                  label="メールアドレス"
+                  name="email"
+                  type="email"
+                  rules="required|email"
+                  placeholder="example@email.com"
+                />
+                <rn-text-field
+                  v-model="phone"
+                  label="電話番号"
+                  name="phone"
+                  type="tel"
+                  rules="required"
+                  placeholder="090-1234-5678"
+                />
+                <rn-divider />
+                <rn-text-field
+                  v-model="postalCode"
+                  label="郵便番号"
+                  name="postalCode"
+                  rules="required"
+                  placeholder="123-4567"
+                />
+                <rn-select-box
+                  v-model="prefecture"
+                  label="都道府県"
+                  name="prefecture"
+                  :items="prefectureItems"
+                  rules="required"
+                  placeholder="選択してください"
+                />
+                <rn-text-field
+                  v-model="address"
+                  label="市区町村・番地"
+                  name="address"
+                  rules="required"
+                  placeholder="渋谷区神南1-2-3"
+                />
+                <rn-text-field
+                  v-model="building"
+                  label="建物名・部屋番号"
+                  name="building"
+                  placeholder="○○マンション 101号室"
+                />
+              </rn-stack>
+            </rn-card>
+
+            <rn-card>
+              <rn-stack direction="vertical" gap="md" padding="md">
+                <rn-text variant="title-sm">お支払い方法</rn-text>
+                <rn-radio
+                  v-model="payment"
+                  name="payment"
+                  :items="paymentMethods"
+                  direction="vertical"
+                  variant="default"
+                  color="default"
+                />
+              </rn-stack>
+            </rn-card>
+
+            <rn-card>
+              <rn-stack direction="vertical" gap="md" padding="md">
+                <rn-text variant="title-sm">備考</rn-text>
+                <rn-text-area
+                  v-model="notes"
+                  label="配送に関するご要望"
+                  name="notes"
+                  placeholder="置き配希望など"
+                  :rows="3"
+                />
+              </rn-stack>
+            </rn-card>
+
+            <rn-stack direction="vertical" gap="md" horizontalAlign="center">
+              <rn-checkbox
+                v-model="agreed"
+                label="利用規約に同意する"
+                name="agreement"
+                :required="true"
+              />
+              <rn-button
+                variant="fill"
+                size="lg"
+                block
+                :disabled="!canSubmit || !agreed"
+                @click="handleSubmit"
+              >
+                注文を確定する
+              </rn-button>
+            </rn-stack>
+
+          </rn-stack>
+        </rn-form>
+        </template>
+      </rn-section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,164 @@
+/**
+ * Composition Story: ストアトップページ
+ *
+ * 2C ストアの典型的なファーストビューを模した画面構成。
+ * AppFrame をルートに、AnnounceBar / Hero は全幅、
+ * Section 内コンテンツは max-width 制約で表示する。
+ *
+ * ※ Slider は Swiper 依存のため happy-dom で動作しない可能性あり。
+ *    このストーリーでは ProductList(list) で代替テストする。
+ */
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import AppFrame from '@/components/foundation/AppFrame.vue'
+import AnnounceBar from '@/components/features/AnnounceBar.vue'
+import Hero from '@/components/features/Hero.vue'
+import Banner from '@/components/features/Banner.vue'
+import ProductList from '@/components/features/ProductList.vue'
+import Section from '@/components/layouts/Section.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Button from '@/components/elements/Button.vue'
+
+const meta: Meta = {
+  title: 'Example/ストアトップページ',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+const mockProducts = [
+  {
+    product_id: '1',
+    title: 'オリジナルTシャツ',
+    price_sale: 3980,
+    img_urls: ['https://placehold.co/400x400?text=T-shirt'],
+  },
+  {
+    product_id: '2',
+    title: 'アクリルキーホルダー',
+    price_sale: 1200,
+    img_urls: ['https://placehold.co/400x400?text=Keychain'],
+  },
+  {
+    product_id: '3',
+    title: 'トートバッグ',
+    price_sale: 2500,
+    img_urls: ['https://placehold.co/400x400?text=Tote+Bag'],
+  },
+  {
+    product_id: '4',
+    title: 'ステッカーセット',
+    price_sale: 800,
+    img_urls: ['https://placehold.co/400x400?text=Stickers'],
+  },
+  {
+    product_id: '5',
+    title: 'マグカップ',
+    price_sale: 1800,
+    img_urls: ['https://placehold.co/400x400?text=Mug'],
+  },
+  {
+    product_id: '6',
+    title: 'ポスター A2',
+    price_sale: 1500,
+    img_urls: ['https://placehold.co/400x400?text=Poster'],
+  },
+]
+
+export const トップページ: Story = {
+  render: () => ({
+    components: {
+      'rn-app-frame': AppFrame,
+      'rn-announce-bar': AnnounceBar,
+      'rn-hero': Hero,
+      'rn-banner': Banner,
+      'rn-product-list': ProductList,
+      'rn-section': Section,
+      'rn-stack': Stack,
+      'rn-button': Button,
+    },
+    setup() {
+      return { mockProducts }
+    },
+    template: /* html */ `
+      <rn-app-frame style="--rn-app-frame-min-height: auto;">
+
+        <rn-announce-bar
+          title="期間限定セール開催中！"
+          subtitle="全品10%OFF"
+          color="primary"
+          colorStyle="gradient"
+        />
+
+        <rn-hero
+          layout="overlay"
+          media="https://placehold.co/1200x600?text=Hero+Image"
+          eyebrow="NEW ARRIVAL"
+          title="Spring Collection 2025"
+          subtitle="新作アイテムが続々入荷"
+          description="お気に入りのクリエイターの最新グッズをチェック"
+          contentAlign="center"
+          contentVerticalAlign="center"
+          overlayColor="rgba(0, 0, 0, 0.4)"
+        />
+
+        <div style="max-width: 1280px; margin: 0 auto; padding: 32px 24px; width: 100%; box-sizing: border-box;">
+          <rn-section
+            title="新着商品"
+            description="最新のアイテムをチェック"
+            headerAlign="center"
+          >
+            <template #body>
+              <rn-product-list
+                displayMode="list"
+                :pcColumns="3"
+                :spColumns="2"
+                :pcRows="1"
+                :spRows="1"
+                :data="mockProducts"
+              />
+              <rn-stack horizontalAlign="center" style="margin-top: 16px;">
+                <rn-button variant="outlined" withArrow>
+                  すべての商品を見る
+                </rn-button>
+              </rn-stack>
+            </template>
+          </rn-section>
+        </div>
+
+        <rn-banner
+          imageUrl="https://placehold.co/1200x400?text=Campaign+Banner"
+          title="コラボレーション企画"
+          description="人気クリエイター × ブランドの限定コラボアイテム"
+          variant="overlay"
+          overlayColor="rgba(0, 0, 0, 0.3)"
+          contentHorizontalAlign="center"
+          contentVerticalAlign="center"
+          aspectRatio="3/1"
+        />
+
+        <div style="max-width: 1280px; margin: 0 auto; padding: 32px 24px; width: 100%; box-sizing: border-box;">
+          <rn-section
+            title="人気ランキング"
+            description="今週の売れ筋トップ6"
+            headerAlign="center"
+          >
+            <template #body>
+              <rn-product-list
+                displayMode="list"
+                :pcColumns="3"
+                :spColumns="2"
+                :pcRows="1"
+                :spRows="1"
+                :data="mockProducts"
+              />
+            </template>
+          </rn-section>
+        </div>
+
+      </rn-app-frame>
+    `,
+  }),
+}