@factorialco/f0-react-native 0.23.0 → 0.24.0

package/src/components/Activity/ActivityItem/index.spec.tsx

@@ -1,19 +1,17 @@
-import { render, fireEvent, screen } from "@testing-library/react-native";
-import React from "react";
-import { IconType } from "../../Icon";
-import {
-  ActivityItem,
-  ActivityItemSkeleton,
-} from "../../Activity/ActivityItem";
+import { render, fireEvent, screen } from "@testing-library/react-native"
+import React from "react"
+
+import { ActivityItem, ActivityItemSkeleton } from "../../Activity/ActivityItem"
+import { IconType } from "../../Icon"
 
 // Mock the IconAvatar component
 jest.mock("../../Avatars/IconAvatar", () => ({
   IconAvatar: () => null,
-}));
+}))
 
 // Mock dependencies
-const mockIcon: IconType = "check" as unknown as IconType;
-const mockOnPress = jest.fn();
+const mockIcon: IconType = "check" as unknown as IconType
+const mockOnPress = jest.fn()
 
 describe("ActivityItem", () => {
   const defaultProps = {
@@ -22,82 +20,82 @@ describe("ActivityItem", () => {
     title: "Activity Title",
     category: "Time off",
     onPress: mockOnPress,
-  };
+  }
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
+    jest.clearAllMocks()
+  })
 
   it("Snapshot", () => {
-    const { toJSON } = render(<ActivityItem {...defaultProps} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<ActivityItem {...defaultProps} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
 
   it("renders correctly with required props", () => {
-    render(<ActivityItem {...defaultProps} />);
+    render(<ActivityItem {...defaultProps} />)
 
-    const title = screen.getByText("Activity Title");
-    const moduleDate = screen.getByText("Time off · Today");
+    const title = screen.getByText("Activity Title")
+    const moduleDate = screen.getByText("Time off · Today")
 
-    expect(title).toBeDefined();
-    expect(moduleDate).toBeDefined();
-  });
+    expect(title).toBeDefined()
+    expect(moduleDate).toBeDefined()
+  })
 
   it("renders correctly with description", () => {
-    render(<ActivityItem {...defaultProps} description="Test description" />);
+    render(<ActivityItem {...defaultProps} description="Test description" />)
 
-    const description = screen.getByText("Test description");
+    const description = screen.getByText("Test description")
 
-    expect(description).toBeDefined();
-  });
+    expect(description).toBeDefined()
+  })
 
   it("renders icon container when icon is provided", () => {
-    render(<ActivityItem {...defaultProps} icon={mockIcon} />);
+    render(<ActivityItem {...defaultProps} icon={mockIcon} />)
 
-    const icon = screen.getByLabelText("activity-icon-container");
+    const icon = screen.getByLabelText("activity-icon-container")
 
-    expect(icon).toBeDefined();
-  });
+    expect(icon).toBeDefined()
+  })
 
   it("does not render icon container when icon is not provided", () => {
-    render(<ActivityItem {...defaultProps} />);
+    render(<ActivityItem {...defaultProps} />)
 
-    const icon = screen.queryByLabelText("activity-icon-container");
+    const icon = screen.queryByLabelText("activity-icon-container")
 
-    expect(icon).toBeNull();
-  });
+    expect(icon).toBeNull()
+  })
 
   it("shows unread indicator when isUnread is true", () => {
-    render(<ActivityItem {...defaultProps} isUnread={true} />);
+    render(<ActivityItem {...defaultProps} isUnread={true} />)
 
-    const indicator = screen.getByLabelText("unread-indicator");
+    const indicator = screen.getByLabelText("unread-indicator")
 
-    expect(indicator).toBeDefined();
-  });
+    expect(indicator).toBeDefined()
+  })
 
   it("does not show unread indicator when isUnread is false", () => {
-    render(<ActivityItem {...defaultProps} isUnread={false} />);
+    render(<ActivityItem {...defaultProps} isUnread={false} />)
 
-    const indicator = screen.queryByLabelText("unread-indicator");
+    const indicator = screen.queryByLabelText("unread-indicator")
 
-    expect(indicator).toBeNull();
-  });
+    expect(indicator).toBeNull()
+  })
 
   it("calls onPress with correct id when pressed", () => {
-    render(<ActivityItem {...defaultProps} />);
+    render(<ActivityItem {...defaultProps} />)
 
-    fireEvent.press(screen.getByLabelText("activity-item"));
+    fireEvent.press(screen.getByLabelText("activity-item"))
 
-    expect(mockOnPress).toHaveBeenCalledWith("activity-123");
-  });
-});
+    expect(mockOnPress).toHaveBeenCalledWith("activity-123")
+  })
+})
 
 describe("ActivityItemSkeleton", () => {
   it("renders skeleton correctly", () => {
-    render(<ActivityItemSkeleton />);
+    render(<ActivityItemSkeleton />)
 
-    const skeleton = screen.getByLabelText("activity-skeleton");
+    const skeleton = screen.getByLabelText("activity-skeleton")
 
-    expect(skeleton).toBeDefined();
-  });
-});
+    expect(skeleton).toBeDefined()
+  })
+})

