From 7aa6e8681ab9c1786903e1393b43c7ea532207d4 Mon Sep 17 00:00:00 2001 From: Takusea <53995265+takusea@users.noreply.github.com> Date: Thu, 22 Aug 2024 01:51:29 +0900 Subject: [PATCH] =?UTF-8?q?Base=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AEStorybook=E3=83=95=E3=82=A1?= =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=82=92=E4=BD=9C=E6=88=90=20(#2227)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * storybook/addon-themesを導入 * Baseコンポーネントのstorybookファイルを追加 * 文字色を付与 * onLabel/offLabelをcheckedLabel/uncheckedLabelに改名 * lintを適用 * typecheckエラーを修正 * test-storybookのtimeoutを倍の時間に変更 * 冗長な記述を削除 * clickableのStoryを追加 * test-storybookのtimeoutを更に倍に変更 --- .storybook/main.ts | 1 + .storybook/preview.ts | 28 +++++++ package-lock.json | 14 ++++ package.json | 5 +- src/components/Base/BaseButton.stories.ts | 34 +++++++++ .../Base/BaseDocumentView.stories.ts | 76 +++++++++++++++++++ src/components/Base/BaseDocumentView.vue | 2 + src/components/Base/BaseListItem.stories.ts | 30 ++++++++ src/components/Base/BaseRowCard.stories.ts | 37 +++++++++ src/components/Base/BaseScrollArea.stories.ts | 21 +++++ src/components/Base/BaseSwitch.stories.ts | 26 +++++++ src/components/Base/BaseSwitch.vue | 6 +- src/components/Dialog/ToolBarCustomDialog.vue | 4 +- 13 files changed, 277 insertions(+), 7 deletions(-) create mode 100644 src/components/Base/BaseButton.stories.ts create mode 100644 src/components/Base/BaseDocumentView.stories.ts create mode 100644 src/components/Base/BaseListItem.stories.ts create mode 100644 src/components/Base/BaseRowCard.stories.ts create mode 100644 src/components/Base/BaseScrollArea.stories.ts create mode 100644 src/components/Base/BaseSwitch.stories.ts diff --git a/.storybook/main.ts b/.storybook/main.ts index b7b5f01ea5..87298f8c84 100644 --- a/.storybook/main.ts +++ b/.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", diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 5ec33581a9..a0cf42df3d 100644 --- a/.storybook/preview.ts +++ b/.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], }; diff --git a/package-lock.json b/package-lock.json index 374f5c0ae8..4b08371ee6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,6 +46,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", @@ -5490,6 +5491,19 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/addon-themes": { + "version": "8.1.10", + "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.1.10.tgz", + "integrity": "sha512-3LdIa0T5OdPCpnZpZVktUAKFEjohOnggewInNDzfouMNk7k9Y7Qjc98wosri3LW6vEQYZGaoXS3F/XvMELkbTw==", + "dev": true, + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-toolbars": { "version": "8.1.10", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.1.10.tgz", diff --git a/package.json b/package.json index b4da97ebc1..12347ee644 100644 --- a/package.json +++ b/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", diff --git a/src/components/Base/BaseButton.stories.ts b/src/components/Base/BaseButton.stories.ts new file mode 100644 index 0000000000..febb98d525 --- /dev/null +++ b/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 = { + component: BaseButton, +}; + +export default meta; +type Story = StoryObj; + +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", + }, +}; diff --git a/src/components/Base/BaseDocumentView.stories.ts b/src/components/Base/BaseDocumentView.stories.ts new file mode 100644 index 0000000000..73a38d8a85 --- /dev/null +++ b/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 = { + component: BaseDocumentView, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + components: { BaseDocumentView }, + + setup() { + return { args }; + }, + + template: ` + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

ParagraphParagraphLinkParagraphParagraphcodeParagraphParagraph

+
    +
  • List
    • +
  • List
    • +
  • List
    • +
+
    +
  1. List
    2. +
  2. List
    3. +
  3. List
    4. +
+ 
pre
+
+ summary +

Details

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table HeaderTable Header
TableTable
TableTable
TableTable
TableTable
TableTable
+ `, + }), +}; diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue index 94845a8e94..5b801c4392 100644 --- a/src/components/Base/BaseDocumentView.vue +++ b/src/components/Base/BaseDocumentView.vue @@ -10,6 +10,8 @@ @use "@/styles/v2/colors" as colors; .document { + color: colors.$display; + :deep(*) { margin: 0; } diff --git a/src/components/Base/BaseListItem.stories.ts b/src/components/Base/BaseListItem.stories.ts new file mode 100644 index 0000000000..9be4f335b4 --- /dev/null +++ b/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 = { + component: BaseListItem, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + selected: false, + }, + render: (args) => ({ + components: { BaseListItem }, + setup() { + return { args }; + }, + template: 'ListItem', + }), +}; + +export const Selected: Story = { + ...Default, + args: { + selected: true, + }, +}; diff --git a/src/components/Base/BaseRowCard.stories.ts b/src/components/Base/BaseRowCard.stories.ts new file mode 100644 index 0000000000..a6e5d85469 --- /dev/null +++ b/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 = { + component: BaseRowCard, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: "Title", + description: "Description", + clickable: false, + }, + render: (args) => ({ + components: { BaseRowCard, BaseButton }, + setup() { + return { args }; + }, + template: + '', + }), +}; + +export const Clickable: Story = { + ...Default, + args: { + title: "Title", + description: "Description", + clickable: true, + }, +}; diff --git a/src/components/Base/BaseScrollArea.stories.ts b/src/components/Base/BaseScrollArea.stories.ts new file mode 100644 index 0000000000..0e72e5b3e7 --- /dev/null +++ b/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 = { + component: BaseScrollArea, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + components: { BaseScrollArea }, + setup() { + return { args }; + }, + template: + '
', + }), +}; diff --git a/src/components/Base/BaseSwitch.stories.ts b/src/components/Base/BaseSwitch.stories.ts new file mode 100644 index 0000000000..47e9076ca3 --- /dev/null +++ b/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 = { + component: BaseSwitch, +}; + +export default meta; +type Story = StoryObj; + +export const Unchecked: Story = { + args: { + uncheckedLabel: "Off", + checkedLabel: "On", + checked: false, + }, +}; + +export const Checked: Story = { + args: { + uncheckedLabel: "Off", + checkedLabel: "On", + checked: true, + }, +}; diff --git a/src/components/Base/BaseSwitch.vue b/src/components/Base/BaseSwitch.vue index 7e29b09616..382bd0c678 100644 --- a/src/components/Base/BaseSwitch.vue +++ b/src/components/Base/BaseSwitch.vue @@ -1,6 +1,6 @@