@factorialco/f0-react-native 0.19.1

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

@@ -0,0 +1,103 @@
+type FileTypeInfo = {
+  type: string;
+  color: string;
+};
+
+type FileLike = {
+  name: string;
+  type?: string;
+};
+
+const FILE_TYPE_MAP: Record<string, FileTypeInfo> = {
+  pdf: { type: "PDF", color: "text-f1-foreground-accent" },
+  image: { type: "IMG", color: "text-f1-foreground-info" },
+  doc: { type: "DOC", color: "text-f1-foreground-info" },
+  excel: { type: "XLS", color: "text-f1-foreground-positive" },
+  ppt: { type: "PPT", color: "text-f1-foreground-warning" },
+  txt: { type: "TXT", color: "text-f1-foreground-secondary" },
+  video: { type: "VID", color: "text-f1-foreground-info" },
+  audio: { type: "AUD", color: "text-f1-foreground-accent" },
+  archive: { type: "ZIP", color: "text-f1-foreground-warning" },
+  csv: { type: "CSV", color: "text-f1-foreground-positive" },
+  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",
+  image: "image",
+  word: "doc",
+  excel: "excel",
+  powerpoint: "ppt",
+  text: "txt",
+  video: "video",
+  audio: "audio",
+  archive: "archive",
+  csv: "csv",
+  html: "html",
+  markdown: "markdown",
+  zip: "archive",
+  rar: "archive",
+  tar: "archive",
+  gz: "archive",
+  "7z": "archive",
+};
+
+const EXTENSION_MAP: Record<string, keyof typeof FILE_TYPE_MAP> = {
+  pdf: "pdf",
+  jpg: "image",
+  jpeg: "image",
+  png: "image",
+  gif: "image",
+  svg: "image",
+  doc: "doc",
+  docx: "doc",
+  xls: "excel",
+  xlsx: "excel",
+  csv: "csv",
+  ppt: "ppt",
+  pptx: "ppt",
+  txt: "txt",
+  mp4: "video",
+  mov: "video",
+  mkv: "video",
+  avi: "video",
+  webm: "video",
+  mp3: "audio",
+  wav: "audio",
+  flac: "audio",
+  ogg: "audio",
+  zip: "archive",
+  rar: "archive",
+  tar: "archive",
+  gz: "archive",
+  "7z": "archive",
+  html: "html",
+  htm: "html",
+  md: "markdown",
+  markdown: "markdown",
+};
+
+const getFileTypeInfo = (file: FileLike): FileTypeInfo => {
+  const mimeType = file.type?.toLowerCase() ?? "";
+
+  const matchedMimeKey = Object.keys(MIME_MATCH_MAP).find((key) =>
+    mimeType.includes(key),
+  );
+
+  if (matchedMimeKey) {
+    return FILE_TYPE_MAP[MIME_MATCH_MAP[matchedMimeKey]];
+  }
+
+  const extension = file.name.toLowerCase().split(".").pop();
+
+  if (extension && EXTENSION_MAP[extension]) {
+    return FILE_TYPE_MAP[EXTENSION_MAP[extension]];
+  }
+
+  return FILE_TYPE_MAP.default;
+};
+
+export { getFileTypeInfo };
+export type { FileTypeInfo, FileLike };

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

