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

package/src/stories/Gallery.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Gallery, { GalleryProps } from '@/components/interactive/Gallery.vue'
+import Stack from '@/components/layouts/Stack.vue'
+
+const meta: Meta<typeof Gallery> = {
+  title: 'Interactive/Gallery',
+  component: Gallery,
+  tags: ['autodocs'],
+  argTypes: {
+    showThumbs: { control: 'boolean' },
+    aspect: {
+      control: 'select',
+      options: [
+        'square',
+        'portrait',
+        'landscape',
+        'widescreen',
+        'widescreen-reverse',
+        'panorama',
+        'panorama-reverse',
+        'cinema',
+        'cinema-reverse',
+        'golden',
+        'golden-reverse',
+      ],
+    },
+  },
+  args: {
+    showThumbs: true,
+    delay: 3000,
+    aspect: 'square',
+    imageUrls: [
+      'https://auc-pctr.c.yimg.jp/i/auctions.c.yimg.jp/images.auctions.yahoo.co.jp/image/dr000/auc0308/users/625b657f04490ce1548d35633858e8b2399eb171/i-img853x1200-1659348029r2sb8j332226.jpg?pri=l&w=300&h=300&up=0&nf_src=sy&nf_path=images/auc/pc/top/image/1.0.3/na_170x170.png&nf_st=200',
+      'https://www.ell.co.jp/osu108/pic/pre-school.jpg',
+      'https://clubque.net/livereport/03report/img/pre-school5.jpg',
+    ],
+  },
+}
+
+export default meta
+type StoryArgs = GalleryProps
+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-gallery': Gallery, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack
+          direction="vertical"
+          horizontal-re-size="fill"
+          vertical-re-size="fill"
+          horizontal-align="center"
+          vertical-align="center"
+          >
+          <div style="width:320px">
+            <rn-gallery
+              :delay=args.delay
+              :aspect=args.aspect
+              :show-thumbs=args.showThumbs
+              :image-urls=args.imageUrls
+            />
+          </div>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/Grid.stories.ts

