@factorialco/f0-react-native 0.25.0 → 0.27.0

package/src/components/primitives/F0Text/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`F0Text Snapshots renders all color variants: color-accent 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-accent text-left"
+>
+  accent
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-critical 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-critical text-left"
+>
+  critical
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-default 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  default
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-disabled 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-disabled text-left"
+>
+  disabled
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-info 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-info text-left"
+>
+  info
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-inverse 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-inverse text-left"
+>
+  inverse
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-inverse-secondary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-inverse-secondary text-left"
+>
+  inverse-secondary
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-positive 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-positive text-left"
+>
+  positive
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-secondary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-secondary text-left"
+>
+  secondary
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-selected 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-selected text-left"
+>
+  selected
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-tertiary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-tertiary text-left"
+>
+  tertiary
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all color variants: color-warning 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-warning text-left"
+>
+  warning
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-md-default 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-normal text-f0-foreground text-left"
+>
+  body-md-default
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-md-medium 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-medium text-f0-foreground text-left"
+>
+  body-md-medium
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-md-semibold 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-semibold text-f0-foreground text-left"
+>
+  body-md-semibold
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-sm-default 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  body-sm-default
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-sm-medium 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-medium text-f0-foreground text-left"
+>
+  body-sm-medium
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-sm-semibold 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-semibold text-f0-foreground text-left"
+>
+  body-sm-semibold
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-body-xs-medium 1`] = `
+<Text
+  className="text-[12px] leading-[16px] font-medium text-f0-foreground text-left"
+>
+  body-xs-medium
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-lg 1`] = `
+<Text
+  className="text-[24px] leading-[32px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-lg
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-md 1`] = `
+<Text
+  className="text-[20px] leading-[28px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-md
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders all typography variants: variant-heading-sm 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-semibold text-f0-foreground text-left"
+>
+  heading-sm
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-center 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-center"
+>
+  center
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-justify 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-justify"
+>
+  justify
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-left 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  left
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with alignment options: align-right 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-right"
+>
+  right
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with default variant (body-sm-default) 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  Default text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with numberOfLines truncation 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+  ellipsizeMode="tail"
+  numberOfLines={2}
+>
+  This is a very long text that should be truncated after two lines with an ellipsis at the end
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text decorations: decoration-line-through 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left line-through"
+>
+  line-through
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text decorations: decoration-none 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  none
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text decorations: decoration-underline 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left underline"
+>
+  underline
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-capitalize 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left capitalize"
+>
+  capitalize
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-lowercase 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left lowercase"
+>
+  lowercase
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-none 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  none
+   text
+</Text>
+`;
+
+exports[`F0Text Snapshots renders with text transforms: transform-uppercase 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left uppercase"
+>
+  uppercase
+   text
+</Text>
+`;

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

@@ -0,0 +1,227 @@
+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-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()
+    })
+  })
+})

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

@@ -0,0 +1,22 @@
+/**
+ * F0Text - Text primitive component
+ *
+ * @see F0Text.md for documentation
+ */
+
+export { F0Text } from "./F0Text"
+export type {
+  F0TextProps,
+  TypographyVariant,
+  TextColor,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+} from "./F0Text"
+export {
+  TYPOGRAPHY_VARIANTS,
+  TEXT_COLORS,
+  TEXT_ALIGN,
+  TEXT_DECORATIONS,
+  TEXT_TRANSFORMS,
+} from "./F0Text"

package/src/icons/app/QuestionCircle.tsx

