@factorialco/f0-react-native 0.19.1

package/src/components/Avatars/TeamAvatar/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 TeamAvatar = ({
+  name,
+  src,
+  size,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  badge,
+}: Props) => {
+  return (
+    <BaseAvatar
+      type="base"
+      name={name}
+      src={src}
+      size={size}
+      color="random"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      badge={badge}
+    />
+  );
+};
+
+TeamAvatar.displayName = "TeamAvatar";

package/src/components/Avatars/exports.ts

@@ -0,0 +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";

package/src/components/Avatars/types.ts

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

package/src/components/Badge/index.tsx

@@ -0,0 +1,47 @@
+import { cva, type VariantProps } from "cva";
+import { Icon, IconType } from "../Icon";
+
+const badgeVariants = cva({
+  base: "flex shrink-0 items-center justify-center rounded-full",
+  variants: {
+    type: {
+      neutral: "bg-transparent text-f1-icon",
+      highlight: "text-f1-special-highlight",
+      positive: "bg-f1-background-positive-bold text-f1-foreground-inverse",
+      critical: "bg-f1-icon-critical text-f1-foreground-inverse",
+      warning: "bg-f1-background-warning-bold text-f1-foreground-inverse",
+    },
+    size: {
+      xs: "h-2.5 w-2.5",
+      sm: "h-3 w-3",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+    },
+  },
+  defaultVariants: {
+    type: "neutral",
+    size: "md",
+  },
+});
+
+const iconSizes = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+} as const;
+
+export interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  icon: IconType;
+  size?: keyof typeof iconSizes;
+}
+
+export const Badge = ({ type, size = "md", icon }: BadgeProps) => {
+  return (
+    <Icon
+      className={badgeVariants({ type, size })}
+      icon={icon}
+      size={iconSizes[size]}
+    />
+  );
+};

package/src/components/Button/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,517 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Snapshot - critical variant 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-secondary border border-f1-border h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-critical"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - default button 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - different sizes 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-6 rounded-sm gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - different sizes 2`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - different sizes 3`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-10 rounded-md gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - disabled state 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button, disabled"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded opacity-50 gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - loading state 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button, disabled, loading"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": true,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded opacity-50 gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - outline variant 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-inverse-secondary border border-f1-border h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - round button with hidden label 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded aspect-square p-0"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  />
+</View>
+`;
+
+exports[`Button Snapshot - with emoji 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      👋
+    </Text>
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Button Snapshot - with icon 1`] = `
+<View
+  className="flex item-start"
+>
+  <View
+    accessibilityLabel="Test Button"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": false,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="text-base font-medium text-f1-foreground-inverse"
+    >
+      Test Button
+    </Text>
+  </View>
+</View>
+`;