@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconAvatar Snapshot - different sizes 1`] = `
+<View
+  className="flex aspect-square items-center justify-center border border-solid border-f1-border-secondary h-6 w-6 rounded-sm"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="100%"
+    bbWidth="100%"
+    className="shrink-0 w-4 h-4 stroke-sm text-f1-foreground-secondary"
+    fill="none"
+    focusable={false}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": "100%",
+          "width": "100%",
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGCircle
+        cx={12}
+        cy={12}
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "stroke",
+          ]
+        }
+        r={8}
+        stroke={
+          {
+            "type": 2,
+          }
+        }
+      />
+      <RNSVGPath
+        d="m17.5 6.5-11 11M17.5 17.5l-11-11"
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "stroke",
+            "strokeLinejoin",
+          ]
+        }
+        stroke={
+          {
+            "type": 2,
+          }
+        }
+        strokeLinejoin={1}
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
+
+exports[`IconAvatar Snapshot - different sizes 2`] = `
+<View
+  className="flex aspect-square items-center justify-center border border-solid border-f1-border-secondary h-9 w-9 rounded-md"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="100%"
+    bbWidth="100%"
+    className="shrink-0 w-5 h-5 stroke-md text-f1-foreground-secondary"
+    fill="none"
+    focusable={false}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": "100%",
+          "width": "100%",
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGCircle
+        cx={12}
+        cy={12}
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "stroke",
+          ]
+        }
+        r={8}
+        stroke={
+          {
+            "type": 2,
+          }
+        }
+      />
+      <RNSVGPath
+        d="m17.5 6.5-11 11M17.5 17.5l-11-11"
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "stroke",
+            "strokeLinejoin",
+          ]
+        }
+        stroke={
+          {
+            "type": 2,
+          }
+        }
+        strokeLinejoin={1}
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
+
+exports[`IconAvatar Snapshot - different sizes 3`] = `
+<View
+  className="flex aspect-square items-center justify-center border border-solid border-f1-border-secondary h-10 w-10 rounded-lg"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="100%"
+    bbWidth="100%"
+    className="shrink-0 w-6 h-6 stroke-lg text-f1-foreground-secondary"
+    fill="none"
+    focusable={false}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": "100%",
+          "width": "100%",
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGCircle
+        cx={12}
+        cy={12}
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "stroke",
+          ]
+        }
+        r={8}
+        stroke={
+          {
+            "type": 2,
+          }
+        }
+      />
+      <RNSVGPath
+        d="m17.5 6.5-11 11M17.5 17.5l-11-11"
+        fill={
+          {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "stroke",
+            "strokeLinejoin",
+          ]
+        }
+        stroke={
+          {
+            "type": 2,
+          }
+        }
+        strokeLinejoin={1}
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;

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

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

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

@@ -0,0 +1,31 @@
+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;
+};
+
+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 (
+    <View
+      className={cn(
+        "flex aspect-square items-center justify-center border border-solid border-f1-border-secondary",
+        sizes[size],
+        className,
+      )}
+    >
+      <Icon icon={icon} size={size} className="text-f1-foreground-secondary" />
+    </View>
+  );
+};
+
+IconAvatar.displayName = "IconAvatar";

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

