@pagopa/io-app-design-system 1.1.3 → 1.3.0

package/src/components/tabs/TabItem.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer } from "../spacer";
+import { LabelHeader } from "../typography/LabelHeader";
+import { IOSpringValues, IOColors, hexToRgba, IOScaleValues } from "../../core";
+import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
+
+type ColorMode = "light" | "dark";
+
+export type TabItem = WithTestID<{
+  label: string;
+  color?: ColorMode;
+  selected?: boolean;
+  fullWidth?: boolean;
+  // Icons
+  icon?: IOIcons;
+  iconSelected?: IOIcons;
+  // Accessibility
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  // Events
+  onPress?: (event: GestureResponderEvent) => void;
+}>;
+
+type ColorStates = {
+  background: {
+    default: string;
+    selected: string;
+    pressed: string;
+  };
+  foreground: {
+    default: IOColors;
+    selected: IOColors;
+  };
+};
+
+const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
+  light: {
+    background: {
+      default: "#ffffff00",
+      selected: IOColors["grey-50"],
+      pressed: IOColors["grey-50"]
+    },
+    foreground: {
+      default: "grey-650",
+      selected: "black"
+    }
+  },
+  dark: {
+    background: {
+      default: "#ffffff00",
+      selected: IOColors.white,
+      pressed: IOColors.white
+    },
+    foreground: {
+      default: "white",
+      selected: "grey-850"
+    }
+  }
+};
+
+const TabItem = ({
+  label,
+  color = "light",
+  selected = false,
+  fullWidth = false,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onPress,
+  icon,
+  iconSelected
+}: TabItem) => {
+  const {
+    progress: progressPressed,
+    onPressIn,
+    onPressOut
+  } = useSpringPressProgressValue(IOSpringValues.selection);
+
+  const colors = mapColorStates[color];
+  const foregroundColor = colors.foreground[selected ? "selected" : "default"];
+
+  const opaquePressedBackgroundColor = hexToRgba(
+    colors.background.pressed,
+    0.1
+  );
+
+  const isSelected: Animated.SharedValue<number> = useSharedValue(0);
+  const progressSelected = useDerivedValue(() =>
+    withSpring(isSelected.value, IOSpringValues.selection)
+  );
+
+  React.useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isSelected.value = selected ? 1 : 0;
+  }, [isSelected, selected]);
+
+  // Interpolate animation values from `pressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const pressedBackgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [colors.background.default, opaquePressedBackgroundColor]
+    );
+
+    const selectedBackgroundColor = interpolateColor(
+      progressSelected.value,
+      [0, 1],
+      [opaquePressedBackgroundColor, colors.background.selected]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, IOScaleValues?.basicButton?.pressedState],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor: selected
+        ? selectedBackgroundColor
+        : pressedBackgroundColor,
+      transform: [{ scale }]
+    };
+  }, [progressPressed, progressSelected, selected]);
+
+  const activeIcon = selected ? iconSelected ?? icon : icon;
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+    >
+      <Animated.View
+        style={[styles.container, animatedStyle, fullWidth && styles.fullWidth]}
+      >
+        {activeIcon && (
+          <>
+            <Icon name={activeIcon} color={foregroundColor} size={16} />
+            <HSpacer size={4} />
+          </>
+        )}
+        <LabelHeader color={foregroundColor}>{label}</LabelHeader>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 65,
+    justifyContent: "center",
+    alignSelf: "flex-start"
+  },
+  fullWidth: {
+    alignSelf: "auto"
+  }
+});
+
+export { TabItem };

