@factorialco/f0-react-native 0.19.1

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

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { DotTag, dotTagColors } from ".";
+
+describe("RawTag", () => {
+  it("Snapshot", () => {
+    dotTagColors.map((color) => {
+      const { toJSON } = render(
+        <DotTag key={color} text="Label" color={color} />,
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+import { baseColors } from "@factorialco/f0-core";
+import { BaseTag } from "../BaseTag";
+import { useTextFormatEnforcer } from "../../../lib/text";
+import { View } from "react-native";
+
+export type NewColor = Extract<
+  keyof typeof baseColors,
+  | "viridian"
+  | "malibu"
+  | "yellow"
+  | "purple"
+  | "lilac"
+  | "barbie"
+  | "smoke"
+  | "army"
+  | "flubber"
+  | "indigo"
+  | "camel"
+>;
+
+export const dotTagColors = Object.keys(baseColors) as NewColor[];
+
+export type DotTagProps = {
+  text: string;
+} & ({ color: NewColor } | { customColor: string });
+
+export const DotTag = ({ text, ...props }: DotTagProps) => {
+  useTextFormatEnforcer(text, { disallowEmpty: true });
+
+  const backgroundColor =
+    "color" in props && props.color
+      ? `hsl(${baseColors[props.color][50]})`
+      : "customColor" in props && props.customColor;
+
+  if (!backgroundColor) return null;
+
+  return (
+    <BaseTag
+      classNameContainer="border border-solid border-f1-border-secondary"
+      left={
+        <View
+          className="m-1 aspect-square w-2 rounded-full"
+          style={{
+            backgroundColor,
+          }}
+          aria-hidden
+        />
+      }
+      text={text}
+    />
+  );
+};
+
+DotTag.displayName = "DotTag";

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

@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RawTag Snapshot 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-2 border border-solid border-f1-border-secondary"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
+    >
+      test
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`RawTag Snapshot noBorder 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-2"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
+    >
+      test
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`RawTag Snapshot with icon 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-1 border border-solid border-f1-border-secondary"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      aria-hidden={true}
+      bbHeight="100%"
+      bbWidth="100%"
+      className="shrink-0 w-4 h-4 stroke-sm text-f1-icon"
+      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",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="m5.55 14.121.714-4A5 5 0 0 1 11.186 6h1.628a5 5 0 0 1 4.922 4.121l.714 4A5 5 0 0 1 13.528 20h-3.056a5 5 0 0 1-4.922-5.879ZM10.326 2.5h3.348a1 1 0 0 1 .962 1.275L14 6h-4l-.636-2.225a1 1 0 0 1 .962-1.275Z"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+            ]
+          }
+          stroke={
+            {
+              "type": 2,
+            }
+          }
+        />
+        <RNSVGPath
+          d="M14 10h-2.5a1.5 1.5 0 0 0-1.5 1.5v0a1.5 1.5 0 0 0 1.5 1.5h1a1.5 1.5 0 0 1 1.5 1.5v0a1.5 1.5 0 0 1-1.5 1.5H10M12 16v1M12 9v1"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeLinecap",
+            ]
+          }
+          stroke={
+            {
+              "type": 2,
+            }
+          }
+          strokeLinecap={1}
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <Text
+      className="line-clamp-1 text-base font-medium text-f1-foreground"
+    >
+      test
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { RawTag } from ".";
+import { AppIcons } from "../../../icons";
+
+describe("RawTag", () => {
+  it("Snapshot", () => {
+    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();
+  });
+  it("Snapshot noBorder", () => {
+    const { toJSON } = render(<RawTag text="test" noBorder={true} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

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

package/src/components/Tags/Tag.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactNode } from "react";
+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;
+}
+
+// Base type for all tag variants
+type BaseTag<T extends { type: string }> = T & WithTooltipDescription;
+
+export type TagVariant = BaseTag<{ type: "alert" } & AlertTagProps>;
+
+const tagComponent = (tag: TagVariant): ReactNode | undefined => {
+  const { type } = tag;
+  if (type === "alert") return <AlertTag {...tag} />;
+
+  return undefined;
+};
+
+export const Tag = ({ tag }: { tag: TagVariant }): ReactNode => {
+  const renderTag = tagComponent(tag);
+
+  if (!renderTag) return "Invalid tag type";
+
+  return renderTag;
+};

package/src/components/Tags/exports.ts

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

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

@@ -0,0 +1,16 @@
+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()
+  })
+
+  it("renders correctly with custom text", () => {
+    const customText = "Custom Hello Text"
+    const { getByText } = render(<ExampleComponent text={customText} />)
+    expect(getByText(customText)).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,74 @@
+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 ".";
+
+type ItemContainerProps = {
+  leftIcon?: IconType | (() => ReactElement);
+  action?: ActionType;
+  text: string;
+  className?: string;
+};
+
+export const ItemContainer = (props: ItemContainerProps) => {
+  const {
+    text,
+    leftIcon: LeftIcon,
+    className,
+    action = { type: "noop" },
+  } = props;
+
+  return (
+    <View className="flex rounded font-medium text-f1-foreground *:flex-1">
+      <Action
+        action={action}
+        className={cn("flex flex-row items-center gap-1.5 p-1.5", className)}
+      >
+        {LeftIcon &&
+          (typeof LeftIcon === "function" ? (
+            LeftIcon({})
+          ) : (
+            <Icon icon={LeftIcon} size="md" />
+          ))}
+        <Text className="line-clamp-5 text-left text-f1-foreground">
+          {text}
+        </Text>
+      </Action>
+    </View>
+  );
+};
+
+const Action = ({
+  children,
+  action,
+  ...props
+}: {
+  className: string;
+  action: ActionType;
+  children: ReactNode;
+}) => {
+  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>;
+    default: {
+      const _exhaustiveCheck: never = type;
+      return _exhaustiveCheck;
+    }
+  }
+};

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

@@ -0,0 +1,72 @@
+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 "..";
+
+const COPIED_SHOWN_MS = 750;
+
+export type CopyActionProps = {
+  children: ReactNode;
+} & CopyActionType;
+
+export const CopyAction = ({ text, children }: CopyActionProps) => {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => setCopied(false), COPIED_SHOWN_MS);
+
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  const copyHandler = async () => {
+    try {
+      if (text) {
+        await Clipboard.setStringAsync(text);
+        setCopied(true);
+      }
+    } catch (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,
+      )}
+      onPress={copyHandler}
+    >
+      <View className="flex flex-row items-center gap-1.5">{children}</View>
+      <View className="flex">
+        {!copied && (
+          <Icon
+            icon={LayersFront}
+            size="md"
+            aria-hidden={true}
+            className={cn(
+              "col-start-1 col-end-2 row-start-1 row-end-2 text-f1-icon-bold",
+            )}
+          />
+        )}
+        {copied && (
+          <Icon
+            icon={CheckCircle}
+            size="md"
+            aria-hidden={true}
+            className={cn(
+              "col-start-1 col-end-2 row-start-1 row-end-2",
+              "text-f1-icon-positive",
+            )}
+          />
+        )}
+      </View>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1,37 @@
+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 "..";
+
+export type GenericActionProps = {
+  children: ReactNode;
+  className?: string;
+} & GenericActionType;
+
+export const GenericAction = memo(
+  ({ children, className, ...props }: GenericActionProps) => {
+    return (
+      <Pressable
+        onPress={props.handlePress}
+        {...props}
+        className={cn(
+          "text-inherit group flex items-center justify-between gap-1.5 rounded p-1.5 text-f1-foreground",
+          "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,
+        )}
+      >
+        <View className="flex flex-row items-center gap-1.5">{children}</View>
+        <Icon
+          aria-hidden={true}
+          icon={ChevronRight}
+          size="md"
+          className="text-f1-foreground"
+        />
+      </Pressable>
+    );
+  },
+);
+
+GenericAction.displayName = "GenericAction";