@@ -0,0 +1,106 @@
+import { View } from "react-native";
+import { cva, type VariantProps } from "cva";
+import { IconType, applyIconInterop } from "../../Icon";
+import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg";
+import { ModuleId, modules } from "./modules";
+
+const moduleAvatarVariants = cva({
+  base: "relative flex shrink-0 items-center justify-center",
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-10 w-10",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const iconContainerVariants = cva({
+  base: "absolute inset-0 items-center justify-center z-10",
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-10 w-10",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const iconSizeVariants = cva({
+  base: "relative text-f1-foreground-inverse drop-shadow",
+  variants: {
+    size: {
+      sm: "h-[14px] w-[14px]",
+      md: "h-[18px] w-[18px]",
+      lg: "h-6 w-6",
+      xl: "h-8 w-8",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type ModuleAvatarProps = VariantProps<typeof moduleAvatarVariants> &
+  (
+    | {
+        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;
+      }
+  );
+
+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";
+
+export const ModuleAvatar = ({ size = "md", ...props }: ModuleAvatarProps) => {
+  const IconComponent =
+    "icon" in props
+      ? applyIconInterop(props.icon)
+      : applyIconInterop(modules[props.module]);
+
+  const code = Math.random().toString(36).substring(2, 15);
+  const gradientId = `gradient-${code}`;
+
+  return (
+    <View className={moduleAvatarVariants({ size })} accessibilityRole="image">
+      <Svg
+        viewBox="0 0 100 100"
+        className="absolute h-full w-full"
+        preserveAspectRatio="none"
+      >
+        <Defs>
+          <LinearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop offset="0%" stopColor="#FF355E" />
+            <Stop offset="44%" stopColor="#FF355E" />
+            <Stop offset="100%" stopColor="#D62D4F" />
+          </LinearGradient>
+        </Defs>
+        <Path
+          d={squirclePath}
+          fill={`url(#${gradientId})`}
+          stroke="white"
+          strokeWidth={10}
+          transform="scale(0.95) translate(2.5 2.5)"
+        />
+      </Svg>
+      <View className={iconContainerVariants({ size })}>
+        <IconComponent className={iconSizeVariants({ size })} />
+      </View>
+    </View>
+  );
+};
+
+ModuleAvatar.displayName = "IconAvatar";

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

@@ -0,0 +1,64 @@
+import { ModuleIcons } from "../../../icons";
+
+export const modules = {
+  "ai-reports": ModuleIcons.Reports,
+  analytics: ModuleIcons.Reports,
+  ats: ModuleIcons.Recruitment,
+  benefits: ModuleIcons.Benefits,
+  billing: ModuleIcons.Finance,
+  calendar: ModuleIcons.Calendar,
+  cards: ModuleIcons.Cards,
+  "clock-in": ModuleIcons.ClockIn,
+  company_attendance: ModuleIcons.TimeTracking,
+  company_documents: ModuleIcons.Documents,
+  company_projects: ModuleIcons.Projects,
+  company_trainings: ModuleIcons.Trainings,
+  compensations: ModuleIcons.Payroll,
+  discover: ModuleIcons.Discover,
+  documents: ModuleIcons.Documents,
+  employee_attendance: ModuleIcons.ClockIn,
+  employees: ModuleIcons.Organization,
+  engagement: ModuleIcons.Engagement,
+  engagement_insights: ModuleIcons.Engagement,
+  my_surveys: ModuleIcons.Engagement,
+  "finance-accounting": ModuleIcons.Finance,
+  "finance-sales": ModuleIcons.Sales,
+  "finance-spending": ModuleIcons.Spending,
+  "finance-treasury": ModuleIcons.Treasury,
+  "finance-workspace": ModuleIcons.Reports,
+  goals: ModuleIcons.Goals,
+  home: ModuleIcons.Home,
+  hub: ModuleIcons.Hub,
+  kudos: ModuleIcons.Kudos,
+  my_benefits: ModuleIcons.Benefits,
+  my_documents: ModuleIcons.MyDocuments,
+  my_projects: ModuleIcons.Projects,
+  my_spending: ModuleIcons.Spending,
+  my_trainings: ModuleIcons.Trainings,
+  "new-trainings": ModuleIcons.Trainings,
+  notifications: ModuleIcons.Inbox,
+  inbox: ModuleIcons.Inbox,
+  overviews: ModuleIcons.Overviews,
+  payroll_bundle: ModuleIcons.Payroll,
+  performance_v2: ModuleIcons.Performance,
+  performance: ModuleIcons.Performance,
+  playground: ModuleIcons.Home,
+  processes: ModuleIcons.Workflows,
+  profile: ModuleIcons.Profile,
+  project_management: ModuleIcons.Projects,
+  reports: ModuleIcons.Reports,
+  settings: ModuleIcons.Settings,
+  personal_settings: ModuleIcons.Settings,
+  shift_management: ModuleIcons.Shifts,
+  shifts: ModuleIcons.Shifts,
+  social: ModuleIcons.Social,
+  software: ModuleIcons.Software,
+  space_control: ModuleIcons.Spaces,
+  talent_analytics: ModuleIcons.Performance,
+  tasks: ModuleIcons.Tasks,
+  "time-tracking": ModuleIcons.TimeTracking,
+  timeoff: ModuleIcons.TimeOff,
+  workflows: ModuleIcons.Workflows,
+} as const;
+
+export type ModuleId = keyof typeof modules;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PersonAvatar Snapshot 1`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      aria-hidden={true}
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded-full bg-[hsl(theme(colors.flubber.50))]"
+      data-a11y-color-contrast-ignore={true}
+      role="img"
+    >
+      <Text
+        className="text-f1-foreground-inverse/90 text-md"
+        data-a11y-color-contrast-ignore={true}
+      >
+        DM
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

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

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

@@ -0,0 +1,38 @@
+import { ComponentProps } from "react";
+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">;
+
+export const PersonAvatar = ({
+  firstName,
+  lastName,
+  src,
+  size,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  badge,
+}: PersonAvatarProps) => {
+  return (
+    <BaseAvatar
+      type="rounded"
+      name={[firstName, lastName]}
+      src={src}
+      size={size}
+      color="random"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      badge={badge}
+    />
+  );
+};
+
+PersonAvatar.displayName = "PersonAvatar";

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TeamAvatar Snapshot 1`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      aria-hidden={true}
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded bg-[hsl(theme(colors.smoke.50))]"
+      data-a11y-color-contrast-ignore={true}
+      role="img"
+    >
+      <Text
+        className="text-f1-foreground-inverse/90 text-md"
+        data-a11y-color-contrast-ignore={true}
+      >
+        FA
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

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