chore: [IAI-231] Add eslint-plugin-react-native to detect unused st…

…yle and/or bad practices (pagopa#4081)

* Delete NativeBase `View` component, replace with native one

* Remove broken link to Invision

* Remove unused variable in the theme variables' file

* Improve visual appearance of colors in UI showroom

* Add IOColorGradients object, add relative UI Showroom Item to display it

* Add all the gradients used in the app

* Add all remaining color values from generic `variables` object and other code blocks

* Replace white `brandPrimaryInverted` color with `white`

* Replace `colorWhite` references with new ones from the `IOColors` object

* Restore `View` from `native-base` to avoid a worse view of UI showroom page

* Resolve lint errors

* Resolve TS compilation errors

* Remove `brandGray` color reference

* Remove `brandLightGray` color reference

* Remove `lightGray` color reference, replaced with `grey`

* Remove `brandDarkGray` color reference, replaced with `bluegrey`

* Remove variables found in the JEST tests from `IOColors`, because they're dynamically generated

* Remove `brandDarkestGray` color reference, replaced with new `textColorDark` variable and `bluegreyDark`

* Remove `darkerGrey`, replace it with similar `bluegrey` tone

* Move `milderGray` color from `variables.ts` to  `IOColors` object

* Add `colorSkeleton` variable, remove `brandMildGray`, update `itemSeparator` value

* Remove `lightestGray`, update `HeaderIcon…` values with specific `IOColors` values

* Update `btnLightBorderColor` value

* Add custom arrow to make comments more eloquent

* Remove `greyUltralight` in favour of `brandGray`, also renamed into `greyUltraLight`

* Remove `lighterGray` from `variables.ts`, move it into `IOColors`

* Replace `optCodeComponent` color value with `bluegreyLight`

* Replace `lighterGray` color value with similar `bluegreyLight`

* Remove references of `colorBlack` in `variables.ts`

* Add new `cardShadow` alias token, remove `featuredCardShadow` value from `IOColors`

* Remove unused import from `GoBackButton`

* Remove redundant values of `blue`, rename `brandPrimary` into `colorPrimary`

* Rename secondary colors with a reference to the tone, not the function

* Restore `brandPrimary` color value to avoid visual glitches in the loading screen

* Delete similar tone of `aqua`

* Remove `badgeYellow` from `variables.ts`, rarely used

* Rename `brandSuccess` into `colorSuccess`

* Remove various shades of `red` and `green`, rename `brandDanger` into `colorDanger`

* Change tone of green, according to the design project

* Remove `blueDark` (also known as Italia colour), fix style of loading views accordingly

* Update reference to white value in `variables.ts`

* Remove deprecated yellow gradient

* Add reference to `grey` gradient in the `DarkLayout` component, remove hardcoded values

* Make `IOColorGradients` the single source of truth for all the gradients (except `appLaunch` and `appIcon`)

* Add `eslint-plugin-react-native` to detect unused styles or bad practices

* Remove unused styles of the `wallet` components

* Remove unused styles from the `services` and `showroom` components

* Remove unused styles from the `profile` components

* Remove unused styles from the `onboarding` and `modal` components

* Remove unused styles from the `authentication`, `ingress` and `messages` components

* Remove single element style arrays with automatic fix option of the `eslint` command

* Remove all the left unused styles

* Remove hardcoded color values after check with `eslint`

* Fix tsc compile errors after the useless code's removal

* Add `hexToRgba` function to convert color values, replace all the hardcoded RGBa values

* Replace all the left RGBa hardcoded values

* Resolve prettier check fail

* Remove hardcoded color value from PN message timeline

* Restore original variables names for success and error state because related to NativeBase

* Update Jest snaphots

* Update CustomBadge Jest snapshot

* Add more explicit condition to CheckBox (ingress variant)

Co-authored-by: Emilio Pavia <[email protected]>

* Move `getGradientColorValues` into `IOColors.ts` file

* Use the new `getGradientColorValues` function to get colours in `DarkLayout`

* Fixes after merge

* Replace RBG reference with value from IOColors, using `hexToRgba`Update ts/components/LoadingSpinnerOverlay.tsx

Co-authored-by: Cristiano Tofani <[email protected]>

* Remove repeated stylesheet property from `ServiceDetailsScreen`

* Fix lint errors surfaced from previous work done after the PR

* Fix `tsc` compilation errors

* Fix snapshot tests

Co-authored-by: Emilio Pavia <[email protected]>
Co-authored-by: Cristiano Tofani <[email protected]>

.eslintrc.js

@@ -12,11 +12,15 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "tsconfig.json",
-    sourceType: "module"
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true
+    }
   },
   plugins: [
     "@typescript-eslint",
     "react",
+    "react-native",
     "react-hooks",
     "import",
     "functional",
@@ -93,7 +97,17 @@ module.exports = {
     "functional/immutable-data": "error",
     "sonarjs/no-small-switch": "off",
     "sonarjs/no-duplicate-string": "off",
-    "sonarjs/no-nested-template-literals": "warn"
+    "sonarjs/no-nested-template-literals": "warn",
+    "react-native/no-unused-styles": "error",
+    "react-native/split-platform-components": "off",
+    "react-native/no-inline-styles": "off",
+    "react-native/no-color-literals": "error",
+    "react-native/no-raw-text":
+      "off" /* Error when you launch the lint command */,
+    "react-native/no-single-element-style-arrays": "warn"
+  },
+  env: {
+    "react-native/react-native": true
   },
   overrides: [
     {

package.json

@@ -110,6 +110,7 @@
     "date-fns": "^1.29.0",
     "deprecated-react-native-prop-types": "^2.3.0",
     "detox": "^19.7.0",
+    "eslint-plugin-react-native": "^4.0.0",
     "fbjs": "^3.0.2",
     "fp-ts": "^2.12.1",
     "front-matter": "^4.0.2",

ts/components/BarcodeCamera.tsx

@@ -20,6 +20,7 @@ import { isAndroid } from "../utils/platform";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import { Body } from "./core/typography/Body";
 import { Label } from "./core/typography/Label";
+import { IOColors } from "./core/variables/IOColors";
 
 /**
  * Type describing the supported barcodes in IO.
@@ -61,7 +62,7 @@ const styles = StyleSheet.create({
     position: "relative",
     width: "100%",
     height: screenWidth,
-    backgroundColor: "#000"
+    backgroundColor: IOColors.black
   },
 
   camera: {

ts/components/CiePinpad/index.tsx

@@ -2,7 +2,6 @@ import { View } from "native-base";
 import * as React from "react";
 import { StyleSheet, TextInput } from "react-native";
 import I18n from "../../i18n";
-import customVariables from "../../theme/variables";
 import InputPlaceHolder from "../Pinpad/InputPlaceholder";
 import { INPUT_PLACEHOLDER_HEIGHT } from "../Pinpad/Placeholders";
 import { IOColors } from "../core/variables/IOColors";
@@ -15,27 +14,8 @@ type Props = {
 };
 
 const styles = StyleSheet.create({
-  placeholderContainer: {
-    flexDirection: "row",
-    justifyContent: "center"
-  },
-  text: {
-    alignSelf: "center",
-    justifyContent: "center",
-    color: IOColors.white
-  },
-  placeHolderStyle: {
-    height: 4,
-    marginLeft: 2,
-    marginRight: 2,
-    marginTop: 2
-  },
-  textInputStyle: {
-    textAlign: "center",
-    fontSize: customVariables.fontSize3
-  },
   input: {
-    color: "transparent",
+    color: `transparent`,
     position: "absolute",
     width: "100%",
     height: INPUT_PLACEHOLDER_HEIGHT

ts/components/FiscalCodeComponent.tsx

@@ -341,11 +341,11 @@ export default class FiscalCodeComponent extends React.Component<Props> {
       <Text
         robotomono={true}
         bold={true}
-        style={[
+        style={
           isLandscape
             ? [styles.landscapeText, landscapeStyle]
             : [styles.fullText, fullStyle]
-        ]}
+        }
         selectable={selectable}
         accessible={true}
         accessibilityElementsHidden={true}

ts/components/LoadingSpinnerOverlay.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 import I18n from "../i18n";
 import variables from "../theme/variables";
+import { IOColors, hexToRgba } from "../components/core/variables/IOColors";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator";
 import { Overlay } from "./ui/Overlay";
@@ -37,7 +38,7 @@ class LoadingSpinnerOverlay extends React.Component<Props> {
     } = this.props;
     return (
       <Overlay
-        backgroundColor={`rgba(255,255,255,${loadingOpacity})`}
+        backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
         foreground={
           isLoading && (
             <BoxedRefreshIndicator

ts/components/PinCreationForm.tsx

@@ -21,10 +21,6 @@ export type Props = {
 const styles = StyleSheet.create({
   flex: {
     flex: 1
-  },
-  header: {
-    fontSize: 20,
-    lineHeight: 22
   }
 });
 

ts/components/Pinpad/KeyPad.tsx

@@ -7,7 +7,7 @@ import { Platform, StyleSheet } from "react-native";
 import { makeFontStyleObject } from "../../theme/fonts";
 import customVariables from "../../theme/variables";
 import ButtonDefaultOpacity from "../ButtonDefaultOpacity";
-import { IOColors } from "../core/variables/IOColors";
+import { hexToRgba, IOColors } from "../core/variables/IOColors";
 import StyledIconFont from "../ui/IconFont";
 
 // left -> the string to represent as text
@@ -27,6 +27,7 @@ type Props = Readonly<{
 // it generate buttons width of 56
 const radius = 18;
 const BUTTON_DIAMETER = 56;
+const opaqueButtonBackground = hexToRgba(IOColors.black, 0.1);
 
 const styles = StyleSheet.create({
   roundButton: {
@@ -40,23 +41,17 @@ const styles = StyleSheet.create({
     width: BUTTON_DIAMETER,
     height: BUTTON_DIAMETER,
     borderRadius: BUTTON_DIAMETER / 2,
-    backgroundColor: `rgba(0,0,0,0.1)`
+    backgroundColor: opaqueButtonBackground
   },
   transparent: {
-    backgroundColor: "transparent"
+    backgroundColor: `transparent`
   },
   buttonTextBase: {
     ...makeFontStyleObject(Platform.select, "300"),
     fontSize: 30,
     lineHeight: 32,
     marginBottom: -10
   },
-  white: {
-    color: IOColors.white
-  },
-  buttonTextDigit: {
-    fontSize: radius + 10
-  },
   buttonTextLabel: {
     fontSize: radius - 5
   },
@@ -117,7 +112,7 @@ const renderPinCol = (
               <StyledIconFont
                 name={ic.name}
                 size={ic.size}
-                style={[styles.noPadded]}
+                style={styles.noPadded}
                 color={
                   buttonType === "light"
                     ? customVariables.contentPrimaryBackground

ts/components/Pinpad/index.tsx

@@ -44,10 +44,6 @@ interface State {
 }
 
 const styles = StyleSheet.create({
-  placeholderContainer: {
-    flexDirection: "row",
-    justifyContent: "center"
-  },
   mediumText: {
     fontSize: 18,
     lineHeight: 21,

ts/components/RegionServiceWebView.tsx

@@ -4,7 +4,6 @@ import * as O from "fp-ts/lib/Option";
 import { Body, Container, Content, Right, View } from "native-base";
 import * as React from "react";
 import { Alert, Image, StyleSheet } from "react-native";
-import { heightPercentageToDP } from "react-native-responsive-screen";
 import WebView, { WebViewMessageEvent } from "react-native-webview";
 import {
   WebViewErrorEvent,
@@ -38,24 +37,16 @@ type Props = {
 } & LightModalContextInterface;
 
 const styles = StyleSheet.create({
-  textInput: { padding: 1, borderWidth: 1, height: 30 },
-  contentPadding: { paddingHorizontal: customVariables.contentPadding },
   itemsCenter: { alignItems: "center" },
   selfCenter: { alignSelf: "center" },
   flex1: { flex: 1 },
-  webViewHeight: { height: heightPercentageToDP("100%") },
   errorContainer: {
     flex: 1,
     alignItems: "center"
   },
   errorTitle: {
     marginTop: 10
   },
-  errorBody: {
-    marginTop: 10,
-    marginBottom: 10,
-    textAlign: "center"
-  },
   errorButtonsContainer: {
     position: "absolute",
     bottom: 0,

ts/components/RemindEmailValidationOverlay.tsx

@@ -73,9 +73,6 @@ const styles = StyleSheet.create({
   center: {
     alignSelf: "center"
   },
-  emailTitle: {
-    textAlign: "center"
-  },
   error: {
     backgroundColor: customVariables.brandDanger,
     paddingHorizontal: customVariables.contentPadding,

ts/components/VersionInfoOverlay.tsx

@@ -12,9 +12,12 @@ import { currentRouteSelector } from "../store/reducers/navigation";
 import { GlobalState } from "../store/reducers/types";
 import { getAppVersion } from "../utils/appVersion";
 import { clipboardSetStringWithFeedback } from "../utils/clipboard";
+import { IOColors, hexToRgba } from "../components/core/variables/IOColors";
 
 type Props = ReturnType<typeof mapStateToProps> & ReduxProps;
 
+const bgColor = hexToRgba(IOColors.white, 0.67);
+
 const styles = StyleSheet.create({
   versionContainer: {
     position: "absolute",
@@ -33,19 +36,19 @@ const styles = StyleSheet.create({
 
   versionText: {
     padding: 2,
-    backgroundColor: "#ffffffaa",
+    backgroundColor: bgColor,
     fontSize: 16,
     lineHeight: 24,
-    color: "#000000"
+    color: IOColors.black
   },
 
   routeText: {
     maxWidth: widthPercentageToDP(80),
     padding: 2,
-    backgroundColor: "#ffffffaa",
+    backgroundColor: bgColor,
     fontSize: 14,
     lineHeight: 22,
-    color: "#000000"
+    color: IOColors.black
   }
 });
 

ts/components/__tests__/__snapshots__/WebviewComponent.test.tsx.snap

@@ -13,8 +13,9 @@ exports[`WebviewComponent tests snapshot for component 1`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#fff",
+          "backgroundColor": "#FFFFFF",
           "bottom": 0,
+          "inset": 0,
           "justifyContent": "center",
           "left": 0,
           "position": "absolute",

ts/components/bottomSheet/BlurredBackgroundComponent.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { StyleSheet } from "react-native";
 import TouchableDefaultOpacity from "../TouchableDefaultOpacity";
+import { IOColors, hexToRgba } from "../core/variables/IOColors";
+
+const opaqueBgColor = hexToRgba(IOColors.black, 0.5);
 
 /**
  * Simple component used as background when the bottom sheet pops up to blur the background and demands its closing when tapping on it
@@ -13,7 +16,7 @@ export const BlurredBackgroundComponent = (onPress: () => void) => (
     style={{
       ...StyleSheet.absoluteFillObject,
       overflow: "hidden",
-      backgroundColor: "rgba(0,0,0, 0.5)"
+      backgroundColor: opaqueBgColor
     }}
   />
 );

ts/components/cie/CieNfcOverlay.tsx

@@ -17,9 +17,6 @@ import FooterWithButtons from "../ui/FooterWithButtons";
 type Props = ReduxProps;
 
 const styles = StyleSheet.create({
-  contentContainerStyle: {
-    padding: variables.contentPadding
-  },
   text: {
     fontSize: variables.fontSizeBase
   }

ts/components/core/IOBadge.tsx

@@ -17,8 +17,7 @@ const commonBadgeStyles = StyleSheet.create({
   },
   badgeSmall: {
     height: 18
-  },
-  badgeSmallLabel: { fontSize: 12, lineHeight: 18 }
+  }
 });
 
 const mapForegroundBackgroundColor: Record<

ts/components/core/variables/IOColors.ts

@@ -14,6 +14,22 @@ function asIOColorGradients<T extends { [key: string]: Array<ColorValue> }>(
 ): T {
   return arg;
 }
+/**
+Return the color value with RGBA format (RGB + Alpha transparency), starting from the hexadecimal color value only.
+
+@param hexCode Color value in hexadecimal format. No short version accepted.
+@param opacity Opacity value that range from 0 to 1. Default value = 1.
+ */
+/* Taken from this Gist: https://gist.github.com/danieliser/b4b24c9f772066bcf0a6 */
+export const hexToRgba = (hexCode: string, opacity: number = 1) => {
+  const hex = hexCode.replace("#", "");
+
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return `rgba(${r},${g},${b},${opacity})`;
+};
 
 export const IOColors = asIOColors({
   white: "#FFFFFF",

ts/components/infoScreen/InfoScreenComponent.tsx

@@ -21,20 +21,11 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  title: {
-    textAlign: "center",
-    fontSize: 20
-  },
   textAlignCenter: {
     textAlign: "center"
-  },
-  bold: {
-    fontWeight: "bold"
   }
 });
 
-export const InfoScreenStyle = styles;
-
 const renderNode = (body: string | React.ReactNode) => {
   if (typeof body === "string") {
     return (

ts/components/messages/MedicalPrescriptionAttachments.tsx

@@ -31,11 +31,6 @@ const styles = StyleSheet.create({
   padded: {
     paddingHorizontal: customVariables.contentPadding
   },
-  image: {
-    width: 300,
-    height: BARCODE_HEIGHT,
-    resizeMode: "contain"
-  },
   note: {
     lineHeight: 16
   },