chore: [IOAPPX-405] Removing unused react imports (#6562)

## Short description
This pull request updates the ESLint and Babel configurations, along
with package dependencies, to support the latest version of the JSX
transform. This new transform enable the use of JSX without importing
React.

## List of changes proposed in this pull request
- Apply changes as described in official documentation
[here](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

## How to test
Ensure that the application works as expected, without any compilation
errors or runtime crashes

---------

Co-authored-by: Andrea <[email protected]>

.eslintrc.js

@@ -31,6 +31,9 @@ module.exports = {
     "@stylistic/eslint-plugin-js"
   ],
   rules: {
+    //Rules from react 17 https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-react": "off",
     "comma-dangle": ["error", "never"],
     "no-case-declarations": "off",
     "no-inner-declarations": "off",

babel.config.js

@@ -5,8 +5,20 @@ module.exports = {
     [
       "react-native-reanimated/plugin",
       {
-        globals: ["__scanCodes"]
-      }
-    ]
-  ]
+        globals: ["__scanCodes"],
+      },
+    ],
+    [
+      "@babel/plugin-transform-class-properties",
+      { loose: true },
+    ],
+    [
+      "@babel/plugin-transform-private-methods",
+      { loose: true },
+    ],
+    [
+      "@babel/plugin-transform-private-property-in-object",
+      { loose: true },
+    ],
+  ],
 };

package.json

@@ -52,6 +52,10 @@
     ]
   },
   "dependencies": {
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@babel/plugin-transform-react-jsx": "^7.25.9",
     "@gorhom/bottom-sheet": "^4.1.5",
     "@pagopa/io-app-design-system": "4.3.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
@@ -178,7 +182,7 @@
     "xstate": "^5"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-typescript": "^7.23.3",
@@ -226,6 +230,7 @@
     "chalk": "^2.4.1",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ft-flow": "latest",
     "eslint-plugin-functional": "^4.1.1",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest": "^28.8.3",

ts/App.tsx

@@ -4,7 +4,6 @@ import {
   IOThemeContextProvider,
   ToastProvider
 } from "@pagopa/io-app-design-system";
-import * as React from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Provider } from "react-redux";

ts/RootContainer.tsx

