@factorialco/f0-react-native 0.23.0 → 0.24.0

package/src/components/Tags/RawTag/index.spec.tsx

@@ -1,19 +1,21 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { RawTag } from ".";
-import { AppIcons } from "../../../icons";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { AppIcons } from "../../../icons"
+
+import { RawTag } from "."
 
 describe("RawTag", () => {
   it("Snapshot", () => {
-    const { toJSON } = render(<RawTag text="test" />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<RawTag text="test" />)
+    expect(toJSON()).toMatchSnapshot()
+  })
   it("Snapshot with icon", () => {
-    const { toJSON } = render(<RawTag text="test" icon={AppIcons.MoneyBag} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
+    const { toJSON } = render(<RawTag text="test" icon={AppIcons.MoneyBag} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
   it("Snapshot noBorder", () => {
-    const { toJSON } = render(<RawTag text="test" noBorder={true} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
+    const { toJSON } = render(<RawTag text="test" noBorder={true} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

package/src/components/Tags/RawTag/index.tsx

@@ -1,15 +1,15 @@
-import { BaseTag } from "../BaseTag";
-import { useTextFormatEnforcer } from "../../../lib/text";
-import { Icon, IconType } from "../../Icon";
-import { cn } from "../../../lib/utils";
+import { useTextFormatEnforcer } from "../../../lib/text"
+import { cn } from "../../../lib/utils"
+import { Icon, IconType } from "../../Icon"
+import { BaseTag } from "../BaseTag"
 
 export type RawTagProps = {
-  text?: string;
-  additionalAccesibleText?: string;
-  icon?: IconType;
-  noBorder?: boolean;
-  className?: string;
-};
+  text?: string
+  additionalAccesibleText?: string
+  icon?: IconType
+  noBorder?: boolean
+  className?: string
+}
 
 export const RawTag = ({
   text,
@@ -18,13 +18,13 @@ export const RawTag = ({
   noBorder,
   className,
 }: RawTagProps) => {
-  useTextFormatEnforcer(text, { disallowEmpty: true });
+  useTextFormatEnforcer(text, { disallowEmpty: true })
 
   return (
     <BaseTag
       classNameContainer={cn(
         !noBorder && "border border-solid border-f1-border-secondary",
-        className,
+        className
       )}
       classNameText="text-f1-foreground"
       left={
@@ -35,7 +35,7 @@ export const RawTag = ({
       text={text}
       additionalAccesibleText={additionalAccesibleText}
     />
-  );
-};
+  )
+}
 
-RawTag.displayName = "RawTag";
+RawTag.displayName = "RawTag"

package/src/components/Tags/Tag.tsx

@@ -1,32 +1,33 @@
-import { ComponentProps, ReactNode } from "react";
-import { AlertTag } from "./AlertTab";
+import { ComponentProps, ReactNode } from "react"
 
-type AlertTagProps = ComponentProps<typeof AlertTag>;
+import { AlertTag } from "./AlertTab"
+
+type AlertTagProps = ComponentProps<typeof AlertTag>
 
 // Base interface for optional tooltip description
 interface WithTooltipDescription {
   /**
    * Optional description to show in the tooltip
    */
-  description?: string;
+  description?: string
 }
 
 // Base type for all tag variants
-type BaseTag<T extends { type: string }> = T & WithTooltipDescription;
+type BaseTag<T extends { type: string }> = T & WithTooltipDescription
 
-export type TagVariant = BaseTag<{ type: "alert" } & AlertTagProps>;
+export type TagVariant = BaseTag<{ type: "alert" } & AlertTagProps>
 
 const tagComponent = (tag: TagVariant): ReactNode | undefined => {
-  const { type } = tag;
-  if (type === "alert") return <AlertTag {...tag} />;
+  const { type } = tag
+  if (type === "alert") return <AlertTag {...tag} />
 
-  return undefined;
-};
+  return undefined
+}
 
 export const Tag = ({ tag }: { tag: TagVariant }): ReactNode => {
-  const renderTag = tagComponent(tag);
+  const renderTag = tagComponent(tag)
 
-  if (!renderTag) return "Invalid tag type";
+  if (!renderTag) return "Invalid tag type"
 
-  return renderTag;
-};
+  return renderTag
+}

package/src/components/Tags/exports.ts

@@ -1,3 +1,3 @@
-export * from "./AlertTab";
-export * from "./DotTag";
-export * from "./RawTag";
+export * from "./AlertTab"
+export * from "./DotTag"
+export * from "./RawTag"

package/src/components/__tests__/ExampleComponent.spec.tsx

@@ -1,16 +1,17 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { ExampleComponent } from "../ExampleComponent";
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { ExampleComponent } from "../ExampleComponent"
 
 describe("ExampleComponent", () => {
   it("renders correctly with default text", () => {
-    const { getByText } = render(<ExampleComponent />);
-    expect(getByText("Hello World")).toBeTruthy();
-  });
+    const { getByText } = render(<ExampleComponent />)
+    expect(getByText("Hello World")).toBeTruthy()
+  })
 
   it("renders correctly with custom text", () => {
-    const customText = "Custom Hello Text";
-    const { getByText } = render(<ExampleComponent text={customText} />);
-    expect(getByText(customText)).toBeTruthy();
-  });
-});
+    const customText = "Custom Hello Text"
+    const { getByText } = render(<ExampleComponent text={customText} />)
+    expect(getByText(customText)).toBeTruthy()
+  })
+})

package/src/components/experimental/Lists/DataList/ItemContainer.tsx

@@ -1,17 +1,20 @@
-import { ReactElement, ReactNode } from "react";
-import { CopyAction } from "./actions/CopyAction";
-import { cn } from "../../../../lib/utils";
-import { Icon, IconType } from "../../../Icon";
-import { View, Text } from "react-native";
-import { GenericAction } from "./actions/GenericAction";
-import { ActionType } from ".";
+import { ReactElement, ReactNode } from "react"
+import { View, Text } from "react-native"
+
+import { cn } from "../../../../lib/utils"
+import { Icon, IconType } from "../../../Icon"
+
+import { CopyAction } from "./actions/CopyAction"
+import { GenericAction } from "./actions/GenericAction"
+
+import { ActionType } from "."
 
 type ItemContainerProps = {
-  leftIcon?: IconType | (() => ReactElement);
-  action?: ActionType;
-  text: string;
-  className?: string;
-};
+  leftIcon?: IconType | (() => ReactElement)
+  action?: ActionType
+  text: string
+  className?: string
+}
 
 export const ItemContainer = (props: ItemContainerProps) => {
   const {
@@ -19,7 +22,7 @@ export const ItemContainer = (props: ItemContainerProps) => {
     leftIcon: LeftIcon,
     className,
     action = { type: "noop" },
-  } = props;
+  } = props
 
   return (
     <View className="flex rounded font-medium text-f1-foreground *:flex-1">
@@ -38,37 +41,37 @@ export const ItemContainer = (props: ItemContainerProps) => {
         </Text>
       </Action>
     </View>
-  );
-};
+  )
+}
 
 const Action = ({
   children,
   action,
   ...props
 }: {
-  className: string;
-  action: ActionType;
-  children: ReactNode;
+  className: string
+  action: ActionType
+  children: ReactNode
 }) => {
-  const type = action.type;
+  const type = action.type
   switch (type) {
     case "copy":
       return (
         <CopyAction {...action} {...props}>
           {children}
         </CopyAction>
-      );
+      )
     case "generic":
       return (
         <GenericAction {...action} {...props}>
           {children}
         </GenericAction>
-      );
+      )
     case "noop":
-      return <View {...props}>{children}</View>;
+      return <View {...props}>{children}</View>
     default: {
-      const _exhaustiveCheck: never = type;
-      return _exhaustiveCheck;
+      const _exhaustiveCheck: never = type
+      return _exhaustiveCheck
     }
   }
-};
+}

