@pagopa/io-app-design-system 7.0.2 → 7.1.0

package/src/components/typography/Hero.tsx

@@ -1,5 +1,3 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
@@ -10,22 +8,19 @@ export const heroLineHeight = 48;
 /**
  * `Hero` typographic style
  */
-export const Hero = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const Hero = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const HeroProps: IOTextProps = {
-      ...props,
-      weight: "Semibold",
-      size: 32,
-      lineHeight: 48,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const HeroProps: IOTextProps = {
+    ...props,
+    weight: "Semibold",
+    size: 32,
+    lineHeight: 48,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...HeroProps}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...HeroProps}>{props.children}</IOText>;
+};

package/src/components/typography/IOText.tsx

@@ -1,11 +1,10 @@
-import { ComponentProps, forwardRef, useMemo } from "react";
+import { ComponentProps, ComponentPropsWithRef, useMemo } from "react";
 import {
   AccessibilityRole,
   ColorValue,
   GestureResponderEvent,
   Text,
-  TextStyle,
-  View
+  TextStyle
 } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIONewTypeface } from "../../context";
@@ -50,7 +49,7 @@ type IOTextBaseProps = {
   style?: IOTextStyle;
 };
 
-type IOTextExcludedProps = Omit<ComponentProps<typeof Text>, "style">;
+type IOTextExcludedProps = Omit<ComponentPropsWithRef<typeof Text>, "style">;
 
 export type IOTextProps = IOTextBaseProps & IOTextExcludedProps;
 
