@factorialco/f0-react-native 0.19.1

package/src/components/Button/index.spec.tsx

@@ -0,0 +1,124 @@
+import { render, fireEvent, screen } from "@testing-library/react-native";
+import React from "react";
+import { Button } from "./";
+import { IconType } from "../Icon";
+
+// Mock the Icon component
+jest.mock("../Icon", () => ({
+  Icon: () => null,
+}));
+
+// Mock dependencies
+const mockIcon: IconType = "check" as unknown as IconType;
+const mockOnPress = jest.fn();
+
+describe("Button", () => {
+  const defaultProps = {
+    label: "Test Button",
+    onPress: mockOnPress,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("Snapshot - default button", () => {
+    const { toJSON } = render(<Button {...defaultProps} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - outline variant", () => {
+    const { toJSON } = render(<Button {...defaultProps} variant="outline" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - critical variant", () => {
+    const { toJSON } = render(<Button {...defaultProps} variant="critical" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - with icon", () => {
+    const { toJSON } = render(<Button {...defaultProps} icon={mockIcon} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - with emoji", () => {
+    const { toJSON } = render(<Button {...defaultProps} emoji="👋" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - disabled state", () => {
+    const { toJSON } = render(<Button {...defaultProps} disabled />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - loading state", () => {
+    const { toJSON } = render(<Button {...defaultProps} loading />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot - different sizes", () => {
+    const sizes = ["sm", "md", "lg"] as const;
+
+    sizes.forEach((size) => {
+      const { toJSON } = render(<Button {...defaultProps} size={size} />);
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  it("Snapshot - round button with hidden label", () => {
+    const { toJSON } = render(<Button {...defaultProps} round hideLabel />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Regular component tests
+  it("renders correctly with required props", () => {
+    render(<Button {...defaultProps} />);
+
+    const button = screen.getByText("Test Button");
+
+    expect(button).toBeDefined();
+  });
+
+  it("handles press events", () => {
+    render(<Button {...defaultProps} />);
+
+    fireEvent.press(screen.getByRole("button"));
+
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+
+  it("does not call onPress when disabled", () => {
+    render(<Button {...defaultProps} disabled />);
+
+    fireEvent.press(screen.getByRole("button"));
+
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  it("shows correct accessibility label when disabled", () => {
+    render(<Button {...defaultProps} disabled />);
+
+    const button = screen.getByRole("button");
+
+    expect(button.props.accessibilityLabel).toBe("Test Button, disabled");
+  });
+
+  it("shows correct accessibility label when loading", () => {
+    render(<Button {...defaultProps} loading />);
+
+    const button = screen.getByRole("button");
+
+    expect(button.props.accessibilityLabel).toBe(
+      "Test Button, disabled, loading",
+    );
+  });
+});

package/src/components/Button/index.tsx

@@ -0,0 +1,233 @@
+import { cva, type VariantProps } from "cva";
+import React, { forwardRef, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../../lib/utils";
+import { Icon, type IconType } from "../Icon";
+
+export const variants = [
+  "default",
+  "outline",
+  "critical",
+  "neutral",
+  "ghost",
+  "promote",
+] as const;
+export type ButtonVariant = (typeof variants)[number];
+
+export const sizes = ["sm", "md", "lg"] as const;
+export type ButtonSize = (typeof sizes)[number];
+
+const buttonVariants = cva({
+  base: "flex-row items-center justify-center rounded border-none grow-0",
+  variants: {
+    variant: {
+      default: "bg-f1-background-accent-bold",
+      outline: "bg-f1-background-inverse-secondary border border-f1-border",
+      neutral: "bg-f1-background-secondary",
+      critical: "bg-f1-background-secondary border border-f1-border",
+      ghost: "bg-transparent",
+      promote: "bg-f1-background-promote border border-f1-border-promote",
+    },
+    size: {
+      sm: "h-6 rounded-sm",
+      md: "h-8 rounded",
+      lg: "h-10 rounded-md",
+    },
+    disabled: {
+      true: "opacity-50",
+      false: "",
+    },
+    round: {
+      true: "aspect-square p-0",
+      false: "gap-1 px-2 sm:px-3 lg:px-4",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    disabled: false,
+    round: false,
+  },
+});
+
+const pressedVariants = cva({
+  base: "",
+  variants: {
+    variant: {
+      default: "bg-f1-background-accent-bold-hover",
+      outline: "bg-f1-background-tertiary border-opacity-70",
+      neutral: "bg-f1-background-secondary-hover",
+      critical: "bg-f1-background-critical-bold border-transparent",
+      ghost: "bg-f1-background-secondary-hover",
+      promote: "bg-f1-background-promote-hover",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const getIconColor = (variant: ButtonVariant, isPressed: boolean) => {
+  switch (variant) {
+    case "default":
+      return "text-f1-icon-inverse";
+    case "critical":
+      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold";
+    default:
+      return "text-f1-icon";
+  }
+};
+
+const getIconOnlyColor = (variant: ButtonVariant, isPressed: boolean) => {
+  switch (variant) {
+    case "critical":
+      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold";
+    case "default":
+      return "text-f1-icon-inverse";
+    case "outline":
+    case "neutral":
+    case "ghost":
+    case "promote":
+    default:
+      return "text-f1-icon-bold";
+  }
+};
+
+const getTextColorClass = (variant: ButtonVariant, isPressed: boolean) => {
+  if (isPressed && variant === "critical") {
+    return "text-f1-foreground-inverse";
+  }
+
+  switch (variant) {
+    case "default":
+      return "text-f1-foreground-inverse";
+    case "critical":
+      return "text-f1-foreground-critical";
+    default:
+      return "text-f1-foreground";
+  }
+};
+
+export interface ButtonProps extends VariantProps<typeof buttonVariants> {
+  label: string;
+  onPress?: () => void | Promise<unknown>;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: IconType;
+  emoji?: string;
+  hideLabel?: boolean;
+  className?: string;
+  accessibilityHint?: string;
+  showBadge?: boolean;
+  fullWidth?: boolean;
+}
+
+export const Button = forwardRef<View, ButtonProps>(function Button(
+  {
+    label,
+    onPress,
+    disabled = false,
+    loading = false,
+    icon,
+    emoji,
+    hideLabel = false,
+    variant = "default",
+    size = "md",
+    round = false,
+    className,
+    accessibilityHint,
+    showBadge = false,
+    fullWidth = false,
+  },
+  ref,
+) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+
+  const handlePress = async () => {
+    if (!onPress || disabled || loading || isLoading) return;
+
+    const result = onPress();
+
+    if (result instanceof Promise) {
+      setIsLoading(true);
+      try {
+        await result;
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const isDisabled = disabled || loading || isLoading;
+  const accessibilityLabel = `${label}${isDisabled ? ", disabled" : ""}${loading || isLoading ? ", loading" : ""}`;
+  const shouldShowPressed = isPressed && !isDisabled;
+
+  return (
+    <View className={`flex ${fullWidth ? "flex-1" : "item-start"}`}>
+      <Pressable
+        ref={ref}
+        disabled={isDisabled}
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+        onPress={handlePress}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            disabled: isDisabled,
+            round: hideLabel && round,
+          }),
+          shouldShowPressed && pressedVariants({ variant }),
+          className,
+        )}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityState={{
+          disabled: isDisabled,
+          busy: loading || isLoading,
+        }}
+        accessibilityHint={accessibilityHint}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            size={size === "sm" ? "sm" : "md"}
+            className={cn(
+              hideLabel && round ? undefined : "-ml-0.5",
+              hideLabel && round
+                ? getIconOnlyColor(variant, shouldShowPressed)
+                : getIconColor(variant, shouldShowPressed),
+            )}
+          />
+        )}
+        {emoji && (
+          <Text
+            className={cn(
+              "text-base font-medium",
+              getTextColorClass(variant, shouldShowPressed),
+            )}
+          >
+            {emoji}
+          </Text>
+        )}
+        {!hideLabel && (
+          <Text
+            className={cn(
+              "text-base font-medium",
+              getTextColorClass(variant, shouldShowPressed),
+            )}
+          >
+            {label}
+          </Text>
+        )}
+      </Pressable>
+      {showBadge && variant === "outline" && (
+        <View
+          accessibilityLabel="Notification Badge"
+          className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-f1-icon-accent"
+        />
+      )}
+    </View>
+  );
+});

package/src/components/Counter/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Counter Snapshot 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Counter Snapshot vairan bold types 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-accent-bold"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground-inverse"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Counter Snapshot vairan defauly types 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Counter Snapshot vairan defauly types 2`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Counter Snapshot vairan md size 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Counter Snapshot vairan selected types 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-selected-bold outline-f1-border-selected"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground-inverse"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Counter Snapshot vairan sm size 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-4 h-4 bg-f1-background-secondary border border-f1-border"
+  >
+    <Text
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap leading-none py-0.5 text-f1-foreground"
+    >
+      42
+    </Text>
+  </View>
+</View>
+`;

package/src/components/Counter/index.spec.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react-native";
+import React from "react";
+import { Counter } from ".";
+
+describe("Counter", () => {
+  const defaultProps = {
+    value: 42,
+    types: "default",
+  };
+
+  it("Snapshot", () => {
+    const { toJSON } = render(<Counter {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot vairan defauly types", () => {
+    const { toJSON } = render(<Counter {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot vairan defauly types", () => {
+    const { toJSON } = render(<Counter {...defaultProps} type="default" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot vairan bold types", () => {
+    const { toJSON } = render(<Counter {...defaultProps} type="bold" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot vairan selected types", () => {
+    const { toJSON } = render(<Counter {...defaultProps} type="selected" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot vairan md size", () => {
+    const { toJSON } = render(<Counter {...defaultProps} size="md" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot vairan sm size", () => {
+    const { toJSON } = render(<Counter {...defaultProps} size="sm" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with required props", () => {
+    render(<Counter {...defaultProps} />);
+
+    const number = screen.getByText("42");
+
+    expect(number).toBeDefined();
+  });
+});

package/src/components/Counter/index.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "cva";
+import { Text, View } from "react-native";
+import { cn } from "../../lib/utils";
+
+const counterContainerVariants = cva({
+  base: "flex items-center justify-center rounded-xs grow-0 px-0.5",
+  variants: {
+    size: {
+      md: "min-w-5 h-5",
+      sm: "min-w-4 h-4",
+    },
+    type: {
+      default: "bg-f1-background-secondary border border-f1-border",
+      selected: "bg-f1-background-selected-bold outline-f1-border-selected",
+      bold: "bg-f1-background-accent-bold",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    type: "default",
+  },
+});
+
+const counterTextVariants = cva({
+  base: "text-center text-sm font-medium tabular-nums whitespace-nowrap",
+  variants: {
+    size: {
+      md: "",
+      sm: "leading-none py-0.5",
+    },
+    type: {
+      default: "text-f1-foreground",
+      selected: "text-f1-foreground-inverse",
+      bold: "text-f1-foreground-inverse",
+    },
+  },
+  defaultVariants: {
+    type: "default",
+  },
+});
+
+type CounterProps = {
+  value: number;
+  maxValue?: number;
+} & VariantProps<typeof counterContainerVariants>;
+
+export function Counter({ size, type, value, maxValue }: CounterProps) {
+  const displayValue = maxValue && value > maxValue ? `+${maxValue}` : value;
+
+  return (
+    <View className="flex items-start">
+      <View className={cn(counterContainerVariants({ size, type }))}>
+        <Text className={cn(counterTextVariants({ type, size }))}>
+          {displayValue}
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/components/ExampleComponent.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+export interface ExampleComponentProps {
+  /**
+   * Optional custom text to display
+   */
+  text?: string;
+}
+
+/**
+ * An example component that demonstrates system-based dark/light mode functionality
+ */
+export const ExampleComponent: React.FC<ExampleComponentProps> = ({
+  text = "Hello World",
+}) => {
+  return (
+    <View className="rounded-lg bg-f1-background p-4">
+      <Text className="text-base font-medium text-f1-foreground">{text}</Text>
+    </View>
+  );
+};

package/src/components/Icon/README.md

@@ -0,0 +1,63 @@
+# Icon Component
+
+The Icon component is used to render SVG icons from the Factorial One Design System in React Native applications.
+
+## Import Pattern
+
+```tsx
+// Import the Icon component
+import { Icon } from "@factorialco/f0-react-native";
+
+// Import specific icons from app or modules directories
+import { AppIcons, ModuleIcons } from "@factorialco/f0-react-native";
+
+// Use the Icon component with the icon as a prop
+<Icon icon={AppIcons.Archive} size="md" />
+<Icon icon={ModuleIcons.Home} size="lg" />
+```
+
+## Props
+
+| Prop      | Type                         | Default | Description                             |
+| --------- | ---------------------------- | ------- | --------------------------------------- |
+| icon      | IconType                     |         | The icon component to render            |
+| size      | "xs" \| "sm" \| "md" \| "lg" | "md"    | The size of the icon                    |
+| className | string                       |         | Additional classes for styling the icon |
+| testID    | string                       |         | Test ID for testing                     |
+| ...props  | SvgProps                     |         | Additional props for the SVG component  |
+
+## Styling with NativeWind
+
+The Icon component is designed to work with NativeWind, allowing you to style icons using Tailwind CSS classes:
+
+```tsx
+// Style using Tailwind CSS classes
+<Icon icon={AppIcons.Archive} className="text-f1-icon-secondary" />
+```
+
+## Available Icons
+
+The library includes two sets of icons:
+
+1. **App Icons** - General purpose icons used throughout the application
+2. **Module Icons** - Icons representing specific modules in the Factorial application
+
+## Examples
+
+```tsx
+import { Icon } from "@factorialco/f0-react-native";
+import { AppIcons, ModuleIcons } from "@factorialco/f0-react-native";
+
+// Basic usage
+<Icon icon={AppIcons.Calendar} />
+
+// With size variant
+<Icon icon={AppIcons.ChevronDown} size="xs" />
+<Icon icon={AppIcons.Check} size="sm" />
+<Icon icon={ModuleIcons.Home} size="md" />
+<Icon icon={ModuleIcons.Settings} size="lg" />
+
+// With color styling
+<Icon icon={AppIcons.Heart} className="text-red-500" />
+<Icon icon={AppIcons.InfoCircle} className="text-blue-500" />
+```

package/src/components/Icon/__tests__/Icon.spec.tsx

@@ -0,0 +1,35 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { Icon } from "../index";
+import { Archive } from "../../../icons/app";
+import { Home } from "../../../icons/modules";
+
+describe("Icon", () => {
+  it("renders correctly with an app icon", () => {
+    const { getByTestId } = render(<Icon icon={Archive} testID="icon" />);
+    expect(getByTestId("icon")).toBeTruthy();
+  });
+
+  it("renders correctly with a module icon", () => {
+    const { getByTestId } = render(<Icon icon={Home} testID="icon" />);
+    expect(getByTestId("icon")).toBeTruthy();
+  });
+
+  it("applies the correct size class", () => {
+    const { getByTestId } = render(
+      <Icon icon={Archive} size="lg" testID="icon" />,
+    );
+    // In a real test environment, we could check the actual style props applied
+    // but for now we just ensure it renders
+    expect(getByTestId("icon")).toBeTruthy();
+  });
+
+  it("applies custom className correctly", () => {
+    const { getByTestId } = render(
+      <Icon icon={Archive} className="text-red-500" testID="icon" />,
+    );
+    // In a real test environment, we could check the actual style props applied
+    // but for now we just ensure it renders
+    expect(getByTestId("icon")).toBeTruthy();
+  });
+});