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

package/src/stories/SelectBox.stories.ts

@@ -0,0 +1,377 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SelectBox, {
+  type SelectBoxProps,
+} from '@/components/elements/SelectBox.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof SelectBox> = {
+  title: 'Elements/SelectBox',
+  component: SelectBox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'ラベルテキスト',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'プレースホルダーテキスト',
+    },
+    itemTitle: {
+      control: 'text',
+      description: 'アイテムの表示名プロパティ',
+    },
+    itemValue: {
+      control: 'text',
+      description: 'アイテムの値プロパティ',
+    },
+    returnObject: {
+      control: 'boolean',
+      description: 'オブジェクトとして値を返すかどうか',
+    },
+    disabled: {
+      control: 'boolean',
+      description: '無効状態',
+    },
+    autocomplete: {
+      control: 'boolean',
+      description: 'オートコンプリート機能',
+    },
+    multiple: {
+      control: 'boolean',
+      description: '複数選択可能',
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'クリアボタン表示',
+    },
+    rules: {
+      control: 'text',
+      description: 'バリデーションルール',
+    },
+  },
+  args: {
+    label: 'オプション選択',
+    placeholder: '',
+    itemTitle: 'label',
+    itemValue: 'value',
+    returnObject: false,
+    disabled: false,
+    autocomplete: false,
+    multiple: false,
+    clearable: false,
+    rules: '',
+  },
+}
+
+export default meta
+type StoryArgs = SelectBoxProps & { modelValue?: any }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    label: 'フルーツを選択',
+    items: [
+      { value: 'apple', label: 'りんご' },
+      { value: 'banana', label: 'バナナ' },
+      { value: 'orange', label: 'オレンジ' },
+      { value: 'grape', label: 'ぶどう' },
+      { value: 'strawberry', label: 'いちご' },
+    ],
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox },
+    setup() {
+      const selectedValue = ref('')
+
+      const handleChange = (value: any) => {
+        console.log('選択値:', value)
+      }
+
+      return { args, selectedValue, handleChange }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-select-box
+          v-model="selectedValue"
+          :label="args.label"
+          :placeholder="args.placeholder"
+          :items="args.items"
+          :item-title="args.itemTitle"
+          :item-value="args.itemValue"
+          :return-object="args.returnObject"
+          :disabled="args.disabled"
+          :autocomplete="args.autocomplete"
+          :multiple="args.multiple"
+          :clearable="args.clearable"
+          :rules="args.rules"
+          @update:modelValue="handleChange"
+        />
+        <div style="margin-top: 16px;">
+          <p>選択値: {{ selectedValue }}</p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 複数選択: OverridesStory = {
+  args: {
+    label: '好きな色を選択（複数可）',
+    multiple: true,
+    clearable: true,
+    items: [
+      { value: 'red', label: '赤' },
+      { value: 'blue', label: '青' },
+      { value: 'green', label: '緑' },
+      { value: 'yellow', label: '黄' },
+      { value: 'purple', label: '紫' },
+      { value: 'orange', label: 'オレンジ' },
+      { value: 'pink', label: 'ピンク' },
+    ],
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    items: { control: { disable: true } },
+    multiple: { control: { disable: true } },
+    clearable: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox, 'rn-stack': Stack },
+    setup() {
+      const selectedValues = ref([])
+
+      const handleChange = (values: any) => {
+        console.log('選択値:', values)
+      }
+
+      return { args, selectedValues, handleChange }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <rn-select-box
+            v-model="selectedValues"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :items="args.items"
+            :multiple="args.multiple"
+            :clearable="args.clearable"
+            @update:modelValue="handleChange"
+          />
+          <div>
+            <p><strong>選択された値:</strong></p>
+            <p>{{ selectedValues.length > 0 ? selectedValues.join(', ') : '未選択' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const オートコンプリート: OverridesStory = {
+  args: {
+    label: '国を検索・選択',
+    autocomplete: true,
+    clearable: true,
+    items: [
+      { value: 'jp', label: '日本' },
+      { value: 'us', label: 'アメリカ' },
+      { value: 'uk', label: 'イギリス' },
+      { value: 'fr', label: 'フランス' },
+      { value: 'de', label: 'ドイツ' },
+      { value: 'it', label: 'イタリア' },
+      { value: 'es', label: 'スペイン' },
+      { value: 'kr', label: '韓国' },
+      { value: 'cn', label: '中国' },
+      { value: 'au', label: 'オーストラリア' },
+      { value: 'ca', label: 'カナダ' },
+      { value: 'br', label: 'ブラジル' },
+    ],
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    items: { control: { disable: true } },
+    autocomplete: { control: { disable: true } },
+    clearable: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox, 'rn-stack': Stack },
+    setup() {
+      const selectedCountry = ref('')
+
+      const handleChange = (value: any) => {
+        console.log('選択国:', value)
+      }
+
+      return { args, selectedCountry, handleChange }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>国名を入力して検索・選択してください</p>
+          </div>
+          <rn-select-box
+            v-model="selectedCountry"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :items="args.items"
+            :autocomplete="args.autocomplete"
+            :clearable="args.clearable"
+            @update:modelValue="handleChange"
+          />
+          <div>
+            <p><strong>選択された国:</strong></p>
+            <p>{{ selectedCountry || '未選択' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const バリデーション: OverridesStory = {
+  args: {
+    label: '必須項目',
+    rules: 'required',
+    clearable: true,
+    items: [
+      { value: 'option1', label: 'オプション1' },
+      { value: 'option2', label: 'オプション2' },
+      { value: 'option3', label: 'オプション3' },
+    ],
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    items: { control: { disable: true } },
+    rules: { control: { disable: true } },
+    clearable: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox, 'rn-stack': Stack },
+    setup() {
+      const selectedOption = ref('')
+
+      const handleChange = (value: any) => {
+        console.log('選択値:', value)
+      }
+
+      return { args, selectedOption, handleChange }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>※この項目は必須です。何も選択しないとエラーが表示されます。</p>
+          </div>
+          <rn-select-box
+            v-model="selectedOption"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :items="args.items"
+            :rules="args.rules"
+            :clearable="args.clearable"
+            @update:modelValue="handleChange"
+          />
+          <div>
+            <p><strong>選択値:</strong> {{ selectedOption || '未選択' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const プレースホルダー指定: OverridesStory = {
+  args: {
+    label: '配送方法',
+    placeholder: '配送方法を選択してください',
+    items: [
+      { value: 'standard', label: '通常配送（3-5日）' },
+      { value: 'express', label: '速達配送（1-2日）' },
+      { value: 'overnight', label: '翌日配送' },
+      { value: 'pickup', label: '店舗受取' },
+    ],
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    placeholder: { control: { disable: true } },
+    items: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox, 'rn-stack': Stack },
+    setup() {
+      const selectedMethod = ref('')
+
+      const handleChange = (value: any) => {
+        console.log('選択配送方法:', value)
+      }
+
+      return { args, selectedMethod, handleChange }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>ラベル「{{ args.label }}」とプレースホルダー「{{ args.placeholder }}」が別々に設定されています。</p>
+          </div>
+          <rn-select-box
+            v-model="selectedMethod"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :items="args.items"
+            @update:modelValue="handleChange"
+          />
+          <div>
+            <p><strong>選択値:</strong> {{ selectedMethod || '未選択' }}</p>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 無効状態: OverridesStory = {
+  args: {
+    label: '無効な選択ボックス',
+    disabled: true,
+    items: [
+      { value: 'option1', label: 'オプション1' },
+      { value: 'option2', label: 'オプション2' },
+    ],
+  },
+  argTypes: {
+    label: { control: { disable: true } },
+    items: { control: { disable: true } },
+    disabled: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-select-box': SelectBox, 'rn-stack': Stack },
+    setup() {
+      const selectedOption = ref('option1')
+
+      return { args, selectedOption }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>
+            <p>この選択ボックスは無効状態です。クリックしても操作できません。</p>
+          </div>
+          <rn-select-box
+            v-model="selectedOption"
+            :label="args.label"
+            :placeholder="args.placeholder"
+            :items="args.items"
+            :disabled="args.disabled"
+          />
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/SkeletonLoader.stories.ts

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SkeletonLoader, {
+  type SkeletonLoaderProps,
+} from '@/components/elements/SkeletonLoader.vue'
+
+const meta: Meta<typeof SkeletonLoader> = {
+  title: 'Elements/SkeletonLoader',
+  component: SkeletonLoader,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'article-thumbnail',
+        'image-portrait',
+        'image-cinema',
+        'gallery',
+        'list-item-image-vertical',
+        'list-item-image-horizontal',
+        'text-title-line-1',
+        'text-title-line-2',
+        'text-body-line-2',
+        'text-body-line-3',
+        'text-body-line-4',
+        'description-list',
+        'button-fill-block',
+        'button-text-inline',
+        'input',
+        'input-group-2',
+        'stepper',
+      ],
+    },
+  },
+  args: {
+    type: 'article-thumbnail',
+  },
+}
+
+export default meta
+type StoryArgs = SkeletonLoaderProps
+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-skeleton-loader': SkeletonLoader },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-skeleton-loader
+          :type=args.type
+        >
+        </rn-skeleton-loader>
+      </div>
+    `,
+  }),
+}
+
+export const 全パターン: OverridesStory = {
+  args: {},
+  argTypes: {
+    type: { table: { disable: true } },
+    default: { table: { disable: true } },
+  },
+  render: () => ({
+    components: { 'rn-skeleton-loader': SkeletonLoader },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
+          <!-- 画像系 -->
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">article-thumbnail</h3>
+            <rn-skeleton-loader type="article-thumbnail" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">image-portrait</h3>
+            <rn-skeleton-loader type="image-portrait" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">image-cinema</h3>
+            <rn-skeleton-loader type="image-cinema" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">gallery</h3>
+            <rn-skeleton-loader type="gallery" />
+          </div>
+          
+          <!-- リスト系 -->
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">list-item-image-vertical</h3>
+            <rn-skeleton-loader type="list-item-image-vertical" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">list-item-image-horizontal</h3>
+            <rn-skeleton-loader type="list-item-image-horizontal" />
+          </div>
+          
+          <!-- テキスト系 -->
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">text-title-line-1</h3>
+            <rn-skeleton-loader type="text-title-line-1" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">text-title-line-2</h3>
+            <rn-skeleton-loader type="text-title-line-2" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">text-body-line-2</h3>
+            <rn-skeleton-loader type="text-body-line-2" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">text-body-line-3</h3>
+            <rn-skeleton-loader type="text-body-line-3" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">text-body-line-4</h3>
+            <rn-skeleton-loader type="text-body-line-4" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">description-list</h3>
+            <rn-skeleton-loader type="description-list" />
+          </div>
+          
+          <!-- ボタン・フォーム系 -->
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">button-fill-block</h3>
+            <rn-skeleton-loader type="button-fill-block" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">button-text-inline</h3>
+            <rn-skeleton-loader type="button-text-inline" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">input</h3>
+            <rn-skeleton-loader type="input" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">input-group-2</h3>
+            <rn-skeleton-loader type="input-group-2" />
+          </div>
+          
+          <div style="border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px;">
+            <h3 style="margin: 0 0 12px 0; font-size: 14px; color: #666;">stepper</h3>
+            <rn-skeleton-loader type="stepper" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/Slider.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Slider, { type SliderProps } from '@/components/interactive/Slider.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Card from '@/components/layouts/Card.vue'
+import Text from '@/components/elements/Text.vue'
+import Image from '@/components/elements/Image.vue'
+
+const meta: Meta<typeof Slider> = {
+  title: 'Interactive/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+  argTypes: {
+    autoplay: {
+      control: 'text',
+      description: 'オートプレイ（true、false、またはミリ秒）',
+    },
+    variant: {
+      control: 'select',
+      options: ['slide', 'instant', 'fade', 'carousel', 'cards'],
+      description: 'スライダーのバリエーション',
+    },
+    slidesPerView: {
+      control: 'number',
+      description: 'スライド表示数（数値またはレスポンシブ設定）',
+    },
+    spaceBetween: {
+      control: 'number',
+      description: 'スライド間の間隔（数値またはレスポンシブ設定）',
+    },
+    loop: {
+      control: 'boolean',
+      description: 'ループ再生',
+    },
+  },
+  args: {
+    autoplay: false,
+    variant: 'slide',
+    slidesPerView: 1,
+    spaceBetween: 0,
+    loop: true,
+  },
+}
+
+export default meta
+type StoryArgs = SliderProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    variant: 'slide',
+    loop: true,
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-slider': Slider, 'rn-image': Image },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-slider 
+          :autoplay="args.autoplay"
+          :variant="args.variant"
+          :slides-per-view="args.slidesPerView"
+          :space-between="args.spaceBetween"
+          :loop="args.loop"
+        >
+          <rn-image src="https://placehold.jp/900x400.png" />
+          <rn-image src="https://placehold.jp/900x400.png" />
+          <rn-image src="https://placehold.jp/900x400.png" />
+          <rn-image src="https://placehold.jp/900x400.png" />
+          <rn-image src="https://placehold.jp/900x400.png" />
+        </rn-slider>
+      </div>
+    `,
+  }),
+}