@@ -0,0 +1,357 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Grid, { type GridProps } from '@/components/layouts/Grid.vue'
+import Card from '@/components/layouts/Card.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Text from '@/components/elements/Text.vue'
+
+const meta: Meta<typeof Grid> = {
+  title: 'Layouts/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  argTypes: {
+    column: {
+      control: 'select',
+      options: [2, 3, 4, 5, 6, 7, 8],
+      description: '共通のカラム数',
+    },
+    pcColumn: {
+      control: 'select',
+      options: [2, 3, 4, 5, 6, 7, 8],
+      description: 'PC向けのカラム数',
+    },
+    spColumn: {
+      control: 'select',
+      options: [1, 2, 3],
+      description: 'スマートフォン向けのカラム数',
+    },
+    gap: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'アイテム間の間隔',
+    },
+  },
+  args: {
+    column: 2,
+    pcColumn: undefined,
+    spColumn: undefined,
+    gap: 'md',
+  },
+}
+
+export default meta
+type StoryArgs = GridProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    column: 3,
+    gap: 'md',
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-grid': Grid, 'rn-card': Card },
+    setup() {
+      const items = Array.from({ length: 6 }, (_, i) => ({
+        id: i + 1,
+        title: `アイテム ${i + 1}`,
+        content: `これは${i + 1}番目のグリッドアイテムです。`,
+      }))
+
+      return { args, items }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-grid 
+          :column="args.column"
+          :pc-column="args.pcColumn"
+          :sp-column="args.spColumn"
+          :gap="args.gap"
+        >
+          <rn-card 
+            v-for="item in items" 
+            :key="item.id" 
+            :title="item.title"
+            elevation
+          >
+            {{ item.content }}
+          </rn-card>
+        </rn-grid>
+      </div>
+    `,
+  }),
+}
+
+export const レスポンシブ: OverridesStory = {
+  args: {
+    pcColumn: 4,
+    spColumn: 2,
+    gap: 'md',
+  },
+  argTypes: {
+    column: { control: { disable: true } },
+    pcColumn: { control: { disable: true } },
+    spColumn: { control: { disable: true } },
+    gap: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-grid': Grid,
+      'rn-card': Card,
+      'rn-stack': Stack,
+      'rn-text': Text,
+    },
+    setup() {
+      const items = Array.from({ length: 8 }, (_, i) => ({
+        id: i + 1,
+        title: `商品 ${i + 1}`,
+        price: `¥${(i + 1) * 1000}`,
+        description: `商品${i + 1}の説明文です。`,
+      }))
+
+      return { args, items }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <div>
+            <h3>レスポンシブグリッド</h3>
+            <p>PC: 4カラム / スマートフォン: 2カラム</p>
+            <p>ブラウザのウィンドウサイズを変更して確認してください。</p>
+          </div>
+          
+          <rn-grid 
+            :pc-column="args.pcColumn"
+            :sp-column="args.spColumn"
+            :gap="args.gap"
+          >
+            <rn-card 
+              v-for="item in items" 
+              :key="item.id" 
+              :title="item.title"
+              elevation
+            >
+              <rn-stack direction="vertical" gap="xs">
+                <rn-text size="lg" weight="bold" color="primary">
+                  {{ item.price }}
+                </rn-text>
+                <rn-text size="sm" color="subtle">
+                  {{ item.description }}
+                </rn-text>
+              </rn-stack>
+            </rn-card>
+          </rn-grid>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 異なるカラム数: OverridesStory = {
+  args: {},
+  argTypes: {
+    column: { control: { disable: true } },
+    pcColumn: { control: { disable: true } },
+    spColumn: { control: { disable: true } },
+    gap: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-grid': Grid, 'rn-card': Card, 'rn-stack': Stack },
+    setup() {
+      const createItems = (count: number) =>
+        Array.from({ length: count }, (_, i) => ({
+          id: i + 1,
+          title: `Item ${i + 1}`,
+        }))
+
+      return { args, createItems }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="xl">
+          <rn-stack direction="vertical" gap="md">
+            <h4>2カラム</h4>
+            <rn-grid column="2" gap="sm">
+              <rn-card 
+                v-for="item in createItems(4)" 
+                :key="item.id" 
+                :title="item.title"
+                elevation
+              >
+                2カラムのアイテム
+              </rn-card>
+            </rn-grid>
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="md">
+            <h4>3カラム</h4>
+            <rn-grid column="3" gap="md">
+              <rn-card 
+                v-for="item in createItems(6)" 
+                :key="item.id" 
+                :title="item.title"
+                elevation
+              >
+                3カラムのアイテム
+              </rn-card>
+            </rn-grid>
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="md">
+            <h4>4カラム</h4>
+            <rn-grid column="4" gap="lg">
+              <rn-card 
+                v-for="item in createItems(8)" 
+                :key="item.id" 
+                :title="item.title"
+                elevation
+              >
+                4カラムのアイテム
+              </rn-card>
+            </rn-grid>
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 間隔の比較: OverridesStory = {
+  args: {},
+  argTypes: {
+    column: { control: { disable: true } },
+    pcColumn: { control: { disable: true } },
+    spColumn: { control: { disable: true } },
+    gap: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-grid': Grid, 'rn-card': Card, 'rn-stack': Stack },
+    setup() {
+      const items = Array.from({ length: 6 }, (_, i) => ({
+        id: i + 1,
+        title: `Item ${i + 1}`,
+      }))
+
+      return { args, items }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="xl">
+          <rn-stack direction="vertical" gap="md">
+            <h4>Gap: Small</h4>
+            <rn-grid column="3" gap="sm">
+              <rn-card 
+                v-for="item in items" 
+                :key="'sm-' + item.id" 
+                :title="item.title"
+                elevation
+              >
+                小さい間隔
+              </rn-card>
+            </rn-grid>
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="md">
+            <h4>Gap: Medium</h4>
+            <rn-grid column="3" gap="md">
+              <rn-card 
+                v-for="item in items" 
+                :key="'md-' + item.id" 
+                :title="item.title"
+                elevation
+              >
+                中間の間隔
+              </rn-card>
+            </rn-grid>
+          </rn-stack>
+          
+          <rn-stack direction="vertical" gap="md">
+            <h4>Gap: Large</h4>
+            <rn-grid column="3" gap="lg">
+              <rn-card 
+                v-for="item in items" 
+                :key="'lg-' + item.id" 
+                :title="item.title"
+                elevation
+              >
+                大きい間隔
+              </rn-card>
+            </rn-grid>
+          </rn-stack>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}
+
+export const 不均等なコンテンツ: OverridesStory = {
+  args: {
+    column: 3,
+    gap: 'md',
+  },
+  argTypes: {
+    column: { control: { disable: true } },
+    gap: { control: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-grid': Grid,
+      'rn-card': Card,
+      'rn-stack': Stack,
+      'rn-text': Text,
+    },
+    setup() {
+      const items = [
+        { id: 1, title: '短いタイトル', content: '短いコンテンツ' },
+        {
+          id: 2,
+          title: 'とても長いタイトルのカード',
+          content:
+            'これは非常に長いコンテンツの例です。複数行にわたって表示される可能性があります。グリッドレイアウトでは、各アイテムの高さが異なっていても適切に配置されます。',
+        },
+        { id: 3, title: '中程度', content: '中程度の長さのコンテンツです。' },
+        {
+          id: 4,
+          title: 'リスト形式',
+          content: '• 項目1\n• 項目2\n• 項目3\n• 項目4',
+        },
+        { id: 5, title: '短い', content: 'コンパクト' },
+        {
+          id: 6,
+          title: '詳細情報カード',
+          content:
+            'このカードには詳細な情報が含まれています。グリッドシステムは、コンテンツの高さが異なっても美しくレイアウトを保持します。',
+        },
+      ]
+
+      return { args, items }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-stack direction="vertical" gap="lg">
+          <div>
+            <h3>不均等なコンテンツのグリッド</h3>
+            <p>各カードの高さが異なってもレイアウトが適切に保たれます。</p>
+          </div>
+          
+          <rn-grid 
+            :column="args.column"
+            :gap="args.gap"
+          >
+            <rn-card 
+              v-for="item in items" 
+              :key="item.id" 
+              :title="item.title"
+              elevation
+            >
+              <rn-text size="sm" :style="{ whiteSpace: 'pre-line' }">
+                {{ item.content }}
+              </rn-text>
+            </rn-card>
+          </rn-grid>
+        </rn-stack>
+      </div>
+    `,
+  }),
+}

