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

package/src/stories/SnsLink.stories.ts

@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SnsLink, { SnsLinkProps } from '@/components/features/SnsLink.vue'
+import { ColorOptions, SNSOptions } from '@/constants'
+import { Color } from '@/types'
+
+const meta: Meta<typeof SnsLink> = {
+  title: 'Features/SnsLink',
+  component: SnsLink,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.keys(SNSOptions),
+    },
+    href: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(ColorOptions) as Color[],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    target: {
+      control: 'select',
+      options: ['_blank', '_self'],
+    },
+    variant: {
+      control: 'select',
+      options: ['icon', 'label'],
+    },
+  },
+  args: {
+    type: 'x-twitter',
+    href: '#',
+    color: 'default',
+    size: 'md',
+    target: '_blank',
+    variant: 'icon',
+  },
+}
+
+export default meta
+type StoryArgs = SnsLinkProps
+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-sns-link': SnsLink },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-sns-link
+          :type="args.type"
+          :href="args.href"
+          :color="args.color"
+          :size="args.size"
+          :target="args.target"
+          :variant="args.variant"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const アイコン一覧: OverridesStory = {
+  args: {
+    variant: 'icon',
+    size: 'lg',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-sns-link': SnsLink },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='display: flex; gap: 16px; align-items: center;'>
+        <rn-sns-link
+          type="x-twitter"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="youtube"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="instagram"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="tiktok"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="facebook"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="line"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="pixiv"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="twitch"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="spotify"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="nicovideo"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="music_line"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="music_apple"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const ラベル付き: OverridesStory = {
+  args: {
+    variant: 'label',
+    size: 'md',
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs) => ({
+    components: { 'rn-sns-link': SnsLink },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style='display: flex; flex-direction: column; gap: 12px;'>
+        <rn-sns-link
+          type="x-twitter"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="youtube"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="instagram"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="tiktok"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="facebook"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="line"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="pixiv"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="twitch"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="spotify"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="nicovideo"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="music_line"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+        <rn-sns-link
+          type="music_apple"
+          href="#"
+          :size="args.size"
+          :variant="args.variant"
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/SoldStacker.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SoldStacker, {
+  type SoldStackerProps,
+} from '@/components/features/SoldStacker.vue'
+import { StatusColorOptions } from '@/constants'
+import { StatusColor } from '@/types'
+
+const meta: Meta<typeof SoldStacker> = {
+  title: 'Features/SoldStacker',
+  component: SoldStacker,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'SoldStackerコンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: Object.keys(StatusColorOptions) as StatusColor[],
+    },
+    title: {
+      control: 'text',
+    },
+    variant: {
+      control: 'select',
+      options: ['label', 'overlay'],
+    },
+  },
+  args: {
+    color: 'default',
+    title: 'title',
+    variant: 'label',
+  },
+  render: (args) => ({
+    components: { 'rn-sold-stacker': SoldStacker },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <div style='width: 100px; height: 100px; background: #999; position: relative;'>
+          <rn-sold-stacker
+            :color=args.color
+            :title=args.title
+            :variant=args.variant
+          />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type StoryArgs = SoldStackerProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+}

package/src/stories/SpinButton.stories.ts

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SpinButton, {
+  type SpinButtonProps,
+} from '@/components/elements/SpinButton.vue'
+
+const meta: Meta<typeof SpinButton> = {
+  title: 'Elements/SpinButton',
+  component: SpinButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+    },
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    showDeleteAtMin: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    size: 'md',
+    min: 0,
+    max: 10,
+    disabled: false,
+    showDeleteAtMin: false,
+  },
+}
+
+export default meta
+type StoryArgs = SpinButtonProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {
+    modelValue: 1,
+  },
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args: StoryArgs & { modelValue: number }) => ({
+    components: { 'rn-spinButton': SpinButton },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-spinButton
+          v-model=args.modelValue
+          :size=args.size
+          :min=args.min
+          :max=args.max
+          :disabled=args.disabled
+          :showDeleteAtMin=args.showDeleteAtMin
+          @increment="() => console.log('increment')"
+          @decrement="() => console.log('decrement')"
+          @delete="() => console.log('delete')"
+          @input-change="(value) => console.log('input-change:', value)"
+        >
+        </rn-spinButton>
+      </div>
+    `,
+  }),
+}
+
+export const サイズバリエーション: OverridesStory = {
+  args: {
+    modelValue: 5,
+  },
+  render: (args: StoryArgs & { modelValue: number }) => ({
+    components: { 'rn-spinButton': SpinButton },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas' style="display: flex; gap: 20px; align-items: center;">
+        <div>
+          <p>Medium サイズ</p>
+          <rn-spinButton
+            v-model=args.modelValue
+            size="md"
+            :min=args.min
+            :max=args.max
+          />
+        </div>
+        <div>
+          <p>Large サイズ</p>
+          <rn-spinButton
+            v-model=args.modelValue
+            size="lg"
+            :min=args.min
+            :max=args.max
+          />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const 削除機能付き: OverridesStory = {
+  args: {
+    modelValue: 0,
+    showDeleteAtMin: true,
+  },
+  render: (args: StoryArgs & { modelValue: number }) => ({
+    components: { 'rn-spinButton': SpinButton },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <p>最小値 (0) の時にマイナスボタンがゴミ箱アイコンになります</p>
+        <rn-spinButton
+          v-model=args.modelValue
+          :size=args.size
+          :min=args.min
+          :max=args.max
+          :showDeleteAtMin=args.showDeleteAtMin
+          @delete="() => console.log('削除されました')"
+        />
+      </div>
+    `,
+  }),
+}

package/src/stories/Spinner.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Spinner, { SpinnerProps } from '@/components/elements/Spinner.vue'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Elements/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'warning',
+        'danger',
+        'success',
+        'info',
+        'default',
+        'subtle',
+        'muted',
+        'light',
+      ],
+    },
+  },
+  args: {
+    size: 'md',
+    color: 'default',
+  },
+}
+
+export default meta
+type StoryArgs = SpinnerProps
+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-spinner': Spinner },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+          <rn-spinner
+            :size=args.size
+            :color=args.color
+          />
+      </div>
+    `,
+  }),
+}

package/src/stories/Stack.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Stack from '@/components/layouts/Stack.vue'
+import './assets/css/style.css'
+const meta: Meta<typeof Stack> = {
+  title: 'Layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  argTypes: {
+    direction: { control: 'select', options: ['horizontal', 'vertical'] },
+    horizontalReSize: { control: 'select', options: ['hug', 'fill'] },
+    verticalReSize: { control: 'select', options: ['hug', 'fill'] },
+    horizontalAlign: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between'],
+    },
+    verticalAlign: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between'],
+    },
+    gap: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    columns: { control: 'number' },
+  },
+  args: {
+    direction: 'horizontal',
+    horizontalReSize: 'hug',
+    verticalReSize: 'hug',
+    horizontalAlign: 'start',
+    verticalAlign: 'start',
+    gap: 'md',
+    columns: 1,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+export const 基本: Story = {
+  args: {},
+  argTypes: {
+    default: { table: { disable: true } },
+  },
+  render: (args) => ({
+    components: { 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+        <div style="height:560px" class='sb-canvas'>
+          <rn-stack 
+              :direction=args.direction
+              :horizontal-re-size=args.horizontalReSize
+              :vertical-re-size=args.verticalReSize
+              :horizontal-align=args.horizontalAlign
+              :vertical-align=args.verticalAlign
+              :gap=args.gap
+              :columns=args.columns>
+              <rn-stack><div class="sb-dummy-element" /></rn-stack>
+              <rn-stack><div class="sb-dummy-element" /></rn-stack>
+              <rn-stack><div class="sb-dummy-element" /></rn-stack>
+          </rn-stack>
+        </div>
+    `,
+  }),
+}
+
+export const 応用: Story = {
+  args: {},
+  argTypes: {
+    direction: { table: { disable: true } },
+    horizontalReSize: { table: { disable: true } },
+    verticalReSize: { table: { disable: true } },
+    horizontalAlign: { table: { disable: true } },
+    verticalAlign: { table: { disable: true } },
+    gap: { table: { disable: true } },
+    columns: { table: { disable: true } },
+    default: { table: { disable: true } },
+  },
+  render: (args) => ({
+    components: { 'rn-stack': Stack },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+          <div style="height:560px" class='sb-canvas'>
+              <rn-stack horizontal-re-size="fill" vertical-re-size="fill" direction="vertical">
+                一部の要素を横幅いっぱいにする
+                <rn-stack horizontal-re-size="fill">
+                    <rn-stack><div class="sb-dummy-element" /></rn-stack>
+                    <rn-stack horizontal-re-size="fill"><div class="sb-dummy-element" /></rn-stack>
+                </rn-stack>
+                一部の要素を縦幅いっぱいにする
+                <rn-stack direction="vertical" horizontal-re-size="fill" vertical-re-size="fill">
+                    <rn-stack><div class="sb-dummy-element" /></rn-stack>
+                    <rn-stack vertical-re-size="fill"><div class="sb-dummy-element" /></rn-stack>
+                    <rn-stack><div class="sb-dummy-element" /></rn-stack>
+                </rn-stack>
+              </rn-stack>
+          </div>
+      `,
+  }),
+}

package/src/stories/Switch.stories.ts

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