[migrate] upgrade to Node.js 22, PNPM 10, MobX-React-helper 0.4, EditorJS-HTML 4 & other latest Upstream packages (#62)

Author: TechQuery

.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

.npmignore

@@ -1,6 +1,5 @@
 .*
-eslint.config.mjs
-vite.config.ts
+*.config.ts
 docs/
 preview/
 api-extractor.json

.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
 
@@ -53,7 +53,7 @@ Table, List & Form components around Data models, have been migrated to https://
 
 #### Map components
 
-Open Map component & model, have been migrated to https://github.com/idea2app/OpenMap, since Idea-React v1.0.0.
+Open Map component & model, have been migrated to https://github.com/idea2app/OpenReactMap, since Idea-React v1.0.0.
 
 ### Utilities
 
@@ -70,22 +70,10 @@ Open Map component & model, have been migrated to https://github.com/idea2app/Op
 ### CSS on CDN
 
 ```html
-<link
-    rel="stylesheet"
-    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
-/>
-<link
-    rel="stylesheet"
-    href="https://unpkg.com/[email protected]/font/bootstrap-icons.css"
-/>
-<link
-    rel="stylesheet"
-    href="https://unpkg.com/[email protected]/animate.min.css"
-/>
-<link
-    rel="stylesheet"
-    href="https://unpkg.com/[email protected]/themes/prism.min.css"
-/>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/font/bootstrap-icons.css" />
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/animate.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/prism.min.css" />
 <link rel="stylesheet" href="https://unpkg.com/idea-react/dist/index.css" />
 ```
 
@@ -109,11 +97,11 @@ Compatible with MobX 6/7:
 
 ```tsx
 import { formToJSON } from 'web-utility';
-import { PureComponent } from 'react';
+import { Component } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { Dialog, DialogClose } from 'idea-react';
 
-export class ExamplePage extends PureComponent {
+export class ExamplePage extends Component {
     inputDialog = new Dialog<Record<'a' | 'b', number>>(({ defer }) => (
         <Modal show={!!defer} onHide={() => defer?.reject(new DialogClose())}>
             <Modal.Header>Dialog</Modal.Header>

eslint.config.mjs renamed to 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

@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "2.0.0-rc.8",
+    "version": "2.0.0-rc.12",
     "license": "LGPL-3.0-or-later",
     "author": "[email protected]",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -22,40 +22,40 @@
     "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.17",
         "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-react-helper": "^0.3.1",
-        "prismjs": "^1.29.0",
-        "react-bootstrap": "^2.10.5",
+        "mobx": "^6.13.7",
+        "mobx-react": "^9.2.0",
+        "mobx-react-helper": "^0.4.0",
+        "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"
+        "react-dom": ">=16",
+        "react-element-to-jsx-string": ">=15"
     },
     "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/plugin-proposal-decorators": "^7.27.1",
+        "@babel/preset-typescript": "^7.27.1",
+        "@eslint/compat": "^1.2.9",
+        "@eslint/js": "^9.26.0",
+        "@microsoft/api-extractor": "^7.52.7",
+        "@parcel/config-default": "~2.14.4",
+        "@parcel/packager-ts": "~2.14.4",
+        "@parcel/transformer-less": "2.14.4",
+        "@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",
@@ -65,42 +65,51 @@
         "@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",
+        "@types/lodash": "^4.17.16",
+        "@types/node": "^22.15.17",
         "@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": "^18.3.21",
+        "@types/react-dom": "^18.3.7",
+        "@vitejs/plugin-react": "^4.4.1",
+        "eslint": "^9.26.0",
+        "eslint-config-prettier": "^10.1.3",
+        "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "globals": "^15.11.0",
-        "husky": "^9.1.6",
+        "globals": "^16.1.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.2",
+        "parcel": "~2.14.4",
+        "postcss-preset-env": "^10.1.6",
+        "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-element-to-jsx-string": "^15.0.0",
         "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"
+        "typedoc": "^0.28.4",
+        "typedoc-plugin-mdn-links": "^5.0.1",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.32.0",
+        "vite": "^5.4.19"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@swc/core",
+            "esbuild"
+        ]
     },
     "prettier": {
         "singleQuote": true,
         "trailingComma": "none",
         "arrowParens": "avoid",
         "tabWidth": 4,
+        "printWidth": 100,
         "plugins": [
             "prettier-plugin-css-order",
             "@softonus/prettier-plugin-duplicate-remover"