@jobber/components-native 0.8.0 → 0.10.0

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

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
+interface CardProps {
+    /**
+     * @deprecated Use <ActionItem /> with the title and onPress properties instead
+     */
+    readonly header?: HeaderProps;
+    readonly footer?: FooterProps;
+    readonly children?: ReactNode;
+    readonly reportCardHeight?: (height: number) => void;
+    readonly testID?: string;
+    readonly error?: string;
+    readonly elevation?: elevationProp;
+}
+type elevationProp = "none" | "low" | "base" | "high";
+export type HeaderProps = HeaderCommonProps & HeaderActionProps;
+interface FooterProps {
+    readonly onPress: () => void;
+    readonly title: string;
+}
+interface HeaderCommonProps {
+    readonly title: string;
+}
+type HeaderActionProps = {
+    readonly onPress?: never;
+    readonly actionItem?: never;
+} | {
+    readonly onPress: () => void;
+    readonly actionItem: ActionItem;
+};
+interface IconAction {
+    readonly iconName: IconNames;
+}
+interface ButtonAction {
+    readonly label: string;
+}
+export type ActionItem = XOR<IconAction, ButtonAction>;
+export declare function Card({ header, footer, children, reportCardHeight: onCardHeightChange, testID, error, elevation, }: CardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+export declare const styles: {
+    container: {
+        width: string;
+        backgroundColor: string;
+    };
+    lowElevation: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    baseElevation: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    highElevation: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    headerTitle: {
+        flexGrow: number;
+        flex: number;
+    };
+    footer: {
+        height: number;
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    pressed: {
+        opacity: number;
+    };
+    actionItem: {
+        height: number;
+        justifyContent: "center";
+    };
+    actionLabel: {
+        paddingTop: number;
+    };
+};

package/dist/types/src/Card/components/InternalCardHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface InternalCardHeaderProps {
+    readonly children: ReactNode[] | ReactNode;
+    readonly onPress?: () => void;
+    readonly testID?: string;
+    readonly collapsable: boolean;
+}
+export declare function InternalCardHeader({ onPress, children, testID, collapsable, }: InternalCardHeaderProps): JSX.Element;
+export {};

package/dist/types/src/Card/components/InternalCardHeader.style.d.ts

@@ -0,0 +1,14 @@
+export declare const styles: {
+    header: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        paddingTop: number;
+        paddingHorizontal: number;
+    };
+    pressed: {
+        opacity: number;
+    };
+    noChildren: {
+        paddingBottom: number;
+    };
+};

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

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

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

@@ -0,0 +1,2 @@
+export { Card } from "./Card";
+export type { ActionItem, HeaderProps } from "./Card";

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

@@ -6,5 +6,7 @@ export * from "./ErrorMessageWrapper";
 export * from "./ActionLabel";
 export * from "./Content";
 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.8.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": "098e6c092be15121c96d37b3f959a05ea06c9e1d"
+  "gitHead": "d363c516d3f72dc510c7b0ad002fdbf479bf9292"
 }

package/src/Card/Card.style.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: tokens["color-surface"],
+  },
+
+  lowElevation: {
+    ...tokens["shadow-low"],
+  },
+
+  baseElevation: {
+    ...tokens["shadow-base"],
+  },
+
+  highElevation: {
+    ...tokens["shadow-high"],
+  },
+
+  headerTitle: {
+    flexGrow: 1,
+    flex: 1,
+  },
+
+  footer: {
+    height: tokens["space-largest"],
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  pressed: {
+    opacity: tokens["opacity-pressed"],
+  },
+
+  actionItem: {
+    height: tokens["typography--lineHeight-base"],
+    justifyContent: "center",
+  },
+
+  actionLabel: {
+    paddingTop: tokens["space-smallest"],
+  },
+});

package/src/Card/Card.test.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Card } from "./Card";
+import { Text } from "../Text";
+
+const cardHeaderTestID = "cardHeader";
+const cardFooterTestID = "cardFooter";
+
+it("renders with only a header title", () => {
+  const title = "Foobar";
+  const { getByTestId, getByText, queryAllByRole } = render(
+    <Card header={{ title }} />,
+  );
+
+  expect(getByText(title)).toBeDefined();
+  expect(getByTestId(cardHeaderTestID)).toBeDefined();
+  expect(queryAllByRole("button")).toEqual([]);
+});
+
+it("renders with an icon action", () => {
+  const iconName = "plus2";
+  const { getByTestId } = render(
+    <Card
+      header={{
+        title: "Foobar",
+        actionItem: { iconName },
+        onPress: jest.fn(),
+      }}
+    />,
+  );
+
+  expect(getByTestId(iconName)).toBeDefined();
+});
+
+it("renders with a button action", () => {
+  const label = "Edit";
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Foobar",
+        actionItem: { label },
+        onPress: jest.fn(),
+      }}
+    />,
+  );
+
+  expect(getByText(label)).toBeDefined();
+});
+
+it("renders without a header and footer", () => {
+  const content = "I am the content";
+  const { getByText, queryByTestId } = render(
+    <Card>
+      <Text>{content}</Text>
+    </Card>,
+  );
+
+  expect(getByText(content)).toBeDefined();
+  expect(queryByTestId(cardHeaderTestID)).toBeNull();
+  expect(queryByTestId(cardFooterTestID)).toBeNull();
+});
+
+it("should call the onPress when pressing the header", () => {
+  const pressHandler = jest.fn();
+
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Header",
+        actionItem: { iconName: "plus2" },
+        onPress: pressHandler,
+      }}
+    />,
+  );
+
+  fireEvent.press(getByText("Header"));
+  expect(pressHandler).toHaveBeenCalled();
+});
+
+it("should call the onPress when pressing the action button", () => {
+  const pressHandler = jest.fn();
+
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Header",
+        actionItem: { label: "Edit" },
+        onPress: pressHandler,
+      }}
+    />,
+  );
+
+  fireEvent.press(getByText("Edit"));
+  expect(pressHandler).toHaveBeenCalled();
+});
+
+it("renders with a footer", () => {
+  const title = "View All";
+  const { getByText, getByTestId, queryByTestId } = render(
+    <Card footer={{ title: title, onPress: jest.fn() }} />,
+  );
+
+  expect(getByText(title)).toBeDefined();
+  expect(getByTestId(cardFooterTestID)).toBeDefined();
+  expect(queryByTestId(cardHeaderTestID)).toBeNull();
+});
+
+it("should call the onPress when pressing the footer", () => {
+  const headerPressHandler = jest.fn();
+  const footerPressHandler = jest.fn();
+
+  const { getByText } = render(
+    <Card
+      header={{
+        title: "Header",
+        actionItem: { iconName: "plus2" },
+        onPress: headerPressHandler,
+      }}
+      footer={{
+        title: "View All",
+        onPress: footerPressHandler,
+      }}
+    />,
+  );
+
+  fireEvent.press(getByText("View All"));
+  expect(footerPressHandler).toHaveBeenCalled();
+});