Fix storybook

Author: fcollonval

.github/workflows/ci.yml

@@ -37,10 +37,10 @@ jobs:
               run: yarn install
 
             - name: Run Lint Check 🔍
-              run: yarn run lint
+              run: yarn run eslint:check
 
             - name: Run Format Check 🌸
-              run: yarn run fmt
+              run: yarn run prettier:check
 
     build-toolkit:
         runs-on: ubuntu-latest

package.json

@@ -19,5 +19,8 @@
       "packages/components",
       "packages/lab-example"
     ]
+  },
+  "resolutions": {
+    "webpack": "^5.0.0"
   }
 }

packages/components/.storybook/babel.config.js

@@ -1,7 +1,9 @@
 module.exports = {
-	presets: ['@babel/preset-env', '@babel/preset-typescript'],
-	plugins: [
-		['@babel/plugin-proposal-decorators', {legacy: true}],
-		['@babel/plugin-proposal-class-properties', {loose: true}],
-	],
+  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
+  ]
 };

packages/components/.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+	core: {
+	  builder: 'webpack5',
+	},
 	stories: [
 		'../src/**/*.stories.mdx',
 		'../src/**/*.stories.@(js|jsx|ts|tsx)',

packages/components/package.json

@@ -17,15 +17,15 @@
 	"sideEffects": false,
 	"scripts": {
 		"start": "start-storybook -p 6006",
-		"build": "rollup -c && tsc -p ./tsconfig.json && npm run doc",
+		"build": "rollup -c && tsc -p ./tsconfig.json && yarn run doc",
 		"build:docs": "build-storybook",
-		"deploy:docs": "npm run build:docs && gh-pages -d storybook-static",
+		"deploy:docs": "yarn run build:docs && gh-pages -d storybook-static",
 		"doc": "api-extractor run --local",
-		"fmt": "prettier --config ./.prettierrc --check \"**/*.{ts,js,md}\"",
-		"fmt:fix": "prettier --config ./.prettierrc --write \"**/*.{ts,js,md}\"",
-		"lint": "eslint . --ext .ts",
-		"lint:fix": "eslint . --ext .ts --fix",
-		"prepublishOnly": "npm run build",
+		"prettier:check": "prettier --config ./.prettierrc --check \"**/*.{ts,js,md}\"",
+		"prettier": "prettier --config ./.prettierrc --write \"**/*.{ts,js,md}\"",
+		"eslint:check": "eslint . --ext .ts",
+		"eslint": "eslint . --ext .ts --fix",
+		"prepublishOnly": "yarn run build",
 		"test": "jest --verbose --coverage"
 	},
 	"dependencies": {
@@ -37,25 +37,27 @@
 		"@babel/plugin-proposal-decorators": "^7.14.2",
 		"@babel/preset-env": "^7.14.2",
 		"@babel/preset-typescript": "^7.13.0",
-		"@microsoft/api-extractor": "7.18.9",
+		"@microsoft/api-extractor": "^7.18.9",
 		"@microsoft/eslint-config-fast-dna": "^1.2.0",
 		"@rollup/plugin-commonjs": "^17.1.0",
 		"@rollup/plugin-node-resolve": "^11.2.0",
 		"@rollup/plugin-typescript": "^8.2.0",
-		"@storybook/addon-a11y": "^6.4.0-beta.4",
-		"@storybook/addon-actions": "^6.4.0-beta.4",
-		"@storybook/addon-essentials": "^6.4.0-beta.4",
-		"@storybook/addon-links": "^6.4.0-beta.4",
-		"@storybook/html": "^6.4.0-beta.4",
-		"@storybook/theming": "^6.4.0-beta.4",
+		"@storybook/addon-a11y": "^6.4.3",
+		"@storybook/addon-actions": "^6.4.3",
+		"@storybook/addon-essentials": "^6.4.3",
+		"@storybook/addon-links": "^6.4.3",
+		"@storybook/builder-webpack5": "^6.4.3",
+		"@storybook/html": "^6.4.3",
+		"@storybook/manager-webpack5": "^6.4.3",
+		"@storybook/theming": "^6.4.3",
 		"@types/jest": "^26.0.20",
 		"@typescript-eslint/eslint-plugin": "^2.23.0",
 		"@vscode/codicons": "^0.0.22",
 		"babel-jest": "^27.2.4",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-transform-class-properties": "^6.24.1",
-		"eslint": "6.8.0",
-		"eslint-config-prettier": "6.10.1",
+		"eslint": "^6.8.0",
+		"eslint-config-prettier": "^6.10.1",
 		"eslint-plugin-import": "^2.25.2",
 		"gh-pages": "^3.1.0",
 		"jest": "^27.2.4",
@@ -66,7 +68,7 @@
 		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-transform-tagged-template": "0.0.3",
 		"tslib": "^2.1.0",
-		"typescript": "4.3.5",
-		"webpack": "^4.46.0"
+		"typescript": "~4.3.5",
+		"webpack": "^5.0.0"
 	}
 }

packages/lab-example/package.json

@@ -40,6 +40,8 @@
     "clean:all": "jlpm run clean:lib && jlpm run clean:labextension",
     "eslint": "eslint . --ext .ts,.tsx --fix",
     "eslint:check": "eslint . --ext .ts,.tsx",
+    "prettier": "prettier --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+    "prettier:check": "prettier --list-different \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
     "install:extension": "jlpm run build",
     "watch": "run-p watch:src watch:labextension",
     "watch:src": "tsc -w",