@factorialco/f0-react-native 0.26.0 → 0.28.0

package/src/components/primitives/F0Text/F0Text/F0Text.styles.ts

@@ -0,0 +1,71 @@
+import { tv, type VariantProps } from "tailwind-variants"
+
+/**
+ * Text component variants using tailwind-variants
+ * Font weights (font-normal, font-medium, font-semibold) map to
+ * Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold)
+ */
+export const textVariants = tv({
+  base: "",
+  variants: {
+    variant: {
+      // Heading variants
+      "heading-xl":
+        "text-[36px] leading-[40px] tracking-[-0.2px] font-semibold",
+      "heading-lg":
+        "text-[24px] leading-[32px] tracking-[-0.2px] font-semibold",
+      "heading-md":
+        "text-[20px] leading-[28px] tracking-[-0.2px] font-semibold",
+      "heading-sm": "text-[16px] leading-[24px] font-semibold",
+
+      // Body variants with weight included in variant name
+      "body-md-default": "text-[16px] leading-[24px] font-normal",
+      "body-md-medium": "text-[16px] leading-[24px] font-medium",
+      "body-md-semibold": "text-[16px] leading-[24px] font-semibold",
+      "body-sm-default": "text-[14px] leading-[20px] font-normal",
+      "body-sm-medium": "text-[14px] leading-[20px] font-medium",
+      "body-sm-semibold": "text-[14px] leading-[20px] font-semibold",
+      "body-xs-medium": "text-[12px] leading-[16px] font-medium",
+    },
+    color: {
+      default: "text-f0-foreground",
+      secondary: "text-f0-foreground-secondary",
+      tertiary: "text-f0-foreground-tertiary",
+      inverse: "text-f0-foreground-inverse",
+      "inverse-secondary": "text-f0-foreground-inverse-secondary",
+      disabled: "text-f0-foreground-disabled",
+      accent: "text-f0-foreground-accent",
+      critical: "text-f0-foreground-critical",
+      info: "text-f0-foreground-info",
+      warning: "text-f0-foreground-warning",
+      positive: "text-f0-foreground-positive",
+      selected: "text-f0-foreground-selected",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify",
+    },
+    decoration: {
+      none: "",
+      underline: "underline",
+      "line-through": "line-through",
+    },
+    transform: {
+      none: "",
+      uppercase: "uppercase",
+      lowercase: "lowercase",
+      capitalize: "capitalize",
+    },
+  },
+  defaultVariants: {
+    variant: "body-sm-default",
+    color: "default",
+    align: "left",
+    decoration: "none",
+    transform: "none",
+  },
+})
+
+export type TextVariants = VariantProps<typeof textVariants>

package/src/components/primitives/F0Text/F0Text/F0Text.tsx

@@ -0,0 +1,76 @@
+import React from "react"
+import { Text as RNText } from "react-native"
+
+import { omitProps } from "../../../../lib/utils"
+
+import { textVariants } from "./F0Text.styles"
+import { F0_TEXT_BANNED_PROPS, type F0TextProps } from "./F0Text.types"
+
+/**
+ * F0Text - Primitive Text component with semantic typography variants
+ *
+ * @example
+ * <F0Text variant="heading-lg">Large Heading</F0Text>
+ * <F0Text variant="body-sm-default" color="secondary">Secondary text</F0Text>
+ * <F0Text variant="body-md-medium" numberOfLines={2}>Truncated text...</F0Text>
+ */
+const F0TextComponent = React.forwardRef<RNText, F0TextProps>(
+  (
+    {
+      variant = "body-sm-default",
+      color = "default",
+      align = "left",
+      decoration = "none",
+      transform = "none",
+      children,
+      numberOfLines,
+      ...rest
+    },
+    ref
+  ) => {
+    const textClassName = React.useMemo(
+      () =>
+        textVariants({
+          variant,
+          color,
+          align,
+          decoration,
+          transform,
+        }),
+      [variant, color, align, decoration, transform]
+    )
+
+    return (
+      <RNText
+        ref={ref}
+        {...omitProps(rest, F0_TEXT_BANNED_PROPS)}
+        className={textClassName}
+        numberOfLines={numberOfLines}
+        ellipsizeMode={numberOfLines ? "tail" : undefined}
+      >
+        {children}
+      </RNText>
+    )
+  }
+)
+
+F0TextComponent.displayName = "F0Text"
+
+export const F0Text = React.memo(F0TextComponent)
+
+// Export types
+export type { F0TextProps }
+export {
+  TYPOGRAPHY_VARIANTS,
+  TEXT_COLORS,
+  TEXT_ALIGN,
+  TEXT_DECORATIONS,
+  TEXT_TRANSFORMS,
+} from "./F0Text.types"
+export type {
+  TypographyVariant,
+  TextColor,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+} from "./F0Text.types"

package/src/components/primitives/F0Text/F0Text/F0Text.types.ts

