@pagopa/io-app-design-system 6.0.6 → 6.1.0

package/src/components/markdown/types.ts

@@ -0,0 +1,81 @@
+import type React from "react";
+import type { TextStyle } from "react-native";
+import type { IOColors } from "../../core";
+
+/**
+ * All supported markdown node types.
+ */
+export type MarkdownNodeType =
+  /* Headings */
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  /* Inline */
+  | "paragraph"
+  | "text"
+  | "strong"
+  | "em"
+  | "link"
+  | "softbreak"
+  | "hardbreak"
+  /* Lists */
+  | "bullet_list"
+  | "ordered_list"
+  | "list_item"
+  /* Block-level */
+  | "blockquote"
+  | "image"
+  | "code_inline"
+  | "fence"
+  | "hr"
+  | "html_block"
+  | "html_inline";
+
+/**
+ * A node in the markdown AST.
+ */
+export type MarkdownNode = {
+  type: MarkdownNodeType;
+  key: string;
+  content?: string;
+  attributes?: Record<string, string>;
+  children: ReadonlyArray<MarkdownNode>;
+  /** List metadata: whether the list is ordered */
+  ordered?: boolean;
+  /** Number of ancestor lists wrapping this node */
+  listDepth?: number;
+};
+
+export type RenderContext = {
+  onLinkPress?: (url: string) => void;
+  linkColor: IOColors;
+  /** Applied to paragraph */
+  textAlign: TextStyle["textAlign"];
+  /** Applied to paragraph segments */
+  fontSize: TextStyle["fontSize"];
+  lineHeight: TextStyle["lineHeight"];
+};
+
+export type RenderChildrenFn = (
+  nodes: ReadonlyArray<MarkdownNode>
+) => ReadonlyArray<React.ReactNode>;
+
+/**
+ * A render rule receives a node, a function to recursively render children,
+ * and the current render context.
+ */
+export type RenderRule = (
+  node: MarkdownNode,
+  renderChildren: RenderChildrenFn,
+  context: RenderContext
+) => React.ReactNode;
+
+/**
+ * Partial record of render rules. Only the provided keys override the defaults.
+ */
+export type IOMarkdownRenderRules = Partial<
+  Record<MarkdownNodeType, RenderRule>
+>;

package/src/components/markdown/utils.ts

@@ -0,0 +1,127 @@
+import { IOPictogramsBleed } from "../pictograms";
+import type { MarkdownNode } from "./types";
+
+const BULLET_FULL = "\u2022";
+const BULLET_HOLLOW = "\u25E6";
+const BULLET_SQUARE = "\u25B8";
+
+const PICTOGRAM_REGEXP = /^\s*\[!(.*?)\]/;
+
+const ROMAN_NUMERALS: ReadonlyArray<readonly [number, string]> = [
+  [1000, "m"],
+  [900, "cm"],
+  [500, "d"],
+  [400, "cd"],
+  [100, "c"],
+  [90, "xc"],
+  [50, "l"],
+  [40, "xl"],
+  [10, "x"],
+  [9, "ix"],
+  [5, "v"],
+  [4, "iv"],
+  [1, "i"]
+];
+
+/**
+ * Returns the bullet glyph used for unordered lists at a given nesting depth.
+ */
+export const getUnorderedListBullet = (listDepth: number): string => {
+  switch (listDepth % 3) {
+    case 0:
+      return BULLET_FULL;
+    case 1:
+      return BULLET_HOLLOW;
+    default:
+      return BULLET_SQUARE;
+  }
+};
+
+/**
+ * Converts a positive integer to its lowercase Roman numeral representation.
+ */
+const toRomanNumeral = (value: number, index = 0): string => {
+  const numeral = ROMAN_NUMERALS[index];
+
+  if (value <= 0 || numeral === undefined) {
+    return "";
+  }
+
+  const [arabic, roman] = numeral;
+
+  if (value >= arabic) {
+    // Consume the current numeral and keep using it until the remainder is smaller.
+    return `${roman}${toRomanNumeral(value - arabic, index)}`;
+  }
+
+  // Try the next Roman numeral when the current one no longer fits.
+  return toRomanNumeral(value, index + 1);
+};
+
+/**
+ * Converts a positive integer to a lowercase alphabetic sequence (`a`, `b`, `aa`).
+ */
+const toAlphabeticMarker = (value: number): string => {
+  if (value <= 0) {
+    return "";
+  }
+
+  // Convert to a zero-based base-26 index so 1 -> a, 26 -> z, 27 -> aa.
+  const normalizedValue = value - 1;
+  const prefix = toAlphabeticMarker(Math.floor(normalizedValue / 26));
+  const suffix = String.fromCodePoint(97 + (normalizedValue % 26));
+
+  return `${prefix}${suffix}`;
+};
+
+/**
+ * Returns the ordered-list marker for a given item index and nesting depth.
+ */
+export const getOrderedListMarker = (
+  value: number,
+  listDepth: number
+): string => {
+  switch (listDepth % 3) {
+    case 0:
+      return `${value}.`;
+    case 1:
+      return `${toRomanNumeral(value)}.`;
+    default:
+      return `${toAlphabeticMarker(value)}.`;
+  }
+};
+
+/**
+ * Extracts a banner pictogram name from a `[!pictogramName]` prefix.
+ */
+export const extractPictogramName = (text: string): IOPictogramsBleed => {
+  const match = PICTOGRAM_REGEXP.exec(text);
+  const value = match?.[1];
+  const isValid = value != null && value in IOPictogramsBleed;
+  return isValid ? (value as IOPictogramsBleed) : "notification";
+};
+
+/**
+ * Removes the leading pictogram directive from blockquote content.
+ */
+export const stripPictogramPrefix = (text: string): string =>
+  text.replace(PICTOGRAM_REGEXP, "");
+
+/**
+ * Recursively collects plain text content from a Markdown AST node.
+ */
+export const collectRawText = (node: MarkdownNode): string => {
+  if (node.content) {
+    return node.content;
+  }
+
+  return node.children.map(collectRawText).join("");
+};
+
+/**
+ * Returns true when a raw HTML fragment is a `<br>` tag.
+ */
+export const isBrTag = (content: string): boolean => {
+  const match = new RegExp(/<([^\s/>]+)\s*\/?>/).exec(content);
+  return match?.[1] === "br";
+};

