@jobber/components-native 0.4.0 → 0.6.0

package/dist/types/src/ActionLabel/ActionLabel.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { TextAlign, TextColor } from "../Typography";
+export type ActionLabelVariation = Extract<TextColor, "interactive" | "destructive" | "learning" | "subtle" | "onPrimary">;
+type ActionLabelType = "default" | "cardTitle";
+interface ActionLabelProps {
+    /**
+     * Text to display
+     */
+    readonly children?: string;
+    /**
+     * Set the display text to disabled color
+     */
+    readonly disabled?: boolean;
+    /**
+     * The text color
+     */
+    readonly variation?: ActionLabelVariation;
+    /**
+     * Changes the appearance to match the style of where it's getting used
+     */
+    readonly type?: ActionLabelType;
+    /**
+     * Alignment of action label
+     */
+    readonly align?: TextAlign;
+}
+export declare function ActionLabel({ children, variation, type, disabled, align, }: ActionLabelProps): JSX.Element;
+export {};

package/dist/types/src/ActionLabel/index.d.ts

@@ -0,0 +1 @@
+export { ActionLabel, ActionLabelVariation } from "./ActionLabel";

package/dist/types/src/ErrorMessageWrapper/ErrorMessageWrapper.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+type WrapForTypes = "card" | "default";
+interface ErrorMessageWrapperProps {
+    /**
+     * The message that shows up below the children
+     */
+    readonly message?: string;
+    /**
+     * Changes how it gets laid out on the UI
+     */
+    readonly wrapFor?: WrapForTypes;
+    readonly children: ReactNode;
+}
+/**
+ * Adds an error message below the children but ensure the message gets read
+ * out first.
+ *
+ * This component is internal to Atlantis and shouldn't be used outside of it.
+ */
+export declare function ErrorMessageWrapper({ message, wrapFor, children, }: ErrorMessageWrapperProps): JSX.Element;
+export {};

package/dist/types/src/ErrorMessageWrapper/ErrorMessageWrapper.style.d.ts

@@ -0,0 +1,29 @@
+export declare const styles: {
+    wrapper: {
+        position: "relative";
+        width: string;
+    };
+    wrapForCard: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    messageWrapper: {
+        flexDirection: "row";
+    };
+    messageWrapperIcon: {
+        flex: number;
+        flexBasis: string;
+        paddingTop: number;
+        paddingRight: number;
+    };
+    messageWrapperContent: {
+        flex: number;
+    };
+    screenReaderMessage: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+    };
+};

package/dist/types/src/ErrorMessageWrapper/context/ErrorMessageContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ErrorMessageContextProps } from "./types";
+export declare const ErrorMessageContext: import("react").Context<ErrorMessageContextProps>;
+export declare function useErrorMessageContext(): ErrorMessageContextProps;

package/dist/types/src/ErrorMessageWrapper/context/ErrorMessageProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface ErrorMessageProviderProps {
+    readonly children: ReactNode;
+}
+export declare function ErrorMessageProvider({ children, }: ErrorMessageProviderProps): JSX.Element;
+export {};

package/dist/types/src/ErrorMessageWrapper/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ErrorMessageContext";
+export * from "./ErrorMessageProvider";

package/dist/types/src/ErrorMessageWrapper/context/types.d.ts

@@ -0,0 +1,62 @@
+import { RefObject } from "react";
+import { NativeMethods, View } from "react-native";
+interface Methods {
+    /**
+     * Requires the method that returns
+     *  - x
+     *  - y
+     *  - width
+     *  - height
+     *
+     * This determines the location of the element on screen.
+     */
+    readonly measure: NativeMethods["measureLayout"];
+    /**
+     * Requires a method that makes accessible element be focused.
+     *
+     * **Example**
+     * ```
+     * function accessibilityFocus() {
+     *  const reactTag = findNodeHandle(ref.current);
+     *  AccessibilityInfo.setAccessibilityFocus(reactTag);
+     * }
+     * ```
+     */
+    readonly accessibilityFocus: () => void;
+    /**
+     * Check if the registered element has an error.
+     */
+    readonly hasErrorMessage: boolean;
+}
+export interface Element {
+    /**
+     * Used to easily identify the registered element so it's easier to modify or
+     * unregister it.
+     */
+    readonly id: string;
+    /**
+     * Information about the element that you can access.
+     */
+    readonly methods: Methods;
+}
+type ElementID = Element["id"];
+export interface ErrorMessageContextRegisterParams {
+    readonly id: ElementID;
+    readonly hasErrorMessage: Methods["hasErrorMessage"];
+    readonly ref: RefObject<View>;
+}
+export interface ErrorMessageContextProps {
+    /**
+     * Registered elements.
+     */
+    readonly elements: Record<ElementID, Element["methods"]>;
+    /**
+     * Registers the element to the context.
+     */
+    readonly register: (params: ErrorMessageContextRegisterParams) => void;
+    /**
+     * Un-registers the element from the context.
+     */
+    readonly unregister: (id: ElementID) => void;
+}
+export {};

