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

package/src/hooks/useIsScreenReaderEnabled.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+
+export function useIsScreenReaderEnabled(): boolean {
+  const [screenReaderEnabled, setScreenReaderEnabled] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    function handleScreenReaderToggle(isScreenReaderEnabled: boolean) {
+      setScreenReaderEnabled(isScreenReaderEnabled);
+    }
+
+    AccessibilityInfo.isScreenReaderEnabled()
+      .then(enabled => {
+        setScreenReaderEnabled(enabled);
+      })
+      .catch(() => {
+        setScreenReaderEnabled(false);
+      });
+
+    const listener = AccessibilityInfo.addEventListener(
+      "screenReaderChanged",
+      handleScreenReaderToggle,
+    );
+
+    return () => {
+      listener.remove();
+    };
+  }, []);
+
+  return screenReaderEnabled;
+}

package/src/index.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/src/utils/test/wait.ts

@@ -0,0 +1,52 @@
+import { screen } from "@testing-library/react-native";
+import { act } from "react-test-renderer";
+
+/**
+ * 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 async function wait(milliseconds = 0): Promise<void> {
+  await new Promise(resolve => setTimeout(resolve, milliseconds));
+}
+
+/**
+ * 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 const waitForUntestableRender = async (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _explanation: string,
+): Promise<void> => {
+  const before = JSON.stringify(screen.toJSON(), null, 2);
+
+  await act(wait);
+
+  const after = JSON.stringify(screen.toJSON(), null, 2);
+  expect(before).toEqual(after);
+};

package/dist/src/TextList/TextList.js

@@ -1,13 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { styles } from "./TextList.style";
-import { Content } from "../Content";
-import { Text } from "../Text";
-const BULLET_SYMBOL = `\u2022`;
-export function TextList({ items, childSpacing = "none", emphasis, level = "text", spacing = "none", }) {
-    return (React.createElement(React.Fragment, null, items && (React.createElement(View, { style: styles.details },
-        React.createElement(Content, { spacing: spacing, childSpacing: childSpacing }, items.map((item, index) => (React.createElement(View, { style: styles.detail, key: index },
-            React.createElement(Text, { level: level, emphasis: emphasis }, BULLET_SYMBOL),
-            React.createElement(View, { style: styles.detailText },
-                React.createElement(Text, { level: level, emphasis: emphasis }, item))))))))));
-}

package/dist/src/TextList/TextList.style.js

@@ -1,16 +0,0 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-export const styles = StyleSheet.create({
-    details: {
-        flexDirection: "column",
-        marginTop: tokens["space-small"],
-    },
-    detail: {
-        flexDirection: "row",
-        paddingLeft: tokens["space-small"],
-    },
-    detailText: {
-        paddingLeft: tokens["space-small"],
-        flex: 1,
-    },
-});

package/dist/src/TextList/index.js

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

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

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-import { Spacing } from "../Content";
-import { TextLevel } from "../Text";
-interface TextListProps {
-    /**
-     * Text to display.
-     */
-    readonly items?: string[];
-    /**
-     * Change the appearance of the text
-     */
-    readonly emphasis?: "strong";
-    /**
-     * Visual hierarchy of the text.
-     * @default "text"
-     */
-    readonly level?: TextLevel;
-    /**
-     * The amount of spacing that content will give.
-     * @default "none"
-     */
-    readonly spacing?: Spacing;
-    /**
-     * The amount of spacing that will be applied between the list items.
-     * @default "none"
-     */
-    readonly childSpacing?: Spacing;
-}
-export declare function TextList({ items, childSpacing, emphasis, level, spacing, }: TextListProps): JSX.Element;
-export {};

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

@@ -1,14 +0,0 @@
-export declare const styles: {
-    details: {
-        flexDirection: "column";
-        marginTop: number;
-    };
-    detail: {
-        flexDirection: "row";
-        paddingLeft: number;
-    };
-    detailText: {
-        paddingLeft: number;
-        flex: number;
-    };
-};

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

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

package/src/TextList/TextList.style.ts

@@ -1,17 +0,0 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-export const styles = StyleSheet.create({
-  details: {
-    flexDirection: "column",
-    marginTop: tokens["space-small"],
-  },
-  detail: {
-    flexDirection: "row",
-    paddingLeft: tokens["space-small"],
-  },
-  detailText: {
-    paddingLeft: tokens["space-small"],
-    flex: 1,
-  },
-});

package/src/TextList/TextList.test.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
-import { TextList } from "./TextList";
-
-describe("TextList", () => {
-  describe("when the bulletItems is provided", () => {
-    it("displays the text list", () => {
-      const items = ["this is list item uno", "this is list item dos"];
-      const tree = render(<TextList items={items} />);
-
-      expect(tree.toJSON()).toMatchSnapshot();
-    });
-
-    it("displays will not display a bulleted list", () => {
-      const tree = render(<TextList />);
-
-      expect(tree.toJSON()).toMatchSnapshot();
-    });
-  });
-});

package/src/TextList/TextList.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { styles } from "./TextList.style";
-import { Content, Spacing } from "../Content";
-import { Text, TextLevel } from "../Text";
-
-const BULLET_SYMBOL = `\u2022`;
-
-interface TextListProps {
-  /**
-   * Text to display.
-   */
-  readonly items?: string[];
-
-  /**
-   * Change the appearance of the text
-   */
-  readonly emphasis?: "strong";
-
-  /**
-   * Visual hierarchy of the text.
-   * @default "text"
-   */
-  readonly level?: TextLevel;
-
-  /**
-   * The amount of spacing that content will give.
-   * @default "none"
-   */
-  readonly spacing?: Spacing;
-
-  /**
-   * The amount of spacing that will be applied between the list items.
-   * @default "none"
-   */
-  readonly childSpacing?: Spacing;
-}
-
-export function TextList({
-  items,
-  childSpacing = "none",
-  emphasis,
-  level = "text",
-  spacing = "none",
-}: TextListProps): JSX.Element {
-  return (
-    <>
-      {items && (
-        <View style={styles.details}>
-          <Content spacing={spacing} childSpacing={childSpacing}>
-            {items.map((item, index) => (
-              <View style={styles.detail} key={index}>
-                <Text level={level} emphasis={emphasis}>
-                  {BULLET_SYMBOL}
-                </Text>
-                <View style={styles.detailText}>
-                  <Text level={level} emphasis={emphasis}>
-                    {item}
-                  </Text>
-                </View>
-              </View>
-            ))}
-          </Content>
-        </View>
-      )}
-    </>
-  );
-}

package/src/TextList/index.ts

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