@jobber/components-native 0.38.0 → 0.40.0

package/src/InputDate/InputDate.tsx

@@ -0,0 +1,231 @@
+import React, { useMemo, useState } from "react";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { Platform } from "react-native";
+import { FieldError, UseControllerProps } from "react-hook-form";
+import { XOR } from "ts-xor";
+import { useIntl } from "react-intl";
+import { utcToZonedTime } from "date-fns-tz";
+import { format as formatDate } from "date-fns";
+import { messages } from "./messages";
+import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { FormField } from "../FormField";
+import { InputPressable } from "../InputPressable";
+import { useAtlantisContext } from "../AtlantisContext";
+
+interface BaseInputDateProps
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+  /**
+   * Defaulted to "always" so user can clear the dates whenever there's a value.
+   */
+  readonly clearable?: Extract<Clearable, "always" | "never">;
+
+  /**
+   * This label is shown to the user when there's no selected date.
+   */
+  readonly emptyValueLabel?: string;
+
+  /**
+   * Maximum date the user can set.
+   */
+  readonly maxDate?: Date;
+
+  /**
+   * Minimum date the user can set
+   */
+  readonly minDate?: Date;
+
+  /**
+   * VoiceOver will read this string when a user selects the element
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Helps users understand what will happen when they perform an action
+   */
+  readonly accessibilityHint?: string;
+}
+
+interface FormControlledInputDate extends BaseInputDateProps {
+  /**
+   * Adding a `name` would make this component "Form controlled" and must be
+   * nested within a `<Form />` component.
+   *
+   * Cannot be declared if `value` prop is used.
+   */
+  readonly name: string;
+
+  /**
+   * Shows an error message below the field and highlights it red when the
+   * value is invalid. Only applies when nested within a `<Form />` component.
+   *
+   * You can see **most** of the rules you can pass in
+   * [React-hook-form Documentation](https://react-hook-form.com/api/useform/register#options).
+   */
+  readonly validations?: UseControllerProps["rules"];
+
+  /**
+   * The initial value for the input.
+   */
+  readonly defaultValue?: Date;
+
+  /**
+   * The callback that fires whenever a date gets selected.
+   */
+  readonly onChange?: (value?: Date | null) => void;
+}
+
+interface DevControlledInputDate extends BaseInputDateProps {
+  /**
+   * The value shown on the field. This gets automatically formatted to the
+   * account's date format.
+   *
+   * Cannot be declared if `name` prop is used.
+   */
+  readonly value: Date | string | undefined;
+
+  /**
+   * The callback that fires whenever a date gets selected.
+   */
+  readonly onChange: (value?: Date) => void;
+}
+
+export type InputDateProps = XOR<
+  FormControlledInputDate,
+  DevControlledInputDate
+>;
+
+function formatInvalidState(
+  error: FieldError | undefined,
+  invalid: InputFieldWrapperProps["invalid"],
+): boolean | string {
+  if (invalid) return invalid;
+
+  if (error && error.message) {
+    return error.message;
+  }
+
+  return Boolean(error);
+}
+
+const display = Platform.OS === "ios" ? "inline" : "default";
+
+/**
+ * Allow users to select a date using the device date picker.
+ */
+export function InputDate(props: InputDateProps): JSX.Element {
+  if (props.name) {
+    return (
+      <FormField<Date>
+        name={props.name}
+        defaultValue={props.defaultValue}
+        validations={props.validations}
+      >
+        {({ value, onChange, onBlur }, error) => (
+          <InternalInputDate
+            {...props}
+            value={value}
+            onChange={(newValue?: Date | null) => {
+              onChange(newValue);
+              onBlur();
+              props.onChange?.(newValue);
+            }}
+            invalid={formatInvalidState(error, props.invalid)}
+          />
+        )}
+      </FormField>
+    );
+  }
+
+  return <InternalInputDate {...props} />;
+}
+
+function InternalInputDate({
+  clearable = "always",
+  disabled,
+  emptyValueLabel,
+  invalid,
+  maxDate,
+  minDate,
+  placeholder,
+  value,
+  name,
+  onChange,
+  accessibilityLabel,
+  accessibilityHint,
+}: InputDateProps): JSX.Element {
+  const [showPicker, setShowPicker] = useState(false);
+  const { formatMessage } = useIntl();
+  const { timeZone, dateFormat } = useAtlantisContext();
+
+  const date = useMemo(() => {
+    if (typeof value === "string") return new Date(value);
+    return value;
+  }, [value]);
+
+  const formattedDate = useMemo(() => {
+    if (date) {
+      const zonedTime = utcToZonedTime(date, timeZone);
+      return formatDate(zonedTime, dateFormat);
+    }
+
+    return emptyValueLabel;
+  }, [date, emptyValueLabel, timeZone, dateFormat]);
+
+  const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
+
+  const placeholderLabel =
+    placeholder ?? formatMessage(messages.datePlaceholder);
+
+  return (
+    <>
+      <InputPressable
+        clearable={canClearDate}
+        disabled={disabled}
+        invalid={invalid}
+        placeholder={placeholderLabel}
+        prefix={{ icon: "calendar" }}
+        value={formattedDate}
+        onClear={handleClear}
+        onPress={showDatePicker}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+      />
+      <DateTimePicker
+        testID="inputDate-datePicker"
+        date={date || undefined}
+        display={display}
+        isVisible={showPicker}
+        maximumDate={maxDate}
+        minimumDate={minDate}
+        mode="date"
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+
+  function showDatePicker() {
+    setShowPicker(true);
+  }
+
+  function handleConfirm(newVal: Date) {
+    setShowPicker(false);
+    onChange?.(newVal);
+  }
+
+  function handleCancel() {
+    setShowPicker(false);
+
+    // Ensure a change happens so we trigger the validation of one exists
+    onChange?.(date);
+  }
+
+  function handleClear() {
+    // Returns null only for Form controlled scenarios due to a limitation of react-hook-form that doesn't allow passing undefined to form values.
+    if (name) {
+      onChange?.(null);
+    } else {
+      onChange?.(undefined);
+    }
+  }
+}

package/src/InputDate/index.ts

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

package/src/InputDate/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  datePlaceholder: {
+    id: "datePlaceholder",
+    defaultMessage: "Date",
+    description: "Default input label for the InputDate component",
+  },
+});

