@pagopa/io-app-design-system 2.0.0-1 → 2.0.0

package/src/components/stack/Stack.tsx

@@ -2,23 +2,28 @@ import React, { ReactNode } from "react";
 import { View, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 
+type AllowedStyleProps = Pick<
+  ViewStyle,
+  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap"
+>;
+
 type Stack = {
   space?: IOSpacer;
   children: ReactNode;
-  alignItems?: ViewStyle["alignItems"];
+  style?: AllowedStyleProps;
 };
 
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
-export const HStack = ({ space, children, alignItems }: Stack) => (
+export const HStack = ({ space, children, style }: Stack) => (
   <View
     style={{
       display: "flex",
       flexDirection: "row",
       columnGap: space,
-      alignItems
+      ...style
     }}
   >
     {children}
@@ -30,13 +35,13 @@ Vertical Stack component
 @param {IOSpacer} space
  */
 
-export const VStack = ({ space, children, alignItems }: Stack) => (
+export const VStack = ({ space, children, style }: Stack) => (
   <View
     style={{
       display: "flex",
       flexDirection: "column",
       rowGap: space,
-      alignItems
+      ...style
     }}
   >
     {children}

package/src/components/textInput/TextInputBase.tsx

@@ -40,6 +40,7 @@ type InputTextProps = WithTestID<{
   value: string;
   onChangeText: (value: string) => void;
   accessibilityLabel?: string;
+  accessibilityHint?: string;
   textInputProps?: RNTextInputProps;
   inputType?: InputType;
   status?: InputStatus;
@@ -210,6 +211,7 @@ export const TextInputBase = ({
   value = "",
   onChangeText,
   accessibilityLabel,
+  accessibilityHint,
   textInputProps,
   inputType = "default",
   status,
@@ -368,7 +370,6 @@ export const TextInputBase = ({
         ]}
         accessible={false}
         accessibilityRole={"none"}
-        accessibilityElementsHidden
         importantForAccessibility="no"
       >
         {/* Fake border managed with Animated.View to avoid
@@ -406,6 +407,7 @@ export const TextInputBase = ({
           disableFullscreenUI={true}
           accessibilityState={{ disabled }}
           accessibilityLabel={accessibilityLabel ?? placeholder}
+          accessibilityHint={accessibilityHint}
           selectionColor={IOColors[theme["interactiveElem-default"]]} // Caret on iOS
           cursorColor={IOColors[theme["interactiveElem-default"]]} // Caret Android
           maxLength={counterLimit}

package/src/components/textInput/TextInputValidation.tsx

@@ -11,14 +11,28 @@ import { triggerHaptic } from "../../functions";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { TextInputBase } from "./TextInputBase";
 
+export type ValidationWithOptions = { isValid: boolean; errorMessage: string };
+
 type TextInputValidationProps = Omit<
   React.ComponentProps<typeof TextInputBase>,
   "rightElement" | "status" | "bottomMessageColor" | "isPassword"
 > & {
-  onValidate: (value: string) => boolean;
+  /**
+   * This function can return either a `boolean` or a `ValidationWithOptions` object. 
+   * If a `boolean` is returned and the field is not valid, the value of the errorMessage prop will be displayed/announced. 
+   * If a `ValidationWithOptions` object is returned and the field is not valid, the value displayed/announced will be the one contained within this object.
+   */
+  onValidate: (value: string) => boolean | ValidationWithOptions;
+  /**
+   * In case of a dynamic `errorMessage`, use the `onValidate` function with a `ValidationWithOptions` object as the return value to ensure that screen readers announce the correct value.
+   */
   errorMessage: string;
 };
 
+function isValidationWithOptions(validation: boolean | ValidationWithOptions): validation is ValidationWithOptions {
+  return typeof validation === 'object' && 'isValid' in validation && 'errorMessage' in validation;
+}
+
 const feedbackIconSize: IOIconSizeScale = 24;
 
 export const TextInputValidation = ({
@@ -31,20 +45,32 @@ export const TextInputValidation = ({
   ...props
 }: TextInputValidationProps) => {
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
+  const [errMessage, setErrMessage] = useState(errorMessage);
 
-  const onBlurHandler = useCallback(() => {
-    const validation = onValidate(value);
-    setIsValid(validation);
-    if (!validation) {
+  const getErrorFeedback = useCallback((isValid: boolean, message: string) => {
+    setIsValid(isValid);
+    setErrMessage(message);
+
+    if (!isValid) {
       triggerHaptic("notificationError");
-      AccessibilityInfo.announceForAccessibilityWithOptions(errorMessage, {
+      AccessibilityInfo.announceForAccessibilityWithOptions(message, {
         queue: true
       });
     } else {
       triggerHaptic("notificationSuccess");
     }
+  }, []);
+
+  const onBlurHandler = useCallback(() => {
+    const validation = onValidate(value);
+
+    if (isValidationWithOptions(validation)) {
+      getErrorFeedback(validation.isValid, validation.errorMessage);
+    } else {
+      getErrorFeedback(validation, errorMessage);
+    }
     onBlur?.();
-  }, [onValidate, value, onBlur, errorMessage]);
+  }, [value, errorMessage, onBlur, onValidate, getErrorFeedback]);
 
   const onFocusHandler = useCallback(() => {
     setIsValid(undefined);
@@ -52,13 +78,13 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (isValid === false && errorMessage ? errorMessage : bottomMessage),
-    [isValid, errorMessage, bottomMessage]
+    () => (isValid === false && errMessage ? errMessage : bottomMessage),
+    [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (isValid === false && errorMessage ? "error-600" : undefined),
-    [isValid, errorMessage]
+    () => (isValid === false && errMessage ? "error-600" : undefined),
+    [isValid, errMessage]
   );
 
   const feedbackIconAttrMap: Record<

package/src/components/toast/ToastProvider.tsx

@@ -12,6 +12,7 @@ import Animated, {
   SlideInUp,
   SlideOutUp
 } from "react-native-reanimated";
+import { IOVisualCostants } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { Dismissable } from "../layout/Dismissable";
 import { ToastNotification } from "./ToastNotification";
@@ -49,9 +50,9 @@ const ToastNotificationStackItem = ({
   ...toast
 }: ToastNotificationStackItemProps) => (
   <Animated.View
-    entering={SlideInUp.duration(300).easing(Easing.inOut(Easing.exp))}
-    exiting={SlideOutUp.duration(300).easing(Easing.inOut(Easing.exp))}
-    layout={SequencedTransition.duration(300)}
+    entering={SlideInUp.springify().damping(16).mass(0.9).stiffness(90)}
+    exiting={SlideOutUp.duration(700).easing(Easing.inOut(Easing.exp))}
+    layout={SequencedTransition.duration(500).delay(50)}
     style={{ paddingBottom: 8 }}
   >
     <Dismissable onDismiss={onDismiss}>
@@ -119,7 +120,10 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
     <ToastContext.Provider value={contextValue as ToastContext}>
       <InitializeToastRef />
       <SafeAreaView style={styles.container} pointerEvents="box-none">
-        <View style={styles.list} pointerEvents="box-none">
+        <View
+          style={{ padding: IOVisualCostants.appMarginDefault }}
+          pointerEvents="box-none"
+        >
           {toasts.map(toast => (
             <ToastNotificationStackItem
               key={toast.id}
@@ -150,8 +154,5 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
     overflow: "visible"
-  },
-  list: {
-    padding: 24
   }
 });

package/src/core/IOAnimations.ts

@@ -19,6 +19,11 @@ export const IOSpringValues = {
     damping: 10,
     mass: 0.5,
     stiffness: 200
+  },
+  header: {
+    damping: 10,
+    mass: 0.5,
+    stiffness: 200
   }
 };
 

package/src/core/IOTransitions.ts

@@ -1,4 +1,9 @@
-import { Easing, withTiming } from "react-native-reanimated";
+import {
+  Easing,
+  withDelay,
+  withTiming,
+  WithTimingConfig
+} from "react-native-reanimated";
 
 /**
 A custom enter transition designed for the average size
@@ -93,6 +98,45 @@ export const exitTransitionInnerContent = () => {
   };
 };
 
+/**
+A custom enter transition designed for the `AlertEdgeToEdge` component.
+*/
+
+const alertEdgeToEdgeEnterTransitionDuration: number = 500; /* in ms */
+const alertEdgeToEdgeExitTransitionDuration: number = 400; /* in ms */
+
+export const alertEdgeToEdgeInsetTransitionConfig: WithTimingConfig = {
+  duration: 400,
+  easing: Easing.inOut(Easing.ease)
+};
+
+export const enterTransitionAlertEdgeToEdge = (values: {
+  targetHeight: number;
+}) => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(1, {
+      duration: alertEdgeToEdgeEnterTransitionDuration,
+      easing: Easing.out(Easing.exp)
+    }),
+    transform: [
+      {
+        translateY: withTiming(0, {
+          duration: alertEdgeToEdgeEnterTransitionDuration,
+          easing: Easing.out(Easing.exp)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 0,
+    transform: [{ translateY: -values.targetHeight * 0.5 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
 /**
 A custom enter/exit transition designed for icons
 in `TextInput`.
@@ -125,6 +169,72 @@ export const enterTransitionInputIcon = () => {
   };
 };
 
+/**
+A custom enter transition designed for the `AlertEdgeToEdge` content (icon and text).
+*/
+export const enterTransitionAlertEdgeToEdgeContent = () => {
+  "worklet";
+  const animations = {
+    opacity: withDelay(
+      alertEdgeToEdgeEnterTransitionDuration * 0.2,
+      withTiming(1, {
+        duration: alertEdgeToEdgeEnterTransitionDuration * 0.7,
+        easing: Easing.out(Easing.ease)
+      })
+    ),
+    transform: [
+      {
+        scaleY: withDelay(
+          alertEdgeToEdgeEnterTransitionDuration * 0.2,
+          withTiming(1, {
+            duration: alertEdgeToEdgeEnterTransitionDuration * 0.7,
+            easing: Easing.out(Easing.exp)
+          })
+        )
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 0,
+    transform: [{ scaleY: 0.7 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
+
+/**
+A custom exit transition designed for the `AlertEdgeToEdge` component.
+*/
+export const exitTransitionAlertEdgeToEdge = (values: {
+  currentHeight: number;
+}) => {
+  "worklet";
+  const animations = {
+    opacity: withTiming(0, {
+      duration: alertEdgeToEdgeExitTransitionDuration,
+      easing: Easing.in(Easing.exp)
+    }),
+    transform: [
+      {
+        translateY: withTiming(-values.currentHeight * 0.5, {
+          duration: alertEdgeToEdgeExitTransitionDuration,
+          easing: Easing.in(Easing.exp)
+        })
+      }
+    ]
+  };
+  const initialValues = {
+    opacity: 1,
+    transform: [{ translateY: 0 }]
+  };
+  return {
+    initialValues,
+    animations
+  };
+};
+
 export const exitTransitionInputIcon = () => {
   "worklet";
   const animations = {

package/src/utils/accessibility.ts

@@ -2,7 +2,7 @@ import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import I18n from "i18n-js";
 import { useEffect, useState } from "react";
-import { AccessibilityInfo } from "react-native";
+import { AccessibilityInfo, Platform } from "react-native";
 
 /**
  * This function is used to get the text that will be read by the screen reader
@@ -26,22 +26,25 @@ export const useBoldTextEnabled = () => {
   const [boldTextEnabled, setBoldTextEnabled] = useState(false);
 
   useEffect(() => {
-    const boldTextChangedSubscription = AccessibilityInfo.addEventListener(
-      "boldTextChanged",
-      isBoldTextEnabled => {
-        setBoldTextEnabled(isBoldTextEnabled);
-      }
-    );
+    if (Platform.OS !== "web") {
+      const boldTextChangedSubscription = AccessibilityInfo.addEventListener(
+        "boldTextChanged",
+        isBoldTextEnabled => {
+          setBoldTextEnabled(isBoldTextEnabled);
+        }
+      );
 
-    AccessibilityInfo.isBoldTextEnabled()
-      .then(isBoldTextEnabled => {
-        setBoldTextEnabled(isBoldTextEnabled);
-      })
-      .catch(_ => false);
+      AccessibilityInfo.isBoldTextEnabled()
+        .then(isBoldTextEnabled => {
+          setBoldTextEnabled(isBoldTextEnabled);
+        })
+        .catch(_ => false);
 
-    return () => {
-      boldTextChangedSubscription.remove();
-    };
+      return () => {
+        boldTextChangedSubscription.remove();
+      };
+    }
+    return;
   }, []);
 
   return boldTextEnabled;