@@ -0,0 +1,134 @@
+import type { TextProps as RNTextProps } from "react-native"
+
+/**
+ * Props that must not be passed through to the underlying RN Text
+ * (`style` and `className` are handled by F0 instead).
+ * Used with omitProps for runtime safety.
+ */
+export const F0_TEXT_BANNED_PROPS = ["style", "className"] as const
+
+/**
+ * Typography variant types based on semantic design tokens
+ */
+export const TYPOGRAPHY_VARIANTS = [
+  "heading-xl",
+  "heading-lg",
+  "heading-md",
+  "heading-sm",
+  "body-md-default",
+  "body-md-medium",
+  "body-md-semibold",
+  "body-sm-default",
+  "body-sm-medium",
+  "body-sm-semibold",
+  "body-xs-medium",
+] as const
+
+export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number]
+
+/**
+ * Text color variants aligned with F0 semantic color system
+ */
+export const TEXT_COLORS = [
+  "default",
+  "secondary",
+  "tertiary",
+  "inverse",
+  "inverse-secondary",
+  "disabled",
+  "accent",
+  "critical",
+  "info",
+  "warning",
+  "positive",
+  "selected",
+] as const
+
+export type TextColor = (typeof TEXT_COLORS)[number]
+
+/**
+ * Text alignment options
+ */
+export const TEXT_ALIGN = ["left", "center", "right", "justify"] as const
+
+export type TextAlign = (typeof TEXT_ALIGN)[number]
+
+/**
+ * Text decoration options
+ */
+export const TEXT_DECORATIONS = ["none", "underline", "line-through"] as const
+
+export type TextDecoration = (typeof TEXT_DECORATIONS)[number]
+
+/**
+ * Text transform options
+ */
+export const TEXT_TRANSFORMS = [
+  "none",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+] as const
+
+export type TextTransform = (typeof TEXT_TRANSFORMS)[number]
+
+/**
+ * Internal props for the F0Text component.
+ * @private
+ */
+interface F0TextPropsInternal extends Omit<RNTextProps, "style"> {
+  /**
+   * Semantic typography variant
+   * @default "body-sm-default"
+   */
+  variant?: TypographyVariant
+
+  /**
+   * Text color from F0 semantic color system
+   * @default "default"
+   */
+  color?: TextColor
+
+  /**
+   * Text alignment
+   * @default "left"
+   */
+  align?: TextAlign
+
+  /**
+   * Text decoration
+   * @default "none"
+   */
+  decoration?: TextDecoration
+
+  /**
+   * Text transform
+   * @default "none"
+   */
+  transform?: TextTransform
+
+  /**
+   * Maximum number of lines before truncating with ellipsis
+   */
+  numberOfLines?: number
+
+  /**
+   * Children content
+   */
+  children?: React.ReactNode
+
+  /**
+   * Excluded from public API via Omit<F0TextPropsInternal, "className">.
+   * @private
+   */
+  className?: string
+}
+
+/**
+ * Public props for the F0Text component
+ *
+ * Note: `className` and `style` props are NOT available.
+ * Use semantic props (variant, color, align, etc.) for typography.
+ * For spacing/layout, wrap F0Text in a View with className.
+ */
+export type F0TextProps = Omit<F0TextPropsInternal, "className">

package/src/components/primitives/F0Text/F0Text/__tests__/F0Text.spec.tsx

