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

package/src/stories/Form.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Form from '@/components/renderless/Form.vue'
 import TextField from '@/components/elements/TextField.vue'
 import SelectBox from '@/components/elements/SelectBox.vue'
@@ -702,3 +702,98 @@ export const パスワードフィールド付き: OverridesStory = {
     `,
   }),
 }
+
+export const vModelInvalid同期: OverridesStory = {
+  args: {},
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-form': Form,
+      'rn-text-field': TextField,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      const name = ref('')
+      const email = ref('')
+      // v-model:invalid で同期される状態
+      const isFormInvalid = ref(true)
+
+      const handleSubmit = () => {
+        alert('フォームが送信されました！')
+      }
+
+      return {
+        args,
+        name,
+        email,
+        isFormInvalid,
+        handleSubmit,
+      }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <!-- フォーム外でinvalidの状態を表示 -->
+          <div style="padding: 16px; background: #e3f2fd; border-radius: 8px; font-size: 14px;">
+            <h4 style="margin: 0 0 12px 0; color: #1565c0;">v-model:invalid の使用例</h4>
+            <p style="margin: 0 0 8px 0; color: #333;">
+              <code>v-model:invalid</code> を使用すると、フォームの無効状態を親コンポーネントで直接取得できます。
+            </p>
+            <div style="padding: 8px; background: #fff; border-radius: 4px;">
+              <strong>isFormInvalid:</strong>
+              <span :style="{ color: isFormInvalid ? '#d32f2f' : '#388e3c', fontWeight: 'bold' }">
+                {{ isFormInvalid }}
+              </span>
+            </div>
+          </div>
+
+          <!-- v-model:invalid を使用したフォーム -->
+          <rn-form v-model:invalid="isFormInvalid">
+            <template #default="{ invalid, dirty }">
+              <div style="max-width: 400px; padding: 24px; border: 1px solid #ddd; border-radius: 8px;">
+                <h3 style="text-align: center; margin-bottom: 24px;">お問い合わせフォーム</h3>
+                <rn-stack direction="vertical" gap="md">
+                  <rn-text-field
+                    v-model="name"
+                    name="name"
+                    label="お名前"
+                    rules="required"
+                    placeholder="山田太郎"
+                  />
+
+                  <rn-text-field
+                    v-model="email"
+                    name="email"
+                    label="メールアドレス"
+                    rules="required|email"
+                    placeholder="example@domain.com"
+                  />
+
+                  <!-- スロット内のinvalidも従来通り使用可能 -->
+                  <div style="padding: 8px; background: #f5f5f5; border-radius: 4px; font-size: 12px;">
+                    <div><strong>スロット内 invalid:</strong> {{ invalid }}</div>
+                    <div><strong>スロット内 dirty:</strong> {{ dirty }}</div>
+                  </div>
+                </rn-stack>
+              </div>
+            </template>
+          </rn-form>
+
+          <!-- フォーム外に配置された送信ボタン -->
+          <div style="padding: 16px; background: #fff3e0; border-radius: 8px;">
+            <p style="margin: 0 0 12px 0; font-size: 14px; color: #e65100;">
+              <strong>フォーム外の送信ボタン</strong>: v-model:invalid で取得した状態でdisabledを制御
+            </p>
+            <rn-button
+              @click="handleSubmit()"
+              :disabled="isFormInvalid"
+              color="primary"
+            >
+              送信する（フォーム外）
+            </rn-button>
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/Gallery.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Gallery, { GalleryProps } from '@/components/interactive/Gallery.vue'
 import Stack from '@/components/layouts/Stack.vue'
 

package/src/stories/Grid.stories.ts

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

package/src/stories/Hero.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Hero, { HeroProps } from '@/components/features/Hero.vue'
 
 const meta: Meta<typeof Hero> = {
@@ -6,47 +6,196 @@ const meta: Meta<typeof Hero> = {
   component: Hero,
   tags: ['autodocs'],
   argTypes: {
-    imageUrl: {
-      control: 'text',
+    layout: {
+      control: 'select',
+      options: ['vertical-split', 'horizontal-sprit', 'overlay'],
     },
-    linkUrl: {
-      control: 'text',
+    reverse: { control: 'boolean' },
+    media: { control: 'text' },
+    eyebrow: { control: 'text' },
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    description: { control: 'text' },
+    contentAlign: {
+      control: 'select',
+      options: ['left', 'center', 'right'],
+    },
+    contentVerticalAlign: {
+      control: 'select',
+      options: ['top', 'center', 'bottom'],
+    },
+    overlayColor: { control: 'color' },
+    eyebrowFont: {
+      control: 'select',
+      options: ['default', 'key', 'mono'],
+    },
+    titleFont: {
+      control: 'select',
+      options: ['default', 'key', 'mono'],
+    },
+    subtitleFont: {
+      control: 'select',
+      options: ['default', 'key', 'mono'],
+    },
+    descriptionFont: {
+      control: 'select',
+      options: ['default', 'key', 'mono'],
     },
   },
   args: {
-    imageUrl:
-      'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
-    linkUrl: 'https://official-goods-store.jp/naoto/',
+    layout: 'horizontal-sprit',
+    reverse: false,
+    media: 'https://placehold.co/800x600',
+    eyebrow: 'NEW COLLECTION',
+    title: 'Spring 2025',
+    subtitle: '新しいスタイルをあなたに',
+    description:
+      'この春の新作コレクションが登場しました。トレンドを取り入れた最新アイテムをチェックしてください。',
+    contentAlign: 'left',
+    contentVerticalAlign: 'top',
+    overlayColor: 'rgba(0, 0, 0, 0.3)',
+    eyebrowFont: 'default',
+    titleFont: 'default',
+    subtitleFont: 'default',
+    descriptionFont: 'default',
   },
 }
 
 export default meta
-type StoryArgs = HeroProps & { slotText: string }
-type Story = StoryObj<StoryArgs>
-type OverridesStory = Omit<Story, 'argTypes'> & {
-  argTypes?: Record<string, any>
+type Story = StoryObj<typeof meta>
+
+export const 横並び: Story = {
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
 }
 
-export const 基本: OverridesStory = {
+export const 縦並び: Story = {
   args: {
-    slotText: '',
+    layout: 'vertical-split',
   },
-  argTypes: {
-    default: { table: { disable: true } },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
+}
+
+export const 横並び_逆順: Story = {
+  args: {
+    layout: 'horizontal-sprit',
+    reverse: true,
+  },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
+}
+
+export const オーバーレイ: Story = {
+  args: {
+    layout: 'overlay',
+    media: 'https://placehold.co/1200x600',
+  },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
+}
+
+export const オーバーレイ_中央揃え: Story = {
+  args: {
+    layout: 'overlay',
+    media: 'https://placehold.co/1200x600',
+    contentAlign: 'center',
+    contentVerticalAlign: 'center',
+    overlayColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
+}
+
+export const 横並び_右寄せ: Story = {
+  args: {
+    layout: 'horizontal-sprit',
+    contentAlign: 'right',
+    contentVerticalAlign: 'bottom',
+  },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
+}
+
+export const テキストのみ: Story = {
+  args: {
+    media: undefined,
+    layout: 'vertical-split',
+  },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: `
+      <rn-hero v-bind="args" />
+    `,
+  }),
+}
+
+
+export const フォントファミリー選択: Story = {
+  args: {
+    layout: 'horizontal-sprit',
+    media: 'https://placehold.co/800x600',
+    eyebrow: 'CUSTOM FONT',
+    title: 'Brand Font Title',
+    subtitle: 'モノスペースサブタイトル',
+    description: 'デフォルトフォントの説明文',
+    eyebrowFont: 'mono',
+    titleFont: 'key',
+    subtitleFont: 'mono',
+    descriptionFont: 'default',
   },
-  render: (args: StoryArgs) => ({
-    components: { 'rn-text': Text, 'rn-hero': Hero },
+  render: (args) => ({
+    components: { 'rn-hero': Hero },
     setup() {
       return { args }
     },
-    template: /* html */ `
-      <div>
-        <rn-hero  
-          :image-url="args.imageUrl"
-          :link-url="args.linkUrl">
-          {{ args.slotText }}
-        </rn-hero>
-      </div>
+    template: `
+      <rn-hero v-bind="args" />
     `,
   }),
 }

