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

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/README.md

@@ -0,0 +1,64 @@
+# 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.
+* **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>
+);
+```
+
+### Spacer
+
+```jsx
+import { VSpacer, HSpacer } from '@pagopa/io-app-design-system';
+
+const Component = () => (
+  <View>
+    {/* […] */}
+    <VSpacer />
+    {/* […] */}
+  </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>
+);
+```

package/src/components/layout/index.tsx

@@ -1,10 +1,5 @@
 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";

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

@@ -6,9 +6,9 @@ import Animated from "react-native-reanimated";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSelectionTickVisualParams,
-  useIOTheme
+  IOSelectionTickVisualParams
 } from "../../core";
+import { useIOTheme } from "../../context";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";

package/src/components/listitems/ListItemHeader.tsx

@@ -5,9 +5,9 @@ import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacingScale,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
+import { useIOTheme } from "../../context";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";

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

@@ -7,9 +7,9 @@ import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
+import { useIOTheme } from "../../context";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

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

@@ -6,9 +6,9 @@ import Animated from "react-native-reanimated";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSelectionTickVisualParams,
-  useIOTheme
+  IOSelectionTickVisualParams
 } from "../../core";
+import { useIOTheme } from "../../context";
 import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -1,7 +1,8 @@
-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 { AnimatedRadio } from "../radio/AnimatedRadio";

package/src/components/listitems/ListItemSwitch.tsx

@@ -2,9 +2,9 @@ import React, { ComponentProps, useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
 import {
   IOSelectionListItemStyles,
-  IOSelectionListItemVisualParams,
-  useIOTheme
+  IOSelectionListItemVisualParams
 } from "../../core";
+import { useIOTheme } from "../../context";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";

package/src/components/listitems/ListItemTransaction.tsx

@@ -6,10 +6,9 @@ import {
   IOListItemLogoMargin,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
-
+import { useIOTheme } from "../../context";
 import { WithTestID } from "../../utils/types";
 import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";

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,6 +1,7 @@
 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";

package/src/components/modules/ModuleCheckout.tsx

@@ -6,11 +6,8 @@ import {
   StyleSheet,
   View
 } from "react-native";
-import {
-  IOSelectionListItemVisualParams,
-  IOSpacingScale,
-  useIOTheme
-} from "../../core";
+import { IOSelectionListItemVisualParams, IOSpacingScale } from "../../core";
+import { useIOTheme } from "../../context";
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { IOSkeleton } from "../skeleton";

package/src/components/modules/ModuleCredential.tsx

@@ -9,9 +9,9 @@ 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";

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 {

package/src/components/modules/ModuleNavigation.tsx

@@ -10,9 +10,9 @@ 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";

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,6 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
-import { IOListItemVisualParams, IOSpacer, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOListItemVisualParams, IOSpacer } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";

package/src/components/modules/ModuleStatic.tsx

@@ -1,6 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { PressableProps, View, ViewProps } from "react-native";
-import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors, IOModuleStyles } from "../../core";
 import { HStack } from "../stack";
 
 type ModuleStaticProps = Pick<

package/src/components/modules/ModuleSummary.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
 import { IOIcons, Icon } from "../icons";
 import { H6, BodySmall } from "../typography";
 import {

package/src/components/modules/PressableModuleBase.tsx

@@ -3,12 +3,8 @@ import { PropsWithChildren, useCallback } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, { useReducedMotion } from "react-native-reanimated";
-import {
-  IOColors,
-  IOModuleIDPSavedVSpacing,
-  IOModuleStyles,
-  useIOTheme
-} from "../../core";
+import { IOColors, IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
+import { useIOTheme } from "../../context";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 

package/src/components/numberpad/NumberButton.tsx

@@ -6,7 +6,8 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { hexToRgba, IOColors, useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
+import { hexToRgba, IOColors } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { IOText } from "../typography";
 

package/src/components/otpInput/BoxedInput.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
-import { hexToRgba, IOColors, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { hexToRgba, IOColors } from "../../core/IOColors";
 import { H6, IOText } from "../typography";
 
 type Props = {

package/src/components/otpInput/OTPInput.tsx

@@ -9,7 +9,7 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
 import { triggerHaptic } from "../../functions";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
 import { VSpacer } from "../spacer";

package/src/components/pictograms/Pictogram.tsx

@@ -1,6 +1,7 @@
 import React, { JSX, useMemo } from "react";
 import { ColorValue } from "react-native";
-import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors, IOThemeDark, IOThemeLight } from "../../core/IOColors";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";

package/src/components/progressLoader/ProgressLoader.tsx

@@ -1,12 +1,12 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOColors, IOSpringValues, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors, IOSpringValues } from "../../core";
 
 export type ProgressLoader = {
   progress: number;

package/src/components/radio/AnimatedRadio.tsx

@@ -14,7 +14,7 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
 import { IOSelectionTickVisualParams } from "../../core/IOStyles";

package/src/components/radio/RadioButtonLabel.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { ComponentProps, useState } from "react";
+import React, { ComponentProps, useState } from "react";
 import { Pressable, View } from "react-native";
-import { IOSelectionTickVisualParams, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOSelectionTickVisualParams } from "../../core";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { H6 } from "../typography/H6";

package/src/components/searchInput/SearchInput.tsx

@@ -29,13 +29,8 @@ import Animated, {
   withTiming
 } from "react-native-reanimated";
 import { WithTestID } from "src/utils/types";
-import {
-  IOColors,
-  IOSpacingScale,
-  IOVisualCostants,
-  useIONewTypeface,
-  useIOTheme
-} from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
+import { IOColors, IOSpacingScale, IOVisualCostants } from "../../core";
 import {
   IOFontSize,
   IOMaxFontSizeMultiplier,

package/src/components/skeleton/IOSkeleton.tsx

@@ -7,7 +7,8 @@ import {
   ViewStyle
 } from "react-native";
 import { useReducedMotion } from "react-native-reanimated";
-import { IOColors, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors } from "../../core";
 import { WithTestID } from "../../utils/types";
 
 const ANIMATION_DURATION = 1250;

package/src/components/stepper/Stepper.tsx

@@ -1,6 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { ColorValue, View } from "react-native";
-import { IOColors, IOSpacer, IOVisualCostants, useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
+import { IOColors, IOSpacer, IOVisualCostants } from "../../core";
 
 type StepperProps = {
   steps: number;

package/src/components/switch/NativeSwitch.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Switch, SwitchProps } from "react-native";
-import { useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
 import { IOColors } from "../../core/IOColors";
 
 type OwnProps = Pick<

package/src/components/tabs/TabItem.tsx

@@ -13,13 +13,8 @@ import Animated, {
   useReducedMotion,
   withSpring
 } from "react-native-reanimated";
-import {
-  IOColors,
-  IOSpringValues,
-  hexToRgba,
-  useIONewTypeface,
-  useIOTheme
-} from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
+import { IOColors, IOSpringValues, hexToRgba } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";

package/src/components/tag/Tag.tsx

@@ -1,18 +1,15 @@
 import React from "react";
 import { Platform, StyleSheet, View, ViewStyle } from "react-native";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import {
   IOColors,
+  IOSpacingScale,
+  IOTagHSpacing,
   IOTagRadius,
+  IOTagVSpacing,
   IOTheme,
-  IOThemeLight,
-  useIONewTypeface,
-  useIOTheme
+  IOThemeLight
 } from "../../core";
-import {
-  IOSpacingScale,
-  IOTagHSpacing,
-  IOTagVSpacing
-} from "../../core/IOSpacing";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";

package/src/components/{layout → templates}/ForceScrollDownView.tsx

@@ -18,8 +18,7 @@ import {
 import { IOSpringValues, IOVisualCostants } from "../../core";
 import { IconButtonSolid } from "../buttons";
 import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
-import { FooterActions } from "./FooterActions";
-import { useFooterActionsInlineMeasurements } from "./hooks";
+import { FooterActions, useFooterActionsInlineMeasurements } from "../layout";
 
 type ForceScrollDownViewActions = {
   /**

package/src/components/templates/README.md

@@ -0,0 +1,19 @@
+# Templates
+
+Although these templates do not provide specific instructions on how to build your screens, they offer a range of built-in features that can be easily integrated.
+
+## `ForceScrollDownView`
+
+A special `ScrollView` that includes a button which forces the page to scroll to the bottom.
+
+### Usage
+
+```jsx
+import { ForceScrollDownView } from "@pagopa/io-app-design-system";
+
+const SpecialPage = () => (
+  <ForceScrollDownView>
+    { /* [Screen content] */}
+  </ForceScrollDownView>
+);
+```

package/src/components/templates/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Dismissable";
+export * from "./ForceScrollDownView";

package/src/components/textInput/TextInputBase.tsx

@@ -27,13 +27,8 @@ import Animated, {
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
-import {
-  IOColors,
-  IOSpacingScale,
-  hexToRgba,
-  useIONewTypeface,
-  useIOTheme
-} from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
+import { IOColors, IOSpacingScale, hexToRgba } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import {
   IOFontSize,

package/src/components/textInput/TextInputValidation.tsx

@@ -9,7 +9,7 @@ import {
 import { AccessibilityInfo, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { TextInputValidationRefProps } from "../../utils/types";
-import { useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
 import { IOColors } from "../../core/IOColors";
 import {
   enterTransitionInputIcon,

package/src/components/toast/ToastNotification.tsx

@@ -1,11 +1,7 @@
 import React, { useMemo } from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
-import {
-  hexToRgba,
-  IOAlertRadius,
-  IOColors,
-  useIOThemeContext
-} from "../../core";
+import { useIOThemeContext } from "../../context";
+import { IOAlertRadius, IOColors, hexToRgba } from "../../core";
 import { Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { ButtonText } from "../typography";