@pagopa/io-app-design-system 1.3.2 → 1.5.1

package/src/components/listitems/ListItemTransaction.tsx

@@ -3,19 +3,25 @@ import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
+
 import {
   IOColors,
+  IOListItemLogoMargin,
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
+
+import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
+import { isImageUri } from "../../utils/url";
 import { WithTestID } from "../../utils/types";
+import { getAccessibleAmountText } from "../../utils/accessibility";
 import { Avatar } from "../avatar/Avatar";
 import { Badge } from "../badge/Badge";
-import { Icon } from "../icons";
-import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { IOIconSizeScale, Icon } from "../icons";
+import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
 import {
@@ -23,103 +29,144 @@ import {
   PressableListItemBase
 } from "./PressableListItemsBase";
 
-type LogoNameOrUri = IOLogoPaymentType | ImageURISource;
+export type ListItemTransactionStatus =
+  | "success"
+  | "failure"
+  | "pending"
+  | "cancelled"
+  | "refunded"
+  | "reversal";
+
+type PaymentLogoIcon = IOLogoPaymentType | ImageURISource | React.ReactNode;
+
 export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
     hasChevronRight?: boolean;
     isLoading?: boolean;
-    paymentLogoOrUrl?: LogoNameOrUri;
+    /**
+     * A logo that will be displayed on the left of the list item.
+     *
+     * Must be a {@link IOLogoPaymentType} or an {@link ImageURISource} or an {@link Icon}.
+     */
+    paymentLogoIcon?: PaymentLogoIcon;
     subtitle: string;
     title: string;
   } & (
       | {
-          transactionStatus: "success";
+          transactionStatus: "success" | "refunded";
+          badgeText?: string;
           transactionAmount: string;
         }
       | {
-          transactionStatus: "failure" | "pending";
+          transactionStatus: "failure" | "pending" | "cancelled" | "reversal";
+          badgeText: string;
           transactionAmount?: string;
         }
     )
 >;
 
 type LeftComponentProps = {
-  logoNameOrUrl: LogoNameOrUri;
+  logoIcon: PaymentLogoIcon;
 };
 
-const isImageUrI = (
-  value: IOLogoPaymentType | ImageURISource
-): value is ImageURISource =>
-  typeof value === "object" && value.uri !== undefined;
+const CARD_LOGO_SIZE: IOIconSizeScale = 24;
+const MUNICIPALITY_LOGO_SIZE = 44;
+// this is the <Avatar/>'s "small" size,
+// since it is bigger than the card logos, we use
+// it as a base size for homogeneous sizing via container size.
 
-const LeftComponent = ({ logoNameOrUrl }: LeftComponentProps) => {
-  if (isImageUrI(logoNameOrUrl)) {
-    return <Avatar shape="circle" size="small" logoUri={[logoNameOrUrl]} />;
-  } else {
-    return (
-      <View
-        style={{
-          width: IOVisualCostants.avatarSizeSmall,
-          height: IOVisualCostants.avatarSizeSmall,
-          alignItems: "center",
-          justifyContent: "center"
-        }}
-      >
-        <LogoPayment name={logoNameOrUrl} />
-      </View>
-    );
+const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
+  if (isImageUri(logoIcon)) {
+    return <Avatar logoUri={[logoIcon]} size="small" shape="circle" />;
   }
+  if (React.isValidElement(logoIcon)) {
+    return <>{logoIcon}</>;
+  }
+  return (
+    <LogoPaymentWithFallback
+      brand={logoIcon as IOLogoPaymentType}
+      size={CARD_LOGO_SIZE}
+    />
+  );
 };
 
 export const ListItemTransaction = ({
   accessibilityLabel,
   hasChevronRight = false,
   isLoading = false,
-  paymentLogoOrUrl,
+  paymentLogoIcon,
   onPress,
   subtitle,
   testID,
   title,
   transactionAmount,
+  badgeText,
   transactionStatus = "success"
 }: ListItemTransaction) => {
   const theme = useIOTheme();
 
+  const maybeBadgeText = pipe(
+    badgeText,
+    O.fromNullable,
+    O.getOrElse(() => "-")
+  );
+
   if (isLoading) {
     return <SkeletonComponent />;
   }
 
-  const designSystemBlue: IOColors = "blue";
+  const designSystemBlue: IOColors = "blueIO-500";
   const ListItemTransactionContent = () => {
     const TransactionAmountOrBadgeComponent = () => {
       switch (transactionStatus) {
         case "success":
           return (
-            <H6 color={hasChevronRight ? designSystemBlue : "black"}>
-              {transactionAmount || "-"}
+            <H6
+              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
+              color={hasChevronRight ? designSystemBlue : "black"}
+            >
+              {transactionAmount || ""}
+            </H6>
+          );
+        case "refunded":
+          return (
+            <H6
+              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
+              color={hasChevronRight ? designSystemBlue : "success-700"}
+            >
+              {transactionAmount || ""}
             </H6>
           );
-
         case "failure":
-          return <Badge variant="error" text={"Failed"} />;
+        case "cancelled":
+          return <Badge variant="error" text={maybeBadgeText} />;
+        case "reversal":
+          return <Badge variant="lightBlue" text={maybeBadgeText} />;
         case "pending":
-          return <Badge variant="info" text={"Cancelled"} />;
+          return <Badge variant="info" text={maybeBadgeText} />;
       }
     };
 
     return (
       <>
-        {paymentLogoOrUrl && (
-          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-            <LeftComponent logoNameOrUrl={paymentLogoOrUrl} />
+        {paymentLogoIcon && (
+          <View
+            style={{
+              marginRight: IOListItemLogoMargin,
+              width: MUNICIPALITY_LOGO_SIZE,
+              alignItems: "center"
+            }}
+          >
+            <LeftComponent logoIcon={paymentLogoIcon} />
           </View>
         )}
         <View style={IOStyles.flex}>
-          <H6 color={theme["textBody-default"]}>{title}</H6>
+          <LabelSmall numberOfLines={2} color={theme["textBody-default"]}>
+            {title}
+          </LabelSmall>
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
           </LabelSmall>
-          <VSpacer size={4} />
         </View>
         <View style={Styles.rightSection}>
           <TransactionAmountOrBadgeComponent />

package/src/components/textInput/TextInput.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { TextInputBase } from "./TextInputBase";
+
+type TextInputProps = Omit<
+  React.ComponentProps<typeof TextInputBase>,
+  | "rightElement"
+  | "status"
+  | "bottomMessageColor"
+  | "isPassword"
+  | "errorMessage"
+>;
+
+export const TextInput = (props: TextInputProps) => (
+  <TextInputBase {...props} />
+);

package/src/components/textInput/TextInputBase.tsx

@@ -0,0 +1,327 @@
+/* eslint-disable functional/immutable-data */
+import {
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  ViewStyle
+} from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { IOColors, IOSpacingScale, IOStyles } from "../../core";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer } from "../spacer";
+import { LabelSmall } from "../typography";
+import { InputType } from "../../utils/types";
+import { getInputPropsByType } from "../../utils/textInput";
+import { makeFontStyleObject } from "../../utils/fonts";
+
+type InputStatus = "initial" | "focused" | "disabled" | "error";
+
+type RNTextInputProps = Pick<
+  React.ComponentProps<typeof TextInput>,
+  "keyboardType" | "inputMode" | "textContentType" | "autoComplete"
+>;
+
+type InputTextProps = {
+  placeholder: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  accessibilityLabel?: string;
+  textInputProps?: RNTextInputProps;
+  inputTyoe?: InputType;
+  status?: InputStatus;
+  icon?: IOIcons;
+  rightElement?: React.ReactNode;
+  counterLimit?: number;
+  bottomMessage?: string;
+  bottomMessageColor?: IOColors;
+  disabled?: boolean;
+  isPassword?: boolean;
+  onBlur?: () => void;
+  onFocus?: () => void;
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    ...IOStyles.row,
+    alignItems: "center",
+    paddingVertical: 8,
+    height: 60,
+    borderRadius: 8,
+    paddingHorizontal: 12
+  },
+  textInputStyle: {
+    ...IOStyles.flex,
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
+    fontSize: 16,
+    marginTop: IOSpacingScale[2],
+    lineHeight: 24,
+    height: "100%"
+  },
+  textInputLabelWrapper: {
+    position: "absolute",
+    paddingHorizontal: 12,
+    zIndex: 10,
+    bottom: 0,
+    top: 0,
+    justifyContent: "center"
+  }
+});
+
+type InputTextHelperRow = Pick<
+  InputTextProps,
+  "value" | "counterLimit" | "bottomMessage" | "bottomMessageColor"
+>;
+
+const HelperRow = ({
+  value,
+  counterLimit,
+  bottomMessage,
+  bottomMessageColor = "grey-700"
+}: InputTextHelperRow) => {
+  const valueCount = useMemo(() => value.length, [value]);
+
+  const helperRowStyle: ViewStyle = useMemo(() => {
+    if (counterLimit && bottomMessage) {
+      return {
+        justifyContent: "space-between"
+      };
+    }
+    if (counterLimit) {
+      return {
+        justifyContent: "flex-end"
+      };
+    }
+    if (bottomMessage) {
+      return {
+        justifyContent: "flex-start"
+      };
+    }
+    return {};
+  }, [counterLimit, bottomMessage]);
+
+  return (
+    <View
+      style={[
+        IOStyles.row,
+        {
+          alignItems: "center",
+          paddingHorizontal: 10
+        },
+        helperRowStyle
+      ]}
+    >
+      {bottomMessage && (
+        <LabelSmall weight="Regular" color={bottomMessageColor}>
+          {bottomMessage}
+        </LabelSmall>
+      )}
+      {counterLimit && (
+        <LabelSmall
+          weight="Regular"
+          color="grey-700"
+        >{`${valueCount} / ${counterLimit}`}</LabelSmall>
+      )}
+    </View>
+  );
+};
+
+export const TextInputBase = ({
+  disabled = false,
+  placeholder,
+  value = "",
+  onChangeText,
+  accessibilityLabel,
+  textInputProps,
+  inputTyoe = "default",
+  status,
+  icon,
+  rightElement,
+  counterLimit,
+  bottomMessage,
+  bottomMessageColor,
+  onBlur,
+  onFocus,
+  isPassword
+}: InputTextProps) => {
+  const labelSharedValue = useSharedValue<boolean>(false);
+  const [inputStatus, setInputStatus] = React.useState<InputStatus>(
+    disabled ? "disabled" : "initial"
+  );
+  const isSecretInput = useMemo(() => isPassword, [isPassword]);
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (status) {
+      setInputStatus(status);
+    }
+  }, [status]);
+
+  const boxStyle: ViewStyle = useMemo(() => {
+    if (inputStatus === "focused") {
+      return {
+        borderColor: IOColors["blueIO-500"],
+        borderWidth: 2
+      };
+    }
+    if (inputStatus === "error") {
+      return {
+        borderColor: IOColors["error-600"],
+        borderWidth: 1
+      };
+    }
+    return {
+      borderColor: IOColors["grey-200"],
+      borderWidth: 1
+    };
+  }, [inputStatus]);
+
+  const animatedLabelProps = useAnimatedStyle(() => ({
+    fontSize: withTiming(labelSharedValue.value ? 12 : 16, {
+      duration: 300,
+      easing: Easing.elastic(0.85)
+    }),
+    transform: [
+      {
+        translateY: withTiming(labelSharedValue.value ? -14 : 0, {
+          duration: 300,
+          easing: Easing.elastic(0.85)
+        })
+      }
+    ]
+  }));
+
+  useEffect(() => {
+    if (value.length > 0) {
+      labelSharedValue.value = true;
+    } else {
+      if (inputStatus !== "focused") {
+        labelSharedValue.value = false;
+      }
+    }
+  }, [labelSharedValue, value, inputStatus]);
+
+  const onTextInputPress = () => {
+    if (disabled) {
+      return;
+    }
+    labelSharedValue.value = true;
+    setInputStatus("focused");
+    inputRef?.current?.focus();
+  };
+
+  const onChangeTextHandler = useCallback(
+    (text: string) => {
+      if (counterLimit && text.length > counterLimit) {
+        return;
+      }
+      onChangeText(text);
+    },
+    [counterLimit, onChangeText]
+  );
+
+  const onBlurHandler = useCallback(() => {
+    if (!value) {
+      labelSharedValue.value = false;
+    }
+    onBlur?.();
+    setInputStatus("initial");
+  }, [value, labelSharedValue, onBlur]);
+
+  const derivedInputProps = useMemo(
+    () => getInputPropsByType(inputTyoe),
+    [inputTyoe]
+  );
+
+  const inputValue = useMemo(
+    () =>
+      derivedInputProps && derivedInputProps.valueFormat
+        ? derivedInputProps.valueFormat(value)
+        : value,
+    [value, derivedInputProps]
+  );
+
+  return (
+    <>
+      <Pressable
+        onPress={onTextInputPress}
+        style={[
+          inputStatus === "disabled" ? { opacity: 0.5 } : {},
+          boxStyle,
+          styles.textInput
+        ]}
+        accessible={false}
+        accessibilityRole={"none"}
+      >
+        {icon && (
+          <>
+            <Icon name={icon} color="grey-300" size={24} />
+            <HSpacer size={8} />
+          </>
+        )}
+        <TextInput
+          {...(derivedInputProps
+            ? derivedInputProps.textInputProps
+            : textInputProps)}
+          accessible
+          editable={!disabled}
+          secureTextEntry={isSecretInput}
+          disableFullscreenUI={true}
+          blurOnSubmit={true}
+          ref={inputRef}
+          accessibilityState={{ disabled }}
+          accessibilityLabel={accessibilityLabel ?? placeholder}
+          onFocus={() => {
+            setInputStatus("focused");
+            labelSharedValue.value = true;
+            onFocus?.();
+          }}
+          maxLength={counterLimit}
+          onBlur={onBlurHandler}
+          value={inputValue}
+          onChangeText={onChangeTextHandler}
+          style={styles.textInputStyle}
+        />
+        {/** Left value is due to the absolute position of the label in order to let it
+         * translate to top on focus
+         */}
+        <Animated.View
+          style={[styles.textInputLabelWrapper, icon ? { left: 32 } : {}]}
+        >
+          <Animated.Text
+            numberOfLines={1}
+            accessible={false}
+            style={[
+              animatedLabelProps,
+              {
+                color: IOColors["grey-700"]
+              }
+            ]}
+          >
+            {placeholder}
+          </Animated.Text>
+        </Animated.View>
+        {rightElement && (
+          <View style={{ marginLeft: "auto" }}>
+            <HSpacer size={8} />
+            {rightElement}
+          </View>
+        )}
+      </Pressable>
+      {(bottomMessage || counterLimit) && (
+        <HelperRow
+          value={value}
+          bottomMessage={bottomMessage}
+          bottomMessageColor={bottomMessageColor}
+          counterLimit={counterLimit}
+        />
+      )}
+    </>
+  );
+};

package/src/components/textInput/TextInputPassword.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { IconButton } from "../buttons";
+import { TextInputBase } from "./TextInputBase";
+
+type TextInputPasswordProps = Omit<
+  React.ComponentProps<typeof TextInputBase>,
+  "isPassword"
+>;
+
+export const TextInputPassword = (props: TextInputPasswordProps) => {
+  const { onBlur, disabled } = props;
+  const [showPassword, setShowPassword] = React.useState<boolean>(false);
+
+  const rightElement = (
+    <IconButton
+      icon={showPassword ? "eyeShow" : "eyeHide"}
+      disabled={disabled}
+      onPress={() => setShowPassword(v => !v)}
+      accessibilityLabel="Toggle secret input"
+    />
+  );
+
+  const onBlurHandler = React.useCallback(() => {
+    setShowPassword(false);
+    onBlur?.();
+  }, [onBlur]);
+
+  return (
+    <TextInputBase
+      {...props}
+      onBlur={onBlurHandler}
+      rightElement={rightElement}
+      isPassword={!showPassword}
+    />
+  );
+};

package/src/components/textInput/TextInputValidation.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { IOIcons, Icon } from "../icons";
+import { IOColors } from "../../core/IOColors";
+import { triggerHaptic } from "../../functions";
+import { TextInputBase } from "./TextInputBase";
+
+type TextInputValidationProps = Omit<
+  React.ComponentProps<typeof TextInputBase>,
+  "rightElement" | "status" | "bottomMessageColor" | "isPassword"
+> & {
+  onValidate: (value: string) => boolean;
+  errorMessage?: string;
+};
+
+export const TextInputValidation = (props: TextInputValidationProps) => {
+  const { onValidate, errorMessage, value, bottomMessage, onBlur, onFocus } =
+    props;
+  const [isValid, setIsValid] = React.useState<boolean | undefined>(undefined);
+
+  const onBlurHandler = React.useCallback(() => {
+    const validation = onValidate(value);
+    setIsValid(validation);
+    if (!validation) {
+      triggerHaptic("notificationError");
+    } else {
+      triggerHaptic("notificationSuccess");
+    }
+    onBlur?.();
+  }, [onValidate, value, onBlur]);
+
+  const onFocusHandler = React.useCallback(() => {
+    setIsValid(undefined);
+    onFocus?.();
+  }, [onFocus]);
+
+  const labelError = React.useMemo(
+    () => (isValid === false && errorMessage ? errorMessage : bottomMessage),
+    [isValid, errorMessage, bottomMessage]
+  );
+
+  const labelErrorColor: IOColors | undefined = React.useMemo(
+    () => (isValid === false && errorMessage ? "error-600" : undefined),
+    [isValid, errorMessage]
+  );
+
+  const rightIcon = React.useMemo(
+    () =>
+      isValid !== undefined && (
+        <Icon
+          name={(isValid ? "success" : "errorFilled") as IOIcons}
+          color={(isValid ? "green" : "error-600") as IOColors}
+          size={24}
+        />
+      ),
+    [isValid]
+  );
+
+  return (
+    <TextInputBase
+      {...props}
+      status={isValid === false ? "error" : undefined}
+      bottomMessage={labelError}
+      bottomMessageColor={labelErrorColor}
+      rightElement={rightIcon}
+      onBlur={onBlurHandler}
+      onFocus={onFocusHandler}
+    />
+  );
+};
+
+export default TextInputValidation;

package/src/components/textInput/index.tsx

@@ -0,0 +1,3 @@
+export * from "./TextInput";
+export * from "./TextInputPassword";
+export * from "./TextInputValidation";

package/src/core/IOAnimations.ts

@@ -9,6 +9,11 @@ export const IOSpringValues = {
     mass: 0.5,
     stiffness: 300
   },
+  accordion: {
+    damping: 30,
+    mass: 1,
+    stiffness: 325
+  },
   /* Used by selection items (checkbox, radio, etc…) */
   selection: {
     damping: 10,

package/src/core/IOShapes.ts

@@ -18,3 +18,4 @@ export const IOTagRadius: IORadiusScale = 6;
 export const IOBottomSheetHeaderRadius: IORadiusScale = 24;
 export const IOListItemIDPRadius: IORadiusScale = IODefaultRadius;
 export const IOBadgeRadius: IORadiusScale = 24;
+export const IOAccordionRadius: IORadiusScale = IODefaultRadius;