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

package/src/stories/Radio.stories.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Radio, { type RadioProps } from '@/components/elements/Radio.vue'
 
 const meta: Meta<typeof Radio> = {
@@ -9,7 +9,8 @@ const meta: Meta<typeof Radio> = {
   parameters: {
     docs: {
       description: {
-        component: 'ラジオボタン用コンポーネント',
+        component:
+          'ラジオボタン用コンポーネント。標準的なラジオボタン（default）とボタン風のラジオボタン（button）の2つのvariantを提供します。',
       },
     },
   },
@@ -18,18 +19,37 @@ const meta: Meta<typeof Radio> = {
       control: {
         type: 'text',
       },
+      description: 'ラジオボタングループの名前',
     },
     items: {
-      label: {
-        control: 'text',
-      },
-      value: {
-        control: 'text',
-      },
+      control: 'object',
+      description: 'ラジオボタンの選択肢配列',
     },
     direction: {
       control: 'select',
       options: ['horizontal', 'vertical'],
+      description: '配置方向',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'button'],
+      description: '表示スタイル',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+      description: 'カラーテーマ',
     },
   },
   args: {
@@ -45,6 +65,8 @@ const meta: Meta<typeof Radio> = {
       },
     ],
     direction: 'horizontal',
+    variant: 'default',
+    color: 'default',
   },
   render: (args) => ({
     components: { 'rn-radio': Radio },
@@ -55,10 +77,12 @@ const meta: Meta<typeof Radio> = {
     template: /* html */ `
       <div class='sb-canvas'>
         <rn-radio
-          :name=args.name
-          :items=args.items
-          :direction=args.direction
-          v-model=selectedValue
+          :name="args.name"
+          :items="args.items"
+          :direction="args.direction"
+          :variant="args.variant"
+          :color="args.color"
+          v-model="selectedValue"
         />
         <p style='margin-top: 24px;'>
           選択中：{{ selectedValue }}
@@ -79,3 +103,97 @@ export const 基本: OverridesStory = {
   args: {},
   argTypes: {},
 }
+
+export const ボタンスタイル: OverridesStory = {
+  args: {
+    variant: 'button',
+    color: 'default',
+    items: [
+      { label: 'S', value: 's' },
+      { label: 'M', value: 'm' },
+      { label: 'L', value: 'l' },
+      { label: 'XL', value: 'xl' },
+    ],
+  },
+  argTypes: {},
+}
+
+export const ボタンスタイル_カラーバリエーション: OverridesStory = {
+  render: () => ({
+    components: { 'rn-radio': Radio },
+    setup() {
+      const colors = [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+      ]
+      const selectedValues = ref<Record<string, string>>({})
+      return { colors, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='display: flex; flex-direction: column; gap: 24px;'>
+        <div v-for="color in colors" :key="color" style='display: flex; flex-direction: column; gap: 8px;'>
+          <h4 style='margin: 0; font-size: 14px; color: #666;'>{{ color }}</h4>
+          <rn-radio
+            :name="'size-' + color"
+            :variant="'button'"
+            :color="color"
+            :items="[
+              { label: 'S', value: 's' },
+              { label: 'M', value: 'm' },
+              { label: 'L', value: 'l' },
+              { label: 'XL', value: 'xl' },
+            ]"
+            v-model="selectedValues[color]"
+          />
+        </div>
+      </div>
+    `,
+  }),
+  argTypes: {},
+}
+
+export const 無効化オプション: OverridesStory = {
+  args: {
+    variant: 'button',
+    color: 'default',
+    items: [
+      { label: 'S', value: 's' },
+      { label: 'M', value: 'm' },
+      { label: 'L', value: 'l', disabled: true },
+      { label: 'XL', value: 'xl', disabled: true },
+    ],
+  },
+  argTypes: {},
+}
+
+export const 縦方向配置: OverridesStory = {
+  args: {
+    direction: 'vertical',
+    items: [
+      { label: '犬', value: 'dog' },
+      { label: '猫', value: 'cat' },
+      { label: '鳥', value: 'bird' },
+    ],
+  },
+  argTypes: {},
+}
+
+export const ボタンスタイル_縦方向配置: OverridesStory = {
+  args: {
+    variant: 'button',
+    direction: 'vertical',
+    color: 'primary',
+    items: [
+      { label: 'オプション1', value: 'option1' },
+      { label: 'オプション2', value: 'option2' },
+      { label: 'オプション3', value: 'option3' },
+    ],
+  },
+  argTypes: {},
+}

package/src/stories/Section.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Section, { SectionProps } from '@/components/layouts/Section.vue'
 import Button from '@/components/elements/Button.vue'
 import Card from '@/components/layouts/Card.vue'
