@jobber/components-native 0.24.1-migrate-te.4 → 0.25.1-fix-breakp.0

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

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+import { Modalize } from "react-native-modalize";
+interface BottomSheetProps {
+    readonly children: ReactNode;
+    /**
+     * Display a cancel button in the bottom sheet footer.
+     */
+    readonly showCancel?: boolean;
+    /**
+     * Hide or show the cancel button when loading state is provided.
+     */
+    readonly loading?: boolean;
+    /**
+     * An optional heading to display in the bottom sheet header.
+     */
+    readonly heading?: string;
+    /**
+     * Callback that is called when the overlay is opened.
+     */
+    readonly onOpen?: () => void;
+    /**
+     * Callback that is called when the overlay is closed.
+     */
+    readonly onClose?: () => void;
+}
+export declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<import("react-native-modalize/lib/options").IHandles | undefined>>;
+export type BottomSheetRef = Modalize | undefined;
+export {};

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

@@ -0,0 +1,32 @@
+export declare const styles: {
+    overlayModalize: {
+        backgroundColor: string;
+    };
+    overlay: {
+        backgroundColor: string;
+        height: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    modal: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        paddingTop: number;
+    };
+    children: {
+        paddingBottom: number;
+    };
+    header: {
+        paddingHorizontal: number;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+    footerDivider: {
+        marginHorizontal: number;
+        marginTop: number;
+        marginBottom: number;
+    };
+};

package/dist/types/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconColorNames, IconNames } from "@jobber/design";
+import { TextAlign } from "../../../Typography";
+export interface BottomSheetOptionProps {
+    readonly text: string;
+    readonly icon?: IconNames;
+    readonly iconColor?: IconColorNames;
+    readonly textAlign?: TextAlign;
+    readonly destructive?: boolean;
+    readonly textTransform?: "none" | "capitalize";
+    onPress: () => void;
+}
+export declare function BottomSheetOption({ text, icon, iconColor, textAlign, destructive, textTransform, onPress, }: BottomSheetOptionProps): JSX.Element;

package/dist/types/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.d.ts

@@ -0,0 +1,16 @@
+export declare const styles: {
+    bottomSheetOption: {
+        display: "flex";
+        flexDirection: "row";
+        alignContent: "center";
+        alignItems: "center";
+        padding: number;
+    };
+    icon: {
+        paddingHorizontal: number;
+    };
+    title: {
+        paddingHorizontal: number;
+        flexShrink: number;
+    };
+};

package/dist/types/src/BottomSheet/components/BottomSheetOption/index.d.ts

@@ -0,0 +1 @@
+export { BottomSheetOption, BottomSheetOptionProps } from "./BottomSheetOption";

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

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

package/dist/types/src/BottomSheet/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    cancel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -1 +1,2 @@
 export * from "./useFormController";
+export * from "./useIsScreenReaderEnabled";

package/dist/types/src/hooks/useIsScreenReaderEnabled.d.ts

@@ -0,0 +1 @@
+export declare function useIsScreenReaderEnabled(): boolean;

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

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./BottomSheet";
 export * from "./Button";
 export * from "./Card";
 export * from "./Chip";
@@ -16,7 +17,6 @@ export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
 export * from "./InputText";
-export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Switch";

package/dist/types/src/utils/test/wait.d.ts

@@ -0,0 +1,36 @@
+/**
+ * wait is used in our tests for testing Apollo Mocks
+ * useQuery returns fetching equal to true in the first render
+ * and the second render would return the mock result
+ * using "await act(wait)", we can wait for the next rerender
+ * to get the mock result of the query
+ * @param milliseconds time to wait in milliseconds
+ */
+export declare function wait(milliseconds?: number): Promise<void>;
+/**
+ * Use this test helper thoughtfully. If you are running into the
+ * "not wrapped in act(...)" warning while running your test it is
+ * recommended that:
+ *
+ * 1. Double check that there are really no layout changes that you can test against.
+ *    waitForUntestableRender will fail your test if it detects layout changes
+ * 2. Re-evalutate your implementation. Maybe the managed state can be deferred to
+ *    to a component further down the hierarchy? This can help prevent renders since
+ *    your managed state isn't being used yet maybe?
+ *
+ * `waitForUntestableRender` is meant to be used as an alternative to
+ *
+ * ```tsx
+ * await act(wait)
+ * ```
+ *
+ * to make tests more readable.
+ *
+ * The `explanation` argument is required to ensure that a developer _thinks_
+ * about why they need use this function. It is _really_ important that devs
+ * understand when _and why_ a component's render cycle is flagged to be untested
+ * So do not put a throwaway explanation here. If you don't know why your test
+ * needs this function, find out!
+
+ */
+export declare const waitForUntestableRender: (_explanation: string) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.24.1-migrate-te.4+d1f46563",
+  "version": "0.25.1-fix-breakp.0+f1ad84f5",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -21,15 +21,17 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.41.2",
+    "@jobber/design": "^0.41.3-fix-breakp.14+f1ad84f5",
     "lodash.chunk": "^4.2.0",
     "lodash.identity": "^3.0.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
