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

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/Icon/Icon.tsx

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

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

@@ -34,7 +34,12 @@ exports[`renders apple icon 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4284840068}
+    fill={
+      {
+        "payload": 4284840068,
+        "type": 0,
+      }
+    }
     propList={
       [
         "fill",
@@ -43,7 +48,12 @@ exports[`renders apple icon 1`] = `
   >
     <RNSVGPath
       d="M18.467 12.754c-.027-2.996 2.453-4.453 2.566-4.52-1.404-2.048-3.581-2.328-4.346-2.35-1.828-.193-3.601 1.094-4.533 1.094-.95 0-2.384-1.076-3.93-1.044-1.988.03-3.849 1.182-4.87 2.97C1.25 12.55 2.82 17.91 4.838 20.856c1.01 1.443 2.189 3.055 3.733 2.998 1.51-.062 2.074-.963 3.897-.963 1.806 0 2.335.963 3.91.927 1.62-.026 2.641-1.45 3.615-2.907 1.166-1.654 1.635-3.283 1.653-3.367-.038-.013-3.147-1.2-3.178-4.79Zm-2.974-8.81c.812-1.015 1.368-2.397 1.213-3.8-1.175.053-2.646.814-3.492 1.807-.75.876-1.418 2.31-1.246 3.66 1.321.099 2.677-.666 3.525-1.666Z"
-      fill={4284840068}
+      fill={
+        {
+          "payload": 4284840068,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -88,7 +98,12 @@ exports[`renders home icon 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4284840068}
+    fill={
+      {
+        "payload": 4284840068,
+        "type": 0,
+      }
+    }
     propList={
       [
         "fill",
@@ -97,7 +112,12 @@ exports[`renders home icon 1`] = `
   >
     <RNSVGPath
       d="M13.147 3.582a2 2 0 0 0-2.294 0l-9.426 6.599a1 1 0 1 0 1.147 1.638L5 10.121V18a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-7.88l2.427 1.7a1 1 0 0 0 1.146-1.64l-9.426-6.598ZM17 8.721V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8.72l5-3.5 5 3.5Z"
-      fill={4284840068}
+      fill={
+        {
+          "payload": 4284840068,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -142,7 +162,12 @@ exports[`renders large arrowDown icon 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4284840068}
+    fill={
+      {
+        "payload": 4284840068,
+        "type": 0,
+      }
+    }
     propList={
       [
         "fill",
@@ -151,7 +176,12 @@ exports[`renders large arrowDown icon 1`] = `
   >
     <RNSVGPath
       d="M7.703 8.291a.996.996 0 0 0-1.41.001.994.994 0 0 0 0 1.41l5 5.005a.998.998 0 0 0 1.415 0l5-5a.994.994 0 0 0 0-1.41.995.995 0 0 0-1.411-.001L12 12.584 7.703 8.291Z"
-      fill={4284840068}
+      fill={
+        {
+          "payload": 4284840068,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -196,7 +226,12 @@ exports[`renders quote icon with themed color 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4286427150}
+    fill={
+      {
+        "payload": 4286427150,
+        "type": 0,
+      }
+    }
     propList={
       [
         "fill",
@@ -205,7 +240,12 @@ exports[`renders quote icon with themed color 1`] = `
   >
     <RNSVGPath
       d="M14 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-2 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
-      fill={4286427150}
+      fill={
+        {
+          "payload": 4286427150,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -214,7 +254,12 @@ exports[`renders quote icon with themed color 1`] = `
     />
     <RNSVGPath
       d="M3.586 6C3.196 6.39 3 6.902 3 7.414c0 .512.195 1.024.586 1.414l.99.991C4.315 10.554 4 11.175 4 12a7 7 0 0 0 7 7h9v1a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1h-3v-5a7 7 0 0 0-7-7c-.825 0-1.446.314-2.18.577l-.992-.991A1.994 1.994 0 0 0 6.414 4c-.512 0-1.023.195-1.414.586L3.586 6Zm3.393.565A7.041 7.041 0 0 0 5.565 7.98L5 7.414 6.414 6l.565.565ZM11 7a5 5 0 0 1 5 5v5h-5a5 5 0 0 1 0-10Z"
-      fill={4286427150}
+      fill={
+        {
+          "payload": 4286427150,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -259,7 +304,12 @@ exports[`renders small more icon 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4284840068}
+    fill={
+      {
+        "payload": 4284840068,
+        "type": 0,
+      }
+    }
     propList={
       [
         "fill",
@@ -268,7 +318,12 @@ exports[`renders small more icon 1`] = `
   >
     <RNSVGPath
       d="M4 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm6 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm8-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
-      fill={4284840068}
+      fill={
+        {
+          "payload": 4284840068,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -313,7 +368,12 @@ exports[`renders star icon with custom color 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4284840068}
+    fill={
+      {
+        "payload": 4284840068,
+        "type": 0,
+      }
+    }
     propList={
       [
         "fill",
@@ -322,7 +382,12 @@ exports[`renders star icon with custom color 1`] = `
   >
     <RNSVGPath
       d="m15.673 13.337 3.673-3.58-5.076-.738-2.27-4.6-2.27 4.6-5.076.738 3.673 3.58-.867 5.176L12 16.006l4.54 2.386-.867-5.055ZM12 18.335l-4.505 2.49a1.546 1.546 0 0 1-2.244-1.63l.86-5.137-3.644-3.553a1.546 1.546 0 0 1 .857-2.637l5.037-.732 2.252-4.273a1.547 1.547 0 0 1 2.774 0l2.252 4.273 5.037.732a1.546 1.546 0 0 1 .857 2.637l-3.645 3.553.86 5.139a1.547 1.547 0 0 1-2.243 1.63L12 18.334Z"
-      fill={4294128419}
+      fill={
+        {
+          "payload": 4294128419,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",
@@ -372,16 +437,11 @@ exports[`renders thumbsDown icon 1`] = `
   vbWidth={24}
 >
   <RNSVGGroup
-    fill={4284840068}
-    matrix={
-      [
-        1,
-        0,
-        0,
-        1,
-        0,
-        0,
-      ]
+    fill={
+      {
+        "payload": 4284840068,
+        "type": 0,
+      }
     }
     propList={
       [
@@ -391,7 +451,12 @@ exports[`renders thumbsDown icon 1`] = `
   >
     <RNSVGPath
       d="M8 11.78V19h8l3-5.76v-1.29h-7.639l1.036-7.944L8 11.78ZM6.134 11l4.555-8.034c1.124-1.846 3.971-.844 3.691 1.299l-.74 5.685h6.86a.5.5 0 0 1 .5.5v3a1 1 0 0 1-.084.4l-3.276 6.648a.95.95 0 0 1-.44.453c-.132.065-.276.049-.423.049H4c-1.105 0-2-1.045-2-2.15V13a2 2 0 0 1 2-2h2.134ZM6 13H4v6h2v-6Z"
-      fill={4284840068}
+      fill={
+        {
+          "payload": 4284840068,
+          "type": 0,
+        }
+      }
       propList={
         [
           "fill",

package/src/InputCurrency/InputCurrency.tsx

@@ -46,10 +46,11 @@ export interface InputCurrencyProps
   readonly maxLength?: number;
 
   onChange?(newValue?: number | string | undefined): void;
-  value?: number;
-  defaultValue?: number;
-  keyboard?: "decimal-pad" | "numbers-and-punctuation";
+  readonly value?: number;
+  readonly defaultValue?: number;
+  readonly keyboard?: "decimal-pad" | "numbers-and-punctuation";
 }
+
 export const getInternalValue = (
   props: InputCurrencyProps,
   field: ControllerRenderProps<FieldValues, string>,
@@ -59,6 +60,7 @@ export const getInternalValue = (
   ) => string,
 ): string => {
   if (!props.value && !field.value) return "";
+
   return (
     props.value?.toString() ??
     formatNumber(field.value, {
@@ -113,6 +115,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
       decimalNumbers !== ""
         ? transformedValue.toString() + "." + decimalNumbers.slice(1)
         : transformedValue.toString();
+
     if (checkLastChar(stringValue)) {
       const roundedDecimal = configureDecimal(
         decimalCount,
@@ -167,40 +170,39 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
   const { t } = useAtlantisI18n();
 
   return (
-    <>
-      <InputText
-        {...props}
-        prefix={showCurrencySymbol ? { label: currencySymbol } : undefined}
-        keyboard={getKeyboard(props)}
-        value={props.value?.toString() || displayValue}
-        defaultValue={props.defaultValue?.toString()}
-        onChangeText={handleChange}
-        transform={{
-          output: val => {
-            return val
-              ?.split(floatSeparators.group)
-              .join("")
-              .replace(floatSeparators.decimal, ".");
-          },
-        }}
-        validations={{
-          pattern: {
-            value: NUMBER_VALIDATION_REGEX,
-            message: t("errors.notANumber"),
-          },
-          ...props.validations,
-        }}
-        onBlur={() => {
-          props.onBlur?.();
-          if (
-            field.value === 0 ||
-            field.value === "" ||
-            field.value === undefined
-          ) {
-            setDisplayValue("0");
-          }
-        }}
-      />
-    </>
+    <InputText
+      {...props}
+      prefix={showCurrencySymbol ? { label: currencySymbol } : undefined}
+      keyboard={getKeyboard(props)}
+      value={props.value?.toString() || displayValue}
+      defaultValue={props.defaultValue?.toString()}
+      onChangeText={handleChange}
+      transform={{
+        output: val => {
+          return val
+            ?.split(floatSeparators.group)
+            .join("")
+            .replace(floatSeparators.decimal, ".");
+        },
+      }}
+      validations={{
+        pattern: {
+          value: NUMBER_VALIDATION_REGEX,
+          message: t("errors.notANumber"),
+        },
+        ...props.validations,
+      }}
+      onBlur={() => {
+        props.onBlur?.();
+
+        if (
+          field.value === 0 ||
+          field.value === "" ||
+          field.value === undefined
+        ) {
+          setDisplayValue("0");
+        }
+      }}
+    />
   );
 }

package/src/InputCurrency/utils.ts

@@ -1,5 +1,6 @@
 export function countDecimal(value: number): number {
   const convertedValue = value.toString();
+
   if (convertedValue.includes(".")) {
     return convertedValue.split(".")[1].length;
   }
@@ -12,10 +13,13 @@ export function limitInputWholeDigits(
   maxInputLength: number,
 ): number {
   let convertedValue = value.toString();
+
   if (convertedValue.length > maxInputLength) {
     convertedValue = convertedValue.slice(0, maxInputLength);
+
     return parseFloat(convertedValue);
   }
+
   return value;
 }
 
@@ -32,19 +36,23 @@ export function configureDecimal(
   const precision = 10 ** targetDecimalPlaces;
   const convertedValue =
     Math.round(parseFloat(transformedValue) * precision) / precision;
+
   return convertedValue;
 }
 
 export function convertToNumber(value: string): string | number {
   const regexValidation = /^[0-9]*$/;
+
   if (value?.match?.(regexValidation)) {
     return parseFloat(value);
   }
+
   return value;
 }
 
 export const checkLastChar = (stringValue: string): boolean => {
   const lastChar = stringValue[stringValue.length - 1];
+
   return Boolean(Number(stringValue)) && lastChar !== "0" && lastChar !== ".";
 };
 
@@ -85,6 +93,7 @@ export const parseGivenInput = (
     wholeIntegerValue = splittedValue[0];
     decimalNumbers = getDecimalNumbers(value, decimalSeparator);
   }
+
   return [decimalCount, wholeIntegerValue, decimalNumbers];
 };
 

package/src/InputDate/InputDate.test.tsx

@@ -139,6 +139,7 @@ describe("InputDate", () => {
   const saveButtonText = "Submit";
 
   const requiredError = "This is required";
+
   function SimpleFormWithProvider({ children, defaultValues }) {
     const formMethods = useForm({
       reValidateMode: "onChange",

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -4,7 +4,17 @@ import { tokens } from "../utils/design";
 import { typographyStyles } from "../Typography";
 
 export const styles = StyleSheet.create({
-  container: StyleSheet.flatten([commonInputStyles.container]),
+  container: StyleSheet.flatten([
+    commonInputStyles.container,
+    {
+      flexDirection: "column",
+    },
+  ]),
+
+  field: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
 
   inputContainer: {
     flexDirection: "row",
@@ -35,6 +45,7 @@ export const styles = StyleSheet.create({
     top: 0,
     paddingTop: tokens["space-small"] - tokens["space-smallest"],
     backgroundColor: tokens["color-surface"],
+    marginRight: tokens["space-small"],
     maxHeight:
       (typographyStyles.defaultSize.lineHeight || 0) + tokens["space-smaller"],
     zIndex: 1,
@@ -82,14 +93,48 @@ export const styles = StyleSheet.create({
     paddingTop: tokens["space-minuscule"],
     paddingRight: tokens["space-small"],
   },
+
   suffixIconMargin: {
     marginLeft: tokens["space-small"] + tokens["space-smaller"],
   },
+
   suffixLabelMargin: {
     marginLeft: tokens["space-smallest"],
   },
+
   inputEndContainer: {
     flexDirection: "row",
     zIndex: 1,
   },
+
+  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 });
@@ -147,6 +152,7 @@ describe("InputFieldWrapper", () => {
       const container = getByTestId("ATL-InputFieldWrapper");
       expect(container.props.style).toContainEqual({
         ...commonInputStyles.container,
+        flexDirection: "column",
       });
     });
 
@@ -225,4 +231,72 @@ describe("InputFieldWrapper", () => {
       );
     });
   });
+
+  describe("Toolbar", () => {
+    it("renders a toolbar on focused", () => {
+      const { getByText } = renderInputFieldWrapper({
+        focused: true,
+        toolbar: <Text>I am a tool</Text>,
+      });
+      expect(getByText("I am a tool")).toBeDefined();
+    });
+
+    it("does not render a toolbar when not focused", () => {
+      const { queryByText } = renderInputFieldWrapper({
+        focused: false,
+        toolbar: <Text>I am a tool</Text>,
+      });
+      expect(queryByText("I am a tool")).toBeNull();
+    });
+
+    it("does not render a toolbar when focused and toolbar is not provided", () => {
+      const { getByText, queryByText, rerender } = renderInputFieldWrapper({
+        focused: true,
+        toolbar: <Text>I am a tool</Text>,
+      });
+      expect(getByText("I am a tool")).toBeDefined();
+
+      rerender(
+        <InputFieldWrapper focused={true}>
+          <Text>Test</Text>
+        </InputFieldWrapper>,
+      );
+
+      expect(queryByText("I am a tool")).toBeNull();
+    });
+
+    it("renders a toolbar when toolbarVisibility is always", () => {
+      const { getByText } = renderInputFieldWrapper({
+        focused: false,
+        toolbar: <Text>I am a tool</Text>,
+        toolbarVisibility: "always",
+      });
+      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();
+    });
+  });
 });