@factorialco/f0-react-native 0.23.0 → 0.24.0

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"

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

@@ -1,12 +1,12 @@
 type FileTypeInfo = {
-  type: string;
-  color: string;
-};
+  type: string
+  color: string
+}
 
 type FileLike = {
-  name: string;
-  type?: string;
-};
+  name: string
+  type?: string
+}
 
 const FILE_TYPE_MAP: Record<string, FileTypeInfo> = {
   pdf: { type: "PDF", color: "text-f1-foreground-accent" },
@@ -22,7 +22,7 @@ const FILE_TYPE_MAP: Record<string, FileTypeInfo> = {
   html: { type: "HTML", color: "text-f1-foreground-accent" },
   markdown: { type: "MD", color: "text-f1-foreground-secondary" },
   default: { type: "FILE", color: "text-f1-foreground" },
-};
+}
 
 const MIME_MATCH_MAP: Record<string, keyof typeof FILE_TYPE_MAP> = {
   pdf: "pdf",
@@ -42,7 +42,7 @@ const MIME_MATCH_MAP: Record<string, keyof typeof FILE_TYPE_MAP> = {
   tar: "archive",
   gz: "archive",
   "7z": "archive",
-};
+}
 
 const EXTENSION_MAP: Record<string, keyof typeof FILE_TYPE_MAP> = {
   pdf: "pdf",
@@ -77,27 +77,27 @@ const EXTENSION_MAP: Record<string, keyof typeof FILE_TYPE_MAP> = {
   htm: "html",
   md: "markdown",
   markdown: "markdown",
-};
+}
 
 const getFileTypeInfo = (file: FileLike): FileTypeInfo => {
-  const mimeType = file.type?.toLowerCase() ?? "";
+  const mimeType = file.type?.toLowerCase() ?? ""
 
   const matchedMimeKey = Object.keys(MIME_MATCH_MAP).find((key) =>
-    mimeType.includes(key),
-  );
+    mimeType.includes(key)
+  )
 
   if (matchedMimeKey) {
-    return FILE_TYPE_MAP[MIME_MATCH_MAP[matchedMimeKey]];
+    return FILE_TYPE_MAP[MIME_MATCH_MAP[matchedMimeKey]]
   }
 
-  const extension = file.name.toLowerCase().split(".").pop();
+  const extension = file.name.toLowerCase().split(".").pop()
 
   if (extension && EXTENSION_MAP[extension]) {
-    return FILE_TYPE_MAP[EXTENSION_MAP[extension]];
+    return FILE_TYPE_MAP[EXTENSION_MAP[extension]]
   }
 
-  return FILE_TYPE_MAP.default;
-};
+  return FILE_TYPE_MAP.default
+}
 
-export { getFileTypeInfo };
-export type { FileTypeInfo, FileLike };
+export { getFileTypeInfo }
+export type { FileTypeInfo, FileLike }

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

@@ -1,16 +1,18 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { IconAvatar } from "./";
-import { Placeholder } from "../../../icons/app";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { Placeholder } from "../../../icons/app"
+
+import { IconAvatar } from "./"
 
 describe("IconAvatar", () => {
   it("Snapshot - different sizes", () => {
-    const sizes = ["sm", "md", "lg"] as const;
+    const sizes = ["sm", "md", "lg"] as const
 
     sizes.forEach((size) => {
-      const { toJSON } = render(<IconAvatar icon={Placeholder} size={size} />);
+      const { toJSON } = render(<IconAvatar icon={Placeholder} size={size} />)
 
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-});
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+})

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

@@ -1,18 +1,19 @@
-import { View } from "react-native";
-import { cn } from "../../../lib/utils";
-import { Icon, IconType } from "../../Icon";
+import { View } from "react-native"
+
+import { cn } from "../../../lib/utils"
+import { Icon, IconType } from "../../Icon"
 
 type Props = {
-  icon: IconType;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-};
+  icon: IconType
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
 
 const sizes = {
   sm: "h-6 w-6 rounded-sm",
   md: "h-9 w-9 rounded-md",
   lg: "h-10 w-10 rounded-lg",
-};
+}
 
 export const IconAvatar = ({ icon, size = "md", className }: Props) => {
   return (
@@ -20,12 +21,12 @@ export const IconAvatar = ({ icon, size = "md", className }: Props) => {
       className={cn(
         "flex aspect-square items-center justify-center border border-solid border-f1-border-secondary",
         sizes[size],
-        className,
+        className
       )}
     >
       <Icon icon={icon} size={size} className="text-f1-foreground-secondary" />
     </View>
-  );
-};
+  )
+}
 
