BaseコンポーネントのStorybookファイルを作成 (#2227)

* storybook/addon-themesを導入

* Baseコンポーネントのstorybookファイルを追加

* 文字色を付与

* onLabel/offLabelをcheckedLabel/uncheckedLabelに改名

* lintを適用

* typecheckエラーを修正

* test-storybookのtimeoutを倍の時間に変更

* 冗長な記述を削除

* clickableのStoryを追加

* test-storybookのtimeoutを更に倍に変更

.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/vue3-vite",

.storybook/preview.ts

@@ -1,6 +1,7 @@
 import { setup, Preview } from "@storybook/vue3";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { addActionsWithEmits } from "./utils/argTypesEnhancers";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
@@ -33,7 +34,34 @@ const preview: Preview = {
     docs: {
       toc: true,
     },
+    backgrounds: {
+      default: "theme",
+      values: [
+        {
+          name: "theme",
+          value: "var(--color-v2-background)",
+        },
+        {
+          name: "light",
+          value: "#fff",
+        },
+        {
+          name: "dark",
+          value: "#333",
+        },
+      ],
+    },
   },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "false",
+        dark: "true",
+      },
+      defaultTheme: "light",
+      attributeName: "is-dark-theme",
+    }),
+  ],
   argTypesEnhancers: [addActionsWithEmits],
 };
 

package.json

@@ -15,8 +15,8 @@
   "scripts": {
     "test:unit": "vitest --run",
     "test-watch:unit": "vitest --watch",
-    "test:storybook": "test-storybook",
-    "test-watch:storybook": "test-storybook --watch",
+    "test:storybook": "test-storybook --testTimeout=60000",
+    "test-watch:storybook": "test-storybook --watch --testTimeout=60000",
     "test:electron-e2e": "cross-env VITE_TARGET=electron playwright test",
     "test-watch:electron-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=electron playwright test",
     "test:browser-e2e": "cross-env VITE_TARGET=browser playwright test",
@@ -77,6 +77,7 @@
     "@storybook/addon-essentials": "8.1.10",
     "@storybook/addon-interactions": "8.1.10",
     "@storybook/addon-links": "8.1.10",
+    "@storybook/addon-themes": "8.1.10",
     "@storybook/blocks": "8.1.10",
     "@storybook/test": "8.1.10",
     "@storybook/test-runner": "0.19.0",

src/components/Base/BaseButton.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseButton from "./BaseButton.vue";
+
+const meta: Meta<typeof BaseButton> = {
+  component: BaseButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    variant: "default",
+    icon: "settings",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    label: "Primary",
+    variant: "primary",
+    icon: "settings",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    label: "Danger",
+    variant: "danger",
+    icon: "settings",
+  },
+};

src/components/Base/BaseDocumentView.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseDocumentView from "./BaseDocumentView.vue";
+
+const meta: Meta<typeof BaseDocumentView> = {
+  component: BaseDocumentView,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseDocumentView>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseDocumentView },
+
+    setup() {
+      return { args };
+    },
+
+    template: `
+      <BaseDocumentView>
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+        <p>ParagraphParagraph<a href="#">Link</a>ParagraphParagraph<code>code</code>ParagraphParagraph</p>
+        <ul>
+          <li>List</li>
+          <li>List</li>
+          <li>List</li>
+        </ul>
+        <ol>
+          <li>List</li>
+          <li>List</li>
+          <li>List</li>
+        </ol>
+        <pre>pre</pre>
+        <details>
+        <summary>summary</summary>
+        <p>Details</p>
+        </details>
+        <table>
+          <thead>
+            <tr>
+              <th>Table Header</th>
+              <th>Table Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+          </tbody>
+        </table>
+      </BaseDocumentView>`,
+  }),
+};

src/components/Base/BaseDocumentView.vue

@@ -10,6 +10,8 @@
 @use "@/styles/v2/colors" as colors;
 
 .document {
+  color: colors.$display;
+
   :deep(*) {
     margin: 0;
   }

src/components/Base/BaseListItem.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseListItem from "./BaseListItem.vue";
+
+const meta: Meta<typeof BaseListItem> = {
+  component: BaseListItem,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseListItem>;
+
+export const Default: Story = {
+  args: {
+    selected: false,
+  },
+  render: (args) => ({
+    components: { BaseListItem },
+    setup() {
+      return { args };
+    },
+    template: '<BaseListItem v-bind="args">ListItem</BaseListItem>',
+  }),
+};
+
+export const Selected: Story = {
+  ...Default,
+  args: {
+    selected: true,
+  },
+};

src/components/Base/BaseRowCard.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseRowCard from "./BaseRowCard.vue";
+
+import BaseButton from "./BaseButton.vue";
+
+const meta: Meta<typeof BaseRowCard> = {
+  component: BaseRowCard,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseRowCard>;
+
+export const Default: Story = {
+  args: {
+    title: "Title",
+    description: "Description",
+    clickable: false,
+  },
+  render: (args) => ({
+    components: { BaseRowCard, BaseButton },
+    setup() {
+      return { args };
+    },
+    template:
+      '<BaseRowCard v-bind="args"><BaseButton label="RightControl" /></BaseRowCard>',
+  }),
+};
+
+export const Clickable: Story = {
+  ...Default,
+  args: {
+    title: "Title",
+    description: "Description",
+    clickable: true,
+  },
+};

src/components/Base/BaseScrollArea.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseScrollArea from "./BaseScrollArea.vue";
+
+const meta: Meta<typeof BaseScrollArea> = {
+  component: BaseScrollArea,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseScrollArea>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseScrollArea },
+    setup() {
+      return { args };
+    },
+    template:
+      '<BaseScrollArea style="width: 100%; height:480px" v-bind="args"><div style="width: 100%; height:4800px;"></div></BaseScrollArea>',
+  }),
+};

src/components/Base/BaseSwitch.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseSwitch from "./BaseSwitch.vue";
+
+const meta: Meta<typeof BaseSwitch> = {
+  component: BaseSwitch,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseSwitch>;
+
+export const Unchecked: Story = {
+  args: {
+    uncheckedLabel: "Off",
+    checkedLabel: "On",
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    uncheckedLabel: "Off",
+    checkedLabel: "On",
+    checked: true,
+  },
+};

src/components/Base/BaseSwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="root">
-    <div class="label">{{ checked ? onLabel : offLabel }}</div>
+    <div class="label">{{ checked ? checkedLabel : uncheckedLabel }}</div>
     <SwitchRoot :id v-model:checked="checked" class="SwitchRoot">
       <SwitchThumb class="SwitchThumb" />
     </SwitchRoot>
@@ -12,8 +12,8 @@ import { SwitchRoot, SwitchThumb } from "radix-vue";
 
 defineProps<{
   id?: string;
-  offLabel?: string;
-  onLabel?: string;
+  uncheckedLabel?: string;
+  checkedLabel?: string;
 }>();
 
 const checked = defineModel<boolean>("checked", { required: true });

src/components/Dialog/ToolBarCustomDialog.vue

@@ -87,8 +87,8 @@
                   >
                     <BaseSwitch
                       :checked="toolbarButtons.includes(key)"
-                      onLabel="表示する"
-                      offLabel="表示しない"
+                      checkedLabel="表示する"
+                      uncheckedLabel="表示しない"
                     />
                   </BaseRowCard>
                 </div>