@jobber/components-native 0.40.0 → 0.41.0

package/dist/types/src/Form/components/FormMessage/FormMessage.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 import { EmptyStateProps } from "../../../EmptyState";
 type FormMessageData = EmptyStateProps;
 /**

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

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { BottomSheetOptionsSuffix } from "./components/FormatFileBottomSheet";
+import { CreateThumbnail, File, FileUpload, FormattedFile } from "./types";
+export interface FormatFileProps<T> {
+    /**
+     * File upload details object. Can be a File or a FileUpload
+     */
+    file: T;
+    /**
+     * Accessibility label
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Accessibility hint
+     */
+    readonly accessibilityHint?: string;
+    /**
+     * A function which handles the onTap event.
+     */
+    onTap?: (file: T) => void;
+    /**
+     * A function to be called on "Remove" Bottom Sheet Option press
+     */
+    onRemove?: () => void;
+    /**
+     * Handler for the "Preview" Bottom Sheet Option press
+     */
+    onPreviewPress?: (formattedFile: FormattedFile) => void;
+    /**
+     * A file type to show at Bottom Sheet options
+     */
+    bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+    /**
+     * Uses a grid layout when multi-file upload is supported
+     */
+    styleInGrid?: boolean;
+    /**
+     * A reference to the element in the rendered output
+     */
+    readonly testID?: string;
+    /**
+     * Set false to hide the filetype icon
+     */
+    readonly showFileTypeIndicator?: boolean;
+    readonly createThumbnail?: CreateThumbnail;
+}
+export declare function FormatFile<T extends File | FileUpload>({ file, accessibilityLabel, accessibilityHint, onTap, onRemove, bottomSheetOptionsSuffix, styleInGrid, testID, showFileTypeIndicator, createThumbnail, onPreviewPress, }: FormatFileProps<T>): JSX.Element;

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

@@ -0,0 +1,14 @@
+export declare const styles: {
+    thumbnailContainer: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        marginBottom: number;
+    };
+    thumbnailContainerGrid: {
+        width: number;
+        height: number;
+        marginRight: number;
+    };
+};

package/dist/types/src/FormatFile/components/ErrorIcon/ErrorIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ErrorIcon(): JSX.Element;

package/dist/types/src/FormatFile/components/ErrorIcon/ErrorIcon.style.d.ts

@@ -0,0 +1,8 @@
+export declare const styles: {
+    circle: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
+};

package/dist/types/src/FormatFile/components/ErrorIcon/index.d.ts

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

package/dist/types/src/FormatFile/components/FileView/FileView.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FormattedFile } from "../../types";
+interface FileViewProps {
+    accessibilityLabel?: string;
+    showOverlay: boolean;
+    showError: boolean;
+    file: FormattedFile;
+    styleInGrid: boolean;
+    onUploadComplete: () => void;
+}
+export declare function FileView({ accessibilityLabel, styleInGrid, file, showOverlay, showError, onUploadComplete, }: FileViewProps): JSX.Element;
+export {};

package/dist/types/src/FormatFile/components/FileView/FileView.style.d.ts

@@ -0,0 +1,62 @@
+export declare const styles: {
+    overlay: {
+        backgroundColor: string;
+    };
+    overlayError: {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+    };
+    iconCenter: {
+        marginBottom: number;
+    };
+    fileBackground: {
+        width: string;
+        display: "flex";
+        alignItems: "center";
+    };
+    fileBackgroundGrid: {
+        height: string;
+    };
+    fileBackgroundFlat: {
+        justifyContent: "center";
+        height: number;
+    };
+    fileIconGrid: {
+        top: number;
+    };
+    fileIconFlat: {
+        top: number;
+    };
+    fileNameError: {
+        alignItems: "center";
+        borderTopColor: string;
+        borderTopWidth: number;
+        width: string;
+        marginTop: number;
+    };
+    fileName: {
+        alignItems: "center";
+        borderTopColor: string;
+        borderTopWidth: number;
+        width: string;
+    };
+    fileNameGrid: {
+        position: "absolute";
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    fileNameFlat: {
+        top: number;
+    };
+    fileOverlay: {
+        position: "absolute";
+        justifyContent: "center";
+        right: number;
+        bottom: number;
+        left: number;
+        height: string;
+        paddingHorizontal: number;
+    };
+};

package/dist/types/src/FormatFile/components/FileView/index.d.ts

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

package/dist/types/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+import { BottomSheetRef } from "../../../BottomSheet/BottomSheet";
+export type BottomSheetOptionsSuffix = "receipt" | "image" | "file" | "video";
+interface FormatFileBottomSheetProps {
+    bottomSheetRef: RefObject<BottomSheetRef>;
+    onPreviewPress?: () => void;
+    onRemovePress?: () => void;
+    bottomSheetOptionsSuffix?: BottomSheetOptionsSuffix;
+}
+export declare const FormatFileBottomSheet: ({ bottomSheetRef, onPreviewPress, onRemovePress, bottomSheetOptionsSuffix, }: FormatFileBottomSheetProps) => JSX.Element;
+export {};

package/dist/types/src/FormatFile/components/FormatFileBottomSheet/index.d.ts

@@ -0,0 +1,2 @@
+export { FormatFileBottomSheet } from "./FormatFileBottomSheet";
+export type { BottomSheetOptionsSuffix } from "./FormatFileBottomSheet";

package/dist/types/src/FormatFile/components/FormatFileBottomSheet/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    lightBoxPreviewButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    removeButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/FormatFile/components/MediaView/MediaView.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FormattedFile } from "../../types";
+interface MediaViewProps {
+    accessibilityLabel?: string;
+    showOverlay: boolean;
+    showError: boolean;
+    file: FormattedFile;
+    styleInGrid: boolean;
+    onUploadComplete: () => void;
+}
+export declare function MediaView({ accessibilityLabel, showOverlay, showError, file, styleInGrid, onUploadComplete, }: MediaViewProps): JSX.Element;
+export {};

