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

.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

@@ -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,68 @@
+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",
+  },
+
+  render: (args) => ({
+    components: { BaseButton },
+
+    setup() {
+      return { args };
+    },
+
+    template: '<BaseButton v-bind="args" />',
+  }),
+};
+
+export const Primary: Story = {
+  args: {
+    label: "Primary",
+    variant: "primary",
+    icon: "settings",
+  },
+
+  render: (args) => ({
+    components: {
+      BaseButton,
+    },
+
+    setup() {
+      return { args };
+    },
+
+    template: '<BaseButton v-bind="args" />',
+  }),
+};
+
+export const Danger: Story = {
+  args: {
+    label: "Danger",
+    variant: "danger",
+    icon: "settings",
+  },
+
+  render: (args) => ({
+    components: {
+      BaseButton,
+    },
+
+    setup() {
+      return { args };
+    },
+
+    template: '<BaseButton v-bind="args" />',
+  }),
+};

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,41 @@
+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 = {
+  render: (args) => ({
+    components: { BaseListItem },
+    setup() {
+      return { args };
+    },
+    template: '<BaseListItem v-bind="args">ListItem</BaseListItem>',
+  }),
+  args: {
+    selected: false,
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    selected: true,
+  },
+
+  render: (args) => ({
+    components: {
+      BaseListItem,
+    },
+
+    setup() {
+      return { args };
+    },
+
+    template: '<BaseListItem v-bind="args">ListItem</BaseListItem>',
+  }),
+};

src/components/Base/BaseRowCard.stories.ts

@@ -0,0 +1,27 @@
+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 = {
+  render: (args) => ({
+    components: { BaseRowCard, BaseButton },
+    setup() {
+      return { args };
+    },
+    template:
+      '<BaseRowCard v-bind="args"><BaseButton label="RightControl" /></BaseRowCard>',
+  }),
+  args: {
+    title: "Title",
+    description: "Description",
+  },
+};

src/components/Base/BaseScrollArea.stories.ts

@@ -0,0 +1,24 @@
+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>',
+  }),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
+};

src/components/Base/BaseSwitch.stories.ts

@@ -0,0 +1,48 @@
+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,
+  },
+
+  render: (args) => ({
+    components: { BaseSwitch },
+
+    setup() {
+      return { args };
+    },
+
+    template: '<BaseSwitch v-bind="args" />',
+  }),
+};
+
+export const Checked: Story = {
+  args: {
+    uncheckedLabel: "Off",
+    checkedLabel: "On",
+    checked: true,
+  },
+
+  render: (args) => ({
+    components: {
+      BaseSwitch,
+    },
+
+    setup() {
+      return { args };
+    },
+
+    template: '<BaseSwitch v-bind="args" />',
+  }),
+};