chore(renderer): migrate to typescript

Author: Hyperkid123

__mocks__/with-provider.js

@@ -3,13 +3,17 @@ import React from 'react';
 import { RendererContext } from '@data-driven-forms/react-form-renderer';
 import Form from '@data-driven-forms/react-form-renderer/form';
 
-const RenderWithProvider = ({ value = { formOptions: {internalRegisterField: jest.fn(), internalUnRegisterField: jest.fn()} }, children, onSubmit = () => {} }) => {
+const RenderWithProvider = ({
+  value = { formOptions: { internalRegisterField: jest.fn(), internalUnRegisterField: jest.fn() } },
+  children,
+  onSubmit = () => {},
+}) => {
   return (
     <Form onSubmit={onSubmit}>
       {() => (
         <RendererContext.Provider
           value={{
-            ...value
+            ...value,
           }}
         >
           {children}

debug-generate-packages.js

@@ -0,0 +1,46 @@
+const glob = require('glob');
+const path = require('path');
+const fse = require('fs-extra');
+
+const packagePath = process.cwd();
+const src = path.resolve(packagePath, './src');
+
+console.log('packagePath:', packagePath);
+console.log('src:', src);
+
+async function generatePackages() {
+  const directories = glob
+    .sync(`${src}/*/`)
+    .filter((name) => !name.includes('/tests/'))
+    .map((path) =>
+      path
+        .replace(/\/$/, '')
+        .split('/')
+        .pop()
+    );
+
+  console.log('Found directories:', directories);
+
+  directories.forEach((dir) => {
+    const targetPath = path.resolve(packagePath, dir, 'package.json');
+    const targetDir = path.resolve(packagePath, dir);
+    console.log(`Directory: ${dir}`);
+    console.log(`  Target dir: ${targetDir}`);
+    console.log(`  Target path: ${targetPath}`);
+    console.log(`  Directory exists: ${fse.existsSync(targetDir)}`);
+  });
+
+  // Don't actually write anything yet
+  return Promise.resolve();
+}
+
+async function run() {
+  try {
+    await generatePackages();
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+run();

jest.preset.js

@@ -11,7 +11,10 @@ module.exports = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/../../__mocks__/fileMock.js',
     '\\.(css|scss)$': 'identity-obj-proxy',
   },
-  transformIgnorePatterns: ['node_modules/(?!(@testing-library|@data-driven-forms)/)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@testing-library|@data-driven-forms)/)',
+    '/config/jest\\.setup\\.js$'
+  ],
   setupFilesAfterEnv: [setupTestsPath, 'jest-canvas-mock'],
   testPathIgnorePatterns: ['/node_modules/', 'packages/suir-component-mapper/', 'packages/parsers/', '/templates/', '/.nx/'],
   modulePathIgnorePatterns: [

package-lock.json

@@ -51,6 +51,7 @@
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.23",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "^8.0.0",

package.json

@@ -1,9 +1,6 @@
 export default {
   displayName: '@data-driven-forms/blueprint-component-mapper',
   preset: '../../jest.preset.js',
-  transform: {
-    '^.+\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
-  },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   coverageDirectory: '../../coverage/packages/blueprint-component-mapper',
 };

packages/blueprint-component-mapper/jest.config.ts

@@ -8,10 +8,13 @@
     "jsx": "preserve",
     "allowSyntheticDefaultImports": true,
     "noErrorTruncation": true,
-    "allowJs": true,
+    "allowJs": false,
     "strict": true,
-    "noEmit": true
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "outDir": "./dist",
+    "rootDir": "./src"
   },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
-  "exclude": ["./dist"]
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./dist", "./src/tests/**/*", "./node_modules"]
 }

packages/common/tsconfig.json

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { RendererContext } from '@data-driven-forms/react-form-renderer';
+import Form from '@data-driven-forms/react-form-renderer/form';
+
+const RenderWithProvider = ({
+  value = { formOptions: { internalRegisterField: jest.fn(), internalUnRegisterField: jest.fn() } },
+  children,
+  onSubmit = () => {},
+}) => {
+  return (
+    <Form onSubmit={onSubmit}>
+      {() => (
+        <RendererContext.Provider
+          value={{
+            ...value,
+          }}
+        >
+          {children}
+        </RendererContext.Provider>
+      )}
+    </Form>
+  );
+};
+
+export default RenderWithProvider;

packages/mui-component-mapper/src/tests/__mocks__/with-provider.js

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 
 import Checkbox from '../checkbox';
 
-import RenderWithProvider from '../../../../__mocks__/with-provider';
+import RenderWithProvider from './__mocks__/with-provider';
 import FormTemplate from '../form-template';
 import componentMapper from '../component-mapper';