wso2 · brionmario · Apr 24, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.options": {
     "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
@@ -18,5 +18,28 @@
   "css.validate": false,
   "less.validate": false,
   "scss.validate": false,
-  "stylelint.validate": ["css", "scss"]
+  "stylelint.validate": [
+    "css",
+    "scss"
+  ],
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#ff6433",
+    "activityBar.background": "#ff6433",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#00ff3d",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#ff6433",
+    "statusBar.background": "#ff3d00",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#ff6433",
+    "statusBarItem.remoteBackground": "#ff3d00",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#ff3d00",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#ff3d0099",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#ff3d00"
 }
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,214 @@
+// @ts-check
+const path = require('path');
+
+/**
+ * @typedef {import('@babel/core')} babel
+ */
+
+const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
+const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';
+
+/**
+ * @param {string} relativeToBabelConf
+ * @returns {string}
+ */
+function resolveAliasPath(relativeToBabelConf) {
+  const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
+  return `./${resolvedPath.replace('\\', '/')}`;
+}
+
+/** @type {babel.PluginItem[]} */
+const productionPlugins = [
+  ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
+];
+
+/** @type {babel.ConfigFunction} */
+module.exports = function getBabelConfig(api) {
+  const useESModules = api.env(['regressions', 'modern', 'stable']);
+
+  const defaultAlias = {
+    '@oxygen-ui/react': resolveAliasPath('./packages/react/src'),
+    // '@mui/material': resolveAliasPath('./packages/mui-material/src'),
+    // '@mui/docs': resolveAliasPath('./packages/mui-docs/src'),
+    // '@mui/icons-material': resolveAliasPath(
+    //   `./packages/mui-icons-material/lib${useESModules ? '/esm' : ''}`,
+    // ),
+    // '@mui/lab': resolveAliasPath('./packages/mui-lab/src'),
+    // '@mui/internal-markdown': resolveAliasPath('./packages/markdown'),
+    // '@mui/styled-engine': resolveAliasPath('./packages/mui-styled-engine/src'),
+    // '@mui/styled-engine-sc': resolveAliasPath('./packages/mui-styled-engine-sc/src'),
+    // '@mui/styles': resolveAliasPath('./packages/mui-styles/src'),
+    // '@mui/system': resolveAliasPath('./packages/mui-system/src'),
+    // '@mui/private-theming': resolveAliasPath('./packages/mui-private-theming/src'),
+    // '@mui/base': resolveAliasPath('./packages/mui-base/src'),
+    // '@mui/utils': resolveAliasPath('./packages/mui-utils/src'),
+    // '@mui/joy': resolveAliasPath('./packages/mui-joy/src'),
+    // '@mui/internal-docs-utils': resolveAliasPath('./packages-internal/docs-utils/src'),
+    // docs: resolveAliasPath('./docs'),
+    // test: resolveAliasPath('./test'),
+  };
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        bugfixes: true,
+        browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
+        debug: process.env.MUI_BUILD_VERBOSE === 'true',
+        modules: useESModules ? false : 'commonjs',
+        shippedProposals: api.env('modern'),
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ];
+
+  const usesAliases =
+    // in this config:
+    api.env(['coverage', 'development', 'test', 'benchmark']) ||
+    process.env.NODE_ENV === 'test' ||
+    // in webpack config:
+    api.env(['regressions']);
+
+  const outFileExtension = '.js';
+
+  /** @type {babel.PluginItem[]} */
+  const plugins = [
+    [
+      'babel-plugin-macros',
+      {
+        muiError: {
+          errorCodesPath,
+          missingError,
+        },
+      },
+    ],
+    'babel-plugin-optimize-clsx',
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        useESModules,
+        // any package needs to declare 7.25.0 as a runtime dependency. default is ^7.0.0
+        version: process.env.MUI_BABEL_RUNTIME_VERSION || '^7.25.0',
+      },
+    ],
+    [
+      'babel-plugin-transform-react-remove-prop-types',
+      {
+        mode: 'unsafe-wrap',
+      },
+    ],
+    [
+      'transform-inline-environment-variables',
+      {
+        include: [
+          'MUI_VERSION',
+          'MUI_MAJOR_VERSION',
+          'MUI_MINOR_VERSION',
+          'MUI_PATCH_VERSION',
+          'MUI_PRERELEASE',
+        ],
+      },
+    ],
+    ...(useESModules
+      ? [
+          [
+            '@mui/internal-babel-plugin-resolve-imports',
+            {
+              // Don't replace the extension when we're using aliases.
+              // Essentially only replace in production builds.
+              outExtension: usesAliases ? null : outFileExtension,
+            },
+          ],
+        ]
+      : []),
+  ];
+
+  if (process.env.NODE_ENV === 'production') {
+    plugins.push(...productionPlugins);
+  }
+  if (process.env.NODE_ENV === 'test') {
+    plugins.push([
+      'babel-plugin-module-resolver',
+      {
+        alias: defaultAlias,
+        root: ['./'],
+      },
+    ]);
+  }
+
+  return {
+    assumptions: {
+      noDocumentAll: true,
+    },
+    presets,
+    plugins,
+    ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
+    overrides: [
+      {
+        exclude: /\.test\.(js|ts|tsx)$/,
+        plugins: ['@babel/plugin-transform-react-constant-elements'],
+      },
+      {
+        test: /(\.test\.[^.]+$|\.test\/)/,
+        plugins: [['@mui/internal-babel-plugin-resolve-imports', false]],
+      },
+    ],
+    env: {
+      coverage: {
+        plugins: [
+          'babel-plugin-istanbul',
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
+        ],
+      },
+      development: {
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              alias: {
+                ...defaultAlias,
+                modules: './modules',
+              },
+              root: ['./'],
+            },
+          ],
+        ],
+      },
+      test: {
+        sourceMaps: 'both',
+        plugins: [
+          [
+            'babel-plugin-module-resolver',
+            {
+              root: ['./'],
+              alias: defaultAlias,
+            },
+          ],
+        ],
+      },
+      benchmark: {
+        plugins: [
+          ...productionPlugins,
+          [
+            'babel-plugin-module-resolver',
+            {
+              alias: defaultAlias,
+            },
+          ],
+        ],
+      },
+    },
+  };
+};
diff --git a/docs/website/package.json b/docs/website/package.json
@@ -32,16 +32,16 @@
   },
   "dependencies": {
     "@next/font": "^13.4.5",
-    "@types/node": "18.11.10",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
+    "@types/node": "^18.19.25",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "18.3.0",
     "clsx": "^1.2.1",
     "eslint": "8.25.0",
     "next": "^13.4.5",
     "prettier": "^2.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.3"
+    "typescript": "^5.6.2"
   },
   "devDependencies": {
     "@oxygen-ui/logger": "2.0.0",

diff --git a/examples/multi-brand-identity/package.json b/examples/multi-brand-identity/package.json
@@ -42,9 +42,9 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.2.3",
-    "@types/node": "^16.18.3",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
+    "@types/node": "^18.19.25",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "18.3.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
     "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
@@ -56,7 +56,7 @@
     "react-scripts": "5.0.1",
     "stylelint": "^15.1.0",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.9.3",
+    "typescript": "^5.6.2",
     "web-vitals": "^2.1.4"
   },
   "browserslist": {

diff --git a/package.json b/package.json
@@ -33,17 +33,38 @@
     "typecheck": "nx run-many --target=typecheck --parallel"
   },
   "devDependencies": {
+    "@babel/cli": "^7.25.6",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-transform-react-constant-elements": "^7.25.1",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/types": "^7.20.2",
+    "@mui/internal-babel-plugin-resolve-imports": "^1.0.18",
     "@release-it/conventional-changelog": "^5.1.1",
+    "babel-plugin-istanbul": "^7.0.0",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-optimize-clsx": "^2.6.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "chalk": "^5.2.0",
+    "detect-indent": "^6.0.0",
+    "detect-newline": "^3.1.0",
+    "execa": "^9.4.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.1.0",
     "nx": "15.2.1",
     "release-it": "^15.9.1",
     "rimraf": "^3.0.2",
-    "detect-indent": "^6.0.0",
-    "detect-newline": "^3.1.0",
     "semver": "^7.1.3",
     "url-join": "^4.0.1",
     "validate-peer-dependencies": "^1.0.0",
     "walk-sync": "^2.0.2",
-    "yaml": "^2.1.1"
+    "yaml": "^2.1.1",
+    "yargs": "^17.7.2"
   },
   "publishConfig": {
     "access": "restricted"

diff --git a/packages/logger/package.json b/packages/logger/package.json
@@ -45,7 +45,7 @@
     "@rollup/plugin-typescript": "^10.0.1",
     "@types/chalk": "^2.2.0",
     "@types/jest": "^29.2.3",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.19.25",
     "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
     "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
     "babel-jest": "^29.3.1",
@@ -59,7 +59,7 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3"
+    "typescript": "^5.6.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/primitives/package.json b/packages/primitives/package.json
@@ -38,7 +38,7 @@
     "@divriots/style-dictionary-to-figma": "^0.4.0",
     "@oxygen-ui/logger": "2.0.0",
     "@types/jest": "^29.2.3",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.19.25",
     "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
     "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
     "cheerio": "1.0.0-rc.12",
@@ -51,7 +51,7 @@
     "svgson": "^5.2.1",
     "token-transformer": "^0.0.28",
     "trim-newlines": "^3.0.1",
-    "typescript": "^4.9.3"
+    "typescript": "^5.6.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -54,9 +54,9 @@
     "@rollup/plugin-virtual": "2.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/react": "18.0.25",
-    "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?d84dd6df97ba9812d30b17d482ecaec5d35d3e54",
-    "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?d84dd6df97ba9812d30b17d482ecaec5d35d3e54",
+    "@types/react": "^18.3.4",
+    "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
+    "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b21bbbd7379ab3b7315d7d9478dbd88c0bf11241",
     "babel-jest": "^29.3.1",
     "eslint": "8.25.0",
     "fs-extra": "^11.1.0",
@@ -68,7 +68,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.79.0",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3"
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",