@jobber/components-native 0.84.4-JOB-138679-b1552ab.68 → 0.84.4-match-mobi-accfa8a.9

package/src/Form/context/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
@@ -21,7 +21,7 @@ interface LocalCacheOptions {
 export interface AtlantisFormContextProps {
   useConfirmBeforeBack: (
     props: UseConfirmBeforeBackProps,
-  ) => MutableRefObject<() => void>;
+  ) => RefObject<() => void>;
   useInternalFormLocalCache: <TData extends FieldValues>(
     formMethods: UseFormReturn<TData>,
     cacheKey?: string,

package/src/Form/hooks/useInternalForm.ts

@@ -5,7 +5,7 @@ import type {
   UseFormReturn,
 } from "react-hook-form";
 import { useForm } from "react-hook-form";
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { useAtlantisContext } from "../../AtlantisContext";
 import { useAtlantisFormContext } from "../context/AtlantisFormContext";
@@ -32,7 +32,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly handleSubmit: UseFormHandleSubmit<T>;
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
-  readonly removeListenerRef: MutableRefObject<() => void>;
+  readonly removeListenerRef: RefObject<() => void>;
   readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 

package/src/InputText/InputText.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
 } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
-import { Platform } from "react-native";
+import { Button, Platform } from "react-native";
 import { FormProvider, useForm } from "react-hook-form";
 import type { InputTextProps } from "./InputText";
 import { InputText } from "./InputText";
@@ -623,6 +623,120 @@ describe("InputText", () => {
       });
     });
   });
