@jobber/components-native 0.80.1 → 0.81.0

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
-export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { useSizeStyles } from "./Glimmer.size.style";
 import { useShapeStyles } from "./Glimmer.shape.style";
 export type GlimmerShapes = keyof ReturnType<typeof useShapeStyles>;
@@ -26,5 +27,5 @@ interface GlimmerProps {
 }
 export declare const GLIMMER_TEST_ID = "ATL-Glimmer";
 export declare const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
-export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): JSX.Element;
+export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): React.JSX.Element;
 export {};

package/dist/types/src/ProgressBar/ProgressBarStepped.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;
@@ -5,5 +6,5 @@ interface ProgressBarSteppedProps {
     readonly loading?: boolean;
     readonly inProgress?: number;
 }
-export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): JSX.Element;
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): React.JSX.Element;
 export {};

package/jestSetup.js

@@ -33,5 +33,6 @@ jest.mock("react-native-reanimated", () => {
     FadeIn: {
       duration: () => undefined,
     },
+    useEvent: () => ({ listeners: [] }),
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.80.1",
+  "version": "0.81.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -70,7 +70,7 @@
     "date-fns-tz": "^2.0.0",
     "react": "^18.2.0",
     "react-intl": "^6.4.2",
-    "react-native": ">=0.69.2",
+    "react-native": ">=0.76.0",
     "react-native-gesture-handler": ">=2.10.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "04ad3ff367621aa073dcb0bde7ce4aa13197e875"
+  "gitHead": "53243a521ce9e1f2a05e29674b2d720dd6ffd49e"
 }

package/src/Chip/Chip.test.tsx

@@ -35,7 +35,7 @@ it("renders an inactive Chip with a default backgroundColor", () => {
     backgroundColor: tokens["color-surface--reverse"],
   });
   expect(getByTestId("chipTest").props.style).toContainEqual({
-    backgroundColor: tokens["color-surface--background"],
+    backgroundColor: tokens["color-interactive--background"],
   });
 });
 

package/src/Chip/Chip.tsx

@@ -82,7 +82,7 @@ export function Chip({
         backgroundColor:
           inactiveBackgroundColor === "surface"
             ? tokens["color-surface"]
-            : tokens["color-surface--background"],
+            : tokens["color-interactive--background"],
       },
       isActive && { backgroundColor: accentColor },
     ];

package/src/Disclosure/Disclosure.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { ReactTestInstance } from "react-test-renderer";
 import { Disclosure } from ".";
 import { Text } from "../Text";
@@ -23,49 +23,107 @@ function fireLayoutEvent(disclosureContent: ReactTestInstance) {
   });
 }
 
-it("renders a Disclosure with a header and a content when open is true", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={true}
-      isEmpty={false}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  fireLayoutEvent(disclosure.getByTestId("content"));
-  expect(disclosure).toMatchSnapshot();
-});
+describe("Disclosure", () => {
+  const defaultProps = {
+    header: <Text>This is the header</Text>,
+    content: <Text>This is the content</Text>,
+    onToggle: jest.fn(),
+  };
 
-it("renders a Disclosure with a header and with a content of size 0 when closed is false", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={false}
-      isEmpty={false}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  fireLayoutEvent(disclosure.getByTestId("content"));
-  expect(disclosure).toMatchSnapshot();
-});
+  it("renders a Disclosure with a header and a content when open is true", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={true}
+        isEmpty={false}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+
+    const content = screen.getByTestId("content");
+    fireLayoutEvent(content);
+
+    expect(screen.getByText("This is the content")).toBeTruthy();
+    expect(screen.getByTestId("arrowUp")).toBeTruthy();
+  });
+
+  it("renders a Disclosure with a header and with a content of size 0 when open is false", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={false}
+        isEmpty={false}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+
+    const content = screen.getByTestId("content");
+    fireLayoutEvent(content);
+
+    expect(screen.getByText("This is the content")).toBeTruthy();
+    expect(screen.getByTestId("arrowUp")).toBeTruthy();
+  });
 
