@jobber/components-native 0.56.2 → 0.57.0

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/components/ClearAction/ClearAction.tsx

@@ -17,6 +17,7 @@ export function ClearAction({
   hasMarginRight = false,
 }: ClearActionProps): JSX.Element {
   const { t } = useAtlantisI18n();
+
   return (
     <Pressable
       style={[styles.container, hasMarginRight && styles.addedMargin]}

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -15,12 +15,12 @@ import { typographyStyles } from "../../../Typography";
 import { styles } from "../../InputFieldWrapper.style";
 
 export interface PrefixLabelProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid: boolean;
-  label: string;
-  styleOverride?: StyleProp<TextStyle>;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid: boolean;
+  readonly label: string;
+  readonly styleOverride?: StyleProp<TextStyle>;
 }
 
 export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
@@ -68,12 +68,12 @@ export function PrefixLabel({
 }
 
 export interface PrefixIconProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid?: boolean;
-  icon: IconNames;
-  styleOverride?: StyleProp<ViewStyle>;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid?: boolean;
+  readonly icon: IconNames;
+  readonly styleOverride?: StyleProp<ViewStyle>;
 }
 
 export function PrefixIcon({

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -15,13 +15,13 @@ import { typographyStyles } from "../../../Typography";
 import { styles } from "../../InputFieldWrapper.style";
 
 export interface SuffixLabelProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid?: boolean;
-  label: string;
-  hasLeftMargin?: boolean;
-  styleOverride?: StyleProp<TextStyle>;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid?: boolean;
+  readonly label: string;
+  readonly hasLeftMargin?: boolean;
+  readonly styleOverride?: StyleProp<TextStyle>;
 }
 
 export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
@@ -71,13 +71,13 @@ export function SuffixLabel({
 }
 
 export interface SuffixIconProps {
-  focused: boolean;
-  disabled?: boolean;
-  hasMiniLabel: boolean;
-  inputInvalid?: boolean;
-  icon: IconNames;
-  hasLeftMargin?: boolean;
-  onPress?: () => void;
+  readonly focused: boolean;
+  readonly disabled?: boolean;
+  readonly hasMiniLabel: boolean;
+  readonly inputInvalid?: boolean;
+  readonly icon: IconNames;
+  readonly hasLeftMargin?: boolean;
+  readonly onPress?: () => void;
 }
 
 export function SuffixIcon({

package/src/InputNumber/InputNumber.tsx

@@ -36,12 +36,14 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
     }
   };
   const { t } = useAtlantisI18n();
+
   const handleChange = (newValue: number | string | undefined) => {
     props.onChange?.(newValue);
   };
 
   const { inputTransform: convertToString, outputTransform: convertToNumber } =
     useNumberTransform(props.value);
+
   return (
     <InputText
       {...props}
@@ -69,10 +71,12 @@ function hasPeriodAtEnd(value: string) {
   // matches patterns like ".", "0.", "12.", "+1.", and "-0."
   return !!value?.match(/^[-+]?[0-9]*\.$/);
 }
+
 function hasScientificNotationAtEnd(value: string) {
   // matches patterns like "1e", "+2e", "1.2e" and "-3e"
   return !!value?.match(/^[-+]?[0-9]+(\.?[0-9]+)?e$/);
 }
+
 function hasPlusMinusAtEnd(value: string) {
   // matches "+" and "-"
   return !!value?.match(/^[-+]+$/);
@@ -92,6 +96,7 @@ export function shouldShowUserValue(value: string): boolean {
   ];
   const isSpecial = (v: string) =>
     specialCasesFn.reduce((acc, fn) => acc || fn(v), false);
+
   return isSpecial(value);
 }
 
@@ -105,9 +110,11 @@ export function useNumberTransform(controlledValue: number | undefined): {
 
   const convertToNumber = (newValue: string) => {
     setTypedValue(newValue);
+
     if (newValue?.match?.(NUMBER_VALIDATION_REGEX)) {
       return parseFloat(newValue);
     }
+
     return newValue;
   };
 
@@ -115,6 +122,7 @@ export function useNumberTransform(controlledValue: number | undefined): {
     if (shouldShowUserValue(typedValue)) {
       return typedValue;
     }
+
     return internalValue?.toString() || undefined;
   };
 

package/src/InputPassword/InputPassword.test.tsx

@@ -8,6 +8,7 @@ jest.mock("../InputFieldWrapper", () => ({
   ...jest.requireActual("../InputFieldWrapper"),
   InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
     MockInputFieldWrapper(props);
+
     return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
   },
 }));

package/src/InputPassword/InputPassword.tsx

@@ -15,7 +15,7 @@ export interface InputPasswordProps
    *
    * @default true
    */
-  usePrivacyEye?: boolean;
+  readonly usePrivacyEye?: boolean;
 }
 
 function InputPasswordInternal(
@@ -43,6 +43,7 @@ function InputPasswordInternal(
         onPress: handleOnPress,
       };
     }
+
     return undefined;
   };
 

package/src/InputPressable/InputPressable.test.tsx

@@ -8,6 +8,7 @@ jest.mock("../InputFieldWrapper", () => ({
   ...jest.requireActual("../InputFieldWrapper"),
   InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
     MockInputFieldWrapper(props);
+
     return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
   },
 }));

package/src/InputSearch/InputSearch.tsx

@@ -54,6 +54,7 @@ function SearchInputInternal(
 
   useEffect(() => {
     delayedSearch(value);
+
     return delayedSearch.cancel;
   }, [value, delayedSearch]);
 

package/src/InputText/context/InputAccessoriesProvider.test.tsx

@@ -31,7 +31,7 @@ describe("InputAccessories", () => {
   const mockInputOneFocus = jest.fn();
   const mockInputTwoFocus = jest.fn();
 
-  function InputWrapper({ focusedInput }: { focusedInput: string }) {
+  function InputWrapper({ focusedInput }: { readonly focusedInput: string }) {
     const { register, setFocusedInput, unregister } = useContext(
       InputAccessoriesContext,
     );
@@ -40,12 +40,14 @@ describe("InputAccessories", () => {
       register(inputOneName, () => mockInputOneFocus());
       register(inputTwoName, () => mockInputTwoFocus());
       setFocusedInput(focusedInput);
+
       return () => {
         unregister(inputOneName);
         unregister(inputTwoName);
         setFocusedInput("");
       };
     }, [register, setFocusedInput, unregister, focusedInput]);
+
     return (
       <>
         <InputText
@@ -58,6 +60,7 @@ describe("InputAccessories", () => {
       </>
     );
   }
+
   function SetupInputAccessoriesTest(focusedInput: string) {
     mockUseFormController.mockImplementation(({ name, value, validations }) => {
       const { field, error } = actualUseFormController({
@@ -65,8 +68,10 @@ describe("InputAccessories", () => {
         value,
         validations,
       });
+
       return { field, error };
     });
+
     return render(<InputWrapper focusedInput={focusedInput} />, {
       wrapper: InputAccessoriesProvider,
     });

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -15,7 +15,7 @@ import { styles } from "./InputAccessoriesProvider.style";
 export function InputAccessoriesProvider({
   children,
 }: {
-  children: ReactNode;
+  readonly children: ReactNode;
 }): JSX.Element {
   const inputAccessoryID = useRef(v4()).current;
   const {

package/src/InputTime/utils/index.ts

@@ -15,6 +15,7 @@ export function roundUpToNearestMinutes(
   minutes: MinutesIncrement,
 ): Date {
   const ms = 1000 * 60 * minutes;
+
   return new Date(Math.ceil(date.getTime() / ms) * ms);
 }
 

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -20,6 +20,7 @@ export function MenuOption({
 }: MenuOptionInternalProps): JSX.Element {
   const destructiveColor = "critical";
   const textVariation = destructive ? destructiveColor : "heading";
+
   return (
     <View testID="ATL-MENU-OPTIONS">
       <Pressable

package/src/Menu/utils.ts

@@ -82,6 +82,7 @@ function getHorizontalPosition(
   if (menuPositionHorizontal === "menuRight") {
     getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
   }
+
   if (menuPositionHorizontal === "menuLeft") {
     getLeftPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
   }

package/src/ProgressBar/ProgressBarInner.tsx

@@ -43,5 +43,6 @@ export function calculateWidth(total: number, current: number): number {
   const curr = Math.max(0, current);
 
   if (curr >= total) return 100;
+
   return (curr / total) * 100;
 }

package/src/Select/components/SelectInternalPicker/SelectInternalPicker.tsx

@@ -12,6 +12,7 @@ export function SelectInternalPicker({
   onChange,
 }: SelectInternalPickerProps): JSX.Element {
   if (disabled) return <>{children}</>;
+
   if (isIOS14AndUp()) {
     return (
       <SelectPressable>

package/src/Select/components/SelectInternalPicker/utils.ts

@@ -13,6 +13,7 @@ export function handlePress(onChange: SelectInternalPickerProps["onChange"]) {
 export function isIOS14AndUp(): boolean {
   if (Platform.OS === "ios") {
     const majorVersionIOS = parseInt(Platform.Version, 10);
+
     return majorVersionIOS >= 14;
   }
 

package/src/StatusLabel/StatusLabel.tsx

@@ -57,7 +57,7 @@ export function StatusLabel({
 }
 
 interface StatusLabelIconProps {
-  status: StatusType;
+  readonly status: StatusType;
 }
 
 function StatusLabelIcon({ status }: StatusLabelIconProps) {

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -61,6 +61,7 @@ export function BaseSwitch({
         return tokens["color-surface--background"];
       }
     }
+
     return undefined; //use default iOS
   }
 

package/src/Text/Text.tsx

@@ -147,5 +147,6 @@ function getFontWeight({
 }: Pick<TextProps, "level" | "emphasis">): BaseWeight {
   if (emphasis === "strong") return "semiBold";
   if (level === "textSupporting") return "medium";
+
   return "regular";
 }

package/src/Toast/Toast.tsx

@@ -19,6 +19,7 @@ function DefaultToast({ text1 }: ToastConfigParams<string>): JSX.Element {
   const { bottom } = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
   const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+
   return (
     <View style={toastContainerStyles}>
       <View style={styles.toast}>
@@ -48,7 +49,7 @@ export interface JobberToastProps {
    * Has effect only when the position is "bottom".
    * @default 40
    */
-  bottomOffset?: number;
+  readonly bottomOffset?: number;
 }
 
 export function JobberToast({ bottomOffset }: JobberToastProps): JSX.Element {

package/src/Typography/Typography.tsx

@@ -207,6 +207,7 @@ function getFontStyle(
     fontWeight,
   )}`;
   const fontStyling = styles[styleKey];
+
   if (fontStyling) {
     return fontStyling;
   } else {
@@ -234,6 +235,7 @@ function getColorStyle(color?: TextColor, reverseTheme?: boolean) {
     return styles.greyBlue;
   }
   const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
+
   return styles[`${colorStyleKey}`];
 }
 
@@ -248,10 +250,13 @@ function getSizeAndHeightStyle(
   lineHeightOverwrite?: LineHeight,
 ) {
   const fontSize = styles[`${textSize}Size`];
+
   if (lineHeightOverwrite) {
     const lineHeight = styles[`${lineHeightOverwrite}LineHeight`];
+
     return StyleSheet.flatten([fontSize, lineHeight]);
   }
+
   return fontSize;
 }
 

package/src/hooks/useAtlantisI18n/utils/dateFormatter.ts

@@ -13,6 +13,7 @@ export function dateFormatter(
   { locale, timeZone }: DateFormatterOptions,
 ): string {
   const zonedTime = utcToZonedTime(date, timeZone);
+
   return format(zonedTime, dateTimeFormat, {
     locale: getDateFnsLocale(locale),
   });

package/src/hooks/useFormController.ts

@@ -51,6 +51,7 @@ export function useFormController<T>({
   // TODO: Add support for two-part identifiers (e.g. "property.province")
   const fieldIdentifiers = fieldName.split(".");
   let error: FieldError | undefined;
+
   if (fieldIdentifiers.length === 3) {
     const [section, item, identifier] = fieldIdentifiers;
     error = errors[section]?.[item]?.[identifier];
@@ -64,5 +65,6 @@ export function useFormController<T>({
 function useControlName(name?: string): UseControllerReturn["field"]["name"] {
   const [identifier] = useState(v1());
   const prefix = `generatedName--${identifier}`;
+
   return `${name || prefix}` as const;
 }

package/src/utils/intl/capitalize.ts

@@ -2,5 +2,6 @@ export function capitalize(text: string): string {
   if (!text) {
     return "";
   }
+
   return text.charAt(0).toLocaleUpperCase("en-US") + text.slice(1);
 }

package/src/utils/test/MockSafeAreaProvider.tsx

@@ -6,9 +6,9 @@ import {
 } from "react-native-safe-area-context";
 
 interface MockSafeAreaProviderProps {
-  children: React.ReactNode;
-  frame?: Rect;
-  insets?: EdgeInsets;
+  readonly children: React.ReactNode;
+  readonly frame?: Rect;
+  readonly insets?: EdgeInsets;
 }
 
 export function MockSafeAreaProvider({