@factorialco/f0-react-native 0.19.1

package/src/components/experimental/Lists/DetailsItem/index.spec.tsx

@@ -0,0 +1,81 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { Content, DetailsItem } from ".";
+
+jest.mock("expo-clipboard", () => ({
+  setString: jest.fn(),
+  getString: jest.fn(),
+}));
+
+describe("DetailsItem", () => {
+  it("Snapshot type item", () => {
+    const content: Content = {
+      type: "item",
+      text: "alicia.keys@factorial.co",
+      action: {
+        type: "copy",
+      },
+    };
+
+    const { toJSON } = render(<DetailsItem title="Email" content={content} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot type person", () => {
+    const content: Content = {
+      type: "person",
+      firstName: "Daniel",
+      lastName: "Maza",
+      action: {
+        type: "copy",
+      },
+    };
+
+    const { toJSON } = render(
+      <DetailsItem title="Datos personales" content={content} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot type company", () => {
+    const content: Content = {
+      type: "company",
+      avatarUrl: "https://avatars.githubusercontent.com/u/21041797?s=200&v=4",
+      name: "factorial",
+      action: {
+        type: "copy",
+      },
+    };
+
+    const { toJSON } = render(
+      <DetailsItem title="Company" content={content} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot type team", () => {
+    const content: Content = {
+      type: "team",
+      name: "factorial",
+      action: {
+        type: "copy",
+      },
+    };
+
+    const { toJSON } = render(<DetailsItem title="Team" content={content} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot type dot-tag", () => {
+    const content: Content = {
+      type: "dot-tag",
+      text: "Activity",
+      customColor: "#07A2AD",
+    };
+
+    const { toJSON } = render(
+      <DetailsItem title="Dot Tag" content={content} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,68 @@
+import { ComponentProps, FC } from "react";
+import { DataList } from "../DataList";
+import { cn } from "../../../../lib/utils";
+import { View } from "react-native";
+
+export type Content =
+  | (ComponentProps<typeof DataList.Item> & {
+      type: "item";
+    })
+  | (ComponentProps<typeof DataList.PersonItem> & {
+      type: "person";
+    })
+  | (ComponentProps<typeof DataList.CompanyItem> & {
+      type: "company";
+    })
+  | (ComponentProps<typeof DataList.TeamItem> & {
+      type: "team";
+    })
+  | (ComponentProps<typeof DataList.DotTagItem> & {
+      type: "dot-tag";
+    });
+
+export interface DetailsItemType {
+  title: string;
+  content: Content | Content[];
+  spacingAtTheBottom?: boolean;
+  isHorizontalItem?: boolean;
+  tableView?: boolean;
+}
+
+const ItemContent: FC<{ content: Content }> = ({ content }) => (
+  <>
+    {content.type === "person" && <DataList.PersonItem {...content} />}
+    {content.type === "item" && <DataList.Item {...content} />}
+    {content.type === "team" && <DataList.TeamItem {...content} />}
+    {content.type === "company" && <DataList.CompanyItem {...content} />}
+    {content.type === "dot-tag" && <DataList.DotTagItem {...content} />}
+  </>
+);
+
+export const DetailsItem = ({
+  title,
+  content,
+  isHorizontalItem = false,
+  tableView = false,
+  spacingAtTheBottom,
+}: DetailsItemType) => {
+  const contentArray = Array.isArray(content) ? content : [content];
+
+  return (
+    <View
+      className={cn(
+        "flex gap-0.5",
+        spacingAtTheBottom && !isHorizontalItem && "pb-3",
+      )}
+    >
+      <DataList
+        label={title}
+        isHorizontalItem={isHorizontalItem}
+        tableView={tableView}
+      >
+        {contentArray.map((c, i) => (
+          <ItemContent key={i} content={c} />
+        ))}
+      </DataList>
+    </View>
+  );
+};