@jobber/components-native 0.54.4-JOB-88641.9 → 0.54.4-fix-inline.6

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();
+  });
+});

package/src/Glimmer/Glimmer.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Easing, LayoutChangeEvent, View } from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { shineWidth, styles } from "./Glimmer.style";
+import { sizeStyles } from "./Glimmer.size.style";
+import { shapeStyles } from "./Glimmer.shape.style";
+import { tokens } from "../utils/design";
+
+export type GlimmerShapes = keyof typeof shapeStyles;
+export type GlimmerSizes = keyof typeof sizeStyles;
+export type GlimmerTimings = "base" | "fast";
+
+interface GlimmerProps {
+  /**
+   * Sets the size of the glimmer.
+   */
+  readonly shape?: GlimmerShapes;
+
+  /**
+   * Sets the shape of the glimmer.
+   *
+   * If you need a specific width, use the `width` prop.
+   */
+  readonly size?: GlimmerSizes;
+
+  /**
+   * Control how fast the shine moves from left to right. This is useful when
+   * the glimmer is used on smaller spaces.
+   */
+  readonly timing?: GlimmerTimings;
+
+  /**
+   * Adjust the width of the glimmer in px or % values.
+   */
+  readonly width?: number | `${number}%`;
+}
+
+export const GLIMMER_TEST_ID = "ATL-Glimmer";
+export const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
+
+export function Glimmer({
+  width,
+  shape = "rectangle",
+  size = "base",
+  timing = "base",
+}: GlimmerProps) {
+  const leftPosition = useRef(new Animated.Value(-shineWidth)).current;
+  const [parentWidth, setParentWidth] = useState(0);
+
+  useEffect(() => {
+    const shine = Animated.loop(
+      Animated.timing(leftPosition, {
+        toValue: parentWidth + shineWidth,
+        duration:
+          timing === "base"
+            ? tokens["timing-loading--extended"]
+            : tokens["timing-loading"],
+        easing: Easing.ease,
+        useNativeDriver: true,
+      }),
+    );
+
+    shine.start();
+
+    return shine.stop;
+  }, [parentWidth]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        sizeStyles[size],
+        shapeStyles[shape],
+        { width },
+      ]}
+      onLayout={getWidth}
+      testID={GLIMMER_TEST_ID}
+    >
+      <Animated.View
+        style={[styles.shine, { transform: [{ translateX: leftPosition }] }]}
+        testID={GLIMMER_SHINE_TEST_ID}
+      >
+        <Svg>
+          <Defs>
+            <LinearGradient id="gradientShine" x1={0} y1={0.5} x2={1} y2={0.5}>
+              <Stop
+                offset="0%"
+                stopColor={tokens["color-surface--background"]}
+              />
+              <Stop offset="50%" stopColor={tokens["color-surface"]} />
+              <Stop
+                offset="100%"
+                stopColor={tokens["color-surface--background"]}
+              />
+            </LinearGradient>
+          </Defs>
+          <Rect fill="url(#gradientShine)" height="100%" width="100%" />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+
+  function getWidth(event: LayoutChangeEvent) {
+    setParentWidth(event.nativeEvent.layout.width);
+  }
+}

package/src/Glimmer/index.ts

@@ -0,0 +1 @@
+export * from "./Glimmer";

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

@@ -15,7 +15,7 @@ exports[`when Heading called with Subtitle variation should match snapshot 1`] =
         "fontFamily": "inter-bold",
       },
       {
-        "color": "rgb(1, 41, 57)",
+        "color": "rgb(1, 40, 55)",
       },
       {
         "textAlign": "left",
@@ -48,7 +48,7 @@ exports[`when Heading called with an alignment should match snapshot 1`] = `
         "fontFamily": "inter-bold",
       },
       {
-        "color": "rgb(1, 41, 57)",
+        "color": "rgb(1, 40, 55)",
       },
       {
         "textAlign": "right",
@@ -82,7 +82,7 @@ exports[`when Heading called with maxLines should match snapshot 1`] = `
         "fontFamily": "inter-bold",
       },
       {
-        "color": "rgb(1, 41, 57)",
+        "color": "rgb(1, 40, 55)",
       },
       {
         "textAlign": "left",
@@ -149,7 +149,7 @@ exports[`when Heading called with sub-heading variation and text-color should ma
         "fontFamily": "inter-semibold",
       },
       {
-        "color": "rgb(77, 105, 116)",
+        "color": "rgb(78, 105, 116)",
       },
       {
         "textAlign": "left",
@@ -183,7 +183,7 @@ exports[`when Heading called with sub-heading variation should match snapshot 1`
         "fontFamily": "inter-semibold",
       },
       {
-        "color": "rgb(1, 41, 57)",
+        "color": "rgb(1, 40, 55)",
       },
       {
         "textAlign": "left",
@@ -216,7 +216,7 @@ exports[`when Heading called with text as the only prop should match snapshot 1`
         "fontFamily": "inter-bold",
       },
       {
-        "color": "rgb(1, 41, 57)",
+        "color": "rgb(1, 40, 55)",
       },
       {
         "textAlign": "left",
@@ -250,7 +250,7 @@ exports[`when Heading called with title variation should match snapshot 1`] = `
         "fontFamily": "jobberpro-xbd",
       },
       {
-        "color": "rgb(1, 41, 57)",
+        "color": "rgb(1, 40, 55)",
       },
       {
         "textAlign": "left",