@jobber/components-native 0.5.0 → 0.6.0

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,6 +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.5.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": "28a0933c17617009875afd1895e58131f5036337"
+  "gitHead": "e74d1b1bae286e2c18d1b84592f2ef569d0cfe36"
 }

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";

package/src/ErrorMessageWrapper/context/types.ts

@@ -0,0 +1,71 @@
+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;
+}

package/src/ErrorMessageWrapper/index.ts

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

package/src/index.ts

@@ -2,6 +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";