+
+  describe("with FormProvider", () => {
+    const mockOnSubmit = jest.fn();
+    const inputName = "testInput";
+    const inputAccessibilityLabel = "Test Input";
+    const saveButtonText = "Save";
+
+    function FormWithProvider({
+      defaultValue,
+    }: {
+      readonly defaultValue?: string;
+    }) {
+      const formMethods = useForm();
+
+      return (
+        <FormProvider {...formMethods}>
+          <InputText
+            name={inputName}
+            defaultValue={defaultValue}
+            accessibilityLabel={inputAccessibilityLabel}
+          />
+          <Button
+            onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+            title={saveButtonText}
+            accessibilityLabel={saveButtonText}
+          />
+        </FormProvider>
+      );
+    }
+
+    beforeEach(() => {
+      mockOnSubmit.mockClear();
+    });
+
+    describe("defaultValue prop sets form value", () => {
+      it("sets form value to string when defaultValue is provided", async () => {
+        const testValue = "test value";
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue={testValue} />,
+        );
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: testValue,
+        });
+      });
+
+      it("sets form value to undefined when defaultValue is undefined", async () => {
+        const { getByLabelText } = render(<FormWithProvider />);
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: undefined,
+        });
+      });
+
+      it("sets form value to undefined when defaultValue is empty string", async () => {
+        const { getByLabelText } = render(<FormWithProvider defaultValue="" />);
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: undefined,
+        });
+      });
+    });
+
+    describe("input value updates form value", () => {
+      it("updates form value when input text is changed", async () => {
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue="initial" />,
+        );
+
+        const input = getByLabelText(inputAccessibilityLabel);
+        fireEvent.changeText(input, "new value");
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: "new value",
+        });
+      });
+
+      it("preserves defaultValue when input is not interacted with", async () => {
+        const testValue = "preserved value";
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue={testValue} />,
+        );
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: testValue,
+        });
+      });
+    });
+  });
 });
 
 describe("Transform", () => {

package/src/InputText/InputText.tsx

@@ -126,7 +126,7 @@ export interface InputTextProps
   /**
    * Callback that is called when the text input is blurred
    */
-  readonly onBlur?: () => void;
+  readonly onBlur?: (event?: FocusEvent) => void;
 
   /**
    * VoiceOver will read this string when a user selects the associated element
@@ -436,10 +436,10 @@ function InputTextInternal(
           setFocused(true);
           onFocus?.(event);
         }}
-        onBlur={() => {
+        onBlur={event => {
           _name && setFocusedInput("");
           setFocused(false);
-          onBlur?.();
+          onBlur?.(event);
           field.onBlur();
           trimWhitespace(inputTransform(field.value), updateFormAndState);
         }}

package/src/Menu/types.ts

@@ -1,5 +1,5 @@
-import type { IconColorNames, IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
+import type { IconColorNames, IconNames } from "@jobber/design";
 import type { TextAlign } from "../Typography";
 
 export interface MenuOptionProps {

package/src/ProgressBar/ProgressBar.test.tsx

@@ -65,3 +65,112 @@ describe("with stepped variation", () => {
     expect(stepElements).toHaveLength(1);
   });
 });
+
+describe("ProgressBar (native) - UNSAFE_style", () => {
+  it("applies UNSAFE_style.container to the outer wrapper", () => {
+    const containerStyle = { padding: 12, backgroundColor: "papayawhip" };
+    render(
+      <ProgressBar
+        total={100}
+        current={40}
+        UNSAFE_style={{ container: containerStyle }}
+      />,
+    );
+
+    const progressBar = screen.getByRole("progressbar");
+
+    expect(progressBar.props.style).toEqual(
+      expect.objectContaining(containerStyle),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and track in progress variation", () => {
+    const progressBarContainer = { height: 22, borderRadius: 10 };
+    const track = { backgroundColor: "#eee" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        UNSAFE_style={{
+          progressBarContainer,
+          track,
+        }}
+      />,
+    );
+
+    const progressContainer = screen.getByTestId("progressbar-container");
+
+    expect(progressContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    const trackView = screen.getByTestId("progressbar-track");
+    expect(trackView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(track)]),
+    );
+  });
+
+  it("applies UNSAFE_style.inProgressFill and fill in progress variation", () => {
+    const inProgressFill = { backgroundColor: "#f59e0b" };
+    const fill = { backgroundColor: "#10b981" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        inProgress={10}
+        UNSAFE_style={{
+          inProgressFill,
+          fill,
+        }}
+      />,
+    );
+
+    const inProgressView = screen.getByTestId("progressbar-inprogress");
+    const fillView = screen.getByTestId("progressbar-fill");
+
+    expect(inProgressView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(inProgressFill)]),
+    );
+    expect(fillView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(fill)]),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and step in stepped variation", () => {
+    const progressBarContainer = { height: 12 };
+    const step = { backgroundColor: "#d1d5db" };
+
+    render(
+      <ProgressBar
+        variation="stepped"
+        total={4}
+        current={2}
+        inProgress={1}
+        UNSAFE_style={{ progressBarContainer, step }}
+      />,
+    );
+
+    const steppedContainer = screen.getByTestId("progressbar-container");
+
+    expect(steppedContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    // Steps are rendered with testIDs depending on state; collect all steps by known IDs
+    const stepNodes = [
+      ...screen.getAllByTestId("progress-step-completed"),
+      ...screen.getAllByTestId("progress-step-in-progress"),
+      ...screen.getAllByTestId("progress-step-incomplete"),
+    ];
+
+    // At least one step should exist and contain the custom style
+    expect(stepNodes.length).toBeGreaterThan(0);
+    stepNodes.forEach(node => {
+      expect(node.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(step)]),
+      );
+    });
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -17,6 +17,7 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
+  UNSAFE_style,
 }: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -27,6 +28,7 @@ export function ProgressBar({
       accessible
       accessibilityRole="progressbar"
       accessibilityLabel={getA11yLabel()}
+      style={UNSAFE_style?.container}
     >
       {header}
       {variation === "stepped" ? (
@@ -38,31 +40,45 @@ export function ProgressBar({
           }
           loading={loading}
           inProgress={inProgress}
+          UNSAFE_style={UNSAFE_style}
         />
       ) : (
-        <View style={[styles.progressBarContainer, sizeStyles[size]]}>
+        <View
+          testID="progressbar-container"
+          style={[
+            styles.progressBarContainer,
+            sizeStyles[size],
+            UNSAFE_style?.progressBarContainer,
+          ]}
+        >
           <ProgressBarInner
+            testID="progressbar-track"
             width={100}
             animationDuration={0}
             color={
               reverseTheme ? undefined : tokens["color-interactive--background"]
             }
+            style={UNSAFE_style?.track}
           />
           {!loading && (
             <>
               {inProgress && inProgress > 0 ? (
                 <ProgressBarInner
+                  testID="progressbar-inprogress"
                   width={calculateWidth(total, current + inProgress)}
                   color={tokens["color-informative"]}
                   animationDuration={800}
+                  style={UNSAFE_style?.inProgressFill}
                 />
               ) : (
                 <></>
               )}
               <ProgressBarInner
+                testID="progressbar-fill"
                 width={calculateWidth(total, current)}
                 color={tokens["color-interactive"]}
                 animationDuration={600}
+                style={UNSAFE_style?.fill}
               />
             </>
           )}

package/src/ProgressBar/ProgressBarInner.tsx

@@ -1,37 +1,34 @@
 import React from "react";
 import { View } from "react-native";
-// import Reanimated from "react-native-reanimated";
-// import { useTiming } from "utils/reanimated";
+import type { StyleProp, ViewStyle } from "react-native";
 import { useStyles } from "./ProgressBar.style";
 
 interface ProgressBarInnerProps {
   readonly width: number;
   readonly animationDuration?: number;
   readonly color?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
 }
 
 export function ProgressBarInner({
   width,
-  // animationDuration = 0,
   color,
+  style,
+  testID,
 }: ProgressBarInnerProps) {
-  // Animation breaking on Android
-  // const [animatedOpacity] = useTiming({
-  //   duration: animationDuration,
-  //   fromValue: 0,
-  //   toValue: 1,
-  // });
   const styles = useStyles();
 
   return (
     <View
+      testID={testID}
       style={[
         styles.progressBarInner,
         {
           width: `${width}%`,
-          // opacity: animatedOpacity,
           ...(color && { backgroundColor: color }),
         },
+        style,
       ]}
     />
   );

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
+import type { ProgressBarUnsafeStyle } from "./types";
 
 interface ProgressBarSteppedProps {
   readonly total: number;
@@ -8,6 +9,7 @@ interface ProgressBarSteppedProps {
   readonly color?: string;
   readonly loading?: boolean;
   readonly inProgress?: number;
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
 
 export function ProgressBarStepped({
@@ -16,11 +18,19 @@ export function ProgressBarStepped({
   color,
   loading,
   inProgress,
+  UNSAFE_style,
 }: ProgressBarSteppedProps) {
   const styles = useStyles();
 
   return (
-    <View style={[styles.progressBarContainer, { height: 10 }]}>
+    <View
+      testID="progressbar-container"
+      style={[
+        styles.progressBarContainer,
+        { height: 10 },
+        UNSAFE_style?.progressBarContainer,
+      ]}
+    >
       {Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
@@ -39,6 +49,7 @@ export function ProgressBarStepped({
                 step <= inProgressSteps &&
                 styles.inProgressStep,
               lastStep && { marginRight: 0 },
+              UNSAFE_style?.step,
             ]}
             testID={
               isCompleted

package/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap

@@ -18,8 +18,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -37,8 +39,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -56,8 +60,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(207, 79%, 57%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-inprogress"
     />
     <View
       style={
@@ -75,8 +81,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>
@@ -100,8 +108,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -119,8 +129,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -138,8 +150,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "50%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>

package/src/ProgressBar/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 
 export interface ProgressBarProps {
   /**
@@ -44,4 +45,25 @@ export interface ProgressBarProps {
    * @default base
    */
   readonly size?: "smaller" | "small" | "base";
+
+  /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
+   * **last resort**. Using this may result in unexpected side effects.
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   */
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
+}
+
+export interface ProgressBarUnsafeStyle {
+  /** Styles applied to the outer accessible wrapper (role="progressbar"). */
+  container?: StyleProp<ViewStyle>;
+  /** Styles applied to the inner bar container (track container) – controls bar height/rounding. */
+  progressBarContainer?: StyleProp<ViewStyle>;
+  /** Styles applied to each step block in the stepped variation. */
+  step?: StyleProp<ViewStyle>;
+  /** Track/background bar in 'progress' variation (full-width inner) */
+  track?: StyleProp<ViewStyle>;
+  /** Filled/completed portion in 'progress' variation */
+  fill?: StyleProp<ViewStyle>;
+  /** In-progress overlay portion in 'progress' variation */
+  inProgressFill?: StyleProp<ViewStyle>;
 }

package/src/StatusIndicator/StatusIndicator.style.ts

@@ -0,0 +1,14 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useStyles = buildThemedStyles(tokens => {
+  const statusIndicatorDiameter = 8;
+
+  return {
+    statusIndicator: {
+      borderRadius: tokens["radius-circle"],
+      backgroundColor: tokens["color-success"],
+      width: statusIndicatorDiameter,
+      height: statusIndicatorDiameter,
+    },
+  };
+});

package/src/StatusIndicator/StatusIndicator.test.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { StatusIndicator } from "./StatusIndicator";
+
+describe("StatusIndicator", () => {
+  describe("status", () => {
+    describe('when status prop set to default ("success")', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="success" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "warning"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="warning" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "critical"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="critical" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "inactive"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="inactive" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "informative"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="informative" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+  });
+});

package/src/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View } from "react-native";
+import { useStyles } from "./StatusIndicator.style";
+import type { StatusIndicatorType } from "./StatusIndicator.type";
+import { tokens } from "../utils/design";
+
+export interface StatusIndicatorProps {
+  readonly status: StatusIndicatorType;
+}
+
+export function StatusIndicator({ status }: StatusIndicatorProps) {
+  const styles = useStyles();
+
+  return (
+    <View
+      testID={`${status}Indicator`}
+      style={[
+        styles.statusIndicator,
+        { backgroundColor: tokens[`color-${status}`] },
+      ]}
+    />
+  );
+}

package/src/StatusIndicator/StatusIndicator.type.ts

@@ -0,0 +1,6 @@
+export type StatusIndicatorType =
+  | "success"
+  | "warning"
+  | "critical"
+  | "inactive"
+  | "informative";