@@ -88,77 +87,73 @@ const calculateTextStyle = (
  * @param props
  * @constructor
  */
-export const IOText = forwardRef<View, IOTextProps>(
-  (
-    {
-      color,
-      size,
-      font,
-      lineHeight,
-      weight,
-      fontStyle,
-      textStyle,
-      style,
-      children,
-      allowFontScaling = true,
-      maxFontSizeMultiplier,
-      ...props
-    },
-    ref
-  ) => {
-    const boldEnabled = useBoldTextEnabled();
-    const { newTypefaceEnabled } = useIONewTypeface();
+export const IOText = ({
+  color,
+  size,
+  font,
+  lineHeight,
+  weight,
+  fontStyle,
+  textStyle,
+  style,
+  children,
+  allowFontScaling = true,
+  maxFontSizeMultiplier,
+  ref,
+  ...props
+}: IOTextProps) => {
+  const boldEnabled = useBoldTextEnabled();
+  const { newTypefaceEnabled } = useIONewTypeface();
 
-    const computedFont =
-      font || (newTypefaceEnabled ? "Titillio" : "TitilliumSansPro");
+  const computedFont =
+    font || (newTypefaceEnabled ? "Titillio" : "TitilliumSansPro");
 
-    const computedStyleObj = useMemo(
-      () =>
-        calculateTextStyle(
-          color,
-          size,
-          computedFont,
-          lineHeight,
-          weight,
-          fontStyle,
-          boldEnabled
-        ),
-      [color, size, computedFont, lineHeight, weight, fontStyle, boldEnabled]
-    );
+  const computedStyleObj = useMemo(
+    () =>
+      calculateTextStyle(
+        color,
+        size,
+        computedFont,
+        lineHeight,
+        weight,
+        fontStyle,
+        boldEnabled
+      ),
+    [color, size, computedFont, lineHeight, weight, fontStyle, boldEnabled]
+  );
 
-    /* In some cases, for example when we use color transitions with
+  /* In some cases, for example when we use color transitions with
     `reanimated` we need to manage chromatic values as `ColorValue`
     or `string` (not `IOColors`). So we keep a way to override
     the the `color' attribute without giving the ability to
     override all other all other typographic attributes
     through the `style' prop. */
-    const fontStyleObj = style?.color
-      ? [{ ...computedStyleObj, color: style?.color }]
-      : computedStyleObj;
+  const fontStyleObj = style?.color
+    ? [{ ...computedStyleObj, color: style?.color }]
+    : computedStyleObj;
 
-    /* Some typographic styles like `H5` have certain `TextStyle` properties
+  /* Some typographic styles like `H5` have certain `TextStyle` properties
      like `textTransform` or `letterSpacing` that we want to apply to the text.
      We use the `textStyle` prop to pass these properties to the `IOText`
      component and preserve the ability to define the `style` prop as well.
      The `style` prop is the last one to be applied, so we can properly
      override the `color` attribute.
      */
-    const styleObj = style
-      ? [textStyle ?? {}, fontStyleObj ?? {}, style]
-      : [textStyle ?? {}, fontStyleObj ?? {}];
+  const styleObj = style
+    ? [textStyle ?? {}, fontStyleObj ?? {}, style]
+    : [textStyle ?? {}, fontStyleObj ?? {}];
 
-    /* Accessible typography based on the `fontScale` parameter */
-    const accessibleFontSizeProps: ComponentProps<typeof Text> = {
-      allowFontScaling,
-      maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOMaxFontSizeMultiplier
-    };
+  /* Accessible typography based on the `fontScale` parameter */
+  const accessibleFontSizeProps: ComponentProps<typeof Text> = {
+    allowFontScaling,
+    maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOMaxFontSizeMultiplier
+  };
 
-    return (
-      <Text ref={ref} style={styleObj} {...props} {...accessibleFontSizeProps}>
-        {children}
-      </Text>
-    );
-  }
-);
+  return (
+    <Text ref={ref} style={styleObj} {...props} {...accessibleFontSizeProps}>
+      {children}
+    </Text>
+  );
+};
 
 export const AnimatedIOText = Animated.createAnimatedComponent(IOText);

package/src/components/typography/LabelMini.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { Ref } from "react";
 import { Pressable, View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOFontWeight } from "../../utils/fonts";
@@ -9,63 +9,59 @@ import {
   TypographicStyleProps
 } from "./IOText";
 
-type LabelMiniProps = TypographicStyleProps & {
+type LabelMiniProps = Omit<TypographicStyleProps, "ref"> & {
+  ref?: Ref<View>;
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
 /**
  * `LabelMini` typographic style
  */
-export const LabelMini = forwardRef<View, LabelMiniProps>(
-  (
-    {
-      weight: customWeight,
-      color: customColor,
-      asLink,
-      accessibilityRole = "link",
-      textStyle: customTextStyle,
-      onPress,
-      ...props
-    },
-    ref?: ForwardedRef<View>
-  ) => {
-    const theme = useIOTheme();
+export const LabelMini = ({
+  ref,
+  weight: customWeight,
+  color: customColor,
+  asLink,
+  accessibilityRole = "link",
+  textStyle: customTextStyle,
+  onPress,
+  ...props
+}: LabelMiniProps) => {
+  const theme = useIOTheme();
 
-    const defaultColor = asLink
-      ? theme["interactiveElem-default"]
-      : theme["textBody-tertiary"];
+  const defaultColor = asLink
+    ? theme["interactiveElem-default"]
+    : theme["textBody-tertiary"];
 
-    const LabelMiniProps: IOTextProps = {
-      ...props,
-      dynamicTypeRamp: "footnote" /* iOS only */,
-      weight: customWeight || "Semibold",
-      size: 12,
-      lineHeight: 18,
-      color: customColor ?? defaultColor,
-      ...(asLink
-        ? {
-            accessibilityRole,
-            textStyle: customTextStyle ?? { textDecorationLine: "underline" }
-          }
-        : {})
-    };
-
-    if (asLink) {
-      return (
-        <Pressable
-          onPress={onPress}
-          ref={ref}
-          accessibilityRole={accessibilityRole}
-        >
-          <IOText {...LabelMiniProps}>{props.children}</IOText>
-        </Pressable>
-      );
-    }
+  const LabelMiniProps: IOTextProps = {
+    ...props,
+    dynamicTypeRamp: "footnote" /* iOS only */,
+    weight: customWeight || "Semibold",
+    size: 12,
+    lineHeight: 18,
+    color: customColor ?? defaultColor,
+    ...(asLink
+      ? {
+          accessibilityRole,
+          textStyle: customTextStyle ?? { textDecorationLine: "underline" }
+        }
+      : {})
+  };
 
+  if (asLink) {
+    // TODO: If Pressable is replaced with `onPress` on IOText, ref would
+    // always point to a Text node and the Ref<View> override in the prop
+    // type can be removed entirely.
     return (
-      <IOText ref={ref} {...LabelMiniProps}>
-        {props.children}
-      </IOText>
+      <Pressable
+        onPress={onPress}
+        ref={ref}
+        accessibilityRole={accessibilityRole}
+      >
+        <IOText {...LabelMiniProps}>{props.children}</IOText>
+      </Pressable>
     );
   }
-);
+
+  return <IOText {...LabelMiniProps}>{props.children}</IOText>;
+};

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

@@ -1,27 +1,22 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH1` typographic style
  */
-export const MdH1 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const MdH1 = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const MdH1Props: IOTextProps = {
-      ...props,
-      weight: "Semibold",
-      size: 20,
-      lineHeight: 24,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const MdH1Props: IOTextProps = {
+    ...props,
+    weight: "Semibold",
+    size: 20,
+    lineHeight: 24,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...MdH1Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...MdH1Props}>{props.children}</IOText>;
+};

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

@@ -1,27 +1,22 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH2` typographic style
  */
-export const MdH2 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const MdH2 = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const MdH2Props: IOTextProps = {
-      ...props,
-      weight: "Semibold",
-      size: 18,
-      lineHeight: 24,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const MdH2Props: IOTextProps = {
+    ...props,
+    weight: "Semibold",
+    size: 18,
+    lineHeight: 24,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...MdH2Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...MdH2Props}>{props.children}</IOText>;
+};

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

@@ -1,27 +1,22 @@
-import { ForwardedRef, forwardRef } from "react";
-import { View } from "react-native";
 import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH3` typographic style
  */
-export const MdH3 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const theme = useIOTheme();
+export const MdH3 = ({
+  color: customColor,
+  ...props
+}: TypographicStyleProps) => {
+  const theme = useIOTheme();
 
-    const MdH3Props: IOTextProps = {
-      ...props,
-      weight: "Semibold",
-      size: 16,
-      lineHeight: 24,
-      color: customColor ?? theme["textHeading-default"]
-    };
+  const MdH3Props: IOTextProps = {
+    ...props,
+    weight: "Semibold",
+    size: 16,
+    lineHeight: 24,
+    color: customColor ?? theme["textHeading-default"]
+  };
 
-    return (
-      <IOText ref={ref} {...MdH3Props}>
-        {props.children}
-      </IOText>
-    );
-  }
-);
+  return <IOText {...MdH3Props}>{props.children}</IOText>;
+};

package/src/context/IOThemeContextProvider.tsx

@@ -9,10 +9,7 @@ import {
 import { Appearance, ColorSchemeName } from "react-native";
 import { IOTheme, IOThemeDark, IOThemeLight } from "../core/IOColors";
 
-export const IOThemes = {
-  light: IOThemeLight,
-  dark: IOThemeDark
-};
+export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };
 
 type IOThemeContextType = {
   themeType: ColorSchemeName;
@@ -22,7 +19,7 @@ type IOThemeContextType = {
 
 export const IOThemeContext: Context<IOThemeContextType> =
   createContext<IOThemeContextType>({
-    themeType: Appearance.getColorScheme() ?? "unspecified",
+    themeType: Appearance.getColorScheme(),
     theme:
       Appearance.getColorScheme() === "dark" ? IOThemes.dark : IOThemes.light,
     setTheme: () => void 0
@@ -41,14 +38,9 @@ export const IOThemeContextProvider = ({
   theme
 }: PropsWithChildren<IOThemeContextProviderProps>) => {
   const [currentTheme, setCurrentTheme] = useState<ColorSchemeName>(
-    theme ?? "unspecified"
+    theme ?? Appearance.getColorScheme()
   );
 
-  const resolvedTheme =
-    currentTheme === "unspecified"
-      ? Appearance.getColorScheme() ?? "light"
-      : currentTheme;
-
   const handleThemeChange = useCallback((newTheme: ColorSchemeName) => {
     setCurrentTheme(newTheme);
   }, []);
@@ -57,7 +49,7 @@ export const IOThemeContextProvider = ({
     <IOThemeContext.Provider
       value={{
         themeType: currentTheme,
-        theme: resolvedTheme === "dark" ? IOThemes.dark : IOThemes.light,
+        theme: IOThemes[currentTheme ?? "light"],
         setTheme: handleThemeChange
       }}
     >