package/src/components/experimental/Lists/DataList/actions/CopyAction.tsx

@@ -1,45 +1,46 @@
-import { ReactNode, useEffect, useState } from "react";
-import { cn } from "../../../../../lib/utils";
-import { Icon } from "../../../../Icon";
-import { CheckCircle, LayersFront } from "../../../../../icons/app";
-import { Pressable, View } from "react-native";
-import * as Clipboard from "expo-clipboard";
-import { CopyActionType } from "..";
+import * as Clipboard from "expo-clipboard"
+import { ReactNode, useEffect, useState } from "react"
+import { Pressable, View } from "react-native"
 
-const COPIED_SHOWN_MS = 750;
+import { CopyActionType } from ".."
+import { CheckCircle, LayersFront } from "../../../../../icons/app"
+import { cn } from "../../../../../lib/utils"
+import { Icon } from "../../../../Icon"
+
+const COPIED_SHOWN_MS = 750
 
 export type CopyActionProps = {
-  children: ReactNode;
-} & CopyActionType;
+  children: ReactNode
+} & CopyActionType
 
 export const CopyAction = ({ text, children }: CopyActionProps) => {
-  const [copied, setCopied] = useState(false);
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     if (copied) {
-      const timer = setTimeout(() => setCopied(false), COPIED_SHOWN_MS);
+      const timer = setTimeout(() => setCopied(false), COPIED_SHOWN_MS)
 
-      return () => clearTimeout(timer);
+      return () => clearTimeout(timer)
     }
-  }, [copied]);
+  }, [copied])
 
   const copyHandler = async () => {
     try {
       if (text) {
-        await Clipboard.setStringAsync(text);
-        setCopied(true);
+        await Clipboard.setStringAsync(text)
+        setCopied(true)
       }
     } catch (error) {
-      void error;
+      void error
     }
-  };
+  }
   return (
     <Pressable
       aria-label={copied ? "Copied!" : `Copy ${text}`}
       className={cn(
         "group flex flex-row justify-between gap-1.5 rounded p-1.5",
         "transition-colors duration-300 active:bg-f1-background-secondary-hover",
-        copied ? "bg-f1-background-positive" : undefined,
+        copied ? "bg-f1-background-positive" : undefined
       )}
       onPress={copyHandler}
     >
@@ -51,7 +52,7 @@ export const CopyAction = ({ text, children }: CopyActionProps) => {
             size="md"
             aria-hidden={true}
             className={cn(
-              "col-start-1 col-end-2 row-start-1 row-end-2 text-f1-icon-bold",
+              "col-start-1 col-end-2 row-start-1 row-end-2 text-f1-icon-bold"
             )}
           />
         )}
