@factorialco/f0-react-native 0.19.1

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

@@ -0,0 +1,366 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OneChip Snapshot 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityLabel="Action"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <View
+      className="flex flex-row items-center gap-0.5"
+    >
+      <Text
+        className="font-medium text-f1-foreground"
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`OneChip Snapshot variant selected 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityLabel="Action"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex items-center gap-1 rounded-full border border-solid px-2 py-0.5 grow-0 border-f1-border-selected bg-f1-background-selected-secondary"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <View
+      className="flex flex-row items-center gap-0.5"
+    >
+      <Text
+        className="font-medium text-f1-foreground-selected"
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`OneChip Snapshot with Icon 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityLabel="Action"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0 pl-1.5"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <View
+      className="flex flex-row items-center gap-0.5"
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="100%"
+        bbWidth="100%"
+        className="shrink-0 w-4 h-4 stroke-sm font-medium text-f1-foreground"
+        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>
+      <Text
+        className="font-medium text-f1-foreground"
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`OneChip Snapshot with OnClose 1`] = `
+<View
+  className="flex items-start"
+>
+  <View
+    accessibilityLabel="Action"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    className="flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0 pr-1.5"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <View
+      className="flex flex-row items-center gap-0.5"
+    >
+      <Text
+        className="font-medium text-f1-foreground"
+      >
+        label
+      </Text>
+      <View
+        accessibilityLabel="Close"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        className="-m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full [&_svg]:text-f1-icon-secondary"
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        tabIndex={0}
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="100%"
+          bbWidth="100%"
+          className="shrink-0 w-4 h-4 stroke-sm font-medium text-f1-foreground"
+          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
+              clipRule={0}
+              d="M3.35 12a8.65 8.65 0 1 1 17.3 0 8.65 8.65 0 0 1-17.3 0m6.11-3.46a.65.65 0 0 0-.92.92L11.08 12l-2.54 2.54a.65.65 0 1 0 .92.92L12 12.92l2.54 2.54a.65.65 0 1 0 .92-.92L12.92 12l2.54-2.54a.65.65 0 1 0-.92-.92L12 11.08z"
+              fill={
+                {
+                  "type": 2,
+                }
+              }
+              fillRule={0}
+              propList={
+                [
+                  "fill",
+                  "fillRule",
+                ]
+              }
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/OneChip/index.spec.tsx

@@ -0,0 +1,69 @@
+import { render, screen, userEvent } from "@testing-library/react-native";
+import React from "react";
+import { OneChip } from ".";
+import { AppIcons } from "../../icons";
+
+describe("OneChip", () => {
+  const defaultProps = {
+    label: "label",
+  };
+
+  it("Snapshot", () => {
+    const { toJSON } = render(<OneChip {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot variant selected", () => {
+    const { toJSON } = render(<OneChip {...defaultProps} variant="selected" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot with Icon", () => {
+    const { toJSON } = render(
+      <OneChip {...defaultProps} icon={AppIcons.Placeholder} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot with OnClose", () => {
+    const handleOnClose = jest.fn();
+    const { toJSON } = render(
+      <OneChip {...defaultProps} onClose={handleOnClose} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with required props", () => {
+    render(<OneChip {...defaultProps} />);
+
+    const number = screen.getByText("label");
+
+    expect(number).toBeDefined();
+  });
+
+  it("renders correctly with onClose event", async () => {
+    const testFn = jest.fn();
+    const user = userEvent.setup();
+
+    render(<OneChip {...defaultProps} onClose={testFn} />);
+
+    const close = screen.getByLabelText("Close");
+    await user.press(close);
+
+    expect(testFn).toHaveBeenCalledTimes(1);
+    expect(close).toBeDefined();
+  });
+
+  it("renders correctly with onClick event", async () => {
+    const testFn = jest.fn();
+    const user = userEvent.setup();
+
+    render(<OneChip {...defaultProps} onClick={testFn} />);
+
+    const action = screen.getByLabelText("Action");
+    await user.press(action);
+
+    expect(testFn).toHaveBeenCalledTimes(1);
+    expect(action).toBeDefined();
+  });
+});

package/src/components/OneChip/index.tsx

@@ -0,0 +1,89 @@
+import { cva, type VariantProps } from "cva";
+import { cn } from "../../lib/utils";
+import { Icon, IconType } from "../Icon";
+import { View, Text, Pressable } from "react-native";
+import { CrossedCircle } from "../../icons/app";
+
+export const chipContainerVariants = cva({
+  base: "flex items-center gap-1 rounded-full border border-solid border-f1-border px-2 py-0.5 grow-0",
+  variants: {
+    variant: {
+      default: "",
+      selected: "border-f1-border-selected bg-f1-background-selected-secondary",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export const chipTextVariants = cva({
+  base: "font-medium",
+  variants: {
+    variant: {
+      default: "text-f1-foreground",
+      selected: "text-f1-foreground-selected",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface ChipProps extends VariantProps<typeof chipContainerVariants> {
+  label: string;
+  icon?: IconType;
+  onClick?: () => void;
+  onClose?: () => void;
+}
+
+export const OneChip = ({
+  label,
+  variant,
+  onClick,
+  onClose,
+  icon,
+}: ChipProps) => {
+  return (
+    <View className="flex items-start">
+      <Pressable
+        className={cn(
+          chipContainerVariants({ variant }),
+          onClose && "pr-1.5",
+          icon && "pl-1.5",
+        )}
+        onPress={onClick}
+        tabIndex={onClick ? 0 : undefined}
+        aria-label="Action"
+      >
+        <View className="flex flex-row items-center gap-0.5">
+          {icon && (
+            <Icon
+              icon={icon}
+              size="sm"
+              className={chipTextVariants({ variant })}
+            />
+          )}
+          <Text className={chipTextVariants({ variant })}>{label}</Text>
+          {onClose && (
+            <Pressable
+              onPress={(e) => {
+                e.stopPropagation();
+                onClose();
+              }}
+              className="-m-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full [&_svg]:text-f1-icon-secondary"
+              tabIndex={0}
+              aria-label="Close"
+            >
+              <Icon
+                icon={CrossedCircle}
+                className={chipTextVariants({ variant })}
+                size="sm"
+              />
+            </Pressable>
+          )}
+        </View>
+      </Pressable>
+    </View>
+  );
+};

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

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OnePreset 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 grow-0 flex-row items-center gap-2 rounded border border-f1-border px-2.5 py-1.5 font-medium text-f1-foreground"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="whitespace-nowrap text-f1-foreground"
+    >
+      label
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`OnePreset Snapshot with number 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 grow-0 flex-row items-center gap-2 rounded border border-f1-border px-2.5 py-1.5 font-medium text-f1-foreground pr-1.5"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="whitespace-nowrap text-f1-foreground"
+    >
+      label
+    </Text>
+    <View
+      className="flex items-start"
+    >
+      <View
+        className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+      >
+        <Text
+          className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+        >
+          42
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`OnePreset renders correctly with selected props 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 grow-0 flex-row items-center gap-2 rounded border px-2.5 py-1.5 font-medium border-f1-border-selected bg-f1-background-selected-secondary text-f1-foreground-selected"
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <Text
+      className="whitespace-nowrap text-f1-foreground"
+    >
+      label
+    </Text>
+  </View>
+</View>
+`;

package/src/components/OnePreset/index.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen, userEvent } from "@testing-library/react-native";
+import React from "react";
+import { OnePreset } from ".";
+
+describe("OnePreset", () => {
+  const defaultProps = {
+    label: "label",
+  };
+
+  it("Snapshot", () => {
+    const { toJSON } = render(<OnePreset {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("Snapshot with number", () => {
+    const { toJSON } = render(<OnePreset {...defaultProps} number={42} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with selected props", () => {
+    const { toJSON } = render(<OnePreset {...defaultProps} selected={true} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with required props", () => {
+    render(<OnePreset {...defaultProps} />);
+
+    const number = screen.getByText("label");
+
+    expect(number).toBeDefined();
+  });
+
+  it("renders correctly with onClick event", async () => {
+    const testFn = jest.fn();
+    const user = userEvent.setup();
+
+    render(<OnePreset {...defaultProps} onClick={testFn} />);
+
+    const number = screen.getByText("label");
+    await user.press(number);
+
+    expect(testFn).toHaveBeenCalledTimes(1);
+    expect(number).toBeDefined();
+  });
+});