@factorialco/f0-react-native 0.19.1

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

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+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">;
+
+export const CompanyAvatar = ({
+  name,
+  src,
+  size,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  badge,
+}: Props) => {
+  return (
+    <BaseAvatar
+      type="base"
+      name={name}
+      src={src}
+      size={size}
+      color="viridian"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      badge={badge}
+    />
+  );
+};
+
+CompanyAvatar.displayName = "CompanyAvatar";

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateAvatar Snapshot 1`] = `
+<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="pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight dark:text-f1-foreground-inverse-secondary"
+  >
+    Jan
+  </Text>
+  <Text
+    className="flex items-center justify-center text-lg font-medium leading-tight text-f1-foreground"
+  >
+    1
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,12 @@
+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} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { View, Text } from "react-native";
+import { getAbbreviateMonth, getDayOfMonth } from "../../../lib/date";
+
+type Props = {
+  date: Date;
+};
+
+export const DateAvatar = ({ date }: Props) => {
+  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="pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight dark:text-f1-foreground-inverse-secondary">
+        {month}
+      </Text>
+      <Text className="flex items-center justify-center text-lg font-medium leading-tight text-f1-foreground">
+        {dateDay}
+      </Text>
+    </View>
+  );
+};

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`] = `
+<View
+  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"
+  >
+    test
+  </Text>
+</View>
+`;
+
+exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`] = `
+<View
+  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"
+  >
+    test
+  </Text>
+</View>
+`;
+
+exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 3`] = `
+<View
+  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"
+  >
+    test
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,15 @@
+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;
+
+    sizes.forEach((size) => {
+      const { toJSON } = render(<EmojiAvatar emoji="test" size={size} />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,37 @@
+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;
+};
+
+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;
+
+export const EmojiAvatar = ({ emoji, size = "md", className }: Props) => {
+  return (
+    <View
+      className={cn(
+        className,
+        sizes[size],
+        "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";

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

@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileAvatar Snapshot - different file types 1`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-accent"
+      >
+        PDF
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 2`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-info"
+      >
+        IMG
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 3`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-info"
+      >
+        DOC
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 4`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-positive"
+      >
+        XLS
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 5`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-warning"
+      >
+        PPT
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 6`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-secondary"
+      >
+        TXT
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 7`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-info"
+      >
+        VID
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 8`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-accent"
+      >
+        AUD
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 9`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-warning"
+      >
+        ZIP
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 10`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-positive"
+      >
+        CSV
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 11`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-accent"
+      >
+        HTM
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 12`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground-secondary"
+      >
+        MD
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`FileAvatar Snapshot - different file types 13`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+    >
+      <Text
+        className="font-semibold text-sm text-f1-foreground"
+      >
+        FIL
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { FileAvatar } from "./";
+
+describe("FileAvatar", () => {
+  it("Snapshot - different file types", () => {
+    const fileTypes = [
+      { name: "document.pdf", type: "application/pdf" },
+      { name: "image.jpg", type: "image/jpeg" },
+      {
+        name: "document.docx",
+        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      },
+      {
+        name: "spreadsheet.xlsx",
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      },
+      {
+        name: "presentation.pptx",
+        type: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+      },
+      { name: "text.txt", type: "text/plain" },
+      { name: "video.mp4", type: "video/mp4" },
+      { name: "audio.mp3", type: "audio/mpeg" },
+      { name: "archive.zip", type: "application/zip" },
+      { name: "data.csv", type: "csv" },
+      { 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();
+    });
+  });
+});

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

@@ -0,0 +1,117 @@
+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";
+
+type BaseAvatarProps = ComponentProps<typeof BaseAvatar>;
+
+type Props = {
+  file: FileLike;
+  className?: string;
+  size?: BaseAvatarProps["size"];
+  badge?: AvatarBadge;
+};
+
+const textSizes = {
+  xsmall: "text-xs",
+  small: "text-xs",
+  medium: "text-sm",
+  large: "text-md",
+  xlarge: "text-2xl",
+};
+
+const getAvatarSize = (
+  size: BaseAvatarProps["size"],
+): ModuleAvatarProps["size"] | undefined => {
+  const sizeMap: Partial<
+    Record<
+      Exclude<BaseAvatarProps["size"], undefined>,
+      ModuleAvatarProps["size"]
+    >
+  > = {
+    xlarge: "lg",
+    large: "md",
+    small: "sm",
+  } as const;
+
+  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small;
+};
+
+const getBadgeSize = (
+  size: BaseAvatarProps["size"],
+): BadgeProps["size"] | undefined => {
+  const sizeMap: Partial<
+    Record<Exclude<BaseAvatarProps["size"], undefined>, BadgeProps["size"]>
+  > = {
+    xlarge: "lg",
+    large: "md",
+    small: "sm",
+  } as const;
+
+  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small;
+};
+export const FileAvatar = ({
+  file,
+  className,
+  size = "medium",
+  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 badgeContent = useMemo(
+    () =>
+      badge ? (
+        <>
+          {badge.type === "module" && (
+            <ModuleAvatar module={badge.module} size={moduleAvatarSize} />
+          )}
+          {badge.type !== "module" && (
+            <Badge type={badge.type} icon={badge.icon} size={badgeSize} />
+          )}
+        </>
+      ) : null,
+    [badge, badgeSize, moduleAvatarSize],
+  );
+
+  return (
+    <View
+      className={`inline-flex ${badge && badge.type === "module" ? "p-[3px]" : ""}`}
+    >
+      <View className="h-fit w-fit">
+        <Avatar
+          size={size}
+          className={cn(
+            "border border-solid border-f1-border-secondary bg-f1-background",
+            className,
+          )}
+          {...props}
+        >
+          <Text
+            className={cn(
+              "font-semibold text-f1-foreground-inverse/90",
+              textSizes[size],
+              fileColor,
+            )}
+          >
+            {initials}
+          </Text>
+        </Avatar>
+      </View>
+      {badge && (
+        <View className="absolute -bottom-0.5 -right-0.5">{badgeContent}</View>
+      )}
+    </View>
+  );
+};
+
+FileAvatar.displayName = "FileAvatar";