THEMES-1066: Update Storybook to v8 (#2090)

* THEMES-1066: updated versions of storybook and chromatic to the latest. * THEMES-1066: fixed linting errors * THEMES-1066 adjusted configs so that storybook could build without errors. * THEMES-1066 remove addon-knobs * THEMES-1066: removing more deprecated packages. * THEMES-1066: added .babelrc * THEMES-1066: moved babel config to main.js * version bump * added alias overrides * Fixed intro page * THEMES-1066: fixed webpack/babel config * THEMES-1066: restore babel.config.js * THEMES-1066: restore babel.config.js * THEMES-1066: added styling storybook addon * THEMES-1066: updated preview to just use news.scss * THEMES-1066: fixed breaking stories and updated news.scss. * THEMES-1066: version bump for storybook * THEMES-1066: corrected whitespace * THEMES-1066: Updating option for chromatic action. * THEMES-1066: updated stylelint to hopefully fix the UI Tests check * THEMES-1066: removed jsx from stylelint action input. * THEMES-1066: added env vars to chromatic action * THEMES-1066: removing test vars from workflow file.
WPMedia · Apr 18, 2024 · 53cd993 · 53cd993
1 parent c9dceb9
commit 53cd993
Show file tree

Hide file tree

Showing 50 changed files with 7,137 additions and 6,006 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -42,16 +42,10 @@ jobs:
 
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
 
         # Chromatic GitHub Action options
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-
-      - name: Check failure status
-        uses: act10ns/slack@v1
-        with:
-          status: ${{ job.status }}
-        if: failure()
diff --git a/.github/workflows/stylelint-pr.yml b/.github/workflows/stylelint-pr.yml
@@ -42,4 +42,4 @@ jobs:
           reporter: github-pr-review
           filter_mode: "diff_context"
           stylelint_config: ".stylelintrc.json"
-          stylelint_input: "**/*.(scss|jsx)"
+          stylelint_input: "**/*.scss"
diff --git a/.storybook/.babelrc b/.storybook/.babelrc
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,37 +3,27 @@ const path = require("path");
 
 // Export a function. Accept the base config as the only param.
 module.exports = {
-	stories: ["../stories/*.stories.@(js|jsx|mdx|tsx)", "../blocks/**/*.story.@(js|jsx|mdx|tsx)"],
-	addons: [
-		"@etchteam/storybook-addon-css-variables-theme",
-		"@storybook/addon-a11y",
-		"@storybook/addon-docs",
-		"@storybook/addon-knobs",
-		"@storybook/addon-essentials",
-	],
-	staticDirs: ["../resources"],
-	webpackFinal: async (config) => {
+    stories: [
+        "../stories/*.@(mdx|stories.@(js|jsx|tsx))",
+        "../blocks/**/*.story.@(js|jsx|mdx|tsx)"
+    ],
+
+    addons: [
+        "@storybook/addon-a11y",
+        "@storybook/addon-controls",
+        "@storybook/addon-docs",
+        "@storybook/addon-essentials",
+        "@storybook/addon-webpack5-compiler-babel",
+        "@storybook/addon-styling-webpack"
+    ],
+
+    staticDirs: ["../resources"],
+
+    webpackFinal: async (config) => {
 		// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
 		// You can change the configuration based on that.
 		// 'PRODUCTION' is used when building the static version of storybook.
 
-		// Make whatever fine-grained changes you need
-		// eslint-disable-next-line no-unused-expressions
-		config.resolve = {
-			...config.resolve,
-			alias: {
-				...config.resolve.alias,
-				"fusion:consumer": path.resolve(__dirname, "./alias/consumer.js"),
-				"fusion:content": path.resolve(__dirname, "./alias/content.js"),
-				"fusion:context": path.resolve(__dirname, "./alias/context.js"),
-				"fusion:environment": path.resolve(__dirname, "./alias/environment.js"),
-				"fusion:intl": path.resolve(__dirname, "./alias/intl.js"),
-				"fusion:properties": path.resolve(__dirname, "./alias/properties.js"),
-				"fusion:static": path.resolve(__dirname, "./alias/static.js"),
-				"fusion:themes": path.resolve(__dirname, "./alias/themes.js"),
-			},
-		};
-
 		config.module.rules.push(
 			{
 				test: /\.scss$/,
@@ -49,11 +39,91 @@ module.exports = {
 			{
 				test: /\.(js|jsx)$/,
 				include: path.resolve(__dirname, "../node_modules/@wpmedia/arc-themes-components"),
-				use: ["babel-loader"],
-			}
+				use: {
+					loader: "babel-loader",
+					options: {
+						"plugins": [
+							[
+								// Module resolver aliases need to be set here as well so arc-themes-components uses the right mock files.
+								"module-resolver",
+								{
+									"alias": {
+										"fusion:themes": "./.storybook/alias/themes.js",
+										"fusion:content": "./.storybook/alias/content.js",
+										"fusion:context": "./.storybook/alias/context.js",
+										"fusion:consumer": "./.storybook/alias/consumer.js",
+										"fusion:environment": "./.storybook/alias/environment.js",
+										"fusion:properties": "./.storybook/alias/properties.js",
+										"fusion:static": "./.storybook/alias/static.js",
+										"fusion:intl": "./.storybook/alias/intl.js"
+									}
+								}
+							]
+						],
+					},
+				},
+			},
 		);
 
+		config.externals = /^(fusion:)/;
+
 		// Return the altered config
 		return config;
 	},
+
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {}
+    },
+
+    docs: {
+        autodocs: true
+    },
+
+	babelDefault: {
+		"presets": [
+			[
+				"@babel/preset-env",
+				{
+					"targets": {
+						"node": "current"
+					},
+					"modules": "commonjs"
+				}
+			],
+			[
+				"@babel/preset-react",
+				{
+					"runtime": "automatic"
+				}
+			]
+		],
+		"plugins": [
+			"@babel/plugin-proposal-nullish-coalescing-operator",
+			"transform-react-remove-prop-types",
+			[
+				"@babel/plugin-proposal-decorators",
+				{
+					"legacy": true
+				}
+			],
+			"@babel/plugin-proposal-class-properties",
+			"@babel/plugin-transform-private-methods",
+			[
+				"module-resolver",
+				{
+					"alias": {
+						"fusion:themes": "./.storybook/alias/themes.js",
+						"fusion:content": "./.storybook/alias/content.js",
+						"fusion:context": "./.storybook/alias/context.js",
+						"fusion:consumer": "./.storybook/alias/consumer.js",
+						"fusion:environment": "./.storybook/alias/environment.js",
+						"fusion:properties": "./.storybook/alias/properties.js",
+						"fusion:static": "./.storybook/alias/static.js",
+						"fusion:intl": "./.storybook/alias/intl.js"
+					}
+				}
+			]
+		],
+	},
 };
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import arcTheme from "./arcTheme";
 
 addons.setConfig({

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,14 +1,6 @@
-import cssVariablesTheme from "@etchteam/storybook-addon-css-variables-theme";
+import "./themes/news.scss";
 
-// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved
-import news from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/news.scss";
-// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved
-import commerce from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/commerce.scss";
-
-export const decorators = [cssVariablesTheme];
-
-// eslint-disable-next-line import/prefer-default-export
-export const parameters = {
+const parameters = {
 	layout: "fullscreen",
 	a11y: {
 		element: "#root",
@@ -36,12 +28,12 @@ export const parameters = {
 	},
 	options: {
 		storySort: (a, b) =>
-			a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
-	},
-	cssVariables: {
-		files: {
-			news,
-			commerce,
-		},
+		a.title === b.title
+		? 0
+		: a.id.localeCompare(b.id, undefined, { numeric: true })
 	},
 };
+
+export default {
+	parameters,
+};