@@ -11,15 +11,15 @@ const meta: Meta<typeof Section> = {
     headerAlign: { control: 'select', options: ['left', 'center', 'right'] },
     eyebrowFont: {
       control: 'select',
-      options: ['default', 'key', 'accent', 'mono'],
+      options: ['default', 'key', 'mono'],
     },
     titleFont: {
       control: 'select',
-      options: ['default', 'key', 'accent', 'mono'],
+      options: ['default', 'key', 'mono'],
     },
     descriptionFont: {
       control: 'select',
-      options: ['default', 'key', 'accent', 'mono'],
+      options: ['default', 'key', 'mono'],
     },
     fluid: { control: 'boolean' },
   },
@@ -242,3 +242,28 @@ export const フルード: Story = {
     `,
   }),
 }
+
+export const フォントファミリー選択: Story = {
+  args: {
+    eyebrow: 'SPECIAL FONT',
+    title: 'ブランドフォントを使用したタイトル',
+    description: '等幅フォントを使用した説明文です。',
+    eyebrowFont: 'mono',
+    titleFont: 'key',
+    descriptionFont: 'mono',
+    bodyContent: 'フォントファミリーを選択できます。',
+  },
+  render: (args) => ({
+    components: { Section },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Section v-bind="args">
+        <template #body>
+          {{ args.bodyContent }}
+        </template>
+      </Section>
+    `,
+  }),
+}

package/src/stories/SelectBox.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import SelectBox, {
   type SelectBoxProps,
 } from '@/components/elements/SelectBox.vue'
@@ -14,6 +14,11 @@ const meta: Meta<typeof SelectBox> = {
       control: 'text',
       description: 'ラベルテキスト',
     },
+    variant: {
+      control: 'select',
+      options: ['default', 'floating'],
+      description: 'ラベルのバリアント',
+    },
     placeholder: {
       control: 'text',
       description: 'プレースホルダーテキスト',
@@ -53,6 +58,7 @@ const meta: Meta<typeof SelectBox> = {
   },
   args: {
     label: 'オプション選択',
+    variant: 'default',
     placeholder: '',
     itemTitle: 'label',
     itemValue: 'value',
@@ -99,6 +105,7 @@ export const 基本: OverridesStory = {
         <rn-select-box
           v-model="selectedValue"
           :label="args.label"
+          :variant="args.variant"
           :placeholder="args.placeholder"
           :items="args.items"
           :item-title="args.itemTitle"
@@ -157,6 +164,7 @@ export const 複数選択: OverridesStory = {
           <rn-select-box
             v-model="selectedValues"
             :label="args.label"
+            :variant="args.variant"
             :placeholder="args.placeholder"
             :items="args.items"
             :multiple="args.multiple"
@@ -219,6 +227,7 @@ export const オートコンプリート: OverridesStory = {
           <rn-select-box
             v-model="selectedCountry"
             :label="args.label"
+            :variant="args.variant"
             :placeholder="args.placeholder"
             :items="args.items"
             :autocomplete="args.autocomplete"
@@ -272,6 +281,7 @@ export const バリデーション: OverridesStory = {
           <rn-select-box
             v-model="selectedOption"
             :label="args.label"
+            :variant="args.variant"
             :placeholder="args.placeholder"
             :items="args.items"
             :rules="args.rules"
@@ -323,6 +333,7 @@ export const プレースホルダー指定: OverridesStory = {
           <rn-select-box
             v-model="selectedMethod"
             :label="args.label"
+            :variant="args.variant"
             :placeholder="args.placeholder"
             :items="args.items"
             @update:modelValue="handleChange"
@@ -336,6 +347,49 @@ export const プレースホルダー指定: OverridesStory = {
   }),
 }
 
+export const フローティングラベル: OverridesStory = {
+  args: {
+    label: '配送方法',
+    variant: 'floating',
+    placeholder: '選択してください',
+    items: [
+      { value: 'standard', label: '通常配送（3-5日）' },
+      { value: 'express', label: '速達配送（1-2日）' },
+      { value: 'overnight', label: '翌日配送' },
+      { value: 'pickup', label: '店舗受取' },
+    ],
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    variant: { control: { disable: true } },
+    items: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox, 'rn-stack': Stack },
+    setup() {
+      const selectedMethod = ref('')
+
+      return { args, selectedMethod }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <rn-select-box
+            v-model="selectedMethod"
+            :label="args.label"
+            :variant="args.variant"
+            :placeholder="args.placeholder"
+            :items="args.items"
+          />
+          <div>
+            <p><strong>選択値:</strong> {{ selectedMethod || '未選択' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
 export const 無効状態: OverridesStory = {
   args: {
     label: '無効な選択ボックス',
@@ -366,6 +420,7 @@ export const 無効状態: OverridesStory = {
           <rn-select-box
             v-model="selectedOption"
             :label="args.label"
+            :variant="args.variant"
             :placeholder="args.placeholder"
             :items="args.items"
             :disabled="args.disabled"

package/src/stories/SkeletonLoader.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import SkeletonLoader, {
   type SkeletonLoaderProps,
 } from '@/components/elements/SkeletonLoader.vue'