package/dist/types/src/FormatFile/components/MediaView/MediaView.style.d.ts

@@ -0,0 +1,25 @@
+export declare const styles: {
+    imageBackground: {
+        width: string;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    imageBackgroundFlat: {
+        aspectRatio: number;
+    };
+    imageBackgroundGrid: {
+        height: string;
+    };
+    overlay: {
+        height: string;
+        backgroundColor: string;
+        paddingHorizontal: number;
+    };
+    overlayError: {
+        height: string;
+        backgroundColor: string;
+        paddingHorizontal: number;
+        borderColor: string;
+        borderWidth: number;
+    };
+};

package/dist/types/src/FormatFile/components/MediaView/index.d.ts

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

package/dist/types/src/FormatFile/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/// <reference types="react" />
+import { StatusCode } from "../../types";
+interface ProgressBarProps {
+    /**
+     * Upload progress value from 0 to 1
+     */
+    progress: number;
+    /**
+     * Upload status
+     */
+    status: StatusCode;
+    /**
+     * Function to be called when the progress is finished
+     */
+    onComplete?: () => void;
+}
+export declare const ProgressBar: ({ progress, status, onComplete, }: ProgressBarProps) => JSX.Element;
+export {};

package/dist/types/src/FormatFile/components/ProgressBar/ProgressBar.style.d.ts

@@ -0,0 +1,13 @@
+export declare const styles: {
+    container: {
+        width: string;
+        height: number;
+        borderRadius: number;
+        overflow: "hidden";
+        backgroundColor: string;
+    };
+    progress: {
+        height: string;
+        backgroundColor: string;
+    };
+};

package/dist/types/src/FormatFile/components/ProgressBar/index.d.ts

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

package/dist/types/src/FormatFile/components/_mocks/mockFiles.d.ts

@@ -0,0 +1,18 @@
+import { File, FileUpload, StatusCode } from "../../types";
+export declare const FILE_UPLOAD_MOCK_FILE: ({ progress, status, }: {
+    progress: number;
+    status?: StatusCode | undefined;
+}) => FileUpload;
+export declare const FILE_UPLOAD_MOCK_IMAGE: ({ progress, size, status, }: {
+    progress: number;
+    size?: number | undefined;
+    status?: StatusCode | undefined;
+}) => FileUpload;
+export declare const FILE_UPLOAD_MOCK_PDF: ({ progress, status, }: {
+    progress: number;
+    status?: StatusCode | undefined;
+}) => FileUpload;
+export declare const FILE_MOCK_PDF: File;
+export declare const FILE_MOCK_VIDEO: File;
+export declare const FILE_MOCK_FILE: File;
+export declare const FILE_MOCK_IMAGE: File;

package/dist/types/src/FormatFile/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const acceptedExtensions: {
+    name: string;
+}[];
+export declare const videoExtensions: {
+    type: string;
+}[];

package/dist/types/src/FormatFile/context/FormatFileContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AtlantisFormatFileContextProps } from "./types";
+export declare const formatFileContextDefaultValues: {
+    useCreateThumbnail: () => {
+        thumbnail: undefined;
+        error: boolean;
+    };
+};
+export declare const AtlantisFormatFileContext: import("react").Context<AtlantisFormatFileContextProps>;
+export declare function useAtlantisFormatFileContext(): AtlantisFormatFileContextProps;

package/dist/types/src/FormatFile/context/types.d.ts

@@ -0,0 +1,9 @@
+import { FormattedFile } from "../types";
+export interface UseCreateThumbnailResponse {
+    readonly thumbnail: string | undefined;
+    readonly error: boolean;
+}
+export type UseCreateThumbnail = (formattedFile: FormattedFile) => UseCreateThumbnailResponse;
+export interface AtlantisFormatFileContextProps {
+    useCreateThumbnail: UseCreateThumbnail;
+}

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

@@ -0,0 +1,3 @@
+export { FormatFile, FormatFileProps } from "./FormatFile";
+export type { FormattedFile, File, CreateThumbnail, CreateThumbnailResponse, FileUpload, StatusCode, } from "./types";
+export type { UseCreateThumbnail, UseCreateThumbnailResponse, } from "./context/types";

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

