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

package/src/stories/Page.stories.ts

@@ -0,0 +1,414 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Page from '@/components/layouts/Page.vue'
+import Card from '@/components/layouts/Card.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Button from '@/components/elements/Button.vue'
+import Text from '@/components/elements/Text.vue'
+import AnnounceBar from '@/components/features/AnnounceBar.vue'
+
+const meta: Meta<typeof Page> = {
+  title: 'Layouts/Page',
+  component: Page,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'ページタイトル',
+    },
+    fluid: {
+      control: 'boolean',
+      description: '最大幅制限を無効にする',
+    },
+    pending: {
+      control: 'boolean',
+      description: 'ローディング状態',
+    },
+    withBack: {
+      control: 'text',
+      description: '戻るボタンの表示（true, false, またはURL）',
+    },
+    center: {
+      control: 'boolean',
+      description: 'コンテンツを中央寄せ',
+    },
+    stickyMode: {
+      control: 'select',
+      options: ['', 'body', 'aside'],
+      description: 'スティッキーモード',
+    },
+    responsive: {
+      control: 'boolean',
+      description: 'レスポンシブ対応',
+    },
+    mainRatio: {
+      control: 'number',
+      description: 'メインコンテンツの幅比率（%）',
+    },
+  },
+  args: {
+    title: 'ページタイトル',
+    fluid: false,
+    pending: false,
+    withBack: false,
+    center: false,
+    stickyMode: '',
+    responsive: true,
+    mainRatio: 70,
+  },
+}
+
+export default meta
+type StoryArgs = any
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    title: 'ページタイトル',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-page': Page, 'rn-card': Card, 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :fluid="args.fluid"
+          :pending="args.pending"
+          :with-back="args.withBack"
+          :center="args.center"
+          :sticky-mode="args.stickyMode"
+          :responsive="args.responsive"
+          :main-ratio="args.mainRatio"
+        >
+          <template #body>
+            <rn-card title="メインコンテンツ" elevation>
+              <rn-text>
+                これはメインコンテンツエリアです。ページレイアウトの基本的な構造を提供します。
+              </rn-text>
+            </rn-card>
+            <rn-card title="追加のコンテンツ" elevation>
+              <rn-text>
+                複数のコンテンツを配置できます。垂直方向に配置され、適切な間隔が保たれます。
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const サイドバー付き: OverridesStory = {
+  args: {
+    title: 'サイドバー付きページ',
+    mainRatio: 70,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    mainRatio: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-page': Page,
+      'rn-card': Card,
+      'rn-text': Text,
+      'rn-stack': Stack,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :main-ratio="args.mainRatio"
+        >
+          <template #body>
+            <rn-card title="メインコンテンツ" elevation>
+              <rn-text>
+                メインコンテンツエリアです。サイドバーと組み合わせて使用できます。
+              </rn-text>
+            </rn-card>
+            <rn-card title="記事コンテンツ" elevation>
+              <rn-text>
+                記事や詳細な情報を表示するエリアです。スクロール可能で、長いコンテンツにも対応します。
+              </rn-text>
+            </rn-card>
+          </template>
+          <template #aside>
+            <rn-card title="サイドバー" elevation>
+              <rn-stack direction="vertical" gap="sm">
+                <rn-text size="sm">
+                  サイドバーコンテンツ
+                </rn-text>
+                <rn-text size="sm">
+                  ナビゲーション
+                </rn-text>
+                <rn-text size="sm">
+                  関連情報
+                </rn-text>
+              </rn-stack>
+            </rn-card>
+            <rn-card title="広告" elevation>
+              <rn-text size="sm" color="subtle">
+                広告やプロモーション情報
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const ヘッダーアクション付き: OverridesStory = {
+  args: {
+    title: 'アクション付きページ',
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-page': Page,
+      'rn-card': Card,
+      'rn-text': Text,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      const handleSave = () => {
+        alert('保存しました')
+      }
+
+      const handlePublish = () => {
+        alert('公開しました')
+      }
+
+      return { args, handleSave, handlePublish }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page :title="args.title">
+          <template #action>
+            <rn-stack direction="horizontal" gap="sm">
+              <rn-button variant="text" @click="handleSave">
+                下書き保存
+              </rn-button>
+              <rn-button color="primary" @click="handlePublish">
+                公開
+              </rn-button>
+            </rn-stack>
+          </template>
+          <template #body>
+            <rn-card title="記事編集" elevation>
+              <rn-text>
+                ここに記事の編集フォームが配置されます。ヘッダーにアクションボタンが表示されます。
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const 戻るボタン付き: OverridesStory = {
+  args: {
+    title: '詳細ページ',
+    withBack: true,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    withBack: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-page': Page, 'rn-card': Card, 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :with-back="args.withBack"
+        >
+          <template #body>
+            <rn-card title="詳細情報" elevation>
+              <rn-text>
+                戻るボタンが付いたページです。ブラウザの履歴を使用して前のページに戻ります。
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const 中央寄せ: OverridesStory = {
+  args: {
+    title: 'ログイン',
+    center: true,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    center: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-page': Page,
+      'rn-card': Card,
+      'rn-text': Text,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :center="args.center"
+        >
+          <template #body>
+            <rn-card title="ユーザーログイン" elevation>
+              <rn-stack direction="vertical" gap="md">
+                <rn-text>
+                  ログインフォームが中央に表示されます。
+                </rn-text>
+                <rn-stack direction="vertical" gap="sm">
+                  <input placeholder="メールアドレス" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
+                  <input type="password" placeholder="パスワード" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
+                </rn-stack>
+                <rn-button color="primary">
+                  ログイン
+                </rn-button>
+              </rn-stack>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const ローディング状態: OverridesStory = {
+  args: {
+    title: 'ローディング中',
+    pending: true,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    pending: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-page': Page },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :pending="args.pending"
+        >
+          <template #body>
+            <!-- ローディング中はこの内容は表示されません -->
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const フルワイド: OverridesStory = {
+  args: {
+    title: 'フルワイドページ',
+    fluid: true,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    fluid: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-page': Page, 'rn-card': Card, 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px;">
+        <rn-page
+          :title="args.title"
+          :fluid="args.fluid"
+        >
+          <template #body>
+            <rn-card title="フルワイドコンテンツ" elevation>
+              <rn-text>
+                最大幅制限が無効になり、画面全体を使用します。ダッシュボードや管理画面に適しています。
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}
+
+export const バナー付き: OverridesStory = {
+  args: {
+    title: 'バナー付きページ',
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+\`banner\`スロットを使用すると、ページ最上部にフルワイズ（左右端にピッタリつく）でコンテンツを配置できます。
+アナウンスバーやプロモーションバナーなどに適しています。
+
+AppBodyのsafearea padding（PC: 40px / SP: 16px）をネガティブマージンで打ち消して画面端まで広げます。
+        `,
+      },
+    },
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-page': Page,
+      'rn-card': Card,
+      'rn-text': Text,
+      'rn-announce-bar': AnnounceBar,
+    },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="height: 600px; padding: 40px; background: #f5f5f5;">
+        <rn-page :title="args.title">
+          <template #banner>
+            <rn-announce-bar
+              message="🎉 期間限定セール開催中！全品10%OFF"
+              variant="info"
+            />
+          </template>
+          <template #body>
+            <rn-card title="メインコンテンツ" elevation>
+              <rn-text>
+                bannerスロットを使用すると、ページ上部にフルワイズでバナーを配置できます。
+                親要素のpaddingを打ち消して左右端まで広がります。
+              </rn-text>
+            </rn-card>
+          </template>
+        </rn-page>
+      </div>
+    `,
+  }),
+}