package/src/stories/Hero.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Hero, { HeroProps } from '@/components/features/Hero.vue'
+
+const meta: Meta<typeof Hero> = {
+  title: 'Features/Hero',
+  component: Hero,
+  tags: ['autodocs'],
+  argTypes: {
+    imageUrl: {
+      control: 'text',
+    },
+    linkUrl: {
+      control: 'text',
+    },
+  },
+  args: {
+    imageUrl:
+      'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+    linkUrl: 'https://official-goods-store.jp/naoto/',
+  },
+}
+
+export default meta
+type StoryArgs = HeroProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: '',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-text': Text, 'rn-hero': Hero },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div>
+        <rn-hero  
+          :image-url="args.imageUrl"
+          :link-url="args.linkUrl">
+          {{ args.slotText }}
+        </rn-hero>
+      </div>
+    `,
+  }),
+}

package/src/stories/Html.stories.ts

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import Html from '@/components/elements/Html.vue'
+
+const meta = {
+  title: 'Elements/Html',
+  component: Html,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    nl2br: {
+      control: { type: 'boolean' },
+    },
+    removeEmpty: {
+      control: { type: 'boolean' },
+    },
+    forbiddenTags: {
+      control: { type: 'object' },
+      description: '禁止するHTMLタグの配列',
+    },
+    allowedAttributes: {
+      control: { type: 'object' },
+      description: '許可する属性の配列',
+    },
+  },
+} satisfies Meta<typeof Html>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    content: '<p>これは<strong>安全なHTML</strong>コンテンツです。</p>',
+    nl2br: false,
+  },
+}
+
+export const WithNewlines: Story = {
+  args: {
+    content: 'これは改行のある\nテキストです。\n\nもう一つの段落です。',
+    nl2br: true,
+  },
+}
+
+export const WithHtmlTags: Story = {
+  args: {
+    content: `
+      <p>これは<strong>強調された</strong>テキストです。</p>
+      <p><em>斜体</em>のテキストもあります。</p>
+      <ul>
+        <li>リストアイテム1</li>
+        <li>リストアイテム2</li>
+        <li>リストアイテム3</li>
+      </ul>
+      <p><a href="https://example.com">リンク</a>も含まれています。</p>
+      <blockquote>引用文も表示されます</blockquote>
+      <h2>見出しも使用可能</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>ヘッダー1</th>
+            <th>ヘッダー2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>データ1</td>
+            <td>データ2</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    nl2br: false,
+  },
+}
+
+export const UnsafeContent: Story = {
+  args: {
+    content: `
+      <p>これは安全なコンテンツです。</p>
+      <script>alert('この危険なスクリプトは削除されます')</script>
+      <p onclick="alert('これも削除されます')">クリックイベントは削除されます</p>
+      <img src="x" onerror="alert('onエラーイベントも削除')" />
+      <object>このobjectタグも削除されます</object>
+      <form><input type="text" />フォーム要素も削除されます</form>
+    `,
+    nl2br: false,
+  },
+}
+
+export const HtmlEntityDecoding: Story = {
+  args: {
+    content:
+      '&lt;p&gt;HTMLエンティティは&amp;nbsp;正しく&amp;lt;デコード&amp;gt;されます&lt;/p&gt;',
+    nl2br: false,
+  },
+}
+
+export const MixedContentWithNewlines: Story = {
+  args: {
+    content: `これは<strong>HTMLタグ</strong>と
+改行が
+混在した
+コンテンツです。
+
+<p>段落タグもあります。</p>`,
+    nl2br: true,
+  },
+}
+
+export const CustomForbiddenTags: Story = {
+  args: {
+    content: `
+      <p>通常は許可されるタグです</p>
+      <div>divタグは禁止されているので削除されます</div>
+      <span>spanタグも禁止されているので削除されます</span>
+      <strong>strongタグは許可されています</strong>
+      <em>emタグも許可されています</em>
+      <ul>
+        <li>リストも許可されています</li>
+      </ul>
+    `,
+    forbiddenTags: ['div', 'span'],
+    nl2br: false,
+  },
+}
+
+export const StrictMode: Story = {
+  args: {
+    content: `
+      <p>基本的なテキストのみ許可</p>
+      <strong>強調も削除されます</strong>
+      <em>斜体も削除されます</em>
+      <a href="https://example.com">リンクも削除されます</a>
+      <ul><li>リストも削除されます</li></ul>
+      <img src="image.jpg" alt="画像も削除されます" />
+    `,
+    forbiddenTags: [
+      'strong',
+      'em',
+      'a',
+      'ul',
+      'ol',
+      'li',
+      'img',
+      'table',
+      'thead',
+      'tbody',
+      'tr',
+      'td',
+      'th',
+    ],
+    nl2br: false,
+  },
+}
+
+export const WithCustomAttributes: Story = {
+  args: {
+    content: `
+      <p class="custom-class" style="color: blue;">クラスとスタイルは許可されます</p>
+      <a href="https://example.com" target="_blank" title="リンクタイトル">属性付きリンク</a>
+      <img src="image.jpg" alt="画像" title="画像タイトル" width="100" />
+      <p data-custom="この属性は削除されます" onclick="alert('削除されます')">カスタム属性とイベントハンドラー</p>
+    `,
+    allowedAttributes: [
+      'href',
+      'style',
+      'target',
+      'class',
+      'src',
+      'alt',
+      'title',
+    ],
+    nl2br: false,
+  },
+}