feat: React 18 and MUI migration with ESLint v8 upgrade and RTL test migration

.eslintignore

@@ -3,4 +3,5 @@
 **/__test__
 **/test
 **/__mocks__
-**/lib
+**/lib
+packages/pie-models

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended"
@@ -17,9 +17,13 @@
     }
   },
   "parserOptions": {
+    "requireConfigFile": false,
     "ecmaFeatures": {
       "jsx": true
     },
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
     "sourceType": "module"
   },
   "rules": {
@@ -40,7 +44,7 @@
     "no-undef": "warn",
     "no-unreachable": "warn",
     "no-unused-vars": "warn",
-    "jsx-uses-vars": true,
+    "react/jsx-uses-vars": "warn",
     "constructor-super": "warn",
     "valid-typeof": "warn",
     "no-case-declarations": "warn",

__mocks__/@dnd-kit/core.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const useDraggable = jest.fn(() => ({
+  attributes: {},
+  listeners: {},
+  setNodeRef: jest.fn(),
+  transform: null,
+  isDragging: false,
+}));
+
+export const useDroppable = jest.fn(() => ({
+  setNodeRef: jest.fn(),
+  isOver: false,
+  node: { current: null },
+}));
+
+export const DndContext = ({ children }) => <div>{children}</div>;
+
+export const DragOverlay = ({ children }) => <div>{children}</div>;
+
+export const useSensor = jest.fn();
+export const useSensors = jest.fn(() => []);
+export const PointerSensor = jest.fn();
+export const KeyboardSensor = jest.fn();
+
+export const rectIntersection = jest.fn();
+export const closestCenter = jest.fn();
+export const closestCorners = jest.fn();
+
+export const getFirstCollision = jest.fn();
+export const pointerWithin = jest.fn();
+export const rectIntersectionAlgorithm = jest.fn();

__mocks__/@pie-lib/drag.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const uid = {
   withUid: jest.fn((input) => input),
   generateUid: jest.fn().mockReturnValue('1'),
@@ -9,6 +11,8 @@ export const DropTarget = jest.fn().mockReturnValue(() => ({}));
 
 export const PlaceHolder = (props) => <div componentName="placeholder">{props.children}</div>;
 
+export const DragProvider = ({ children }) => <div>{children}</div>;
+
 export const withDragContext = jest.fn((i) => i);
 
 export const swap = (input) => input;

__mocks__/@pie-lib/editable-html.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const EditableHtml = () => <div>EditableHtml</div>;
 
 export default EditableHtml;

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+// Mock for static file imports (images, fonts, etc.)
+module.exports = 'test-file-stub';

babel.config.js

@@ -1,11 +1,16 @@
-module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
-  plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-transform-runtime',
-  ],
-  ignore: ['node_modules', 'packages/**/lib'],
-  sourceMaps: true,
-};
+module.exports = (api) => {
+  const isTest = api.env('test');
+
+  return {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+    plugins: [
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-export-default-from',
+      '@babel/plugin-proposal-export-namespace-from',
+      '@babel/plugin-transform-runtime',
+    ],
+    // Don't ignore node_modules in test mode so ES modules can be transformed
+    ignore: isTest ? ['packages/**/lib'] : ['node_modules', 'packages/**/lib'],
+    sourceMaps: true,
+  };
+};

jest-resolver.js

@@ -0,0 +1,41 @@
+// Custom Jest resolver to handle node: protocol imports and workspace packages
+const path = require('path');
+const fs = require('fs');
+
+module.exports = (request, options) => {
+  // Strip 'node:' prefix from built-in module imports
+  if (request.startsWith('node:')) {
+    request = request.replace(/^node:/, '');
+  }
+
+  // Handle @pie-element workspace packages for Jest mocking
+  if (request.startsWith('@pie-element/')) {
+    const packageName = request.replace('@pie-element/', '');
+    const parts = packageName.split('/');
+    const mainPackage = parts[0];
+
+    // Check if it's a subpath like "rubric/configure/lib"
+    if (parts.length > 1) {
+      const subpath = parts.slice(1).join('/');
+      const libPath = path.join(options.rootDir, 'packages', mainPackage, subpath, 'index.js');
+      if (fs.existsSync(libPath)) {
+        return libPath;
+      }
+    }
+
+    // Try main package lib/index.js
+    const libPath = path.join(options.rootDir, 'packages', mainPackage, 'lib', 'index.js');
+    if (fs.existsSync(libPath)) {
+      return libPath;
+    }
+
+    // Fallback to src/index.js if lib doesn't exist
+    const srcPath = path.join(options.rootDir, 'packages', mainPackage, 'src', 'index.js');
+    if (fs.existsSync(srcPath)) {
+      return srcPath;
+    }
+  }
+
+  // Use the default Jest resolver
+  return options.defaultResolver(request, options);
+};

jest.config.js

@@ -1,16 +1,53 @@
 module.exports = {
-  verbose: true,
-  setupFiles: ['./jest.setup.js'],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
   testRegex: '(/__tests__/.*(\\.|/)(test|spec))\\.jsx?$',
+  setupFilesAfterEnv: ['./jest.setup.js'],
+
+  // Jest 29 requires explicit jsdom environment
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
+
+  verbose: true,
   testPathIgnorePatterns: ['old-packages', '/node_modules/', '/lib/', '/docs/'],
 
+  // Transform ES modules from these packages
+  transformIgnorePatterns: [
+    'node_modules/(?!(@mui|@emotion|@testing-library|@dnd-kit|@hello-pangea|@tiptap|konva|react-konva)/)',
+  ],
+
+  // Custom resolver to handle node: protocol imports
+  resolver: '<rootDir>/jest-resolver.js',
+
   moduleNameMapper: {
+    // CSS/Style imports
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+
+    // Image imports
+    '\\.(jpg|jpeg|png|gif|svg|webp)$': '<rootDir>/__mocks__/fileMock.js',
+
+    // Ensure React is resolved from a single location (fixes MUI nested node_modules issue)
+    '^react$': '<rootDir>/node_modules/react',
+    '^react-dom$': '<rootDir>/node_modules/react-dom',
+
+    // Legacy react-dnd mappings (for packages that haven't migrated to @dnd-kit)
     '^dnd-core$': 'dnd-core/dist/cjs',
     '^react-dnd$': 'react-dnd/dist/cjs',
     '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
     '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
     '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
     '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
   },
+
+  // Collect coverage from source files
+  collectCoverageFrom: [
+    'packages/*/src/**/*.{js,jsx}',
+    'packages/*/configure/src/**/*.{js,jsx}',
+    'packages/*/controller/src/**/*.{js,jsx}',
+    '!packages/*/src/**/*.d.ts',
+    '!packages/*/src/**/__tests__/**',
+    '!packages/*/src/**/__mocks__/**',
+    '!packages/*/configure/src/**/__tests__/**',
+    '!packages/*/controller/src/**/__tests__/**',
+  ],
 };