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

package/src/stories/Icon.stories.ts

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon, { IconProps } from '@/components/elements/Icon.vue'
+import { LimitedSizeOptions, ColorOptions } from '@/constants'
+import { LimitedSize, Color } from '@/types'
+
+const meta: Meta<typeof Icon> = {
+  title: 'Elements/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: 'text',
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(LimitedSizeOptions) as LimitedSize[],
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(ColorOptions) as Color[],
+    },
+  },
+  args: {
+    icon: 'circle-exclamation',
+    size: 'md',
+    color: 'default',
+  },
+}
+
+export default meta
+type StoryArgs = IconProps
+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-icon': Icon },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-icon
+          :icon=args.icon
+          :size=args.size
+          :color=args.color
+        >
+        </rn-icon>
+      </div>
+    `,
+  }),
+}
+
+export const 一覧: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-icon': Icon },
+    setup() {
+      // 利用可能な全てのアイコン名を定義（Icon.vueのlibraryに登録されている順序に合わせて）
+      const availableIcons = [
+        // Free Solid SVG Icons
+        'circle-exclamation',
+        'chevron-circle-down',
+        'info-circle',
+        'check',
+        'check-circle',
+        'times-circle',
+        'xmark',
+        'shopping-cart',
+        'chevron-left',
+        'chevron-right',
+        'chevron-up',
+        'chevron-down',
+        'bell',
+        'person-walking',
+        // Awesome.me Kit Regular Icons（farプレフィックス付き）
+        ['far', 'circle-plus'],
+        ['far', 'circle-minus'],
+        ['far', 'clock'],
+        ['far', 'circle-info'],
+        ['far', 'calendar'],
+        ['far', 'minus'],
+        ['far', 'hand-holding-box'],
+        ['far', 'circle-arrow-right'],
+        ['far', 'circle-arrow-left'],
+        ['far', 'circle-arrow-up'],
+        ['far', 'circle-arrow-down'],
+        ['far', 'arrow-right'],
+        ['far', 'arrow-left'],
+        ['far', 'arrow-up'],
+        ['far', 'arrow-down'],
+        ['far', 'calendar-lines'],
+        ['far', 'bars'],
+        ['far', 'cart-shopping'],
+        ['far', 'user'],
+        ['far', 'magnifying-glass'],
+        ['far', 'eye'],
+        ['far', 'eye-slash'],
+        ['far', 'trash'],
+        ['far', 'bag-shopping'],
+        ['far', 'pen-to-square'],
+        ['far', 'house-user'],
+        ['far', 'clipboard'],
+        ['far', 'gift'],
+        ['far', 'credit-card'],
+        ['far', 'truck'],
+        ['far', 'arrow-left-from-bracket'],
+        ['far', 'location-dot'],
+        ['far', 'plus'],
+        ['far', 'gifts'],
+        ['far', 'pen'],
+        ['far', 'ellipsis-vertical'],
+        ['far', 'star'],
+        // Awesome.me Kit Solid Icons（fasプレフィックス付き）
+        ['fas', 'circle-xmark'],
+        ['fas', 'triangle-exclamation'],
+        // Free Brands SVG Icons
+        ['fab', 'youtube'],
+        ['fab', 'x-twitter'],
+        ['fab', 'instagram'],
+        ['fab', 'tiktok'],
+        ['fab', 'facebook'],
+        ['fab', 'line'],
+        ['fab', 'pixiv'],
+        ['fab', 'twitch'],
+        ['fab', 'spotify'],
+        // Awesome.me Kit Custom Icons（fakプレフィックス付き）
+        ['fak', 'apple-music'],
+        ['fak', 'line-music'],
+        ['fak', 'nico-video'],
+      ]
+
+      return { args, availableIcons }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <h3 style='margin: 0 0 16px 0; font-size: 18px; font-weight: 600;'>利用可能なアイコン一覧（{{ availableIcons.length }}個）</h3>
+        <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; max-height: 600px; overflow-y: auto; padding: 8px; border: 1px solid #e1e5e9; border-radius: 4px; background: #fafbfc;'>
+          <div 
+            v-for='(iconName, index) in availableIcons' 
+            :key='index'
+            style='display: flex; flex-direction: column; align-items: center; padding: 12px 8px; background: white; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease;'
+            @mouseenter='(e) => e.target.style.transform = "translateY(-2px)"'
+            @mouseleave='(e) => e.target.style.transform = "translateY(0)"'
+          >
+            <rn-icon
+              :icon='iconName'
+              :size='args.size'
+              :color='args.color'
+              style='margin-bottom: 8px;'
+            />
+            <span style='font-size: 11px; color: #586069; text-align: center; word-break: break-word; line-height: 1.3;'>
+              {{ Array.isArray(iconName) ? iconName[1] : iconName }}
+            </span>
+          </div>
+        </div>
+        <p style='margin-top: 16px; font-size: 12px; color: #586069; line-height: 1.4;'>
+          ※ アイコンの指定方法:<br>
+          • Free Solid Icons: 文字列 例：'circle-exclamation'<br>
+          • Regular Icons: 配列 例：['far', 'circle-plus']<br>
+          • Brand Icons: 配列 例：['fab', 'youtube']<br>
+          • Custom Icons: 配列 例：['fak', 'apple-music']
+        </p>
+      </div>
+    `,
+  }),
+}