@jobber/components-native 0.38.0 → 0.40.0

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

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+import { UseControllerProps } from "react-hook-form";
+import { XOR } from "ts-xor";
+import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+    /**
+     * Defaulted to "always" so user can clear the dates whenever there's a value.
+     */
+    readonly clearable?: Extract<Clearable, "always" | "never">;
+    /**
+     * This label is shown to the user when there's no selected date.
+     */
+    readonly emptyValueLabel?: string;
+    /**
+     * Maximum date the user can set.
+     */
+    readonly maxDate?: Date;
+    /**
+     * Minimum date the user can set
+     */
+    readonly minDate?: Date;
+    /**
+     * VoiceOver will read this string when a user selects the element
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Helps users understand what will happen when they perform an action
+     */
+    readonly accessibilityHint?: string;
+}
+interface FormControlledInputDate extends BaseInputDateProps {
+    /**
+     * Adding a `name` would make this component "Form controlled" and must be
+     * nested within a `<Form />` component.
+     *
+     * Cannot be declared if `value` prop is used.
+     */
+    readonly name: string;
+    /**
+     * Shows an error message below the field and highlights it red when the
+     * value is invalid. Only applies when nested within a `<Form />` component.
+     *
+     * You can see **most** of the rules you can pass in
+     * [React-hook-form Documentation](https://react-hook-form.com/api/useform/register#options).
+     */
+    readonly validations?: UseControllerProps["rules"];
+    /**
+     * The initial value for the input.
+     */
+    readonly defaultValue?: Date;
+    /**
+     * The callback that fires whenever a date gets selected.
+     */
+    readonly onChange?: (value?: Date | null) => void;
+}
+interface DevControlledInputDate extends BaseInputDateProps {
+    /**
+     * The value shown on the field. This gets automatically formatted to the
+     * account's date format.
+     *
+     * Cannot be declared if `name` prop is used.
+     */
+    readonly value: Date | string | undefined;
+    /**
+     * The callback that fires whenever a date gets selected.
+     */
+    readonly onChange: (value?: Date) => void;
+}
+export type InputDateProps = XOR<FormControlledInputDate, DevControlledInputDate>;
+/**
+ * Allow users to select a date using the device date picker.
+ */
+export declare function InputDate(props: InputDateProps): JSX.Element;
+export {};

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

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

package/dist/types/src/InputDate/messages.d.ts

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

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

