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

package/src/stories/Banner.stories.ts

@@ -0,0 +1,235 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Banner from '@/components/features/Banner.vue'
+
+const meta: Meta<typeof Banner> = {
+  title: 'Features/Banner',
+  component: Banner,
+  tags: ['autodocs'],
+  argTypes: {
+    imageUrl: { control: 'text' },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    linkUrl: { control: 'text' },
+    variant: {
+      control: 'select',
+      options: ['default', 'overlay'],
+    },
+    overlayColor: { control: 'color' },
+    overlayPosition: {
+      control: 'select',
+      options: ['full', 'bottom', 'top'],
+    },
+    contentHorizontalAlign: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+    },
+    contentVerticalAlign: {
+      control: 'select',
+      options: ['top', 'center', 'bottom'],
+    },
+    aspectRatio: {
+      control: 'select',
+      options: ['16/9', '4/3', '1/1', '3/4', '9/16'],
+    },
+  },
+  args: {
+    imageUrl: 'https://placehold.co/800x450',
+    title: 'Spring Collection',
+    description: '新しいスタイルをあなたに',
+    linkUrl: '',
+    variant: 'default',
+    overlayColor: 'rgba(0, 0, 0, 0.3)',
+    overlayPosition: 'full',
+    contentHorizontalAlign: 'left',
+    contentVerticalAlign: 'bottom',
+    aspectRatio: '16/9',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const 基本: Story = {
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const オーバーレイ_全面: Story = {
+  args: {
+    variant: 'overlay',
+    overlayPosition: 'full',
+    overlayColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const オーバーレイ_下グラデーション: Story = {
+  args: {
+    variant: 'overlay',
+    overlayPosition: 'bottom',
+    overlayColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const オーバーレイ_上グラデーション: Story = {
+  args: {
+    variant: 'overlay',
+    overlayPosition: 'top',
+    overlayColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const オーバーレイ_中央揃え: Story = {
+  args: {
+    variant: 'overlay',
+    overlayPosition: 'full',
+    overlayColor: 'rgba(0, 0, 0, 0.5)',
+    contentHorizontalAlign: 'center',
+    contentVerticalAlign: 'center',
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const 画像のみ: Story = {
+  args: {
+    title: undefined,
+    description: undefined,
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const リンク付き: Story = {
+  args: {
+    linkUrl: 'https://example.com',
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const 正方形: Story = {
+  args: {
+    aspectRatio: '1/1',
+    imageUrl: 'https://placehold.co/600x600',
+  },
+  render: (args) => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 400px;">
+        <rn-banner v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const スライダー内使用例: Story = {
+  render: () => ({
+    components: { 'rn-banner': Banner },
+    setup() {
+      const banners = [
+        {
+          imageUrl: 'https://placehold.co/800x450/e74c3c/fff',
+          title: 'Sale',
+          description: '最大50%OFF',
+        },
+        {
+          imageUrl: 'https://placehold.co/800x450/3498db/fff',
+          title: 'New Arrival',
+          description: '新作入荷',
+        },
+        {
+          imageUrl: 'https://placehold.co/800x450/2ecc71/fff',
+          title: 'Limited',
+          description: '期間限定',
+        },
+      ]
+      return { banners }
+    },
+    template: `
+      <div style="display: flex; gap: 16px; max-width: 900px;">
+        <rn-banner
+          v-for="(banner, i) in banners"
+          :key="i"
+          :image-url="banner.imageUrl"
+          :title="banner.title"
+          :description="banner.description"
+          variant="overlay"
+          overlay-position="bottom"
+          overlay-color="rgba(0, 0, 0, 0.7)"
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/Button.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Button, { ButtonProps } from '@/components/elements/Button.vue'
 import Stack from '@/components/layouts/Stack.vue'
 

package/src/stories/Card.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Card, { CardProps } from '@/components/layouts/Card.vue'
 import Stack from '@/components/layouts/Stack.vue'
 import Button from '@/components/elements/Button.vue'

package/src/stories/CheckBox.stories.ts

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import CheckBox, {
   type CheckBoxProps,
 } from '@/components/elements/CheckBox.vue'
-import { StatusColorOptions } from '@/constants'
-import { StatusColor } from '@/types'
+import { ColorOptions } from '@/constants'
+import { Color } from '@/types'
 
 const meta: Meta<typeof CheckBox> = {
   title: 'Elements/CheckBox',
@@ -23,17 +23,42 @@ const meta: Meta<typeof CheckBox> = {
     },
     color: {
       control: 'select',
-      options: Object.keys(StatusColorOptions) as StatusColor[],
+      options: Object.keys(ColorOptions) as Color[],
     },
     disabled: {
       control: 'boolean',
     },
+    required: {
+      control: 'boolean',
+    },
   },
   args: {
-    label: '',
-    color: 'info',
+    label: '利用規約に同意する',
+    color: 'default',
     disabled: false,
+    required: false,
   },
+  render: (args) => ({
+    components: { 'rn-checkbox': CheckBox },
+    setup() {
+      const checkedValue = ref(false)
+      return { args, checkedValue }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-checkbox
+          :label=args.label
+          :color=args.color
+          :disabled=args.disabled
+          :required=args.required
+          v-model=checkedValue
+        />
+        <p style='margin-top: 24px;'>
+          選択中：{{ checkedValue }}
+        </p>
+      </div>
+    `,
+  }),
 }
 
 export default meta
@@ -46,31 +71,68 @@ type OverridesStory = Omit<Story, 'argTypes'> & {
 export const 基本: OverridesStory = {
   args: {},
   argTypes: {},
+}
+
+export const 複数選択: OverridesStory = {
   render: (args) => ({
     components: { 'rn-checkbox': CheckBox },
     setup() {
-      const selectedValues = ref<boolean[]>([])
-      return { args, selectedValues }
+      const dog = ref(false)
+      const cat = ref(false)
+      const bird = ref(false)
+      return { args, dog, cat, bird }
     },
     template: /* html */ `
       <div class='sb-canvas'>
-        <rn-checkbox
-          label="dog"
-          :color=args.color
-          :disabled=args.disabled
-          v-model=selectedValues
-        />
-        <rn-checkbox
-          style='margin-top: 4px;'
-          label="cat"
-          :color=args.color
-          :disabled=args.disabled
-          v-model=selectedValues
-        />
+        <rn-checkbox label="犬" :color=args.color v-model=dog />
+        <rn-checkbox label="猫" :color=args.color v-model=cat style='margin-top: 4px;' />
+        <rn-checkbox label="鳥" :color=args.color v-model=bird style='margin-top: 4px;' />
         <p style='margin-top: 24px;'>
-          選択中：{{ selectedValues.join(' ') }}
+          選択中：{{ [dog && '犬', cat && '猫', bird && '鳥'].filter(Boolean).join(', ') || 'なし' }}
         </p>
       </div>
     `,
   }),
+  argTypes: {},
+}
+
+export const カラーバリエーション: OverridesStory = {
+  render: () => ({
+    components: { 'rn-checkbox': CheckBox },
+    setup() {
+      const colors = [
+        'default',
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+      ]
+      const values = ref<Record<string, boolean>>(
+        Object.fromEntries(colors.map((c) => [c, true])),
+      )
+      return { colors, values }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='display: flex; flex-direction: column; gap: 8px;'>
+        <rn-checkbox
+          v-for="color in colors"
+          :key="color"
+          :label="color"
+          :color="color"
+          v-model="values[color]"
+        />
+      </div>
+    `,
+  }),
+  argTypes: {},
+}
+
+export const 無効化: OverridesStory = {
+  args: {
+    label: '無効化されたチェックボックス',
+    disabled: true,
+  },
+  argTypes: {},
 }

package/src/stories/ComboBox.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 ComboBox, {
   type ComboBoxProps,
 } from '@/components/elements/ComboBox.vue'
@@ -34,6 +34,11 @@ const meta: Meta<typeof ComboBox> = {
       control: 'text',
       description: 'ラベルテキスト',
     },
+    variant: {
+      control: 'select',
+      options: ['default', 'floating'],
+      description: 'ラベルのバリアント',
+    },
     itemTitle: {
       control: 'text',
       description: 'アイテムの表示名として使用するキー',
@@ -82,6 +87,7 @@ const meta: Meta<typeof ComboBox> = {
   args: {
     modelValue: [],
     label: 'お気に入りの果物',
+    variant: 'default',
     itemTitle: 'label',
     itemValue: 'value',
     returnObject: false,
@@ -126,6 +132,7 @@ export const 基本: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -167,6 +174,7 @@ export const クリア可能: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -209,6 +217,7 @@ export const 必須チェック: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -250,6 +259,7 @@ export const returnObjectの場合: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -290,6 +300,7 @@ export const アイコン付き: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -347,6 +358,7 @@ export const キーボード操作: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -367,6 +379,43 @@ export const キーボード操作: OverridesStory = {
   }),
 }
 
+/**
+ * フローティングラベル
+ * - `variant: 'floating'` でラベルがフィールド内に表示され、フォーカスまたは値入力時に浮き上がる
+ */
+export const フローティングラベル: OverridesStory = {
+  args: {
+    variant: 'floating',
+    label: 'お気に入りの果物',
+    placeholder: '検索または選択してください',
+  },
+  argTypes: {},
+  render: (args: StoryArgs) => ({
+    components: { 'rn-comboBox': ComboBox },
+    setup() {
+      const selectedValues = ref<string[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="min-height: 320px;">
+        <rn-comboBox
+          v-model="selectedValues"
+          :label="args.label"
+          :variant="args.variant"
+          :itemTitle="args.itemTitle"
+          :itemValue="args.itemValue"
+          :items="args.items"
+          :autocomplete="args.autocomplete"
+          :placeholder="args.placeholder"
+        />
+        <div style="margin-top: 16px;">
+          <strong>選択中：</strong> {{ selectedValues }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
 /**
  * 無効状態
  * - `disabled: true` で操作を無効化
@@ -388,6 +437,7 @@ export const 無効状態: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -430,6 +480,7 @@ export const カスタム検索結果なし: OverridesStory = {
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"
@@ -486,13 +537,22 @@ export const イベント: OverridesStory = {
         )
       }
 
-      return { args, selectedValues, eventLog, onOpen, onClose, onSelect, onDeselect }
+      return {
+        args,
+        selectedValues,
+        eventLog,
+        onOpen,
+        onClose,
+        onSelect,
+        onDeselect,
+      }
     },
     template: /* html */ `
       <div class='sb-canvas' style="min-height: 400px;">
         <rn-comboBox
           v-model="selectedValues"
           :label="args.label"
+          :variant="args.variant"
           :itemTitle="args.itemTitle"
           :itemValue="args.itemValue"
           :returnObject="args.returnObject"

package/src/stories/Dialog.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 Dialog, { type DialogProps } from '@/components/interactive/Dialog.vue'
 import Button from '@/components/elements/Button.vue'
 

package/src/stories/Disclosure.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 import Disclosure, {
   DisclosureProps,

package/src/stories/Divider.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Divider, { DividerProps } from '@/components/elements/Divider.vue'
 
 const meta: Meta<typeof Divider> = {

package/src/stories/Drawer.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Drawer, { DrawerProps } from '@/components/navigation/Drawer.vue'
 import Button from '@/components/elements/Button.vue'
 import Icon from '@/components/elements/Icon.vue'

package/src/stories/DropDown.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 DropDown, {
   type DropdownProps,
 } from '@/components/interactive/DropDown.vue'

package/src/stories/FloatingBanner.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import FloatingBanner, {
   type FloatingBannerProps,
 } from '@/components/features/FloatingBanner.vue'