@factorialco/f0-react-native 0.23.1 → 0.24.1

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()
+    })
+  })
+})

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

@@ -1,24 +1,25 @@
-import { View } from "react-native";
-import { EmojiImage } from "../../../lib/emojis";
-import { cn } from "../../../lib/utils";
+import { View } from "react-native"
+
+import { EmojiImage } from "../../../lib/emojis"
+import { cn } from "../../../lib/utils"
 
 type Props = {
-  emoji: string;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-};
+  emoji: string
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
 
 const sizes = {
   sm: "w-6 h-6 rounded-sm",
   md: "w-9 h-9 rounded-md",
   lg: "w-10 h-10 rounded-lg",
-};
+}
 
 const emojiSize = {
   sm: { icon: "w-4 h-4", text: "text-xs" },
   md: { icon: "w-5 h-5", text: "text-sm" },
   lg: { icon: "w-6 h-6", text: "text-md" },
-} as const;
+} as const
 
 export const EmojiAvatar = ({ emoji, size = "md", className }: Props) => {
   return (
@@ -26,12 +27,12 @@ export const EmojiAvatar = ({ emoji, size = "md", className }: Props) => {
       className={cn(
         className,
         sizes[size],
-        "dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background",
+        "flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
       )}
     >
       <EmojiImage emoji={emoji} size={emojiSize[size]} />
     </View>
-  );
-};
+  )
+}
 
-EmojiAvatar.displayName = "EmojiAvatar";
+EmojiAvatar.displayName = "EmojiAvatar"

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

@@ -1,6 +1,7 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { FileAvatar } from "./";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { FileAvatar } from "./"
 
 describe("FileAvatar", () => {
   it("Snapshot - different file types", () => {
@@ -27,17 +28,17 @@ describe("FileAvatar", () => {
       { name: "webpage.html", type: "html" },
       { name: "readme.md", type: "markdown" },
       { name: "unknown.xyz", type: "undefined" },
-    ];
+    ]
 
     fileTypes.map((fileType, index) => {
       const { toJSON } = render(
         <FileAvatar
           key={index}
           file={new File([""], fileType.name, { type: fileType.type })}
-        />,
-      );
+        />
+      )
 
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-});
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+})

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

@@ -1,23 +1,25 @@
-import { ComponentProps, useMemo } from "react";
-import { Text } from "react-native";
-import { FileLike, getFileTypeInfo } from "./utils";
-import { Avatar } from "../../../ui/avatar";
-import { cn } from "../../../lib/utils";
-import { BaseAvatar } from "../BaseAvatar";
-import { AvatarBadge } from "../types";
-import { ModuleAvatar, ModuleAvatarProps } from "../ModuleAvatar";
-import { Badge, BadgeProps } from "../../Badge";
-import { View } from "react-native";
-import { getInitials } from "../BaseAvatar/utils";
+import { ComponentProps, useMemo } from "react"
+import { Text } from "react-native"
+import { View } from "react-native"
 
-type BaseAvatarProps = ComponentProps<typeof BaseAvatar>;
+import { cn } from "../../../lib/utils"
+import { Avatar } from "../../../ui/avatar"
+import { Badge, BadgeProps } from "../../Badge"
+import { BaseAvatar } from "../BaseAvatar"
+import { getInitials } from "../BaseAvatar/utils"
+import { ModuleAvatar, ModuleAvatarProps } from "../ModuleAvatar"
+import { AvatarBadge } from "../types"
+
+import { FileLike, getFileTypeInfo } from "./utils"
+
+type BaseAvatarProps = ComponentProps<typeof BaseAvatar>
 
 type Props = {
-  file: FileLike;
-  className?: string;
-  size?: BaseAvatarProps["size"];
-  badge?: AvatarBadge;
-};
+  file: FileLike
+  className?: string
+  size?: BaseAvatarProps["size"]
+  badge?: AvatarBadge
+}
 
 const textSizes = {
   xsmall: "text-xs",
@@ -25,10 +27,10 @@ const textSizes = {
   medium: "text-sm",
   large: "text-md",
   xlarge: "text-2xl",
-};
+}
 
 const getAvatarSize = (
-  size: BaseAvatarProps["size"],
+  size: BaseAvatarProps["size"]
 ): ModuleAvatarProps["size"] | undefined => {
   const sizeMap: Partial<
     Record<
@@ -39,13 +41,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: BaseAvatarProps["size"],
+  size: BaseAvatarProps["size"]
 ): BadgeProps["size"] | undefined => {
   const sizeMap: Partial<
     Record<Exclude<BaseAvatarProps["size"], undefined>, BadgeProps["size"]>
@@ -53,10 +55,10 @@ 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
+}
 export const FileAvatar = ({
   file,
   className,
@@ -64,10 +66,10 @@ export const FileAvatar = ({
   badge,
   ...props
 }: Props) => {
-  const { type: fileType, color: fileColor } = getFileTypeInfo(file);
-  const initials = getInitials(fileType, size, true);
-  const badgeSize = getBadgeSize(size);
-  const moduleAvatarSize = getAvatarSize(size);
+  const { type: fileType, color: fileColor } = getFileTypeInfo(file)
+  const initials = getInitials(fileType, size, true)
+  const badgeSize = getBadgeSize(size)
+  const moduleAvatarSize = getAvatarSize(size)
   const badgeContent = useMemo(
     () =>
       badge ? (
@@ -80,8 +82,8 @@ export const FileAvatar = ({
           )}
         </>
       ) : null,
-    [badge, badgeSize, moduleAvatarSize],
-  );
+    [badge, badgeSize, moduleAvatarSize]
+  )
 
   return (
     <View
@@ -92,7 +94,7 @@ export const FileAvatar = ({
           size={size}
           className={cn(
             "border border-solid border-f1-border-secondary bg-f1-background",
-            className,
+            className
           )}
           {...props}
         >
@@ -100,7 +102,7 @@ export const FileAvatar = ({
             className={cn(
               "font-semibold text-f1-foreground-inverse/90",
               textSizes[size],
-              fileColor,
+              fileColor
             )}
           >
             {initials}
@@ -108,10 +110,10 @@ export const FileAvatar = ({
         </Avatar>
       </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>
-  );
-};
+  )
+}
 
-FileAvatar.displayName = "FileAvatar";
+FileAvatar.displayName = "FileAvatar"