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

package/src/stories/Image.stories.ts

@@ -0,0 +1,613 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Image, { type ImageProps } from '@/components/elements/Image.vue'
+import Stack from '@/components/layouts/Stack.vue'
+
+const meta: Meta<typeof Image> = {
+  title: 'Elements/Image',
+  component: Image,
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: '画像のURL（文字列またはレスポンシブ設定オブジェクト）',
+    },
+    alt: {
+      control: 'text',
+      description: '代替テキスト',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'auto'],
+      description: '画像のサイズ',
+    },
+    loading: {
+      control: 'select',
+      options: ['lazy', 'eager'],
+      description: '読み込み方式',
+    },
+    fallback: {
+      control: 'text',
+      description: 'エラー時のフォールバック画像URL',
+    },
+    width: {
+      control: 'text',
+      description: '画像の幅（数値、文字列、またはレスポンシブ設定）',
+    },
+    height: {
+      control: 'text',
+      description: '画像の高さ（数値、文字列、またはレスポンシブ設定）',
+    },
+    title: {
+      control: 'text',
+      description: 'タイトルテキスト',
+    },
+    description: {
+      control: 'text',
+      description: '説明文',
+    },
+    textPosition: {
+      control: 'select',
+      options: ['normal', 'overlay'],
+      description: 'テキストの表示位置',
+    },
+    textAlignment: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      description: 'テキストの配置',
+    },
+    textSize: {
+      control: 'select',
+      options: ['auto', 'sm', 'md', 'lg'],
+      description: 'テキストサイズ',
+    },
+  },
+  args: {
+    src: 'https://picsum.photos/400/300',
+    alt: 'サンプル画像',
+    size: 'auto',
+    loading: 'lazy',
+    fallback: '',
+    width: '',
+    height: '',
+    title: '',
+    description: '',
+    textPosition: 'normal',
+    textAlignment: 'left',
+    textSize: 'auto',
+  },
+}
+
+export default meta
+type StoryArgs = ImageProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    src: 'https://picsum.photos/400/300',
+    alt: 'サンプル画像',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-image
+          :src="args.src"
+          :alt="args.alt"
+          :size="args.size"
+          :loading="args.loading"
+          :fallback="args.fallback"
+          :width="args.width"
+          :height="args.height"
+          :title="args.title"
+          :description="args.description"
+          :text-position="args.textPosition"
+          :text-alignment="args.textAlignment"
+          :text-size="args.textSize"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const サイズ設定: OverridesStory = {
+  args: {
+    src: 'https://picsum.photos/400/300',
+    alt: 'サンプル画像',
+  },
+  argTypes: {
+    src: { control: { disable: true } },
+    alt: { control: { disable: true } },
+    loading: { control: { disable: true } },
+    fallback: { control: { disable: true } },
+    width: { control: { disable: true } },
+    height: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <rn-stack direction="horizontal" gap="md" horizontal-align="start">
+            <rn-stack direction="vertical" gap="xs">
+              <div>Size: sm</div>
+              <rn-image src="https://picsum.photos/400/300" alt="サンプル画像" size="sm" />
+            </rn-stack>
+            <rn-stack direction="vertical" gap="xs">
+              <div>Size: md</div>
+              <rn-image src="https://picsum.photos/400/300" alt="サンプル画像" size="md" />
+            </rn-stack>
+            <rn-stack direction="vertical" gap="xs">
+              <div>Size: lg</div>
+              <rn-image src="https://picsum.photos/400/300" alt="サンプル画像" size="lg" />
+            </rn-stack>
+          </rn-stack>
+          <rn-stack direction="vertical" gap="xs">
+            <div>Size: xl</div>
+            <rn-image src="https://picsum.photos/400/300" alt="サンプル画像" size="xl" />
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const レスポンシブ画像: OverridesStory = {
+  args: {},
+  argTypes: {
+    src: { control: { disable: true } },
+    alt: { control: { disable: true } },
+    size: { control: { disable: true } },
+    loading: { control: { disable: true } },
+    fallback: { control: { disable: true } },
+    width: { control: { disable: true } },
+    height: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image, 'rn-stack': Stack },
+    setup() {
+      const responsiveSrc = {
+        xs: 'https://picsum.photos/300/200',
+        sm: 'https://picsum.photos/400/300',
+        md: 'https://picsum.photos/600/400',
+        lg: 'https://picsum.photos/800/600',
+        xl: 'https://picsum.photos/1200/800',
+      }
+      return { args, responsiveSrc }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <div>レスポンシブ画像（画面サイズに応じて異なる画像を表示）</div>
+          <rn-image 
+            :src="responsiveSrc" 
+            alt="レスポンシブサンプル画像" 
+          />
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const エラー処理: OverridesStory = {
+  args: {},
+  argTypes: {
+    src: { control: { disable: true } },
+    alt: { control: { disable: true } },
+    size: { control: { disable: true } },
+    loading: { control: { disable: true } },
+    fallback: { control: { disable: true } },
+    width: { control: { disable: true } },
+    height: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="md">
+          <rn-stack direction="vertical" gap="xs">
+            <div>エラー画像（フォールバックなし）</div>
+            <rn-image 
+              src="https://invalid-url.com/not-found.jpg" 
+              alt="存在しない画像" 
+              size="md"
+            />
+          </rn-stack>
+          <rn-stack direction="vertical" gap="xs">
+            <div>エラー画像（フォールバックあり）</div>
+            <rn-image 
+              src="https://invalid-url.com/not-found.jpg" 
+              alt="存在しない画像" 
+              size="md"
+              fallback="https://picsum.photos/200/200?grayscale"
+            />
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const テキスト付き画像: OverridesStory = {
+  args: {},
+  argTypes: {
+    src: { control: { disable: true } },
+    alt: { control: { disable: true } },
+    size: { control: { disable: true } },
+    loading: { control: { disable: true } },
+    fallback: { control: { disable: true } },
+    width: { control: { disable: true } },
+    height: { control: { disable: true } },
+    title: { control: { disable: true } },
+    description: { control: { disable: true } },
+    textPosition: { control: { disable: true } },
+    textAlignment: { control: { disable: true } },
+    textSize: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <rn-stack direction="vertical" gap="sm">
+            <h3>通常配置（Normal）</h3>
+            <rn-stack direction="horizontal" gap="md" horizontal-align="start" wrap>
+              <rn-stack direction="vertical" gap="xs">
+                <div>左寄せ・サイズmd</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/nature1/300/200" 
+                  alt="自然風景" 
+                  size="md"
+                  title="美しい自然風景"
+                  description="山と湖の美しいコントラスト"
+                  text-position="normal"
+                  text-alignment="left"
+                />
+              </rn-stack>
+              <rn-stack direction="vertical" gap="xs">
+                <div>中央寄せ・サイズmd</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/nature2/300/200" 
+                  alt="都市風景" 
+                  size="md"
+                  title="モダンな都市"
+                  description="夜景が美しい近代都市"
+                  text-position="normal"
+                  text-alignment="center"
+                />
+              </rn-stack>
+            </rn-stack>
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="sm">
+            <h3>オーバーレイ配置（Overlay）</h3>
+            <rn-stack direction="horizontal" gap="md" horizontal-align="start" wrap>
+              <rn-stack direction="vertical" gap="xs">
+                <div>左寄せ・サイズlg</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/city1/400/300" 
+                  alt="街並み" 
+                  size="lg"
+                  title="歴史ある街並み"
+                  description="古い建物と新しい建物が共存する美しい街"
+                  text-position="overlay"
+                  text-alignment="left"
+                />
+              </rn-stack>
+              <rn-stack direction="vertical" gap="xs">
+                <div>中央寄せ・サイズlg</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/city2/400/300" 
+                  alt="現代建築" 
+                  size="lg"
+                  title="現代建築の美"
+                  description="シンプルで洗練されたデザイン"
+                  text-position="overlay"
+                  text-alignment="center"
+                />
+              </rn-stack>
+            </rn-stack>
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const テキストサイズバリエーション: OverridesStory = {
+  args: {},
+  argTypes: {
+    src: { control: { disable: true } },
+    alt: { control: { disable: true } },
+    size: { control: { disable: true } },
+    loading: { control: { disable: true } },
+    fallback: { control: { disable: true } },
+    width: { control: { disable: true } },
+    height: { control: { disable: true } },
+    title: { control: { disable: true } },
+    description: { control: { disable: true } },
+    textPosition: { control: { disable: true } },
+    textAlignment: { control: { disable: true } },
+    textSize: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <rn-stack direction="vertical" gap="sm">
+            <h3>画像サイズと横幅比例のテキストサイズ（textSize="auto"）</h3>
+            <rn-stack direction="horizontal" gap="md" horizontal-align="start" wrap>
+              <rn-stack direction="vertical" gap="xs">
+                <div>サイズ: sm</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/auto1/300/300" 
+                  alt="小サイズ" 
+                  size="sm"
+                  title="小さな画像"
+                  description="テキストも小さくなります"
+                  text-position="overlay"
+                  text-alignment="center"
+                  text-size="auto"
+                />
+              </rn-stack>
+              <rn-stack direction="vertical" gap="xs">
+                <div>サイズ: md</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/auto2/300/300" 
+                  alt="中サイズ" 
+                  size="md"
+                  title="中くらいの画像"
+                  description="テキストサイズも中くらい"
+                  text-position="overlay"
+                  text-alignment="center"
+                  text-size="auto"
+                />
+              </rn-stack>
+              <rn-stack direction="vertical" gap="xs">
+                <div>サイズ: lg</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/auto3/300/300" 
+                  alt="大サイズ" 
+                  size="lg"
+                  title="大きな画像"
+                  description="テキストも大きくなります"
+                  text-position="overlay"
+                  text-alignment="center"
+                  text-size="auto"
+                />
+              </rn-stack>
+            </rn-stack>
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="sm">
+            <h3>固定テキストサイズ</h3>
+            <rn-stack direction="horizontal" gap="md" horizontal-align="start" wrap>
+              <rn-stack direction="vertical" gap="xs">
+                <div>textSize: sm</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/fixed1/300/200" 
+                  alt="固定小" 
+                  size="md"
+                  title="固定小サイズ"
+                  description="常に小さなテキスト"
+                  text-position="normal"
+                  text-alignment="center"
+                  text-size="sm"
+                />
+              </rn-stack>
+              <rn-stack direction="vertical" gap="xs">
+                <div>textSize: md</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/fixed2/300/200" 
+                  alt="固定中" 
+                  size="md"
+                  title="固定中サイズ"
+                  description="常に中くらいのテキスト"
+                  text-position="normal"
+                  text-alignment="center"
+                  text-size="md"
+                />
+              </rn-stack>
+              <rn-stack direction="vertical" gap="xs">
+                <div>textSize: lg</div>
+                <rn-image 
+                  src="https://picsum.photos/seed/fixed3/300/200" 
+                  alt="固定大" 
+                  size="md"
+                  title="固定大サイズ"
+                  description="常に大きなテキスト"
+                  text-position="normal"
+                  text-alignment="center"
+                  text-size="lg"
+                />
+              </rn-stack>
+            </rn-stack>
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const カード風レイアウト: OverridesStory = {
+  args: {},
+  argTypes: {
+    src: { control: { disable: true } },
+    alt: { control: { disable: true } },
+    size: { control: { disable: true } },
+    loading: { control: { disable: true } },
+    fallback: { control: { disable: true } },
+    width: { control: { disable: true } },
+    height: { control: { disable: true } },
+    title: { control: { disable: true } },
+    description: { control: { disable: true } },
+    textPosition: { control: { disable: true } },
+    textAlignment: { control: { disable: true } },
+    textSize: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-image': Image, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <h3>商品カード風</h3>
+          <rn-stack direction="horizontal" gap="md" horizontal-align="start" wrap>
+            <rn-image 
+              src="https://picsum.photos/seed/product1/300/300" 
+              alt="商品1" 
+              :width="250"
+              :height="250"
+              size="md"
+              title="プレミアム商品A\n限定モデル"
+              description="高品質な素材を使用\n限定アイテムです"
+              text-position="normal"
+              text-alignment="left"
+            >
+              <template #top-right>
+                <span style="background: #ff4444; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold;">SALE</span>
+              </template>
+              <template #extra>
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px;">
+                  <span style="font-size: 18px; font-weight: bold; color: #e74c3c;">￥1,200</span>
+                  <button style="background: #3498db; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer;">詳細</button>
+                </div>
+              </template>
+            </rn-image>
+            <rn-image 
+              src="https://picsum.photos/seed/product2/300/300" 
+              alt="商品2" 
+              :width="250"
+              :height="250"
+              size="md"
+              title="スタンダード商品B"
+              description="日常使いに最適なベーシックアイテム"
+              text-position="normal"
+              text-alignment="left"
+            >
+              <template #top-left>
+                <span style="background: #2ecc71; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">エコ</span>
+              </template>
+              <template #extra>
+                <div style="margin-top: 8px;">
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 16px; font-weight: bold;">￥800</span>
+                    <div style="display: flex; gap: 4px;">
+                      <span style="color: #f39c12;">★★★★☆</span>
+                      <span style="font-size: 12px; color: #7f8c8d;">(24)</span>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </rn-image>
+            <rn-image 
+              src="https://picsum.photos/seed/product3/300/300" 
+              alt="商品3" 
+              :width="250"
+              :height="250"
+              size="md"
+              title="エコ商品C"
+              description="環境に配慮した持続可能な商品"
+              text-position="normal"
+              text-alignment="left"
+            >
+              <template #bottom-right>
+                <button style="background: white; border: 2px solid #e74c3c; color: #e74c3c; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;">♥</button>
+              </template>
+            </rn-image>
+          </rn-stack>
+          
+          <h3>スロット配置デモ</h3>
+          <rn-stack direction="horizontal" gap="md" horizontal-align="start" wrap>
+            <rn-image 
+              src="https://picsum.photos/seed/demo1/300/200" 
+              alt="スロットデモ" 
+              :width="300"
+              :height="200"
+              size="md"
+            >
+              <template #top-left>
+                <span style="background: #e74c3c; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">TL</span>
+              </template>
+              <template #top-center>
+                <span style="background: #3498db; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">TC</span>
+              </template>
+              <template #top-right>
+                <span style="background: #2ecc71; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">TR</span>
+              </template>
+              <template #left-center>
+                <span style="background: #f39c12; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">LC</span>
+              </template>
+              <template #right-center>
+                <span style="background: #9b59b6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">RC</span>
+              </template>
+              <template #bottom-left>
+                <span style="background: #34495e; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">BL</span>
+              </template>
+              <template #bottom-center>
+                <span style="background: #e67e22; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">BC</span>
+              </template>
+              <template #bottom-right>
+                <span style="background: #95a5a6; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">BR</span>
+              </template>
+            </rn-image>
+          </rn-stack>
+          
+          <h3>バナー風</h3>
+          <rn-stack direction="vertical" gap="md">
+            <rn-image 
+              src="https://picsum.photos/seed/banner1/800/300" 
+              alt="キャンペーンバナー" 
+              :width="600"
+              :height="200"
+              size="lg"
+              title="春のセール\n開催中！"
+              description="全商品最大50%OFF\n期間限定です"
+              text-position="overlay"
+              text-alignment="center"
+            >
+              <template #top-right>
+                <span style="background: rgba(255,255,255,0.9); color: #e74c3c; padding: 8px 16px; border-radius: 8px; font-weight: bold;">最大50%OFF</span>
+              </template>
+            </rn-image>
+            <rn-image 
+              src="https://picsum.photos/seed/banner2/800/300" 
+              alt="新商品告知" 
+              :width="600"
+              :height="200"
+              size="lg"
+              title="新商品登場"
+              description="革新的なデザインと機能性を兼ね備えた新シリーズ"
+              text-position="overlay"
+              text-alignment="left"
+            >
+              <template #bottom-center>
+                <button style="background: white; color: #2c3e50; border: none; padding: 12px 24px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-bottom: 16px;">詳しく見る</button>
+              </template>
+            </rn-image>
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/Label.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Label, { type LabelProps } from '@/components/elements/Label.vue'
+
+const meta: Meta<typeof Label> = {
+  title: 'Elements/Label',
+  component: Label,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['warning', 'danger', 'success', 'info', 'default'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+  },
+  args: {
+    color: 'default',
+    size: 'md',
+  },
+}
+
+export default meta
+type StoryArgs = LabelProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: 'Label',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-label': Label },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-label
+          :color=args.color
+          :size=args.size
+        >
+          {{ args.slotText }}
+        </rn-label>
+      </div>
+    `,
+  }),
+}