@jobber/components-native 0.49.2 → 0.51.0

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
     /**
      * Defaulted to "always" so user can clear the dates whenever there's a value.

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

@@ -1,4 +1,3 @@
 export { commonInputStyles } from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";
-export type { InputFieldWrapperProps, Clearable } from "./InputFieldWrapper";
-export { useShowClear } from "./hooks/useShowClear";
+export type { InputFieldWrapperProps } from "./InputFieldWrapper";

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

@@ -2,7 +2,7 @@ import React, { Ref } from "react";
 import { IconNames } from "@jobber/design";
 import { FieldError } from "react-hook-form";
 import { Text as NativeText } from "react-native";
-import { Clearable } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
 export interface InputPressableProps {
     /**
      * Current value of the component

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

@@ -2,8 +2,8 @@ import React, { SyntheticEvent } from "react";
 import { NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, TextInputProps, TextStyle } from "react-native";
 import { RegisterOptions } from "react-hook-form";
 import { IconNames } from "@jobber/design";
+import { Clearable } from "@jobber/hooks";
 import { InputFieldStyleOverride } from "../InputFieldWrapper/InputFieldWrapper";
-import { Clearable } from "../InputFieldWrapper";
 export interface InputTextProps {
     /**
      * Highlights the field red and shows message below (if string) to indicate an error

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
     /**
      * Defaulted to "always" so user can clear the time whenever there's a value.

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ProgressBarProps } from "./types";
-export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, }: ProgressBarProps): JSX.Element;
+export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, }: ProgressBarProps): JSX.Element;

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

@@ -19,4 +19,17 @@ export declare const styles: {
         height: string;
         borderRadius: number;
     };
+    step: {
+        flex: number;
+        marginRight: number;
+        height: string;
+        borderRadius: number;
+        borderColor: string;
+    };
+    completedStep: {
+        backgroundColor: string;
+    };
+    inProgressStep: {
+        backgroundColor: string;
+    };
 };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ProgressBarSteppedProps {
+    readonly total: number;
+    readonly current: number;
+    readonly color?: string;
+    readonly loading?: boolean;
+    readonly inProgress?: number;
+}
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): JSX.Element;
+export {};

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

@@ -9,7 +9,8 @@ export interface ProgressBarProps {
      */
     readonly current: number;
     /**
-     * The number of items in progress (not completed, but to be less than the total)
+     * The number of items in progress (not completed, but to be less than the total);
+     * not applicable with stepped variation
      */
     readonly inProgress?: number;
     /**
@@ -25,4 +26,9 @@ export interface ProgressBarProps {
      * Component to render above the progress bar.
      */
     readonly header?: ReactNode;
+    /**
+     * Set the variation of the progress bar
+     * @default progress
+     */
+    readonly variation?: "progress" | "stepped";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.49.2",
+  "version": "0.51.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@jobber/design": "^0.51.0",
-    "@jobber/hooks": "^2.7.3",
+    "@jobber/hooks": "^2.8.0",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.4.10",
     "autolinker": "^4.0.0",
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "5bf46b3890aeddd4a75751f82ad9c48bf4774f96"
+  "gitHead": "7096004da05ede6fff2bfaaed572b3e91a9ee1d9"
 }

package/src/InputDate/InputDate.tsx

