fix: use new JSX transform in preparation for React 19 (#5837)

Author: MarcusNotheis

.eslintrc.yml

@@ -10,6 +10,7 @@ env:
   es2022: true
 extends:
   - plugin:react/recommended
+  - plugin:react/jsx-runtime
   - plugin:react-hooks/recommended
   - plugin:import/recommended
   - plugin:prettier/recommended
@@ -112,8 +113,6 @@ overrides:
 
   - files:
       - 'cypress/**/*'
-    extends:
-      - 'plugin:react/jsx-runtime'
     rules:
       '@typescript-eslint/no-namespace': 'off'
 
@@ -124,7 +123,6 @@ overrides:
       - no-only-tests
     rules:
       '@typescript-eslint/no-empty-function': 'off'
-      'react/react-in-jsx-scope': 'off'
       'import/order': 'warn'
       'import/no-unresolved': 'off'
       'react/no-unescaped-entities': 'off'
@@ -135,7 +133,6 @@ overrides:
   - files:
       - '*.stories.tsx'
     extends:
-      - 'plugin:react/jsx-runtime'
       - 'plugin:storybook/recommended'
     rules:
       'react/prop-types': 'off' # inline custom components within stories don't need prop types

.storybook/components/ArgTypesWithNote.tsx

@@ -1,6 +1,6 @@
 import { ArgTypes } from '@storybook/blocks';
 import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
-import React, { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import classes from './ArgTypesWithNote.module.css';
 
 interface ArgTypesWithNotePropTypes {

.storybook/components/ControlsWithNote.tsx

@@ -1,6 +1,6 @@
 import { Controls } from '@storybook/blocks';
 import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
-import React, { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import classes from './ControlsWithNote.module.css';
 import { DomRefTable } from './DomRefTable';
 

.storybook/components/DocsHeader.tsx

@@ -11,7 +11,7 @@ import {
   ThemeProvider
 } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useGetSubComponentsOfModule } from '../utils';
 import classes from './DocsHeader.module.css';
 import { GitHubLogo } from './GitHub-Mark';

.storybook/components/Footer.tsx

@@ -11,7 +11,7 @@ import {
   PopoverPlacementType,
   WrappingType
 } from '@ui5/webcomponents-react';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
 import classes from './Footer.module.css';

.storybook/components/GitHub-Mark.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const GitHubLogo = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77" style={{ height: '1.75rem' }}>
     <g id="Layer_2" data-name="Layer 2">

.storybook/components/Import.tsx

@@ -1,5 +1,5 @@
 import { DocsContext } from '@storybook/addon-docs';
-import React, { useContext } from 'react';
+import { Fragment, useContext } from 'react';
 import { useGetCem, useGetSubComponentsOfModule } from '../utils';
 
 interface ImportStatementPropTypes {
@@ -39,11 +39,11 @@ export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPro
             <>
               {moduleNames.map((item) => {
                 return (
-                  <React.Fragment key={item}>
+                  <Fragment key={item}>
                     <br />
                     &nbsp;&nbsp;
                     {item},
-                  </React.Fragment>
+                  </Fragment>
                 );
               })}
               <br />

.storybook/components/LabelWithWrapping.tsx

@@ -1,5 +1,4 @@
 import { Label, WrappingType } from '@ui5/webcomponents-react';
-import React from 'react';
 
 //mdx adds a paragraph to children if added inline, this component prevents that.
 export const LabelWithWrapping = ({ children }) => {

.storybook/components/ProductsTable.tsx

@@ -8,7 +8,6 @@ import {
   TableRow,
   Text
 } from '@ui5/webcomponents-react';
-import React from 'react';
 import { ProductCollection } from './products.json';
 
 export const ProductsTable = () => {

.storybook/components/SplitterElementContent.tsx

@@ -1,5 +1,4 @@
 import { FlexBox, Text } from '@ui5/webcomponents-react';
-import React from 'react';
 
 export const SplitterElementContent = ({ text, background = 'transparent' }) => (
   <FlexBox style={{ height: '100%', width: '100%', background }} alignItems="Center" justifyContent="Center">

babel.config.cjs

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
 
 export function SsrLimitations() {

docs/knowledge-base/SsrLimitations.tsx

@@ -1,5 +1,5 @@
 import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
-import React, { useEffect, useReducer, useState } from 'react';
+import { useEffect, useReducer, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { MAPPED_THEMES } from '../../.storybook/utils';
 import { FlexBox, FlexBoxDirection, Label, Option, Panel, Select, Text, ThemeProvider } from '@ui5/webcomponents-react';

docs/knowledgeBaseExamples/ThemeableThemingParameters.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   ThemeProvider,
   Form,

docs/knowledgeBaseExamples/formExamples.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable react/prop-types */
 import { Bar, Button } from '@ui5/webcomponents-react';
-import React from 'react';
 
 const FaultyBarStart = () => {
   return <div>Start</div>;
@@ -10,7 +10,7 @@ const FaultyBarEnd = () => {
 export const FaultyBarComponent = () => {
   return (
     <Bar startContent={<FaultyBarStart />} endContent={<FaultyBarEnd />}>
-      <div>I'm not a custom component</div>
+      <div>Not a custom component</div>
     </Bar>
   );
 };
@@ -24,7 +24,7 @@ const BarEnd = (props) => {
 export const BarComponent = () => {
   return (
     <Bar startContent={<BarStart />} endContent={<BarEnd />}>
-      <div>I'm not a custom component</div>
+      <div>Not a custom component</div>
     </Bar>
   );
 };

docs/knowledgeBaseExamples/slotExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import './MyCustomElement.css';
 

docs/styling/MyCustomElement.tsx

@@ -8,77 +8,73 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
+    ecmaVersion: 'latest',
+    sourceType: 'module',
     ecmaFeatures: {
-      jsx: true,
-    },
+      jsx: true
+    }
   },
   env: {
     browser: true,
     commonjs: true,
-    es6: true,
+    es6: true
   },
-  ignorePatterns: ["!**/.server", "!**/.client"],
+  ignorePatterns: ['!**/.server', '!**/.client'],
 
   // Base config
-  extends: ["eslint:recommended"],
+  extends: ['eslint:recommended'],
 
   overrides: [
     // React
     {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
       extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended'
       ],
       settings: {
         react: {
-          version: "detect",
+          version: 'detect'
         },
-        formComponents: ["Form"],
+        formComponents: ['Form'],
         linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' }
         ],
-        "import/resolver": {
-          typescript: {},
-        },
-      },
+        'import/resolver': {
+          typescript: {}
+        }
+      }
     },
 
     // Typescript
     {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
       settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
           node: {
-            extensions: [".ts", ".tsx"],
+            extensions: ['.ts', '.tsx']
           },
           typescript: {
-            alwaysTryTypes: true,
-          },
-        },
+            alwaysTryTypes: true
+          }
+        }
       },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
+      extends: ['plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'plugin:import/typescript']
     },
 
     // Node
     {
-      files: [".eslintrc.cjs"],
+      files: ['.eslintrc.cjs'],
       env: {
-        node: true,
-      },
-    },
-  ],
+        node: true
+      }
+    }
+  ]
 };