-it("should not render the caret when the Disclosure is empty", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={false}
-      isEmpty={true}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  expect(disclosure).toMatchSnapshot();
+  it("should not render the caret when the Disclosure is empty", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={false}
+        isEmpty={true}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+    expect(screen.queryByTestId("arrowUp")).toBeNull();
+  });
+
+  it("calls onToggle when header is pressed", () => {
+    const onToggleMock = jest.fn();
+    const { getByText } = render(
+      <Disclosure
+        {...defaultProps}
+        onToggle={onToggleMock}
+        open={false}
+        isEmpty={false}
+      />,
+    );
+
+    const headerText = getByText("This is the header");
+
+    fireEvent.press(headerText);
+
+    expect(onToggleMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onToggle when header is pressed and isEmpty is true", () => {
+    const onToggleMock = jest.fn();
+    const { getByText } = render(
+      <Disclosure
+        {...defaultProps}
+        onToggle={onToggleMock}
+        open={false}
+        isEmpty={true}
+      />,
+    );
+
+    const headerText = getByText("This is the header");
+
+    fireEvent.press(headerText);
+
+    expect(onToggleMock).not.toHaveBeenCalled();
+  });
 });

package/src/Form/Form.test.tsx

@@ -545,7 +545,7 @@ describe("Form", () => {
   });
 
   describe("Safe Area", () => {
-    it("does render a safe area when there's a saveButtonOffset is provided", () => {
+    it("does render a safe area when there's NO saveButtonOffset provided", () => {
       const { getByTestId } = render(<FormTest onSubmit={onSubmitMock} />);
 
       expect(getByTestId("ATL-FormSafeArea")).toBeDefined();

package/src/FormatFile/components/ProgressBar/ProgressBar.style.tsx

@@ -7,7 +7,7 @@ export const useStyles = buildThemedStyles(tokens => {
       height: 8,
       borderRadius: tokens["radius-circle"],
       overflow: "hidden",
-      backgroundColor: tokens["color-surface--background"],
+      backgroundColor: tokens["color-interactive--background"],
     },
     progress: {
       height: "100%",

package/src/Glimmer/Glimmer.test.tsx

@@ -4,8 +4,8 @@ import {
   fireEvent,
   render as renderComponent,
 } from "@testing-library/react-native";
+import { Animated } from "react-native";
 import { GLIMMER_SHINE_TEST_ID, GLIMMER_TEST_ID, Glimmer } from "./Glimmer";
-import { tokens } from "../utils/design";
 
 let screen: ReturnType<typeof renderComponent<typeof Glimmer>>;
 
@@ -48,6 +48,10 @@ describe("Glimmer", () => {
 
   it("renders sets the correct width", () => {
     jest.useFakeTimers();
+
+    // Spy on Animated.timing to verify the animation configuration
+    const timingSpy = jest.spyOn(Animated, "timing");
+
     render(<Glimmer />);
 
     act(() => {
@@ -62,12 +66,19 @@ describe("Glimmer", () => {
       expect.objectContaining({ transform: [{ translateX: -48 }] }),
     );
 
-    jest.advanceTimersByTime(tokens["timing-loading--extended"]);
+    expect(timingSpy).toHaveBeenCalled();
 
-    expect(element.props.style).toEqual(
-      expect.objectContaining({ transform: [{ translateX: 348 }] }),
-    );
+    // Get the last call to timing
+    const lastCall = timingSpy.mock.calls[timingSpy.mock.calls.length - 1];
+
+    // The first argument should be the animated value
+    // The second argument should be the config
+    const config = lastCall[1];
+
+    // Verify animation targets the right end position (300 + 48 = 348)
+    expect(config.toValue).toBe(348);
 
+    timingSpy.mockRestore();
     jest.useRealTimers();
   });
 });

package/src/ProgressBar/ProgressBar.tsx

@@ -33,7 +33,9 @@ export function ProgressBar({
         <ProgressBarStepped
           total={total}
           current={current}
-          color={reverseTheme ? undefined : tokens["color-surface--background"]}
+          color={
+            reverseTheme ? undefined : tokens["color-interactive--background"]
+          }
           loading={loading}
           inProgress={inProgress}
         />
@@ -43,7 +45,7 @@ export function ProgressBar({
             width={100}
             animationDuration={0}
             color={
-              reverseTheme ? undefined : tokens["color-surface--background"]
+              reverseTheme ? undefined : tokens["color-interactive--background"]
             }
           />
           {!loading && (

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

@@ -34,7 +34,7 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "width": "100%",
           },
           {
-            "backgroundColor": "hsl(53, 21%, 93%)",
+            "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
         ]
@@ -116,7 +116,7 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "width": "100%",
           },
           {
-            "backgroundColor": "hsl(53, 21%, 93%)",
+            "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
         ]

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

@@ -2,61 +2,86 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { BaseSwitch } from "./BaseSwitch";
 
-it("renders a Switch with value true", () => {
-  const tree = render(<BaseSwitch value={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+describe("BaseSwitch", () => {
+  describe("rendering", () => {
+    it("renders with value true", () => {
+      const { getByRole } = render(<BaseSwitch value={true} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(true);
+    });
 
-it("renders a Switch with defaultValue true", () => {
-  const tree = render(<BaseSwitch defaultValue={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders with defaultValue true", () => {
+      const { getByRole } = render(<BaseSwitch defaultValue={true} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(true);
+    });
 
-it("renders a Switch with value false", () => {
-  const tree = render(<BaseSwitch value={false} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders with value false", () => {
+      const { getByRole } = render(<BaseSwitch value={false} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(false);
+    });
 
-it("renders a Switch with defaultValue false", () => {
-  const tree = render(<BaseSwitch defaultValue={false} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders with defaultValue false", () => {
+      const { getByRole } = render(<BaseSwitch defaultValue={false} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(false);
+    });
 
-it("renders a disabled Switch with value true", () => {
-  const tree = render(<BaseSwitch value={true} disabled={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders correctly when disabled with value true", () => {
+      const { getByRole } = render(<BaseSwitch value={true} disabled={true} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(true);
+      expect(switchElement.props.accessibilityState.disabled).toBe(true);
+    });
 
-it("renders a disabled Switch with value false", () => {
-  const tree = render(<BaseSwitch value={false} disabled={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders correctly when disabled with value false", () => {
+      const { getByRole } = render(
+        <BaseSwitch value={false} disabled={true} />,
+      );
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(false);
+      expect(switchElement.props.accessibilityState.disabled).toBe(true);
+    });
+  });
 
-it("invokes the valueChange callback", () => {
-  const valueChangedCallback = jest.fn();
-  const tree = render(
-    <BaseSwitch
-      value={false}
-      onValueChange={valueChangedCallback}
-      accessibilityLabel={"test switch"}
-    />,
-  );
-  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
-  expect(valueChangedCallback).toHaveBeenCalledWith(true);
-  fireEvent(tree.getByLabelText("test switch"), "valueChange", false);
-  expect(valueChangedCallback).toHaveBeenCalledWith(false);
-});
+  describe("behavior", () => {
+    it("invokes the valueChange callback", () => {
+      const valueChangedCallback = jest.fn();
+      const { getByLabelText } = render(
+        <BaseSwitch
+          value={false}
+          onValueChange={valueChangedCallback}
+          accessibilityLabel={"test switch"}
+        />,
+      );
+
+      fireEvent(getByLabelText("test switch"), "valueChange", true);
+      expect(valueChangedCallback).toHaveBeenCalledWith(true);
+
+      fireEvent(getByLabelText("test switch"), "valueChange", false);
+      expect(valueChangedCallback).toHaveBeenCalledWith(false);
+    });
+
+    it("doesn't invoke the valueChange callback if disabled", () => {
+      const valueChangedCallback = jest.fn();
+      const { getByLabelText } = render(
+        <BaseSwitch
+          value={false}
+          disabled={true}
+          onValueChange={valueChangedCallback}
+          accessibilityLabel={"test switch"}
+        />,
+      );
 
-it("doesn't invoke the valueChange callback if disabled", () => {
-  const valueChangedCallback = jest.fn();
-  const tree = render(
-    <BaseSwitch
-      value={false}
-      disabled={true}
-      onValueChange={valueChangedCallback}
-      accessibilityLabel={"test switch"}
-    />,
-  );
-  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
-  expect(valueChangedCallback).not.toHaveBeenCalled();
+      fireEvent(getByLabelText("test switch"), "valueChange", true);
+      expect(valueChangedCallback).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -60,7 +60,7 @@ export function BaseSwitch({
       } else if (internalValue) {
         return tokens["color-interactive"];
       } else {
-        return tokens["color-surface--background"];
+        return tokens["color-interactive--background"];
       }
     }
 
@@ -81,7 +81,7 @@ export function BaseSwitch({
       //iOS
       return {
         true: tokens["color-interactive"],
-        false: tokens["color-surface--background"],
+        false: tokens["color-interactive--background"],
       };
     }
   }
@@ -98,7 +98,7 @@ export function BaseSwitch({
       disabled={disabled}
       thumbColor={getThumbColor()}
       trackColor={getTrackColors()}
-      ios_backgroundColor={tokens["color-surface--background"]}
+      ios_backgroundColor={tokens["color-interactive--background"]}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={"switch"}
       accessibilityState={{