@@ -3,7 +3,8 @@ 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 { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
@@ -154,6 +155,7 @@ function InternalInputDate({
 
   const date = useMemo(() => {
     if (typeof value === "string") return new Date(value);
+
     return value;
   }, [value]);
 

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -228,6 +228,7 @@ function getLabelVariation(
   } else if (focused) {
     return "interactive";
   }
+
   return "subdued";
 }
 
@@ -278,10 +279,10 @@ function Placeholder({
   labelVariation,
   hasMiniLabel,
 }: {
-  placeholder?: string;
-  styleOverride: StyleProp<TextStyle>;
-  labelVariation: TextVariation;
-  hasMiniLabel: boolean;
+  readonly placeholder?: string;
+  readonly styleOverride: StyleProp<TextStyle>;
+  readonly labelVariation: TextVariation;
+  readonly hasMiniLabel: boolean;
 }) {
   return (
     <>

package/src/InputFieldWrapper/index.ts

@@ -1,4 +1,3 @@
 export { commonInputStyles } from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";
-export type { InputFieldWrapperProps, Clearable } from "./InputFieldWrapper";
-export { useShowClear } from "./hooks/useShowClear";
+export type { InputFieldWrapperProps } from "./InputFieldWrapper";

package/src/InputPressable/InputPressable.tsx

@@ -2,13 +2,9 @@ import React, { Ref, forwardRef, useEffect, useState } from "react";
 import { IconNames } from "@jobber/design";
 import { FieldError } from "react-hook-form";
 import { Text as NativeText, Pressable } from "react-native";
+import { Clearable, useShowClear } from "@jobber/hooks";
 import { styles } from "./InputPressable.style";
-import {
-  Clearable,
-  InputFieldWrapper,
-  commonInputStyles,
-  useShowClear,
-} from "../InputFieldWrapper";
+import { InputFieldWrapper, commonInputStyles } from "../InputFieldWrapper";
 
 export interface InputPressableProps {
   /**

package/src/InputText/InputText.tsx

@@ -25,15 +25,12 @@ import {
 } from "react-hook-form";
 import { IconNames } from "@jobber/design";
 import identity from "lodash/identity";
+import { Clearable, useShowClear } from "@jobber/hooks";
 import { styles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
 import { InputFieldStyleOverride } from "../InputFieldWrapper/InputFieldWrapper";
-import {
-  Clearable,
-  InputFieldWrapper,
-  useShowClear,
-} from "../InputFieldWrapper";
+import { InputFieldWrapper } from "../InputFieldWrapper";
 import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 
 export interface InputTextProps {

package/src/InputTime/InputTime.tsx

@@ -3,12 +3,13 @@ import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { View } from "react-native";
+import { Clearable } from "@jobber/hooks";
 import { styles } from "./InputTime.style";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
 import { InputPressable } from "../InputPressable";
 import { FormField } from "../FormField";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface InputTimeBaseProps
@@ -208,10 +209,12 @@ function InternalInputTime({
 
 function getInitialPickerDate(date?: Date | null): Date {
   if (date) return date;
+
   return roundUpToNearestMinutes(new Date(), 30);
 }
 
 function getMinuteInterval(type: InputTimeBaseProps["type"]) {
   if (type === "granular") return 1;
+
   return 5;
 }

package/src/ProgressBar/ProgressBar.style.ts

@@ -22,4 +22,17 @@ export const styles = StyleSheet.create({
     height: "100%",
     borderRadius: 100,
   },
+  step: {
+    flex: 1,
+    marginRight: tokens["space-small"],
+    height: "100%",
+    borderRadius: 100,
+    borderColor: "rgba(255,255,255,0.3)",
+  },
+  completedStep: {
+    backgroundColor: tokens["color-interactive"],
+  },
+  inProgressStep: {
+    backgroundColor: tokens["color-informative"],
+  },
 });

package/src/ProgressBar/ProgressBar.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, screen } from "@testing-library/react-native";
 import { ProgressBar, ProgressBarProps } from ".";
+import { styles } from "./ProgressBar.style";
 
 const defaultSetupProps = {
   total: 0,
@@ -39,3 +40,41 @@ it("renders green CompletedProgress bar when 1 or more jobs is completed", () =>
   expect(bar).toMatchSnapshot();
   expect(bar.getByLabelText("1 of 2 complete")).toBeDefined();
 });
+
+describe("with stepped variation", () => {
+  beforeEach(() => {
+    render(
+      <ProgressBar
+        total={3}
+        current={2}
+        inProgress={1}
+        variation={"stepped"}
+      />,
+    );
+  });
+  it("renders the correct number of steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    expect(stepElements).toHaveLength(3);
+  });
+  it("renders the correct number of completed steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    const completedSteps = stepElements.filter(step =>
+      step.props.style.includes(styles.completedStep),
+    );
+    expect(completedSteps).toHaveLength(2);
+  });
+  it("renders the correct number of incomplete steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    const incompleteSteps = stepElements.filter(
+      step => !step.props.style.includes(styles.completedStep),
+    );
+    expect(incompleteSteps).toHaveLength(1);
+  });
+  it("renders the correct number of inProgress steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    const inProgressSteps = stepElements.filter(step =>
+      step.props.style.includes(styles.inProgressStep),
+    );
+    expect(inProgressSteps).toHaveLength(1);
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { ProgressBarProps } from "./types";
 import { styles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
+import { ProgressBarStepped } from "./ProgressBarStepped";
 import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
@@ -13,6 +14,7 @@ export function ProgressBar({
   inProgress = 0,
   reverseTheme = false,
   header,
+  variation = "progress",
 }: ProgressBarProps): JSX.Element {
   const { t } = useAtlantisI18n();
 
@@ -23,31 +25,43 @@ export function ProgressBar({
       accessibilityLabel={getA11yLabel()}
     >
       {header}
-      <View style={styles.progressBarContainer}>
-        <ProgressBarInner
-          width={100}
-          animationDuration={0}
+      {variation === "stepped" ? (
+        <ProgressBarStepped
+          total={total}
+          current={current}
           color={reverseTheme ? undefined : tokens["color-surface--background"]}
+          loading={loading}
+          inProgress={inProgress}
         />
-        {!loading && (
-          <>
-            {inProgress && inProgress > 0 ? (
+      ) : (
+        <View style={styles.progressBarContainer}>
+          <ProgressBarInner
+            width={100}
+            animationDuration={0}
+            color={
+              reverseTheme ? undefined : tokens["color-surface--background"]
+            }
+          />
+          {!loading && (
+            <>
+              {inProgress && inProgress > 0 ? (
+                <ProgressBarInner
+                  width={calculateWidth(total, current + inProgress)}
+                  color={tokens["color-informative"]}
+                  animationDuration={800}
+                />
+              ) : (
+                <></>
+              )}
               <ProgressBarInner
-                width={calculateWidth(total, current + inProgress)}
-                color={tokens["color-informative"]}
-                animationDuration={800}
+                width={calculateWidth(total, current)}
+                color={tokens["color-interactive"]}
+                animationDuration={600}
               />
-            ) : (
-              <></>
-            )}
-            <ProgressBarInner
-              width={calculateWidth(total, current)}
-              color={tokens["color-interactive"]}
-              animationDuration={600}
-            />
-          </>
-        )}
-      </View>
+            </>
+          )}
+        </View>
+      )}
     </View>
   );
 

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ProgressBar.style";
+
+interface ProgressBarSteppedProps {
+  readonly total: number;
+  readonly current: number;
+  readonly color?: string;
+  readonly loading?: boolean;
+  readonly inProgress?: number;
+}
+
+export function ProgressBarStepped({
+  total,
+  current,
+  color,
+  loading,
+  inProgress,
+}: ProgressBarSteppedProps) {
+  return (
+    <View style={[styles.progressBarContainer, { height: 10 }]}>
+      {Array.from({ length: total }).map((_, index) => {
+        const step = index + 1;
+        const isCompleted = step <= current;
+        const lastStep = step === total;
+        const inProgressSteps = current + (inProgress || 0);
+
+        return (
+          <View
+            key={step}
+            style={[
+              styles.step,
+              { ...(color && { backgroundColor: color }) },
+              !loading && isCompleted && styles.completedStep,
+              !loading &&
+                !isCompleted &&
+                step <= inProgressSteps &&
+                styles.inProgressStep,
+              lastStep && { marginRight: 0 },
+            ]}
+            testID={"progress-step"}
+          ></View>
+        );
+      })}
+    </View>
+  );
+}

package/src/ProgressBar/types.ts

@@ -12,7 +12,8 @@ export interface ProgressBarProps {
   readonly current: number;
 
   /**
-   * The number of items in progress (not completed, but to be less than the total)
+   * The number of items in progress (not completed, but to be less than the total);
+   * not applicable with stepped variation
    */
   readonly inProgress?: number;
 
@@ -31,4 +32,10 @@ export interface ProgressBarProps {
    * Component to render above the progress bar.
    */
   readonly header?: ReactNode;
+
+  /**
+   * Set the variation of the progress bar
+   * @default progress
+   */
+  readonly variation?: "progress" | "stepped";
 }

package/dist/src/InputFieldWrapper/hooks/useShowClear.js

@@ -1,15 +0,0 @@
-export function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
-    if (multiline && clearable !== "never") {
-        throw new Error("Multiline inputs can not be clearable");
-    }
-    // Do not show if there is no value
-    if (!hasValue || clearable === "never" || disabled) {
-        return false;
-    }
-    switch (clearable) {
-        case "while-editing":
-            return focused;
-        case "always":
-            return true;
-    }
-}

package/dist/types/src/InputFieldWrapper/hooks/useShowClear.d.ts

@@ -1,10 +0,0 @@
-import { Clearable } from "../InputFieldWrapper";
-interface UseShowClearParameters {
-    clearable: Clearable;
-    multiline: boolean;
-    focused: boolean;
-    hasValue: boolean;
-    disabled?: boolean;
-}
-export declare function useShowClear({ clearable, multiline, focused, hasValue, disabled, }: UseShowClearParameters): boolean | undefined;
-export {};

package/src/InputFieldWrapper/hooks/useShowClear.test.ts

@@ -1,158 +0,0 @@
-import { useShowClear } from "./useShowClear";
-import { Clearable } from "..";
-
-interface UseShowClearParameters {
-  clearable: Clearable;
-  hasValue: boolean;
-  focused: boolean;
-  multiline: boolean;
-  disabled: boolean;
-  expected: boolean;
-}
-
-describe("useShowClear", () => {
-  describe.each<UseShowClearParameters>([
-    {
-      clearable: "always",
-      hasValue: true,
-      focused: false,
-      multiline: false,
-      disabled: false,
-      expected: true,
-    },
-    {
-      clearable: "always",
-      hasValue: true,
-      focused: true,
-      multiline: false,
-      disabled: false,
-      expected: true,
-    },
-    {
-      clearable: "always",
-      hasValue: true,
-      focused: false,
-      multiline: false,
-      disabled: true,
-      expected: false,
-    },
-    {
-      clearable: "always",
-      hasValue: false,
-      focused: false,
-      multiline: false,
-      disabled: true,
-      expected: false,
-    },
-    {
-      clearable: "while-editing",
-      hasValue: true,
-      focused: false,
-      multiline: false,
-      disabled: false,
-      expected: false,
-    },
-    {
-      clearable: "while-editing",
-      hasValue: true,
-      focused: true,
-      multiline: false,
-      disabled: false,
-      expected: true,
-    },
-    {
-      clearable: "while-editing",
-      hasValue: false,
-      focused: false,
-      multiline: false,
-      disabled: true,
-      expected: false,
-    },
-    {
-      clearable: "while-editing",
-      hasValue: true,
-      focused: false,
-      multiline: false,
-      disabled: true,
-      expected: false,
-    },
-    {
-      clearable: "never",
-      hasValue: true,
-      focused: false,
-      multiline: false,
-      disabled: false,
-      expected: false,
-    },
-    {
-      clearable: "never",
-      hasValue: true,
-      focused: true,
-      multiline: false,
-      disabled: false,
-      expected: false,
-    },
-    {
-      clearable: "never",
-      hasValue: false,
-      focused: false,
-      multiline: false,
-      disabled: true,
-      expected: false,
-    },
-    {
-      clearable: "never",
-      hasValue: true,
-      focused: false,
-      multiline: false,
-      disabled: true,
-      expected: false,
-    },
-  ])(
-    "%j",
-    ({
-      clearable,
-      hasValue,
-      focused,
-      multiline,
-      disabled,
-      expected,
-    }: UseShowClearParameters) => {
-      it(`returns ${expected}`, () => {
-        expect(
-          useShowClear({ clearable, multiline, focused, hasValue, disabled }),
-        ).toEqual(expected);
-      });
-    },
-  );
-
-  it("throws an error if multiline is true and clearable isn't never", () => {
-    expect(() => {
-      useShowClear({
-        clearable: "always",
-        multiline: true,
-        focused: true,
-        hasValue: true,
-        disabled: false,
-      });
-    }).toThrow();
-    expect(() => {
-      useShowClear({
-        clearable: "while-editing",
-        multiline: true,
-        focused: true,
-        hasValue: true,
-        disabled: false,
-      });
-    }).toThrow();
-    expect(() => {
-      useShowClear({
-        clearable: "never",
-        multiline: true,
-        focused: true,
-        hasValue: true,
-        disabled: false,
-      });
-    }).not.toThrow();
-  });
-});