@jobber/components-native 0.22.0 → 0.24.0

package/src/Switch/components/BaseSwitch/__snapshots__/BaseSwitch.test.tsx.snap

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a Switch with defaultValue false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={4}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={false}
+/>
+`;
+
+exports[`renders a Switch with defaultValue true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={2}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={true}
+/>
+`;
+
+exports[`renders a Switch with value false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={3}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={false}
+/>
+`;
+
+exports[`renders a Switch with value true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={1}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={true}
+/>
+`;
+
+exports[`renders a disabled Switch with value false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": true,
+    }
+  }
+  collapsable={false}
+  disabled={true}
+  handlerTag={6}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={false}
+/>
+`;
+
+exports[`renders a disabled Switch with value true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": true,
+    }
+  }
+  collapsable={false}
+  disabled={true}
+  handlerTag={5}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="rgb(125, 176, 14)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "rgb(244, 244, 244)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="rgb(244, 244, 244)"
+  value={true}
+/>
+`;

package/src/Switch/components/BaseSwitch/index.ts

@@ -0,0 +1,2 @@
+export { BaseSwitch } from "./BaseSwitch";
+export type { BaseSwitchProps } from "./BaseSwitch";

package/src/Switch/index.ts

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

package/src/Toast/Toast.styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    paddingHorizontal: tokens["space-base"],
+    paddingBottom: tokens["space-base"],
+  },
+  toast: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    maxWidth: 540,
+    paddingVertical: tokens["space-small"],
+    backgroundColor: tokens["color-blue"],
+    borderRadius: 6,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+  },
+  toastMessage: {
+    justifyContent: "center",
+    paddingLeft: tokens["space-base"],
+    paddingVertical: tokens["space-small"],
+    flexShrink: 1,
+  },
+  toastIcon: {
+    justifyContent: "center",
+  },
+});

package/src/Toast/Toast.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
+import { AccessibilityInfo } from "react-native";
+import { Toast, showToast } from ".";
+import { Button } from "../Button";
+import { MockSafeAreaProvider } from "../utils/test";
+
+interface ToastSetupProps {
+  bottomOffset?: number;
+  message?: string;
+}
+
+async function expectToastWithMessage(message: string): Promise<void> {
+  expect(await screen.findByText(message)).toBeDefined();
+
+  await waitFor(() => {
+    // We also need to assert the accessibility info because otherwise
+    // the test will 'overflow' and cause other tests to fail.
+    expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith(
+      message,
+    );
+
+    jest.mocked(AccessibilityInfo.announceForAccessibility).mockClear();
+  });
+}
+
+function setup({ bottomOffset, message = "Notify message" }: ToastSetupProps) {
+  return render(
+    <MockSafeAreaProvider>
+      <Button
+        label="Press me"
+        accessibilityLabel="Button label"
+        onPress={() => showToast({ message, bottomTabsVisible: false })}
+      />
+      <Toast bottomOffset={bottomOffset} />
+    </MockSafeAreaProvider>,
+  );
+}
+
+describe("Toast", () => {
+  it("shows the toast on trigger", async () => {
+    const { getByLabelText } = setup({ bottomOffset: 20 });
+
+    const toastTriggerButton = getByLabelText("Button label");
+    fireEvent.press(toastTriggerButton);
+
+    await expectToastWithMessage("Notify message");
+  });
+
+  describe("When the message length exceed the defined maximum", () => {
+    const over60CharactersMsg =
+      "really really really really really really really really really really really really really really really really really really really long message";
+
+    it("should log a warning that the message length is too long", async () => {
+      const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
+      const { getByLabelText } = setup({ message: over60CharactersMsg });
+
+      const toastTriggerButton = getByLabelText("Button label");
+      fireEvent.press(toastTriggerButton);
+
+      await expectToastWithMessage(over60CharactersMsg);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        "Jobber Design Warning: Message length limit exceeded, your current length is 145, the maximum allowed is 60. please talk with your designer",
+      );
+      consoleSpy.mockRestore();
+    });
+  });
+});

package/src/Toast/Toast.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import Toast, {
+  ToastConfig,
+  ToastConfigParams,
+  ToastPosition,
+} from "react-native-toast-message";
+import { AccessibilityInfo, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useIntl } from "react-intl";
+import { styles } from "./Toast.styles";
+import { messages } from "./messages";
+import { tokens } from "../utils/design";
+import { Text } from "../Text";
+import { IconButton } from "../IconButton";
+
+const MAX_TOAST_MESSAGE_LENGTH = 60;
+const ANNOUNCEMENT_DELAY = 100;
+
+function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
+  const { bottom } = useSafeAreaInsets();
+  const { formatMessage } = useIntl();
+  const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+  return (
+    <View style={toastContainerStyles}>
+      <View style={styles.toast}>
+        <TouchableOpacity
+          style={styles.toastMessage}
+          accessibilityRole="alert"
+          accessibilityLabel={formatMessage(messages.toastNotificationLabel)}
+        >
+          <Text reverseTheme>{text1}</Text>
+        </TouchableOpacity>
+        <View style={styles.toastIcon}>
+          <IconButton
+            onPress={Toast.hide}
+            name="remove"
+            customColor={tokens["color-greyBlue--light"]}
+            accessibilityLabel={formatMessage(messages.dismissA11yLabel)}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const toastConfig = {
+  default: DefaultToast,
+} as ToastConfig;
+
+export interface JobberToastProps {
+  /**
+   * Offset from the bottom of the screen in px.
+   * Has effect only when the position is "bottom".
+   * @default 40
+   */
+  bottomOffset?: number;
+}
+
+export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {
+  return <Toast bottomOffset={bottomOffset} config={toastConfig} />;
+}
+
+export interface ShowToastParams {
+  /**
+   * Message to be displayed in the toast
+   */
+  readonly message: string;
+
+  /**
+   * Indicates if the bottom tabs are being shown
+   * It is equired to define the display position of the toast.
+   */
+  readonly bottomTabsVisible: boolean;
+
+  /**
+   * Where the toast will be positioned
+   * @default "bottom"
+   */
+  readonly position?: ToastPosition;
+}
+
+export function showToast({
+  message,
+  bottomTabsVisible,
+  position = "bottom",
+}: ShowToastParams): void {
+  const bottomOffset = getBottomTabsOffset(bottomTabsVisible);
+  const maxDuration = 10000;
+  const minDuration = 5000;
+
+  let visibilityTime = message.length * 200;
+
+  if (visibilityTime > maxDuration) {
+    visibilityTime = maxDuration;
+  } else if (visibilityTime < minDuration) {
+    visibilityTime = minDuration;
+  }
+
+  if (message.length > MAX_TOAST_MESSAGE_LENGTH) {
+    console.warn(
+      `Jobber Design Warning: Message length limit exceeded, your current length is ${message.length}, the maximum allowed is ${MAX_TOAST_MESSAGE_LENGTH}. please talk with your designer`,
+    );
+  }
+
+  Toast.show({
+    type: "default",
+    text1: message,
+    visibilityTime,
+    bottomOffset,
+    position,
+    onShow: () => {
+      setTimeout(() => {
+        AccessibilityInfo.announceForAccessibility(message || "");
+      }, ANNOUNCEMENT_DELAY);
+    },
+  });
+}
+
+function getBottomTabsOffset(bottomTabsVisible: boolean) {
+  const navBarHeight = tokens["space-largest"] + tokens["space-small"];
+  const navBarBorderTopWidth = tokens["space-minuscule"];
+
+  if (bottomTabsVisible) {
+    return navBarHeight + navBarBorderTopWidth + tokens["space-base"];
+  }
+
+  return tokens["space-base"];
+}

package/src/Toast/index.ts

@@ -0,0 +1,2 @@
+export { JobberToast as Toast, showToast } from "./Toast";
+export type { ShowToastParams } from "./Toast";

package/src/Toast/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  toastNotificationLabel: {
+    id: "toastNotificationLabel",
+    defaultMessage: "Toast Notification",
+    description: "Accessibility label for the Toast",
+  },
+  dismissA11yLabel: {
+    id: "dismissA11yLabel",
+    defaultMessage: "Dismiss toast notification",
+    description: "Accessibility label to dismiss the toast when pressing X",
+  },
+});

package/src/index.ts

@@ -18,5 +18,7 @@ export * from "./InputPressable";
 export * from "./InputText";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
+export * from "./Switch";
 export * from "./Text";
+export * from "./Toast";
 export * from "./Typography";

package/src/utils/test/MockSafeAreaProvider.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {
+  EdgeInsets,
+  Rect,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
+
+interface MockSafeAreaProviderProps {
+  children: React.ReactNode;
+  frame?: Rect;
+  insets?: EdgeInsets;
+}
+
+export function MockSafeAreaProvider({
+  frame,
+  insets,
+  children,
+}: MockSafeAreaProviderProps): JSX.Element {
+  const initialFrame: Rect = { x: 0, y: 0, width: 0, height: 0 };
+  const initialInsets: EdgeInsets = { bottom: 50, top: 50, left: 0, right: 0 };
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: frame || initialFrame,
+        insets: insets || initialInsets,
+      }}
+    >
+      {children}
+    </SafeAreaProvider>
+  );
+}

package/src/utils/test/index.ts

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