[migrate] upgrade to StoryBook 8 with Parcel 2

.github/workflows/main.yml

@@ -14,10 +14,10 @@ jobs:
 
             - uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
             - uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 22
                   registry-url: https://registry.npmjs.org
                   cache: pnpm
             - name: Install Dependencies

.storybook/.parcelrc

@@ -0,0 +1,9 @@
+{
+    "extends": "@parcel/config-storybook",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc",
+            "@parcel/transformer-react-refresh-wrap"
+        ]
+    }
+}

.storybook/main.ts

@@ -1,9 +1,9 @@
-import type { StorybookConfig } from "@storybook/react-vite";
 import path from "path";
+import remarkGfm from "remark-gfm";
 
 import prettierConfig from "./prettier.config";
 
-const config: StorybookConfig = {
+const config = {
   stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
@@ -21,9 +21,22 @@ const config: StorybookConfig = {
         },
       },
     },
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
   framework: {
-    name: "@storybook/react-vite",
+    name: "storybook-react-parcel",
     options: {},
   },
   docs: {

.vscode/extensions.json

@@ -12,6 +12,7 @@
         "rangav.vscode-thunder-client",
         "eamodio.gitlens",
         "github.vscode-pull-request-github",
-        "github.vscode-github-actions"
+        "github.vscode-github-actions",
+        "github.copilot"
     ]
 }

ReadMe.md

