@pagopa/io-app-design-system 5.7.0 → 5.7.2

package/src/components/codeInput/CodeInput.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { ColorValue, StyleSheet, View } from "react-native";
 import Animated from "react-native-reanimated";
-import { hexToRgba, IOColors, useIOThemeContext } from "../../core";
+import { useIOThemeContext } from "../../context";
+import { hexToRgba, IOColors } from "../../core/IOColors";
 import { triggerHaptic } from "../../functions";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
-import { HStack } from "../stack";
+import { HStack } from "../layout";
 
 type CodeInputProps = {
   value: string;

package/src/components/featureInfo/FeatureInfo.tsx

@@ -11,7 +11,8 @@ import {
   Pictogram,
   VStack
 } from "../../components";
-import { IOColors, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors } from "../../core/IOColors";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting

package/src/components/{layout → headers}/HeaderFirstLevel.tsx

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { createRef, useEffect, useLayoutEffect } from "react";
+import React, { createRef, useEffect, useLayoutEffect } from "react";
 import {
   AccessibilityInfo,
   findNodeHandle,
@@ -14,15 +13,15 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useIOTheme } from "../../context";
 import {
   alertEdgeToEdgeInsetTransitionConfig,
   IOColors,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
-import { HStack } from "../stack";
+import { HStack } from "../layout";
 import { H2 } from "../typography";
 import { HeaderActionProps } from "./common";
 

package/src/components/{layout → headers}/HeaderSecondLevel.tsx

@@ -23,6 +23,7 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import {
   IOColors,
   IOSpringValues,
@@ -31,15 +32,12 @@ import {
   IOVisualCostants,
   alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
-  iconBtnSizeSmall,
-  useIONewTypeface,
-  useIOTheme
+  iconBtnSizeSmall
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
-import { HSpacer } from "../spacer";
-import { HStack } from "../stack";
+import { HSpacer, HStack } from "../layout";
 import { IOText } from "../typography";
 import { HeaderActionProps } from "./common";
 

package/src/components/headers/README.md

@@ -0,0 +1,10 @@
+# Headers
+
+There are different variants of header components that can be integrated into your screens:
+* `HeaderFirstLevel` for the main sections
+* `HeaderSecondLevel` for the secondary screens
+* `ModalBSHeader`: for modals and/or bottom sheets. The title is usually placed on the left side, while the close button is on the right.
+
+These headers have been developed to work properly alongside the [react-navigation](https://github.com/react-navigation/react-navigation) library.
+
+The adoption of these headers has been documented on a [specific documentation page](https://pagopa.atlassian.net/wiki/spaces/IP/pages/805634170/Come+integrare+l+header+nelle+pagine+di+secondo+livello) (_disclaimer:_ for internal use only).

package/src/components/headers/index.tsx

@@ -0,0 +1,4 @@
+export * from "./HeaderFirstLevel";
+export * from "./HeaderSecondLevel";
+export * from "./ModalBSHeader";
+export * from "./common";

package/src/components/index.tsx

@@ -7,12 +7,11 @@ export * from "./buttons";
 export * from "./checkbox";
 export * from "./claimsSelector";
 export * from "./codeInput";
-export * from "./contentWrapper";
-export * from "./divider";
 export * from "./featureInfo";
 export * from "./icons";
 export * from "./image";
 export * from "./layout";
+export * from "./headers";
 export * from "./listitems";
 export * from "./loadingSpinner";
 export * from "./logos";
@@ -24,13 +23,12 @@ export * from "./progressLoader";
 export * from "./radio";
 export * from "./searchInput";
 export * from "./skeleton";
-export * from "./spacer";
-export * from "./stack";
 export * from "./stepper";
 export * from "./switch";
 export * from "./tabs";
 export * from "./tag";
 export * from "./textInput";
+export * from "./templates";
 export * from "./toast";
 export * from "./tooltip";
 export * from "./typography";

package/src/components/{divider → layout}/Divider.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
-import { IOColors, useIOTheme } from "../../core";
+import { StyleSheet, View } from "react-native";
+import { useIOTheme } from "../../context";
+import { IOColors } from "../../core/IOColors";
 
 const DEFAULT_BORDER_SIZE = StyleSheet.hairlineWidth;
 

package/src/components/layout/FooterActions.tsx

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { Fragment, PropsWithChildren, useState } from "react";
+import React, { Fragment, PropsWithChildren, useState } from "react";
 import {
   ColorValue,
   LayoutChangeEvent,
@@ -10,14 +9,14 @@ import {
   ViewStyle
 } from "react-native";
 import Animated from "react-native-reanimated";
+import { useIOTheme } from "../../context";
 import {
   IOColors,
   IOSpacer,
   IOSpacing,
   IOVisualCostants,
   buttonSolidHeight,
-  hexToRgba,
-  useIOTheme
+  hexToRgba
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import {
@@ -25,7 +24,7 @@ import {
   IOButtonBlockSpecificProps,
   IOButtonLinkSpecificProps
 } from "../buttons";
-import { VSpacer } from "../spacer";
+import { VSpacer } from "./Spacer";
 import { useBottomMargins } from "./hooks/useBottomMargins";
 
 type IOButtonBlockProps = Omit<

package/src/components/layout/FooterActionsInline.tsx

@@ -1,14 +1,12 @@
-import * as React from "react";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import { useIOTheme, useIOThemeContext } from "../../context";
 import {
   IOColors,
   IOSpacer,
   IOSpacing,
   IOSpacingScale,
-  IOVisualCostants,
-  useIOTheme,
-  useIOThemeContext
+  IOVisualCostants
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOButton, IOButtonBlockSpecificProps } from "../buttons";

package/src/components/layout/GradientBottomActions.tsx

@@ -6,7 +6,7 @@ import Animated, { AnimatedStyle } from "react-native-reanimated";
 import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOButton, IOButtonProps } from "../buttons";
-import { VSpacer } from "../spacer";
+import { VSpacer } from "./Spacer";
 
 type PrimaryActionProps = Extract<
   IOButtonProps,

package/src/components/layout/README.md

@@ -0,0 +1,93 @@
+# Layout
+
+Different layout components are available to help with screen composition:
+* **`ContentWrapper`**: a basic `View` component with horizontal spacing applied to all screens by default. It is used to wrap the main content.
+* **Stack**: `VStack` and `HStack` are used to add **uniform** vertical and horizontal spacing between components, respectively. They take advantage of the `flex` properties combined with the new `gap` property.
+* **Spacer**: `VSpacer` and `HSpacer` are used to add **not-uniform** vertical and horizontal spacing between components, respectively. They are defined as `View` components with a fixed height or width.
+* **`Divider`**: used to add a divider between screen blocks.
+
+## Usage
+
+### `ContentWrapper`
+
+```jsx
+import { ContentWrapper } from '@pagopa/io-app-design-system';
+
+const Component = () => (
+  <ContentWrapper>
+   {/* […] */}
+  </ContentWrapper>
+);
+
+const ComponentWithLargerMargin = () => (
+  <ContentWrapper margin={24}>
+   {/* […] */}
+  </ContentWrapper>
+);
+```
+
+### `VStack` and `HStack`
+
+In the example below, the inner components are arranged with an equal uniform vertical space of 16 between them.
+
+```jsx
+import { VStack } from '@pagopa/io-app-design-system';
+
+const ComponentWithInnerSpacing = () => (
+  <VStack space={16}>
+   {/* […] */}
+  </VStack>
+);
+```
+
+### `VSpacer` and `HSpacer`
+
+```jsx
+import { VSpacer, HSpacer } from '@pagopa/io-app-design-system';
+
+const Component = () => (
+  <View>
+    {/* […] */}
+    <VSpacer space={8} />
+    {/* […] */}
+    <VSpacer space={16} />
+    {/* […] */}
+  </View>
+);
+
+const ComponentWithHSpacer = () => (
+  <View style={{
+    flexDirection: 'row'
+  }}>
+    {/* […] */}
+    <HSpacer />
+    {/* […] */}
+  </ View>
+);
+```
+
+### `Divider`
+
+```jsx
+import { Divider } from '@pagopa/io-app-design-system';
+
+const Component = () => (
+  <Screen>
+    {/* [First block] */}
+    <Divider />
+    {/* [Second block] */}
+  </Screen>
+);
+```
+
+## Frequently Asked Questions
+
+### I need to add space between the components. Should I use `Stack` or `Spacer` components?
+
+The `gap` property, on which the `Stack` components are based, is handled directly by React Native's layout engine. This means that:
+- Native-level spacing calculation
+- Better memory efficiency
+- Faster layout computation
+
+Unless you need to create a lot of nested `Stack` containers to reflect the design specs, you should probably use `Stack` instead of `Spacer`.
+`Spacer` components are still available because they can be useful in specific edge cases.

package/src/components/layout/index.tsx

@@ -1,10 +1,9 @@
+export * from "./ContentWrapper";
+export * from "./Divider";
 export * from "./FooterActions";
 export * from "./FooterActionsInline";
-export * from "./ForceScrollDownView";
 export * from "./GradientBottomActions";
 export * from "./GradientScrollView";
-export * from "./HeaderFirstLevel";
-export * from "./HeaderSecondLevel";
-export * from "./ModalBSHeader";
-export * from "./common";
 export * from "./hooks";
+export * from "./Spacer";
+export * from "./Stack";

package/src/components/listitems/ListItemAction.tsx

@@ -1,12 +1,8 @@
 import React, { ComponentProps, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
-import {
-  IOColors,
-  IOListItemStyles,
-  IOListItemVisualParams,
-  useIOTheme
-} from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors, IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

package/src/components/listitems/ListItemAmount.tsx

@@ -1,10 +1,10 @@
 import React, { ComponentProps, useMemo } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../context";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOSpacingScale,
-  useIOTheme
+  IOSpacingScale
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

package/src/components/listitems/ListItemCheckbox.tsx

@@ -3,17 +3,17 @@ import { useState } from "react";
 import { Pressable, View } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated from "react-native-reanimated";
+import { useIOTheme } from "../../context";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSelectionTickVisualParams,
-  useIOTheme
+  IOSelectionTickVisualParams
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
-import { HSpacer, VSpacer } from "../spacer";
+import { HSpacer, VSpacer } from "../layout";
 import { BodySmall, H6 } from "../typography";
 
 type Props = {

package/src/components/listitems/ListItemHeader.tsx

@@ -1,19 +1,19 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../context";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacingScale,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
 import { IOIcons, Icon } from "../icons";
-import { VSpacer } from "../spacer";
+import { VSpacer } from "../layout";
 import { BodySmall, H6 } from "../typography";
 
 type ButtonLinkActionProps = {

package/src/components/listitems/ListItemInfo.tsx

@@ -1,11 +1,8 @@
 import React, { ComponentProps, ReactNode, useCallback, useMemo } from "react";
 import { AccessibilityRole, Platform, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
-import {
-  IOListItemStyles,
-  IOListItemVisualParams,
-  useIOTheme
-} from "../../core";
+import { IOListItemStyles, IOListItemVisualParams } from "../../core";
+import { useIOTheme } from "../../context";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,11 +1,8 @@
 import React, { ComponentProps, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
-import {
-  IOListItemStyles,
-  IOListItemVisualParams,
-  useIOTheme
-} from "../../core";
+import { IOListItemStyles, IOListItemVisualParams } from "../../core";
+import { useIOTheme } from "../../context";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

package/src/components/listitems/ListItemNav.tsx

@@ -1,14 +1,14 @@
 import React, { ComponentProps } from "react";
 import { GestureResponderEvent, Image, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { useIOTheme } from "../../context";
 import {
   IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
@@ -16,8 +16,8 @@ import { WithTestID } from "../../utils/types";
 import { Avatar } from "../avatar";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer } from "../layout";
 import { LoadingSpinner } from "../loadingSpinner";
-import { HSpacer, VSpacer } from "../spacer";
 import { BodySmall, Caption, H6 } from "../typography";
 
 type ListItemTopElementProps =

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,11 +1,8 @@
 import React, { ComponentProps } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
-import {
-  IOListItemStyles,
-  IOListItemVisualParams,
-  useIOTheme
-} from "../../core";
+import { IOListItemStyles, IOListItemVisualParams } from "../../core";
+import { useIOTheme } from "../../context";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

package/src/components/listitems/ListItemRadio.tsx

@@ -3,21 +3,20 @@ import { useState } from "react";
 import { Image, Pressable, StyleSheet, View } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated from "react-native-reanimated";
+import { useIOTheme } from "../../context";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSelectionTickVisualParams,
-  useIOTheme
+  IOSelectionTickVisualParams
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer, VStack } from "../layout";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { IOSkeleton } from "../skeleton";
-import { HSpacer, VSpacer } from "../spacer";
-import { VStack } from "../stack";
 import { BodySmall, H6 } from "../typography";
 
 type ListItemRadioGraphicProps =

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -1,11 +1,12 @@
-import * as React from "react";
+import React from "react";
 import { View } from "react-native";
 import RNReactNativeHapticFeedback from "react-native-haptic-feedback";
-import { IOColors, IOSelectionTickVisualParams, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors, IOSelectionTickVisualParams } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { Icon } from "../icons";
+import { HStack } from "../layout";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
-import { HStack } from "../stack";
 import { BodySmall, H6 } from "../typography";
 import { PressableListItemBase } from "./PressableListItemBase";
 

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,17 +1,17 @@
 import React, { ComponentProps, useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
+import { useIOTheme } from "../../context";
 import {
   IOSelectionListItemStyles,
-  IOSelectionListItemVisualParams,
-  useIOTheme
+  IOSelectionListItemVisualParams
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer } from "../layout";
 import { LoadingSpinner } from "../loadingSpinner";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
-import { HSpacer, VSpacer } from "../spacer";
 import { NativeSwitch } from "../switch/NativeSwitch";
 import { BodySmall, H6, LabelMini } from "../typography";
 

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,24 +1,23 @@
 import React, { ReactNode } from "react";
 import { ImageURISource, View } from "react-native";
 
+import { useIOTheme } from "../../context";
 import {
   IOColors,
   IOListItemLogoMargin,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
-
 import { WithTestID } from "../../utils/types";
 import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";
 import { Badge } from "../badge/Badge";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
+import { HStack, VStack } from "../layout";
 import { IOLogoPaymentType } from "../logos";
 import { IOSkeleton } from "../skeleton";
-import { HStack, VStack } from "../stack";
 import { BodySmall, H6 } from "../typography";
 import {
   PressableBaseProps,

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useRef } from "react";
 import { View, Animated, Easing, ColorValue } from "react-native";
 import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
-import { IOColors, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors } from "../../core/IOColors";
 
 export type LoadingSpinner = WithTestID<{
   color?: ColorValue;

package/src/components/modules/ModuleAttachment.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback } from "react";
 import { GestureResponderEvent, PressableProps } from "react-native";
-import { IOListItemVisualParams, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOListItemVisualParams } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
+import { HStack, VStack } from "../layout";
 import { LoadingSpinner } from "../loadingSpinner";
 import { IOSkeleton } from "../skeleton";
-import { HStack, VStack } from "../stack";
 import { Body } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";

package/src/components/modules/ModuleCheckout.tsx

@@ -6,15 +6,12 @@ import {
   StyleSheet,
   View
 } from "react-native";
-import {
-  IOSelectionListItemVisualParams,
-  IOSpacingScale,
-  useIOTheme
-} from "../../core";
+import { useIOTheme } from "../../context";
+import { IOSelectionListItemVisualParams, IOSpacingScale } from "../../core";
 import { ButtonLink } from "../buttons";
+import { HStack, VStack } from "../layout";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { IOSkeleton } from "../skeleton";
-import { HStack, VStack } from "../stack";
 import { BodySmall, H6 } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";

package/src/components/modules/ModuleCredential.tsx

@@ -9,16 +9,16 @@ import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
+import { useIOTheme } from "../../context";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { IOSkeleton } from "../skeleton";
-import { HStack } from "../stack/Stack";
+import { HStack } from "../layout/Stack";
 import { BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {

package/src/components/modules/ModuleIDP.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
-import {
-  IOListItemLogoMargin,
-  useIONewTypeface,
-  useIOTheme,
-  useIOThemeContext
-} from "../../core";
+import { useIONewTypeface, useIOThemeContext, useIOTheme } from "../../context";
+import { IOListItemLogoMargin } from "../../core";
 import { addCacheTimestampToUri } from "../../utils/image";
 import { IOText } from "../typography";
 import {