docs: upgrade storybook to v7

.github/workflows/test.yaml

@@ -39,11 +39,11 @@ jobs:
       - uses: actions/checkout@v4
       - uses: cypress-io/github-action@v5
         with:
-          start: yarn run start-storybook --port 6006
-          wait-on: "http://localhost:6006"
+          start: yarn docs
+          wait-on: "http://localhost:9009"
           browser: chrome
           headless: true
-          env: port=6006
+          env: port=9009
       - uses: actions/upload-artifact@v3
         if: failure()
         with:

.storybook/main.js

@@ -1,21 +1,32 @@
 const path = require("path");
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+const config = {
   stories: ["../src/**/*.stories.@(js|ts|jsx|tsx|mdx)"],
   addons: [
+    "@storybook/addon-essentials",
     "@storybook/addon-docs",
     "@storybook/addon-controls",
     "@storybook/addon-a11y",
+    "@storybook/addon-mdx-gfm",
   ],
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,
       use: ["style-loader", "css-loader", "sass-loader"],
       include: path.resolve(__dirname, "../"),
     });
     return config;
   },
+  docs: {
+    autodocs: "tag",
+  },
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  features: {
+    storyStoreV7: false,
+  },
 };
+
+export default config;

.storybook/preview.js

@@ -1,7 +1,6 @@
 import { themes } from "@storybook/theming";
 import "vanilla-framework/scss/build.scss";
 
-// or global addParameters
 export const parameters = {
   docs: {
     theme: themes.vanillaish,

cypress/e2e/accordion.cy.js

@@ -7,21 +7,23 @@ describe("Storybook", () => {
   context("Accordion", () => {
     it("should show items when clicked", () => {
       cy.get("button").contains("Advanced topics").click();
-      cy.get("#root > aside > ul > li > section > p:first").should(
-        "be.visible"
-      );
-      cy.get("#root > aside > ul > li > section > p:first").should(
-        "have.text",
-        "Charm bundles"
-      );
+      cy.findByRole("tabpanel", { name: "Advanced topics" }).within(() => {
+        cy.get("p:first")
+          .should("have.text", "Charm bundles")
+          .should("be.visible");
+      });
     });
 
     it("should hide items when clicked again", () => {
       cy.get("button").contains("Advanced topics").click();
+
+      cy.findByRole("tabpanel", { name: "Advanced topics" }).should(
+        "be.visible"
+      );
       cy.get("button").contains("Advanced topics").click();
 
-      cy.get("#root > aside > ul > li > section > p:first").should(
-        "not.be.visible"
+      cy.findByRole("tabpanel", { name: "Advanced topics" }).should(
+        "not.exist"
       );
     });
   });

package.json

@@ -27,14 +27,15 @@
     "@babel/preset-typescript": "7.23.2",
     "@percy/cli": "1.27.3",
     "@percy/storybook": "4.3.7",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-controls": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
-    "@storybook/theming": "6.5.16",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-mdx-gfm": "7.5.3",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@testing-library/cypress": "9.0.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.17.0",
@@ -61,6 +62,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-testing-library": "5.11.1",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
@@ -70,6 +72,7 @@
     "react-dom": "18.2.0",
     "sass": "1.69.3",
     "sass-loader": "10.4.1",
+    "storybook": "7.5.3",
     "style-loader": "3.3.3",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
@@ -99,7 +102,11 @@
   "resolutions": {
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
-    "postcss": "^8.3.11"
+    "postcss": "^8.3.11",
+    "string-width": "^4",
+    "jackspeak": "^2",
+    "strip-ansi": "^6.0.0",
+    "strip-ansi-cjs": "^8.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",
@@ -113,9 +120,9 @@
     "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
     "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
     "build-watch": "yarn run build-local --watch",
-    "build-docs": "build-storybook -c .storybook -o docs",
+    "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
-    "docs": "start-storybook --port ${PORT:-9009}",
+    "docs": "storybook dev -p ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",
     "lint-style": "stylelint src/**/*.scss",

renovate.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["github>canonical/renovate-apps"]
+  "extends": ["github>canonical/vanilla-framework"]
 }

src/components/ActionButton/ActionButton.stories.mdx

@@ -27,17 +27,29 @@ ActionButton accepts the props from [Button](?path=/docs/button--base) in additi
 ### Default
 
 <Canvas>
-  <Story name="Default">
-    <ActionButton appearance="positive">Click me!</ActionButton>
+  <Story
+    name="Default"
+    args={{
+      appearance: "positive",
+      children: "Click me!"
+    }}
+  >
+    {ActionButton.bind({})}
   </Story>
 </Canvas>
 
 ### Loading
 
 <Canvas>
-  <Story name="Loading">
-    <ActionButton appearance="positive" loading disabled>
-      Click me!
-    </ActionButton>
+  <Story
+    name="Loading"
+    args={{
+      appearance: "positive",
+      loading: true,
+      disabled: true,
+      children: "Click me!"
+    }}
+  >
+    {ActionButton.bind({})}
   </Story>
 </Canvas>

src/components/Badge/Badge.stories.mdx

@@ -11,9 +11,11 @@ import Badge, { BadgeType } from "./Badge";
         options: BadgeType,
         type: "select",
       },
-      defaultValue: BadgeType.UNDEFINED_LARGE_NUMBER,
     },
   }}
+  args={{
+    badgeType: BadgeType.UNDEFINED_LARGE_NUMBER,
+  }}
 />
 
 export const Template = (args) => <Badge {...args} />;
@@ -52,6 +54,7 @@ It can be used to display a numeric values.
 ### Undefined Large Number
 
 When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+
 <Canvas>
   <Story name="Undefined Large Number">
     <Badge value={1000} badgeType={BadgeType.UNDEFINED_LARGE_NUMBER} />
@@ -61,6 +64,7 @@ When the amount of items is only relevant for small values, this variant should
 ### Rounded Large Number
 
 When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+
 <Canvas>
   <Story name="Rounded Large Number">
     <Badge value={1234} badgeType={BadgeType.ROUNDED_LARGE_NUMBER} />