@jobber/components-native 0.62.3 → 0.63.0

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { sizeStyles } from "./Glimmer.size.style";
+import { shapeStyles } from "./Glimmer.shape.style";
+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 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 {};

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

@@ -0,0 +1,14 @@
+export declare const shapeStyles: {
+    rectangle: {
+        width: string;
+    };
+    square: {
+        width: string;
+        aspectRatio: number;
+    };
+    circle: {
+        width: string;
+        aspectRatio: number;
+        borderRadius: number;
+    };
+};

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

@@ -0,0 +1,17 @@
+export declare const sizeStyles: {
+    small: {
+        height: number;
+    };
+    base: {
+        height: number;
+    };
+    large: {
+        height: number;
+    };
+    larger: {
+        height: number;
+    };
+    largest: {
+        height: number;
+    };
+};

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

@@ -0,0 +1,18 @@
+export declare const shineWidth: number;
+export declare const styles: {
+    container: {
+        backgroundColor: string;
+        overflow: "hidden";
+        position: "relative";
+        width: string;
+        height: number;
+        borderRadius: number;
+    };
+    shine: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: number;
+        height: string;
+    };
+};

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

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

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

@@ -67,5 +67,15 @@ export interface InputFieldWrapperProps {
      * Change the behaviour of when the toolbar becomes visible.
      */
     readonly toolbarVisibility?: "always" | "while-editing";
+    /**
+     * Show loading indicator.
+     */
+    readonly loading?: boolean;
+    /**
+     * Change the type of loading indicator to spinner or glimmer.
+     */
+    readonly loadingType?: "spinner" | "glimmer";
 }
-export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, }: InputFieldWrapperProps): JSX.Element;
+export declare const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
+export declare const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): JSX.Element;

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

@@ -91,8 +91,30 @@ export declare const styles: {
         zIndex: number;
     };
     toolbar: {
+        flexBasis: string;
         flexDirection: "row";
         gap: number;
         paddingBottom: number;
     };
+    loadingSpinner: {
+        justifyContent: "center";
+        paddingRight: number;
+    };
+    loadingGlimmers: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        gap: number;
+        paddingTop: number;
+        paddingRight: number;
+        backgroundColor: string;
+        overflow: "hidden";
+    };
+    loadingGlimmersHasValue: {
+        top: number;
+        paddingTop: number;
+        bottom: number;
+    };
 };

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

@@ -4,7 +4,7 @@ import { RegisterOptions } from "react-hook-form";
 import { IconNames } from "@jobber/design";
 import { Clearable } from "@jobber/hooks";
 import { InputFieldStyleOverride, InputFieldWrapperProps } from "../InputFieldWrapper/InputFieldWrapper";
-export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" | "toolbarVisibility"> {
+export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" | "toolbarVisibility" | "loading" | "loadingType"> {
     /**
      * Highlights the field red and shows message below (if string) to indicate an error
      */

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

@@ -17,29 +17,30 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
-export * from "./FormatFile";
 export * from "./Form";
+export * from "./FormatFile";
 export * from "./FormField";
+export * from "./Glimmer";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
-export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
 export * from "./InputDate";
 export * from "./InputEmail";
+export * from "./InputFieldWrapper";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
-export * from "./InputTime";
 export * from "./InputText";
+export * from "./InputTime";
 export * from "./Menu";
-export * from "./TextList";
-export * from "./ThumbnailList";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";
+export * from "./TextList";
+export * from "./ThumbnailList";
 export * from "./Toast";
 export * from "./Typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.62.3",
+  "version": "0.63.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -36,7 +36,7 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.56.3",
+    "@jobber/design": "^0.56.4",
     "@jobber/hooks": "^2.9.4",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.4.10",
@@ -84,5 +84,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "49814f608cafabdde783c712972de4665cc6c10c"
+  "gitHead": "15034baa004c4a11f17338b96d6f2678f3183d56"
 }

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

@@ -108,8 +108,33 @@ export const styles = StyleSheet.create({
   },
 
   toolbar: {
+    flexBasis: "100%",
     flexDirection: "row",
     gap: tokens["space-small"],
     paddingBottom: tokens["space-small"],
   },
+
+  loadingSpinner: {
+    justifyContent: "center",
+    paddingRight: tokens["space-small"],
+  },
+
+  loadingGlimmers: {
+    position: "absolute",
+    top: tokens["space-base"],
+    bottom: tokens["space-base"],
+    left: 0,
+    right: 0,
+    gap: tokens["space-small"],
+    paddingTop: tokens["space-small"],
+    paddingRight: tokens["space-large"],
+    backgroundColor: tokens["color-surface"],
+    overflow: "hidden",
+  },
+
+  loadingGlimmersHasValue: {
+    top: tokens["space-large"],
+    paddingTop: tokens["space-base"] - tokens["space-smaller"],
+    bottom: tokens["space-smaller"],
+  },
 });

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -8,6 +8,10 @@ import {
   commonInputStyles,
 } from ".";
 import { styles } from "./InputFieldWrapper.style";
+import {
+  INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID,
+  INPUT_FIELD_WRAPPER_SPINNER_TEST_ID,
+} from "./InputFieldWrapper";
 import { typographyStyles } from "../Typography";
 
 const mockLabel = { label: "$" };
@@ -31,6 +35,7 @@ function renderWithSuffixLabel(hasValue: boolean): RenderAPI {
 }
 
 const clearInput = "Clear input";