package/src/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap

@@ -1095,6 +1095,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge
                   "borderCurve": "continuous",
                   "flexDirection": "row",
                   "justifyContent": "center",
+                  "overflow": "hidden",
                 },
                 {
                   "borderRadius": 24,
@@ -1125,7 +1126,6 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge
                   },
                   {
                     "alignSelf": "center",
-                    "flexShrink": 1,
                     "letterSpacing": 0.5,
                     "textTransform": "uppercase",
                   },
@@ -2571,6 +2571,7 @@ exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `
                   "borderCurve": "continuous",
                   "flexDirection": "row",
                   "justifyContent": "center",
+                  "overflow": "hidden",
                 },
                 {
                   "borderRadius": 24,
@@ -2601,7 +2602,6 @@ exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `
                   },
                   {
                     "alignSelf": "center",
-                    "flexShrink": 1,
                     "letterSpacing": 0.5,
                     "textTransform": "uppercase",
                   },

package/src/components/otpInput/OTPInput.tsx

@@ -8,10 +8,11 @@ import {
 } from "react";
 import {
   AccessibilityInfo,
-  NativeSyntheticEvent,
+  Platform,
   Pressable,
+  StyleSheet,
   TextInput,
-  TextInputKeyPressEventData,
+  TextInputKeyPressEvent,
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
@@ -35,6 +36,10 @@ type Props = {
   accessibilityLabel?: string;
   deleteButtonAccessibilityLabel?: string;
   accessibilityHint?: string;
+  accessibilityValueText?: (params: {
+    valueLength: number;
+    length: number;
+  }) => string;
   inputAccessoryViewID?: string;
   autoFocus?: boolean;
 };
@@ -60,6 +65,7 @@ export const OTPInput = forwardRef<View, Props>(
       length,
       accessibilityLabel,
       accessibilityHint,
+      accessibilityValueText,
       onValidate,
       errorMessage = "",
       secret = false,
@@ -120,10 +126,8 @@ export const OTPInput = forwardRef<View, Props>(
       handleValidate(value);
     };
 
-    const handleKeyPress = ({
-      nativeEvent
-    }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      switch (nativeEvent.key) {
+    const handleKeyPress = (e: TextInputKeyPressEvent) => {
+      switch (e.nativeEvent.key) {
         case "Backspace":
           if (deleteButtonAccessibilityLabel && value.length > 0) {
             AccessibilityInfo.announceForAccessibility(
@@ -132,7 +136,7 @@ export const OTPInput = forwardRef<View, Props>(
           }
           break;
         default:
-          AccessibilityInfo.announceForAccessibility(nativeEvent.key);
+          AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
           break;
       }
     };
@@ -147,21 +151,20 @@ export const OTPInput = forwardRef<View, Props>(
             setHasFocus(true);
           }}
           ref={ref}
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            columnGap: OTP_ITEMS_GAP
-          }}
-          accessible={true}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          accessibilityValue={{ text: value }}
+          accessible={false}
         >
           <TextInput
             value={value}
             onChangeText={handleChange}
             onKeyPress={handleKeyPress}
-            style={{ position: "absolute", opacity: 0 }}
+            caretHidden={Platform.OS === "ios"}
+            style={[
+              StyleSheet.absoluteFillObject,
+              Platform.select({
+                ios: { opacity: 0.01 },
+                android: { opacity: 0 }
+              })
+            ]}
             maxLength={length}
             ref={inputRef}
             onBlur={() => setHasFocus(false)}
@@ -172,23 +175,45 @@ export const OTPInput = forwardRef<View, Props>(
             autoComplete={autocomplete ? "sms-otp" : undefined}
             inputAccessoryViewID={inputAccessoryViewID}
             accessible={true}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            // Ensure the screen reader pronounces the code digit by digit
+            accessibilityValue={{
+              text:
+                accessibilityValueText?.({
+                  valueLength: value.length,
+                  length
+                }) ?? value.split("").join(" ")
+            }}
             autoFocus={autoFocus}
-            secureTextEntry={true}
+            secureTextEntry={secret}
           />
-          {cells.map((_, i) => (
-            <BoxedInput
-              key={i}
-              status={
-                hasError
-                  ? "error"
-                  : hasFocus && value.length === i
-                  ? "focus"
-                  : "default"
-              }
-              secret={secret}
-              value={value[i]}
-            />
-          ))}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              columnGap: OTP_ITEMS_GAP,
+              flexGrow: 1,
+              zIndex: 10
+            }}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+          >
+            {cells.map((_, i) => (
+              <BoxedInput
+                key={i}
+                status={
+                  hasError
+                    ? "error"
+                    : hasFocus && value.length === i
+                    ? "focus"
+                    : "default"
+                }
+                secret={secret}
+                value={value[i]}
+              />
+            ))}
+          </View>
         </Pressable>
         <VSpacer size={4} />
         {hasError && errorMessage && (

package/src/components/tag/Tag.tsx

@@ -77,6 +77,7 @@ const styles = StyleSheet.create({
         textAlignVertical: "center"
       }
     }),
+    overflow: "hidden",
     borderWidth: 1,
     borderCurve: "continuous"
   },
@@ -88,7 +89,7 @@ const styles = StyleSheet.create({
     columnGap: IOTagIconMargin
   },
   iconWrapper: {
-    flexShrink: 1
+    flexShrink: 0
   }
 });
 

package/src/components/toast/ToastProvider.tsx

@@ -1,4 +1,3 @@
-import { throttle } from "lodash";
 import { ReactNode, useCallback, useMemo, useRef, useState } from "react";
 import { AccessibilityInfo, StyleSheet, View } from "react-native";
 import Animated, {
@@ -10,6 +9,7 @@ import Animated, {
 import { SafeAreaView } from "react-native-safe-area-context";
 import { IOVisualCostants } from "../../core";
 import { triggerHaptic } from "../../functions";
+import { throttle } from "../../utils/throttle";
 import { Dismissable } from "../templates";
 import { ToastNotification } from "./ToastNotification";
 import { ToastContext } from "./context";

package/src/components/tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-import { every, some } from "lodash";
 import {
   JSXElementConstructor,
   PropsWithChildren,
@@ -194,8 +193,10 @@ export const Tooltip = ({
     () => ARROWS_BY_PLACEMENT[currentPlacement],
     [currentPlacement]
   );
+  const childrenCoordsValues = Object.values(childrenCoords);
   const isChildrenMeasurementFinished =
-    every(childrenCoords, isDefined) && some(childrenCoords, isNotZero);
+    childrenCoordsValues.every(isDefined) &&
+    childrenCoordsValues.some(isNotZero);
   const isTooltipMeasurementCompleted = isDefined(tooltipLayout);
   const tooltipVisibility = { opacity: isTooltipMeasurementCompleted ? 1 : 0 };
 
@@ -211,7 +212,7 @@ export const Tooltip = ({
           width,
           height
         };
-        if (every(coords, isDefined)) {
+        if (Object.values(coords).every(isDefined)) {
           setChildrenCoords(coords);
         }
       });

package/src/components/typography/BodySmall.tsx

@@ -13,6 +13,9 @@ type BodySmallProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
+export const bodySmallFontSize = 14;
+export const bodySmallLineHeight = 21;
+
 /**
  * `BodySmall` typographic style
  */
@@ -40,8 +43,8 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
       weight: customWeight ?? "Regular",
-      size: 14,
-      lineHeight: 21,
+      size: bodySmallFontSize,
+      lineHeight: bodySmallLineHeight,
       color: customColor ?? defaultColor,
       ...(asLink
         ? {

package/src/components/typography/IOText.tsx

@@ -8,7 +8,7 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIONewTypeface } from "../../context";
 import { IOColors } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
@@ -74,11 +74,11 @@ export type TypographicStyleAsLinkProps =
  * @param args the args of the function {@link makeFontStyleObject}
  */
 const calculateTextStyle = (
-  color: IOColors,
+  color?: IOColors,
   ...args: Parameters<typeof makeFontStyleObject>
 ) => ({
   ...makeFontStyleObject(...args),
-  color: IOColors[color]
+  color: color ? IOColors[color] : undefined
 });
 
 /**
@@ -106,7 +106,6 @@ export const IOText = forwardRef<View, IOTextProps>(
     },
     ref
   ) => {
-    const theme = useIOTheme();
     const boldEnabled = useBoldTextEnabled();
     const { newTypefaceEnabled } = useIONewTypeface();
 
@@ -116,7 +115,7 @@ export const IOText = forwardRef<View, IOTextProps>(
     const computedStyleObj = useMemo(
       () =>
         calculateTextStyle(
-          color ?? theme["textBody-default"],
+          color,
           size,
           computedFont,
           lineHeight,
@@ -124,16 +123,7 @@ export const IOText = forwardRef<View, IOTextProps>(
           fontStyle,
           boldEnabled
         ),
-      [
-        color,
-        theme,
-        size,
-        computedFont,
-        lineHeight,
-        weight,
-        fontStyle,
-        boldEnabled
-      ]
+      [color, size, computedFont, lineHeight, weight, fontStyle, boldEnabled]
     );
 
     /* In some cases, for example when we use color transitions with

package/src/utils/pipe.ts

@@ -0,0 +1,55 @@
+/**
+ * Chains functions together, passing the result of each function as input to the next.
+ * The first argument is the initial value, followed by any number of transformation functions.
+ *
+ * @example
+ * ```typescript
+ * const addOne = (x: number) => x + 1;
+ * const double = (x: number) => x * 2;
+ * const stringify = (x: number) => `Result: ${x}`;
+ *
+ * const result = pipe(
+ *   10,
+ *   addOne,    // 11
+ *   double,    // 22
+ *   stringify  // "Result: 22"
+ * );
+ * ```
+ */
+export function pipe<T>(value: T): T;
+export function pipe<T, R1>(value: T, fn1: (arg: T) => R1): R1;
+export function pipe<T, R1, R2>(
+  value: T,
+  fn1: (arg: T) => R1,
+  fn2: (arg: R1) => R2
+): R2;
+export function pipe<T, R1, R2, R3>(
+  value: T,
+  fn1: (arg: T) => R1,
+  fn2: (arg: R1) => R2,
+  fn3: (arg: R2) => R3
+): R3;
+export function pipe<T, R1, R2, R3, R4>(
+  value: T,
+  fn1: (arg: T) => R1,
+  fn2: (arg: R1) => R2,
+  fn3: (arg: R2) => R3,
+  fn4: (arg: R3) => R4
+): R4;
+export function pipe<T, R1, R2, R3, R4, R5>(
+  value: T,
+  fn1: (arg: T) => R1,
+  fn2: (arg: R1) => R2,
+  fn3: (arg: R2) => R3,
+  fn4: (arg: R3) => R4,
+  fn5: (arg: R4) => R5
+): R5;
+export function pipe(
+  initialValue: any,
+  ...transformers: Array<(arg: any) => any>
+): any {
+  return transformers.reduce(
+    (currentValue, transformer) => transformer(currentValue),
+    initialValue
+  );
+}

package/src/utils/throttle.ts

@@ -0,0 +1,15 @@
+export const throttle = <T extends Array<unknown>>(
+  fn: (...args: T) => void,
+  ms: number
+) => {
+  // eslint-disable-next-line functional/no-let
+  let lastCall = 0;
+  return (...args: T) => {
+    const now = Date.now();
+
+    if (now - lastCall >= ms) {
+      lastCall = now;
+      fn(...args);
+    }
+  };
+};