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

package/src/stories/Button.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button, { ButtonProps } from '@/components/elements/Button.vue'
+import Stack from '@/components/layouts/Stack.vue'
+
+const meta: Meta<typeof Button> = {
+  title: 'Elements/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['text', 'fill'] },
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+    },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    variant: 'fill',
+    size: 'md',
+    color: 'default',
+    loading: false,
+    disabled: false,
+  },
+}
+
+export default meta
+type StoryArgs = ButtonProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: 'Button',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-button': Button },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+          <rn-button
+            :variant=args.variant
+            :size=args.size
+            :color=args.color
+            :loading=args.loading
+            :disabled=args.disabled
+          >{{args.slotText}}</rn-button>
+      </div>
+    `,
+  }),
+}
+
+export const 応用: OverridesStory = {
+  args: {
+    slotText: 'Button',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-button': Button, 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+          <rn-button
+            :variant=args.variant
+            :size=args.size
+            :color=args.color
+            :loading=args.loading
+            :disabled=args.disabled
+          >
+          <rn-stack gap="xs">
+            <rn-stack>I</rn-stack>
+            <rn-stack>Text</rn-stack>
+          </rn-stack>
+        </rn-button>
+      </div>
+    `,
+  }),
+}

package/src/stories/Card.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Card, { CardProps } from '@/components/layouts/Card.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Button from '@/components/elements/Button.vue'
+import Icon from '@/components/elements/Icon.vue'
+import Text from '@/components/elements/Text.vue'
+import './assets/css/style.css'
+import { ref } from 'vue'
+const meta: Meta<typeof Card> = {
+  title: 'Layouts/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    elevation: { control: 'boolean' },
+    dense: { control: 'boolean' },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+    },
+    variant: { control: 'select', options: ['outlined', 'tonal'] },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    title: 'カードタイトル',
+    elevation: true,
+    dense: false,
+    color: undefined,
+    variant: 'outlined',
+    disabled: false,
+  },
+}
+
+export default meta
+type StoryArgs = CardProps & {}
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+    header: { table: { disable: true } },
+    headerAction: { table: { disable: true } },
+    footer: { table: { disable: true } },
+  },
+  render: (args, {}) => ({
+    components: { 'rn-card': Card, 'rn-button': Button, 'rn-stack': Stack },
+    setup() {
+      const visible = ref(true)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+        <div class='sb-canvas'>
+          <rn-stack
+              direction="vertical"
+              horizontal-re-size="fill"
+              vertical-re-size="fill"
+            >               
+            <rn-card :elevation="args.elevation" :title="args.title" :dense="args.dense" :color="args.color" :variant="args.variant" :disabled="args.disabled">
+              主にページ内で独立して認識できるコンテンツ間のセクショニングに使用できます。
+            </rn-card>
+            <rn-card :elevation="args.elevation" :dense="args.dense" :color="args.color" :variant="args.variant" :disabled="args.disabled">
+              このようにタイトルがなければただのパネルとして使用できます。
+            </rn-card>          
+          </rn-stack>        
+        </div>
+    `,
+  }),
+}
+
+export const 応用1: OverridesStory = {
+  args: {
+    title: 'スロットを使用したカード',
+    elevation: true,
+  },
+  argTypes: {
+    title: { control: { disable: true } },
+    elevation: { control: { disable: true } },
+    default: { table: { disable: true } },
+    header: { table: { disable: true } },
+    headerAction: { table: { disable: true } },
+    footer: { table: { disable: true } },
+  },
+  render: (args, {}) => ({
+    components: {
+      'rn-card': Card,
+      'rn-stack': Stack,
+      'rn-icon': Icon,
+      'rn-text': Text,
+    },
+    setup() {
+      const visible = ref(true)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+        <div class='sb-canvas'>
+          <rn-stack
+            direction="vertical"
+            horizontal-re-size="fill"
+            vertical-re-size="fill"
+          >          
+            <rn-card :elevation="args.elevation" :title="args.title">
+              よく使うパターンとして、スロットを使用してヘッダー、ヘッダーアクションをカスタマイズすることができます。この例はheaderActionスロットを使用しています。
+              <template #headerAction>
+                <rn-icon icon="ellipsis" />
+                <rn-icon icon="arrow-up-from-bracket" />
+              </template>
+            </rn-card>      
+            <rn-card :elevation="args.elevation" :title="args.title">
+              よく使うパターンとして、スロットを使用してヘッダー、ヘッダーアクションをカスタマイズすることができます。この例はheaderスロットを使用しています。
+              <template #header>
+                <rn-stack direction="horizontal" horizontal-re-size="fill" horizontal-align="between">
+                  <rn-stack direction="vertical" gap="xs">
+                    <rn-stack gap="sm" vertical-align="center">
+                      <rn-icon color="subtle" size="sm" icon="tag" />
+                      <rn-text :size="body" :color="subtle" :weight="normal">Category</rn-text>
+                    </rn-stack>
+                    <rn-stack>
+                      <rn-text size="title" weight="bold">This is Title</rn-text>
+                    </rn-stack>
+                  </rn-stack>              
+                  <rn-stack direction="vertical">
+                    <rn-icon icon="ellipsis" />
+                  </rn-stack>              
+                </rn-stack>              
+              </template>
+            </rn-card>    
+          </rn-stack>                    
+        </div>
+    `,
+  }),
+}

