@jobber/components-native 0.28.0 → 0.29.0

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

@@ -1 +1,4 @@
 export { BottomSheet } from "./BottomSheet";
+export type { BottomSheetRef } from "./BottomSheet";
+export type { BottomSheetOptionProps } from "./components/BottomSheetOption";
+export { BottomSheetOption } from "./components/BottomSheetOption";

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { InputTextProps, InputTextRef } from "../InputText";
+export declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<InputTextRef>>;
+interface InputPasswordProps extends Omit<InputTextProps, "keyboard" | "secureTextEntry" | "textContentType" | "clearable"> {
+    /**
+     * Determines if InputPassword uses privacy eye suffix
+     *
+     * @default true
+     */
+    usePrivacyEye?: boolean;
+}
+export {};

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

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

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

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

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

@@ -16,6 +16,7 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -57,5 +57,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "dcb391abbe27fca411efd97be1c7128cde9d749f"
+  "gitHead": "14a9d66cb036dd7cf163774ff1fe980642296b8e"
 }

package/src/BottomSheet/index.ts

@@ -1 +1,4 @@
 export { BottomSheet } from "./BottomSheet";
+export type { BottomSheetRef } from "./BottomSheet";
+export type { BottomSheetOptionProps } from "./components/BottomSheetOption";
+export { BottomSheetOption } from "./components/BottomSheetOption";

package/src/InputPassword/InputPassword.test.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { InputPassword } from "./InputPassword";
+import { messages } from "./messages";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
+
+const MockInputFieldWrapper = jest.fn();
+jest.mock("../InputFieldWrapper", () => ({
+  ...jest.requireActual("../InputFieldWrapper"),
+  InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
+    MockInputFieldWrapper(props);
+    return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
+  },
+}));
+describe("InputPassword", () => {
+  it("renders an InputPassword", () => {
+    const value = "password";
+    const { getByDisplayValue } = render(<InputPassword value={value} />);
+    expect(getByDisplayValue(value)).toBeTruthy();
+  });
+
+  it("displays the validation message when an invalid password is entered", async () => {
+    const a11yLabel = "InputPasswordTest";
+    const { getByText, getByLabelText } = render(
+      <InputPassword value="" accessibilityLabel={a11yLabel} />,
+    );
+
+    await waitFor(() => {
+      fireEvent(getByLabelText(a11yLabel), "blur");
+    });
+
+    expect(
+      getByText(messages.passwordRequired.defaultMessage, {
+        includeHiddenElements: true,
+      }),
+    ).toBeDefined();
+  });
+
+  describe("InputPassword gets the expected props", () => {
+    it("renders an invalid InputPassword", () => {
+      const props = { invalid: true };
+      render(<InputPassword {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+  });
+
+  describe("Privacy eye", () => {
+    it("renders when usePrivaryEye is true", () => {
+      const testId = "eye";
+      const { getByTestId } = render(
+        <InputPassword
+          value="password"
+          suffix={{
+            icon: testId,
+          }}
+        />,
+      );
+
+      expect(getByTestId("eye")).toBeDefined();
+    });
+
+    it("does not render when usePrivaryEye is false", () => {
+      const testId = "eye";
+      const { queryByTestId } = render(
+        <InputPassword
+          value="password"
+          usePrivacyEye={false}
+          suffix={{
+            icon: testId,
+          }}
+        />,
+      );
+
+      expect(queryByTestId("eye")).toBeNull();
+    });
+
+    it("obscures the password by default", () => {
+      const { getByDisplayValue } = render(
+        <InputPassword
+          value="password"
+          suffix={{
+            icon: "eye",
+          }}
+        />,
+      );
+
+      expect(getByDisplayValue("password").props.secureTextEntry).toBeTruthy();
+    });
+  });
+});

package/src/InputPassword/InputPassword.tsx

@@ -0,0 +1,68 @@
+import React, { Ref, forwardRef, useState } from "react";
+import { useIntl } from "react-intl";
+import { IconNames } from "@jobber/design";
+import { messages } from "./messages";
+import { InputText, InputTextProps, InputTextRef } from "../InputText";
+
+export const InputPassword = forwardRef(InputPasswordInternal);
+
+interface InputPasswordProps
+  extends Omit<
+    InputTextProps,
+    "keyboard" | "secureTextEntry" | "textContentType" | "clearable"
+  > {
+  /**
+   * Determines if InputPassword uses privacy eye suffix
+   *
+   * @default true
+   */
+  usePrivacyEye?: boolean;
+}
+
+function InputPasswordInternal(
+  { usePrivacyEye = true, ...props }: InputPasswordProps,
+  ref: Ref<InputTextRef>,
+): JSX.Element {
+  const { formatMessage } = useIntl();
+  const [passwordHidden, setPasswordHidden] = useState(true);
+  const [privacyEye, setPrivacyEye] = useState<IconNames>("eye");
+
+  const handleOnPress = () => {
+    if (privacyEye === "eye") {
+      setPrivacyEye("eyeCrossed");
+      setPasswordHidden(false);
+    } else if (privacyEye === "eyeCrossed") {
+      setPrivacyEye("eye");
+      setPasswordHidden(true);
+    }
+  };
+
+  const privacyEyeSuffix = () => {
+    if (usePrivacyEye === true) {
+      return {
+        icon: privacyEye,
+        onPress: handleOnPress,
+      };
+    }
+    return undefined;
+  };
+
+  return (
+    <InputText
+      {...props}
+      ref={ref}
+      keyboard="default"
+      secureTextEntry={passwordHidden}
+      textContentType="password"
+      clearable="never"
+      suffix={privacyEyeSuffix()}
+      validations={{
+        required: {
+          value: true,
+          message: formatMessage(messages.passwordRequired),
+        },
+        ...props.validations,
+      }}
+    />
+  );
+}

package/src/InputPassword/index.ts

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

package/src/InputPassword/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  passwordRequired: {
+    id: "passwordRequired",
+    defaultMessage: "Enter a password",
+    description: "Validation error message for missing password",
+  },
+});

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputText";