@pagopa/io-app-design-system 6.0.0 → 6.0.4

package/src/components/listitems/ListItemInfo.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentProps, ReactNode, useCallback, useMemo } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { AccessibilityRole, Platform, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { useIOTheme } from "../../context";
+import { IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
@@ -10,9 +10,9 @@ import { Badge } from "../badge";
 import { IOButton, IOButtonLinkSpecificProps, IconButton } from "../buttons";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { VSpacer } from "../layout";
 import { IOLogoPaymentType } from "../logos";
 import { BodySmall, H6 } from "../typography";
-import { VSpacer } from "../layout";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -34,8 +34,6 @@ type EndElementProps =
   | IconButtonActionProps
   | BadgeProps;
 
-type TopElementProps = BadgeProps;
-
 type GraphicProps =
   | {
       paymentLogoIcon?: IOLogoPaymentType;
@@ -56,7 +54,7 @@ export type ListItemInfo = WithTestID<{
   label?: string;
   numberOfLines?: number;
   endElement?: EndElementProps;
-  topElement?: TopElementProps;
+  topElement?: BadgeProps;
   // Accessibility
   accessibilityLabel?: string;
   accessibilityRole?: AccessibilityRole;
@@ -67,107 +65,56 @@ export type ListItemInfo = WithTestID<{
 
 const PAYMENT_LOGO_SIZE: IOIconSizeScale = 24;
 
-export const ListItemInfo = ({
-  value,
-  label,
-  numberOfLines = 2,
-  reversed = false,
+const EndElementComponent = ({ type, componentProps }: EndElementProps) => {
+  switch (type) {
+    case "buttonLink":
+      return (
+        <IOButton
+          variant="link"
+          {...componentProps}
+          accessibilityLabel={`${
+            componentProps.accessibilityLabel ?? componentProps.label
+          }`}
+        />
+      );
+    case "iconButton":
+      return (
+        <IconButton
+          {...componentProps}
+          accessibilityLabel={`${componentProps.accessibilityLabel}`}
+        />
+      );
+    case "badge":
+      return <Badge {...componentProps} />;
+    default:
+      return null;
+  }
+};
+
+const ListItemInfoContent = ({
   icon,
   paymentLogoIcon,
-  endElement,
+  label,
+  value,
+  numberOfLines,
+  reversed,
   topElement,
-  accessibilityLabel,
-  accessibilityRole,
-  accessibilityActions,
-  onAccessibilityAction,
-  onLongPress,
-  testID
-}: ListItemInfo) => {
+  endElement
+}: Pick<
+  ListItemInfo,
+  | "icon"
+  | "paymentLogoIcon"
+  | "label"
+  | "value"
+  | "numberOfLines"
+  | "reversed"
+  | "topElement"
+  | "endElement"
+>) => {
   const theme = useIOTheme();
-  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
-    useIOFontDynamicScale();
-
-  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
-    useListItemAnimation();
-
-  const componentValueToAccessibility = useMemo(
-    () => (typeof value === "string" ? value : ""),
-    [value]
-  );
-
-  const listItemAccessibilityLabel = useMemo(
-    () =>
-      accessibilityLabel ??
-      (label
-        ? `${label}; ${componentValueToAccessibility}`
-        : componentValueToAccessibility),
-    [label, componentValueToAccessibility, accessibilityLabel]
-  );
+  const { hugeFontEnabled } = useIOFontDynamicScale();
 
-  const itemInfoTextComponent = useMemo(
-    () => (
-      <View
-        accessible={Platform.OS === "ios"}
-        style={{ flexDirection: reversed ? "column-reverse" : "column" }}
-      >
-        {topElement?.type === "badge" && (
-          <View style={{ alignSelf: "flex-start" }}>
-            <Badge {...topElement.componentProps} />
-            <VSpacer size={4} />
-          </View>
-        )}
-        {label && (
-          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
-            {label}
-          </BodySmall>
-        )}
-        {typeof value === "string" ? (
-          <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
-            {value}
-          </H6>
-        ) : (
-          value
-        )}
-      </View>
-    ),
-    [label, value, numberOfLines, theme, reversed, topElement]
-  );
-
-  const listItemInfoAction = useCallback(() => {
-    if (endElement) {
-      const { type, componentProps } = endElement;
-
-      switch (type) {
-        case "buttonLink":
-          const buttonLinkAccessibilityLabel = `${
-            componentProps.accessibilityLabel ?? componentProps.label
-          }`;
-
-          return (
-            <IOButton
-              variant="link"
-              {...componentProps}
-              accessibilityLabel={buttonLinkAccessibilityLabel}
-            />
-          );
-        case "iconButton":
-          const iconButtonAccessibilityLabel = `${componentProps.accessibilityLabel}`;
-          return (
-            <IconButton
-              {...componentProps}
-              accessibilityLabel={iconButtonAccessibilityLabel}
-            />
-          );
-        case "badge":
-          return <Badge {...componentProps} />;
-        default:
-          return <></>;
-      }
-    }
-    return <></>;
-  }, [endElement]);
-
-  const ListItemInfoContent = () => (
+  return (
     <>
       {icon && !hugeFontEnabled && (
         <Icon
@@ -183,10 +130,79 @@ export const ListItemInfo = ({
           size={PAYMENT_LOGO_SIZE}
         />
       )}
-      <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
-      {endElement && <View>{listItemInfoAction()}</View>}
+      <View style={{ flex: 1 }}>
+        <View
+          accessible={Platform.OS === "ios"}
+          style={{ flexDirection: reversed ? "column-reverse" : "column" }}
+        >
+          {topElement?.type === "badge" && (
+            <View style={{ alignSelf: "flex-start" }}>
+              <Badge {...topElement.componentProps} />
+              <VSpacer size={4} />
+            </View>
+          )}
+          {label && (
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
+              {label}
+            </BodySmall>
+          )}
+          {typeof value === "string" ? (
+            <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
+              {value}
+            </H6>
+          ) : (
+            value
+          )}
+        </View>
+      </View>
+      {endElement && (
+        <View>
+          <EndElementComponent {...endElement} />
+        </View>
+      )}
     </>
   );
+};
+
+export const ListItemInfo = ({
+  value,
+  label,
+  numberOfLines = 2,
+  reversed = false,
+  icon,
+  paymentLogoIcon,
+  endElement,
+  topElement,
+  accessibilityLabel,
+  accessibilityRole,
+  accessibilityActions,
+  onAccessibilityAction,
+  onLongPress,
+  testID
+}: ListItemInfo) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
+
+  const componentValueToAccessibility = typeof value === "string" ? value : "";
+
+  const listItemAccessibilityLabel =
+    accessibilityLabel ??
+    (label
+      ? `${label}; ${componentValueToAccessibility}`
+      : componentValueToAccessibility);
+
+  const contentProps = {
+    icon,
+    paymentLogoIcon,
+    label,
+    value,
+    numberOfLines,
+    reversed,
+    topElement,
+    endElement
+  } as const;
 
   if (onLongPress) {
     return (
@@ -217,7 +233,7 @@ export const ListItemInfo = ({
               scaleAnimatedStyle
             ]}
           >
-            <ListItemInfoContent />
+            <ListItemInfoContent {...contentProps} />
           </Animated.View>
         </Animated.View>
       </Pressable>
@@ -242,11 +258,9 @@ export const ListItemInfo = ({
             }
           ]}
         >
-          <ListItemInfoContent />
+          <ListItemInfoContent {...contentProps} />
         </View>
       </View>
     );
   }
 };
-
-export default ListItemInfo;

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useMemo } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
@@ -11,7 +11,7 @@ import { BodySmall, H6 } from "../typography";
 
 export type ListItemInfoCopy = WithTestID<{
   label: string;
-  value: string | React.ReactNode;
+  value: string | ReactNode;
   numberOfLines?: number;
   onPress: (event: GestureResponderEvent) => void;
   icon?: IOIcons;
@@ -38,18 +38,10 @@ export const ListItemInfoCopy = ({
   const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
     useIOFontDynamicScale();
 
-  const componentValueToAccessibility = useMemo(
-    () => (typeof value === "string" ? value : ""),
-    [value]
-  );
+  const componentValueToAccessibility = typeof value === "string" ? value : "";
 
-  const listItemAccessibilityLabel = useMemo(
-    () =>
-      accessibilityLabel
-        ? accessibilityLabel
-        : `${label}; ${componentValueToAccessibility}`,
-    [label, componentValueToAccessibility, accessibilityLabel]
-  );
+  const listItemAccessibilityLabel =
+    accessibilityLabel || `${label}; ${componentValueToAccessibility}`;
 
   const foregroundColor = theme["interactiveElem-default"];
 
@@ -118,5 +110,3 @@ export const ListItemInfoCopy = ({
     </Pressable>
   );
 };
-
-export default ListItemInfoCopy;

package/src/components/listitems/ListItemNav.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { GestureResponderEvent, Image, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIOTheme } from "../../context";
@@ -22,7 +22,7 @@ import { BodySmall, Caption, H6 } from "../typography";
 
 type ListItemTopElementProps =
   | {
-      badgeProps: React.ComponentProps<typeof Badge>;
+      badgeProps: ComponentProps<typeof Badge>;
       dateValue?: never;
     }
   | {
@@ -32,12 +32,12 @@ type ListItemTopElementProps =
 
 type ListItemNavPartialProps = WithTestID<
   {
-    value: string | React.ReactNode;
+    value: string | ReactNode;
     /**
      * The maximum number of lines to display for the value.
      */
     numberOfLines?: number;
-    description?: string | React.ReactNode;
+    description?: string | ReactNode;
     loading?: boolean;
     onPress: (event: GestureResponderEvent) => void;
     hideChevron?: boolean;
@@ -243,5 +243,3 @@ export const ListItemNav = ({
     </Pressable>
   );
 };
-
-export default ListItemNav;

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
@@ -10,8 +10,8 @@ import { Icon } from "../icons";
 import { BodySmall, H6 } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
-  value: string | React.ReactNode;
-  description?: string | React.ReactNode;
+  value: string | ReactNode;
+  description?: string | ReactNode;
   withoutIcon?: boolean;
   onPress: (event: GestureResponderEvent) => void;
 }> &
@@ -116,5 +116,3 @@ export const ListItemNavAlert = ({
     </Pressable>
   );
 };
-
-export default ListItemNavAlert;

package/src/components/listitems/ListItemRadio.tsx

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { useState } from "react";
+import { ComponentProps, ReactNode, useState } from "react";
 import { Image, Pressable, StyleSheet, View } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated from "react-native-reanimated";
@@ -40,7 +39,7 @@ type ListItemRadioLoadingProps =
 
 type Props = WithTestID<{
   value: string;
-  description?: string | React.ReactNode;
+  description?: string | ReactNode;
   selected: boolean;
   onValueChange?: (newValue: boolean) => void;
   startImage?: ListItemRadioGraphicProps;
@@ -51,7 +50,7 @@ const DISABLED_OPACITY = 0.5;
 
 type ListItemRadioProps = Props &
   Pick<
-    React.ComponentProps<typeof Pressable>,
+    ComponentProps<typeof Pressable>,
     "onPress" | "accessibilityLabel" | "accessibilityHint" | "disabled"
   >;
 

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { View } from "react-native";
 import RNReactNativeHapticFeedback from "react-native-haptic-feedback";
 import { useIOTheme } from "../../context";
@@ -36,7 +36,7 @@ export const ListItemRadioWithAmount = ({
   formattedAmountString
 }: ListItemRadioWithAmountProps) => {
   const { dynamicFontScale } = useIOFontDynamicScale();
-  const [toggleValue, setToggleValue] = React.useState(selected ?? false);
+  const [toggleValue, setToggleValue] = useState(selected ?? false);
 
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useMemo } from "react";
+import { ComponentProps, memo, useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
 import { useIOTheme } from "../../context";
 import {
@@ -45,7 +45,7 @@ export type ListItemSwitchProps = PartialProps &
   ListItemSwitchGraphicProps &
   Pick<ComponentProps<typeof Switch>, "value" | "disabled">;
 
-export const ListItemSwitch = React.memo(
+export const ListItemSwitch = memo(
   ({
     label,
     description,

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,6 +1,5 @@
-import React, { ReactNode } from "react";
+import { isValidElement, ReactNode } from "react";
 import { ImageURISource, View } from "react-native";
-
 import { useIOTheme } from "../../context";
 import {
   IOColors,
@@ -79,57 +78,32 @@ const MUNICIPALITY_LOGO_SIZE = 44;
 // since it is bigger than the card logos, we use
 // it as a base size for homogeneous sizing via container size.
 
-const StartComponent = ({
-  logoIcon
-}: {
-  logoIcon: ListItemTransactionLogo;
-}) => {
-  if (isImageUri(logoIcon)) {
-    return <Avatar logoUri={logoIcon} size="small" />;
-  }
-  if (React.isValidElement(logoIcon)) {
-    return <>{logoIcon}</>;
-  }
-  return (
-    <LogoPaymentWithFallback
-      brand={logoIcon as IOLogoPaymentType}
-      size={CARD_LOGO_SIZE}
-    />
-  );
-};
-
-export const ListItemTransaction = ({
-  accessibilityLabel,
-  loadingAccessibilityLabel,
-  showChevron = false,
-  isLoading = false,
+const ListItemTransactionContent = ({
   paymentLogoIcon,
-  onPress,
-  subtitle,
-  testID,
+  numberOfLines,
   title,
-  transaction: { amount, amountAccessibilityLabel, badge, refund },
-  numberOfLines = 2,
-  accessible
-}: ListItemTransaction) => {
+  subtitle,
+  badge,
+  amountAccessibilityLabel,
+  showChevron,
+  amount,
+  refund
+}: Pick<
+  ListItemTransaction,
+  "paymentLogoIcon" | "numberOfLines" | "title" | "subtitle" | "showChevron"
+> & {
+  badge: ListItemTransactionBadge | undefined;
+  amount: string | undefined;
+  amountAccessibilityLabel: string | undefined;
+  refund: boolean | undefined;
+}) => {
   const theme = useIOTheme();
-
-  if (isLoading) {
-    return (
-      <ListItemTransactionSkeleton
-        loadingAccessibilityLabel={loadingAccessibilityLabel}
-      />
-    );
-  }
-
   const interactiveColor: IOColors = theme["interactiveElem-default"];
+  const amountColor: IOColors = refund
+    ? theme.successText
+    : theme["textBody-default"];
 
-  const amountColorDefault: IOColors = theme["textBody-default"];
-  const amountColorRefund: IOColors = theme.successText;
-
-  const amountColor = refund ? amountColorRefund : amountColorDefault;
-
-  const ListItemTransactionContent = () => (
+  return (
     <>
       <HStack
         allowScaleSpacing
@@ -178,6 +152,60 @@ export const ListItemTransaction = ({
       </HStack>
     </>
   );
+};
+
+const StartComponent = ({
+  logoIcon
+}: {
+  logoIcon: ListItemTransactionLogo;
+}) => {
+  if (isImageUri(logoIcon)) {
+    return <Avatar logoUri={logoIcon} size="small" />;
+  }
+  if (isValidElement(logoIcon)) {
+    return <>{logoIcon}</>;
+  }
+  return (
+    <LogoPaymentWithFallback
+      brand={logoIcon as IOLogoPaymentType}
+      size={CARD_LOGO_SIZE}
+    />
+  );
+};
+
+export const ListItemTransaction = ({
+  accessibilityLabel,
+  loadingAccessibilityLabel,
+  showChevron = false,
+  isLoading = false,
+  paymentLogoIcon,
+  onPress,
+  subtitle,
+  testID,
+  title,
+  transaction: { amount, amountAccessibilityLabel, badge, refund },
+  numberOfLines = 2,
+  accessible
+}: ListItemTransaction) => {
+  if (isLoading) {
+    return (
+      <ListItemTransactionSkeleton
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
+  }
+
+  const contentProps = {
+    paymentLogoIcon,
+    numberOfLines,
+    title,
+    subtitle,
+    badge,
+    amountAccessibilityLabel,
+    showChevron,
+    amount,
+    refund
+  } as const;
 
   if (onPress) {
     return (
@@ -186,7 +214,7 @@ export const ListItemTransaction = ({
         testID={testID}
         accessibilityLabel={accessibilityLabel}
       >
-        <ListItemTransactionContent />
+        <ListItemTransactionContent {...contentProps} />
       </PressableListItemBase>
     );
   } else {
@@ -203,7 +231,7 @@ export const ListItemTransaction = ({
             { columnGap: IOListItemVisualParams.iconMargin }
           ]}
         >
-          <ListItemTransactionContent />
+          <ListItemTransactionContent {...contentProps} />
         </View>
       </View>
     );

package/src/components/listitems/PressableListItemBase.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { ComponentProps, PropsWithChildren } from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";