package/src/components/tabs/TabNavigation.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { FlexStyle, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { TabItem } from "./TabItem";
+
+export type TabNavigationItem = Omit<
+  TabItem,
+  "onPress" | "color" | "selected" | "accessibilityLabel" | "accessibilityHint"
+>;
+
+type TabNavigationChildren =
+  | React.ReactElement<TabItem>
+  | Array<React.ReactElement<TabItem>>;
+
+type TabAlignment = "start" | "center" | "end" | "stretch";
+
+type TabNavigation = {
+  // Configuration
+  color?: TabItem["color"];
+  selectedIndex?: number;
+  tabAlignment?: TabAlignment;
+  // Events
+  onItemPress?: (index: number) => void;
+  // Tabs
+  children: TabNavigationChildren;
+};
+
+const itemsJustify: Record<TabAlignment, FlexStyle["justifyContent"]> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "space-between"
+};
+
+const TabNavigation = ({
+  color = "light",
+  selectedIndex: forceSelectedIndex,
+  tabAlignment = "center",
+  onItemPress,
+  children
+}: TabNavigation) => {
+  const [itemMinWidth, setItemMinWidth] = React.useState<number>(0);
+  const [selectedIndex, setSelectedIndex] = React.useState(
+    forceSelectedIndex ?? 0
+  );
+
+  const handleItemPress = (index: number) => {
+    setSelectedIndex(forceSelectedIndex ?? index);
+    onItemPress?.(index);
+  };
+
+  const handleItemOnLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setItemMinWidth(current => Math.max(current, width));
+  };
+
+  const stretchItems = tabAlignment === "stretch";
+
+  const wrapChild = (child: React.ReactElement<TabItem>, index: number = 0) => (
+    <View
+      key={index}
+      style={[
+        styles.item,
+        {
+          marginEnd: index === React.Children.count(children) - 1 ? 0 : 8
+        },
+        stretchItems && {
+          minWidth: itemMinWidth
+        }
+      ]}
+      onLayout={handleItemOnLayout}
+    >
+      {React.cloneElement<TabItem>(child, {
+        onPress: event => {
+          child.props.onPress?.(event);
+          handleItemPress(index);
+        },
+        selected: selectedIndex === index,
+        color
+      })}
+    </View>
+  );
+
+  return (
+    <ScrollView
+      horizontal={true}
+      centerContent={true}
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.container,
+        {
+          justifyContent: itemsJustify[tabAlignment]
+        }
+      ]}
+    >
+      {Array.isArray(children) ? children.map(wrapChild) : wrapChild(children)}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingHorizontal: 24
+  },
+  item: {
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 100,
+    alignItems: "center"
+  }
+});
+
+export { TabNavigation };

package/src/components/tabs/index.tsx

@@ -0,0 +1,2 @@
+export { TabItem } from "./TabItem";
+export { TabNavigation } from "./TabNavigation";

package/src/components/typography/Body.tsx

@@ -5,14 +5,14 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
+  IOColors,
+  "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
 type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 const fontName: FontFamily = "TitilliumWeb";
@@ -28,10 +28,10 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
  * @constructor
  */
 export const Body: React.FunctionComponent<OwnProps> = props =>
-    useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: bodyDefaultWeight,
-        defaultColor: bodyDefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
-    });
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: bodyDefaultWeight,
+    defaultColor: bodyDefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
+  });

package/src/components/typography/Factory.tsx

@@ -4,9 +4,9 @@ import { IOFontWeight } from "../../utils/fonts";
 import { XOR } from "../../utils/types";
 import { BaseTypography } from "./BaseTypography";
 import {
-    calculateWeightColor,
-    RequiredTypographyProps,
-    TypographyProps
+  calculateWeightColor,
+  RequiredTypographyProps,
+  TypographyProps
 } from "./common";
 
 /**
@@ -14,8 +14,8 @@ import {
  * that will be used when the fields weight and color will be undefined.
  */
 type DefaultArgumentProps<WeightPropsType, ColorsPropsType> = {
-    defaultWeight: WeightPropsType;
-    defaultColor: ColorsPropsType;
+  defaultWeight: WeightPropsType;
+  defaultColor: ColorsPropsType;
 };
 
 /**
@@ -23,18 +23,18 @@ type DefaultArgumentProps<WeightPropsType, ColorsPropsType> = {
  * weight and color, thus allowing to implement more sophisticated strategies.
  */
 type DefaultFactoryProps<WeightPropsType, ColorsPropsType> = {
-    weightColorFactory: (
-        weight?: WeightPropsType,
-        color?: ColorsPropsType
-    ) => RequiredTypographyProps<WeightPropsType, ColorsPropsType>;
+  weightColorFactory: (
+    weight?: WeightPropsType,
+    color?: ColorsPropsType
+  ) => RequiredTypographyProps<WeightPropsType, ColorsPropsType>;
 };
 
 /**
  * Only one type of default props strategy is allowed
  */
 type DefaultProps<WeightPropsType, ColorsPropsType> = XOR<
-    DefaultArgumentProps<WeightPropsType, ColorsPropsType>,
-    DefaultFactoryProps<WeightPropsType, ColorsPropsType>
+  DefaultArgumentProps<WeightPropsType, ColorsPropsType>,
+  DefaultFactoryProps<WeightPropsType, ColorsPropsType>
 >;
 
 /**
@@ -44,25 +44,25 @@ type DefaultProps<WeightPropsType, ColorsPropsType> = XOR<
  * - The default {@link TypographyProps}
  */
 type FactoryProps<WeightPropsType, ColorsPropsType> = TypographyProps<
-    WeightPropsType,
-    ColorsPropsType
+  WeightPropsType,
+  ColorsPropsType
 > &
-    DefaultProps<WeightPropsType, ColorsPropsType> &
-    Omit<React.ComponentProps<typeof BaseTypography>, "weight" | "color">;
+  DefaultProps<WeightPropsType, ColorsPropsType> &
+  Omit<React.ComponentProps<typeof BaseTypography>, "weight" | "color">;
 
 /**
  * Calculate if the props is of type {@link DefaultFactoryProps}
  * @param props
  */
 function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