+// eslint-disable-next-line max-statements
 describe("InputFieldWrapper", () => {
   it("renders an invalid InputFieldWrapper", () => {
     const { getByTestId } = renderInputFieldWrapper({ invalid: true });
@@ -269,4 +274,29 @@ describe("InputFieldWrapper", () => {
       expect(getByText("I am a tool")).toBeDefined();
     });
   });
+
+  describe("Loading state", () => {
+    it("does not render any loading indicators", () => {
+      const { queryByTestId } = renderInputFieldWrapper({});
+      expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
+      expect(queryByTestId(INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID)).toBeNull();
+    });
+
+    it("renders a loading spinner by default when loading is true and loadingType is not set", () => {
+      const { getByTestId, queryByTestId } = renderInputFieldWrapper({
+        loading: true,
+      });
+      expect(getByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeDefined();
+      expect(queryByTestId(INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID)).toBeNull();
+    });
+
+    it("renders a glimmer when loading is true and loadingType is glimmer", () => {
+      const { getByTestId, queryByTestId } = renderInputFieldWrapper({
+        loading: true,
+        loadingType: "glimmer",
+      });
+      expect(getByTestId(INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID)).toBeDefined();
+      expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
+    });
+  });
 });

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -13,9 +13,11 @@ import { styles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
 import { ClearAction } from "./components/ClearAction";
+import { Glimmer } from "../Glimmer/Glimmer";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { TextVariation, typographyStyles } from "../Typography";
 import { Text } from "../Text";
+import { ActivityIndicator } from "../ActivityIndicator";
 
 export type Clearable = "never" | "while-editing" | "always";
 
@@ -98,8 +100,23 @@ export interface InputFieldWrapperProps {
    * Change the behaviour of when the toolbar becomes visible.
    */
   readonly toolbarVisibility?: "always" | "while-editing";
+
+  /**
+   * Show loading indicator.
+   */
+  readonly loading?: boolean;
+
+  /**
+   * Change the type of loading indicator to spinner or glimmer.
+   */
+  readonly loadingType?: "spinner" | "glimmer";
 }
 
+export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID =
+  "ATL-InputFieldWrapper-Glimmers";
+export const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID =
+  "ATL-InputFieldWrapper-Spinner";
+
 export function InputFieldWrapper({
   invalid,
   disabled,
@@ -117,6 +134,8 @@ export function InputFieldWrapper({
   styleOverride,
   toolbar,
   toolbarVisibility = "while-editing",
+  loading = false,
+  loadingType = "spinner",
 }: InputFieldWrapperProps): JSX.Element {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
@@ -125,6 +144,9 @@ export function InputFieldWrapper({
   const isToolbarVisible =
     toolbar && (toolbarVisibility === "always" || focused);
 
+  const showLoadingSpinner = loading && loadingType === "spinner";
+  const showLoadingGlimmer = loading && loadingType === "glimmer";
+
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
       <View
@@ -177,7 +199,25 @@ export function InputFieldWrapper({
               />
             )}
             {children}
-            {(showClearAction || suffix?.label || suffix?.icon) && (
+
+            {showLoadingGlimmer && (
+              <View
+                testID={INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID}
+                style={[
+                  styles.loadingGlimmers,
+                  hasValue && styles.loadingGlimmersHasValue,
+                ]}
+              >
+                <Glimmer size="small" width="80%" />
+                <Glimmer size="small" />
+                <Glimmer size="small" width="70%" />
+              </View>
+            )}
+
+            {(showClearAction ||
+              suffix?.label ||
+              suffix?.icon ||
+              showLoadingSpinner) && (
               <View style={styles.inputEndContainer}>
                 {showClearAction && (
                   <ClearAction
@@ -196,6 +236,15 @@ export function InputFieldWrapper({
                     styleOverride={styleOverride?.suffixLabel}
                   />
                 )}
+
+                {showLoadingSpinner && (
+                  <View style={styles.loadingSpinner}>
+                    <ActivityIndicator
+                      testID={INPUT_FIELD_WRAPPER_SPINNER_TEST_ID}
+                    />
+                  </View>
+                )}
+
                 {suffix?.icon && (
                   <SuffixIcon
                     disabled={disabled}

package/src/InputText/InputText.tsx

@@ -33,7 +33,10 @@ import { InputFieldWrapper } from "../InputFieldWrapper";
 import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 
 export interface InputTextProps
-  extends Pick<InputFieldWrapperProps, "toolbar" | "toolbarVisibility"> {
+  extends Pick<
+    InputFieldWrapperProps,
+    "toolbar" | "toolbarVisibility" | "loading" | "loadingType"
+  > {
   /**
    * Highlights the field red and shows message below (if string) to indicate an error
    */
@@ -272,6 +275,8 @@ function InputTextInternal(
     styleOverride,
     toolbar,
     toolbarVisibility,
+    loading,
+    loadingType,
   }: InputTextProps,
   ref: Ref<InputTextRef>,
 ) {
@@ -375,6 +380,8 @@ function InputTextInternal(
       styleOverride={styleOverride}
       toolbar={toolbar}
       toolbarVisibility={toolbarVisibility}
+      loading={loading}
+      loadingType={loadingType}
     >
       <TextInput
         inputAccessoryViewID={inputAccessoryID || undefined}
@@ -391,6 +398,7 @@ function InputTextInternal(
           multiline && Platform.OS === "ios" && styles.multilineInputiOS,
           multiline && hasMiniLabel && styles.multiLineInputWithMini,
           styleOverride?.inputText,
+          loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
         // @ts-expect-error - does exist on 0.71 and up https://github.com/facebook/react-native/pull/39281
         readOnly={readonly}
@@ -408,6 +416,7 @@ function InputTextInternal(
         blurOnSubmit={shouldBlurOnSubmit}
         accessibilityLabel={accessibilityLabel || placeholder}
         accessibilityHint={accessibilityHint}
+        accessibilityState={{ busy: loading }}
         secureTextEntry={secureTextEntry}
         {...androidA11yProps}
         onFocus={event => {