chore: initialise ts admin (#18282)

* chore: initialise ts admin

* chore: set JSX to automatic

finally found it

* chore: set DTS true for the whole workflow to produce types for the helper-plugin

* chore(helper-plugin): fix the circular dependencies and calls for react

.github/workflows/tests.yml

@@ -17,6 +17,9 @@ permissions:
   contents: read # to fetch code (actions/checkout)
   actions: read
 
+env:
+  DTS: true
+
 jobs:
   changes:
     runs-on: ubuntu-latest
@@ -75,7 +78,7 @@ jobs:
       - name: Run build:ts
         run: yarn nx run-many --target=build:ts --nx-ignore-cycles --skip-nx-cache
       - name: Run build
-        run: DTS=true yarn nx run-many --target=build --nx-ignore-cycles --skip-nx-cache
+        run: yarn nx run-many --target=build --nx-ignore-cycles --skip-nx-cache
       - name: TSC for packages
         run: yarn nx affected --target=test:ts --nx-ignore-cycles
       - name: TSC for back

packages/core/admin/.eslintrc.js

@@ -2,8 +2,11 @@ module.exports = {
   root: true,
   overrides: [
     {
-      files: ['admin/**/*', 'ee/admin/**/*'],
+      files: ['ee/admin/**/*'],
       extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
     },
     {
       files: ['**/*'],

packages/core/admin/admin/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['custom/front/typescript'],
+    },
+  ],
+};

packages/core/admin/admin/src/components/UnauthenticatedLogo.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import styled from 'styled-components';
 
-import { useConfigurations } from '../../hooks';
+import { useConfigurations } from '../hooks/useConfigurations';
 
 const Img = styled.img`
   height: ${72 / 16}rem;
@@ -16,4 +14,4 @@ const Logo = () => {
   return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };
 
-export default Logo;
+export { Logo };

packages/core/admin/admin/src/contexts/Configurations/index.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const ConfigurationsContext = createContext({});
-
-export default ConfigurationsContext;

packages/core/admin/admin/src/contexts/configuration.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+interface ConfigurationsContextValue {
+  logos: {
+    auth: { custom?: string; default: string };
+  };
+}
+
+const ConfigurationsContext = createContext<ConfigurationsContextValue>({
+  logos: {
+    auth: { default: '' },
+  },
+});
+
+export { ConfigurationsContext };

packages/core/admin/admin/src/contexts/index.js

@@ -1,4 +1,4 @@
 export { default as AdminContext } from './Admin';
-export { default as ConfigurationsContext } from './Configurations';
+export { ConfigurationsContext } from './configuration';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
 export { default as ThemeToggleContext } from './ThemeToggle';

packages/core/admin/admin/src/hooks/__mocks__/useConfigurations.ts

@@ -1,7 +1,9 @@
-export default function () {
+const useConfigurations = () => {
   return {
     logos: {
       auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
     },
   };
-}
+};
+
+export { useConfigurations };

packages/core/admin/admin/src/hooks/index.js

@@ -1,4 +1,4 @@
-export { default as useConfigurations } from './useConfigurations';
+export { useConfigurations } from './useConfigurations';
 export { useContentTypes } from './useContentTypes';
 export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';
 export { default as useMenu } from './useMenu';

packages/core/admin/admin/src/hooks/useConfigurations.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ConfigurationsContext } from '../contexts/configuration';
+
+export const useConfigurations = () => useContext(ConfigurationsContext);

packages/core/admin/admin/src/hooks/useConfigurations/index.js

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-
-import { ConfigurationsContext } from '../../contexts';
-
-const useConfigurations = () => {
-  const context = useContext(ConfigurationsContext);
-
-  return context;
-};
-
-export default useConfigurations;

packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -6,7 +6,7 @@ import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import { Column, LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js

@@ -9,10 +9,12 @@ import * as yup from 'yup';
 
 import BaseLogin from '../BaseLogin';
 
-jest.mock('../../../../../hooks/useConfigurations', () => () => ({
-  logos: {
-    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
-  },
+jest.mock('../../../../../hooks/useConfigurations', () => ({
+  useConfigurations: () => ({
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  }),
 }));
 
 describe('ADMIN | PAGES | AUTH | BaseLogin', () => {

packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link, useQuery } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js

@@ -13,12 +13,13 @@ jest.mock('../../../../../components/LocalesProvider/useLocalesProvider', () =>
   localeNames: { en: 'English' },
   messages: ['test'],
 }));
-jest.mock('../../../../../hooks/useConfigurations', () => () => ({
-  logos: {
-    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
-  },
+jest.mock('../../../../../hooks/useConfigurations', () => ({
+  useConfigurations: () => ({
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  }),
 }));
-
 describe('ADMIN | PAGES | AUTH | Oops', () => {
   it('should render and match the snapshot', () => {
     const history = createMemoryHistory();

packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js

@@ -30,7 +30,7 @@ import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { useNpsSurveySettings } from '../../../../components/NpsSurvey/hooks/useNpsSurveySettings';
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js

@@ -15,7 +15,13 @@ import { FORMS } from '../../../constants';
 
 const PASSWORD_VALID = '!Eight_8_characters!';
 
-jest.mock('../../../../../hooks/useConfigurations');
+jest.mock('../../../../../hooks/useConfigurations', () => ({
+  useConfigurations: () => ({
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  }),
+}));
 jest.mock('../../../../../components/LocalesProvider/useLocalesProvider');
 
 jest.mock('@strapi/helper-plugin', () => ({

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js

@@ -14,10 +14,12 @@ jest.mock('../../../../../components/LocalesProvider/useLocalesProvider', () =>
   localeNames: { en: 'English' },
   messages: ['test'],
 }));
-jest.mock('../../../../../hooks/useConfigurations', () => () => ({
-  logos: {
-    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
-  },
+jest.mock('../../../../../hooks/useConfigurations', () => ({
+  useConfigurations: () => ({
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  }),
 }));
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),

packages/core/admin/admin/src/pages/UseCasePage/index.js

@@ -17,7 +17,7 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import Logo from '../../components/UnauthenticatedLogo';
+import { Logo } from '../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../layouts/UnauthenticatedLayout';
 
 export const options = [

packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js

@@ -14,10 +14,12 @@ jest.mock('../../../components/LocalesProvider/useLocalesProvider', () => () =>
   localeNames: { en: 'English' },
   messages: ['test'],
 }));
-jest.mock('../../../hooks/useConfigurations', () => () => ({
-  logos: {
-    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
-  },
+jest.mock('../../../hooks/useConfigurations', () => ({
+  useConfigurations: () => ({
+    logos: {
+      auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+    },
+  }),
 }));
 
 jest.mock('@strapi/helper-plugin', () => ({

packages/core/admin/admin/src/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@strapi/typescript-utils/tsconfigs/admin",
-
-  "include": [
-    "./",
-    "../../../**/admin/src/**/*",
-    "../../../../plugins/documentation/admin/src/**/*"
-  ],
-  "exclude": ["node_modules", "**/*.test.js", "*.js"]
-}

packages/core/admin/admin/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/client.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js

@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import Logo from '../../../../../../admin/src/components/UnauthenticatedLogo';
+import { Logo } from '../../../../../../admin/src/components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

packages/core/admin/package.json

@@ -37,6 +37,7 @@
     "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
     "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
     "test:front:ce:cov": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --coverage",
+    "test:ts:front": "run -T tsc -p admin/tsconfig.json",
     "lint": "run -T eslint ."
   },
   "dependencies": {

packages/core/admin/scripts/build.js

@@ -15,7 +15,7 @@ const smp = new SpeedMeasurePlugin();
 const buildAdmin = async () => {
   const entry = path.join(__dirname, '..', 'admin', 'src');
   const dest = path.join(__dirname, '..', 'build');
-  const tsConfigFilePath = path.join(__dirname, '..', 'admin', 'src', 'tsconfig.json');
+  const tsConfigFilePath = path.join(__dirname, '..', 'admin', 'tsconfig.json');
 
   /**
    * We _always_ install these FE plugins, they're considered "core"
@@ -94,7 +94,11 @@ const buildAdmin = async () => {
                 return acc + error.message;
               }
 
-              return acc + error.join('\n\n');
+              if (Array.isArray(error)) {
+                return acc + error.join('\n\n');
+              }
+
+              return acc + error;
             }, '')
           )
         );

packages/core/admin/webpack.config.dev.js

@@ -41,7 +41,7 @@ module.exports = () => {
     dest,
     env,
     options,
-    tsConfigFilePath: path.resolve(__dirname, 'admin', 'src', 'tsconfig.json'),
+    tsConfigFilePath: path.resolve(__dirname, 'admin', 'tsconfig.json'),
   };
 
   const config = webpackConfig(args);

packages/core/admin/webpack.config.js

@@ -91,6 +91,7 @@ module.exports = ({
           options: {
             loader: 'tsx',
             target: buildTarget,
+            jsx: 'automatic',
           },
         },
         {

packages/core/helper-plugin/package.json

@@ -71,6 +71,7 @@
     "@strapi/admin-test-utils": "4.14.0",
     "@strapi/design-system": "1.12.0",
     "@strapi/icons": "1.12.0",
+    "@strapi/types": "4.14.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/react": "18.2.7",

packages/core/helper-plugin/src/components/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {
   Button,

packages/core/helper-plugin/src/components/ContentBox.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Flex, FlexProps, Typography } from '@strapi/design-system';
 import styled from 'styled-components';
 

packages/core/helper-plugin/src/components/DynamicTable.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, useState } from 'react';
+import * as React from 'react';
 
 import {
   Button,
@@ -68,10 +68,10 @@ const Table = ({
   renderBulkActionsBar,
   ...rest
 }: TableProps<{ id: string }>) => {
-  const [selectedEntries, setSelectedEntries] = useState<Array<number | string>>([]);
-  const [showConfirmDeleteAll, setShowConfirmDeleteAll] = useState(false);
-  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
+  const [selectedEntries, setSelectedEntries] = React.useState<Array<number | string>>([]);
+  const [showConfirmDeleteAll, setShowConfirmDeleteAll] = React.useState(false);
+  const [showConfirmDelete, setShowConfirmDelete] = React.useState(false);
+  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = React.useState(false);
   const [{ query }] = useQueryParams();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -209,8 +209,8 @@ const Table = ({
             action={action}
           />
         ) : (
-          Children.toArray(children).map((child) =>
-            cloneElement(child as React.ReactElement, {
+          React.Children.toArray(children).map((child) =>
+            React.cloneElement(child as React.ReactElement, {
               entriesToDelete: selectedEntries,
               onClickDelete: handleClickDelete,
               onSelectRow: handleSelectRow,

packages/core/helper-plugin/src/components/EmptyBodyTable.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Box, Flex, Loader, Tbody, Td, Tr, RawTdProps } from '@strapi/design-system';
 
 import { EmptyStateLayout, EmptyStateLayoutProps } from './EmptyStateLayout';

packages/core/helper-plugin/src/components/EmptyStateLayout.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   EmptyStateLayout as Layout,
   EmptyStateLayoutProps as LayoutProps,

packages/core/helper-plugin/src/components/FilterPopoverURLQuery.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import { useTracking } from '../features/Tracking';
 import { useQueryParams } from '../hooks/useQueryParams';
 
-import type { EntityService } from '@strapi/strapi';
+import type { EntityService } from '@strapi/types';
 import type { DefaultFilterInputsProps, Filter, FilterData, Operator } from 'types';
 
 export interface FilterPopoverURLQueryProps extends Pick<PopoverProps, 'source'> {

packages/core/helper-plugin/src/components/Form.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import * as React from 'react';
 
 import { Form as FormikForm, FormikFormProps, useFormikContext } from 'formik';
 
@@ -8,10 +8,10 @@ export type FormProps = Omit<FormikFormProps, 'noValidate'>;
  * @deprecated Use Formik form directly instead.
  */
 const Form = ({ ...props }: FormProps) => {
-  const formRef = useRef<HTMLFormElement>(null!);
+  const formRef = React.useRef<HTMLFormElement>(null!);
   const { isSubmitting, isValidating, errors, touched } = useFormikContext();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (isSubmitting && !isValidating) {
       const errorsInForm = formRef.current.querySelectorAll('[data-strapi-field-error]');
 

packages/core/helper-plugin/src/components/GenericInput.tsx

@@ -30,7 +30,7 @@ import { useFocusInputField } from '../hooks/useFocusInputField';
 import { pxToRem } from '../utils/pxToRem';
 
 import type { InputType, TranslationMessage } from '../types';
-import type { Attribute } from '@strapi/strapi';
+import type { Attribute } from '@strapi/types';
 
 interface InputOption {
   metadatas: {
@@ -48,7 +48,7 @@ interface CustomInputProps<TAttribute extends Attribute.Any>
   hint?: string | React.JSX.Element | (string | React.JSX.Element)[];
 }
 
-interface GenericInputProps<TAttribute extends Attribute.Any = Attribute.Any> {
+export interface GenericInputProps<TAttribute extends Attribute.Any = Attribute.Any> {
   attribute: TAttribute;
   autoComplete?: string;
   customInputs?: Record<string, React.ComponentType<CustomInputProps<TAttribute>>>;

packages/core/helper-plugin/src/components/Link.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Link as DSLink, LinkProps as DSLinkProps } from '@strapi/design-system/v2';
 import { NavLink } from 'react-router-dom';
 

packages/core/helper-plugin/src/components/LinkButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   LinkButton as DSLinkButton,
   LinkButtonProps as DSLinkButtonProps,

packages/core/helper-plugin/src/components/NoContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { EmptyStateLayout, EmptyStateLayoutProps } from '@strapi/design-system';
 import { EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';

packages/core/helper-plugin/src/components/NoMedia.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { EmptyStateLayout, EmptyStateLayoutProps } from '@strapi/design-system';
 import { EmptyPictures } from '@strapi/icons';
 

packages/core/helper-plugin/src/components/NoPermissions.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { EmptyStateLayout, EmptyStateLayoutProps } from '@strapi/design-system';
 import { EmptyPermissions } from '@strapi/icons';
 import { useIntl } from 'react-intl';

packages/core/helper-plugin/src/components/NotAllowedInput.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { TextInput, TextInputProps } from '@strapi/design-system';
 import { EyeStriked } from '@strapi/icons';
 import { useIntl } from 'react-intl';

packages/core/helper-plugin/src/components/PaginationURLQuery.tsx

@@ -14,8 +14,6 @@
  * 1, ... 6, `7`, 8, 9, 10
  */
 
-import React from 'react';
-
 import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/design-system';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';

packages/core/helper-plugin/src/components/ReactSelect.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Box } from '@strapi/design-system';
 import { Cross, CarretDown } from '@strapi/icons';
 import Select, {

packages/core/helper-plugin/src/components/RelativeTime.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Duration, intervalToDuration, isPast } from 'date-fns';
 import { useIntl } from 'react-intl';
 

packages/core/helper-plugin/src/components/Status.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StatusVariant } from '@strapi/design-system';
 import styled, { DefaultTheme } from 'styled-components';
 

packages/core/helper-plugin/src/components/Table.tsx

@@ -27,7 +27,7 @@ import { SortIcon } from '../icons/SortIcon';
 import { ConfirmDialog } from './ConfirmDialog';
 import { EmptyStateLayout, EmptyStateLayoutProps } from './EmptyStateLayout';
 
-import type { Attribute } from '@strapi/strapi';
+import type { Attribute } from '@strapi/types';
 
 /* -------------------------------------------------------------------------------------------------
  * Context

packages/core/helper-plugin/src/components/tests/ConfirmDialog.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { lightTheme, ThemeProvider } from '@strapi/design-system';
 import { render as renderRTL, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -22,7 +20,7 @@ describe('ConfirmDialog', () => {
         {...props}
       />,
       {
-        wrapper: ({ children }: { children: React.JSX.Element }) => (
+        wrapper: ({ children }) => (
           <ThemeProvider theme={lightTheme}>
             <IntlProvider locale="en" messages={{}} defaultLocale="en">
               {children}

packages/core/helper-plugin/src/components/tests/ContentBox.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { lightTheme, ThemeProvider, Icon } from '@strapi/design-system';
 import { GlassesSquare, ExternalLink } from '@strapi/icons';
 import { render as renderRTL, screen } from '@testing-library/react';
@@ -29,7 +27,7 @@ describe('ContentBox', () => {
         {...props}
       />,
       {
-        wrapper: ({ children }: { children: React.JSX.Element }) => (
+        wrapper: ({ children }) => (
           <ThemeProvider theme={lightTheme}>
             <IntlProvider locale="en" messages={{}} textComponent="span">
               {children}

packages/core/helper-plugin/src/components/tests/FilterListURLQuery.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render } from '@tests/utils';
 import qs from 'qs';
 

packages/core/helper-plugin/src/components/tests/GenericInput.test.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
-
 import { DesignSystemProvider } from '@strapi/design-system';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, MemoryRouterProps } from 'react-router-dom';
 
-import { GenericInput } from '../GenericInput';
+import { GenericInput, GenericInputProps } from '../GenericInput';
 
-function renderField(props, { initialEntries } = {}) {
+function renderField(
+  props?: Partial<GenericInputProps>,
+  { initialEntries }: Pick<MemoryRouterProps, 'initialEntries'> = {}
+) {
   return {
     ...render(
+      // @ts-expect-error - TODO: fix the Attribute issue.
       <GenericInput
         intlLabel={{
           id: 'label.test',
@@ -43,7 +45,7 @@ jest.setTimeout(50000);
 
 describe('GenericInput', () => {
   describe('number', () => {
-    const renderNumber = (props) => {
+    const renderNumber = (props: Partial<GenericInputProps>) => {
       return renderField({
         type: 'number',
         name: 'number',
@@ -51,7 +53,6 @@ describe('GenericInput', () => {
           id: 'placeholder.test',
           defaultMessage: 'Default placeholder',
         },
-        hint: 'Hint message',
         required: true,
         ...props,
       });
@@ -132,7 +133,7 @@ describe('GenericInput', () => {
   });
 
   describe('date', () => {
-    const renderDate = (props) => {
+    const renderDate = (props?: Partial<GenericInputProps>) => {
       return renderField({
         type: 'date',
         name: 'date',
@@ -140,7 +141,6 @@ describe('GenericInput', () => {
           id: 'label.test',
           defaultMessage: 'date',
         },
-        onClear: jest.fn(),
         ...props,
       });
     };
@@ -163,7 +163,7 @@ describe('GenericInput', () => {
   });
 
   describe('datetime', () => {
-    const renderDateTime = (props) => {
+    const renderDateTime = (props?: Partial<GenericInputProps>) => {
       return renderField({
         type: 'datetime',
         name: 'datetime-picker',
@@ -171,7 +171,6 @@ describe('GenericInput', () => {
           id: 'label.test',
           defaultMessage: 'datetime picker',
         },
-        onClear: jest.fn(),
         ...props,
       });
     };
@@ -242,7 +241,7 @@ describe('GenericInput', () => {
       'text',
       'textarea',
       'time',
-    ])('auto-focuses on %s', (type) => {
+    ] as const)('auto-focuses on %s', (type) => {
       const { getByLabelText } = renderField(
         { type, name: 'test' },
         { initialEntries: [{ pathname: '/', search: `field=test` }] }

packages/core/helper-plugin/src/components/tests/NotAllowedInput.test.tsx

@@ -1,11 +1,3 @@
-/**
- *
- * Tests for NotAllowedInput
- *
- */
-
-import React from 'react';
-
 import { lightTheme, ThemeProvider } from '@strapi/design-system';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';

packages/core/helper-plugin/src/components/tests/PaginationURLQuery.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render } from '@tests/utils';
 
 import { PaginationURLQuery } from '../PaginationURLQuery';

packages/core/helper-plugin/src/components/tests/RelativeTime.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render } from '@tests/utils';
 
 import { RelativeTime } from '../RelativeTime';

packages/core/helper-plugin/src/components/tests/SearchURLQuery.test.tsx

@@ -1,10 +1,3 @@
-/**
- *
- * Tests for SearchURLQuery
- *
- */
-import React from 'react';
-
 import { render } from '@tests/utils';
 import { Route, RouteProps } from 'react-router-dom';
 
@@ -37,7 +30,7 @@ describe('<SearchURLQuery />', () => {
 
     const { user, getByRole } = render(<SearchURLQuery label="Search label" />, {
       renderOptions: {
-        wrapper({ children }: { children: React.JSX.Element }) {
+        wrapper({ children }) {
           return (
             <>
               {children}
@@ -72,7 +65,7 @@ describe('<SearchURLQuery />', () => {
 
     const { user, getByRole } = render(<SearchURLQuery label="Search label" />, {
       renderOptions: {
-        wrapper({ children }: { children: React.JSX.Element }) {
+        wrapper({ children }) {
           return (
             <>
               {children}

packages/core/helper-plugin/src/components/tests/Table.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { render, waitFor, renderHook, act } from '@tests/utils';
 

packages/core/helper-plugin/src/content-manager/CMEditViewDataManager.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { MessageDescriptor } from 'react-intl';
 import { InputType } from 'types';
 
-import type { Attribute, Schema } from '@strapi/strapi';
+import type { Attribute, Schema } from '@strapi/types';
 
 /**
  * TODO: All these types could be accurately inferred from

packages/core/helper-plugin/src/content-manager/utils/contentManagementUtilRemoveFieldsFromData.ts

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 
 import { getOtherInfos, getType } from './getAttributeInfos';
 
-import type { Schema } from '@strapi/strapi';
+import type { Schema } from '@strapi/types';
 
 const defaultFields = ['createdBy', 'updatedBy', 'publishedAt', 'id', '_id'];
 

packages/core/helper-plugin/src/content-manager/utils/formatContentTypeData.ts

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 
 import { getOtherInfos, getType } from './getAttributeInfos';
 
-import type { Schema } from '@strapi/strapi';
+import type { Schema } from '@strapi/types';
 
 const formatContentTypeData = <
   TSchema extends Schema.ContentType,

packages/core/helper-plugin/src/content-manager/utils/getAttributeInfos.ts

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 
-import type { Schema } from '@strapi/strapi';
+import type { Schema } from '@strapi/types';
 
 const getType = (schema: Schema.Schema, attrName: string) =>
   get(schema, ['attributes', attrName, 'type'], '');

packages/core/helper-plugin/src/content-manager/utils/tests/contentManagementUtilRemoveFieldsFromData.test.ts

@@ -2,7 +2,7 @@ import { contentManagementUtilRemoveFieldsFromData } from '../contentManagementU
 
 import { testData } from './testData';
 
-import type { Schema } from '@strapi/strapi';
+import type { Schema } from '@strapi/types';
 
 describe('STRAPI_HELPER_PLUGIN | utils', () => {
   describe('contentManagementUtilRemoveFieldsFromData', () => {

packages/core/helper-plugin/src/content-manager/utils/tests/formatContentTypeData.test.ts

@@ -2,7 +2,7 @@ import { formatContentTypeData } from '../formatContentTypeData';
 
 import { testData } from './testData';
 
-import type { Schema } from '@strapi/strapi';
+import type { Schema } from '@strapi/types';
 
 const { contentType, components, modifiedData } = testData;
 

packages/core/helper-plugin/src/content-manager/utils/tests/testData.ts

@@ -1,4 +1,4 @@
-import type { Schema } from '@strapi/strapi';
+import type { Schema } from '@strapi/types';
 
 const contentType: Schema.ContentType = {
   uid: 'api::test.test',

packages/core/helper-plugin/src/features/tests/Notifications.test.tsx

@@ -1,23 +1,22 @@
-import React from 'react';
-
 import { lightTheme, ThemeProvider } from '@strapi/design-system';
 import { act, render as renderRTL } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 
-import { NotificationsProvider, useNotification } from '../Notifications';
+import { NotificationConfig, NotificationsProvider, useNotification } from '../Notifications';
 
 const defaultNotificationConfig = {
   type: 'success',
   message: 'test',
-};
+} as const;
 
-// eslint-disable-next-line react/prop-types
-const Component = (notificationConfig) => {
+const Component = (notificationConfig: NotificationConfig) => {
   const toggleNotification = useNotification();
 
   const handleClick = () => {
-    toggleNotification({ ...defaultNotificationConfig, ...notificationConfig });
+    if (toggleNotification) {
+      toggleNotification({ ...defaultNotificationConfig, ...notificationConfig });
+    }
   };
 
   return (
@@ -27,7 +26,7 @@ const Component = (notificationConfig) => {
   );
 };
 
-const render = (props) => ({
+const render = (props?: NotificationConfig) => ({
   user: userEvent.setup({
     advanceTimers: jest.advanceTimersByTime,
   }),

packages/core/helper-plugin/src/hooks/tests/useQueryParams.test.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable check-file/filename-naming-convention */
 
-import React from 'react';
-
 import { renderHook, act } from '@tests/utils';
 import { Route, useLocation } from 'react-router-dom';
 

packages/core/helper-plugin/src/hooks/useFieldHint.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable check-file/filename-naming-convention */ // this is disabled because the file name is correct however, we do use JSX in this file.
-import React from 'react';
-
 import { useIntl } from 'react-intl';
 
 import type { MessageDescriptor, PrimitiveType } from 'react-intl';

packages/core/helper-plugin/src/icons/RemoveRoundedButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { IconButton, IconButtonProps } from '@strapi/design-system';
 import { Minus } from '@strapi/icons';
 import styled from 'styled-components';

packages/core/helper-plugin/src/types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { TrackingEvent } from './features/Tracking';
-import type { Attribute, EntityService } from '@strapi/strapi';
+import type { Attribute, EntityService } from '@strapi/types';
 import type { errors } from '@strapi/utils';
 import type { MessageDescriptor, PrimitiveType } from 'react-intl';
 

packages/core/helper-plugin/webpack.config.js

@@ -35,6 +35,7 @@ const baseConfig = {
           options: {
             loader: 'tsx',
             target: browserslistToEsbuild(),
+            jsx: 'automatic',
           },
         },
       },

yarn.lock

@@ -7503,6 +7503,7 @@ __metadata:
     "@strapi/admin-test-utils": 4.14.0
     "@strapi/design-system": 1.12.0
     "@strapi/icons": 1.12.0
+    "@strapi/types": 4.14.0
     "@testing-library/react": 14.0.0
     "@testing-library/user-event": 14.4.3
     "@types/react": 18.2.7