-    props:
-        | DefaultFactoryProps<WeightPropsType, ColorsPropsType>
-        | DefaultArgumentProps<WeightPropsType, ColorsPropsType>
+  props:
+    | DefaultFactoryProps<WeightPropsType, ColorsPropsType>
+    | DefaultArgumentProps<WeightPropsType, ColorsPropsType>
 ): props is DefaultFactoryProps<WeightPropsType, ColorsPropsType> {
-    return (
-        (props as DefaultFactoryProps<WeightPropsType, ColorsPropsType>)
-            .weightColorFactory !== undefined
-    );
+  return (
+    (props as DefaultFactoryProps<WeightPropsType, ColorsPropsType>)
+      .weightColorFactory !== undefined
+  );
 }
 
 /**
@@ -72,22 +72,22 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
  * @param props
  */
 export function useTypographyFactory<
-    WeightPropsType extends IOFontWeight,
-    ColorsPropsType extends IOColors
+  WeightPropsType extends IOFontWeight,
+  ColorsPropsType extends IOColors
 >(props: FactoryProps<WeightPropsType, ColorsPropsType>) {
-    // Use different strategy to calculate the default values, based on DefaultProps
-    const { weight, color } = useMemo(
-        () =>
-            isDefaultFactoryProps(props)
-                ? props.weightColorFactory(props.weight, props.color)
-                : calculateWeightColor(
-                    props.defaultWeight,
-                    props.defaultColor,
-                    props.weight,
-                    props.color
-                ),
-        [props]
-    );
+  // Use different strategy to calculate the default values, based on DefaultProps
+  const { weight, color } = useMemo(
+    () =>
+      isDefaultFactoryProps(props)
+        ? props.weightColorFactory(props.weight, props.color)
+        : calculateWeightColor(
+            props.defaultWeight,
+            props.defaultColor,
+            props.weight,
+            props.color
+          ),
+    [props]
+  );
 
-    return <BaseTypography weight={weight} color={color} {...props} />;
+  return <BaseTypography weight={weight} color={color} {...props} />;
 }

package/src/components/typography/H1.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import {
-    IOColors,
-    IOColorsStatusForeground,
-    IOTheme
+  IOColors,
+  IOColorsStatusForeground,
+  IOTheme
 } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "bluegreyDark" | "white" | "blue"
+  IOColors,
+  "bluegreyDark" | "white" | "blue"
 >;
 type AllowedColors =
-    | PartialAllowedColors
-    | IOColorsStatusForeground
-    | IOTheme["textHeading-default"];
+  | PartialAllowedColors
+  | IOColorsStatusForeground
+  | IOTheme["textHeading-default"];
 type AllowedWeight = Extract<IOFontWeight, "Bold">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h1FontSize = 26;
@@ -33,13 +33,13 @@ export const h1DefaultWeight: AllowedWeight = "Bold";
  * @param props
  * @constructor
  */
-export const H1: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h1DefaultWeight,
-        defaultColor: h1DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
-    });
-};
+export const H1: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h1DefaultWeight,
+    defaultColor: h1DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
+  });
+};

package/src/components/typography/H2.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import {
-    IOColors,
-    IOColorsStatusForeground,
-    IOTheme
+  IOColors,
+  IOColorsStatusForeground,
+  IOTheme
 } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "bluegreyDark" | "white" | "blue" | "bluegrey"
+  IOColors,
+  "bluegreyDark" | "white" | "blue" | "bluegrey"
 >;
 type AllowedColors =
-    | PartialAllowedColors
-    | IOColorsStatusForeground
-    | IOTheme["textHeading-default"];
+  | PartialAllowedColors
+  | IOColorsStatusForeground
+  | IOTheme["textHeading-default"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h2FontSize = 20;
@@ -33,13 +33,13 @@ export const h2DefaultWeight: AllowedWeight = "Bold";
  * @param props
  * @constructor
  */
-export const H2: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h2DefaultWeight,
-        defaultColor: h2DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
-    });
-};
+export const H2: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h2DefaultWeight,
+    defaultColor: h2DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
+  });
+};

package/src/components/typography/H4.tsx

@@ -8,7 +8,7 @@ type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /* Common typographic styles */
@@ -22,16 +22,16 @@ export const h4LineHeight = 24;
  * @constructor
  */
 export const H4: React.FC<OwnProps> = props => {
-    /* New typographic styles */
-    const font: FontFamily = "ReadexPro";
-    const defaultColor: AllowedColors = "black";
-    const defaultWeight: AllowedWeight = "Regular";
+  /* New typographic styles */
+  const font: FontFamily = "ReadexPro";
+  const defaultColor: AllowedColors = "black";
+  const defaultWeight: AllowedWeight = "Regular";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight,
-        defaultColor,
-        font,
-        fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
-    });
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
+  });
 };