package/src/InputNumber/InputNumber.tsx

@@ -14,7 +14,7 @@ export interface InputNumberProps
   > {
   readonly value?: number;
   readonly defaultValue?: number;
-  readonly onChange: (newValue?: number | string | undefined) => void;
+  readonly onChange?: (newValue?: number | string | undefined) => void;
   readonly keyboard?: NumberKeyboard;
   /**
    * Used to locate this view in end-to-end tests

package/src/Menu/Menu.style.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const menuWidth = 208;
+
+export const styles = StyleSheet.create({
+  menu: {
+    position: "absolute",
+    backgroundColor: tokens["color-surface"],
+    paddingHorizontal: tokens["space-small"],
+    paddingVertical: tokens["space-small"] + tokens["space-smallest"],
+    borderRadius: tokens["radius-larger"],
+    width: menuWidth,
+    ...tokens["shadow-high"],
+  },
+});

package/src/Menu/Menu.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Host } from "react-native-portalize";
+import { View } from "react-native";
+import { tokens } from "@jobber/design/foundation";
+import { Menu, MenuOptionProps, MenuProps } from ".";
+import { messages } from "./messages";
+import { Icon } from "../Icon";
+import { Button } from "../Button";
+
+const mockOnPress = jest.fn();
+jest
+  .spyOn(View.prototype, "measureInWindow")
+  .mockImplementation(cb => cb(50, 50, 100, 100));
+
+const setup = (props?: MenuProps) => {
+  return render(
+    <Host>
+      <Menu
+        menuOptions={props?.menuOptions}
+        customActivator={props?.customActivator}
+      />
+    </Host>,
+  );
+};
+
+describe("Menu", () => {
+  beforeEach(() => {
+    mockOnPress.mockClear();
+  });
+
+  it("renders the default Activator", () => {
+    const { getByTestId, getByLabelText } = setup({
+      menuOptions: [{ label: "hi", icon: "add", onPress: mockOnPress }],
+    });
+
+    expect(getByTestId("more")).toBeDefined();
+    expect(getByLabelText(messages.more.defaultMessage)).toBeDefined();
+  });
+
+  it("renders every menu option when menu is opened", () => {
+    const menuOptions: MenuOptionProps[] = [
+      { label: "option1", icon: "add", onPress: mockOnPress },
+      { label: "option2", icon: "arrowDown", onPress: mockOnPress },
+      { label: "option3", onPress: mockOnPress },
+    ];
+    const { getByLabelText } = setup({
+      menuOptions,
+    });
+
+    fireEvent.press(getByLabelText(messages.more.defaultMessage));
+    expect(getByLabelText(menuOptions[0].label)).toBeDefined();
+    expect(getByLabelText(menuOptions[1].label)).toBeDefined();
+    expect(getByLabelText(menuOptions[2].label)).toBeDefined();
+  });
+
+  describe("Custom Activator", () => {
+    it("renders a custom Activator", () => {
+      const { getByTestId } = setup({
+        menuOptions: [{ label: "hi", onPress: mockOnPress }],
+        customActivator: <Icon name="addNote" />,
+      });
+
+      expect(getByTestId("addNote")).toBeDefined();
+    });
+
+    it("renders menu when the custom activator is clicked", () => {
+      const { getByLabelText, getByTestId, getAllByTestId } = setup({
+        menuOptions: [
+          { label: "hi", icon: "add", onPress: mockOnPress },
+          { label: "option2", onPress: mockOnPress },
+        ],
+        customActivator: <Icon name="addNote" />,
+      });
+
+      fireEvent.press(getByTestId("addNote"));
+
+      expect(getAllByTestId("ATL-MENU-OPTIONS")).toHaveLength(2);
+      expect(getByTestId("add")).toBeDefined();
+      expect(getByLabelText("hi")).toBeDefined();
+    });
+
+    describe("Pressable used as Custom Activator", () => {
+      it("menu is open and custom activator's onPress is called", () => {
+        const mockActivatorPress = jest.fn();
+        const buttonLabel = "Test me!";
+        const menuOptions: MenuOptionProps[] = [
+          { label: "menuOption", icon: "add", onPress: mockOnPress },
+        ];
+
+        const { getByLabelText } = setup({
+          menuOptions,
+          customActivator: (
+            <Button label={buttonLabel} onPress={mockActivatorPress} />
+          ),
+        });
+
+        fireEvent.press(getByLabelText(buttonLabel));
+
+        expect(mockActivatorPress).toHaveBeenCalledTimes(1);
+        expect(getByLabelText(menuOptions[0].label)).toBeDefined();
+      });
+    });
+  });
+
+  describe("Menu Options", () => {
+    it("fires the onPress of the menu option", () => {
+      const { getByLabelText } = setup({
+        menuOptions: [
+          {
+            label: "hi",
+            icon: "add",
+            onPress: mockOnPress,
+            destructive: true,
+          },
+        ],
+      });
+
+      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText("hi"));
+      expect(mockOnPress).toHaveBeenCalled();
+    });
+
+    it("renders a menuOption with an icon with destructive styling", () => {
+      const { getByLabelText, getByTestId } = setup({
+        menuOptions: [
+          { label: "hi", icon: "add", onPress: mockOnPress, destructive: true },
+        ],
+      });
+
+      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      expect(getByTestId("add").props.style).toContainEqual({
+        display: "flex",
+        fill: tokens["color-critical"],
+        height: 24,
+        verticalAlign: "middle",
+        width: 24,
+      });
+    });
+
+    it("closes the menu after clicking on a menu option", () => {
+      const { getByLabelText, queryByLabelText } = setup({
+        menuOptions: [
+          {
+            label: "hi",
+            icon: "add",
+            onPress: mockOnPress,
+            destructive: true,
+          },
+        ],
+      });
+
+      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      fireEvent.press(getByLabelText("hi"));
+      expect(mockOnPress).toHaveBeenCalled();
+      expect(queryByLabelText("hi")).toBeNull();
+    });
+
+    it("transforms the text", () => {
+      const { getByLabelText, getByText } = setup({
+        menuOptions: [
+          {
+            label: "hi",
+            icon: "add",
+            onPress: mockOnPress,
+            textTransform: "capitalize",
+          },
+        ],
+      });
+      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      expect(getByText("Hi")).toBeDefined();
+    });
+
+    it("does not transform the text when textTransform set to none", () => {
+      const { getByLabelText, getByText } = setup({
+        menuOptions: [
+          {
+            label: "hi",
+            icon: "add",
+            onPress: mockOnPress,
+            textTransform: "none",
+          },
+        ],
+      });
+      fireEvent.press(getByLabelText(messages.more.defaultMessage));
+      expect(getByText("hi")).toBeDefined();
+    });
+  });
+
+  it("renders a menu when the default activator is clicked", () => {
+    const { getByLabelText, getByTestId } = setup({
+      menuOptions: [{ label: "hi", icon: "add", onPress: mockOnPress }],
+    });
+
+    fireEvent.press(getByLabelText(messages.more.defaultMessage));
+
+    expect(getByTestId("ATL-MENU-OPTIONS")).toBeDefined();
+    expect(getByTestId("add")).toBeDefined();
+    expect(getByLabelText("hi")).toBeDefined();
+  });
+});

package/src/Menu/Menu.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback, useRef, useState } from "react";
+import {
+  LayoutRectangle,
+  Pressable,
+  View,
+  useWindowDimensions,
+} from "react-native";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { styles } from "./Menu.style";
+import { messages } from "./messages";
+import { findViewpoint } from "./utils";
+import { MenuProps } from "./types";
+import { MenuOption } from "./components/MenuOption";
+import { Overlay } from "./components/Overlay";
+import { tokens } from "../utils/design";
+import { Button } from "../Button";
+import { Content } from "../Content";
+import { useAtlantisContext } from "../AtlantisContext";
+
+export function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element {
+  const [open, setOpen] = useState<boolean>(false);
+  const [menuPosition, setMenuPosition] = useState<object>();
+  const activatorLayout = useRef<LayoutRectangle>();
+  const menuButtonRef = useRef<View | null>();
+  const screenInfo = useScreenInformation();
+
+  const { formatMessage } = useIntl();
+
+  const findMenuLayout = useCallback(() => {
+    if (activatorLayout.current) {
+      setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
+    }
+  }, [screenInfo, activatorLayout]);
+
+  const activatorOnPress = (onPress?: () => void) => {
+    menuButtonRef.current?.measureInWindow(
+      (x: number, y: number, width: number, height: number) => {
+        activatorLayout.current = {
+          x,
+          y,
+          width,
+          height,
+        };
+        findMenuLayout();
+        setOpen(true);
+        onPress && onPress();
+      },
+    );
+  };
+
+  return (
+    <>
+      <View
+        ref={ref => {
+          menuButtonRef.current = ref;
+        }}
+        collapsable={false}
+      >
+        {customActivator && (
+          <Pressable
+            style={({ pressed }) => [
+              {
+                opacity: pressed ? tokens["opacity-pressed"] : 1,
+              },
+            ]}
+            pointerEvents="box-only"
+            onPress={() => {
+              activatorOnPress(customActivator.props.onPress);
+            }}
+            onLongPress={customActivator.props.onLongPress}
+          >
+            {customActivator}
+          </Pressable>
+        )}
+
+        {!customActivator && (
+          <Button
+            icon="more"
+            accessibilityLabel={formatMessage(messages.more)}
+            variation="cancel"
+            type="tertiary"
+            onPress={() => {
+              activatorOnPress();
+            }}
+          />
+        )}
+      </View>
+      <Portal>
+        {open && (
+          <>
+            <Overlay setOpen={setOpen} />
+            <View style={[open && menuPosition, styles.menu]}>
+              <Content spacing="none" childSpacing="small">
+                {menuOptions?.map((menuOption, index) => {
+                  return (
+                    <MenuOption {...menuOption} key={index} setOpen={setOpen} />
+                  );
+                })}
+              </Content>
+            </View>
+          </>
+        )}
+      </Portal>
+    </>
+  );
+}
+
+function useScreenInformation() {
+  const { headerHeight } = useAtlantisContext();
+  const windowWidth = useWindowDimensions().width;
+  const { height: windowHeight } = useSafeAreaFrame();
+
+  return { headerHeight, windowWidth, windowHeight };
+}

package/src/Menu/components/MenuOption/MenuOption.style.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  menuOption: {
+    display: "flex",
+    paddingHorizontal: tokens["space-base"],
+    paddingVertical: tokens["space-small"],
+    borderRadius: tokens["radius-large"],
+  },
+});

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import capitalize from "lodash/capitalize";
+import { styles } from "./MenuOption.style";
+import { MenuOptionInternalProps } from "../../types";
+import { tokens } from "../../../utils/design";
+import { Flex } from "../../../Flex";
+import { Typography } from "../../../Typography";
+import { Icon } from "../../../Icon";
+
+export function MenuOption({
+  label,
+  icon,
+  iconColor = "heading",
+  textAlign,
+  destructive,
+  textTransform = "capitalize",
+  onPress,
+  setOpen,
+}: MenuOptionInternalProps): JSX.Element {
+  const destructiveColor = "critical";
+  const textVariation = destructive ? destructiveColor : "heading";
+  return (
+    <View testID="ATL-MENU-OPTIONS">
+      <Pressable
+        style={({ pressed }) => [
+          styles.menuOption,
+          { opacity: pressed ? tokens["opacity-pressed"] : 1 },
+        ]}
+        onPress={() => {
+          onPress();
+          setOpen(false);
+        }}
+        accessibilityLabel={label}
+      >
+        <Flex
+          template={["grow", "shrink"]}
+          align={"flex-start"}
+          gap={"smaller"}
+        >
+          <Typography
+            selectable={false}
+            color={textVariation}
+            fontWeight={"semiBold"}
+            lineHeight={"large"}
+            align={textAlign}
+          >
+            {textTransform === "capitalize"
+              ? capitalize(label.toLocaleLowerCase())
+              : label}
+          </Typography>
+
+          {icon && (
+            <Icon
+              name={icon}
+              color={destructive ? destructiveColor : iconColor}
+            />
+          )}
+        </Flex>
+      </Pressable>
+    </View>
+  );
+}

package/src/Menu/components/MenuOption/index.ts

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

package/src/Menu/components/Overlay/Overlay.style.ts

@@ -0,0 +1,13 @@
+import { Dimensions, StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+const { height } = Dimensions.get("window");
+
+export const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: tokens["color-overlay"],
+    opacity: 0,
+    height,
+  },
+});

package/src/Menu/components/Overlay/Overlay.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./Overlay.style";
+import { OverlayProp } from "../../types";
+
+export function Overlay({ setOpen }: OverlayProp): JSX.Element {
+  return (
+    <Pressable
+      onPressIn={() => {
+        setOpen(false);
+      }}
+    >
+      <View style={styles.overlay} />
+    </Pressable>
+  );
+}

package/src/Menu/components/Overlay/index.ts

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