@jobber/components-native 0.9.0 → 0.11.0

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

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
+import { ButtonSize, ButtonType, ButtonVariation } from "./types";
+interface CommonButtonProps {
+    /**
+     * Press handler
+     */
+    readonly onPress?: () => void;
+    /**
+     * Themes the button to the type of action it performs
+     */
+    readonly variation?: ButtonVariation;
+    /**
+     * Sets the visual hierarchy
+     */
+    readonly type?: ButtonType;
+    /**
+     * Defines the size of the button
+     *
+     * @default "base"
+     */
+    readonly size?: ButtonSize;
+    /**
+     * Will make the button scale to take up all the available height
+     */
+    readonly fullHeight?: boolean;
+    /**
+     * Will make the button scale to take up all of the available width
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * Makes the button un-clickable
+     */
+    readonly disabled?: boolean;
+    /**
+     * Accessibility hint to help users understand what will happen when they press the button
+     */
+    readonly accessibilityHint?: string;
+    /**
+     * Changes the button interface to imply loading and prevents the press callback
+     *
+     * @default false
+     */
+    readonly loading?: boolean;
+    /**
+     * Adds an leading icon beside the label.
+     */
+    readonly icon?: IconNames;
+    /**
+     * Accessibility label for the component. This is required for components that
+     * have an `icon` but not a `label`.
+     *
+     * If the string is the same as the `label` prop, you don't need to add an
+     * `accessibilityLabel`. **Don't use this for testing purposes.**
+     */
+    readonly accessibilityLabel?: string;
+}
+interface LabelButton extends CommonButtonProps {
+    /**
+     * Text to be displayed on the button
+     */
+    readonly label: string;
+}
+interface IconButton extends CommonButtonProps {
+    readonly icon: IconNames;
+    readonly accessibilityLabel: string;
+}
+export type ButtonProps = XOR<LabelButton, IconButton>;
+export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, }: ButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,86 @@
+export declare const baseButtonHeight: number;
+export declare const smallButtonHeight: number;
+export declare const styles: {
+    fullHeight: {
+        flexGrow: number;
+        flexShrink: number;
+    };
+    fullWidth: {
+        alignSelf: "stretch";
+    };
+    touchable: {
+        borderRadius: number;
+    };
+    button: {
+        justifyContent: "center";
+        alignItems: "center";
+        alignSelf: "stretch";
+        flexDirection: "row";
+        overflow: "hidden";
+        margin: number;
+        borderRadius: number;
+        borderWidth: number;
+        paddingVertical: number;
+    };
+    base: {
+        minHeight: number;
+        paddingHorizontal: number;
+    };
+    small: {
+        minHeight: number;
+        paddingHorizontal: number;
+    };
+    reducedPaddingForFullWidth: {
+        paddingHorizontal: number;
+    };
+    iconPaddingOffset: {
+        paddingRight: number;
+    };
+    content: {
+        paddingLeft: number;
+        height: string;
+    };
+    contentWithLabel: {
+        paddingLeft: number;
+    };
+    iconStyle: {
+        position: "absolute";
+        top: string;
+        left: number;
+        transform: {
+            translateY: number;
+        }[];
+    };
+    labelStyle: {
+        flexGrow: number;
+        justifyContent: "center";
+    };
+    work: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    learning: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    destructive: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    cancel: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    primary: {};
+    secondary: {
+        backgroundColor: string;
+    };
+    tertiary: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    disabled: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+};

package/dist/types/src/Button/components/InternalButtonLoading/InternalButtonLoading.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ButtonType, ButtonVariation } from "../../types";
+interface InternalButtonLoadingProps {
+    readonly variation: ButtonVariation;
+    readonly type: ButtonType;
+}
+declare function InternalButtonLoadingInternal({ variation, type, }: InternalButtonLoadingProps): JSX.Element;
+export declare const darkPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAMUExURQAAAEdwTAAAAAAAAKDh18UAAAAEdFJOUxkADQwimkzpAAAAtUlEQVRIx+3NqxHDQBRDUc0YuxyXokxgSkmT7sdgP++3YoYrqAsOYDto+7gfpwtfHy4Xfj7cLvw3sYlNbOINAoI4IIgTgrggiBuCIAThQyB8CIQLkXAhEi5EwoVIWEiEhURYSISFRMyQiRkyMUMmZsjECIUYoRAjFGKEQvRQiR4q0UMleqhECwuihQXRwoJoYUEQgiAEQQiCEAQhCEIQhCAIQRCCIARBCIIQBCEIQhCEIAhB8AEuzZ5wHe17xgAAAABJRU5ErkJggg==";
+export declare const lightPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAJUExURf///0dwTP///0SistEAAAADdFJOU0AAILGCadYAAAC0SURBVEjH7c2pFcNAFENRHTMX4pKUE5hS0oT7NZjlbyNmOIJ64AK2g7aP+3G68PXhcuHnw+3CfxOb2MQm3iAgiAOCOCGIC4K4IQhCED4EwodAuBAJFyLhQiRciISFRFhIhIVEWEjEDJmYIRMzZGKGTIxQiBEKMUIhRihED5XooRI9VKKHSrSwIFpYEC0siBYWBCEIQhCEIAhBEIIgBEEIghAEIQhCEIQgCEEQgiAEQQiCEAQfva6WeBniVLgAAAAASUVORK5CYII=";
+export declare const InternalButtonLoading: React.MemoExoticComponent<typeof InternalButtonLoadingInternal>;
+export {};

