chore: [IOAPPX-405] Removing unused react imports

.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",
@@ -124,24 +127,27 @@ module.exports = {
     "no-restricted-imports": [
       "error",
       {
-        "paths": [
+        paths: [
           {
             name: "i18n-js",
-            message: 'Importing I18n from "i18n-js" is not allowed. Import it from "ts/i18n.ts" instead.',
-          }, 
+            message:
+              'Importing I18n from "i18n-js" is not allowed. Import it from "ts/i18n.ts" instead.'
+          },
           {
             name: "@pagopa/ts-commons",
             importNames: ["pot"],
-            message: 'Importing { pot } from "@pagopa/ts-commons" is not allowed. Use \'import * as pot from "@pagopa/ts-commons/lib/pot"\' instead.',
+            message:
+              'Importing { pot } from "@pagopa/ts-commons" is not allowed. Use \'import * as pot from "@pagopa/ts-commons/lib/pot"\' instead.'
           }
         ],
         patterns: [
           {
             group: ["**/config"],
             importNames: ["privacyUrl"],
-            message: 'Importing "privacyUrl" from "config.ts" module is restricted. Please use "tosConfigSelector" to obtain it instead.'
+            message:
+              'Importing "privacyUrl" from "config.ts" module is restricted. Please use "tosConfigSelector" to obtain it instead.'
           }
-        ]          
+        ]
       }
     ]
   },

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,
@@ -43,7 +43,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);