package/dist/types/src/ErrorMessageWrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorMessageWrapper } from "./ErrorMessageWrapper";
+export { useErrorMessageContext, ErrorMessageContext, ErrorMessageProvider, } from "./context";

package/dist/types/src/index.d.ts

@@ -2,5 +2,7 @@ export * from "./Icon";
 export * from "./Divider";
 export * from "./Typography";
 export * from "./Text";
+export * from "./ErrorMessageWrapper";
+export * from "./ActionLabel";
 export * from "./Content";
 export * from "./ActivityIndicator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -24,6 +24,7 @@
     "@jobber/design": "^0.39.0",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-svg": "^13.9.0",
+    "react-native-uuid": "^1.4.9",
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
@@ -31,6 +32,7 @@
     "@testing-library/react-native": "^12.0.1",
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
+    "@types/react-native-uuid": "^1.4.0",
     "metro-react-native-babel-preset": "^0.76.0",
     "react-test-renderer": "^18.2.0",
     "typescript": "^4.9.5"
@@ -40,5 +42,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "d9e4bbca01e3aa0a05ade2c3251681a416214789"
+  "gitHead": "e74d1b1bae286e2c18d1b84592f2ef569d0cfe36"
 }

package/src/ActionLabel/ActionLabel.test.tsx

@@ -0,0 +1,129 @@
+import React, { CSSProperties } from "react";
+import { render } from "@testing-library/react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { ActionLabel } from "./ActionLabel";
+import { tokens } from "../utils/design";
+
+const defaultStyles = {
+  fontFamily: "inter-extrabold",
+  color: tokens["color-interactive"],
+  textAlign: "center",
+  fontSize: tokens["typography--fontSize-base"],
+  lineHeight: tokens["typography--lineHeight-tight"],
+  letterSpacing: tokens["typography--letterSpacing-loose"],
+};
+
+describe("ActionLabel", () => {
+  it("renders the default action label", () => {
+    const text = "Default Action Label";
+    const { getByText } = render(<ActionLabel>{text}</ActionLabel>);
+
+    const el = getByText(text);
+    expect(el).toBeDefined();
+    expect(getStyleObject(el)).toMatchObject(defaultStyles);
+  });
+
+  describe("Variations", () => {
+    it("renders a destructive variation", () => {
+      const text = "Destructive Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="destructive">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-destructive"],
+      });
+    });
+
+    it("renders a learning variation", () => {
+      const text = "Learning Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="learning">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-informative"],
+      });
+    });
+
+    it("renders a subtle variation", () => {
+      const text = "Subtle Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="subtle">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-interactive--subtle"],
+      });
+    });
+
+    it("renders an onPrimary variation", () => {
+      const text = "onPrimary Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="onPrimary">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-surface"],
+      });
+    });
+  });
+
+  describe("when action label is disabled", () => {
+    it("renders text with disabled color, overriding variation", () => {
+      const text = "Disabled Action Label";
+      const { getByText } = render(
+        <ActionLabel disabled variation="destructive">
+          {text}
+        </ActionLabel>,
+      );
+
+      const styles = getStyleObject(getByText(text));
+      expect(styles).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-disabled"],
+      });
+      expect(styles).not.toHaveProperty("color", tokens["color-destructive"]);
+    });
+  });
+
+  describe("when action label is aligned", () => {
+    it("renders text with left alignment", () => {
+      const text = "Left Aligned Action Label";
+      const { getByText } = render(
+        <ActionLabel align="start">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        textAlign: "left",
+      });
+    });
+
+    it("renders text with right alignment", () => {
+      const text = "Right Aligned Action Label";
+      const { getByText } = render(
+        <ActionLabel align="end">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        textAlign: "right",
+      });
+    });
+  });
+});
+
+function getStyleObject(el: ReactTestInstance) {
+  return el.props.style.reduce(
+    (mergedStyles: CSSProperties, additionalStyles: CSSProperties) => ({
+      ...mergedStyles,
+      ...additionalStyles,
+    }),
+    {},
+  );
+}