@@ -62,11 +63,11 @@ export const CopyAction = ({ text, children }: CopyActionProps) => {
             aria-hidden={true}
             className={cn(
               "col-start-1 col-end-2 row-start-1 row-end-2",
-              "text-f1-icon-positive",
+              "text-f1-icon-positive"
             )}
           />
         )}
       </View>
     </Pressable>
-  );
-};
+  )
+}

package/src/components/experimental/Lists/DataList/actions/GenericAction.tsx

@@ -1,14 +1,15 @@
-import { memo, ReactNode } from "react";
-import { cn } from "../../../../../lib/utils";
-import { Icon } from "../../../../Icon";
-import { ChevronRight } from "../../../../../icons/app";
-import { Pressable, View } from "react-native";
-import { GenericActionType } from "..";
+import { memo, ReactNode } from "react"
+import { Pressable, View } from "react-native"
+
+import { GenericActionType } from ".."
+import { ChevronRight } from "../../../../../icons/app"
+import { cn } from "../../../../../lib/utils"
+import { Icon } from "../../../../Icon"
 
 export type GenericActionProps = {
-  children: ReactNode;
-  className?: string;
-} & GenericActionType;
+  children: ReactNode
+  className?: string
+} & GenericActionType
 
 export const GenericAction = memo(
   ({ children, className, ...props }: GenericActionProps) => {
@@ -17,9 +18,9 @@ export const GenericAction = memo(
         onPress={props.handlePress}
         {...props}
         className={cn(
-          "text-inherit group flex items-center justify-between gap-1.5 rounded p-1.5 text-f1-foreground",
+          "group flex items-center justify-between gap-1.5 rounded p-1.5 text-f1-foreground text-inherit",
           "no-underline hover:bg-f1-background-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-f1-border-selected-bold active:bg-f1-background-secondary-hover",
-          className,
+          className
         )}
       >
         <View className="flex flex-row items-center gap-1.5">{children}</View>
@@ -30,8 +31,8 @@ export const GenericAction = memo(
           className="text-f1-foreground"
         />
       </Pressable>
-    );
-  },
-);
+    )
+  }
+)
 