-IconAvatar.displayName = "IconAvatar";
+IconAvatar.displayName = "IconAvatar"

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

@@ -1,8 +1,10 @@
-import { View } from "react-native";
-import { tv, type VariantProps } from "tailwind-variants";
-import { IconType, applyIconInterop } from "../../Icon";
-import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg";
-import { ModuleId, modules } from "./modules";
+import { View } from "react-native"
+import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg"
+import { tv, type VariantProps } from "tailwind-variants"
+
+import { IconType, applyIconInterop } from "../../Icon"
+
+import { ModuleId, modules } from "./modules"
 
 const moduleAvatarVariants = tv({
   base: "relative flex shrink-0 items-center justify-center",
@@ -17,7 +19,7 @@ const moduleAvatarVariants = tv({
   defaultVariants: {
     size: "md",
   },
-});
+})
 
 const iconContainerVariants = tv({
   base: "absolute inset-0 items-center justify-center z-10",
@@ -32,7 +34,7 @@ const iconContainerVariants = tv({
   defaultVariants: {
     size: "md",
   },
-});
+})
 
 const iconSizeVariants = tv({
   base: "relative text-f1-foreground-inverse drop-shadow",
@@ -47,32 +49,32 @@ const iconSizeVariants = tv({
   defaultVariants: {
     size: "md",
   },
-});
+})
 
 export type ModuleAvatarProps = VariantProps<typeof moduleAvatarVariants> &
   (
     | {
-        module: ModuleId;
+        module: ModuleId
       }
     | {
         /**
          * @deprecated This component should only render module related icons, not arbitrary icons. The `icon` property will be removed soon. Use the `module` prop instead.
          */
-        icon: IconType;
+        icon: IconType
       }
-  );
+  )
 
 const squirclePath =
-  "M50,0 C43,0 36,0 30,1 23,2 17,5 12,9 5,16 1,25 0,36 0,43 0,57 0,64 1,75 5,84 12,91 17,95 23,98 30,99 36,100 43,100 50,100 57,100 64,100 70,99 77,98 83,95 88,91 95,84 99,75 100,64 100,57 100,43 100,36 99,25 95,16 88,9 83,5 77,2 70,1 64,0 57,0 50,0";
+  "M50,0 C43,0 36,0 30,1 23,2 17,5 12,9 5,16 1,25 0,36 0,43 0,57 0,64 1,75 5,84 12,91 17,95 23,98 30,99 36,100 43,100 50,100 57,100 64,100 70,99 77,98 83,95 88,91 95,84 99,75 100,64 100,57 100,43 100,36 99,25 95,16 88,9 83,5 77,2 70,1 64,0 57,0 50,0"
 
 export const ModuleAvatar = ({ size = "md", ...props }: ModuleAvatarProps) => {
   const IconComponent =
     "icon" in props
       ? applyIconInterop(props.icon)
-      : applyIconInterop(modules[props.module]);
+      : applyIconInterop(modules[props.module])
 
-  const code = Math.random().toString(36).substring(2, 15);
-  const gradientId = `gradient-${code}`;
+  const code = Math.random().toString(36).substring(2, 15)
+  const gradientId = `gradient-${code}`
 
   return (
     <View className={moduleAvatarVariants({ size })} accessibilityRole="image">
@@ -100,7 +102,7 @@ export const ModuleAvatar = ({ size = "md", ...props }: ModuleAvatarProps) => {
         <IconComponent className={iconSizeVariants({ size })} />
       </View>
     </View>
-  );
-};
+  )
+}
 