package/src/ActionLabel/ActionLabel.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { tokens } from "../utils/design";
+import { TextAlign, TextColor, Typography } from "../Typography";
+
+export type ActionLabelVariation = Extract<
+  TextColor,
+  "interactive" | "destructive" | "learning" | "subtle" | "onPrimary"
+>;
+
+type ActionLabelType = "default" | "cardTitle";
+
+interface ActionLabelProps {
+  /**
+   * Text to display
+   */
+  readonly children?: string;
+
+  /**
+   * Set the display text to disabled color
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * The text color
+   */
+  readonly variation?: ActionLabelVariation;
+
+  /**
+   * Changes the appearance to match the style of where it's getting used
+   */
+  readonly type?: ActionLabelType;
+
+  /**
+   * Alignment of action label
+   */
+  readonly align?: TextAlign;
+}
+
+export function ActionLabel({
+  children,
+  variation = "interactive",
+  type = "default",
+  disabled = false,
+  align = "center",
+}: ActionLabelProps): JSX.Element {
+  return (
+    <Typography
+      color={getColor(variation, disabled)}
+      fontFamily="base"
+      size="default"
+      fontWeight={getFontWeight(type)}
+      align={align}
+      lineHeight="tight"
+      letterSpacing={getLetterSpacing(type)}
+      maxFontScaleSize={tokens["typography--fontSize-large"]}
+      selectable={false}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+function getColor(variation: ActionLabelVariation, disabled: boolean) {
+  if (disabled) {
+    return "disabled";
+  }
+  if (variation) {
+    return variation;
+  }
+
+  return "interactive";
+}
+
+function getFontWeight(type: ActionLabelType) {
+  if (type === "cardTitle") {
+    return "bold";
+  }
+
+  return "extraBold";
+}
+
+function getLetterSpacing(type: ActionLabelType) {
+  if (type === "cardTitle") {
+    return "base";
+  }
+
+  return "loose";
+}

package/src/ActionLabel/index.ts

@@ -0,0 +1 @@
+export { ActionLabel, ActionLabelVariation } from "./ActionLabel";

package/src/ErrorMessageWrapper/ErrorMessageWrapper.style.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    width: "100%",
+  },
+  wrapForCard: {
+    paddingHorizontal: tokens["space-base"],
+    paddingVertical: tokens["space-small"],
+  },
+  messageWrapper: {
+    flexDirection: "row",
+  },
+  messageWrapperIcon: {
+    flex: 0,
+    flexBasis: "auto",
+    paddingTop: tokens["space-minuscule"],
+    paddingRight: tokens["space-smaller"],
+  },
+  messageWrapperContent: {
+    flex: 1,
+  },
+  screenReaderMessage: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+  },
+});

package/src/ErrorMessageWrapper/ErrorMessageWrapper.test.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ErrorMessageWrapper } from "./ErrorMessageWrapper";
+import { Text } from "../Text";
+
+describe("ErrorMessageWrapper", () => {
+  it("should show the child, an error message, and an icon", () => {
+    const errorMessage = "This is an error message";
+    const childText = "Howdy";
+    const screen = render(
+      <ErrorMessageWrapper message={errorMessage}>
+        <Text>{childText}</Text>
+      </ErrorMessageWrapper>,
+    );
+
+    expect(screen.getByText(childText)).toBeDefined();
+    expect(
+      screen.getByText(errorMessage, { includeHiddenElements: true }),
+    ).toBeDefined();
+    expect(screen.getByTestId("alert")).toBeDefined();
+  });
+
+  it("should show the child, but not an error message and an icon", () => {
+    const errorMessage = "This is an error message part 2";
+    const childText = "I'm still here";
+
+    const screen = render(
+      <ErrorMessageWrapper message={errorMessage}>
+        <Text>{childText}</Text>
+      </ErrorMessageWrapper>,
+    );
+
+    expect(screen.getByText(childText)).toBeDefined();
+    expect(
+      screen.getByText(errorMessage, { includeHiddenElements: true }),
+    ).toBeDefined();
+    expect(screen.getByTestId("alert")).toBeDefined();
+
+    screen.rerender(
+      <ErrorMessageWrapper>
+        <Text>{childText}</Text>
+      </ErrorMessageWrapper>,
+    );
+    expect(screen.getByText(childText)).toBeDefined();
+    expect(screen.queryByText(errorMessage)).toBeNull();
+    expect(screen.queryByTestId("alert")).toBeNull();
+  });
+});

package/src/ErrorMessageWrapper/ErrorMessageWrapper.tsx