-GenericAction.displayName = "GenericAction";
+GenericAction.displayName = "GenericAction"

package/src/components/experimental/Lists/DataList/index.tsx

@@ -1,26 +1,27 @@
-import { ReactElement } from "react";
+import { ReactElement } from "react"
+import { View, Text } from "react-native"
 
-import { ItemContainer } from "./ItemContainer";
-import { cn } from "../../../../lib/utils";
-import { IconType } from "../../../Icon";
-import { PersonAvatar } from "../../../Avatars/PersonAvatar";
-import { CompanyAvatar } from "../../../Avatars/CompanyAvatar";
-import { TeamAvatar } from "../../../Avatars/TeamAvatar";
-import { DotTag, DotTagProps } from "../../../Tags/DotTag";
-import { View, Text } from "react-native";
+import { cn } from "../../../../lib/utils"
+import { CompanyAvatar } from "../../../Avatars/CompanyAvatar"
+import { PersonAvatar } from "../../../Avatars/PersonAvatar"
+import { TeamAvatar } from "../../../Avatars/TeamAvatar"
+import { IconType } from "../../../Icon"
+import { DotTag, DotTagProps } from "../../../Tags/DotTag"
+
+import { ItemContainer } from "./ItemContainer"
 
 export type DataListProps = {
-  children: ReactElement<Items>[] | ReactElement<Items>;
-  label?: string;
-  isHorizontalItem?: boolean;
-  tableView?: boolean;
-};
+  children: ReactElement<Items>[] | ReactElement<Items>
+  label?: string
+  isHorizontalItem?: boolean
+  tableView?: boolean
+}
 
 type Items =
   | typeof Item
   | typeof PersonItem
   | typeof CompanyItem
-  | typeof TeamItem;
+  | typeof TeamItem
 
 const _DataList = ({
   children,
@@ -33,15 +34,15 @@ const _DataList = ({
       className={cn(
         isHorizontalItem
           ? "flex min-h-12 flex-shrink flex-row"
-          : "min-w-32 max-w-72",
-        tableView ? "px-[8px] pb-[10px] pt-[14px]" : "",
+          : "max-w-72 min-w-32",
+        tableView ? "px-[8px] pt-[14px] pb-[10px]" : ""
       )}
     >
       {!!label && (
         <Text
           className={cn(
             "px-1.5 text-f1-foreground-secondary",
-            isHorizontalItem ? "mt-1.5 w-36 shrink-0" : "",
+            isHorizontalItem ? "mt-1.5 w-36 shrink-0" : ""
           )}
         >
           {label}
@@ -51,30 +52,30 @@ const _DataList = ({
         {children}
       </View>
     </View>
-  );
-};
+  )
+}
 
 export type ItemProps = {
-  text: string;
-  icon?: IconType;
-  action?: ActionType;
-};
+  text: string
+  icon?: IconType
+  action?: ActionType
+}
 
-export type ActionType = CopyActionType | GenericActionType | NoopActionType;
+export type ActionType = CopyActionType | GenericActionType | NoopActionType
 
 export type CopyActionType = {
-  type: "copy";
-  text?: string;
-};
+  type: "copy"
+  text?: string
+}
 
 export type GenericActionType = {
-  type: "generic";
-  handlePress?: () => void;
-};
+  type: "generic"
+  handlePress?: () => void
+}
 
 export type NoopActionType = {
-  type: "noop";
-};
+  type: "noop"
+}
 
 const Item = ({ text, icon, action }: ItemProps) => {
   return (
@@ -83,17 +84,17 @@ const Item = ({ text, icon, action }: ItemProps) => {
       leftIcon={icon}
       action={getInternalAction(action, text)}
     />
-  );
-};
+  )
+}
 