package/dist/types/src/Button/components/InternalButtonLoading/InternalButtonLoading.style.d.ts

@@ -0,0 +1,4 @@
+import { StyleSheet } from "react-native";
+export declare const styles: {
+    image: StyleSheet.AbsoluteFillStyle;
+};

package/dist/types/src/Button/components/InternalButtonLoading/index.d.ts

@@ -0,0 +1 @@
+export { InternalButtonLoading } from "./InternalButtonLoading";

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

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonVariation, ButtonType } from "./types";

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

@@ -0,0 +1,3 @@
+export type ButtonVariation = "work" | "cancel" | "destructive" | "learning";
+export type ButtonType = "primary" | "secondary" | "tertiary";
+export type ButtonSize = "small" | "base";

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,5 @@ export * from "./ActivityIndicator";
 export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./Button";
+export * from "./InputFieldWrapper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -22,8 +22,11 @@
   },
   "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-reanimated": "^2.17.0",
     "react-native-svg": "^13.9.0",
     "react-native-uuid": "^1.4.9",
     "ts-xor": "^1.1.0"
@@ -44,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "f884bf403f42a1c85f7bf840a6317ae1642653e1"
+  "gitHead": "91380d5821e334f130fcf7a02290b25548fa05e2"
 }

package/src/Button/Button.style.ts

@@ -0,0 +1,116 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const iconTranslateY = tokens["space-large"] / 2;
+const buttonRadius = tokens["radius-large"];
+export const baseButtonHeight = tokens["space-base"] * 3.5;
+export const smallButtonHeight = tokens["space-base"] * 2.25;
+
+export const styles = StyleSheet.create({
+  fullHeight: {
+    flexGrow: 1,
+    flexShrink: 0,
+  },
+
+  fullWidth: {
+    alignSelf: "stretch",
+  },
+
+  touchable: {
+    borderRadius: buttonRadius,
+  },
+
+  button: {
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    flexDirection: "row",
+    overflow: "hidden",
+    margin: 0,
+    borderRadius: buttonRadius,
+    borderWidth: tokens["border-base"],
+    paddingVertical: tokens["space-small"],
+  },
+
+  base: {
+    minHeight: baseButtonHeight,
+    paddingHorizontal: tokens["space-base"],
+  },
+
+  small: {
+    minHeight: smallButtonHeight,
+    paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+  },
+
+  reducedPaddingForFullWidth: {
+    paddingHorizontal: tokens["space-smaller"],
+  },
+
+  iconPaddingOffset: {
+    paddingRight: tokens["space-smaller"],
+  },
+
+  content: {
+    paddingLeft: tokens["space-large"],
+    height: "100%",
+  },
+
+  contentWithLabel: {
+    paddingLeft: tokens["space-large"] + tokens["space-small"],
+  },
+
+  iconStyle: {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    transform: [{ translateY: -iconTranslateY }],
+  },
+
+  labelStyle: {
+    flexGrow: 1,
+    justifyContent: "center",
+  },
+
+  /* Variations */
+
+  work: {
+    backgroundColor: tokens["color-interactive"],
+    borderColor: tokens["color-interactive"],
+  },
+
+  learning: {
+    backgroundColor: tokens["color-informative"],
+    borderColor: tokens["color-informative"],
+  },
+
+  destructive: {
+    backgroundColor: tokens["color-destructive"],
+    borderColor: tokens["color-destructive"],
+  },
+
+  /* Cancel is special because, by default, it's styled as a secondary button */
+  cancel: {
+    backgroundColor: tokens["color-surface"],
+    borderColor: tokens["color-interactive--subtle"],
+  },
+
+  /* Types */
+
+  primary: {},
+
+  secondary: {
+    backgroundColor: tokens["color-surface"],
+  },
+
+  tertiary: {
+    backgroundColor: tokens["color-surface"],
+    borderColor: tokens["color-surface"],
+  },
+
+  /* Disabled */
+
+  disabled: {
+    borderColor: tokens["color-disabled--secondary"],
+    backgroundColor: tokens["color-disabled--secondary"],
+  },
+});