@@ -12,7 +12,7 @@ const SvgQuestionCircle = (props: SvgProps, ref: Ref<Svg>) => (
     <Path
       fill="currentColor"
       fillRule="evenodd"
-      d="M12 4.65C7.94071 4.65 4.65 7.94071 4.65 12C4.65 16.0593 7.94071 19.35 12 19.35C16.0593 19.35 19.35 16.0593 19.35 12C19.35 7.94071 16.0593 4.65 12 4.65ZM3.35 12C3.35 7.22274 7.22274 3.35 12 3.35C16.7773 3.35 20.65 7.22274 20.65 12C20.65 16.7773 16.7773 20.65 12 20.65C7.22274 20.65 3.35 16.7773 3.35 12ZM11.25 15.75C11.25 15.3358 11.5858 15 12 15C12.4142 15 12.75 15.3358 12.75 15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75ZM10.65 10.5C10.65 9.75442 11.2544 9.15 12 9.15C12.7456 9.15 13.35 9.75442 13.35 10.5V10.5645C13.35 11.2745 12.7745 11.85 12.0645 11.85C11.6699 11.85 11.35 12.1699 11.35 12.5645V13.5C11.35 13.859 11.641 14.15 12 14.15C12.359 14.15 12.65 13.859 12.65 13.5V13.0834C13.7959 12.8181 14.65 11.7911 14.65 10.5645V10.5C14.65 9.03645 13.4636 7.85 12 7.85C10.5364 7.85 9.35 9.03645 9.35 10.5C9.35 10.859 9.64102 11.15 10 11.15C10.359 11.15 10.65 10.859 10.65 10.5Z"
+      d="M12 4.65a7.35 7.35 0 1 0 0 14.7 7.35 7.35 0 0 0 0-14.7M3.35 12a8.65 8.65 0 1 1 17.3 0 8.65 8.65 0 0 1-17.3 0m7.9 3.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0m-.6-5.25a1.35 1.35 0 1 1 2.7 0v.065c0 .71-.575 1.285-1.285 1.285a.715.715 0 0 0-.715.715v.935a.65.65 0 1 0 1.3 0v-.417a2.586 2.586 0 0 0 2-2.518V10.5a2.65 2.65 0 1 0-5.3 0 .65.65 0 1 0 1.3 0"
       clipRule="evenodd"
     />
   </Svg>

package/src/icons/app/index.ts

@@ -34,6 +34,7 @@ export { default as PersonPlus } from "./PersonPlus"
 export { default as Pig } from "./Pig"
 export { default as PushPin } from "./PushPin"
 export { default as PushPinSolid } from "./PushPinSolid"
+export { default as QuestionCircle } from "./QuestionCircle"
 export { default as Record } from "./Record"
 export { default as Shield } from "./Shield"
 export { default as SignPost } from "./SignPost"
@@ -196,7 +197,6 @@ export { default as Present } from "./Present"
 export { default as Printer } from "./Printer"
 export { default as Proyector } from "./Proyector"
 export { default as Question } from "./Question"
-export { default as QuestionCircle } from "./QuestionCircle"
 export { default as Quote } from "./Quote"
 export { default as Reaction } from "./Reaction"
 export { default as Receipt } from "./Receipt"

package/src/index.ts

@@ -5,4 +5,4 @@ export * from "./components/exports"
 export * from "./icons"
 
 // Export utilities
-export { cn } from "./lib/utils"
+export { cn, omitProps } from "./lib/utils"

package/src/lib/__tests__/utils.spec.ts

@@ -0,0 +1,48 @@
+import { cn, omitProps } from "../utils"
+
+describe("utils", () => {
+  describe("omitProps", () => {
+    it("returns empty object when given empty object", () => {
+      expect(omitProps({}, ["style"])).toEqual({})
+    })
+
+    it("returns all props when no keys to omit", () => {
+      const props = { a: 1, b: 2, c: 3 }
+      expect(omitProps(props, [])).toEqual(props)
+    })
+
+    it("omits single key", () => {
+      const props = { a: 1, b: 2, style: { color: "red" } }
+      expect(omitProps(props, ["style"])).toEqual({ a: 1, b: 2 })
+    })
+
+    it("omits multiple keys", () => {
+      const props = { a: 1, style: { color: "red" }, className: "text-lg" }
+      expect(omitProps(props, ["style", "className"])).toEqual({ a: 1 })
+    })
+
+    it("does not mutate original object", () => {
+      const props = { a: 1, style: { color: "red" } }
+      omitProps(props, ["style"])
+      expect(props).toEqual({ a: 1, style: { color: "red" } })
+    })
+
+    it("works with readonly keys array (F0_TEXT_BANNED_PROPS pattern)", () => {
+      const BANNED = ["style"] as const
+      const props = { a: 1, style: { color: "red" } }
+      expect(omitProps(props, BANNED)).toEqual({ a: 1 })
+    })
+
+    it("ignores keys that do not exist", () => {
+      const props = { a: 1, b: 2 }
+      expect(omitProps(props, ["style", "className"])).toEqual({ a: 1, b: 2 })
+    })
+  })
+
+  describe("cn", () => {
+    it("merges class names", () => {
+      expect(cn("foo", "bar")).toContain("foo")
+      expect(cn("foo", "bar")).toContain("bar")
+    })
+  })
+})

package/src/lib/utils.ts

@@ -7,3 +7,22 @@ export function cn(...args: CnOptions): string {
     }) ?? ""
   )
 }
+
+/**
+ * Omits specified keys from an object at runtime.
+ * Used to filter blocked props (e.g. style, className) before spreading to primitives.
+ *
+ * @example
+ * omitProps(rest, ["style"])
+ * omitProps(rest, ["style", "className"])
+ */
+export function omitProps<T extends Record<string, unknown>, K extends string>(
+  obj: T,
+  keys: readonly K[]
+): Omit<T, K> {
+  const result = { ...obj }
+  for (const key of keys) {
+    delete result[key as keyof T]
+  }
+  return result as Omit<T, K>
+}