@jobber/components-native 0.56.2 → 0.57.0

package/src/Checkbox/CheckboxGroup.tsx

@@ -17,9 +17,9 @@ interface CommonCheckboxGroupProps extends Omit<CheckboxProps, "onChange"> {
   /**
    * Checkbox items
    */
-  children: CheckboxElement[];
+  readonly children: CheckboxElement[];
 
-  state?: CheckboxGroupState;
+  readonly state?: CheckboxGroupState;
 
   onChange?(groupChecks: CheckboxGroupState): void;
 }
@@ -38,6 +38,7 @@ export type CheckboxGroupProps = XOR<
   UncontrolledCheckboxGroupProps,
   ControlledCheckboxGroupProps
 >;
+
 export function CheckboxGroup({
   children,
   state,
@@ -57,6 +58,7 @@ export function CheckboxGroup({
       </CheckboxGroupInternal>
     );
   }
+
   if (name) {
     return (
       <FormField name={name}>
@@ -114,6 +116,7 @@ function CheckboxGroupInternal({
   ): React.ReactElement<CheckboxProps> {
     const name = throwErrorIfItHasNoName(checkbox.props.name);
     const childDisabled = disabled || checkbox.props.disabled;
+
     const childrenHandleChange = (checked: boolean) => {
       const childrenNextValue = {
         ...actualCheckedValues.childrenChecked,
@@ -126,6 +129,7 @@ function CheckboxGroupInternal({
         parentChecked: parentNextValue,
       });
     };
+
     return React.cloneElement(checkbox, {
       onChange: childrenHandleChange,
       checked: actualCheckedValues.childrenChecked[name],
@@ -141,6 +145,7 @@ function CheckboxGroupInternal({
     }
 
     const name = throwErrorIfItHasNoName(child.props.name);
+
     return {
       ...childCheckboxObject,
       [name]: cloneChildCheckbox(child),
@@ -153,9 +158,11 @@ function CheckboxGroupInternal({
     childName: string,
   ): boolean {
     const currentCheckbox = checkboxObject[childName];
+
     if (currentCheckbox?.props?.disabled) {
       return acc;
     }
+
     return acc && value;
   }
 
@@ -174,6 +181,7 @@ function CheckboxGroupInternal({
                 actualCheckedValues.childrenChecked,
                 (acc, currentCheckboxValue, childName) => {
                   const currentCheckbox = checkboxObject[childName];
+
                   return currentCheckbox?.props?.disabled
                     ? {
                         ...acc,
@@ -215,11 +223,13 @@ function throwErrorIfItHasNoName(name?: string): string {
       "You must provide a name to checkboxes in a checkbox group",
     );
   }
+
   return name;
 }
 
 function checkIndeterminateStatus(checkedValues: CheckboxGroupState): boolean {
   const checkedValuesAsArray = Object.values(checkedValues.childrenChecked);
+
   if (checkedValuesAsArray.length === 1) {
     return false;
   }

package/src/Chip/Chip.tsx

@@ -97,9 +97,11 @@ export function Chip({
 
   const accessibilityState = useMemo(() => {
     const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
+
     if (checkableRoles.includes(accessibilityRole)) {
       return { checked: isActive };
     }
+
     return {};
   }, [accessibilityRole, isActive]);
 

package/src/Content/Content.test.tsx

@@ -39,6 +39,7 @@ function setupContent(
   const parentView = container.getByLabelText("contentView");
   const contentView = getContentComponent(parentView);
   const contentChildren = getContentChildren(contentView);
+
   return { ...container, parentView, contentView, contentChildren };
 }
 

package/src/Content/Content.tsx

@@ -56,6 +56,7 @@ export function Content({
       // In order to get spacing between the children, we apply the child spacing on each of
       // the children except for the first (top) child
       const childStyle = index !== 0 ? [childContainerStyle] : [];
+
       return (
         <View key={index} style={[styles.childWrapper, ...childStyle]}>
           {child}

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -14,6 +14,7 @@ import { Content } from "../Content";
 import { Text } from "../Text";
 
 jest.unmock("../hooks/useIsScreenReaderEnabled");
+
 function fireLayoutEvent(childrenContent: ReactTestInstance) {
   fireEvent(childrenContent, "onLayout", {
     nativeEvent: {

package/src/Divider/Divider.tsx

@@ -17,5 +17,6 @@ export function Divider({ size = "base" }: DividerProps): JSX.Element {
     size === "large" && styles.large,
     size === "largest" && styles.largest,
   ];
+
   return <View testID="Divider" style={style} />;
 }

package/src/EmptyState/EmptyState.tsx

@@ -15,8 +15,8 @@ interface Action {
 }
 
 interface ButtonAction {
-  action?: Action;
-  type: ButtonType;
+  readonly action?: Action;
+  readonly type: ButtonType;
 }
 
 function ButtonAction({ action, type }: ButtonAction) {

package/src/Flex/Flex.styles.tsx

@@ -24,6 +24,7 @@ export const gapStyles = StyleSheet.create(
     if (space !== "none") paddingLeft = tokens[`space-${space}`];
 
     gapObj[space] = { paddingLeft };
+
     return gapObj;
   }, {} as Record<Spacing, ViewStyle>),
 );

package/src/Flex/Flex.test.tsx

@@ -17,6 +17,7 @@ function getContentComponent(parentView: ReactTestInstance) {
 function getFlexCol(flexRow: ReactTestInstance) {
   return flexRow.children as ReactTestInstance[];
 }
+
 function setUp(props?: FlexProps) {
   const container = render(
     <View accessibilityLabel="contentView">
@@ -33,6 +34,7 @@ function setUp(props?: FlexProps) {
   );
   const flexRow = container.getAllByTestId("ATL-Flex-Row");
   const flexCol = getFlexCol(flexRow[0]);
+
   return { ...container, contentView, flexRow, flexCol };
 }
 

package/src/Form/Form.test.tsx

@@ -16,6 +16,7 @@ import { InputText } from "../InputText";
 jest.mock("lodash/debounce", () => {
   return jest.fn(fn => {
     fn.cancel = jest.fn();
+
     return fn;
   });
 });
@@ -83,24 +84,24 @@ interface FormFields {
 }
 
 interface FormTestProps {
-  onSubmit: jest.Mock;
-  sendBannerErrors?: boolean;
-  sendNetworkErrors?: boolean;
-  saveLabel?: string;
-  renderStickySection?: (
+  readonly onSubmit: jest.Mock;
+  readonly sendBannerErrors?: boolean;
+  readonly sendNetworkErrors?: boolean;
+  readonly saveLabel?: string;
+  readonly renderStickySection?: (
     onSubmit: () => void,
     label: string | undefined,
     isSubmitting: boolean,
   ) => JSX.Element;
-  initialLoading?: boolean;
-  initialValues?: FormFields;
-  bannerMessages?: FormBannerMessage[];
-  localCacheKey?: string;
-  localCacheExclude?: string[];
-  localCacheId?: string[] | string;
-  onBeforeSubmit?: jest.Mock;
-  renderFooter?: React.ReactNode;
-  saveButtonOffset?: number;
+  readonly initialLoading?: boolean;
+  readonly initialValues?: FormFields;
+  readonly bannerMessages?: FormBannerMessage[];
+  readonly localCacheKey?: string;
+  readonly localCacheExclude?: string[];
+  readonly localCacheId?: string[] | string;
+  readonly onBeforeSubmit?: jest.Mock;
+  readonly renderFooter?: React.ReactNode;
+  readonly saveButtonOffset?: number;
 }
 
 function FormTest(props: FormTestProps) {
@@ -124,9 +125,11 @@ function MockForm({
   saveButtonOffset,
 }: FormTestProps) {
   const formErrors: FormBannerErrors = {};
+
   if (sendBannerErrors) {
     formErrors.bannerError = bannerError;
   }
+
   if (sendNetworkErrors) {
     formErrors.networkError = "Ouch";
   }
@@ -408,6 +411,7 @@ describe("Form", () => {
           errorType: FormSubmitErrorType.NetworkError,
         }),
       );
+
       const setup = () => {
         const view = render(
           <FormTest sendNetworkErrors={true} onSubmit={mockSubmit} />,
@@ -421,6 +425,7 @@ describe("Form", () => {
           newValue,
         );
         fireEvent.press(getByLabelText(saveButtonText));
+
         return view;
       };
 

package/src/Form/components/FormBody/FormBody.tsx

@@ -6,9 +6,9 @@ import { FormActionBar, FormActionBarProps } from "../FormActionBar";
 import { tokens } from "../../../utils/design";
 
 interface FormBodyProps extends FormActionBarProps {
-  children: JSX.Element;
-  shouldRenderActionBar?: boolean;
-  saveButtonOffset?: number;
+  readonly children: JSX.Element;
+  readonly shouldRenderActionBar?: boolean;
+  readonly saveButtonOffset?: number;
 }
 
 export function FormBody({
@@ -58,5 +58,6 @@ export function FormBody({
 export function useBottomPadding(): number {
   const { insets } = useScreenInformation();
   const extraBottomSpace = insets.bottom - tokens["space-base"];
+
   return extraBottomSpace >= 0 ? extraBottomSpace : 0;
 }

package/src/Form/components/FormCache/FormCache.tsx

@@ -3,11 +3,12 @@ import { FieldValues, useFormContext, useWatch } from "react-hook-form";
 import omit from "lodash/omit";
 
 interface FormCacheProps<T extends FieldValues> {
-  localCacheId?: string | string[];
-  localCacheKey?: string;
-  localCacheExclude?: string[];
-  setLocalCache: (data: T) => void;
+  readonly localCacheId?: string | string[];
+  readonly localCacheKey?: string;
+  readonly localCacheExclude?: string[];
+  readonly setLocalCache: (data: T) => void;
 }
+
 export function FormCache<T extends FieldValues>({
   localCacheExclude,
   localCacheKey,

package/src/Form/components/FormMessage/FormMessage.tsx

@@ -37,6 +37,7 @@ export const FormMessage = (): JSX.Element => {
   }
 
   const lastMessage = data[data.length - 1];
+
   return <InternalFormMessage data={lastMessage} onRequestClose={close} />;
 };
 

package/src/Form/components/FormMessageBanner/FormMessageBanner.tsx

@@ -3,7 +3,7 @@ import { FormBannerMessage, FormBannerMessageType } from "../../types";
 import { Banner, BannerTypes } from "../../../Banner";
 
 interface FormMessageBannerProps {
-  bannerMessages?: FormBannerMessage[];
+  readonly bannerMessages?: FormBannerMessage[];
 }
 
 export function FormMessageBanner({

package/src/Form/components/FormSaveButton/FormSaveButton.test.tsx

@@ -16,11 +16,11 @@ interface TestSecondaryActionProp {
   destructive?: boolean;
 }
 interface TestFormSaveButtonProps {
-  primaryAction: () => Promise<void>;
-  loading: boolean;
-  label?: string;
-  secondaryAction?: TestSecondaryActionProp[];
-  setSecondaryActionLoading: (bool: boolean) => void;
+  readonly primaryAction: () => Promise<void>;
+  readonly loading: boolean;
+  readonly label?: string;
+  readonly secondaryAction?: TestSecondaryActionProp[];
+  readonly setSecondaryActionLoading: (bool: boolean) => void;
 }
 jest.mock("react-hook-form", () => ({
   ...jest.requireActual("react-hook-form"),

package/src/Form/context/AtlantisFormContext.tsx

@@ -4,6 +4,7 @@ import { AtlantisFormContextProps } from "./types";
 export const atlantisFormContextDefaultValues = {
   useConfirmBeforeBack: () => {
     const ref = useRef(() => undefined);
+
     return ref;
   },
   useInternalFormLocalCache: () => ({

package/src/Form/hooks/useFormViewRefs.ts

@@ -15,6 +15,7 @@ export function useFormViewRefs(): UseFormViewRefsReturn {
   const scrollToTop = useCallback(() => {
     scrollViewRef.current?.scrollToPosition(0, 0);
   }, [scrollViewRef]);
+
   return {
     scrollViewRef: scrollViewRef,
     bottomViewRef,

package/src/Form/hooks/useOfflineHandler.ts

@@ -31,5 +31,6 @@ export function useOfflineHandler(): (
     },
     [t],
   );
+
   return handleOfflineSubmit;
 }

package/src/Form/hooks/useScrollToError/useScrollToError.ts

@@ -33,6 +33,7 @@ export function useScrollToError<T extends FieldValues>({
   // went up.
   const hasBeenSubmitted = submitCounter < submitCount;
   if (!hasBeenSubmitted) return;
+
   if (isScreenReaderEnabled) {
     manuallyScrollToElement();
     Keyboard.dismiss();
@@ -44,6 +45,7 @@ export function useScrollToError<T extends FieldValues>({
 
   function defaultAutoScroll() {
     if (isValid) return;
+
     try {
       focusInputWithRHF(errors, setFocus);
     } catch {

package/src/FormField/FormField.test.tsx

@@ -78,14 +78,12 @@ describe("when a component is wrapped in a FormField within a Form", () => {
           >
             {field => {
               return (
-                <>
-                  <InputText
-                    name={field.name}
-                    accessibilityLabel={inputAccessibilityLabel}
-                    value={field.value}
-                    onChangeText={field.onChange}
-                  />
-                </>
+                <InputText
+                  name={field.name}
+                  accessibilityLabel={inputAccessibilityLabel}
+                  value={field.value}
+                  onChangeText={field.onChange}
+                />
               );
             }}
           </FormField>

package/src/FormField/FormField.tsx

@@ -11,7 +11,7 @@ interface FormFieldProps<T> {
   /**
    * Name of the field.
    */
-  name: string;
+  readonly name: string;
 
   /**
    * The initial value of the form field.
@@ -21,7 +21,7 @@ interface FormFieldProps<T> {
   /**
    * Children to render.
    */
-  children: (
+  readonly children: (
     field: ControllerRenderProps<FieldValues, string>,
     error?: FieldError,
   ) => React.ReactNode;

package/src/FormatFile/FormatFile.tsx

@@ -24,7 +24,7 @@ export interface FormatFileProps<T> {
   /**
    * File upload details object. Can be a File or a FileUpload
    */
-  file: T;
+  readonly file: T;
 
   /**
    * Accessibility label
@@ -38,25 +38,25 @@ export interface FormatFileProps<T> {
   /**
    * A function which handles the onTap event.
    */
-  onTap?: (file: T) => void;
+  readonly onTap?: (file: T) => void;
   /**
    * A function to be called on "Remove" Bottom Sheet Option press
    */
-  onRemove?: () => void;
+  readonly onRemove?: () => void;
 
   /**
    * Handler for the "Preview" Bottom Sheet Option press
    */
-  onPreviewPress?: (formattedFile: FormattedFile) => void;
+  readonly onPreviewPress?: (formattedFile: FormattedFile) => void;
   /**
    * A file type to show at Bottom Sheet options
    */
-  bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+  readonly bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
 
   /**
    * Uses a grid layout when multi-file upload is supported
    */
-  styleInGrid?: boolean;
+  readonly styleInGrid?: boolean;
 
   /**
    * A reference to the element in the rendered output
@@ -75,17 +75,17 @@ type FormatFileInternalProps = Omit<
   FormatFileProps<File | FileUpload>,
   "file" | "onTap"
 > & {
-  file: FormattedFile;
-  onTap: () => void;
+  readonly file: FormattedFile;
+  readonly onTap: () => void;
 };
 
 interface FormatFileContentProps {
-  accessibilityLabel?: string;
-  file: FormattedFile;
-  showOverlay: boolean;
-  styleInGrid: boolean;
-  onUploadComplete: () => void;
-  isMedia: boolean;
+  readonly accessibilityLabel?: string;
+  readonly file: FormattedFile;
+  readonly showOverlay: boolean;
+  readonly styleInGrid: boolean;
+  readonly onUploadComplete: () => void;
+  readonly isMedia: boolean;
 }
 
 function FormatFileContent({
@@ -288,6 +288,7 @@ function FormatFileInternal({
   function handleOnPress() {
     if (showOverlay || !onRemove) {
       onTap();
+
       return;
     }
 

package/src/FormatFile/components/FileView/FileView.tsx

@@ -11,12 +11,12 @@ import { ErrorIcon } from "../ErrorIcon";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 interface FileViewProps {
-  accessibilityLabel?: string;
-  showOverlay: boolean;
-  showError: boolean;
-  file: FormattedFile;
-  styleInGrid: boolean;
-  onUploadComplete: () => void;
+  readonly accessibilityLabel?: string;
+  readonly showOverlay: boolean;
+  readonly showError: boolean;
+  readonly file: FormattedFile;
+  readonly styleInGrid: boolean;
+  readonly onUploadComplete: () => void;
 }
 
 export function FileView({
@@ -37,6 +37,7 @@ export function FileView({
 
   const freezeProgressBar =
     file.status !== StatusCode.Completed && file.progress >= 0.9;
+
   return (
     <View
       style={[
@@ -107,6 +108,7 @@ interface FileTypeToIconNameParams {
   fileName?: string;
   fileType?: string;
 }
+
 function mapFileTypeToIconName({
   fileName,
   fileType,
@@ -114,6 +116,7 @@ function mapFileTypeToIconName({
   if (!fileName && !fileType) {
     return "alert";
   }
+
   if (fileType?.includes("pdf") || fileName?.match(/~*.pdf$/)) {
     return "pdf";
   } else if (

package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx

@@ -7,10 +7,10 @@ import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
 
 interface FormatFileBottomSheetProps {
-  bottomSheetRef: RefObject<BottomSheetRef>;
-  onPreviewPress?: () => void;
-  onRemovePress?: () => void;
-  bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+  readonly bottomSheetRef: RefObject<BottomSheetRef>;
+  readonly onPreviewPress?: () => void;
+  readonly onRemovePress?: () => void;
+  readonly bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
 }
 
 export const FormatFileBottomSheet = ({

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -11,12 +11,12 @@ import { useAtlantisFormatFileContext } from "../../context/FormatFileContext";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 
 interface MediaViewProps {
-  accessibilityLabel?: string;
-  showOverlay: boolean;
-  showError: boolean;
-  file: FormattedFile;
-  styleInGrid: boolean;
-  onUploadComplete: () => void;
+  readonly accessibilityLabel?: string;
+  readonly showOverlay: boolean;
+  readonly showError: boolean;
+  readonly file: FormattedFile;
+  readonly styleInGrid: boolean;
+  readonly onUploadComplete: () => void;
 }
 
 export function MediaView({
@@ -68,11 +68,11 @@ export function MediaView({
 }
 
 interface OverlayProps {
-  isLoading: boolean;
-  showOverlay: boolean;
-  hasError: boolean;
-  file: FormattedFile;
-  onUploadComplete: () => void;
+  readonly isLoading: boolean;
+  readonly showOverlay: boolean;
+  readonly hasError: boolean;
+  readonly file: FormattedFile;
+  readonly onUploadComplete: () => void;
 }
 
 function Overlay({
@@ -104,9 +104,9 @@ function Overlay({
 }
 
 interface ProgressOverlayProps {
-  status: StatusCode;
-  progress: number;
-  onUploadComplete: () => void;
+  readonly status: StatusCode;
+  readonly progress: number;
+  readonly onUploadComplete: () => void;
 }
 
 function ProgressOverlay({
@@ -115,6 +115,7 @@ function ProgressOverlay({
   onUploadComplete,
 }: ProgressOverlayProps) {
   const freezeProgressBar = status !== StatusCode.Completed && progress >= 0.9;
+
   return (
     <View
       style={[styles.imageBackground, styles.overlay]}

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

@@ -7,15 +7,15 @@ interface ProgressBarProps {
   /**
    * Upload progress value from 0 to 1
    */
-  progress: number;
+  readonly progress: number;
   /**
    * Upload status
    */
-  status: StatusCode;
+  readonly status: StatusCode;
   /**
    * Function to be called when the progress is finished
    */
-  onComplete?: () => void;
+  readonly onComplete?: () => void;
 }
 
 export const ProgressBar = ({

package/src/FormatFile/utils/createUseCreateThumbnail.ts

@@ -29,5 +29,6 @@ export function createUseCreateThumbnail(createThumbnail: CreateThumbnail): {
     },
     [createThumbnail],
   );
+
   return { useCreateThumbnail };
 }

package/src/Icon/Icon.tsx

@@ -93,6 +93,7 @@ function getSvgStyle(classNames = ""): SvgProps["style"] & FillProps {
     ...colorsClassMap,
   };
   const svgStyle = getStylesForClassNames(classNames.split(" "), classMap);
+
   return { ...svgStyle, display: "flex" };
 }