-type URL = string;
+type URL = string
 
 type EmployeeItemProps = {
-  firstName: string;
-  lastName: string;
-  avatarUrl?: URL;
-  action?: ActionType;
-};
+  firstName: string
+  lastName: string
+  avatarUrl?: URL
+  action?: ActionType
+}
 
 const PersonItem = ({
   action,
@@ -101,7 +102,7 @@ const PersonItem = ({
   firstName,
   lastName,
 }: EmployeeItemProps) => {
-  const fullName = `${firstName} ${lastName}`;
+  const fullName = `${firstName} ${lastName}`
   return (
     <ItemContainer
       leftIcon={() => (
@@ -115,14 +116,14 @@ const PersonItem = ({
       text={fullName}
       action={getInternalAction(action, fullName)}
     />
-  );
-};
+  )
+}
 
 type CompanyItemProps = {
-  name: string;
-  avatarUrl?: URL;
-  action?: ActionType;
-};
+  name: string
+  avatarUrl?: URL
+  action?: ActionType
+}
 
 const CompanyItem = ({ avatarUrl, name, action }: CompanyItemProps) => {
   return (
@@ -133,13 +134,13 @@ const CompanyItem = ({ avatarUrl, name, action }: CompanyItemProps) => {
       text={name}
       action={getInternalAction(action, name)}
     />
-  );
-};
+  )
+}
 
 type TeamItemProps = {
-  name: string;
-  action?: ActionType;
-};
+  name: string
+  action?: ActionType
+}
 
 const TeamItem = ({ action, name }: TeamItemProps) => {
   return (
@@ -148,18 +149,18 @@ const TeamItem = ({ action, name }: TeamItemProps) => {
       text={name}
       action={getInternalAction(action, name)}
     />
-  );
-};
+  )
+}
 
-type DotTagItemProps = DotTagProps;
+type DotTagItemProps = DotTagProps
 
 const DotTagItem = ({ ...props }: DotTagItemProps) => {
   return (
     <View className="flex items-start pt-1">
       <DotTag {...props} />
     </View>
-  );
-};
+  )
+}
 
 /**
  * convert simplified action type received from user to internal action format
@@ -168,14 +169,14 @@ const DotTagItem = ({ ...props }: DotTagItemProps) => {
  */
 const getInternalAction = (
   action: ActionType | undefined,
-  defaultCopyText: string,
+  defaultCopyText: string
 ): ActionType | undefined => {
   if (action && action.type === "copy") {
-    return { type: "copy", text: action.text ?? defaultCopyText };
+    return { type: "copy", text: action.text ?? defaultCopyText }
   }
 
-  return action;
-};
+  return action
+}
 
 export const DataList = Object.assign(_DataList, {
   Item,
@@ -183,4 +184,4 @@ export const DataList = Object.assign(_DataList, {
   PersonItem,
   TeamItem,
   DotTagItem,
-});
+})