package/src/components/Activity/ActivityItem/index.tsx

@@ -1,18 +1,19 @@
-import { View, Text, Pressable } from "react-native";
-import { useState } from "react";
-import { IconType } from "../../Icon";
-import { IconAvatar } from "../../Avatars/exports";
+import { useState } from "react"
+import { View, Text, Pressable } from "react-native"
+
+import { IconAvatar } from "../../Avatars/exports"
+import { IconType } from "../../Icon"
 
 export type ActivityItemProps = {
-  id: string;
-  date: string;
-  title: string;
-  description?: string;
-  icon?: IconType;
-  category: string;
-  isUnread?: boolean;
-  onPress: (id: string) => void;
-};
+  id: string
+  date: string
+  title: string
+  description?: string
+  icon?: IconType
+  category: string
+  isUnread?: boolean
+  onPress: (id: string) => void
+}
 
 export const ActivityItem = ({
   id,
@@ -24,7 +25,7 @@ export const ActivityItem = ({
   isUnread = false,
   onPress,
 }: ActivityItemProps) => {
-  const [isPressed, setIsPressed] = useState(false);
+  const [isPressed, setIsPressed] = useState(false)
 
   return (
     <Pressable
@@ -59,8 +60,8 @@ export const ActivityItem = ({
         )}
       </View>
     </Pressable>
-  );
-};
+  )
+}
 
 export const ActivityItemSkeleton = () => {
   return (
@@ -86,5 +87,5 @@ export const ActivityItemSkeleton = () => {
       {/* Space for the unread indicator */}
       <View className="ml-1 w-2" />
     </View>
-  );
-};
+  )
+}

package/src/components/Avatars/Avatar.tsx

@@ -1,24 +1,26 @@
-import { sizes } from "../../ui/avatar";
-import { ComponentProps, ReactNode } from "react";
-import { CompanyAvatar } from "./CompanyAvatar";
-import { PersonAvatar } from "./PersonAvatar";
-import { TeamAvatar } from "./TeamAvatar";
+import { ComponentProps, ReactNode } from "react"
 
-type PersonAvatarProps = ComponentProps<typeof PersonAvatar>;
-type TeamAvatarProps = ComponentProps<typeof TeamAvatar>;
-type CompanyAvatarProps = ComponentProps<typeof CompanyAvatar>;
+import { sizes } from "../../ui/avatar"
+
+import { CompanyAvatar } from "./CompanyAvatar"
+import { PersonAvatar } from "./PersonAvatar"
+import { TeamAvatar } from "./TeamAvatar"
+
+type PersonAvatarProps = ComponentProps<typeof PersonAvatar>
+type TeamAvatarProps = ComponentProps<typeof TeamAvatar>
+type CompanyAvatarProps = ComponentProps<typeof CompanyAvatar>
 
 export type AvatarVariant =
   | ({ type: "person" } & Omit<PersonAvatarProps, "size">)
   | ({ type: "team" } & Omit<TeamAvatarProps, "size">)