-ModuleAvatar.displayName = "IconAvatar";
+ModuleAvatar.displayName = "IconAvatar"

package/src/components/Avatars/ModuleAvatar/modules.ts

@@ -1,4 +1,4 @@
-import { ModuleIcons } from "../../../icons";
+import { ModuleIcons } from "../../../icons"
 
 export const modules = {
   "ai-reports": ModuleIcons.Reports,
@@ -59,6 +59,6 @@ export const modules = {
   "time-tracking": ModuleIcons.TimeTracking,
   timeoff: ModuleIcons.TimeOff,
   workflows: ModuleIcons.Workflows,
-} as const;
+} as const
 
-export type ModuleId = keyof typeof modules;
+export type ModuleId = keyof typeof modules

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

@@ -1,13 +1,14 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { PersonAvatar } from "./";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { PersonAvatar } from "./"
 
 describe("PersonAvatar", () => {
   it("Snapshot", () => {
     const { toJSON } = render(
-      <PersonAvatar firstName="Daniel" lastName="Maza" />,
-    );
+      <PersonAvatar firstName="Daniel" lastName="Maza" />
+    )
 
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

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

@@ -1,16 +1,17 @@
-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>
 
 export type PersonAvatarProps = {
-  firstName: string;
-  lastName: string;
-  src?: string;
-  size?: BaseAvatarProps["size"];
-  badge?: AvatarBadge;
-} & Pick<BaseAvatarProps, "aria-label" | "aria-labelledby">;
+  firstName: string
+  lastName: string
+  src?: string
+  size?: BaseAvatarProps["size"]
+  badge?: AvatarBadge
+} & Pick<BaseAvatarProps, "aria-label" | "aria-labelledby">
 
 export const PersonAvatar = ({
   firstName,
@@ -32,7 +33,7 @@ export const PersonAvatar = ({
       aria-labelledby={ariaLabelledby}
       badge={badge}
     />
-  );
-};
+  )
+}
 
-PersonAvatar.displayName = "PersonAvatar";
+PersonAvatar.displayName = "PersonAvatar"

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

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

package/src/components/Avatars/TeamAvatar/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 TeamAvatar = ({
   name,
@@ -30,7 +31,7 @@ export const TeamAvatar = ({
       aria-labelledby={ariaLabelledby}
       badge={badge}
     />
-  );
-};
+  )
+}
 
-TeamAvatar.displayName = "TeamAvatar";
+TeamAvatar.displayName = "TeamAvatar"

package/src/components/Avatars/exports.ts

@@ -1,9 +1,9 @@
-export * from "./Avatar";
-export * from "./CompanyAvatar";
-export * from "./DateAvatar";
-export * from "./EmojiAvatar";
-export * from "./FileAvatar";
-export * from "./IconAvatar";
-export * from "./ModuleAvatar";
-export * from "./PersonAvatar";
-export * from "./TeamAvatar";
+export * from "./Avatar"
+export * from "./CompanyAvatar"
+export * from "./DateAvatar"
+export * from "./EmojiAvatar"
+export * from "./FileAvatar"
+export * from "./IconAvatar"
+export * from "./ModuleAvatar"
+export * from "./PersonAvatar"
+export * from "./TeamAvatar"

package/src/components/Avatars/types.ts

@@ -1,15 +1,16 @@
-import { BadgeProps } from "../Badge";
-import { ModuleId } from "./ModuleAvatar/modules";
+import { BadgeProps } from "../Badge"
+
+import { ModuleId } from "./ModuleAvatar/modules"
 
 export type AvatarBadge = (
   | {
-      type: "module";
-      module: ModuleId;
+      type: "module"
+      module: ModuleId
     }
   | {
-      type: Exclude<BadgeProps["type"], undefined>;
-      icon: BadgeProps["icon"];
+      type: Exclude<BadgeProps["type"], undefined>
+      icon: BadgeProps["icon"]
     }
 ) & {
-  tooltip?: string;
-};
+  tooltip?: string
+}