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

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

package/dist/components/features/CarouselBanner.vue.d.ts

@@ -1,36 +0,0 @@
-
-export type CarouselBannerProps = {
-    variant?: 'default' | 'overlay';
-    banners: {
-        title: string;
-        description?: string;
-        imageUrl: string;
-        linkUrl?: string;
-    }[];
-};
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CarouselBannerProps>, {
-    variant: string;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CarouselBannerProps>, {
-    variant: string;
-}>>> & Readonly<{}>, {
-    variant: "default" | "overlay";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-//# sourceMappingURL=CarouselBanner.vue.d.ts.map

package/dist/components/features/CarouselBanner.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselBanner.vue.d.ts","sourceRoot":"","sources":["../../../src/components/features/CarouselBanner.vue"],"names":[],"mappings":"AAGA,OAAO,0BAA0B,CAAA;AACjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,MAAM,CAAA;QAChB,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,EAAE,CAAA;CACJ,CAAA;;;;;;aAPW,SAAS,GAAG,SAAS;;AA2KjC,wBAMG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/features/VariationSelector.vue.d.ts

@@ -1,39 +0,0 @@
-
-export type VariationSelectorProps = {
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-    }[];
-};
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<any>;
-    options: {
-        type: import('vue').PropType<{
-            label: string;
-            value: string;
-            disabled?: boolean;
-        }[]>;
-        required: true;
-        default: () => never[];
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: import('vue').PropType<any>;
-    options: {
-        type: import('vue').PropType<{
-            label: string;
-            value: string;
-            disabled?: boolean;
-        }[]>;
-        required: true;
-        default: () => never[];
-    };
-}>> & Readonly<{}>, {
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-    }[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=VariationSelector.vue.d.ts.map

package/dist/components/features/VariationSelector.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariationSelector.vue.d.ts","sourceRoot":"","sources":["../../../src/components/features/VariationSelector.vue"],"names":[],"mappings":"AAGA,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,EAAE,CAAA;CACJ,CAAA;;gBAuBW,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;mBA3B5B,MAAM;mBACN,MAAM;uBACF,OAAO;;kBAmK+K,IAAI;;;;gBA1I7L,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;;mBA3B5B,MAAM;mBACN,MAAM;uBACF,OAAO;;kBAmK+K,IAAI;;;;aAtK9L;QACP,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,EAAE;;AAuJL,wBASG"}