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

package/src/stories/AppBar.stories.ts

@@ -0,0 +1,277 @@
+import Button from '@/components/elements/Button.vue'
+import Icon from '@/components/elements/Icon.vue'
+import Text from '@/components/elements/Text.vue'
+import AppBar, {
+  AppBarProps,
+  AppBarAction,
+  AppBarMenuItem,
+} from '@/components/foundation/AppBar.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import './assets/css/style.css'
+
+const meta: Meta<typeof AppBar> = {
+  title: 'Foundation/AppBar',
+  component: AppBar,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'タイトル文字列' },
+    titleLogo: { control: 'text', description: 'ロゴ画像URL' },
+    sticky: { control: 'boolean', description: 'スティッキー表示' },
+    flat: { control: 'boolean', description: 'フラット表示（ボーダーなし）' },
+    menu: { control: 'object', description: 'メニュー項目の配列' },
+    actions: { control: 'object', description: 'アクション項目の配列' },
+  },
+  args: {
+    title: 'ショップ名',
+    sticky: true,
+    flat: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+EC向けヘッダーコンポーネント。PC/SPのレスポンシブ対応。
+
+## Slot
+- \`title\`: ショップロゴ、またはショップ名
+- \`menu\`: カテゴリナビゲーション + 固定メニュー（PCは中央表示、SPはドロワー内）
+- \`actions\`: アカウント / カート / 検索などのアクション
+- \`extra\`: 任意（告知・検索展開・2段目UIなど）
+
+## レスポンシブ仕様
+- **PC（768px以上）**: [ title ] [ menu（中央） ] [ actions ]
+- **SP（767px以下）**: [ ハンバーガー ] [ title ] [ actions ] → menuはドロワーで表示
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type StoryArgs = AppBarProps & {}
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, unknown>
+}
+
+// サンプルメニュー
+const sampleMenu: AppBarMenuItem[] = [
+  { title: '新着', url: '/new' },
+  {
+    title: 'カテゴリ',
+    children: [
+      { title: 'Tシャツ', url: '/category/tshirt' },
+      { title: 'パーカー', url: '/category/hoodie' },
+      { title: 'キャップ', url: '/category/cap' },
+    ],
+  },
+  { title: 'ランキング', url: '/ranking' },
+  { title: 'セール', url: '/sale' },
+]
+
+// サンプルアクション
+const sampleActions: AppBarAction[] = [
+  { title: '検索', icon: ['far', 'magnifying-glass'], action: () => alert('検索') },
+  { title: 'アカウント', icon: ['far', 'user'], url: '/account' },
+  { title: 'カート', icon: ['far', 'cart-shopping'], url: '/cart' },
+]
+
+// ★ Defaultを最初に配置（autodocsのPrimary storyになる）
+export const Default: OverridesStory = {
+  args: {
+    title: 'ショップ名',
+    menu: sampleMenu,
+    actions: sampleActions,
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <p style="margin-bottom: 16px; font-size: 12px; color: #666;">
+          ※ブラウザ幅を767px以下にするとSP表示（ハンバーガーメニュー）に切り替わります
+        </p>
+        <rn-app-bar v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const ロゴ画像: OverridesStory = {
+  args: {
+    title: 'Sample Shop',
+    titleLogo: 'https://official-goods-store.jp/assets/img/naoto/title.png',
+    menu: sampleMenu,
+    actions: sampleActions,
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <p style="margin-bottom: 16px; font-size: 12px; color: #666;">
+          ※titleLogoを指定すると、titleより優先してロゴ画像が表示されます
+        </p>
+        <rn-app-bar v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const Slotカスタマイズ: OverridesStory = {
+  args: {
+    flat: false,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+  },
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+      'rn-button': Button,
+      'rn-stack': Stack,
+      'rn-icon': Icon,
+      'rn-text': Text,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-app-bar v-bind="args">
+          <template #title>
+            <img width="120" src="https://official-goods-store.jp/assets/img/naoto/title.png" alt="Shop Logo" />
+          </template>
+          <template #menu>
+            <rn-stack direction="horizontal" gap="sm">
+              <a href="#">新着</a>
+              <a href="#">カテゴリ</a>
+              <a href="#">ランキング</a>
+            </rn-stack>
+          </template>
+          <template #actions>
+            <rn-icon :icon="['far', 'magnifying-glass']" />
+            <rn-icon :icon="['far', 'user']" />
+            <rn-icon :icon="['far', 'cart-shopping']" />
+          </template>
+        </rn-app-bar>
+      </div>
+    `,
+  }),
+}
+
+export const Slotのみ: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+      'rn-icon': Icon,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <p style="margin-bottom: 16px; font-size: 12px; color: #666;">
+          ※Slotのみを使用した最小構成の例
+        </p>
+        <rn-app-bar v-bind="args">
+          <template #title>
+            <rn-icon :icon="['far', 'bars']" />
+          </template>
+          <template #actions>
+            <rn-icon icon="bell" />
+          </template>
+        </rn-app-bar>
+      </div>
+    `,
+  }),
+}
+
+export const Extra付き: OverridesStory = {
+  args: {
+    title: 'My Shop',
+    menu: sampleMenu,
+    actions: sampleActions,
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-app-bar v-bind="args">
+          <template #extra>
+            <div style="background: #fef3c7; padding: 8px 16px; text-align: center; font-size: 12px;">
+              🎉 期間限定セール開催中！全品10%OFF
+            </div>
+          </template>
+        </rn-app-bar>
+      </div>
+    `,
+  }),
+}
+
+export const メニューなし: OverridesStory = {
+  args: {
+    title: 'Simple Header',
+    actions: sampleActions,
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <p style="margin-bottom: 16px; font-size: 12px; color: #666;">
+          ※menuが存在しない場合、ハンバーガーメニューは表示されません
+        </p>
+        <rn-app-bar v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const フラット: OverridesStory = {
+  args: {
+    title: 'Flat Header',
+    flat: true,
+    menu: sampleMenu,
+    actions: sampleActions,
+  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      'rn-app-bar': AppBar,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-app-bar v-bind="args" />
+      </div>
+    `,
+  }),
+}

package/src/stories/AppFooter.stories.ts

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppFooter, {
+  AppFooterProps,
+  SnsLinkItem,
+  LogoItem,
+} from '@/components/foundation/AppFooter.vue'
+import { MenuItem } from '@/types'
+import Stack from '@/components/layouts/Stack.vue'
+import Text from '@/components/elements/Text.vue'
+import Button from '@/components/elements/Button.vue'
+import BrandLogo from '@/components/features/BrandLogo.vue'
+import SnsLink from '@/components/features/SnsLink.vue'
+import './assets/css/style.css'
+
+const meta: Meta<typeof AppFooter> = {
+  title: 'Foundation/AppFooter',
+  component: AppFooter,
+  tags: ['autodocs'],
+  argTypes: {
+    copyright: { control: 'text', description: 'コピーライトテキスト' },
+    menus: { control: 'object', description: 'メニュー項目の配列' },
+    snsLinks: { control: 'object', description: 'SNSリンクの配列' },
+    logos: { control: 'object', description: 'ロゴの配列' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+EC向けフッターコンポーネント。PC/SPのレスポンシブ対応。
+
+## Props
+- \`logos\`: ロゴ画像の配列
+- \`snsLinks\`: SNSリンクの配列
+- \`menus\`: メニュー項目の配列（子供あり/なし対応）
+- \`copyright\`: コピーライトテキスト
+
+## レスポンシブ仕様
+### 子供ありメニュー
+- **PC**: セクションタイトル + 子リスト縦並び
+- **SP**: Disclosureで折りたたみ
+
+### 子供なしメニュー
+- **PC**: リンク横並び
+- **SP**: リンク縦リスト
+
+## Slot
+- \`logos\`: ロゴ部分のカスタマイズ
+- \`sns-links\`: SNSリンク部分のカスタマイズ
+- \`menus\`: メニュー部分のカスタマイズ
+- \`copyright\`: コピーライト部分のカスタマイズ
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<AppFooterProps>
+
+// サンプルデータ
+const sampleLogos: LogoItem[] = [
+  {
+    href: '/',
+    logoUrl: 'https://placehold.co/160x40?text=LOGO',
+    title: 'Sample Store',
+    width: 120,
+  },
+]
+
+const sampleSnsLinks: SnsLinkItem[] = [
+  { type: 'x-twitter', href: 'https://twitter.com/' },
+  { type: 'instagram', href: 'https://instagram.com/' },
+  { type: 'youtube', href: 'https://youtube.com/' },
+]
+
+// 子供ありメニュー
+const sampleMenusWithChildren: MenuItem[] = [
+  {
+    title: 'サポート',
+    children: [
+      { title: 'FAQ', url: '/faq' },
+      { title: 'お問い合わせ', url: '/contact' },
+      { title: '配送について', url: '/shipping' },
+    ],
+  },
+  {
+    title: '規約・免責',
+    children: [
+      { title: '利用規約', url: '/terms' },
+      { title: 'プライバシーポリシー', url: '/privacy' },
+      { title: '特定商取引法に基づく表記', url: '/legal' },
+    ],
+  },
+  {
+    title: 'アカウント',
+    children: [
+      { title: 'サインアップ', url: '/signup' },
+      { title: 'ログイン', url: '/login' },
+    ],
+  },
+]
+
+// 子供なしメニュー
+const sampleMenusWithoutChildren: MenuItem[] = [
+  { title: 'FAQ', url: '/faq' },
+  { title: 'お問い合わせ', url: '/contact' },
+  { title: '配送について', url: '/shipping' },
+  { title: '利用規約', url: '/terms' },
+  { title: 'プライバシーポリシー', url: '/privacy' },
+]
+
+export const Default: Story = {
+  args: {
+    logos: sampleLogos,
+    snsLinks: sampleSnsLinks,
+    menus: sampleMenusWithChildren,
+    copyright: '© 2024 Sample Store. All rights reserved.',
+  },
+  render: (args) => ({
+    components: { 'rn-app-footer': AppFooter },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="min-height: 100vh; display: flex; flex-direction: column;">
+        <div style="flex: 1; padding: 40px; background: #f5f5f5;">
+          <p style="color: #666;">※ブラウザ幅を767px以下にするとSP表示に切り替わります</p>
+        </div>
+        <rn-app-footer v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const 子供ありメニュー: Story = {
+  args: {
+    logos: sampleLogos,
+    snsLinks: sampleSnsLinks,
+    menus: sampleMenusWithChildren,
+    copyright: '© 2024 Sample Store. All rights reserved.',
+  },
+  render: (args) => ({
+    components: { 'rn-app-footer': AppFooter },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <p style="padding: 16px; font-size: 12px; color: #666;">
+          PC: セクションタイトル + 子リスト縦並び<br/>
+          SP: Disclosureで折りたたみ
+        </p>
+        <rn-app-footer v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const 子供なしメニュー: Story = {
+  args: {
+    logos: sampleLogos,
+    snsLinks: sampleSnsLinks,
+    menus: sampleMenusWithoutChildren,
+    copyright: '© 2024 Sample Store. All rights reserved.',
+  },
+  render: (args) => ({
+    components: { 'rn-app-footer': AppFooter },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <p style="padding: 16px; font-size: 12px; color: #666;">
+          PC: リンク横並び<br/>
+          SP: リンク縦リスト
+        </p>
+        <rn-app-footer v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const 混合メニュー: Story = {
+  args: {
+    logos: sampleLogos,
+    snsLinks: sampleSnsLinks,
+    menus: [
+      ...sampleMenusWithChildren.slice(0, 2),
+      { title: '会社概要', url: '/about' },
+      { title: '採用情報', url: '/careers' },
+    ],
+    copyright: '© 2024 Sample Store. All rights reserved.',
+  },
+  render: (args) => ({
+    components: { 'rn-app-footer': AppFooter },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <p style="padding: 16px; font-size: 12px; color: #666;">
+          子供ありメニューと子供なしメニューの混合表示
+        </p>
+        <rn-app-footer v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const Slotカスタマイズ: Story = {
+  render: () => ({
+    components: {
+      'rn-app-footer': AppFooter,
+      'rn-stack': Stack,
+      'rn-text': Text,
+      'rn-button': Button,
+      'rn-brand-logo': BrandLogo,
+      'rn-sns-link': SnsLink,
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-app-footer>
+          <template #logos>
+            <rn-brand-logo
+              href="/"
+              title="Custom Logo"
+              logo-url="https://placehold.co/160x40?text=CustomLogo"
+              width="160"
+            />
+          </template>
+          <template #sns-links>
+            <rn-sns-link type="x-twitter" href="#" variant="icon" />
+            <rn-sns-link type="instagram" href="#" variant="icon" />
+          </template>
+          <template #menus>
+            <rn-stack direction="horizontal" gap="xl">
+              <rn-stack direction="vertical">
+                <rn-text weight="bold">カスタムセクション1</rn-text>
+                <a href="#">リンク1</a>
+                <a href="#">リンク2</a>
+              </rn-stack>
+              <rn-stack direction="vertical">
+                <rn-text weight="bold">カスタムセクション2</rn-text>
+                <a href="#">リンク3</a>
+                <a href="#">リンク4</a>
+              </rn-stack>
+            </rn-stack>
+          </template>
+          <template #copyright>
+            <rn-text size="caption">Custom Copyright © 2024</rn-text>
+          </template>
+        </rn-app-footer>
+      </div>
+    `,
+  }),
+}
+
+export const 最小構成: Story = {
+  args: {
+    copyright: '© 2024 Sample Store.',
+  },
+  render: (args) => ({
+    components: { 'rn-app-footer': AppFooter },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-app-footer v-bind="args" />
+      </div>
+    `,
+  }),
+}

package/src/stories/AppFrame.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppFrame from '@/components/foundation/AppFrame.vue'
+
+const meta: Meta<typeof AppFrame> = {
+  title: 'Foundation/AppFrame',
+  component: AppFrame,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'AppFrameコンポーネント',
+      },
+    },
+  },
+  argTypes: {},
+  args: {},
+  render: (args) => ({
+    components: { 'rn-app-frame': AppFrame },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-app-frame>
+          <template #floating>
+            floatingText
+          </template>
+        </rn-app-frame>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = {}
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}