@jobber/components-native 0.9.0 → 0.10.0

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

@@ -0,0 +1,30 @@
+export declare const commonInputStyles: {
+    input: {
+        width: string;
+        flexShrink: number;
+        flexGrow: number;
+        color: string;
+        fontFamily: string | undefined;
+        fontSize: number | undefined;
+        letterSpacing: number | undefined;
+        minHeight: number;
+        padding: number;
+    };
+    inputEmpty: {
+        paddingTop: number;
+    };
+    inputDisabled: {
+        color: import("react-native").ColorValue | undefined;
+    };
+    container: {
+        marginVertical: number;
+        backgroundColor: string;
+        minHeight: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        width: string;
+        borderColor: string;
+        borderStyle: "solid";
+        borderBottomWidth: number;
+    };
+};

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { FieldError } from "react-hook-form";
+import { IconNames } from "@jobber/design";
+export type Clearable = "never" | "while-editing" | "always";
+export interface InputFieldStyleOverride {
+    prefixLabel?: StyleProp<TextStyle>;
+    suffixLabel?: StyleProp<TextStyle>;
+    container?: StyleProp<ViewStyle>;
+    placeholderText?: StyleProp<TextStyle>;
+}
+export interface InputFieldWrapperProps {
+    /**
+     * Highlights the field red and shows message below (if string) to indicate an error
+     */
+    readonly invalid?: boolean | string;
+    /**
+     * Disable the input
+     */
+    readonly disabled?: boolean;
+    /**
+     * Hint text that goes above the value once the field is filled out
+     */
+    readonly placeholder?: string;
+    /**
+     * Text that goes below the input to help the user understand the input
+     */
+    readonly assistiveText?: string;
+    readonly hasMiniLabel?: boolean;
+    readonly hasValue?: boolean;
+    /**
+     * Symbol to display before the text input
+     */
+    readonly prefix?: {
+        icon?: IconNames;
+        label?: string;
+    };
+    /**
+     * Symbol to display after the text input
+     */
+    readonly suffix?: {
+        icon?: IconNames;
+        label?: string;
+        onPress?: () => void;
+    };
+    readonly error?: FieldError;
+    readonly focused?: boolean;
+    readonly children: React.ReactNode;
+    /**
+     * Adds the ClearAction that will call the onClear handler when pressed
+     */
+    readonly showClearAction?: boolean;
+    /**
+     * Callback called when the user clicks the ClearAction button. Should clear the value passed.
+     * To disallow clearing set the clearable prop to never
+     */
+    readonly onClear?: () => void;
+    /**
+     * Custom styling to override default style of the input field
+     */
+    readonly styleOverride?: InputFieldStyleOverride;
+}
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel, hasValue, error, focused, children, onClear, showClearAction, styleOverride, }: InputFieldWrapperProps): JSX.Element;

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