-    "react-native-gesture-handler": "^2.5.0",
+    "react-native-gesture-handler": "^2.10.2",
     "react-native-localize": "^2.2.6",
+    "react-native-modalize": "^2.0.13",
+    "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "^2.17.0",
-    "react-native-safe-area-context": "^4.5.2",
+    "react-native-safe-area-context": "^4.5.3",
     "react-native-svg": "^13.9.0",
     "react-native-toast-message": "^2.1.6",
     "react-native-uuid": "^1.4.9",
@@ -53,5 +55,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "d1f46563a284bbab77190fb7405deb44d4c8a9ba"
+  "gitHead": "f1ad84f5e1d4651bce5e755535c7ae6276033ab8"
 }

package/src/BottomSheet/BottomSheet.style.ts

@@ -0,0 +1,35 @@
+import { Dimensions, StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const { height } = Dimensions.get("window");
+const modalBorderRadius = tokens["radius-larger"];
+
+export const styles = StyleSheet.create({
+  overlayModalize: {
+    backgroundColor: "transparent",
+  },
+
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: tokens["color-overlay"],
+    height,
+  },
+  modal: {
+    borderTopLeftRadius: modalBorderRadius,
+    borderTopRightRadius: modalBorderRadius,
+    paddingTop: tokens["space-small"],
+  },
+  children: {
+    paddingBottom: tokens["space-small"],
+  },
+  header: {
+    paddingHorizontal: tokens["space-base"],
+    paddingTop: tokens["space-small"],
+    paddingBottom: tokens["space-base"],
+  },
+  footerDivider: {
+    marginHorizontal: tokens["space-base"],
+    marginTop: tokens["space-small"],
+    marginBottom: tokens["space-smaller"],
+  },
+});

package/src/BottomSheet/BottomSheet.test.tsx