@@ -0,0 +1,88 @@
+import React, { ReactNode, useEffect, useRef } from "react";
+import { View, ViewStyle } from "react-native";
+import { v4 } from "react-native-uuid";
+import { useErrorMessageContext } from "./context";
+import { styles } from "./ErrorMessageWrapper.style";
+import { Icon } from "../Icon";
+import { Text } from "../Text";
+
+type WrapForTypes = "card" | "default";
+
+interface ErrorMessageWrapperProps {
+  /**
+   * The message that shows up below the children
+   */
+  readonly message?: string;
+
+  /**
+   * Changes how it gets laid out on the UI
+   */
+  readonly wrapFor?: WrapForTypes;
+
+  readonly children: ReactNode;
+}
+
+const wrapForStyle: Record<WrapForTypes, ViewStyle | undefined> = {
+  card: styles.wrapForCard,
+  default: undefined,
+};
+
+/**
+ * Adds an error message below the children but ensure the message gets read
+ * out first.
+ *
+ * This component is internal to Atlantis and shouldn't be used outside of it.
+ */
+export function ErrorMessageWrapper({
+  message,
+  wrapFor = "default",
+  children,
+}: ErrorMessageWrapperProps): JSX.Element {
+  const errorMessageContext = useErrorMessageContext();
+  const register = errorMessageContext?.register;
+  const unregister = errorMessageContext?.unregister;
+  const a11yMessageRef = useRef<View>(null);
+  const { current: uuid } = useRef(v4());
+
+  const hasErrorMessage = Boolean(message);
+
+  useEffect(() => {
+    if (register) {
+      register({ id: uuid, ref: a11yMessageRef, hasErrorMessage });
+    }
+
+    if (unregister) {
+      return () => unregister(uuid);
+    }
+  }, [uuid, hasErrorMessage, register, unregister]);
+
+  return (
+    <View style={[styles.wrapper]}>
+      {hasErrorMessage && (
+        <View
+          ref={a11yMessageRef}
+          accessible={true}
+          accessibilityRole="text"
+          accessibilityLabel={message}
+          pointerEvents="none"
+          style={styles.screenReaderMessage}
+        />
+      )}
+
+      {children}
+
+      {hasErrorMessage && (
+        <View style={[styles.messageWrapper, wrapForStyle[wrapFor]]}>
+          <View style={styles.messageWrapperIcon}>
+            <Icon name="alert" size="small" color="critical" />
+          </View>
+          <View style={styles.messageWrapperContent}>
+            <Text variation="error" level="textSupporting" hideFromScreenReader>
+              {message}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/ErrorMessageWrapper/context/ErrorMessageContext.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createContext, useContext } from "react";
+import { ErrorMessageContextProps } from "./types";
+
+const defaultValues: ErrorMessageContextProps = {
+  elements: {},
+  register: _ => undefined,
+  unregister: _ => undefined,
+};
+
+export const ErrorMessageContext = createContext(defaultValues);
+
+export function useErrorMessageContext(): ErrorMessageContextProps {
+  return useContext(ErrorMessageContext);
+}

package/src/ErrorMessageWrapper/context/ErrorMessageProvider.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode, RefObject, useState } from "react";
+import {
+  AccessibilityInfo,
+  NativeMethods,
+  View,
+  findNodeHandle,
+} from "react-native";
+import { ErrorMessageContext } from "./ErrorMessageContext";
+import {
+  Element,
+  ErrorMessageContextProps,
+  ErrorMessageContextRegisterParams,
+} from "./types";
+
+interface ErrorMessageProviderProps {
+  readonly children: ReactNode;
+}
+
+export function ErrorMessageProvider({
+  children,
+}: ErrorMessageProviderProps): JSX.Element {
+  const [elements, setElements] = useState<
+    ErrorMessageContextProps["elements"]
+  >({});
+
+  return (
+    <ErrorMessageContext.Provider
+      value={{
+        elements,
+        register: handleRegister,
+        unregister: handleUnregister,
+      }}
+    >
+      {children}
+    </ErrorMessageContext.Provider>
+  );
+
+  function handleRegister({
+    id,
+    ref,
+    hasErrorMessage,
+  }: ErrorMessageContextRegisterParams) {
+    elements[id] = {
+      measure: getMeasure(ref),
+      accessibilityFocus: getAccessibilityFocus(ref),
+      hasErrorMessage,
+    };
+    setElements(elements);
+  }
+
+  function handleUnregister(id: Element["id"]) {
+    delete elements[id];
+    setElements(elements);
+  }
+}
+
+function getMeasure(ref: RefObject<View>) {
+  return function measure(...args: Parameters<NativeMethods["measureLayout"]>) {
+    ref.current?.measureLayout(...args);
+  };
+}
+
+function getAccessibilityFocus(ref: RefObject<View>) {
+  return function accessibilityFocus() {
+    const reactTag = findNodeHandle(ref.current);
+    reactTag &&
+      setTimeout(() => {
+        AccessibilityInfo.setAccessibilityFocus(reactTag);
+      }, 0);
+  };
+}

package/src/ErrorMessageWrapper/context/index.ts

@@ -0,0 +1,2 @@
+export * from "./ErrorMessageContext";
+export * from "./ErrorMessageProvider";