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

package/src/components/codeInput/CodeInput.tsx

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

package/src/components/divider/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/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,11 +13,11 @@ 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";

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,9 +32,7 @@ import {
   IOVisualCostants,
   alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
-  iconBtnSizeSmall,
-  useIONewTypeface,
-  useIOTheme
+  iconBtnSizeSmall
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";

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

@@ -13,6 +13,7 @@ export * from "./featureInfo";
 export * from "./icons";
 export * from "./image";
 export * from "./layout";
+export * from "./headers";
 export * from "./listitems";
 export * from "./loadingSpinner";
 export * from "./logos";
@@ -31,6 +32,7 @@ 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/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 {

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";