@factorialco/f0-react-native 0.19.1

package/src/components/Icon/index.tsx

@@ -0,0 +1,85 @@
+import { cva, type VariantProps } from "cva";
+import React, {
+  forwardRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from "react";
+import { SvgProps, Svg } from "react-native-svg";
+import { cn } from "../../lib/utils";
+import { cssInterop } from "nativewind";
+
+const iconVariants = cva({
+  base: "shrink-0",
+  variants: {
+    size: {
+      xl: "w-8 h-8 stroke-xl",
+      lg: "w-6 h-6 stroke-lg",
+      md: "w-5 h-5 stroke-md",
+      sm: "w-4 h-4 stroke-sm",
+      xs: "w-3 h-3 stroke-xs",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export interface IconProps extends SvgProps, VariantProps<typeof iconVariants> {
+  icon: IconType;
+  testID?: string;
+  className?: string;
+  variant?:
+    | "default"
+    | "critical"
+    | "neutral"
+    | "ghost"
+    | "outline"
+    | "promote";
+  isPressed?: boolean;
+}
+
+export type IconType = ForwardRefExoticComponent<
+  SvgProps &
+    RefAttributes<Svg> & {
+      className?: string;
+    }
+>;
+
+// Keep track of icons that have already had cssInterop applied
+const interopAppliedIcons = new WeakSet();
+
+// Function to apply NativeWind interop to an icon component
+export function applyIconInterop(icon: IconType) {
+  if (!interopAppliedIcons.has(icon)) {
+    cssInterop(icon, {
+      className: {
+        target: "style",
+        nativeStyleToProp: {
+          color: true,
+          opacity: true,
+        },
+      },
+    });
+    interopAppliedIcons.add(icon);
+  }
+  return icon;
+}
+
+export const Icon = forwardRef<Svg, IconProps>(function Icon(
+  { size, icon, className, testID, ...props },
+  ref,
+) {
+  if (!icon) return null;
+
+  // Apply NativeWind interop to the icon if not already applied
+  const Component = applyIconInterop(icon);
+
+  return (
+    <Component
+      ref={ref}
+      {...props}
+      className={cn(iconVariants({ size }), className)}
+      testID={testID}
+    />
+  );
+});

package/src/components/Navigation/PageHeader/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageHeader Snapshot - renders correctly with multiple actions 1`] = `
+<View
+  className="flex-row items-center justify-between px-5 py-3"
+>
+  <Text
+    className="text-3xl font-semibold text-f1-foreground"
+  >
+    Test Page Title
+  </Text>
+  <View
+    className="flex-row gap-2"
+  >
+    <View
+      accessibilityLabel="Notifications"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text>
+        Notifications
+      </Text>
+      <Text>
+        Icon:
+        Bell
+      </Text>
+      <Text>
+        Badge
+      </Text>
+    </View>
+    <View
+      accessibilityLabel="Alerts"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text>
+        Alerts
+      </Text>
+      <Text>
+        Icon:
+        Bell
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`PageHeader Snapshot - renders correctly with one action 1`] = `
+<View
+  className="flex-row items-center justify-between px-5 py-3"
+>
+  <Text
+    className="text-3xl font-semibold text-f1-foreground"
+  >
+    Test Page Title
+  </Text>
+  <View
+    className="flex-row gap-2"
+  >
+    <View
+      accessibilityLabel="Notifications"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text>
+        Notifications
+      </Text>
+      <Text>
+        Icon:
+        Bell
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`PageHeader Snapshot - renders correctly with one action with a badge 1`] = `
+<View
+  className="flex-row items-center justify-between px-5 py-3"
+>
+  <Text
+    className="text-3xl font-semibold text-f1-foreground"
+  >
+    Test Page Title
+  </Text>
+  <View
+    className="flex-row gap-2"
+  >
+    <View
+      accessibilityLabel="Notifications"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text>
+        Notifications
+      </Text>
+      <Text>
+        Icon:
+        Bell
+      </Text>
+      <Text>
+        Badge
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`PageHeader Snapshot - renders correctly with only a title 1`] = `
+<View
+  className="flex-row items-center justify-between px-5 py-3"
+>
+  <Text
+    className="text-3xl font-semibold text-f1-foreground"
+  >
+    Test Page Title
+  </Text>
+  <View
+    className="flex-row gap-2"
+  />
+</View>
+`;

package/src/components/Navigation/PageHeader/index.spec.tsx

@@ -0,0 +1,198 @@
+import {
+  render,
+  fireEvent,
+  screen,
+  within,
+} from "@testing-library/react-native";
+import React from "react";
+import { PageHeader } from "./"; // Assuming index.tsx is in the same folder
+import { ButtonProps } from "../../Button"; // Adjust path as necessary
+// import { AppIcons } from "../../../index"; // Adjust path as necessary - Not directly used in mock after change
+
+// Define a simple type for the mocked icon
+type MockIconType = { name: string };
+
+// Mock the Button component
+jest.mock("../../Button", () => ({
+  Button: jest.fn(
+    ({
+      label,
+      onPress,
+      icon,
+      showBadge,
+      ...rest
+    }: ButtonProps & { icon?: MockIconType }) => {
+      const MockButton = require("react-native").TouchableOpacity;
+      const MockText = require("react-native").Text;
+      return (
+        <MockButton onPress={onPress} accessibilityLabel={label} {...rest}>
+          <MockText>{label}</MockText>
+          {icon && <MockText>Icon:{icon.name}</MockText>}
+          {showBadge && <MockText>Badge</MockText>}
+        </MockButton>
+      );
+    },
+  ),
+}));
+
+// Mock AppIcons - specifically the Bell icon used by PageHeader's NotificationAction
+jest.mock("../../../index", () => ({
+  AppIcons: {
+    Bell: { name: "Bell" } as MockIconType, // Ensure the mock matches MockIconType
+  },
+}));
+
+describe("PageHeader", () => {
+  const mockOnPressNotification = jest.fn();
+
+  const defaultProps = {
+    title: "Test Page Title",
+  };
+
+  const propsWithActions = {
+    ...defaultProps,
+    actions: [
+      {
+        type: "notifications" as const,
+        label: "Notifications",
+        onPress: mockOnPressNotification,
+        showBadge: false,
+      },
+    ],
+  };
+
+  const propsWithMultipleActions = {
+    ...defaultProps,
+    actions: [
+      {
+        type: "notifications" as const,
+        label: "Notifications",
+        onPress: mockOnPressNotification,
+        showBadge: true,
+      },
+      {
+        type: "notifications" as const, // Assuming another action of the same type for simplicity
+        label: "Alerts",
+        onPress: jest.fn(),
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  // Snapshot tests
+  it("Snapshot - renders correctly with only a title", () => {
+    const { toJSON } = render(<PageHeader {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - renders correctly with one action", () => {
+    const { toJSON } = render(<PageHeader {...propsWithActions} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - renders correctly with multiple actions", () => {
+    const { toJSON } = render(<PageHeader {...propsWithMultipleActions} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - renders correctly with one action with a badge", () => {
+    const propsWithBadge = {
+      ...defaultProps,
+      actions: [
+        {
+          type: "notifications" as const,
+          label: "Notifications",
+          onPress: mockOnPressNotification,
+          showBadge: true,
+        },
+      ],
+    };
+    const { toJSON } = render(<PageHeader {...propsWithBadge} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Functional tests
+  it("renders the title correctly", () => {
+    render(<PageHeader {...defaultProps} />);
+    const title = screen.getByText("Test Page Title");
+    expect(title).toBeDefined();
+  });
+
+  it("does not render actions if actions prop is not provided", () => {
+    render(<PageHeader {...defaultProps} />);
+    const notificationButton = screen.queryByText("Notifications");
+    expect(notificationButton).toBeNull();
+  });
+
+  it("renders action buttons when actions prop is provided", () => {
+    render(<PageHeader {...propsWithActions} />);
+    const notificationButton = screen.getByText("Notifications");
+    expect(notificationButton).toBeDefined();
+  });
+
+  it("calls the onPress handler of an action button when pressed", () => {
+    render(<PageHeader {...propsWithActions} />);
+    const notificationButton = screen.getByText("Notifications");
+    fireEvent.press(notificationButton);
+    expect(mockOnPressNotification).toHaveBeenCalledTimes(1);
+  });
+
+  it("displays a badge on an action button if showBadge is true", () => {
+    render(
+      <PageHeader
+        title="Test Title"
+        actions={[
+          {
+            type: "notifications",
+            label: "Notifications",
+            onPress: jest.fn(),
+            showBadge: true,
+          },
+        ]}
+      />,
+    );
+    const badge = screen.getByText("Badge");
+    expect(badge).toBeDefined();
+  });
+
+  it("does not display a badge if showBadge is false or undefined", () => {
+    render(
+      <PageHeader
+        title="Test Title"
+        actions={[
+          {
+            type: "notifications",
+            label: "Notifications",
+            onPress: jest.fn(),
+            // showBadge is undefined here
+          },
+          {
+            type: "notifications",
+            label: "Alerts",
+            onPress: jest.fn(),
+            showBadge: false,
+          },
+        ]}
+      />,
+    );
+    const badge = screen.queryByText("Badge");
+    expect(badge).toBeNull();
+  });
+
+  it("renders multiple action buttons correctly", () => {
+    render(<PageHeader {...propsWithMultipleActions} />);
+    const notificationsButton = screen.getByText("Notifications");
+    const alertsButton = screen.getByText("Alerts");
+
+    expect(notificationsButton).toBeDefined();
+    expect(alertsButton).toBeDefined();
+
+    const notificationButtonContainer = screen.getByLabelText("Notifications");
+
+    const badge = within(notificationButtonContainer).getByText("Badge");
+    expect(badge).toBeDefined();
+  });
+});

package/src/components/Navigation/PageHeader/index.tsx

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import { Text, View } from "react-native";
+import { Button } from "../../Button";
+import { AppIcons } from "../../..";
+
+type ActionType = "notifications";
+
+export type ActionT = {
+  type: ActionType;
+  label: string;
+  onPress: () => void;
+  showBadge?: boolean;
+};
+
+type Props = {
+  title: string;
+  actions?: ActionT[];
+};
+
+const NotificationsAction = ({ label, onPress, showBadge }: ActionT) => {
+  return (
+    <Button
+      variant="outline"
+      icon={AppIcons.Bell}
+      label={label}
+      hideLabel
+      onPress={onPress}
+      showBadge={showBadge}
+      size="md"
+      round
+    />
+  );
+};
+
+export const PageHeader = memo(({ title, actions }: Props) => {
+  return (
+    <View className="flex-row items-center justify-between px-5 py-3">
+      <Text className="text-3xl font-semibold text-f1-foreground">{title}</Text>
+      <View className="flex-row gap-2">
+        {actions?.map((action) => {
+          switch (action.type) {
+            case "notifications":
+              return <NotificationsAction {...action} key={action.label} />;
+            default:
+              return null;
+          }
+        })}
+      </View>
+    </View>
+  );
+});
+
+PageHeader.displayName = "PageHeader";