-  | ({ type: "company" } & Omit<CompanyAvatarProps, "size">);
+  | ({ type: "company" } & Omit<CompanyAvatarProps, "size">)
 
 export const Avatar = ({
   avatar,
   size = "xsmall",
 }: {
-  avatar: AvatarVariant;
-  size?: (typeof sizes)[number];
+  avatar: AvatarVariant
+  size?: (typeof sizes)[number]
 }): ReactNode => {
   switch (avatar.type) {
     case "person":
@@ -31,7 +33,7 @@ export const Avatar = ({
           aria-label={avatar["aria-label"]}
           aria-labelledby={avatar["aria-labelledby"]}
         />
-      );
+      )
     case "team":
       return (
         <TeamAvatar
@@ -41,7 +43,7 @@ export const Avatar = ({
           aria-label={avatar["aria-label"]}
           aria-labelledby={avatar["aria-labelledby"]}
         />
-      );
+      )
     case "company":
       return (
         <CompanyAvatar
@@ -51,6 +53,6 @@ export const Avatar = ({
           aria-label={avatar["aria-label"]}
           aria-labelledby={avatar["aria-labelledby"]}
         />
-      );
+      )
   }
-};
+}

package/src/components/Avatars/BaseAvatar/index.tsx

@@ -1,17 +1,19 @@
+import { ComponentProps, useMemo } from "react"
+import { View } from "react-native"
+
 import {
   Avatar as AvatarComponent,
   AvatarFallback,
   AvatarImage,
-} from "../../../ui/avatar";
-import { ComponentProps, useMemo } from "react";
-import { Badge, BadgeProps } from "../../Badge";
-import { getAvatarColor, getInitials } from "./utils";
-import { View } from "react-native";
-import { ModuleAvatar, ModuleAvatarProps } from "../ModuleAvatar";
-import { AvatarBadge } from "../types";
+} from "../../../ui/avatar"
+import { Badge, BadgeProps } from "../../Badge"
+import { ModuleAvatar, ModuleAvatarProps } from "../ModuleAvatar"
+import { AvatarBadge } from "../types"
+
+import { getAvatarColor, getInitials } from "./utils"
 
 const getAvatarSize = (
-  size: ShadAvatarProps["size"],
+  size: ShadAvatarProps["size"]
 ): ModuleAvatarProps["size"] | undefined => {
   const sizeMap: Partial<
     Record<
@@ -22,13 +24,13 @@ const getAvatarSize = (
     xlarge: "lg",
     large: "md",
     small: "sm",
-  } as const;
+  } as const
 
-  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small;
-};
+  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small
+}
 
 const getBadgeSize = (
-  size: ShadAvatarProps["size"],
+  size: ShadAvatarProps["size"]
 ): BadgeProps["size"] | undefined => {
   const sizeMap: Partial<
     Record<Exclude<ShadAvatarProps["size"], undefined>, BadgeProps["size"]>
@@ -36,21 +38,21 @@ const getBadgeSize = (
     xlarge: "lg",
     large: "md",
     small: "sm",
-  } as const;
+  } as const
 
-  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small;
-};
+  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small
+}
 