@@ -0,0 +1,82 @@
+export declare const styles: {
+    container: {
+        marginVertical: number;
+        backgroundColor: string;
+        minHeight: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        width: string;
+        borderColor: string;
+        borderStyle: "solid";
+        borderBottomWidth: number;
+    };
+    inputContainer: {
+        flexDirection: "row";
+        flex: number;
+        justifyContent: "flex-start";
+    };
+    inputFocused: {
+        borderColor: string;
+    };
+    inputInvalid: {
+        borderColor: string;
+    };
+    label: {
+        position: "absolute";
+        top: number | undefined;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    miniLabel: {
+        top: number;
+        paddingTop: number;
+        backgroundColor: string;
+        maxHeight: number;
+        zIndex: number;
+    };
+    miniLabelShowClearAction: {
+        backgroundColor: string;
+    };
+    disabled: {
+        backgroundColor: string;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    fieldAffix: {
+        flexDirection: "row";
+    };
+    fieldAffixMiniLabel: {
+        paddingTop: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    prefixIcon: {
+        justifyContent: "center";
+        paddingRight: number;
+    };
+    prefixLabel: {
+        justifyContent: "center";
+        paddingTop: number;
+        paddingRight: number;
+    };
+    suffixIcon: {
+        justifyContent: "center";
+    };
+    suffixLabel: {
+        justifyContent: "center";
+        paddingTop: number;
+    };
+    suffixIconMargin: {
+        marginLeft: number;
+    };
+    suffixLabelMargin: {
+        marginLeft: number;
+    };
+    inputEndContainer: {
+        flexDirection: "row";
+        zIndex: number;
+    };
+};

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ClearActionProps {
+    /**
+     * Press handler
+     */
+    readonly onPress: () => void;
+    readonly hasMarginRight?: boolean;
+}
+export declare function ClearAction({ onPress, hasMarginRight, }: ClearActionProps): JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+export declare const styles: {
+    container: {
+        width: number;
+        height: string;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        alignSelf: "center";
+    };
+    circle: {
+        backgroundColor: string;
+        borderRadius: number;
+        width: number;
+        height: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    addedMargin: {
+        marginRight: number;
+    };
+};

package/dist/types/src/InputFieldWrapper/components/ClearAction/index.d.ts

@@ -0,0 +1,2 @@
+export { ClearAction } from "./ClearAction";
+export { messages } from "./messages";

package/dist/types/src/InputFieldWrapper/components/ClearAction/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    clearTextLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { IconNames } from "@jobber/design";
+export interface PrefixLabelProps {
+    focused: boolean;
+    disabled?: boolean;
+    hasMiniLabel: boolean;
+    inputInvalid: boolean;
+    label: string;
+    styleOverride?: StyleProp<TextStyle>;
+}
+export declare const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
+export declare const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
+export declare function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
+export interface PrefixIconProps {
+    focused: boolean;
+    disabled?: boolean;
+    hasMiniLabel: boolean;
+    inputInvalid?: boolean;
+    icon: IconNames;
+    styleOverride?: StyleProp<ViewStyle>;
+}
+export declare function PrefixIcon({ focused, disabled, inputInvalid, icon, }: PrefixIconProps): JSX.Element;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { StyleProp, TextStyle } from "react-native";
+import { IconNames } from "@jobber/design";
+export interface SuffixLabelProps {
+    focused: boolean;
+    disabled?: boolean;
+    hasMiniLabel: boolean;
+    inputInvalid?: boolean;
+    label: string;
+    hasLeftMargin?: boolean;
+    styleOverride?: StyleProp<TextStyle>;
+}
+export declare const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
+export declare const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
+export declare function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
+export interface SuffixIconProps {
+    focused: boolean;
+    disabled?: boolean;
+    hasMiniLabel: boolean;
+    inputInvalid?: boolean;
+    icon: IconNames;
+    hasLeftMargin?: boolean;
+    onPress?: () => void;
+}
+export declare function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin, onPress, }: SuffixIconProps): JSX.Element;

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

@@ -0,0 +1,10 @@
+import { Clearable } from "../InputFieldWrapper";
+interface UseShowClearParameters {
+    clearable: Clearable;
+    multiline: boolean;
+    focused: boolean;
+    hasValue: boolean;
+    disabled?: boolean;
+}
+export declare function useShowClear({ clearable, multiline, focused, hasValue, disabled, }: UseShowClearParameters): boolean | undefined;
+export {};

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

@@ -0,0 +1,4 @@
+export { commonInputStyles } from "./CommonInputStyles.style";
+export { InputFieldWrapper } from "./InputFieldWrapper";
+export type { InputFieldWrapperProps, Clearable } from "./InputFieldWrapper";
+export { useShowClear } from "./hooks/useShowClear";

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

@@ -9,3 +9,4 @@ export * from "./ActivityIndicator";
 export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./InputFieldWrapper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -22,6 +22,8 @@
   },
   "dependencies": {
     "@jobber/design": "^0.39.0",
+    "react-hook-form": "^7.30.0",
+    "react-intl": "^6.4.2",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-localize": "^2.2.6",
     "react-native-svg": "^13.9.0",
@@ -44,5 +46,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "f884bf403f42a1c85f7bf840a6317ae1642653e1"
+  "gitHead": "d363c516d3f72dc510c7b0ad002fdbf479bf9292"
 }

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+import { typographyStyles } from "../Typography";
+import { tokens } from "../utils/design";
+
+export const commonInputStyles = StyleSheet.create({
+  input: {
+    width: "100%",
+    flexShrink: 1,
+    flexGrow: 1,
+    color: tokens["color-text"],
+    fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+    fontSize: typographyStyles.defaultSize.fontSize,
+    letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+    minHeight: tokens["space-largest"],
+    padding: 0,
+  },
+
+  inputEmpty: {
+    paddingTop: 0,
+  },
+
+  inputDisabled: {
+    color: typographyStyles.disabled.color,
+  },
+
+  container: {
+    marginVertical: tokens["space-smaller"],
+    backgroundColor: tokens["color-surface"],
+    minHeight: tokens["space-largest"],
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    borderColor: tokens["color-grey"],
+    borderStyle: "solid",
+    borderBottomWidth: tokens["border-base"],
+  },
+});

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -0,0 +1,93 @@
+import { StyleSheet } from "react-native";
+import { commonInputStyles } from "./CommonInputStyles.style";
+import { tokens } from "../utils/design";
+import { typographyStyles } from "../Typography";
+
+export const styles = StyleSheet.create({
+  container: StyleSheet.flatten([commonInputStyles.container]),
+
+  inputContainer: {
+    flexDirection: "row",
+    flex: 1,
+    justifyContent: "flex-start",
+  },
+
+  inputFocused: {
+    borderColor: tokens["color-interactive"],
+  },
+
+  inputInvalid: {
+    borderColor: tokens["color-critical"],
+  },
+
+  label: {
+    // for placeholder
+    position: "absolute",
+    top: typographyStyles.smallSize.fontSize,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+
+  miniLabel: {
+    top: 0,
+    paddingTop: tokens["space-smallest"],
+    backgroundColor: tokens["color-surface"],
+    maxHeight:
+      (typographyStyles.smallSize.lineHeight || 0) + tokens["space-smaller"],
+    zIndex: 1,
+  },
+  // Prevents the miniLabel from cutting off the ClearAction button
+  miniLabelShowClearAction: {
+    backgroundColor: "transparent",
+  },
+
+  disabled: {
+    backgroundColor: tokens["color-disabled--secondary"],
+    borderTopLeftRadius: tokens["radius-large"],
+    borderTopRightRadius: tokens["radius-large"],
+  },
+
+  fieldAffix: {
+    flexDirection: "row",
+  },
+
+  fieldAffixMiniLabel: {
+    paddingTop: 0,
+    // @ts-expect-error tsc-ci
+    top: typographyStyles.smallSize.fontSize / 2,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+
+  prefixIcon: {
+    justifyContent: "center",
+    paddingRight: tokens["space-small"],
+  },
+
+  prefixLabel: {
+    justifyContent: "center",
+    paddingTop: tokens["space-minuscule"],
+    paddingRight: tokens["space-minuscule"],
+  },
+
+  suffixIcon: {
+    justifyContent: "center",
+  },
+
+  suffixLabel: {
+    justifyContent: "center",
+    paddingTop: tokens["space-minuscule"],
+  },
+  suffixIconMargin: {
+    marginLeft: tokens["space-small"] + tokens["space-smaller"],
+  },
+  suffixLabelMargin: {
+    marginLeft: tokens["space-smallest"],
+  },
+  inputEndContainer: {
+    flexDirection: "row",
+    zIndex: 1,
+  },
+});