@jobber/components-native 0.54.4-JOB-88641.7 → 0.54.4-fix-inline.3

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/Glimmer/Glimmer.shape.style.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const shapeStyles = StyleSheet.create({
+  rectangle: {
+    width: "100%",
+  },
+  square: {
+    width: "auto",
+    aspectRatio: 1 / 1,
+  },
+  circle: {
+    width: "auto",
+    aspectRatio: 1 / 1,
+    borderRadius: tokens["radius-circle"],
+  },
+});

package/src/Glimmer/Glimmer.size.style.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const sizeStyles = StyleSheet.create({
+  small: { height: tokens["space-small"] },
+  base: { height: tokens["space-base"] },
+  large: { height: tokens["space-large"] },
+  larger: { height: tokens["space-larger"] },
+  largest: { height: tokens["space-largest"] },
+});

package/src/Glimmer/Glimmer.style.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const shineWidth = tokens["space-largest"];
+
+export const styles = StyleSheet.create({
+  container: {
+    backgroundColor: tokens["color-surface--background"],
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+    height: tokens["space-base"],
+    borderRadius: tokens["radius-base"],
+  },
+
+  shine: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: shineWidth,
+    height: "100%",
+  },
+});

package/src/Glimmer/Glimmer.test.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {
+  act,
+  fireEvent,
+  render as renderComponent,
+} from "@testing-library/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>>;
+
+function render<T>(...params: Parameters<typeof renderComponent<T>>) {
+  screen = renderComponent(...params);
+
+  return screen;
+}
+
+describe("Glimmer", () => {
+  it("renders a Glimmer with default styling", () => {
+    render(<Glimmer />);
+    const element = screen.getByTestId(GLIMMER_TEST_ID);
+
+    expect(element.props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ height: 16 }),
+        expect.objectContaining({ width: "100%" }),
+      ]),
+    );
+  });
+
+  it("renders a Glimmer with custom width", () => {
+    render(<Glimmer width={50} />);
+    const element = screen.getByTestId(GLIMMER_TEST_ID);
+
+    expect(element.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining({ width: 50 })]),
+    );
+  });
+
+  it("renders a Glimmer with custom percent width", () => {
+    render(<Glimmer width="50%" />);
+    const element = screen.getByTestId(GLIMMER_TEST_ID);
+
+    expect(element.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining({ width: "50%" })]),
+    );
+  });
+
+  it("renders sets the correct width", () => {
+    jest.useFakeTimers();
+    render(<Glimmer />);
+
+    act(() => {
+      fireEvent(screen.getByTestId(GLIMMER_TEST_ID), "onLayout", {
+        nativeEvent: { layout: { width: 300 } },
+      });
+    });
+
+    const element = screen.getByTestId(GLIMMER_SHINE_TEST_ID);
+
+    expect(element.props.style).toEqual(
+      expect.objectContaining({ transform: [{ translateX: -48 }] }),
+    );
+
+    jest.advanceTimersByTime(tokens["timing-loading--extended"]);
+
+    expect(element.props.style).toEqual(
+      expect.objectContaining({ transform: [{ translateX: 348 }] }),
+    );
+
+    jest.useRealTimers();
+  });
+});