@pagopa/io-app-design-system 4.2.1 → 4.3.1

package/lib/typescript/hooks/useListItemAnimation.d.ts

@@ -0,0 +1,10 @@
+import { GestureResponderEvent, ViewStyle } from "react-native";
+import { AnimatedStyle, SharedValue } from "react-native-reanimated";
+export declare const useListItemAnimation: () => {
+    progress: SharedValue<number>;
+    onPressIn: (event: GestureResponderEvent) => void;
+    onPressOut: (event: GestureResponderEvent) => void;
+    scaleAnimatedStyle: AnimatedStyle<ViewStyle>;
+    backgroundAnimatedStyle: AnimatedStyle<ViewStyle>;
+};
+//# sourceMappingURL=useListItemAnimation.d.ts.map

package/lib/typescript/hooks/useListItemAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useListItemAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,aAAa,EAIb,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,oBAAoB,QAAO;IACtC,QAAQ,EAAE,YAAY,MAAM,CAAC,CAAC;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,cAAc,SAAS,CAAC,CAAC;IAC7C,uBAAuB,EAAE,cAAc,SAAS,CAAC,CAAC;CAyCnD,CAAC"}

package/lib/typescript/hooks/useScaleAnimation.d.ts

@@ -0,0 +1,10 @@
+import { GestureResponderEvent, ViewStyle } from "react-native";
+import { AnimatedStyle, SharedValue } from "react-native-reanimated";
+import { IOScaleEffect } from "../core";
+export declare const useScaleAnimation: (magnitude?: IOScaleEffect) => {
+    progress: SharedValue<number>;
+    onPressIn: (event: GestureResponderEvent) => void;
+    onPressOut: (event: GestureResponderEvent) => void;
+    scaleAnimatedStyle: AnimatedStyle<ViewStyle>;
+};
+//# sourceMappingURL=useScaleAnimation.d.ts.map

package/lib/typescript/hooks/useScaleAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScaleAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useScaleAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,aAAa,EAGb,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,iBAAiB,eACjB,aAAa,KACvB;IACD,QAAQ,EAAE,YAAY,MAAM,CAAC,CAAC;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,cAAc,SAAS,CAAC,CAAC;CAuB9C,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components";
 export * from "./core";
 export * from "./functions";
+export * from "./hooks";
 export * from "./utils/fonts";
 export * from "./utils/types";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/lib/typescript/utils/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useSpringPressProgressValue";
+export * from "./useErrorShakeAnimation";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/utils/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/index.tsx"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC"}

package/lib/typescript/utils/hooks/useSpringPressProgressValue.d.ts