package/src/stories/Html.stories.ts

@@ -1,6 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj, Decorator } from '@storybook/vue3-vite'
+import { defineComponent, getCurrentInstance, h } from 'vue'
 
 import Html from '@/components/elements/Html.vue'
+import { createReniOneUI } from '@/utils'
+
+// グローバルコンポーネント登録用デコレーター
+const withReniUIDecorator: Decorator = (story) =>
+  defineComponent({
+    name: 'WithReniUIDecorator',
+    setup() {
+      const instance = getCurrentInstance()
+      if (instance) {
+        const reniUI = createReniOneUI()
+        instance.appContext.app.use(reniUI)
+      }
+      return () => h(story())
+    },
+  })
 
 const meta = {
   title: 'Elements/Html',
@@ -176,3 +192,55 @@ export const WithCustomAttributes: Story = {
     nl2br: false,
   },
 }
+
+export const カスタムコンポーネント: Story = {
+  args: {
+    content: `
+      <p>通常のHTMLテキストと</p>
+      <rn-button variant="fill" color="primary">ボタンコンポーネント</rn-button>
+      <p>が混在しています。</p>
+    `,
+  },
+  decorators: [withReniUIDecorator],
+}
+
+export const ネストしたコンポーネント: Story = {
+  args: {
+    content: `
+      <rn-stack direction="vertical" gap="md">
+        <rn-text size="subtitle" weight="bold">スタック内のヘッダー</rn-text>
+        <rn-card>
+          <rn-text size="body">カード内のテキスト</rn-text>
+          <rn-button variant="outlined" color="secondary">カード内のボタン</rn-button>
+        </rn-card>
+      </rn-stack>
+    `,
+  },
+  decorators: [withReniUIDecorator],
+}
+
+export const コンテンツ混在: Story = {
+  args: {
+    content: `
+      <div style="padding: 20px; background-color: #f5f5f5;">
+        <h2>製品情報</h2>
+        <p>こちらは<strong>新商品</strong>の紹介です。</p>
+
+        <rn-card>
+          <h3>特徴</h3>
+          <ul>
+            <li>高品質</li>
+            <li>低価格</li>
+            <li>豊富なバリエーション</li>
+          </ul>
+          <rn-button variant="fill" color="primary">購入する</rn-button>
+        </rn-card>
+
+        <p style="margin-top: 20px;">
+          詳細は<a href="#" style="color: blue;">こちら</a>をご覧ください。
+        </p>
+      </div>
+    `,
+  },
+  decorators: [withReniUIDecorator],
+}

