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

package/src/stories/Progress.stories.ts

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Progress, { ProgressProps } from '@/components/elements/Progress.vue'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Elements/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'number' },
+    max: { control: 'number' },
+    variant: { control: 'select', options: ['linear'] },
+    showLabel: { control: 'boolean' },
+    labelType: { control: 'select', options: ['percent', 'fraction'] },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+    },
+  },
+  args: {
+    value: 50,
+    max: 100,
+    variant: 'linear',
+    showLabel: false,
+    labelType: 'percent',
+    color: 'default',
+  },
+}
+
+export default meta
+type StoryArgs = ProgressProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    value: 50,
+    max: 100,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-progress': Progress },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="width: 300px;">
+        <rn-progress
+          :value="args.value"
+          :max="args.max"
+          :variant="args.variant"
+          :show-label="args.showLabel"
+          :label-type="args.labelType"
+          :color="args.color"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const パーセント表示: OverridesStory = {
+  args: {
+    value: 75,
+    max: 100,
+    showLabel: true,
+    labelType: 'percent',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-progress': Progress },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="width: 300px;">
+        <rn-progress
+          :value="args.value"
+          :max="args.max"
+          :variant="args.variant"
+          :show-label="args.showLabel"
+          :label-type="args.labelType"
+          :color="args.color"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const 分数表示: OverridesStory = {
+  args: {
+    value: 1,
+    max: 4,
+    showLabel: true,
+    labelType: 'fraction',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-progress': Progress },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="width: 300px;">
+        <rn-progress
+          :value="args.value"
+          :max="args.max"
+          :variant="args.variant"
+          :show-label="args.showLabel"
+          :label-type="args.labelType"
+          :color="args.color"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const カラーバリエーション: OverridesStory = {
+  args: {
+    value: 60,
+    max: 100,
+    showLabel: true,
+    labelType: 'percent',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-progress': Progress },
+    setup() {
+      const colors = [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+      ]
+      return { args, colors }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="width: 300px; display: flex; flex-direction: column; gap: 16px;">
+        <div v-for="color in colors" :key="color" style="display: flex; flex-direction: column; gap: 4px;">
+          <span style="font-size: 12px; color: #666;">{{ color }}</span>
+          <rn-progress
+            :value="args.value"
+            :max="args.max"
+            :show-label="args.showLabel"
+            :label-type="args.labelType"
+            :color="color"
+          />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const ステップ進捗: OverridesStory = {
+  args: {
+    value: 2,
+    max: 5,
+    showLabel: true,
+    labelType: 'fraction',
+    color: 'primary',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-progress': Progress },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="width: 300px;">
+        <p style="margin-bottom: 8px; font-size: 14px;">ステップ進捗表示の例</p>
+        <rn-progress
+          :value="args.value"
+          :max="args.max"
+          :variant="args.variant"
+          :show-label="args.showLabel"
+          :label-type="args.labelType"
+          :color="args.color"
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/Radio.stories.ts

@@ -0,0 +1,81 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Radio, { type RadioProps } from '@/components/elements/Radio.vue'
+
+const meta: Meta<typeof Radio> = {
+  title: 'Elements/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'ラジオボタン用コンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    name: {
+      control: {
+        type: 'text',
+      },
+    },
+    items: {
+      label: {
+        control: 'text',
+      },
+      value: {
+        control: 'text',
+      },
+    },
+    direction: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+  args: {
+    name: 'animal',
+    items: [
+      {
+        label: '犬',
+        value: 'dog',
+      },
+      {
+        label: '猫',
+        value: 'cat',
+      },
+    ],
+    direction: 'horizontal',
+  },
+  render: (args) => ({
+    components: { 'rn-radio': Radio },
+    setup() {
+      const selectedValue = ref('')
+      return { args, selectedValue }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-radio
+          :name=args.name
+          :items=args.items
+          :direction=args.direction
+          v-model=selectedValue
+        />
+        <p style='margin-top: 24px;'>
+          選択中：{{ selectedValue }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = RadioProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, RadioProps>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+}

package/src/stories/Section.stories.ts

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Section, { SectionProps } from '@/components/layouts/Section.vue'
+import Button from '@/components/elements/Button.vue'
+import Card from '@/components/layouts/Card.vue'
+
+const meta: Meta<typeof Section> = {
+  title: 'Layouts/Section',
+  component: Section,
+  tags: ['autodocs'],
+  argTypes: {
+    headerAlign: { control: 'select', options: ['left', 'center', 'right'] },
+    eyebrowFont: {
+      control: 'select',
+      options: ['default', 'key', 'accent', 'mono'],
+    },
+    titleFont: {
+      control: 'select',
+      options: ['default', 'key', 'accent', 'mono'],
+    },
+    descriptionFont: {
+      control: 'select',
+      options: ['default', 'key', 'accent', 'mono'],
+    },
+    fluid: { control: 'boolean' },
+  },
+  args: {
+    headerAlign: 'left',
+    eyebrowFont: 'default',
+    titleFont: 'default',
+    descriptionFont: 'default',
+    fluid: false,
+  },
+}
+
+export default meta
+type StoryArgs = SectionProps & {
+  bodyContent?: string
+  actionContent?: string
+  extraContent?: string
+  footerContent?: string
+}
+type Story = StoryObj<StoryArgs>
+
+export const 基本: Story = {
+  args: {
+    title: 'セクションタイトル',
+    description:
+      'セクションの説明文です。このエリアにはセクションの詳細な説明や概要を記述します。',
+    bodyContent: 'メインコンテンツエリアです。',
+  },
+  render: (args) => ({
+    components: { Section },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #body>
+          {{ args.bodyContent }}
+        </template>
+      </Section>
+    `,
+  }),
+}
+
+export const アイブロウ付き: Story = {
+  args: {
+    eyebrow: 'NEW',
+    title: '新商品のご紹介',
+    description:
+      '待望の新商品が登場しました。これまでにない革新的な機能を搭載しています。',
+    bodyContent: '商品詳細がここに入ります。',
+  },
+  render: (args) => ({
+    components: { Section },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #body>
+          {{ args.bodyContent }}
+        </template>
+      </Section>
+    `,
+  }),
+}
+
+export const アクションボタン付き: Story = {
+  args: {
+    title: 'Ready to Ship Now',
+    description: '在庫がある商品をすぐに発送できます。お早めにご注文ください。',
+    bodyContent: '商品一覧がここに表示されます。',
+  },
+  render: (args) => ({
+    components: { Section, Button },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #action>
+          <Button variant="text" color="primary">すべて見る</Button>
+        </template>
+        <template #body>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+            <div style="padding: 16px; border: 1px solid #ddd; border-radius: 8px;">商品1</div>
+            <div style="padding: 16px; border: 1px solid #ddd; border-radius: 8px;">商品2</div>
+            <div style="padding: 16px; border: 1px solid #ddd; border-radius: 8px;">商品3</div>
+          </div>
+        </template>
+      </Section>
+    `,
+  }),
+}
+
+export const 中央揃え: Story = {
+  args: {
+    eyebrow: 'FEATURED',
+    title: '注目の商品',
+    description: '今最も人気の商品をご紹介します。',
+    headerAlign: 'center',
+    bodyContent: 'フィーチャードコンテンツ',
+  },
+  render: (args) => ({
+    components: { Section },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #body>
+          <div style="text-align: center;">
+            {{ args.bodyContent }}
+          </div>
+        </template>
+      </Section>
+    `,
+  }),
+}
+
+export const 背景色付き: Story = {
+  args: {
+    title: '特別オファー',
+    description: '期間限定の特別価格でご提供しています。',
+    backgroundColor: '#f8f9fa',
+    bodyContent: '限定商品一覧',
+  },
+  render: (args) => ({
+    components: { Section },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #body>
+          {{ args.bodyContent }}
+        </template>
+      </Section>
+    `,
+  }),
+}
+
+export const 全体的な例: Story = {
+  args: {
+    eyebrow: 'SPECIAL COLLECTION',
+    title: 'アーティストコラボ商品',
+    description:
+      '人気アーティストとのコラボレーション商品を集めました。数量限定のため、お早めにどうぞ。',
+    bodyContent: '',
+  },
+  render: (args) => ({
+    components: { Section, Button, Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #action>
+          <Button variant="fill" color="primary">コレクション一覧</Button>
+        </template>
+        <template #extra>
+          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            <Button variant="text" size="sm">Tシャツ</Button>
+            <Button variant="text" size="sm">パーカー</Button>
+            <Button variant="text" size="sm">アクセサリー</Button>
+            <Button variant="text" size="sm">バッグ</Button>
+          </div>
+        </template>
+        <template #body>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
+            <Card>
+              <div style="height: 200px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
+                商品画像
+              </div>
+              <h3 style="margin: 0 0 8px 0;">アーティストTシャツ A</h3>
+              <p style="margin: 0 0 12px 0; color: #666;">¥4,500</p>
+              <Button variant="fill" color="primary" size="sm">カートに追加</Button>
+            </Card>
+            <Card>
+              <div style="height: 200px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
+                商品画像
+              </div>
+              <h3 style="margin: 0 0 8px 0;">アーティストTシャツ B</h3>
+              <p style="margin: 0 0 12px 0; color: #666;">¥4,800</p>
+              <Button variant="fill" color="primary" size="sm">カートに追加</Button>
+            </Card>
+          </div>
+        </template>
+        <template #footer>
+          <div style="text-align: center; padding-top: 24px;">
+            <Button variant="text" color="muted">さらに読み込む</Button>
+          </div>
+        </template>
+      </Section>
+    `,
+  }),
+}
+
+export const フルード: Story = {
+  args: {
+    title: 'フルスクリーン セクション',
+    description: '画面幅いっぱいに表示されるセクションです。',
+    fluid: true,
+    backgroundColor: '#1a1a1a',
+    textColor: '#ffffff',
+    headerAlign: 'center',
+  },
+  render: (args) => ({
+    components: { Section },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #body>
+          <div style="text-align: center; padding: 40px 0;">
+            <p style="color: #ffffff; margin: 0;">フルスクリーンコンテンツエリア</p>
+          </div>
+        </template>
+      </Section>
+    `,
+  }),
+}