@reni-corp/reni-2c-ui 0.3.27 → 0.3.29

package/src/stories/Disclosure.stories.ts

@@ -0,0 +1,217 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Disclosure, {
+  DisclosureProps,
+} from '@/components/interactive/Disclosure.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Text from '@/components/elements/Text.vue'
+import Button from '@/components/elements/Button.vue'
+import './assets/css/style.css'
+
+const meta: Meta<typeof Disclosure> = {
+  title: 'Interactive/Disclosure',
+  component: Disclosure,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'トリガーのタイトル' },
+    open: { control: 'boolean', description: '初期状態（開/閉）' },
+  },
+  args: {
+    title: 'セクションタイトル',
+    open: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+インライン展開/収縮コンポーネント。アコーディオン的な開閉UIを提供します。
+
+## 用途
+- SPフッターのメニューセクション
+- SPドロワー内のサブメニュー
+- FAQ / ヘルプセクション
+- フィルター系UI
+
+## Slot
+- \`default\`: 展開時に表示されるコンテンツ
+- \`trigger\`: トリガー部分のカスタマイズ（オプション）
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<DisclosureProps>
+
+export const Default: Story = {
+  args: {
+    title: 'サポート',
+  },
+  render: (args) => ({
+    components: {
+      'rn-disclosure': Disclosure,
+      'rn-stack': Stack,
+      'rn-text': Text,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 400px;">
+        <rn-disclosure v-bind="args">
+          <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+            <a href="/faq">FAQ</a>
+            <a href="/contact">お問い合わせ</a>
+            <a href="/shipping">配送について</a>
+          </rn-stack>
+        </rn-disclosure>
+      </div>
+    `,
+  }),
+}
+
+export const 初期状態オープン: Story = {
+  args: {
+    title: '規約・免責',
+    open: true,
+  },
+  render: (args) => ({
+    components: {
+      'rn-disclosure': Disclosure,
+      'rn-stack': Stack,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 400px;">
+        <rn-disclosure v-bind="args">
+          <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+            <a href="/terms">利用規約</a>
+            <a href="/privacy">プライバシーポリシー</a>
+            <a href="/legal">特定商取引法に基づく表記</a>
+          </rn-stack>
+        </rn-disclosure>
+      </div>
+    `,
+  }),
+}
+
+export const 複数並べた場合: Story = {
+  render: () => ({
+    components: {
+      'rn-disclosure': Disclosure,
+      'rn-stack': Stack,
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 400px;">
+        <rn-disclosure title="サポート">
+          <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+            <a href="/faq">FAQ</a>
+            <a href="/contact">お問い合わせ</a>
+            <a href="/shipping">配送について</a>
+          </rn-stack>
+        </rn-disclosure>
+        
+        <rn-disclosure title="規約・免責">
+          <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+            <a href="/terms">利用規約</a>
+            <a href="/privacy">プライバシーポリシー</a>
+            <a href="/legal">特定商取引法に基づく表記</a>
+          </rn-stack>
+        </rn-disclosure>
+        
+        <rn-disclosure title="アカウント">
+          <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+            <a href="/signup">サインアップ</a>
+            <a href="/login">ログイン</a>
+          </rn-stack>
+        </rn-disclosure>
+      </div>
+    `,
+  }),
+}
+
+export const SPフッター想定: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+  render: () => ({
+    components: {
+      'rn-disclosure': Disclosure,
+      'rn-stack': Stack,
+      'rn-text': Text,
+    },
+    template: /* html */ `
+      <div class="sb-canvas">
+        <rn-stack direction="vertical" gap="md" style="padding: 16px;">
+          <!-- ロゴ・SNS部分 -->
+          <rn-stack direction="vertical" align="center" gap="md" style="padding: 16px 0;">
+            <div style="border: 1px solid #ccc; padding: 16px 32px;">FooterLogo</div>
+            <div style="border: 1px solid #ccc; padding: 8px 16px;">SNS Links</div>
+          </rn-stack>
+
+          <!-- メニュー部分（子供あり→Disclosure） -->
+          <rn-disclosure title="サポート">
+            <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+              <a href="/faq">FAQ</a>
+              <a href="/contact">お問い合わせ</a>
+              <a href="/shipping">配送について</a>
+            </rn-stack>
+          </rn-disclosure>
+
+          <rn-disclosure title="規約・免責">
+            <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+              <a href="/terms">利用規約</a>
+              <a href="/privacy">プライバシーポリシー</a>
+            </rn-stack>
+          </rn-disclosure>
+
+          <!-- Copyright -->
+          <rn-stack direction="vertical" align="center" style="padding: 24px 0;">
+            <rn-text size="caption">copyright XXXXXXXXXX</rn-text>
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 外部から制御: Story = {
+  args: {
+    title: 'v-modelで制御',
+  },
+  render: (args) => ({
+    components: {
+      'rn-disclosure': Disclosure,
+      'rn-stack': Stack,
+      'rn-button': Button,
+    },
+    setup() {
+      const isOpen = ref(false)
+      const toggleFromOutside = () => {
+        isOpen.value = !isOpen.value
+      }
+      return { args, isOpen, toggleFromOutside }
+    },
+    template: /* html */ `
+      <div class="sb-canvas" style="max-width: 400px;">
+        <rn-stack direction="vertical" gap="md">
+          <rn-button @click="toggleFromOutside">
+            外部から{{ isOpen ? '閉じる' : '開く' }}
+          </rn-button>
+          <p>現在の状態: {{ isOpen ? '開いている' : '閉じている' }}</p>
+          <rn-disclosure v-bind="args" v-model:open="isOpen">
+            <rn-stack direction="vertical" gap="sm" style="padding: 8px 0;">
+              <p>v-model:openで外部から開閉状態を制御できます。</p>
+              <p>内部のトリガークリックでも状態が同期されます。</p>
+            </rn-stack>
+          </rn-disclosure>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/Divider.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Divider, { DividerProps } from '@/components/elements/Divider.vue'
+
+const meta: Meta<typeof Divider> = {
+  title: 'Elements/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+    },
+    direction: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    weight: {
+      control: 'select',
+      options: ['thin', 'thick', 'normal'],
+    },
+  },
+  args: {
+    color: 'default',
+    direction: 'horizontal',
+    weight: 'normal',
+  },
+}
+
+export default meta
+type StoryArgs = DividerProps & { slotText: string }
+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-divider': Divider },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='height: 100px;'>
+          <rn-divider
+            :color=args.color
+            :direction=args.direction
+            :weight=args.weight
+          >
+          </rn-divider>
+      </div>
+    `,
+  }),
+}

package/src/stories/Drawer.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Drawer, { DrawerProps } from '@/components/navigation/Drawer.vue'
+import Button from '@/components/elements/Button.vue'
+import Icon from '@/components/elements/Icon.vue'
+import './assets/css/style.css'
+import { ref } from 'vue'
+const meta: Meta<typeof Drawer> = {
+  title: 'Navigation/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  argTypes: {
+    visible: { control: 'boolean' },
+    title: { control: 'text' },
+  },
+  args: {
+    visible: false,
+    title: 'ドロワータイトル',
+  },
+}
+
+export default meta
+type StoryArgs = DrawerProps & {}
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    visible: { control: { disable: true } },
+    header: { table: { disable: true } },
+    headerRightItem: { table: { disable: true } },
+    headerLeftItem: { table: { disable: true } },
+    body: { table: { disable: true } },
+    footer: { table: { disable: true } },
+  },
+  render: (args, {}) => ({
+    components: { 'rn-drawer': Drawer, 'rn-button': Button },
+    setup() {
+      const visible = ref(true)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+        <div style="height:560px" class='sb-canvas'>
+          <rn-button @click="handleVisible">ドロワーを開く</rn-button>
+            <rn-drawer
+              v-model:visible="visible"
+              :title=args.title
+            >
+              <template #body>
+                <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">
+                  <div class="RN-al-vertical RN-al-gap-xs RN-al-fill-width">
+                      <span class="RN-text--size-body">
+                      - 基本的な利用方法です。template #body中で自由にレイアウトができます。<br />
+                      <br />
+                      - オーバーレイとクローズアイコンをクリックすると閉じます。<br />
+                      </span>
+                  </div>
+                </div>
+              </template>
+            </rn-drawer>
+        </div>
+    `,
+  }),
+}
+
+export const 応用1: OverridesStory = {
+  args: {
+    title: '各スロットを利用したドロワー',
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    visible: { control: { disable: true } },
+    header: { table: { disable: true } },
+    headerRightItem: { table: { disable: true } },
+    headerLeftItem: { table: { disable: true } },
+    body: { table: { disable: true } },
+    footer: { table: { disable: true } },
+  },
+  render: (args, {}) => ({
+    components: { 'rn-drawer': Drawer, 'rn-button': Button, 'rn-icon': Icon },
+    setup() {
+      const visible = ref(true)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+        <div class='sb-canvas'>
+          <rn-button @click="handleVisible">ドロワーを開く</rn-button>
+          <rn-drawer
+            v-model:visible="visible"
+            :title=args.title
+          >
+            <template #header>
+              <div class="RN-al-horizontal RN-al-gap-md RN-al-fill-width RN-al-width-align-between">
+                <div class="RN-al-horizontal RN-al-gap-md">
+                  <rn-icon color="subtle" size="xl" icon="circle-user" />
+                  <div class="RN-al-vertical">
+                    <div><span class="RN-text--weight-bold">User Name</span></div>
+                    <div>
+                      <span class="RN-text--size-caption RN-text--color-subtle"
+                        >username@reni.co.jp</span
+                      >
+                    </div>
+                  </div>
+                </div>
+                <div class="RN-al-horizontal RN-al-gap-md">
+                  <rn-icon icon="ellipsis" />
+                </div>
+              </div>                
+            </template>
+            <template #body>
+              <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">
+                <div class="RN-al-vertical RN-al-gap-xs RN-al-fill-width">
+                  <span class="RN-text--size-body">
+                  - 各種スロット例です。#header / #footer を利用した例です。<br />
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template #footer>
+              <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">
+                <rn-button @click="handleVisible" class="RN-al-fill-width">ドロワーを閉じる</rn-button>
+              </div>
+            </template>
+          </rn-drawer>
+        </div>
+    `,
+  }),
+}

package/src/stories/DropDown.stories.ts

@@ -0,0 +1,195 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DropDown, {
+  type DropdownProps,
+} from '@/components/interactive/DropDown.vue'
+import Button from '@/components/elements/Button.vue'
+
+const meta: Meta<typeof DropDown> = {
+  title: 'Interactive/DropDown',
+  component: DropDown,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'DropDownコンポーネントです。ドロップダウンメニューを表示するためのコンポーネントで、カスタムトリガーやメニューコンテンツをサポート。',
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    items: [
+      {
+        title: 'オプション1',
+        action: () => alert('オプション1が選択されました'),
+      },
+      {
+        title: 'オプション2',
+        action: () => alert('オプション2が選択されました'),
+      },
+      {
+        title: 'オプション3',
+        action: () => alert('オプション3が選択されました'),
+      },
+    ],
+    disabled: false,
+  },
+}
+
+export default meta
+type StoryArgs = DropdownProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args) => ({
+    components: { 'rn-dropdown': DropDown },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 200px; padding: 20px;'>
+          <rn-dropdown
+            :items="args.items"
+            :disabled="args.disabled"
+          >
+            <template #trigger="{ toggle }">
+              <rn-button variant="text" @click="toggle">メニューを開く</rn-button>
+            </template>
+          </rn-dropdown>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 応用1: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'カスタムトリガーボタンを使用したドロップダウン',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-dropdown': DropDown, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 200px; padding: 20px;'>
+          <rn-dropdown
+            :items="args.items"
+            :disabled="args.disabled"
+          >
+            <template #trigger="{ toggle }">
+              <rn-button @click="toggle">メニューを開く</rn-button>
+            </template>
+          </rn-dropdown>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 応用2: OverridesStory = {
+  args: {},
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'カスタムメニューコンテンツを使用したドロップダウン',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-dropdown': DropDown, 'rn-button': Button },
+    setup() {
+      const customItems = [
+        { title: '🏠 ホーム', action: () => alert('ホームに移動') },
+        { title: '👤 プロフィール', action: () => alert('プロフィールを表示') },
+        { title: '⚙️ 設定', action: () => alert('設定を開く') },
+        { title: '🚪 ログアウト', action: () => alert('ログアウトしました') },
+      ]
+      return { args, customItems }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 250px; padding: 20px;'>
+          <rn-dropdown
+            :items="customItems"
+            :disabled="args.disabled"
+          >
+            <template #trigger="{ toggle }">
+              <rn-button @click="toggle">ユーザーメニュー</rn-button>
+            </template>
+            <template #default="{ items, select }">
+              <div style="min-width: 200px; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 8px;">
+                <div
+                  v-for="item in items"
+                  :key="item.title"
+                  @click="select(item)"
+                  style="padding: 12px 16px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 8px;"
+                  onmouseover="this.style.backgroundColor='#f5f5f5'"
+                  onmouseout="this.style.backgroundColor='transparent'"
+                >
+                  {{ item.title }}
+                </div>
+              </div>
+            </template>
+          </rn-dropdown>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 無効化: OverridesStory = {
+  args: {
+    disabled: true,
+  },
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        story: '無効化されたドロップダウン',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { 'rn-dropdown': DropDown, 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='height: 200px; padding: 20px;'>
+          <rn-dropdown
+            :items="args.items"
+            :disabled="args.disabled"
+          >
+            <template #trigger="{ toggle }">
+              <rn-button @click="toggle" :disabled="args.disabled">無効化されたメニュー</rn-button>
+            </template>
+          </rn-dropdown>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/FloatingBanner.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FloatingBanner, {
+  type FloatingBannerProps,
+} from '@/components/features/FloatingBanner.vue'
+
+const meta: Meta<typeof FloatingBanner> = {
+  title: 'Features/FloatingBanner',
+  component: FloatingBanner,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'フローティングバナー用コンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    imageUrl: {
+      control: 'text',
+    },
+    persistentHiddenKey: {
+      control: 'text',
+    },
+    url: {
+      control: 'text',
+    },
+    offset: {
+      control: 'number',
+    },
+  },
+  args: {
+    imageUrl:
+      'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+    persistentHiddenKey: '',
+    url: '',
+    offset: 10,
+  },
+  render: (args) => ({
+    components: { 'rn-floating-banner': FloatingBanner },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style="height: 300px;">
+          <rn-floating-banner
+            :imageUrl=args.imageUrl
+            :persistentHiddenKey=args.persistentHiddenKey
+            :url=args.url
+            :offset=args.offset
+          />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = FloatingBannerProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}
+
+export const 応用1: OverridesStory = {
+  args: {
+    persistentHiddenKey: '1',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}