@@ -0,0 +1,228 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+import { Text as RNText } from "react-native"
+
+import { F0Text } from "../F0Text"
+
+describe("F0Text", () => {
+  describe("Snapshots", () => {
+    it("renders with default variant (body-sm-default)", () => {
+      const { toJSON } = render(<F0Text>Default text</F0Text>)
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    it("renders all typography variants", () => {
+      const variants = [
+        "heading-xl",
+        "heading-lg",
+        "heading-md",
+        "heading-sm",
+        "body-md-default",
+        "body-md-medium",
+        "body-md-semibold",
+        "body-sm-default",
+        "body-sm-medium",
+        "body-sm-semibold",
+        "body-xs-medium",
+      ] as const
+
+      variants.forEach((variant) => {
+        const { toJSON } = render(
+          <F0Text variant={variant}>{variant} text</F0Text>
+        )
+        expect(toJSON()).toMatchSnapshot(`variant-${variant}`)
+      })
+    })
+
+    it("renders all color variants", () => {
+      const colors = [
+        "default",
+        "secondary",
+        "tertiary",
+        "inverse",
+        "inverse-secondary",
+        "disabled",
+        "accent",
+        "critical",
+        "info",
+        "warning",
+        "positive",
+        "selected",
+      ] as const
+
+      colors.forEach((color) => {
+        const { toJSON } = render(<F0Text color={color}>{color} text</F0Text>)
+        expect(toJSON()).toMatchSnapshot(`color-${color}`)
+      })
+    })
+
+    it("renders with alignment options", () => {
+      const alignments = ["left", "center", "right", "justify"] as const
+
+      alignments.forEach((align) => {
+        const { toJSON } = render(<F0Text align={align}>{align} text</F0Text>)
+        expect(toJSON()).toMatchSnapshot(`align-${align}`)
+      })
+    })
+
+    it("renders with text decorations", () => {
+      const decorations = ["none", "underline", "line-through"] as const
+
+      decorations.forEach((decoration) => {
+        const { toJSON } = render(
+          <F0Text decoration={decoration}>{decoration} text</F0Text>
+        )
+        expect(toJSON()).toMatchSnapshot(`decoration-${decoration}`)
+      })
+    })
+
+    it("renders with text transforms", () => {
+      const transforms = [
+        "none",
+        "uppercase",
+        "lowercase",
+        "capitalize",
+      ] as const
+
+      transforms.forEach((transform) => {
+        const { toJSON } = render(
+          <F0Text transform={transform}>{transform} text</F0Text>
+        )
+        expect(toJSON()).toMatchSnapshot(`transform-${transform}`)
+      })
+    })
+
+    it("renders with numberOfLines truncation", () => {
+      const { toJSON } = render(
+        <F0Text numberOfLines={2}>
+          This is a very long text that should be truncated after two lines with
+          an ellipsis at the end
+        </F0Text>
+      )
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  describe("Behavior", () => {
+    it("renders children correctly", () => {
+      const { getByText } = render(<F0Text>Hello World</F0Text>)
+      expect(getByText("Hello World")).toBeTruthy()
+    })
+
+    it("applies correct variant classes", () => {
+      const { getByText } = render(
+        <F0Text variant="heading-lg">Large Heading</F0Text>
+      )
+      const element = getByText("Large Heading")
+      expect(element.props.className).toContain("text-[24px]")
+      expect(element.props.className).toContain("leading-[32px]")
+      expect(element.props.className).toContain("tracking-[-0.2px]")
+      expect(element.props.className).toContain("font-semibold")
+    })
+
+    it("applies correct color classes", () => {
+      const { getByText } = render(
+        <F0Text color="secondary">Secondary text</F0Text>
+      )
+      const element = getByText("Secondary text")
+      expect(element.props.className).toContain("text-f0-foreground-secondary")
+    })
+
+    it("applies correct alignment classes", () => {
+      const { getByText } = render(
+        <F0Text align="center">Centered text</F0Text>
+      )
+      const element = getByText("Centered text")
+      expect(element.props.className).toContain("text-center")
+    })
+
+    it("applies decoration classes", () => {
+      const { getByText } = render(
+        <F0Text decoration="underline">Underlined text</F0Text>
+      )
+      const element = getByText("Underlined text")
+      expect(element.props.className).toContain("underline")
+    })
+
+    it("applies transform classes", () => {
+      const { getByText } = render(
+        <F0Text transform="uppercase">uppercase text</F0Text>
+      )
+      const element = getByText("uppercase text")
+      expect(element.props.className).toContain("uppercase")
+    })
+
+    it("sets numberOfLines prop correctly", () => {
+      const { getByText } = render(
+        <F0Text numberOfLines={3}>Multiline text</F0Text>
+      )
+      const element = getByText("Multiline text")
+      expect(element.props.numberOfLines).toBe(3)
+      expect(element.props.ellipsizeMode).toBe("tail")
+    })
+
+    it("does not set ellipsizeMode when numberOfLines is not provided", () => {
+      const { getByText } = render(<F0Text>Normal text</F0Text>)
+      const element = getByText("Normal text")
+      expect(element.props.ellipsizeMode).toBeUndefined()
+    })
+
+    it("forwards additional props to React Native Text", () => {
+      const onPress = jest.fn()
+      const { getByText } = render(
+        <F0Text onPress={onPress} testID="test-text">
+          Pressable text
+        </F0Text>
+      )
+      const element = getByText("Pressable text")
+      expect(element.props.testID).toBe("test-text")
+      expect(element.props.onPress).toBe(onPress)
+    })
+
+    it("filters style prop at runtime (prevents override via spread)", () => {
+      const propsWithStyle = {
+        style: { color: "red" },
+        children: "Text with style attempt",
+      }
+      const { getByText } = render(
+        <F0Text {...(propsWithStyle as React.ComponentProps<typeof F0Text>)}>
+          Text with style attempt
+        </F0Text>
+      )
+      const element = getByText("Text with style attempt")
+      expect(element.props.style).toBeUndefined()
+    })
+
+    it("filters className prop at runtime (prevents override via spread)", () => {
+      const propsWithClassName = {
+        className: "font-bold text-red-500",
+        children: "Text with className attempt",
+      }
+      const { getByText } = render(
+        <F0Text
+          {...(propsWithClassName as React.ComponentProps<typeof F0Text>)}
+        >
+          Text with className attempt
+        </F0Text>
+      )
+      const element = getByText("Text with className attempt")
+      expect(element.props.className).not.toContain("font-bold")
+      expect(element.props.className).not.toContain("text-red-500")
+    })
+
+    it("handles ref forwarding", () => {
+      const ref = React.createRef<RNText>()
+      render(<F0Text ref={ref}>Ref text</F0Text>)
+      expect(ref.current).toBeTruthy()
+    })
+
+    it("renders nested children", () => {
+      const { getByText } = render(
+        <F0Text>
+          Parent <F0Text variant="body-xs-medium">nested</F0Text> text
+        </F0Text>
+      )
+      expect(getByText("nested")).toBeTruthy()
+    })
+  })
+})