@jobber/components-native 0.9.0 → 0.10.0

package/dist/src/InputFieldWrapper/CommonInputStyles.style.js

@@ -0,0 +1,33 @@
+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/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { 
+// eslint-disable-next-line no-restricted-imports
+Text as RNText, View, } from "react-native";
+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 { ErrorMessageWrapper } from "../ErrorMessageWrapper";
+import { typographyStyles } from "../Typography";
+import { Text } from "../Text";
+export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel = false, hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, }) {
+    fieldAffixRequiredPropsCheck([prefix, suffix]);
+    const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
+    warnIfClearActionWithNoOnClear(onClear, showClearAction);
+    const inputInvalid = Boolean(invalid) || Boolean(error);
+    return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
+        React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
+                styles.container,
+                focused && styles.inputFocused,
+                (Boolean(invalid) || error) && styles.inputInvalid,
+                disabled && styles.disabled,
+                styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
+            ] },
+            (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, icon: prefix.icon })),
+            React.createElement(View, { style: [styles.inputContainer] },
+                React.createElement(View, { style: [
+                        !!placeholder && styles.label,
+                        hasMiniLabel && styles.miniLabel,
+                        disabled && styles.disabled,
+                        hasMiniLabel &&
+                            showClearAction &&
+                            styles.miniLabelShowClearAction,
+                    ], pointerEvents: "none" },
+                    React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, focused, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
+                (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
+                children,
+                (showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label) || (suffix === null || suffix === void 0 ? void 0 : suffix.icon)) && (React.createElement(View, { style: styles.inputEndContainer },
+                    showClearAction && (React.createElement(ClearAction, { hasMarginRight: !!(suffix === null || suffix === void 0 ? void 0 : suffix.icon) || !!(suffix === null || suffix === void 0 ? void 0 : suffix.label), onPress: handleClear })),
+                    (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
+                    (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
+        assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
+}
+function getLabelVariation(error, invalid, focused, disabled) {
+    if (invalid || error) {
+        return "error";
+    }
+    else if (disabled) {
+        return "disabled";
+    }
+    else if (focused) {
+        return "interactive";
+    }
+    return "subdued";
+}
+function fieldAffixRequiredPropsCheck(affixPair) {
+    affixPair.map(affix => {
+        if (typeof affix !== "undefined" && !affix.icon && !affix.label) {
+            throw new Error(`One of 'label' or 'icon' is required by the field affix component.`);
+        }
+    });
+}
+function warnIfClearActionWithNoOnClear(onClear, showClearAction) {
+    if (showClearAction && !onClear && __DEV__) {
+        console.warn("Declare an `onClear` prop on your input. You can set `clearable` to never or `showClearAction` to false if you don't need a clearable input");
+    }
+}
+function noopClear() {
+    warnIfClearActionWithNoOnClear(undefined, true);
+}
+function getMessage({ invalid, error, }) {
+    const messages = [];
+    if (error === null || error === void 0 ? void 0 : error.message)
+        messages.push(error.message);
+    if (invalid && typeof invalid === "string")
+        messages.push(invalid);
+    return messages.join("\n");
+}
+function Placeholder({ placeholder, styleOverride, labelVariation, hasMiniLabel, }) {
+    return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: hasMiniLabel ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
+            typographyStyles[labelVariation],
+            typographyStyles.baseRegularRegular,
+            hasMiniLabel
+                ? typographyStyles.smallSize
+                : typographyStyles.defaultSize,
+            styleOverride,
+        ] }, placeholder))));
+}

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

@@ -0,0 +1,79 @@
+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,
+    },
+});

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./ClearAction.style";
+import { messages } from "./messages";
+import { Icon } from "../../../Icon";
+export function ClearAction({ onPress, hasMarginRight = false, }) {
+    const { formatMessage } = useIntl();
+    return (React.createElement(Pressable, { style: [styles.container, hasMarginRight && styles.addedMargin], onPress: onPress, accessibilityLabel: formatMessage(messages.clearTextLabel) },
+        React.createElement(View, { style: styles.circle },
+            React.createElement(Icon, { size: "small", name: "cross", color: "interactiveSubtle" }))));
+}

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.style.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+const width = tokens["space-smaller"] + tokens["space-larger"];
+export const styles = StyleSheet.create({
+    container: {
+        width,
+        height: "100%",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+    },
+    circle: {
+        backgroundColor: tokens["color-surface--background"],
+        borderRadius: tokens["radius-circle"],
+        width: tokens["space-large"],
+        height: tokens["space-large"],
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    addedMargin: {
+        marginRight: tokens["space-small"],
+    },
+});

package/dist/src/InputFieldWrapper/components/ClearAction/index.js

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

package/dist/src/InputFieldWrapper/components/ClearAction/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    clearTextLabel: {
+        id: "clearTextLabel",
+        defaultMessage: "Clear input",
+        description: "Accessiblity label for the clear input button",
+    },
+});

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { 
+// eslint-disable-next-line no-restricted-imports
+Text as RNText, View, } from "react-native";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { tokens } from "../../../utils/design";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
+export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
+export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }) {
+    return (React.createElement(View, { style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+        ], testID: prefixLabelTestId },
+        React.createElement(View, { style: [styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.base,
+                typographyStyles.defaultSize,
+                disabled ? typographyStyles.subdued : typographyStyles.base,
+                styleOverride,
+            ] }, label)))));
+}
+export function PrefixIcon({ focused, disabled, inputInvalid, icon, }) {
+    return (React.createElement(View, { testID: prefixIconTestId, style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+        ] },
+        React.createElement(View, { style: styles.prefixIcon },
+            React.createElement(Icon, { customColor: disabled ? tokens["color-disabled"] : tokens["color-greyBlue"], name: icon }))));
+}

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Pressable, 
+// eslint-disable-next-line no-restricted-imports
+Text as RNText, View, } from "react-native";
+import { tokens } from "../../../utils/design";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
+export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
+export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
+    return (React.createElement(View, { testID: suffixLabelTestId, style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+            hasLeftMargin && styles.suffixLabelMargin,
+        ] },
+        React.createElement(View, { style: [styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.base,
+                typographyStyles.defaultSize,
+                disabled ? typographyStyles.subdued : typographyStyles.base,
+                styleOverride,
+            ] }, label)))));
+}
+export function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargin = false, onPress, }) {
+    return (React.createElement(View, { testID: suffixIconTestId, style: [
+            styles.fieldAffix,
+            focused && styles.inputFocused,
+            inputInvalid && styles.inputInvalid,
+        ] },
+        React.createElement(Pressable, { style: [styles.suffixIcon, hasLeftMargin && styles.suffixIconMargin], onPress: onPress },
+            React.createElement(Icon, { customColor: disabled ? tokens["color-disabled"] : tokens["color-greyBlue"], name: icon }))));
+}

package/dist/src/InputFieldWrapper/hooks/useShowClear.js

@@ -0,0 +1,15 @@
+export function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
+    if (multiline && clearable !== "never") {
+        throw new Error("Multiline inputs can not be clearable");
+    }
+    // Do not show if there is no value
+    if (!hasValue || clearable === "never" || disabled) {
+        return false;
+    }
+    switch (clearable) {
+        case "while-editing":
+            return focused;
+        case "always":
+            return true;
+    }
+}

package/dist/src/InputFieldWrapper/index.js

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

package/dist/src/index.js

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