-type ShadAvatarProps = ComponentProps<typeof AvatarComponent>;
+type ShadAvatarProps = ComponentProps<typeof AvatarComponent>
 
 type Props = {
-  type: ShadAvatarProps["type"];
-  name: string | string[];
-  src?: string;
-  size?: ShadAvatarProps["size"];
-  color?: ShadAvatarProps["color"] | "random";
-  badge?: AvatarBadge;
-} & Pick<ShadAvatarProps, "aria-label" | "aria-labelledby">;
+  type: ShadAvatarProps["type"]
+  name: string | string[]
+  src?: string
+  size?: ShadAvatarProps["size"]
+  color?: ShadAvatarProps["color"] | "random"
+  badge?: AvatarBadge
+} & Pick<ShadAvatarProps, "aria-label" | "aria-labelledby">
 
 export const BaseAvatar = ({
   src,
@@ -62,15 +64,15 @@ export const BaseAvatar = ({
   "aria-labelledby": ariaLabelledby,
   badge,
 }: Props) => {
-  const initials = getInitials(name, size);
+  const initials = getInitials(name, size)
   const avatarColor =
     color === "random"
       ? getAvatarColor(Array.isArray(name) ? name.join("") : name)
-      : color;
+      : color
 
-  const hasAria = Boolean(ariaLabel || ariaLabelledby);
-  const badgeSize = getBadgeSize(size);
-  const moduleAvatarSize = getAvatarSize(size);
+  const hasAria = Boolean(ariaLabel || ariaLabelledby)
+  const badgeSize = getBadgeSize(size)
+  const moduleAvatarSize = getAvatarSize(size)
 
   const badgeContent = useMemo(
     () =>
@@ -84,8 +86,8 @@ export const BaseAvatar = ({
           )}
         </>
       ) : null,
-    [badge, badgeSize, moduleAvatarSize],
-  );
+    [badge, badgeSize, moduleAvatarSize]
+  )
 
   return (
     <View
@@ -103,7 +105,7 @@ export const BaseAvatar = ({
           data-a11y-color-contrast-ignore
           className={
             src
-              ? "dark:bg-f1-background-inverse-secondary bg-f1-background"
+              ? "bg-f1-background dark:bg-f1-background-inverse-secondary"
               : ""
           }
         >
@@ -117,10 +119,10 @@ export const BaseAvatar = ({
         </AvatarComponent>
       </View>
       {badge && (
-        <View className="absolute -bottom-0.5 -right-0.5">{badgeContent}</View>
+        <View className="absolute -right-0.5 -bottom-0.5">{badgeContent}</View>
       )}
     </View>
-  );
-};
+  )
+}
 
-BaseAvatar.displayName = "BaseAvatar";
+BaseAvatar.displayName = "BaseAvatar"

package/src/components/Avatars/BaseAvatar/utils.ts

@@ -1,44 +1,45 @@
+import { type ComponentProps } from "react"
+
 import {
   color as AvatarColors,
   Avatar as AvatarComponent,
   type as avatarType,
   sizes,
-} from "../../../ui/avatar";
-import { type ComponentProps } from "react";
+} from "../../../ui/avatar"
 
-type ShadAvatarProps = ComponentProps<typeof AvatarComponent>;
+type ShadAvatarProps = ComponentProps<typeof AvatarComponent>
 
 export function getInitials(
   name: string | string[],
   size?: ShadAvatarProps["size"],
-  isFile?: boolean,
+  isFile?: boolean
 ): string {
-  const nameArray = Array.isArray(name) ? name : [name];
-  const isSmall = size === "xsmall" || size === "small";
-  const minChar = isFile ? 3 : 2;
+  const nameArray = Array.isArray(name) ? name : [name]
+  const isSmall = size === "xsmall" || size === "small"
+  const minChar = isFile ? 3 : 2
 
-  if (isSmall) return (nameArray[0][0] ?? "").toUpperCase();
-  if (!Array.isArray(name)) return name.slice(0, minChar).toUpperCase();
+  if (isSmall) return (nameArray[0][0] ?? "").toUpperCase()
+  if (!Array.isArray(name)) return name.slice(0, minChar).toUpperCase()
 
   return nameArray
     .slice(0, minChar)
     .map((name) => name[0])
     .join("")
-    .toUpperCase();
+    .toUpperCase()
 }
 
 export function getAvatarColor(text: string): ShadAvatarProps["color"] {
-  let hash = 0;
+  let hash = 0
 
   for (let i = 0; i < text.length; i++) {
-    hash = text.charCodeAt(i) + ((hash << 5) - hash);
-    hash = hash & hash;
+    hash = text.charCodeAt(i) + ((hash << 5) - hash)
+    hash = hash & hash
   }
 
   const index =
-    ((hash % AvatarColors.length) + AvatarColors.length) % AvatarColors.length;
+    ((hash % AvatarColors.length) + AvatarColors.length) % AvatarColors.length
 
-  return AvatarColors[index];
+  return AvatarColors[index]
 }
 
 export const getMask = {
@@ -68,6 +69,6 @@ export const getMask = {
   },
   get: (
     type: (typeof avatarType)[number] = "base",
-    size: (typeof sizes)[number] = "medium",
+    size: (typeof sizes)[number] = "medium"
   ) => getMask[type][size],
-} as const;
+} as const

package/src/components/Avatars/CompanyAvatar/index.spec.tsx