@@ -4,7 +4,7 @@ type NumberKeyboard = "decimal-pad" | "numbers-and-punctuation";
 export interface InputNumberProps extends Omit<InputTextProps, "keyboard" | "onChangeText" | "value" | "defaultValue"> {
     readonly value?: number;
     readonly defaultValue?: number;
-    readonly onChange: (newValue?: number | string | undefined) => void;
+    readonly onChange?: (newValue?: number | string | undefined) => void;
     readonly keyboard?: NumberKeyboard;
     /**
      * Used to locate this view in end-to-end tests

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MenuProps } from "./types";
+export declare function Menu({ menuOptions, customActivator }: MenuProps): JSX.Element;

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

@@ -0,0 +1,18 @@
+export declare const styles: {
+    menu: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        position: "absolute";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        width: number;
+    };
+};

package/dist/types/src/Menu/components/MenuOption/MenuOption.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MenuOptionInternalProps } from "../../types";
+export declare function MenuOption({ label, icon, iconColor, textAlign, destructive, textTransform, onPress, setOpen, }: MenuOptionInternalProps): JSX.Element;

package/dist/types/src/Menu/components/MenuOption/MenuOption.style.d.ts

@@ -0,0 +1,8 @@
+export declare const styles: {
+    menuOption: {
+        display: "flex";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+    };
+};

package/dist/types/src/Menu/components/MenuOption/index.d.ts

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

package/dist/types/src/Menu/components/Overlay/Overlay.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { OverlayProp } from "../../types";
+export declare function Overlay({ setOpen }: OverlayProp): JSX.Element;

package/dist/types/src/Menu/components/Overlay/Overlay.style.d.ts

@@ -0,0 +1,12 @@
+export declare const styles: {
+    overlay: {
+        backgroundColor: string;
+        opacity: number;
+        height: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+};

package/dist/types/src/Menu/components/Overlay/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Menu } from "./Menu";
+export type { MenuProps, MenuOptionProps, MenuOptionInternalProps, } from "./types";

package/dist/types/src/Menu/messages.d.ts

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

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { IconColorNames, IconNames } from "@jobber/design";
+import { TextAlign } from "../Typography";
+export interface MenuOptionProps {
+    readonly label: string;
+    readonly icon?: IconNames;
+    readonly iconColor?: IconColorNames;
+    readonly textAlign?: TextAlign;
+    readonly destructive?: boolean;
+    readonly textTransform?: "none" | "capitalize";
+    onPress: () => void;
+}
+export interface MenuOptionInternalProps extends MenuOptionProps {
+    setOpen: (bool: boolean) => void;
+}
+export interface MenuProps {
+    readonly menuOptions?: MenuOptionProps[];
+    readonly customActivator?: JSX.Element;
+}
+export interface OverlayProp {
+    setOpen: (bool: boolean) => void;
+}

package/dist/types/src/Menu/utils.d.ts

@@ -0,0 +1,10 @@
+import { LayoutRectangle } from "react-native";
+interface ScreenInfo {
+    windowHeight: number;
+    headerHeight: number;
+    windowWidth: number;
+}
+export declare function findViewpoint(screenInfo: ScreenInfo, activatorLayout: LayoutRectangle): {
+    [key: string]: number | undefined;
+};
+export {};

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

@@ -16,18 +16,21 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./Form";
 export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
+export * from "./InputDate";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputTime";
 export * from "./InputText";
+export * from "./Menu";
 export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./Select";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -63,6 +63,7 @@
     "@types/react-native": "^0.71.6",
     "@types/react-native-uuid": "^1.4.0",
     "metro-react-native-babel-preset": "^0.76.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-test-renderer": "^18.2.0",
     "typescript": "^4.9.5"
   },
@@ -75,5 +76,5 @@
     "react-native": ">=0.69.2",
     "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "5c76dda512a1f72636c5695a9b73fc8470291066"
+  "gitHead": "1693e3ec2d25c6d53581ea586364fa5d651bd210"
 }

package/src/AtlantisContext/AtlantisContext.tsx

@@ -7,7 +7,7 @@ export interface AtlantisContextProps {
   /**
    * The date format Atlantis components would use
    */
-  readonly dateFormat?: string;
+  readonly dateFormat: string;
 
   /**
    * The time format Atlantis components would use
@@ -40,9 +40,17 @@ export interface AtlantisContextProps {
    * The currency symbol Atlantis components will use
    */
   readonly currencySymbol: string;
+
+  /**
+   * The `headerHeight` property represents the height of the app header in Atlantis.
+   * It plays a crucial role in determining the positioning of various elements within the app.
+   * By accurately defining this value, Atlantis can effectively calculate the layout and alignment of its components.
+   */
+  readonly headerHeight: number;
 }
 
 export const defaultValues: AtlantisContextProps = {
+  dateFormat: "PP",
   // The system time is "p"
   timeFormat: "p",
   timeZone: RNLocalize.getTimeZone(),
@@ -52,6 +60,7 @@ export const defaultValues: AtlantisContextProps = {
   },
   floatSeparators: { group: ",", decimal: "." },
   currencySymbol: DEFAULT_CURRENCY_SYMBOL,
+  headerHeight: 0,
 };
 
 export const AtlantisContext = createContext(defaultValues);

package/src/Form/Form.style.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexGrow: 1,
+    width: "100%",
+  },
+  safeArea: {
+    backgroundColor: tokens["color-surface"],
+  },
+  scrollContentContainer: {
+    flexGrow: 1,
+  },
+  scrollView: {
+    flexGrow: 1,
+  },
+  formChildContainer: {
+    flexGrow: 1,
+    justifyContent: "flex-start",
+  },
+  formContent: {
+    paddingVertical: tokens["space-small"],
+  },
+  fixedSaveButton: {
+    padding: tokens["space-base"],
+    backgroundColor: tokens["color-surface"],
+  },
+  activityIndicator: {
+    marginVertical: tokens["space-base"],
+    flex: 1,
+  },
+});