package/src/stories/Icon.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Icon, { IconProps } from '@/components/elements/Icon.vue'
 import { LimitedSizeOptions, ColorOptions } from '@/constants'
 import { LimitedSize, Color } from '@/types'

package/src/stories/Image.stories.ts

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

package/src/stories/Label.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Label, { type LabelProps } from '@/components/elements/Label.vue'
+import Stack from '@/components/layouts/Stack.vue'
 
 const meta: Meta<typeof Label> = {
   title: 'Elements/Label',
@@ -8,16 +9,32 @@ const meta: Meta<typeof Label> = {
   argTypes: {
     color: {
       control: 'select',
-      options: ['warning', 'danger', 'success', 'info', 'default'],
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
     },
     size: {
       control: 'select',
       options: ['sm', 'md'],
     },
+    variant: {
+      control: 'select',
+      options: ['solid', 'filled', 'outline'],
+    },
   },
   args: {
     color: 'default',
     size: 'md',
+    variant: 'filled',
   },
 }
 
@@ -43,8 +60,9 @@ export const 基本: OverridesStory = {
     template: /* html */ `
       <div class='sb-canvas'>
         <rn-label
-          :color=args.color
-          :size=args.size
+          :color="args.color"
+          :size="args.size"
+          :variant="args.variant"
         >
           {{ args.slotText }}
         </rn-label>
@@ -52,3 +70,78 @@ export const 基本: OverridesStory = {
     `,
   }),
 }
+
+const allColors = [
+  'primary',
+  'secondary',
+  'warning',
+  'danger',
+  'success',
+  'info',
+  'default',
+  'subtle',
+  'muted',
+  'light',
+] as const
+
+export const カラー一覧: OverridesStory = {
+  render: () => ({
+    components: { 'rn-label': Label, 'rn-stack': Stack },
+    setup() {
+      return { allColors }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <h3>Solid</h3>
+        <rn-stack direction="horizontal" gap="sm" style="flex-wrap: wrap; margin-bottom: 24px;">
+          <rn-label
+            v-for="color in allColors"
+            :key="'solid-' + color"
+            :color="color"
+            variant="solid"
+          >
+            {{ color }}
+          </rn-label>
+        </rn-stack>
+
+        <h3>Filled</h3>
+        <rn-stack direction="horizontal" gap="sm" style="flex-wrap: wrap; margin-bottom: 24px;">
+          <rn-label
+            v-for="color in allColors"
+            :key="'filled-' + color"
+            :color="color"
+            variant="filled"
+          >
+            {{ color }}
+          </rn-label>
+        </rn-stack>
+
+        <h3>Outline</h3>
+        <rn-stack direction="horizontal" gap="sm" style="flex-wrap: wrap;">
+          <rn-label
+            v-for="color in allColors"
+            :key="'outline-' + color"
+            :color="color"
+            variant="outline"
+          >
+            {{ color }}
+          </rn-label>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const サイズ比較: OverridesStory = {
+  render: () => ({
+    components: { 'rn-label': Label, 'rn-stack': Stack },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="horizontal" gap="sm" vertical-align="center">
+          <rn-label size="sm" color="primary">sm</rn-label>
+          <rn-label size="md" color="primary">md</rn-label>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}