@@ -1,10 +1,9 @@
-export declare const useSpringPressProgressValue: (springValue?: {
-    damping: number;
-    mass: number;
-    stiffness: number;
-}) => {
-    onPressIn: () => void;
-    onPressOut: () => void;
-    progress: Readonly<import("react-native-reanimated").SharedValue<number>>;
+import { GestureResponderEvent } from "react-native";
+import { SharedValue } from "react-native-reanimated";
+import { IOSpringValues } from "../../core";
+export declare const useSpringPressProgressValue: (springValue?: IOSpringValues) => {
+    progress: SharedValue<number>;
+    onPressIn: (event: GestureResponderEvent) => void;
+    onPressOut: (event: GestureResponderEvent) => void;
 };
 //# sourceMappingURL=useSpringPressProgressValue.d.ts.map

package/lib/typescript/utils/hooks/useSpringPressProgressValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSpringPressProgressValue.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/useSpringPressProgressValue.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,2BAA2B;;;;;;;;CAmBvC,CAAC"}
+{"version":3,"file":"useSpringPressProgressValue.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/useSpringPressProgressValue.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EACL,WAAW,EAIZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,eAAO,MAAM,2BAA2B,iBACzB,cAAc,KAC1B;IACD,QAAQ,EAAE,YAAY,MAAM,CAAC,CAAC;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAkBpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { forwardRef, useCallback, useState } from "react";
 import {
   ColorValue,
   GestureResponderEvent,
@@ -9,20 +9,12 @@ import {
   TextLayoutEventData,
   View
 } from "react-native";
-import Animated, {
-  Extrapolation,
-  SharedValue,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { IOVisualCostants, useIOThemeContext } from "../../core";
-import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
 import { IOAlertSpacing } from "../../core/IOSpacing";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { VSpacer } from "../spacer";
@@ -132,7 +124,7 @@ const mapVariantStatesDarkMode: Record<
   }
 };
 
-export const Alert = React.forwardRef<View, AlertType>(
+export const Alert = forwardRef<View, AlertType>(
   (
     {
       variant,
@@ -146,8 +138,9 @@ export const Alert = React.forwardRef<View, AlertType>(
     }: AlertType,
     viewRef
   ): JSX.Element => {
+    const { onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation("medium");
     const { themeType } = useIOThemeContext();
-    const isPressed: SharedValue<number> = useSharedValue(0);
 
     const [isMultiline, setIsMultiline] = useState(false);
 
@@ -158,38 +151,6 @@ export const Alert = React.forwardRef<View, AlertType>(
       []
     );
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-    // Using a spring-based animation for our interpolations
-    const progressPressed = useDerivedValue(() =>
-      withSpring(isPressed.value, IOSpringValues.button)
-    );
-
-    // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-      // Scale down button slightly when pressed
-      const scale = interpolate(
-        progressPressed.value,
-        [0, 1],
-        [1, animationScaleValue],
-        Extrapolation.CLAMP
-      );
-
-      return {
-        transform: [{ scale }]
-      };
-    });
-
-    const onPressIn = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 0;
-    }, [isPressed]);
-
     const mapVariantStates =
       themeType === "light"
         ? mapVariantStatesLightMode
@@ -287,7 +248,7 @@ export const Alert = React.forwardRef<View, AlertType>(
             fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
             { backgroundColor: mapVariantStates[variant].background },
             // Disable pressed animation when component is full width
-            !fullWidth && pressedAnimationStyle
+            !fullWidth && scaleAnimatedStyle
           ]}
         >
           {renderMainBlock()}

package/src/components/alert/AlertEdgeToEdge.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -6,18 +6,9 @@ import {
   Text,
   View
 } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
-  IOScaleValues,
-  IOSpringValues,
   IOVisualCostants,
   enterTransitionAlertEdgeToEdge,
   enterTransitionAlertEdgeToEdgeContent,
@@ -30,6 +21,7 @@ import {
 } from "../../core/IOColors";
 import { IOAlertSpacing } from "../../core/IOSpacing";
 import { IOStyles } from "../../core/IOStyles";
+import { useScaleAnimation } from "../../hooks";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
@@ -105,42 +97,10 @@ export const AlertEdgeToEdge = ({
   accessibilityHint,
   testID
 }: AlertEdgeToEdgeProps) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("slight");
   const insets = useSafeAreaInsets();
 
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   const backgroundColor = useMemo(
     () => IOColors[mapVariantStates[variant].background],
     [variant]
@@ -201,7 +161,7 @@ export const AlertEdgeToEdge = ({
     >
       <Animated.View
         entering={enterTransitionAlertEdgeToEdgeContent}
-        style={[styles.alert, pressedAnimationStyle]}
+        style={[styles.alert, scaleAnimatedStyle]}
       >
         {renderMainBlock()}
       </Animated.View>

package/src/components/banner/Banner.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import {
   AccessibilityRole,
   GestureResponderEvent,
@@ -7,28 +7,19 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
   IOBannerBigSpacing,
   IOBannerRadius,
   IOBannerSmallHSpacing,
   IOBannerSmallVSpacing,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
   useIOExperimentalDesign,
   useIOTheme,
   useIOThemeContext
 } from "../../core";
 import { hexToRgba, IOColors } from "../../core/IOColors";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import {
@@ -159,7 +150,8 @@ export const Banner = ({
   accessibilityLabel,
   testID
 }: Banner) => {
-  const isPressed: SharedValue<number> = useSharedValue(0);
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
 
   const { isExperimental } = useIOExperimentalDesign();
   const { themeType } = useIOThemeContext();
@@ -181,40 +173,6 @@ export const Banner = ({
     paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
   };
 
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
    if they are present. */
   const fallbackAccessibilityLabel = [title, content, action]
@@ -305,11 +263,7 @@ export const Banner = ({
       accessible={false}
     >
       <Animated.View
-        style={[
-          styles.container,
-          dynamicContainerStyles,
-          pressedAnimationStyle
-        ]}
+        style={[styles.container, dynamicContainerStyles, scaleAnimatedStyle]}
       >
         {renderMainBlock()}
       </Animated.View>

package/src/components/buttons/ButtonLink.tsx

@@ -1,23 +1,18 @@
-import React, { useCallback, useMemo } from "react";
+import React, { forwardRef, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
-  useAnimatedProps,
   useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   IOButtonStyles,
   IOColors,
-  IOScaleValues,
-  IOSpringValues,
+  IOSpacingScale,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -25,7 +20,6 @@ import {
   IOIcons,
   IconClassComponent
 } from "../icons";
-import { HSpacer } from "../spacer/Spacer";
 import { IOText, buttonTextFontSize } from "../typography";
 
 export type ColorButtonLink = "primary" | "contrast";
@@ -97,7 +91,7 @@ const mapLegacyColorStates: Record<
 
 const DISABLED_OPACITY = 0.5;
 
-export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
+export const ButtonLink = forwardRef<View, ButtonLinkProps>(
   (
     {
       color = "primary",
@@ -112,8 +106,10 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
     },
     ref
   ) => {
-    const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
+    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation();
+    const reducedMotion = useReducedMotion();
 
     const colorMap = useMemo(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
@@ -122,70 +118,20 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
 
     const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-    // Using a spring-based animation for our interpolations
-    const progressPressed = useDerivedValue(() =>
-      withSpring(isPressed.value, IOSpringValues.button)
-    );
-
-    // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-
-      // Scale down button slightly when pressed
-      const scale = interpolate(
-        progressPressed.value,
-        [0, 1],
-        [1, animationScaleValue],
-        Extrapolate.CLAMP
-      );
-
-      return {
-        transform: [{ scale }]
-      };
-    });
-
-    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-
-      const labelColor = interpolateColor(
-        progressPressed.value,
+    const pressedColorAnimationStyle = useAnimatedStyle(() => ({
+      color: interpolateColor(
+        progress.value,
         [0, 1],
         [colorMap[color].label.default, colorMap[color].label.pressed]
-      );
-
-      return {
-        color: labelColor
-      };
-    });
-
-    // Animate the <Icon> color prop
-    const pressedColorIconAnimationStyle = useAnimatedProps(() => {
-      const iconColor = interpolateColor(
-        progressPressed.value,
-        [0, 1],
-        [colorMap[color].label.default, colorMap[color].label.pressed]
-      );
-
-      return { color: iconColor };
-    });
+      )
+    }));
 
     const AnimatedIconClassComponent =
       Animated.createAnimatedComponent(IconClassComponent);
 
-    const onPressIn = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 0;
-    }, [isPressed]);
-
     // Icon size
     const iconSize: IOIconSizeScale = 24;
+    const iconMargin: IOSpacingScale = 8;
 
     return (
       <Pressable
@@ -208,31 +154,28 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
           style={[
             IOButtonStyles.buttonLink,
             iconPosition === "end" && { flexDirection: "row-reverse" },
+            { columnGap: iconMargin },
             disabled ? { opacity: DISABLED_OPACITY } : {},
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
-            !disabled && pressedAnimationStyle
+            !disabled && !reducedMotion && scaleAnimatedStyle
           ]}
         >
-          {icon && (
-            <>
-              {!disabled ? (
-                <AnimatedIconClassComponent
-                  name={icon}
-                  animatedProps={pressedColorIconAnimationStyle}
-                  color={colorMap[color]?.label?.default}
-                  size={iconSize}
-                />
-              ) : (
-                <AnimatedIcon
-                  name={icon}
-                  color={colorMap[color]?.label?.disabled}
-                  size={iconSize}
-                />
-              )}
-              <HSpacer size={8} />
-            </>
-          )}
+          {icon &&
+            (!disabled ? (
+              <AnimatedIconClassComponent
+                name={icon}
+                animatedProps={pressedColorAnimationStyle}
+                color={colorMap[color]?.label?.default}
+                size={iconSize}
+              />
+            ) : (
+              <AnimatedIcon
+                name={icon}
+                color={colorMap[color]?.label?.disabled}
+                size={iconSize}
+              />
+            ))}
           <AnimatedIOText
             accessible={false}
             accessibilityElementsHidden
@@ -243,7 +186,7 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
             style={
               disabled
                 ? { color: colorMap[color]?.label?.disabled }
-                : { ...pressedColorLabelAnimationStyle }
+                : { ...pressedColorAnimationStyle }
             }
             numberOfLines={1}
             ellipsizeMode="tail"