examples/remix-ts/.eslintrc.cjs

@@ -1,10 +1,10 @@
-import { vitePlugin as remix } from "@remix-run/dev";
-import { installGlobals } from "@remix-run/node";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { vitePlugin as remix } from '@remix-run/dev';
+import { installGlobals } from '@remix-run/node';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 installGlobals();
 
 export default defineConfig({
-  plugins: [remix(), tsconfigPaths()],
+  plugins: [remix(), tsconfigPaths()]
 });

examples/remix-ts/vite.config.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { MediaEventProvider } from './EventProvider';
 import { attachMediaHandler, detachMediaHandler, getCurrentRange } from './Media';
 

packages/base/src/Device/Media.cy.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import React, { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback } from 'react';
 import {
   Bar,
   BarChart as BarChartLib,

packages/charts/src/components/BarChart/BarChart.tsx

@@ -1,5 +1,4 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const BarChartPlaceholder = () => {

packages/charts/src/components/BarChart/Placeholder.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import { forwardRef, useCallback, useMemo } from 'react';
 import {
   Bar,
   Brush,

packages/charts/src/components/BulletChart/BulletChart.tsx

@@ -1,5 +1,4 @@
 import type { CSSProperties } from 'react';
-import React from 'react';
 
 interface ComparisonLine {
   x?: number;

packages/charts/src/components/BulletChart/ComparisonLine.tsx

@@ -1,5 +1,4 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 

packages/charts/src/components/BulletChart/Placeholder.tsx

@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import React, { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback } from 'react';
 import {
   Bar as Column,
   BarChart as ColumnChartLib,

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -1,5 +1,4 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const ColumnChartPlaceholder = (props) => {

packages/charts/src/components/ColumnChart/Placeholder.tsx

@@ -2,7 +2,7 @@
 
 import { ThemingParameters, useIsomorphicId } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import type { TooltipProps, YAxisProps } from 'recharts';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -1,5 +1,4 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 
 export const ColumnChartWithTrendPlaceholder = (props) => {

packages/charts/src/components/ColumnChartWithTrend/Placeholder.tsx

@@ -1,5 +1,4 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import ContentLoader from 'react-content-loader';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';