@factorialco/f0-react-native 0.19.1

package/src/components/OnePreset/index.tsx

@@ -0,0 +1,36 @@
+import { Text, Pressable, View } from "react-native";
+import { Counter } from "../Counter";
+import { cn } from "../../lib/utils";
+
+interface PresetProps {
+  label: string;
+  number?: number;
+  onClick?: () => void;
+  selected?: boolean;
+}
+
+export const OnePreset = ({
+  label,
+  number,
+  onClick,
+  selected,
+}: PresetProps) => {
+  return (
+    <View className="flex items-start">
+      <Pressable
+        onPress={onClick}
+        className={cn(
+          "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",
+          number !== undefined && number !== null && "pr-1.5",
+          selected &&
+            "border-f1-border-selected bg-f1-background-selected-secondary text-f1-foreground-selected",
+        )}
+      >
+        <Text className="whitespace-nowrap text-f1-foreground">{label}</Text>
+        {number !== undefined && number !== null && (
+          <Counter value={number} type={selected ? "selected" : "default"} />
+        )}
+      </Pressable>
+    </View>
+  );
+};

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

@@ -0,0 +1,292 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertTag Snapshot Critical level 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-0.5 bg-f1-background-critical text-f1-foreground-critical"
+    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-5 h-5 stroke-md text-f1-foreground-critical"
+      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="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16m-.967-11.94a.97.97 0 1 1 1.935 0l-.303 3.9a.667.667 0 0 1-1.33 0zM13 15a1 1 0 1 1-2 0 1 1 0 0 1 2 0"
+          fill={
+            {
+              "type": 2,
+            }
+          }
+          propList={
+            [
+              "fill",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <Text
+      className="line-clamp-1 text-base font-medium text-f1-foreground-critical"
+    >
+      critical
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`AlertTag Snapshot Ingo level 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-0.5 bg-f1-background-info text-f1-foreground-info"
+    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-5 h-5 stroke-md text-f1-foreground-info"
+      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="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8.65-2.9a.65.65 0 1 0 1.3 0V9a.65.65 0 1 0-1.3 0zm0 6a.65.65 0 1 0 1.3 0v-3a.65.65 0 1 0-1.3 0z"
+          fill={
+            {
+              "type": 2,
+            }
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <Text
+      className="line-clamp-1 text-base font-medium text-f1-foreground-info"
+    >
+      info
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`AlertTag Snapshot Warning level 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-0.5 bg-f1-background-warning text-f1-foreground-warning"
+    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-5 h-5 stroke-md text-f1-foreground-warning"
+      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="M5.399 19c-1.525 0-2.489-1.638-1.748-2.971l6.6-11.882c.763-1.372 2.735-1.372 3.497 0l6.601 11.882c.74 1.333-.223 2.971-1.748 2.971zM12 7.5a.97.97 0 0 0-.967 1.045l.302 3.9a.667.667 0 0 0 1.33 0l.303-3.9A.97.97 0 0 0 12 7.5m0 8.987a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+          fill={
+            {
+              "type": 2,
+            }
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <Text
+      className="line-clamp-1 text-base font-medium text-f1-foreground-warning"
+    >
+      warning
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,18 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { AlertTag } from ".";
+
+describe("AlertTag", () => {
+  it("Snapshot Ingo level", () => {
+    const { toJSON } = render(<AlertTag text="info" level="info" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("Snapshot Critical level", () => {
+    const { toJSON } = render(<AlertTag text="critical" level="critical" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it("Snapshot Warning level", () => {
+    const { toJSON } = render(<AlertTag text="warning" level="warning" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { BaseTag } from "../BaseTag";
+import { cn } from "../../../lib/utils";
+import { useTextFormatEnforcer } from "../../../lib/text";
+import { Icon, IconType } from "../../Icon";
+import { AlertCircle, InfoCircle, Warning } from "../../../icons/app";
+
+type Level = "info" | "warning" | "critical";
+
+type NonEmpty<T extends string> = T extends "" ? never : T;
+
+type Props<T extends string = string> = {
+  text: NonEmpty<T>;
+  level: Level;
+};
+
+const iconMap: Record<Level, IconType> = {
+  info: InfoCircle,
+  warning: Warning,
+  critical: AlertCircle,
+};
+
+export const AlertTag = <T extends string>({ text, level }: Props<T>) => {
+  useTextFormatEnforcer(text, { disallowEmpty: true });
+
+  return (
+    <BaseTag
+      classNameText={cn(
+        {
+          info: "text-f1-foreground-info",
+          warning: "text-f1-foreground-warning",
+          critical: "text-f1-foreground-critical",
+        }[level],
+      )}
+      classNameContainer={cn(
+        "pl-0.5",
+        {
+          info: "bg-f1-background-info text-f1-foreground-info",
+          warning: "bg-f1-background-warning text-f1-foreground-warning",
+          critical: "bg-f1-background-critical text-f1-foreground-critical",
+        }[level],
+      )}
+      left={
+        <Icon
+          icon={iconMap[level]}
+          className={cn(
+            {
+              info: "text-f1-foreground-info",
+              warning: "text-f1-foreground-warning",
+              critical: "text-f1-foreground-critical",
+            }[level],
+          )}
+          size="md"
+          aria-hidden
+        />
+      }
+      text={text}
+    />
+  );
+};
+
+AlertTag.displayName = "AlertTag";

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

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../../../lib/utils";
+
+type Props = {
+  additionalAccesibleText?: string;
+  onClick?: () => void;
+  classNameContainer?: string;
+  classNameText?: string;
+} & (
+  | {
+      left: ReactNode;
+      text?: string;
+      right?: ReactNode;
+    }
+  | {
+      left?: ReactNode;
+      text: string;
+      right?: ReactNode;
+    }
+);
+
+export const BaseTag = ({
+  left,
+  text,
+  right,
+  additionalAccesibleText,
+  onClick,
+  classNameContainer,
+  classNameText,
+}: Props) => (
+  <View className="flex items-start">
+    <Pressable
+      className={cn(
+        "flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2",
+        onClick && "cursor-pointer hover:bg-f1-background-hover",
+        !text && "aspect-square w-6 items-center justify-center p-1",
+        !left ? "pl-2" : "pl-1",
+        classNameContainer,
+      )}
+      onPress={onClick}
+    >
+      {left}
+      {!!text && (
+        <Text
+          className={cn(
+            "line-clamp-1 text-base font-medium text-f1-foreground",
+            classNameText,
+          )}
+        >
+          {text}
+        </Text>
+      )}
+      {additionalAccesibleText && (
+        <Text className="sr-only text-base font-medium text-f1-foreground">
+          {additionalAccesibleText}
+        </Text>
+      )}
+      {right}
+    </Pressable>
+  </View>
+);
+
+BaseTag.displayName = "BaseTag";