@@ -1,11 +1,12 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { CompanyAvatar } from "./";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { CompanyAvatar } from "./"
 
 describe("CompanyAvatar", () => {
   it("Snapshot", () => {
-    const { toJSON } = render(<CompanyAvatar name="Factorial" />);
+    const { toJSON } = render(<CompanyAvatar name="Factorial" />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

package/src/components/Avatars/CompanyAvatar/index.tsx

@@ -1,15 +1,16 @@
-import { ComponentProps } from "react";
-import { BaseAvatar } from "../BaseAvatar";
-import { AvatarBadge } from "../types";
+import { ComponentProps } from "react"
 
-type BaseAvatarProps = ComponentProps<typeof BaseAvatar>;
+import { BaseAvatar } from "../BaseAvatar"
+import { AvatarBadge } from "../types"
+
+type BaseAvatarProps = ComponentProps<typeof BaseAvatar>
 
 type Props = {
-  name: string;
-  src?: string;
-  size?: BaseAvatarProps["size"];
-  badge?: AvatarBadge;
-} & Pick<BaseAvatarProps, "aria-label" | "aria-labelledby">;
+  name: string
+  src?: string
+  size?: BaseAvatarProps["size"]
+  badge?: AvatarBadge
+} & Pick<BaseAvatarProps, "aria-label" | "aria-labelledby">
 
 export const CompanyAvatar = ({
   name,
@@ -30,7 +31,7 @@ export const CompanyAvatar = ({
       aria-labelledby={ariaLabelledby}
       badge={badge}
     />
-  );
-};
+  )
+}
 
-CompanyAvatar.displayName = "CompanyAvatar";
+CompanyAvatar.displayName = "CompanyAvatar"

package/src/components/Avatars/DateAvatar/__snapshots__/index.spec.tsx.snap

@@ -5,12 +5,12 @@ exports[`DateAvatar Snapshot 1`] = `
   className="flex h-10 w-10 flex-col items-center justify-center rounded border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary"
 >
   <Text
-    className="dark:text-f1-foreground-inverse-secondary pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight"
+    className="pt-0.5 text-xs leading-3 font-semibold text-f1-special-highlight uppercase dark:text-f1-foreground-inverse-secondary"
   >
     Jan
   </Text>
   <Text
-    className="flex items-center justify-center text-lg font-medium leading-tight text-f1-foreground"
+    className="flex items-center justify-center text-lg leading-tight font-medium text-f1-foreground"
   >
     1
   </Text>

package/src/components/Avatars/DateAvatar/index.spec.tsx

@@ -1,12 +1,13 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { DateAvatar } from "./";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { DateAvatar } from "./"
 
 describe("DateAvatar", () => {
   it("Snapshot", () => {
-    const fixedDate = new Date("2025-01-01T00:00:00Z");
-    const { toJSON } = render(<DateAvatar date={fixedDate} />);
+    const fixedDate = new Date("2025-01-01T00:00:00Z")
+    const { toJSON } = render(<DateAvatar date={fixedDate} />)
 
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

package/src/components/Avatars/DateAvatar/index.tsx

@@ -1,22 +1,23 @@
-import { View, Text } from "react-native";
-import { getAbbreviateMonth, getDayOfMonth } from "../../../lib/date";
+import { View, Text } from "react-native"
+
+import { getAbbreviateMonth, getDayOfMonth } from "../../../lib/date"
 
 type Props = {
-  date: Date;
-};
+  date: Date
+}
 
 export const DateAvatar = ({ date }: Props) => {
-  const dateDay = getDayOfMonth(date);
-  const month = getAbbreviateMonth(date);
+  const dateDay = getDayOfMonth(date)
+  const month = getAbbreviateMonth(date)
 
   return (
     <View className="flex h-10 w-10 flex-col items-center justify-center rounded border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary">
-      <Text className="dark:text-f1-foreground-inverse-secondary pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight">
+      <Text className="pt-0.5 text-xs leading-3 font-semibold text-f1-special-highlight uppercase dark:text-f1-foreground-inverse-secondary">
         {month}
       </Text>
-      <Text className="flex items-center justify-center text-lg font-medium leading-tight text-f1-foreground">
+      <Text className="flex items-center justify-center text-lg leading-tight font-medium text-f1-foreground">
         {dateDay}
       </Text>
     </View>
-  );
-};
+  )
+}

package/src/components/Avatars/EmojiAvatar/__snapshots__/index.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`] = `
 <View
-  className="w-6 h-6 rounded-sm dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background"
+  className="w-6 h-6 rounded-sm flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
 >
   <Text
     className="text-xs"
@@ -14,7 +14,7 @@ exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`]
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`] = `
 <View
-  className="w-9 h-9 rounded-md dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background"
+  className="w-9 h-9 rounded-md flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
 >
   <Text
     className="text-sm"
@@ -26,7 +26,7 @@ exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`]
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 3`] = `
 <View
-  className="w-10 h-10 rounded-lg dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background"
+  className="w-10 h-10 rounded-lg flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
 >
   <Text
     className="text-md"

package/src/components/Avatars/EmojiAvatar/index.spec.tsx

@@ -1,15 +1,16 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { EmojiAvatar } from "./";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { EmojiAvatar } from "./"
 
 describe("EmojiAvatar", () => {
   it("Snapshot - different sizes text emoji and diferent size", () => {
-    const sizes = ["sm", "md", "lg"] as const;
+    const sizes = ["sm", "md", "lg"] as const
 
     sizes.forEach((size) => {
-      const { toJSON } = render(<EmojiAvatar emoji="test" size={size} />);
+      const { toJSON } = render(<EmojiAvatar emoji="test" size={size} />)
 
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-});
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+})