@@ -0,0 +1,152 @@
+import React, { createRef } from "react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { Host, Portal } from "react-native-portalize";
+import { BottomSheet } from ".";
+import { BottomSheetRef } from "./BottomSheet";
+import { messages } from "./messages";
+import { waitForUntestableRender } from "../utils/test/wait";
+import { Text } from "../Text";
+
+jest.unmock("../hooks/useIsScreenReaderEnabled");
+
+const ref = createRef<BottomSheetRef>();
+const mockOnClose = jest.fn();
+const mockOnOpen = jest.fn();
+
+function setup({
+  heading,
+  showCancel,
+  loading,
+}: {
+  heading?: string;
+  showCancel?: boolean;
+  loading?: boolean;
+}) {
+  return render(
+    <Host>
+      <Portal>
+        <BottomSheet
+          ref={ref}
+          heading={heading}
+          showCancel={showCancel}
+          loading={loading}
+          onClose={mockOnClose}
+          onOpen={mockOnOpen}
+        >
+          <View>
+            <Text>BottomSheet</Text>
+          </View>
+        </BottomSheet>
+      </Portal>
+    </Host>,
+  );
+}
+
+it("renders a BottomSheet", async () => {
+  const { getByText } = setup({});
+
+  await waitForUntestableRender(
+    "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
+  );
+
+  act(() => {
+    ref.current?.open();
+  });
+
+  expect(getByText("BottomSheet")).toBeDefined();
+});
+
+it("renders a BottomSheet with a header", async () => {
+  const header = "Hello this is header";
+  const { getByText } = setup({ heading: header });
+
+  await waitForUntestableRender(
+    "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
+  );
+
+  act(() => {
+    ref.current?.open();
+  });
+
+  expect(getByText(header)).toBeDefined();
+});
+
+it("BottomSheet can be closed with the cancel action", async () => {
+  const { getByText, queryByText } = setup({ showCancel: true });
+
+  act(() => {
+    ref.current?.open();
+  });
+
+  fireEvent.press(getByText(messages.cancel.defaultMessage));
+
+  await waitFor(() => {
+    expect(queryByText("BottomSheet")).toBeNull();
+  });
+});
+
+describe("when loading is provided and true", () => {
+  it("hides the cancel action", async () => {
+    const { queryByText } = setup({ showCancel: true, loading: true });
+
+    await waitForUntestableRender(
+      "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
+    );
+
+    act(() => {
+      ref.current?.open();
+    });
+
+    expect(queryByText(messages.cancel.defaultMessage)).toBeNull();
+  });
+});
+
+it("calls onClose when BottomSheet is closed", async () => {
+  setup({});
+
+  act(() => {
+    ref.current?.open();
+    ref.current?.close();
+  });
+
+  await waitFor(() => {
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+});
+
+it("calls onOpen when BottomSheet is opened", async () => {
+  setup({});
+
+  act(() => {
+    ref.current?.open();
+  });
+
+  await waitFor(() => {
+    expect(mockOnOpen).toHaveBeenCalled();
+  });
+});
+
+describe("when there is a screen reader enabled", () => {
+  it("should always show the cancel action", async () => {
+    jest
+      .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+      .mockImplementation(() => Promise.resolve(true));
+
+    const { getByText, queryByText } = setup({});
+
+    await waitForUntestableRender(
+      "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
+    );
+
+    act(() => {
+      ref.current?.open();
+    });
+
+    fireEvent.press(getByText(messages.cancel.defaultMessage));
+
+    await waitFor(() => {
+      expect(queryByText("BottomSheet")).toBeNull();
+    });
+  });
+});

package/src/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,149 @@
+import React, { ReactNode, Ref, RefObject, forwardRef, useState } from "react";
+import { Modalize } from "react-native-modalize";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Keyboard, View } from "react-native";
+import { useIntl } from "react-intl";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { styles } from "./BottomSheet.style";
+import { messages } from "./messages";
+import { useIsScreenReaderEnabled } from "../hooks";
+import { Divider } from "../Divider";
+import { Heading } from "../Heading";
+
+interface BottomSheetProps {
+  readonly children: ReactNode;
+
+  /**
+   * Display a cancel button in the bottom sheet footer.
+   */
+  readonly showCancel?: boolean;
+
+  /**
+   * Hide or show the cancel button when loading state is provided.
+   */
+  readonly loading?: boolean;
+
+  /**
+   * An optional heading to display in the bottom sheet header.
+   */
+  readonly heading?: string;
+
+  /**
+   * Callback that is called when the overlay is opened.
+   */
+  readonly onOpen?: () => void;
+
+  /**
+   * Callback that is called when the overlay is closed.
+   */
+  readonly onClose?: () => void;
+}
+
+export const BottomSheet = forwardRef(BottomSheetInternal);
+
+export type BottomSheetRef = Modalize | undefined;
+
+function BottomSheetInternal(
+  {
+    children,
+    showCancel,
+    loading = false,
+    heading,
+    onOpen,
+    onClose,
+  }: BottomSheetProps,
+  ref: Ref<BottomSheetRef>,
+) {
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      {open && <Overlay />}
+      <Modalize
+        ref={ref}
+        adjustToContentHeight={true}
+        modalStyle={styles.modal}
+        overlayStyle={styles.overlayModalize}
+        HeaderComponent={heading && <Header heading={heading} />}
+        FooterComponent={
+          <Footer
+            cancellable={(showCancel && !loading) || isScreenReaderEnabled}
+            onCancel={() => {
+              (ref as RefObject<BottomSheetRef>)?.current?.close();
+            }}
+          />
+        }
+        withHandle={false}
+        withReactModal={isScreenReaderEnabled}
+        onOpen={openModal}
+        onClose={closeModal}
+      >
+        <View
+          style={
+            !showCancel && !isScreenReaderEnabled ? styles.children : undefined
+          }
+        >
+          {children}
+        </View>
+      </Modalize>
+    </>
+  );
+
+  function openModal() {
+    onOpen?.();
+    setOpen(true);
+    dismissKeyboard();
+  }
+
+  function closeModal() {
+    onClose?.();
+    setOpen(false);
+  }
+}
+
+function Header({ heading }: { heading: string }) {
+  return (
+    <View style={styles.header}>
+      <Heading level={"subtitle"}>{heading}</Heading>
+    </View>
+  );
+}
+
+function Footer({
+  cancellable,
+  onCancel,
+}: {
+  cancellable: boolean;
+  onCancel: () => void;
+}) {
+  const insets = useSafeAreaInsets();
+  const { formatMessage } = useIntl();
+
+  return (
+    <View style={{ marginBottom: insets.bottom }}>
+      {cancellable && (
+        <View style={styles.children}>
+          <View style={styles.footerDivider}>
+            <Divider />
+          </View>
+          <BottomSheetOption
+            text={formatMessage(messages.cancel)}
+            icon={"remove"}
+            onPress={onCancel}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+function dismissKeyboard() {
+  //Dismisses the keyboard before opening the bottom sheet.
+  //In the case where an input text field is focused we don't want to show the bottom sheet behind or above keyboard
+  Keyboard.dismiss();
+}
+
+function Overlay() {
+  return <View style={styles.overlay} />;
+}

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  bottomSheetOption: {
+    display: "flex",
+    flexDirection: "row",
+    alignContent: "center",
+    alignItems: "center",
+    padding: tokens["space-small"],
+  },
+  icon: {
+    paddingHorizontal: tokens["space-small"],
+  },
+  title: {
+    paddingHorizontal: tokens["space-small"],
+    flexShrink: 1,
+  },
+});

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { BottomSheetOption } from "./BottomSheetOption";
+
+describe("BottomSheetOption component", () => {
+  it("renders", () => {
+    const mockNavigate = jest.fn();
+    const iconName = "camera";
+    const optionLabel = "Take photo";
+
+    const { getByTestId, getByText } = render(
+      <BottomSheetOption
+        onPress={mockNavigate}
+        icon={iconName}
+        text={optionLabel}
+      />,
+    );
+    expect(getByTestId(iconName)).toBeDefined();
+    expect(getByText(optionLabel)).toBeDefined();
+  });
+
+  it("responds to presses", () => {
+    const mockNavigate = jest.fn();
+    const tree = render(
+      <BottomSheetOption
+        onPress={mockNavigate}
+        icon={"camera"}
+        text={"Take photo"}
+      />,
+    );
+    fireEvent.press(tree.getByLabelText("Take photo"));
+    expect(mockNavigate).toHaveBeenCalled();
+  });
+});

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { IconColorNames, IconNames } from "@jobber/design";
+import { styles } from "./BottomSheetOption.styles";
+import { TextAlign } from "../../../Typography";
+import { capitalize } from "../../../utils/intl";
+import { Text } from "../../../Text";
+import { Icon } from "../../../Icon";
+
+export interface BottomSheetOptionProps {
+  readonly text: string;
+  readonly icon?: IconNames;
+  readonly iconColor?: IconColorNames;
+  readonly textAlign?: TextAlign;
+  readonly destructive?: boolean;
+  readonly textTransform?: "none" | "capitalize";
+  onPress: () => void;
+}
+export function BottomSheetOption({
+  text,
+  icon,
+  iconColor,
+  textAlign,
+  destructive,
+  textTransform = "capitalize",
+  onPress,
+}: BottomSheetOptionProps): JSX.Element {
+  const destructiveColor = "critical";
+  const textVariation = destructive ? destructiveColor : "subdued";
+  return (
+    <TouchableOpacity
+      style={styles.bottomSheetOption}
+      onPress={onPress}
+      accessibilityLabel={text}
+    >
+      {icon && (
+        <View style={styles.icon}>
+          <Icon
+            name={icon}
+            color={destructive ? destructiveColor : iconColor}
+          />
+        </View>
+      )}
+      <View style={styles.title}>
+        <Text variation={textVariation} emphasis={"strong"} align={textAlign}>
+          {textTransform === "capitalize"
+            ? capitalize(text.toLocaleLowerCase())
+            : text}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/BottomSheet/components/BottomSheetOption/index.ts

@@ -0,0 +1 @@
+export { BottomSheetOption, BottomSheetOptionProps } from "./BottomSheetOption";

package/src/BottomSheet/index.ts

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

package/src/BottomSheet/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  cancel: {
+    id: "cancel",
+    defaultMessage: "Cancel",
+    description: "Text for the cancel action",
+  },
+});

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useFormController";
+export * from "./useIsScreenReaderEnabled";