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

package/src/components/modules/ModuleNavigation.tsx

@@ -6,19 +6,19 @@ import {
   StyleSheet,
   View
 } from "react-native";
+import { useIOTheme } from "../../context";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOVisualCostants,
-  useIOTheme
+  IOVisualCostants
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
+import { HStack, VStack } from "../layout";
 import { IOSkeleton } from "../skeleton";
-import { HStack, VStack } from "../stack";
 import { BodySmall, LabelMini } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,11 +1,12 @@
-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";
+import { HStack, VStack } from "../layout";
 import { IOSkeleton } from "../skeleton";
-import { HStack, VStack } from "../stack";
 import { Body, BodySmall, H6 } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";

package/src/components/modules/ModuleStatic.tsx

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

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/numberpad/NumberPad.tsx

@@ -2,9 +2,8 @@ import React, { ComponentProps, JSX, useCallback, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { BiometricsValidType, Optional } from "../../utils/types";
 import { IconButton } from "../buttons";
-import { ContentWrapper } from "../contentWrapper";
 import { IOIconSizeScale, IOIcons } from "../icons";
-import { VStack } from "../stack";
+import { ContentWrapper, VStack } from "../layout";
 import { NumberButton, numberButtonStyles } from "./NumberButton";
 
 type BiometricAuthProps =

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,10 +9,10 @@ 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";
+import { VSpacer } from "../layout";
 import { BodySmall } from "../typography";
 import { BoxedInput } from "./BoxedInput";
 

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/radio/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps } from "react";
-import { Divider } from "../divider";
+import { Divider } from "../layout";
 import { ListItemRadio, ListItemRadioWithAmount } from "../listitems";
 
 export type RadioItem<T> = {

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,
@@ -43,7 +38,7 @@ import {
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { HSpacer } from "../spacer";
+import { HSpacer } from "../layout";
 import { BodySmall } from "../typography";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";

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,13 +1,9 @@
 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 { HSpacer } from "../layout";
 import { ButtonText } from "../typography";
 import { Toast, ToastVariant } from "./types";
 

package/src/components/toast/ToastProvider.tsx

@@ -14,7 +14,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { IOVisualCostants } from "../../core";
 import { triggerHaptic } from "../../functions";
-import { Dismissable } from "../layout/Dismissable";
+import { Dismissable } from "../templates";
 import { ToastNotification } from "./ToastNotification";
 import { ToastContext } from "./context";
 import { Toast } from "./types";

package/src/components/tooltip/Tooltip.tsx

@@ -19,7 +19,8 @@ import {
 } from "react-native";
 import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { IOColors, useIOTheme, useIOThemeContext } from "../../core";
+import { useIOTheme, useIOThemeContext } from "../../context";
+import { IOColors } from "../../core/IOColors";
 import { IconButton } from "../buttons";
 import { Body, H6 } from "../typography";
 import { BottomArrow, LeftArrow, RightArrow, TopArrow } from "./Arrows";

package/src/components/typography/Body.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,

package/src/components/typography/BodyMonospace.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
+import { useIOTheme } from "../../context";
 import { bodyFontSize, bodyLineHeight } from "./Body";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/BodySmall.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,

package/src/components/typography/ButtonText.tsx

@@ -1,6 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOColors, useIONewTypeface } from "../../core";
+import { useIONewTypeface } from "../../context";
+import { IOColors } from "../../core";
 import { IOFontFamily, IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/Caption.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/H1.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/H2.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/H3.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/H4.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/H5.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/H6.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/Hero.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 

package/src/components/typography/IOText.tsx

@@ -8,7 +8,8 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOColors, useIOTheme } from "../../core";
+import { IOColors } from "../../core";
+import { useIOTheme } from "../../context";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
   IOFontFamily,

package/src/components/typography/LabelMini.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../context";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,

package/src/components/typography/README.md

@@ -2,11 +2,11 @@
 
 ## Handling font files
 
-The application uses the font _Titillium Sans Pro_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumSansPro-Semibold` example, you must apply the following properties for Android:
+Fonts are handled differently than Android and iOS. To use the font, `Titillio-Semibold` example, you must apply the following properties for Android:
 
 ```css
 {
-  fontFamily: 'TitilliumSansPro-Semibold'
+  fontFamily: 'Titillio-Semibold'
 }
 ```
 
@@ -14,9 +14,18 @@ while in iOS the code to be applied is:
 
 ```css
 {
-  fontFamily: 'Titillium Sans Pro',
+  fontFamily: 'Titillio',
   fontWeight: '600',
 }
 ```
+The different font handling is managed by the `makeFontFamilyName` function. It's included in the [fonts.ts](../../utils/fonts.ts) file, which contains many other utility functions that simplify font management.
 
-To manage fonts and variants more easily, we have created utility functions within the file [fonts.ts](../../utils/fonts.ts).
+## `IOText`
+
+This library already offers a range of predefined typographic styles, such as `H1`, `H2`, and so on. However, there may be times when you need to add a specific typographic style with visual attributes that are not included in any of the predefined styles.
+
+In this case, you can define a custom typographic style using the `IOText` component, which is specifically designed to replace the native `Text` component.
+
+It has some useful features:
+- Built-in support for bold text, if set by the user (iOS only)
+- Based on the new `IOFontSize` scale

package/src/components/typography/markdown/MdH1.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../core";
+import { useIONewTypeface, useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**

package/src/components/typography/markdown/MdH2.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../core";
+import { useIONewTypeface, useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**

package/src/components/typography/markdown/MdH3.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../core";
+import { useIONewTypeface, useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**

package/src/{core → context}/IOThemeContextProvider.tsx

@@ -6,7 +6,7 @@ import React, {
   useState
 } from "react";
 import { Appearance, ColorSchemeName } from "react-native";
-import { IOTheme, IOThemeDark, IOThemeLight } from "./IOColors";
+import { IOTheme, IOThemeDark, IOThemeLight } from "../core/IOColors";
 
 export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };