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

package/src/components/markdown/rules.tsx

@@ -0,0 +1,366 @@
+import React, { Fragment } from "react";
+import { View } from "react-native";
+import { Banner } from "../banner";
+import { Divider, HSpacer, VSpacer } from "../layout";
+import { Body } from "../typography/Body";
+import { BodyMonospace } from "../typography/BodyMonospace";
+import { H1 } from "../typography/H1";
+import { H2 } from "../typography/H2";
+import { H3 } from "../typography/H3";
+import { H4 } from "../typography/H4";
+import { H5 } from "../typography/H5";
+import { H6 } from "../typography/H6";
+import { IOText } from "../typography/IOText";
+import { CodeBlock } from "./CodeBlock";
+import { ImageRenderer } from "./ImageRenderer";
+import type {
+  MarkdownNode,
+  MarkdownNodeType,
+  RenderContext,
+  RenderRule
+} from "./types";
+import {
+  collectRawText,
+  extractPictogramName,
+  getOrderedListMarker,
+  getUnorderedListBullet,
+  isBrTag,
+  stripPictogramPrefix
+} from "./utils";
+
+/* ─── Inline flattening (shared between heading and paragraph rendering) ─── */
+
+type InlineStyle = {
+  bold: boolean;
+  italic: boolean;
+  link?: string;
+};
+
+type StyledSegment = {
+  key: string;
+  text: string;
+  style: InlineStyle;
+};
+
+/**
+ * Recursively walks inline AST nodes and produces flat styled segments
+ * with accumulated bold/italic/link state.
+ */
+const flattenInlineNodes = (
+  nodes: ReadonlyArray<MarkdownNode>,
+  inherited: InlineStyle
+): Array<StyledSegment> =>
+  nodes.reduce<Array<StyledSegment>>((acc, node) => {
+    switch (node.type) {
+      case "text":
+      case "code_inline":
+        return [
+          ...acc,
+          { key: node.key, text: node.content ?? "", style: inherited }
+        ];
+
+      case "softbreak":
+      case "hardbreak":
+        return [...acc, { key: node.key, text: "\n", style: inherited }];
+
+      case "strong":
+        return [
+          ...acc,
+          ...flattenInlineNodes(node.children, {
+            ...inherited,
+            bold: true
+          })
+        ];
+
+      case "em":
+        return [
+          ...acc,
+          ...flattenInlineNodes(node.children, {
+            ...inherited,
+            italic: true
+          })
+        ];
+
+      case "link": {
+        const href = node.attributes?.href;
+        return [
+          ...acc,
+          ...flattenInlineNodes(node.children, {
+            ...inherited,
+            link: href
+          })
+        ];
+      }
+
+      default:
+        return acc;
+    }
+  }, []);
+
+/**
+ * Renders a single styled segment as either a raw string
+ * or an IOText element with the appropriate props.
+ */
+const renderSegment = (
+  segment: StyledSegment,
+  context: RenderContext,
+  isCode?: boolean
+): React.ReactNode => {
+  if (isCode) {
+    return <BodyMonospace key={segment.key}>{segment.text}</BodyMonospace>;
+  }
+
+  const { bold, italic, link } = segment.style;
+
+  return (
+    <IOText
+      key={segment.key}
+      {...(bold ? { weight: "Semibold" } : {})}
+      {...(italic ? { fontStyle: "italic" } : {})}
+      {...(link
+        ? {
+            color: context.linkColor,
+            onPress: () => context.onLinkPress?.(link),
+            accessibilityRole: "link" as const,
+            textStyle: { textDecorationLine: "underline" as const }
+          }
+        : {})}
+      size={context.fontSize}
+      lineHeight={context.lineHeight}
+    >
+      {segment.text}
+    </IOText>
+  );
+};
+
+/* ─── Heading component map ─── */
+
+type HeadingComponent = typeof H1;
+
+const headingComponentMap: Record<string, HeadingComponent> = {
+  heading1: H1,
+  heading2: H2,
+  heading3: H3,
+  heading4: H4,
+  heading5: H5,
+  heading6: H6
+};
+
+/* ─── Block rendering helpers ─── */
+
+/**
+ * Renders a paragraph block by flattening inline children
+ * into styled segments.
+ */
+const renderParagraph = (
+  node: MarkdownNode,
+  context: RenderContext
+): React.ReactNode => {
+  const segments = flattenInlineNodes(node.children, {
+    bold: false,
+    italic: false
+  });
+
+  return (
+    <Body key={node.key} style={{ textAlign: context.textAlign }}>
+      {segments.map(seg => {
+        const matchingNode = node.children.find(c => c.key === seg.key);
+        const isCode = matchingNode?.type === "code_inline";
+        return renderSegment(seg, context, isCode);
+      })}
+    </Body>
+  );
+};
+
+/**
+ * Creates a render rule for a heading level using the corresponding
+ * DS heading component (H1-H6). This ensures headings inherit
+ * dynamicTypeRamp, uppercase/letterSpacing (H5), legacy typeface (H6),
+ * and theme colors automatically.
+ */
+const makeHeadingRule =
+  (Heading: HeadingComponent): RenderRule =>
+  (node, _renderChildren, context) => {
+    const segments = flattenInlineNodes(node.children, {
+      bold: false,
+      italic: false
+    });
+
+    return (
+      <View key={node.key} accessibilityRole="header">
+        <Heading style={{ textAlign: context.textAlign }}>
+          {segments.map(seg => seg.text)}
+        </Heading>
+      </View>
+    );
+  };
+
+/* ─── Default render rules ─── */
+
+const paragraphRule: RenderRule = (node, _renderChildren, context) =>
+  renderParagraph(node, context);
+
+const textRule: RenderRule = node => (
+  <Fragment key={node.key}>{node.content ?? ""}</Fragment>
+);
+
+const strongRule: RenderRule = (node, renderChildren) => (
+  <IOText key={node.key} weight="Semibold">
+    {renderChildren(node.children)}
+  </IOText>
+);
+
+const emRule: RenderRule = (node, renderChildren) => (
+  <IOText key={node.key} fontStyle="italic">
+    {renderChildren(node.children)}
+  </IOText>
+);
+
+const linkRule: RenderRule = (node, renderChildren, context) => {
+  const href = node.attributes?.href;
+  return (
+    <IOText
+      key={node.key}
+      color={context.linkColor}
+      onPress={href ? () => context.onLinkPress?.(href) : undefined}
+      accessibilityRole="link"
+      textStyle={{ textDecorationLine: "underline" }}
+    >
+      {renderChildren(node.children)}
+    </IOText>
+  );
+};
+
+const softbreakRule: RenderRule = node => (
+  <Fragment key={node.key}>{"\n"}</Fragment>
+);
+
+const hardbreakRule: RenderRule = node => (
+  <Fragment key={node.key}>{"\n"}</Fragment>
+);
+
+const bulletListRule: RenderRule = (node, renderChildren) => (
+  <View
+    key={node.key}
+    accessible={true}
+    accessibilityRole="list"
+    style={{ paddingLeft: 12 }}
+  >
+    <VSpacer size={8} />
+    {node.children.map(child => (
+      <View key={child.key} style={{ flexDirection: "row" }}>
+        <Body>{getUnorderedListBullet(node.listDepth ?? 0)}</Body>
+        <HSpacer size={8} />
+        <View style={{ flex: 1, flexShrink: 1 }}>
+          {renderChildren(child.children)}
+        </View>
+      </View>
+    ))}
+    <VSpacer size={8} />
+  </View>
+);
+
+const orderedListRule: RenderRule = (node, renderChildren) => (
+  <View
+    key={node.key}
+    accessible={true}
+    accessibilityRole="list"
+    style={{ paddingLeft: 12 }}
+  >
+    <VSpacer size={8} />
+    {node.children.map((child, i) => (
+      <View key={child.key} style={{ flexDirection: "row" }}>
+        <Body>{getOrderedListMarker(i + 1, node.listDepth ?? 0)}</Body>
+        <HSpacer size={8} />
+        <View style={{ flex: 1, flexShrink: 1 }}>
+          {renderChildren(child.children)}
+        </View>
+      </View>
+    ))}
+    <VSpacer size={8} />
+  </View>
+);
+
+const listItemRule: RenderRule = (node, renderChildren) => (
+  <View key={node.key} style={{ flex: 1, flexShrink: 1 }}>
+    {renderChildren(node.children)}
+  </View>
+);
+
+const blockquoteRule: RenderRule = node => {
+  const allText = collectRawText(node);
+  const pictogramName = extractPictogramName(allText);
+
+  // Find the first heading child for the banner title
+  const headingNode = node.children.find(c => c.type.startsWith("heading"));
+  const title = headingNode ? collectRawText(headingNode).trim() : undefined;
+
+  // Collect content from paragraph children, stripping the pictogram pattern
+  const content = node.children
+    .filter(c => c.type === "paragraph")
+    .map(c => stripPictogramPrefix(collectRawText(c)).trim())
+    .filter(Boolean)
+    .join("\n");
+
+  return (
+    <Banner
+      key={node.key}
+      pictogramName={pictogramName}
+      color="neutral"
+      title={title}
+      content={content || undefined}
+    />
+  );
+};
+
+const imageRule: RenderRule = node => (
+  <View key={node.key} style={{ marginVertical: 16 }}>
+    <ImageRenderer node={node} />
+  </View>
+);
+
+const codeInlineRule: RenderRule = node => (
+  <BodyMonospace key={node.key}>{node.content ?? ""}</BodyMonospace>
+);
+
+const fenceRule: RenderRule = node => (
+  <CodeBlock key={node.key} content={(node.content ?? "").trimEnd()} />
+);
+
+const hrRule: RenderRule = node => <Divider key={node.key} />;
+
+const htmlRule: RenderRule = node => {
+  if (node.content && isBrTag(node.content)) {
+    return <Fragment key={node.key}>{"\n"}</Fragment>;
+  }
+  return null;
+};
+
+/**
+ * The complete set of default render rules for all supported node types.
+ */
+export const DEFAULT_RULES: Record<MarkdownNodeType, RenderRule> = {
+  heading1: makeHeadingRule(headingComponentMap.heading1),
+  heading2: makeHeadingRule(headingComponentMap.heading2),
+  heading3: makeHeadingRule(headingComponentMap.heading3),
+  heading4: makeHeadingRule(headingComponentMap.heading4),
+  heading5: makeHeadingRule(headingComponentMap.heading5),
+  heading6: makeHeadingRule(headingComponentMap.heading6),
+  paragraph: paragraphRule,
+  text: textRule,
+  strong: strongRule,
+  em: emRule,
+  link: linkRule,
+  softbreak: softbreakRule,
+  hardbreak: hardbreakRule,
+  bullet_list: bulletListRule,
+  ordered_list: orderedListRule,
+  list_item: listItemRule,
+  blockquote: blockquoteRule,
+  image: imageRule,
+  code_inline: codeInlineRule,
+  fence: fenceRule,
+  hr: hrRule,
+  html_block: htmlRule,
+  html_inline: htmlRule
+};

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/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/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/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
+  );
+}