@@ -0,0 +1,22 @@
+export declare const messages: {
+    defaultAccessibilityLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    defaultAccessibilityHint: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    errorAccessibilityLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inProgressAccessibilityLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,105 @@
+export declare enum StatusCode {
+    Pending = 0,
+    Started = 1,
+    InProgress = 2,
+    Completed = 3,
+    Failed = 4
+}
+export interface FileUpload {
+    /**
+     * File Identifier
+     */
+    key?: string;
+    /**
+     * Universally unique identifier
+     */
+    readonly uuid: string;
+    /**
+     * The name of the file.
+     */
+    readonly name: string;
+    /**
+     * The [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) type of the file
+     */
+    readonly type: string;
+    /**
+     * The size of the file in bytes.
+     */
+    readonly size: number;
+    /**
+     * The progress of a file upload between 0 and 1.
+     * - `0` represents Upload just started.
+     * - `1` represents a complete upload.
+     */
+    readonly progress: number;
+    /**
+     * The upload status of the file
+     */
+    status: StatusCode;
+    /**
+     * Represents the width and height for images
+     */
+    readonly dimension?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Provides context about multi-file upload batch
+     */
+    readonly batchContext: {
+        /**
+         * Batch id
+         */
+        readonly batchId: string;
+        /**
+         * Number of files in batch
+         */
+        readonly batchCount: number;
+    };
+    /**
+     * Url file was uploaded to, used to send in mutation to JO
+     */
+    uploadUrl?: string;
+    /**
+     * The url of the file.
+     */
+    sourcePath: string;
+    /**
+     * Cancel uploading this file
+     */
+    cancel: () => void;
+    /**
+     * Number of retries to upload
+     */
+    retries?: number;
+    /**
+     * Error message when upload fails
+     */
+    errorMessage?: string;
+}
+export interface File {
+    contentType?: string;
+    fileName?: string;
+    thumbnailUrl?: string;
+    url?: string;
+    fileSize: number;
+}
+export interface FormattedFile {
+    showPreview: boolean;
+    source?: string;
+    thumbnailUrl?: string;
+    name?: string;
+    size: number;
+    external: boolean;
+    progress: number;
+    status: StatusCode;
+    error: boolean;
+    type?: string;
+    isMedia?: boolean;
+    showFileTypeIndicator: boolean;
+}
+export interface CreateThumbnailResponse {
+    readonly thumbnail: string | undefined;
+    readonly error: boolean;
+}
+export type CreateThumbnail = (formattedFile: FormattedFile) => Promise<CreateThumbnailResponse>;

package/dist/types/src/FormatFile/utils/computeA11yLabel.d.ts

@@ -0,0 +1,9 @@
+import { MessageDescriptor } from "react-intl";
+interface params {
+    accessibilityLabel?: string;
+    showOverlay: boolean;
+    showError: boolean;
+    formatMessage: (message: MessageDescriptor) => string;
+}
+export declare function computeA11yLabel({ accessibilityLabel, showOverlay, showError, formatMessage, }: params): string;
+export {};

package/dist/types/src/FormatFile/utils/createUseCreateThumbnail.d.ts

@@ -0,0 +1,5 @@
+import { UseCreateThumbnail } from "../context/types";
+import { CreateThumbnail } from "../types";
+export declare function createUseCreateThumbnail(createThumbnail: CreateThumbnail): {
+    useCreateThumbnail: UseCreateThumbnail;
+};

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

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

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

@@ -28,5 +28,5 @@ export interface InputCurrencyProps extends Omit<InputTextProps, "keyboard" | "o
     defaultValue?: number;
     keyboard?: "decimal-pad" | "numbers-and-punctuation";
 }
-export declare const getInternalValue: (props: InputCurrencyProps, field: ControllerRenderProps<FieldValues, string>, formatNumber: (value: number | bigint, opts?: FormatNumberOptions | undefined) => string) => string;
+export declare const getInternalValue: (props: InputCurrencyProps, field: ControllerRenderProps<FieldValues, string>, formatNumber: (value: number, opts?: FormatNumberOptions | undefined) => string) => string;
 export declare function InputCurrency(props: InputCurrencyProps): JSX.Element;

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

@@ -16,6 +16,7 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./FormatFile";
 export * from "./Form";
 export * from "./FormField";
 export * from "./Heading";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@jobber/design": "^0.42.0",
+    "@jobber/hooks": "^2.1.4",
     "@react-native-picker/picker": "^2.4.10",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
@@ -76,5 +77,5 @@
     "react-native": ">=0.69.2",
     "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "1693e3ec2d25c6d53581ea586364fa5d651bd210"
+  "gitHead": "8e761f04a43fe434f3b2ba0285958d94d14ffa7f"
 }

package/src/FormatFile/FormatFile.style.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  thumbnailContainer: {
+    backgroundColor: tokens["color-surface--background"],
+    borderWidth: tokens["border-base"],
+    borderColor: tokens["color-border"],
+    borderRadius: tokens["radius-base"],
+    marginBottom: tokens["space-small"],
+  },
+  thumbnailContainerGrid: {
+    width: tokens["space-extravagant"],
+    height: tokens["space-extravagant"],
+    marginRight: tokens["space-small"],
+  },
+});