chore: migrate to storybook 8 (#27)

* chore: migrate to storybook 8 * chore: fix dependency resolutions * wip: fix typescript error * chore: fix warnings * chore: fix typescript config issue * chore: maybe fix it this time? * wip: temporary fix to get storybook build working
imccausl · Aug 9, 2024 · b88e338 · b88e338
1 parent 26ceb6b
commit b88e338
Show file tree

Hide file tree

Showing 10 changed files with 2,835 additions and 4,764 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -4,22 +4,23 @@ const config = {
   typescript: {
     check: false,
     checkOptions: {},
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
-    }
+    reactDocgen: 'react-docgen',
+    // reactDocgenTypescriptOptions: {
+    //   shouldExtractLiteralValuesFromEnum: true,
+    //   propFilter: (prop) => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    // }
   },
 
-  stories: ['../packages/**/*/*.stories.mdx', '../packages/**/*/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../packages/**/*/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-docs"),
     getAbsolutePath("@storybook/addon-actions"),
-    getAbsolutePath("@storybook/addon-mdx-gfm")
+    "@storybook/addon-webpack5-compiler-swc",
+    "@chromatic-com/storybook"
   ],
 
   features: {
@@ -31,15 +32,11 @@ const config = {
   framework: {
     name: getAbsolutePath("@storybook/react-webpack5"),
     options: {
-      builder: {
-        useSWC: true
-      }
+      builder: {}
     }
   },
 
-  docs: {
-    autodocs: true
-  }
+  docs: {}
 };
 
 export default config

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons'
+import { addons } from '@storybook/manager-api'
 
 addons.setConfig({
   enableShortcuts: true,

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,3 +1 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-}
+export const tags = ['autodocs'];
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,3 +1,3 @@
 compressionLevel: mixed
-
+pnpEnableEsmLoader: true
 yarnPath: .yarn/releases/yarn-4.4.0.cjs
diff --git a/package.json b/package.json
@@ -37,26 +37,30 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/types": "^7.19.0",
+    "@chromatic-com/storybook": "^1",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@mdx-js/react": "^2.1.3",
     "@monodeploy/plugin-github": "^0.6.2",
-    "@storybook/addon-a11y": "^7.6.14",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-docs": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addon-mdx-gfm": "^7.6.14",
+    "@storybook/addon-a11y": "^8.2.8",
+    "@storybook/addon-actions": "^8.2.8",
+    "@storybook/addon-docs": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-mdx-gfm": "^8.2.8",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/manager-api": "^8.2.8",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/react": "^7.6.14",
+    "@storybook/react": "^8.2.8",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/react-webpack5": "^7.6.14",
+    "@storybook/react-webpack5": "^8.2.8",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@tophat/conventional-changelog-config": "^1.0.1",
-    "@types/react": "^18.0.19",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@yarnpkg/sdks": "^3.2.0",
@@ -65,9 +69,9 @@
     "core-js": "^3.25.1",
     "eslint": "^8.23.0",
     "eslint-config-turbo": "^1.11.2",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.6.6",
-    "eslint-plugin-testing-library": "^5.9.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.2",
     "eslint-plugin-turbo": "^0.0.4",
     "husky": "^8.0.1",
     "jsdom": "^20.0.1",
@@ -76,19 +80,15 @@
     "prettier": "^2.7.1",
     "prettier-eslint-config": "^1.0.7",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "storybook": "^7.6.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "storybook": "^8.2.8",
     "styled-components": "^5.3.5",
     "turbo": "^1.4.6",
     "typescript": "^5.3.3",
-    "vite": "^3.2.2",
+    "vite": "^4.0.0",
     "vitest": "^0.24.3",
     "webpack": "^5.74.0"
-  },
-  "resolutions": {
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2"
   }
 }
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -21,7 +21,7 @@
     "url": "git+https://github.com/imccausl/a11y-ui-react.git"
   },
   "scripts": {
-    "build": "yarn g:tsc --module commonjs --outDir lib/cjs && yarn g:tsc --module esnext --outDir lib/esm",
+    "build": "yarn g:tsc --module commonjs --outDir lib/cjs && yarn g:tsc --moduleResolution bundler --module esnext --outDir lib/esm",
     "test": "yarn g:test",
     "version": "yarn build",
     "lint": "run -T eslint src --ext .ts,.tsx --config ../../.eslintrc.json",
@@ -34,17 +34,17 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-docs": "^7.6.5",
-    "@storybook/react": "^7.6.5",
-    "@testing-library/react": "^12.1.5",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
+    "@storybook/react": "^8.2.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.26",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "storybook": "^8.2.8",
     "styled-components": "^5.3.5",
     "vitest": "^0.24.3"
   }
-}
+}
diff --git a/packages/button/src/Button/index.tsx b/packages/button/src/Button/index.tsx
@@ -24,7 +24,7 @@ export type ButtonProps = {
   disabled?: boolean
 }
 
-const Button: React.FC<ButtonProps> = ({
+const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   children,
   onClick,
   disabled,

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -32,7 +32,7 @@
     "directory": "packages/core"
   },
   "scripts": {
-    "build": "yarn g:tsc --module commonjs --outDir lib/cjs && yarn g:tsc --module esnext --outDir lib/esm",
+    "build": "yarn g:tsc --module commonjs --outDir lib/cjs && yarn g:tsc --moduleResolution bundler --module esnext --outDir lib/esm",
     "test": "yarn g:test",
     "version": "yarn build",
     "lint": "run -T eslint src --ext .ts,.tsx --config ../../.eslintrc.json",
@@ -48,13 +48,13 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.26",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "styled-components": "^5.3.5",
     "vitest": "^0.24.3"
   }
-}
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -5,14 +5,14 @@
       "dom.iterable",
       "esnext"
     ],
-    "target": "es2018",
+    "target": "ESNext",
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "moduleResolution": "Node",
+    "module": "NodeNext",
     "noEmit": false,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,