Update dependency @nuxtjs/storybook to v8.3.3 (#5306)

* Update dependency @nuxtjs/storybook to v8.3.3 * Try updating all Storybook packages * Fix props with a custom type not being set by url args --------- Co-authored-by: Olga Bulat <[email protected]>
WordPress · Jan 10, 2025 · 43ec351 · 43ec351
1 parent 363166e
commit 43ec351
Show file tree

Hide file tree

Showing 13 changed files with 289 additions and 999 deletions.
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
@@ -1,7 +1,7 @@
 import type { StorybookConfig } from "@storybook-vue/nuxt"
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

diff --git a/frontend/package.json b/frontend/package.json
@@ -87,12 +87,11 @@
     "@intlify/shared": "^11.0.1",
     "@nuxt/test-utils": "^3.15.1",
     "@nuxtjs/i18n": "^9.1.1",
-    "@nuxtjs/storybook": "8.3.2",
+    "@nuxtjs/storybook": "8.3.3",
     "@playwright/test": "1.49.1",
-    "@storybook-vue/nuxt": "8.3.2",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
     "@vitest/coverage-v8": "^2.1.4",
@@ -107,7 +106,7 @@
     "npm-run-all2": "^7.0.0",
     "nuxt": "^3.15.1",
     "rimraf": "^6.0.1",
-    "storybook": "8.3.6",
+    "storybook": "8.4.7",
     "talkback": "^4.2.0",
     "typescript": "5.7.2",
     "vitest": "^2.1.4",

diff --git a/frontend/shared/constants/banners.ts b/frontend/shared/constants/banners.ts
@@ -1,2 +1,5 @@
 export const bannerNature = ["info", "success", "warning", "error"] as const
 export type BannerNature = (typeof bannerNature)[number]
+
+export const bannerVariant = ["regular", "dark"] as const
+export type BannerVariant = (typeof bannerVariant)[number]
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -5,7 +5,7 @@
  */
 import { computed } from "vue"
 
-import { BannerNature } from "#shared/constants/banners"
+import type { BannerNature, BannerVariant } from "#shared/constants/banners"
 import type { BannerId } from "#shared/types/banners"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -22,7 +22,7 @@ const props = withDefaults(
      * the color variant of the banner; The dark variant is intended for use on
      * bg-complementary pages.
      */
-    variant?: "regular" | "dark"
+    variant?: BannerVariant
     /**
      * the unique ID of the banner
      */

diff --git a/...anner/meta/VNotificationBanner.stories.ts → ...anner/meta/VNotificationBanner.stories.js b/...anner/meta/VNotificationBanner.stories.ts → ...anner/meta/VNotificationBanner.stories.js
@@ -4,36 +4,37 @@ import { bannerNature } from "#shared/constants/banners"
 
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
-import type { StoryObj } from "@storybook/vue3"
-
 const meta = {
   title: "Components/VNotificationBanner",
   component: VNotificationBanner,
 
   argTypes: {
-    nature: { control: "select", options: [...bannerNature] },
-    variant: { control: "select", options: ["regular", "dark"] },
+    sNature: { control: "select", options: [...bannerNature] },
+    sVariant: { control: "select", options: ["regular", "dark"] },
     onClose: { action: "close" },
   },
   args: {
-    nature: "info",
-    variant: "regular",
+    sNature: "info",
+    sVariant: "regular",
     id: "banner",
   },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
-type StoryTemplate = Omit<Story, "args">
 
 const text =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum."
 
-const Template: StoryTemplate = {
+const Template = {
   render: (args) => ({
     components: { VNotificationBanner },
     setup() {
-      return () => h(VNotificationBanner, { ...args }, { default: () => text })
+      return () =>
+        h(
+          VNotificationBanner,
+          { ...args, variant: args.sVariant, nature: args.sNature },
+          { default: () => text }
+        )
     },
   }),
 }
@@ -42,8 +43,8 @@ export const Default = {
   name: "Default",
 
   args: {
-    nature: "success",
-    variant: "regular",
+    sNature: "success",
+    sVariant: "regular",
   },
 }
 
@@ -52,7 +53,7 @@ export const Dark = {
   name: "Dark",
 
   args: {
-    nature: "info",
-    variant: "dark",
+    sNature: "info",
+    sVariant: "dark",
   },
 }
diff --git a/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js b/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js
@@ -14,13 +14,13 @@ const meta = {
   },
 
   argTypes: {
-    size: { options: ["small", "medium"], control: { type: "select" } },
+    sSize: { options: ["small", "medium"], control: { type: "select" } },
 
     useLinks: { control: { type: "boolean" } },
   },
 
   args: {
-    size: "medium",
+    sSize: "medium",
     useLinks: false,
     additionalTypes: false,
   },
@@ -36,10 +36,10 @@ export const Default = {
         h(
           "div",
           {
-            style: args.size === "small" ? "width: max-content;" : "",
+            style: args.sSize === "small" ? "width: max-content;" : "",
             class: "wrapper p-2",
           },
-          [h(VSearchTypes, args)]
+          [h(VSearchTypes, { ...args, size: args.sSize })]
         )
     },
   }),

diff --git a/...VImageResult/meta/VImageResult.stories.ts → ...VImageResult/meta/VImageResult.stories.js b/...VImageResult/meta/VImageResult.stories.ts → ...VImageResult/meta/VImageResult.stories.js
@@ -4,23 +4,21 @@ import { image } from "~~/test/unit/fixtures/image"
 
 import VImageResult from "~/components/VImageResult/VImageResult.vue"
 
-import type { Meta, StoryObj } from "@storybook/vue3"
-
 const meta = {
   title: "Components/VImageResult",
   component: VImageResult,
-} satisfies Meta<typeof VImageResult>
-
+}
 export default meta
-type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default = {
   render: (args) => ({
     components: { VImageResult },
     setup() {
       return () =>
         h("div", { class: "p-4 image-wrapper max-w-80" }, [
-          h("ol", { class: "flex flex-wrap gap-4" }, [h(VImageResult, args)]),
+          h("ol", { class: "flex flex-wrap gap-4" }, [
+            h(VImageResult, { ...args, aspectRatio: args.sAspectRatio }),
+          ]),
         ])
     },
   }),
@@ -31,15 +29,15 @@ export const Default: Story = {
   },
 
   argTypes: {
-    aspectRatio: {
+    sAspectRatio: {
       options: ["square", "intrinsic"],
       control: { type: "select" },
     },
     image: { control: { type: "object" } },
   },
 
   args: {
-    aspectRatio: "intrinsic",
+    sAspectRatio: "intrinsic",
     kind: "search",
     searchTerm: "test",
     relatedTo: "fake-uuid",

diff --git a/frontend/src/components/meta/VButton.stories.js b/frontend/src/components/meta/VButton.stories.js
@@ -23,23 +23,19 @@ export default {
     },
   },
   args: {
-    size: "medium",
+    sSize: "medium",
   },
   argTypes: {
     as: { options: buttonForms, control: { type: "radio" } },
-
-    variant: { options: buttonVariants, control: { type: "select" } },
-
+    // Use the name that's different from the prop name to hotfix
+    // the storybook bug when the prop with a custom type is not updated when
+    // the value is set in the URL.
+    sVariant: { options: buttonVariants, control: { type: "select" } },
+    sSize: { options: buttonSizes, control: { type: "select" } },
     pressed: { control: "boolean" },
-
-    size: { options: buttonSizes, control: { type: "select" } },
-
     disabled: { control: "boolean" },
-
     focusableWhenDisabled: { control: "boolean" },
-
     type: { control: "text" },
-
     onClick: { action: "click" },
     onMouseDown: { action: "mousedown" },
     onKeydown: { action: "keydown" },
@@ -51,7 +47,6 @@ export default {
 const Template = (args) => ({
   components: { VButton },
   setup() {
-    const { size, variant, ...rest } = args
     return () =>
       h("div", { class: "flex" }, [
         h(
@@ -60,18 +55,20 @@ const Template = (args) => ({
             id: "wrapper",
             class: [
               "px-4 h-16 flex items-center justify-center",
-              variant.startsWith("transparent") ? "bg-surface" : "bg-default",
+              args.sVariant.startsWith("transparent")
+                ? "bg-surface"
+                : "bg-default",
             ],
           },
           [
             h(
               VButton,
               {
-                size,
-                variant,
                 class: "description-bold",
                 href: "/",
-                ...rest,
+                ...args,
+                variant: args.sVariant,
+                size: args.sSize,
               },
               () => "Code is Poetry"
             ),
@@ -88,19 +85,27 @@ const TemplateWithIcons = (args) => ({
       h("div", { class: "flex flex-col items-center gap-4 flex-wrap" }, [
         h(
           VButton,
-          { variant: args.variant, size: args.size, "has-icon-start": true },
+          {
+            variant: args.sVariant,
+            size: args.sSize,
+            "has-icon-start": true,
+          },
           () => [h(VIcon, { name: "replay" }), "Button"]
         ),
         h(
           VButton,
-          { variant: args.variant, size: args.size, "has-icon-end": true },
+          {
+            variant: args.sVariant,
+            size: args.sSize,
+            "has-icon-end": true,
+          },
           () => ["Button", h(VIcon, { name: "external-link" })]
         ),
         h(
           VButton,
           {
-            variant: args.variant,
-            size: args.size,
+            variant: args.sVariant,
+            size: args.sSize,
             "has-icon-start": true,
             "has-icon-end": true,
           },
@@ -130,6 +135,7 @@ const VariantsTemplate = (args) => ({
               key: variant,
               class: "description-bold",
               ...buttonArgs,
+              size: buttonArgs.sSize,
             },
             () => capitalCase(variant)
           )
@@ -143,7 +149,7 @@ export const Default = {
   name: "VButton",
 
   args: {
-    variant: "filled-pink-8",
+    sVariant: "filled-pink-8",
   },
 }
 
@@ -175,16 +181,13 @@ export const Icons = {
   name: "icons",
 
   args: {
-    variant: "bordered-dark",
+    sVariant: "bordered-dark",
   },
 
   argTypes: {
     pressed: { control: "boolean" },
-
-    size: { options: buttonSizes, control: { type: "radio" } },
-
-    variant: { options: buttonVariants },
-
+    sSize: { options: buttonSizes, control: { type: "radio" } },
+    sVariant: { options: buttonVariants },
     disabled: { control: "boolean" },
   },
 }
diff --git a/frontend/test/storybook/visual-regression/v-button.spec.ts b/frontend/test/storybook/visual-regression/v-button.spec.ts
@@ -16,7 +16,7 @@ test.describe("VButton", () => {
   )
   for (const variant of nonPressedVariants) {
     test(`${variant} resting`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await expectSnapshot(
         page,
         `${variant}-resting`,
@@ -25,7 +25,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} hovered`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.hover(buttonLocator)
       await expectSnapshot(
         page,
@@ -35,7 +35,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} focused`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.focus(buttonLocator)
       await expectSnapshot(
         page,
@@ -45,7 +45,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} focused hovered`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.focus(buttonLocator)
       await page.hover(buttonLocator)
       await expectSnapshot(