@@ -8,9 +8,9 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 
 [![NPM](https://nodei.co/npm/idea-react.png?downloads=true&downloadRank=true&stars=true)][8]
 
--   API document: https://idea2app.github.io/Idea-React/
--   Preview site: https://idea2app.github.io/Idea-React/preview/
--   Storybook playground: https://idea-react.vercel.app/
+- API document: https://idea2app.github.io/Idea-React/
+- Preview site: https://idea2app.github.io/Idea-React/preview/
+- Storybook playground: https://idea-react.vercel.app/
 
 ## Versions
 
@@ -172,6 +172,13 @@ export class ExamplePage extends PureComponent {
 
 ## Development
 
+### Patches
+
+Some upstream packages have not yet been updated for React 19 or the latest dependencies. The following `pnpm patch` fixes are applied:
+
+1. `@parcel/resolver-storybook@0.0.0` — React 19 removed `react-dom/client.js` from package exports; the resolver needs to use `react-dom/client` instead
+2. `@mdx-js/react@3.1.0` — `@parcel/transformer-mdx@2.x` generates `import { mdx } from '@mdx-js/react'`, but the `mdx` export was removed in `@mdx-js/react@2.x`
+
 ### Publish
 
 1. update `version` in `package.json` file

eslint.config.mjs → eslint.config.ts

@@ -1,4 +1,3 @@
-// @ts-check
 import { fixupPluginRules } from '@eslint/compat';
 import eslint from '@eslint/js';
 import eslintConfigPrettier from 'eslint-config-prettier';
@@ -15,7 +14,6 @@ export default tsEslint.config(
     {
         plugins: {
             '@typescript-eslint': tsEslint.plugin,
-            // @ts-expect-error https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
             react: fixupPluginRules(reactPlugin),
             'simple-import-sort': simpleImportSortPlugin
         }

package.json

@@ -22,79 +22,97 @@
     "types": "dist/index.d.ts",
     "main": "dist/index.js",
     "dependencies": {
-        "@editorjs/editorjs": "^2.30.6",
-        "@editorjs/paragraph": "^2.11.6",
+        "@editorjs/editorjs": "^2.30.8",
+        "@editorjs/paragraph": "^2.11.7",
         "@react-editor-js/core": "^2.1.0",
-        "@swc/helpers": "^0.5.13",
+        "@swc/helpers": "^0.5.15",
         "classnames": "^2.5.1",
-        "editorjs-html": "^3.4.3",
+        "editorjs-html": "^4.0.5",
         "html2canvas": "^1.4.1",
         "iterable-observer": "^1.1.0",
         "lodash": "^4.17.21",
-        "mobx": ">=6.11",
-        "mobx-react": ">=9.1",
+        "mobx": "^6.13.7",
+        "mobx-react": "^9.2.0",
         "mobx-react-helper": "^0.3.1",
-        "prismjs": "^1.29.0",
-        "react-bootstrap": "^2.10.5",
+        "prismjs": "^1.30.0",
+        "react-bootstrap": "^2.10.9",
         "react-editor-js": "^2.1.0",
         "react-element-to-jsx-string": "^15.0.0",
-        "web-utility": "^4.4.1"
+        "web-utility": "^4.4.3"
     },
     "peerDependencies": {
         "react": ">=16",
         "react-dom": ">=16"
     },
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.25.9",
-        "@babel/preset-typescript": "^7.26.0",
-        "@eslint/compat": "^1.2.1",
-        "@eslint/js": "^9.13.0",
-        "@microsoft/api-extractor": "^7.47.11",
-        "@parcel/config-default": "~2.12.0",
-        "@parcel/packager-ts": "~2.12.0",
-        "@parcel/transformer-less": "2.12.0",
-        "@parcel/transformer-typescript-tsc": "~2.12.0",
-        "@parcel/transformer-typescript-types": "~2.12.0",
-        "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
+        "@babel/preset-typescript": "^7.27.0",
+        "@eslint/compat": "^1.2.8",
+        "@eslint/js": "^9.24.0",
+        "@mdx-js/react": "^3.1.0",
+        "@microsoft/api-extractor": "^7.52.3",
+        "@parcel/config-default": "~2.14.4",
+        "@parcel/config-storybook": "^0.0.2",
+        "@parcel/packager-ts": "~2.14.4",
+        "@parcel/transformer-less": "~2.14.4",
+        "@parcel/transformer-mdx": "~2.13.3",
+        "@parcel/transformer-typescript-tsc": "~2.14.4",
+        "@parcel/transformer-typescript-types": "~2.14.4",
+        "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
         "@storybook/addon-console": "^3.0.0",
-        "@storybook/addon-essentials": "^7.6.20",
-        "@storybook/addon-interactions": "^7.6.20",
-        "@storybook/addon-links": "^7.6.20",
-        "@storybook/addon-storysource": "^7.6.20",
-        "@storybook/blocks": "^7.6.20",
-        "@storybook/react": "^7.6.20",
-        "@storybook/react-vite": "^7.6.20",
-        "@storybook/testing-library": "^0.2.2",
-        "@types/lodash": "^4.17.12",
-        "@types/node": "^20.17.1",
+        "@storybook/addon-docs": "^8.6.12",
+        "@storybook/addon-essentials": "^8.6.12",
+        "@storybook/addon-interactions": "^8.6.12",
+        "@storybook/addon-links": "^8.6.12",
+        "@storybook/addon-storysource": "^8.6.12",
+        "@storybook/blocks": "^8.6.12",
+        "@storybook/react": "^8.6.12",
+        "@storybook/test": "^8.6.12",
+        "@types/lodash": "^4.17.16",
+        "@types/node": "^22.14.0",
         "@types/prismjs": "^1.26.5",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
-        "@vitejs/plugin-react": "^4.3.3",
-        "eslint": "^9.13.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-react": "^7.37.2",
+        "@types/react": "^19.1.0",
+        "@types/react-dom": "^19.1.2",
+        "buffer": "^6.0.3",
+        "eslint": "^9.24.0",
+        "eslint-config-prettier": "^10.1.2",
+        "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "globals": "^15.11.0",
-        "husky": "^9.1.6",
+        "globals": "^16.0.0",
+        "husky": "^9.1.7",
+        "jiti": "^2.4.2",
         "koapache": "^2.2.2",
-        "less": "^4.2.0",
-        "lint-staged": "^15.2.10",
-        "parcel": "~2.12.0",
-        "postcss-preset-env": "^10.0.8",
-        "prettier": "^3.3.3",
+        "less": "^4.3.0",
+        "lint-staged": "^15.5.0",
+        "parcel": "~2.14.4",
+        "postcss": "^8.5.3",
+        "prettier": "^3.5.3",
         "prettier-plugin-css-order": "^2.1.2",
         "process": "^0.11.10",
         "prop-types": "15.8.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "remark-gfm": "^4.0.1",
         "rimraf": "^6.0.1",
-        "storybook": "^7.6.20",
-        "typedoc": "^0.26.10",
-        "typedoc-plugin-mdn-links": "^3.3.4",
-        "typescript": "~5.6.3",
-        "typescript-eslint": "^8.11.0",
-        "vite": "^5.4.10"
+        "storybook": "^8.6.12",
+        "storybook-react-parcel": "^0.0.1",
+        "typedoc": "^0.28.2",
+        "typedoc-plugin-mdn-links": "^5.0.1",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.29.1"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "@swc/core",
+            "esbuild",
+            "lmdb",
+            "msgpackr-extract"
+        ],
+        "patchedDependencies": {
+            "@parcel/resolver-storybook@0.0.0": "patches/@parcel__resolver-storybook@0.0.0.patch",
+            "@mdx-js/react@3.1.0": "patches/@mdx-js__react@3.1.0.patch"
+        }
     },
     "prettier": {
         "singleQuote": true,
@@ -110,6 +128,9 @@
         "*.{md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
         "*.{js,ts,tsx}": "eslint --fix"
     },
+    "@parcel/resolver-default": {
+        "packageExports": true
+    },
     "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "targets": {
         "main": {
@@ -130,5 +151,6 @@
         "build:storybook": "storybook build -c .storybook",
         "preview:storybook": "npm run build:storybook  &&  vite preview --outDir storybook-static",
         "preview": "cd preview/  &&  rimraf ../.parcel-cache dist/  &&  parcel --open"
-    }
+    },
+    "packageManager": "pnpm"
 }

patches/@mdx-js__react@3.1.0.patch

@@ -0,0 +1,13 @@
+diff --git a/index.js b/index.js
+index e686091e3244f2d7d01b3ba740a5a2b306e6c915..49e6c8283ffce139ce1dd1b068eed2b0533ffdc0 100644
+--- a/index.js
++++ b/index.js
+@@ -1 +1,8 @@
+ export {MDXProvider, useMDXComponents} from './lib/index.js'
++
++// Compatibility shim: @parcel/transformer-mdx@2.x generates code that imports
++// `mdx` from '@mdx-js/react', but this export was removed in @mdx-js/react@2.x.
++import React from 'react'
++export function mdx(type, props, ...children) {
++    return React.createElement(type, props, ...children)
++}

patches/@parcel__resolver-storybook@0.0.0.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/StorybookResolver.js b/dist/StorybookResolver.js
+index 3e97e9267df366cfbceeae3a03ac3058d1c1cafd..21c32f45219d696cc62de95643fbcf2bf5dc6f46 100644
+--- a/dist/StorybookResolver.js
++++ b/dist/StorybookResolver.js
+@@ -17,7 +17,7 @@ module.exports = new _plugin.Resolver({
+     async resolve ({ dependency, options, specifier, pipeline, logger }) {
+         // Workaround for interop issue
+         if (specifier === "react-dom/client") {
+-            let specifier = REACT_MAJOR_VERSION >= 18 ? "react-dom/client.js" : "react-dom/index.js";
++            let specifier = REACT_MAJOR_VERSION >= 19 ? "react-dom/client" : REACT_MAJOR_VERSION >= 18 ? "react-dom/client.js" : "react-dom/index.js";
+             return {
+                 filePath: __dirname + "/react.js",
+                 code: `