package/src/stories/Carousel.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Carousel from '@/components/interactive/Carousel.vue'
+import CarouselItem from '@/components/interactive/CarouselItem.vue'
+
+const meta: Meta<typeof Carousel> = {
+  title: 'Interactive/Carousel',
+  component: Carousel,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Carousel>
+
+export const 基本: Story = {
+  render: () => ({
+    components: {
+      'rn-carousel': Carousel,
+      'rn-carousel-item': CarouselItem,
+    },
+    setup() {
+      console.log('Carousel story setup called')
+      return {}
+    },
+    template: `
+      <div style="padding: 20px; width: 100%; height: 600px;">
+        <h3>カルーセルテスト</h3>
+        <rn-carousel 
+          :slides-per-view="1.2"
+          :sp-slides-per-view="1.2"
+          :pc-slides-per-view="1.2"
+          background="transparent"
+        >
+          <rn-carousel-item>
+            <div style="width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; border-radius: 8px;">
+              <img src="https://placehold.jp/700x400.png" />
+            </div>
+          </rn-carousel-item>
+          <rn-carousel-item>
+            <div style="width: 100%; height: 200px;  display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; border-radius: 8px;">
+              <img src="https://placehold.jp/700x400.png" />
+            </div>
+          </rn-carousel-item>
+          <rn-carousel-item>
+            <div style="width: 100%; height: 200px;  display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; border-radius: 8px;">
+              <img src="https://placehold.jp/700x400.png" />
+            </div>
+          </rn-carousel-item>
+          <rn-carousel-item>
+            <div style="width: 100%; height: 200px;  display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; border-radius: 8px;">
+              <img src="https://placehold.jp/700x400.png" />
+            </div>
+          </rn-carousel-item>
+          <rn-carousel-item>
+            <div style="width: 100%; height: 200px;  display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; border-radius: 8px;">
+              <img src="https://placehold.jp/700x400.png" />
+            </div>
+          </rn-carousel-item>
+        </rn-carousel>
+      </div>
+    `,
+  }),
+}

package/src/stories/CarouselBanner.stories.ts

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CarouselBanner, {
+  type CarouselBannerProps,
+} from '@/components/features/CarouselBanner.vue'
+
+const meta: Meta<typeof CarouselBanner> = {
+  title: 'Features/CarouselBanner',
+  component: CarouselBanner,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'カルーセル用コンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'overlay'],
+    },
+    banners: [
+      {
+        title: {
+          control: 'text',
+        },
+        description: {
+          control: 'text',
+        },
+        imageUrl: {
+          control: 'text',
+        },
+        linkUrl: {
+          control: 'text',
+        },
+      },
+    ],
+  },
+  args: {
+    variant: 'default',
+    banners: [
+      {
+        title: 'title1',
+        description: 'description',
+        imageUrl:
+          'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+        linkUrl: '',
+      },
+      {
+        title: 'title2',
+        description: 'description',
+        imageUrl:
+          'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+        linkUrl: '',
+      },
+      {
+        title: 'title3',
+        description: 'description',
+        imageUrl:
+          'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+        linkUrl: '',
+      },
+      {
+        title: 'title4',
+        description: 'description',
+        imageUrl:
+          'https://reni-ec-pro.s3-ap-northeast-1.amazonaws.com/banner/63/d1270251298665d51cf9f298a3343257dd4559e4_sp.jpg',
+        linkUrl: '',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { 'rn-carousel-banner': CarouselBanner },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-carousel-banner
+          :variant=args.variant
+          :banners=args.banners
+        >
+        </rn-carousel-banner>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = CarouselBannerProps & { slotText: string }
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    slotText: 'CarouselBanner',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}

package/src/stories/CheckBox.stories.ts

@@ -0,0 +1,76 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CheckBox, {
+  type CheckBoxProps,
+} from '@/components/elements/CheckBox.vue'
+import { StatusColorOptions } from '@/constants'
+import { StatusColor } from '@/types'
+
+const meta: Meta<typeof CheckBox> = {
+  title: 'Elements/CheckBox',
+  component: CheckBox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'チェックボックス用コンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(StatusColorOptions) as StatusColor[],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    label: '',
+    color: 'info',
+    disabled: false,
+  },
+}
+
+export default meta
+type StoryArgs = CheckBoxProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, CheckBoxProps>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args) => ({
+    components: { 'rn-checkbox': CheckBox },
+    setup() {
+      const selectedValues = ref<boolean[]>([])
+      return { args, selectedValues }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-checkbox
+          label="dog"
+          :color=args.color
+          :disabled=args.disabled
+          v-model=selectedValues
+        />
+        <rn-checkbox
+          style='margin-top: 4px;'
+          label="cat"
+          :color=args.color
+          :disabled=args.disabled
+          v-model=selectedValues
+        />
+        <p style='margin-top: 24px;'>
+          選択中：{{ selectedValues.join(' ') }}
+        </p>
+      </div>
+    `,
+  }),
+}