@@ -1,6 +1,6 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import * as React from "react";
+import { PureComponent } from "react";
 import {
   AppState,
   AppStateStatus,
@@ -41,7 +41,7 @@ type Props = ReturnType<typeof mapStateToProps> &
  * - the UpdateAppModal, if the backend is not compatible with the installed app version
  * - the root for displaying light modals
  */
-class RootContainer extends React.PureComponent<Props> {
+class RootContainer extends PureComponent<Props> {
   private subscription: NativeEventSubscription | undefined;
   constructor(props: Props) {
     super(props);

ts/__mocks__/@gorhom/bottom-sheet.ts

@@ -7,7 +7,7 @@
  *
  * reference: https://github.com/gorhom/react-native-bottom-sheet/blob/master/mock.js
  */
-import React, { PropsWithChildren } from "react";
+import { Component, PropsWithChildren } from "react";
 
 const NOOP = () => {};
 const NOOP_VALUE = { value: 0, set: NOOP, get: () => 0 };
@@ -18,7 +18,7 @@ const BottomSheetBackdrop = NOOP;
 
 const BottomSheetComponent = (props: PropsWithChildren) => props.children;
 
-class BottomSheetModal extends React.Component<PropsWithChildren> {
+class BottomSheetModal extends Component<PropsWithChildren> {
   snapToIndex() {}
   snapToPosition() {}
   expand() {}
@@ -33,7 +33,7 @@ class BottomSheetModal extends React.Component<PropsWithChildren> {
   }
 }
 
-class BottomSheet extends React.Component<PropsWithChildren> {
+class BottomSheet extends Component<PropsWithChildren> {
   snapToIndex() {}
   snapToPosition() {}
   expand() {}

ts/__mocks__/react-native-text-input-mask.ts

@@ -1,9 +1,9 @@
 /**
  * Mocked version of TextInputMask
  */
-import React from "react";
+import { Component } from "react";
 
-class TextInputMask extends React.Component {
+class TextInputMask extends Component {
   public render() {
     return null;
   }

ts/components/AnimatedImage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { ComponentProps } from "react";
 import { Image } from "react-native";
 import Animated, {
   Easing,
@@ -7,7 +7,7 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 
-export type AnimatedImageProps = React.ComponentProps<typeof Image>;
+export type AnimatedImageProps = ComponentProps<typeof Image>;
 
 /**
  * AnimatedImage component renders an image with a fade-in animation

ts/components/AppVersion.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   GestureResponderEvent,
   Pressable,

ts/components/BonusCard/BonusCard.tsx

@@ -1,21 +1,22 @@
 import {
   Avatar,
+  BodySmall,
   H2,
   HSpacer,
   IOColors,
-  BodySmall,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import React from "react";
+
+import { Fragment, ReactNode, useMemo } from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Placeholder from "rn-placeholder";
 import {
   heightPercentageToDP,
   widthPercentageToDP
 } from "react-native-responsive-screen";
-import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Placeholder from "rn-placeholder";
 import { useIOSelector } from "../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences";
 import { BonusCardCounter } from "./BonusCardCounter";
 import { BonusCardShape } from "./BonusCardShape";
 import { BonusCardStatus } from "./BonusCardStatus";
@@ -29,10 +30,10 @@ type ContentProps = {
   logoUris?: Array<ImageURISource | number>;
   name: string;
   organizationName: string;
-  status: React.ReactNode;
+  status: ReactNode;
   counters?: ReadonlyArray<BonusCardCounter>;
-  cardFooter?: React.ReactNode;
-  cardBackground?: React.ReactNode;
+  cardFooter?: ReactNode;
+  cardBackground?: ReactNode;
 };
 
 type LoadingStateProps =
@@ -86,10 +87,10 @@ const BonusCardContent = (props: BonusCard) => {
           {counters.map((counter, index) => {
             const isLast = index === counters.length - 1;
             return (
-              <React.Fragment key={`${counter.label}_${index}`}>
+              <Fragment key={`${counter.label}_${index}`}>
                 <BonusCardCounter {...counter} />
                 {!isLast && <HSpacer size={16} />}
-              </React.Fragment>
+              </Fragment>
             );
           })}
         </View>
@@ -110,7 +111,7 @@ export const BonusCard = (props: BonusCard) => {
   // This will generate a new key based on isLoading state.
   // A new key will force BonusCardShape to rerender, remeasuring the layout and adapting to new
   // container size.
-  const shapeKey = React.useMemo(
+  const shapeKey = useMemo(
     () => props.isLoading && Math.random().toString(36).slice(2),
     [props.isLoading]
   );

ts/components/BonusCard/BonusCardCounter.tsx

@@ -1,5 +1,5 @@
 import { H3, IOColors, LabelMini, VSpacer } from "@pagopa/io-app-design-system";
-import * as React from "react";
+import { useEffect } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, {
   useAnimatedStyle,
@@ -78,7 +78,7 @@ const BonusProgressBar = ({ progress }: BonusProgressBarProps) => {
     : IOColors.blue;
 
   const width = useSharedValue(100);
-  React.useEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     width.value = progress * 100;
   });

ts/components/BonusCard/BonusCardScreenComponent.tsx

@@ -1,10 +1,10 @@
 import { HeaderActionProps } from "@pagopa/io-app-design-system";
-import { default as React, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Dimensions } from "react-native";
 import Animated, { useAnimatedRef } from "react-native-reanimated";
+import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
 import { IOScrollView, IOScrollViewActions } from "../ui/IOScrollView";
-import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 import { BonusCard } from "./BonusCard";
 
 type BaseProps = {

ts/components/BonusCard/BonusCardShape.tsx

@@ -1,5 +1,4 @@
 import { IOColors, useIOTheme } from "@pagopa/io-app-design-system";
-import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Circle, ClipPath, Defs, Path, Rect, Svg } from "react-native-svg";
 import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences";

ts/components/BonusCard/BonusCardStatus.tsx

@@ -1,17 +1,18 @@
 import { IOColors } from "@pagopa/io-app-design-system";
-import React from "react";
+
+import { ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
-import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences";
 import { useIOSelector } from "../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../store/reducers/persistedPreferences";
 
 type LoadingProps = {
   isLoading: true;
 };
 
 type BaseProps = {
   isLoading?: never;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export type BonusCardStatus = LoadingProps | BaseProps;

ts/components/BonusCard/__tests__/BonusCard.test.tsx

@@ -1,6 +1,5 @@
 import { LabelMini } from "@pagopa/io-app-design-system";
 import { render } from "@testing-library/react-native";
-import React from "react";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import I18n from "../../../i18n";

ts/components/BonusCard/__tests__/BonusCardCounter.test.tsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react-native";
-import React from "react";
 import { Provider } from "react-redux";
 import { Store, createStore } from "redux";
 import { applicationChangeState } from "../../../store/actions/application";

ts/components/BonusCard/__tests__/BonusCardStatus.test.tsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react-native";
-import React from "react";
 import { Provider } from "react-redux";
 import { Store, createStore } from "redux";
 import I18n from "../../../i18n";

ts/components/BulletList.tsx

@@ -7,7 +7,7 @@ import {
   IOStyles,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import React, { ComponentProps, memo, useCallback } from "react";
+import { ComponentProps, memo, useCallback } from "react";
 import { View } from "react-native";
 
 const BULLET_ITEM = "\u2022";

ts/components/CalendarList.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Calendar } from "react-native-calendar-events";
 import {
   ContentWrapper,

ts/components/CalendarsListContainer.tsx

@@ -1,5 +1,5 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import React, { memo, useCallback, useEffect, useState } from "react";
+import { Fragment, memo, useCallback, useEffect, useState } from "react";
 import RNCalendarEvents, { Calendar } from "react-native-calendar-events";
 import {
   ListItemHeader,
@@ -133,7 +133,7 @@ const CalendarsListContainer = ({
   return (
     pot.isSome(calendarsByAccount) &&
     calendarsByAccount.value.map((section, index) => (
-      <React.Fragment key={index}>
+      <Fragment key={index}>
         <ListItemHeader label={section.title} />
         <RadioGroup<string>
           type="radioListItem"
@@ -144,7 +144,7 @@ const CalendarsListContainer = ({
         />
         {/* not show the end spacer if the element is the last */}
         {index < calendarsByAccount.value.length - 1 && <VSpacer size={24} />}
-      </React.Fragment>
+      </Fragment>
     ))
   );
 };

ts/components/Carousel.tsx

@@ -1,5 +1,5 @@
 import { IOAppMargin, WithTestID } from "@pagopa/io-app-design-system";
-import React, {
+import {
   JSXElementConstructor,
   ReactElement,
   Ref,

ts/components/DebugInfoOverlay.tsx

@@ -6,8 +6,8 @@ import {
   hexToRgba,
   useIOTheme
 } from "@pagopa/io-app-design-system";
-import * as React from "react";
-import { useState } from "react";
+
+import { FunctionComponent, useState } from "react";
 import { Platform, Pressable, SafeAreaView, StyleSheet } from "react-native";
 import { widthPercentageToDP } from "react-native-responsive-screen";
 import { connect } from "react-redux";
@@ -56,7 +56,7 @@ const styles = StyleSheet.create({
   }
 });
 
-const DebugInfoOverlay: React.FunctionComponent<Props> = (props: Props) => {
+const DebugInfoOverlay: FunctionComponent<Props> = (props: Props) => {
   const theme = useIOTheme();
   const appVersion = getAppVersion();
   const [showRootName, setShowRootName] = useState(true);