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

package/src/stories/List.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import List, { type ListProps } from '@/components/layouts/List.vue'
+import { Size } from '@/types'
+import { SizeOptions } from '@/constants'
+import Text from '@/components/elements/Text.vue'
+
+const meta: Meta<typeof List> = {
+  title: 'Layouts/List',
+  component: List,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Listコンポーネント',
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+    },
+    withDivider: {
+      control: 'boolean',
+    },
+    dense: {
+      control: 'boolean',
+    },
+    gap: {
+      control: 'select',
+      options: Object.keys(SizeOptions) as Size[],
+    },
+    contentInset: {
+      top: {
+        control: 'number',
+      },
+      bottom: {
+        control: 'number',
+      },
+      left: {
+        control: 'number',
+      },
+      right: {
+        control: 'number',
+      },
+    },
+    emptyText: {
+      control: 'text',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    items: [
+      {
+        name: 'name',
+      },
+      {
+        name: '111',
+      },
+      {
+        name: '222',
+      },
+    ],
+    withDivider: true,
+    dense: false,
+    gap: 'md',
+    contentInset: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    emptyText: 'empty',
+    loading: false,
+  },
+}
+export default meta
+
+type StoryArgs = ListProps
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, ListProps>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {},
+  render: (args) => ({
+    components: { 'rn-list': List, 'rn-text': Text },
+    setup() {
+      return { args }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-list
+          :items=args.items
+          :withDivider=args.withDivider
+          :dense=args.dense
+          :gap=args.gap
+          :contentInset=args.contentInset
+          :emptyText=args.emptyText
+          :loading=args.loading
+        >
+          <template #default="{ item }">
+            <rn-text>{{ item.name }}</rn-text>
+          </template>
+        </rn-list>
+      </div>
+    `,
+  }),
+}

package/src/stories/Modal.stories.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Modal, { ModalProps } from '@/components/interactive/Modal.vue'
+import Button from '@/components/elements/Button.vue'
+import Icon from '@/components/elements/Icon.vue'
+import './assets/css/style.css'
+import { ref } from 'vue'
+const meta: Meta<typeof Modal> = {
+  title: 'Interactive/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  argTypes: {
+    visible: { control: 'boolean' },
+    title: { control: 'text' },
+  },
+  args: {
+    visible: false,
+    title: 'モーダルタイトル',
+  },
+}
+
+export default meta
+type StoryArgs = ModalProps & {}
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+export const 基本: OverridesStory = {
+  args: {},
+  argTypes: {
+    visible: { control: { disable: true } },
+    header: { table: { disable: true } },
+    headerRightItem: { table: { disable: true } },
+    headerLeftItem: { table: { disable: true } },
+    body: { table: { disable: true } },
+    footer: { table: { disable: true } },
+  },
+  render: (args, {}) => ({
+    components: { 'rn-modal': Modal, 'rn-button': Button },
+    setup() {
+      const visible = ref(true)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+        <div style="height:560px" class='sb-canvas'>
+          <rn-button @click="handleVisible">モーダルを開く</rn-button>
+            <rn-modal
+              v-model:visible="visible"
+              :title=args.title
+            >
+              <template #body>
+                <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">
+                  <div class="RN-al-vertical RN-al-gap-xs RN-al-fill-width">
+                    <span class="RN-text--size-body">
+                    - 基本的な利用方法です。template #body中で自由にレイアウトができます。<br />
+                    <br />
+                    - オーバーレイとクローズアイコンをクリックすると閉じます。<br />
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </rn-modal>
+        </div>
+    `,
+  }),
+}
+
+export const 応用1: OverridesStory = {
+  args: {
+    title: '各スロットを利用したモーダル',
+  },
+  argTypes: {
+    visible: { control: { disable: true } },
+    header: { table: { disable: true } },
+    headerRightItem: { table: { disable: true } },
+    headerLeftItem: { table: { disable: true } },
+    body: { table: { disable: true } },
+    footer: { table: { disable: true } },
+  },
+  render: (args, {}) => ({
+    components: { 'rn-modal': Modal, 'rn-button': Button, 'rn-icon': Icon },
+    setup() {
+      const visible = ref(true)
+      const handleVisible = () => {
+        visible.value = !visible.value
+      }
+      return { args, visible, handleVisible }
+    },
+    template: /* html */ `
+        <div style="height:100vh" class='sb-canvas'>
+            <rn-button @click="handleVisible">モーダルを開く</rn-button>
+            <rn-modal
+              v-model:visible="visible"
+              :title=args.title
+            >
+              <template #headerLeftItem>
+                <rn-icon icon="arrow-left" @click="handleVisible" />
+              </template>
+              <template #headerRightItem>
+                <rn-icon icon="copy" />
+                <rn-icon icon="ellipsis" />
+              </template>
+              <template #body>
+                <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">
+                  <div class="RN-al-vertical RN-al-gap-xs RN-al-fill-width">
+                    <span class="RN-text--size-body">
+                    - 各種スロット例です。#headerLeftItem / #headerRightItem / #footer を利用した例です。他には#headerでヘッダー全体を差し替える事が出来ます。<br />
+                    </span>
+                  </div>
+                </div>
+              </template>
+              <template #footer>
+                <div class="RN-al-vertical RN-al-fill-width RN-al-gap-md">
+                  <rn-button @click="handleVisible" class="RN-al-fill-width">モーダルを閉じる</rn-button>
+                </div>
+              </template>
+            </rn-modal>
+        </div>
+    `,
+  }),
+}

package/src/stories/Notification.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Notification, {
+  NotificationProps,
+} from '@/components/interactive/Notification.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import Button from '@/components/elements/Button.vue'
+import useNotifications from '@/composable/useAppNotifications'
+import { StatusColor } from '@/types'
+
+const meta: Meta<typeof Notification> = {
+  title: 'Interactive/Notification',
+  component: Notification,
+  tags: ['autodocs'],
+  argTypes: {
+    notifications: { control: { disable: true } },
+    position: { control: { disable: true } },
+  },
+  args: {},
+}
+
+export default meta
+type StoryArgs = NotificationProps
+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-notification': Notification,
+      'rn-stack': Stack,
+      'rn-button': Button,
+    },
+    setup() {
+      const { notifications, addNotification, removeNotificationById } =
+        useNotifications()
+
+      const handleAddNotification = (_type: StatusColor) => {
+        addNotification({
+          message: `これは${_type}の通知です！`,
+          type: _type,
+        })
+      }
+      const handleRemoveNotification = (id: number) => {
+        removeNotificationById(id)
+      }
+
+      return {
+        args,
+        notifications,
+        handleAddNotification,
+        handleRemoveNotification,
+      }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+          <rn-stack
+            direction="vertical"
+            horizontal-re-size="fill"
+            vertical-re-size="fill"
+            horizontal-align="center"
+            vertical-align="center"
+          >
+            <rn-button style="width:200px" @click="handleAddNotification('default')">デフォルトを表示</rn-button>
+            <rn-button style="width:200px" color="success" @click="handleAddNotification('success')">サクセスを表示</rn-button>
+            <rn-button style="width:200px" color="danger" @click="handleAddNotification('danger')">デンジャーを表示</rn-button>
+            <rn-button style="width:200px" color="warning" @click="handleAddNotification('warning')">ワーニングを表示</rn-button>
+            <rn-button style="width:200px" color="info" @click="handleAddNotification('info')">インフォを表示</rn-button>
+          </rn-stack>
+          <rn-notification
+            :notifications="notifications"
+            @remove-notification="handleRemoveNotification"
+          ></rn-notification>
+      </div>
+    `,
+  }),
+}