@lifesg/web-frontend-engine 1.0.0-alpha.4 → 1.0.0-alpha.6

package/components/fields/checkbox-group/checkbox-group.styles.d.ts

@@ -2,7 +2,7 @@
 interface ILabelProps {
     disabled?: boolean | undefined;
 }
-export declare const Label: import("styled-components").StyledComponent<"label", any, ILabelProps, never>;
+export declare const Label: import("styled-components").StyledComponent<"p", any, import("@lifesg/react-design-system/text").TextProps & ILabelProps, never>;
 export declare const StyledCheckbox: import("styled-components").StyledComponent<({ className, checked, disabled, onChange, onKeyPress, displaySize, ...otherProps }: import("@lifesg/react-design-system/checkbox").CheckboxProps) => JSX.Element, any, {}, never>;
 export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/components/fields/image-upload/image-context/image-context.d.ts

@@ -0,0 +1,14 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { IImage } from "../types";
+interface IImageContext {
+    images: IImage[];
+    setImages: Dispatch<SetStateAction<IImage[]>>;
+    errorCount: number;
+    setErrorCount: Dispatch<SetStateAction<number>>;
+}
+interface Props {
+    children: (string | boolean | JSX.Element)[] | (string | boolean | JSX.Element);
+}
+export declare const ImageContext: React.Context<IImageContext>;
+export declare const ImageProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-context/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-context";

package/components/fields/image-upload/image-input/file-item/file-item.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IImage, IImageUploadValidationRule, ISharedImageProps } from "../../types";
+interface IProps extends Omit<ISharedImageProps, "maxFiles"> {
+    id?: string;
+    index: number;
+    fileItem: IImage;
+    validation: IImageUploadValidationRule[];
+    onDelete: (index: number) => (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const FileItem: ({ id, index, fileItem, maxSizeInKb, accepts, onDelete, validation }: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-input/file-item/file-item.styles.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    isError?: boolean;
+}, never>;
+export declare const CellInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CellFileSize: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CellProgressBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CellDeleteButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Thumbnail: import("styled-components").StyledComponent<"div", any, {
+    src: string;
+}, never>;
+export declare const TextBody: import("styled-components").StyledComponent<"p", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const MobileFileSize: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressBar: import("styled-components").StyledComponent<"progress", any, {}, never>;
+export declare const ErrorText: import("styled-components").StyledComponent<"h6", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const DeleteButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;

package/components/fields/image-upload/image-input/file-item/index.d.ts

@@ -0,0 +1 @@
+export * from "./file-item";

package/components/fields/image-upload/image-input/image-input.d.ts

@@ -0,0 +1,17 @@
+import { IImageUploadValidationRule, ISharedImageProps } from "../types";
+interface IImageInputProps extends ISharedImageProps {
+    label: string;
+    buttonLabel?: string | undefined;
+    description: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    validation: IImageUploadValidationRule[];
+    errorMessage?: string | undefined;
+}
+/**
+ * handles adding of image(s) through drag & drop or file dialog
+ */
+export declare const ImageInput: (props: IImageInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-input/image-input.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<"p", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const Content: import("styled-components").StyledComponent<"p", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const UploadWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AddButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
+export declare const DropThemHereText: import("styled-components").StyledComponent<"p", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const AlertContainer: import("styled-components").StyledComponent<({ type, className, children, actionLink, ...otherProps }: import("@lifesg/react-design-system/alert").AlertProps) => JSX.Element, any, {}, never>;

package/components/fields/image-upload/image-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-input";

package/components/fields/image-upload/image-manager/image-manager.d.ts

@@ -0,0 +1,22 @@
+import { ISharedImageProps, TImageUploadOutputFileType, TUploadMethod } from "../types";
+interface IProps extends Omit<ISharedImageProps, "maxFiles"> {
+    editImage: boolean;
+    onChange: (...event: any[]) => void;
+    compress: boolean;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    outputType: TImageUploadOutputFileType;
+    upload?: {
+        method: TUploadMethod;
+        url: string;
+    };
+    value: any;
+}
+/**
+ * manages selected images by listening to images from context provider
+ * rename / compress / upload
+ */
+export declare const ImageManager: (props: IProps) => any;
+export {};

package/components/fields/image-upload/image-manager/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageManager } from "./image-manager";
+export default ImageManager;

package/components/fields/image-upload/image-review/image-editor/image-editor.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IImageEditorProps, IImageEditorRef } from "./types";
+export declare const ImageEditor: import("react").ForwardRefExoticComponent<IImageEditorProps & import("react").RefAttributes<IImageEditorRef>>;

package/components/fields/image-upload/image-review/image-editor/image-editor.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Canvas: import("styled-components").StyledComponent<"canvas", any, {
+    canDraw: boolean;
+}, never>;

package/components/fields/image-upload/image-review/image-editor/index.d.ts

@@ -0,0 +1,3 @@
+import { ImageEditor } from "./image-editor";
+export default ImageEditor;
+export * from "./types";

package/components/fields/image-upload/image-review/image-editor/types.d.ts

@@ -0,0 +1,16 @@
+import { ForwardedRef } from "react";
+export interface IImageEditorProps {
+    maxSizeInKb?: number;
+    baseImageDataURL?: string;
+    drawing?: fabric.Object[];
+    color?: string;
+    erase?: boolean;
+    forwardedRef?: ForwardedRef<IImageEditorRef>;
+}
+export interface IImageEditorRef {
+    clearDrawing: VoidFunction;
+    export: () => {
+        drawing: fabric.Object[];
+        dataURL: string;
+    };
+}

package/components/fields/image-upload/image-review/image-error/image-error.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { IImage, ISharedImageProps } from "../../types";
+interface IProps extends Omit<ISharedImageProps, "maxFiles"> {
+    image: IImage;
+    onClickOk: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const ImageError: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-review/image-error/image-error.styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BodyText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NameWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const OkButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;

package/components/fields/image-upload/image-review/image-error/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-error";

package/components/fields/image-upload/image-review/image-prompts/image-prompts.d.ts

@@ -0,0 +1,11 @@
+import { IImage } from "../../types";
+interface IProps {
+    onDecideClearDrawing: (decision?: boolean) => void;
+    onDecideDelete: (decision: boolean) => void;
+    onDecideExit: (decision?: boolean) => void;
+    id?: string;
+    images: IImage[];
+    show?: "delete" | "exit" | "clear-drawing";
+}
+export declare const ImagePrompts: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-review/image-prompts/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-prompts";

package/components/fields/image-upload/image-review/image-review.d.ts

@@ -0,0 +1,15 @@
+import { TFileCapture } from "../../../shared";
+import { ISharedImageProps } from "../types";
+interface IProps extends ISharedImageProps {
+    capture?: TFileCapture;
+    compress?: boolean | undefined;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    onExit: () => void;
+    outputType: string;
+    show: boolean;
+}
+export declare const ImageReview: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-review/image-review.styles.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const ModalBox: import("styled-components").StyledComponent<({ id, children, onClose, showCloseButton, ...otherProps }: import("@lifesg/react-design-system/modal").ModalBoxProps) => JSX.Element, any, {
+    statusBarHeight: number;
+}, never>;
+export declare const HeaderSection: import("styled-components").StyledComponent<"div", any, {
+    drawActive?: boolean;
+}, never>;
+export declare const ReviewCloseButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
+export declare const ReviewTitle: import("styled-components").StyledComponent<"h5", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const EditHeaderButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ContentSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingPreviewText: import("styled-components").StyledComponent<"h4", any, import("@lifesg/react-design-system/text").TextProps, never>;
+export declare const DrawDeleteButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawDeleteButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
+export declare const DrawDeleteButtonText: import("styled-components").StyledComponent<"h6", any, import("@lifesg/react-design-system/text").TextProps & {
+    disabled: boolean;
+}, never>;
+export declare const DrawIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const DeleteIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const ImageEditorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterSaveButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
+export declare const EraserButton: import("styled-components").StyledComponent<"button", any, {
+    active?: boolean;
+}, never>;
+export declare const ButtonIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const PaletteHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Palette: import("styled-components").StyledComponent<"button", any, {
+    color: string;
+    colorScheme?: string;
+}, never>;

package/components/fields/image-upload/image-review/image-thumbnails/image-thumbnails.d.ts

@@ -0,0 +1,11 @@
+import { TFileCapture } from "../../../../shared";
+import { IImage, ISharedImageProps } from "../../types";
+interface IProps extends Omit<ISharedImageProps, "maxSizeInKb"> {
+    activeFileIndex: number;
+    capture?: TFileCapture;
+    images: IImage[];
+    onClickThumbnail: (index: number) => void;
+    onSelectFile: (file: File) => void;
+}
+export declare const ImageThumbnails: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/fields/image-upload/image-review/image-thumbnails/image-thumbnails.styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const ThumbnailsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbnailItem: import("styled-components").StyledComponent<"button", any, {
+    src?: string;
+    error?: boolean;
+}, never>;
+export declare const ThumbnailWarningIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const LoadingDot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BorderOverlay: import("styled-components").StyledComponent<"div", any, {
+    isSelected: boolean;
+}, never>;
+export declare const HiddenFileSelect: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const AddImageButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;

package/components/fields/image-upload/image-review/image-thumbnails/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-thumbnails";

package/components/fields/image-upload/image-review/index.d.ts

@@ -0,0 +1 @@
+export * from "./image-review";

package/components/fields/image-upload/image-upload-helper.d.ts

@@ -0,0 +1,10 @@
+import { IImage } from "./types";
+export declare namespace ImageUploadHelper {
+    /**
+     * picks an available slot
+     * slot refers to the index of the file selected
+     * this is for tracking so we can remove the correct file when user removes it
+     * NOTE: validation for max no. of images should be carried out outside this function, this function will only look for the next available slot
+     */
+    const findAvailableSlot: (images: IImage[]) => number;
+}

package/components/fields/image-upload/image-upload.d.ts

@@ -0,0 +1,4 @@
+import { IGenericFieldProps } from "../../frontend-engine";
+import { IImageUploadSchema } from "./types";
+export declare const ImageUploadInner: (props: IGenericFieldProps<IImageUploadSchema>) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageUpload: (props: IGenericFieldProps<IImageUploadSchema>) => import("react/jsx-runtime").JSX.Element;

package/components/fields/image-upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./image-upload";
+export * from "./types";

package/components/fields/image-upload/types.d.ts

@@ -0,0 +1,65 @@
+import { IFrontendEngineBaseFieldJsonSchema } from "../../frontend-engine";
+import { IYupValidationRule } from "../../frontend-engine/yup/types";
+export type TUploadMethod = "post" | "put" | "patch";
+export declare const ACCEPTED_FILE_TYPES: readonly ["jpg", "gif", "png", "heic", "heif", "webp"];
+export type TImageUploadAcceptedFileType = (typeof ACCEPTED_FILE_TYPES)[number];
+export type TImageUploadOutputFileType = "jpg" | "png";
+export interface IImageUploadValidationRule extends IYupValidationRule {
+    /** accepted file types */
+    fileType?: TImageUploadAcceptedFileType[] | undefined;
+    /** max acceptable file size in kb */
+    maxSizeInKb?: number | undefined;
+}
+export interface IImageUploadSchema<V = IImageUploadValidationRule> extends IFrontendEngineBaseFieldJsonSchema<"image-upload", V> {
+    buttonLabel?: string | undefined;
+    description?: string | undefined;
+    editImage?: boolean | undefined;
+    outputType?: TImageUploadOutputFileType | undefined;
+    uploadOnAddingFile?: {
+        method: TUploadMethod;
+        url: string;
+    } | undefined;
+    compress?: boolean | undefined;
+    dimensions?: IImageDimensions | undefined;
+}
+export interface ISharedImageProps {
+    id?: string | undefined;
+    accepts: TImageUploadAcceptedFileType[];
+    maxSizeInKb: number;
+    maxFiles: number;
+}
+export declare enum EImageStatus {
+    INJECTED = -99,
+    ERROR_FORMAT = -3,
+    ERROR_GENERIC = -2,
+    ERROR_SIZE = -1,
+    NONE = 0,
+    TO_RECOMPRESS = 1,
+    COMPRESSED = 2,
+    RECOMPRESSED = 2,
+    CONVERTED = 2,
+    EDITED = 3,
+    UPLOAD_READY = 4,
+    UPLOADING = 5,
+    UPLOADED = 6
+}
+export interface IImage {
+    file: File;
+    name: string;
+    type?: string;
+    /** refers to preview dimensions and eventual output dimensions */
+    dimensions: IImageDimensions;
+    dataURL?: string;
+    thumbnailDataURL?: string;
+    drawingDataURL?: string;
+    drawing?: fabric.Object[];
+    status: EImageStatus;
+    addedFrom?: "dragInput" | "reviewModal" | "schema";
+    uploadProgress: number;
+    uploadResponse?: any;
+    slot: number;
+}
+export interface IImageDimensions {
+    width: number;
+    height: number;
+}

package/components/fields/index.d.ts

@@ -2,12 +2,15 @@ export * from "./checkbox-group";
 export * from "./chips";
 export * from "./contact-field";
 export * from "./date-field";
+export * from "./image-upload";
 export * from "./multi-select";
 export * from "./radio-button";
+export * from "./reset-button";
 export * from "./select";
+export * from "./range-select";
 export * from "./submit-button";
+export * from "./switch";
 export * from "./text-field";
 export * from "./textarea";
 export * from "./time-field";
-export * from "./reset-button";
 export * from "./unit-number-field";

package/components/fields/radio-button/radio-button.styles.d.ts

@@ -2,8 +2,9 @@
 interface ILabelProps {
     disabled?: boolean | undefined;
 }
-export declare const Label: import("styled-components").StyledComponent<"label", any, ILabelProps, never>;
-export declare const StyledRadioButton: import("styled-components").StyledComponent<({ className, checked, disabled, onChange, ...otherProps }: import("@lifesg/react-design-system/radio-button").RadioButtonProps) => JSX.Element, any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"p", any, import("@lifesg/react-design-system").TextProps & ILabelProps, never>;
+export declare const StyledRadioButton: import("styled-components").StyledComponent<({ className, checked, disabled, onChange, ...otherProps }: import("@lifesg/react-design-system").RadioButtonProps) => JSX.Element, any, {}, never>;
+export declare const StyledImageButton: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system").ImageButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {}, never>;
 export declare const RadioContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/components/fields/radio-button/types.d.ts

@@ -4,13 +4,16 @@ interface IOption {
     label: string;
     value: string;
     disabled?: boolean | undefined;
+    imgSrc?: string | undefined;
 }
 type TCustomOptions = {
     styleType: "default";
 } | {
     styleType: "toggle";
-    indicator?: boolean;
-    border?: boolean;
+    indicator?: boolean | undefined;
+    border?: boolean | undefined;
+} | {
+    styleType: "image-button";
 };
 export interface IRadioButtonGroupSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"radio", V>, TComponentOmitProps<RadioButtonProps> {
     options: IOption[];

package/components/fields/range-select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./range-select";
+export * from "./types";

package/components/fields/range-select/range-select.d.ts

@@ -0,0 +1,3 @@
+import { IGenericFieldProps } from "../../frontend-engine";
+import { IRangeSelectSchema } from "./types";
+export declare const RangeSelect: (props: IGenericFieldProps<IRangeSelectSchema>) => import("react/jsx-runtime").JSX.Element;

package/components/fields/range-select/types.d.ts

@@ -0,0 +1,8 @@
+import { InputRangeSelectProps } from "@lifesg/react-design-system/input-select/types";
+import { IFrontendEngineBaseFieldJsonSchema, TComponentOmitProps } from "../../frontend-engine";
+export interface IRangeSelectOption {
+    label: string;
+    value: string;
+}
+export interface IRangeSelectSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"range-select", V>, TComponentOmitProps<InputRangeSelectProps<IRangeSelectOption, string>> {
+}

package/components/fields/reset-button/types.d.ts

@@ -2,4 +2,5 @@ import { ButtonProps } from "@lifesg/react-design-system/button/types";
 import { IFrontendEngineBaseFieldJsonSchema, TComponentOmitProps } from "../../frontend-engine";
 export interface IResetButtonSchema extends Omit<IFrontendEngineBaseFieldJsonSchema<"reset">, "validation">, TComponentOmitProps<ButtonProps, "disabled"> {
     disabled?: boolean | undefined;
+    ignoreDefaultValues?: boolean | undefined;
 }

package/components/fields/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./switch";
+export * from "./types";

package/components/fields/switch/switch.d.ts

@@ -0,0 +1,3 @@
+import { IGenericFieldProps } from "../../frontend-engine";
+import { ISwitchSchema } from "./types";
+export declare const Switch: (props: IGenericFieldProps<ISwitchSchema>) => import("react/jsx-runtime").JSX.Element;

package/components/fields/switch/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const FlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/components/fields/switch/types.d.ts

@@ -0,0 +1,9 @@
+import { IFrontendEngineBaseFieldJsonSchema, TComponentOmitProps } from "../../frontend-engine";
+import { ToggleProps } from "@lifesg/react-design-system/toggle";
+type TCustomOptions = {
+    border?: boolean | undefined;
+};
+export interface ISwitchSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"switch", V>, TComponentOmitProps<ToggleProps> {
+    customOptions?: TCustomOptions | undefined;
+}
+export {};

package/components/fields/text-field/types.d.ts

@@ -1,8 +1,16 @@
 import { FormInputProps } from "@lifesg/react-design-system/form/types";
 import { IFrontendEngineBaseFieldJsonSchema, TComponentOmitProps } from "../../frontend-engine";
+type TCustomOptions = {
+    preventCopyAndPaste?: boolean | undefined;
+    preventDragAndDrop?: boolean | undefined;
+};
 export interface ITextFieldSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"text-field", V>, TComponentOmitProps<FormInputProps, "type" | "maxLength"> {
+    customOptions?: TCustomOptions | undefined;
 }
 export interface IEmailFieldSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"email-field", V>, TComponentOmitProps<FormInputProps, "type" | "maxLength"> {
+    customOptions?: TCustomOptions | undefined;
 }
 export interface INumericFieldSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"numeric-field", V>, TComponentOmitProps<FormInputProps, "type" | "max" | "min"> {
+    customOptions?: TCustomOptions | undefined;
 }
+export {};

package/components/fields/textarea/textarea.styles.d.ts

@@ -7,5 +7,5 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
     chipPosition?: "top" | "bottom" | undefined;
 }, never>;
 export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTextarea: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/form/types").FormTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, ITextareaProps, never>;
+export declare const StyledTextarea: import("styled-components").StyledComponent<(props: import("@lifesg/react-design-system/input-textarea").TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, ITextareaProps, never>;
 export {};

package/components/frontend-engine/event/context-provider.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+/**
+ * events are added / removed / dispatched via the eventManager
+ * the eventManager is just a div, the handling of events is purely through native event handlers
+ */
+interface IEventContext {
+    eventManagerRef: React.RefObject<Element>;
+}
+interface IProps {
+    children: ReactElement;
+}
+export declare const EventContext: import("react").Context<IEventContext>;
+export declare const EventProvider: ({ children }: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/frontend-engine/event/index.d.ts

@@ -0,0 +1 @@
+export * from "./context-provider";

package/components/frontend-engine/types.d.ts

@@ -3,7 +3,7 @@ import { IFilterSchema } from "../custom/filter/filter/types";
 import { IAlertSchema, ITextSchema } from "../elements";
 import { ISectionSchema } from "../elements/section";
 import { IWrapperSchema } from "../elements/wrapper";
-import { ICheckboxGroupSchema, IChipsSchema, IContactFieldSchema, IDateFieldSchema, IEmailFieldSchema, IMultiSelectSchema, INumericFieldSchema, IRadioButtonGroupSchema, IResetButtonSchema, ISelectSchema, ISubmitButtonSchema, ITextFieldSchema, ITextareaSchema, ITimeFieldSchema, IUnitNumberFieldSchema } from "../fields";
+import { ICheckboxGroupSchema, IChipsSchema, IContactFieldSchema, IDateFieldSchema, IEmailFieldSchema, IImageUploadSchema, IMultiSelectSchema, INumericFieldSchema, IRadioButtonGroupSchema, IRangeSelectSchema, IResetButtonSchema, ISelectSchema, ISubmitButtonSchema, ISwitchSchema, ITextFieldSchema, ITextareaSchema, ITimeFieldSchema, IUnitNumberFieldSchema } from "../fields";
 import { IYupValidationRule, TRenderRules, TYupSchemaType } from "./yup";
 export type { IYupValidationRule } from "./yup";
 export interface IFrontendEngineProps<V = undefined> {
@@ -15,6 +15,8 @@ export interface IFrontendEngineProps<V = undefined> {
     onChange?: ((values: TFrontendEngineValues, isValid?: boolean | undefined) => unknown) | undefined;
     /** Submit event handler, will receive the form data if form validation is successful */
     onSubmit?: (values: TFrontendEngineValues) => unknown | undefined;
+    /** Submit error event handler, invoked when form fails validation on submissiohn. Will receive validation errors */
+    onSubmitError?: (errors: TFrontendEngineValues) => unknown | undefined;
 }
 export interface IFrontendEngineData<V = undefined> {
     /** HTML class attribute */
@@ -36,27 +38,30 @@ export interface IFrontendEngineData<V = undefined> {
     /** Validation strategy before a user submits the form (onSubmit event) */
     validationMode?: TValidationMode | undefined;
 }
-export type TFrontendEngineFieldSchema<V = undefined> = ITextareaSchema<V> | ITextFieldSchema<V> | IEmailFieldSchema<V> | INumericFieldSchema<V> | ISubmitButtonSchema | ISelectSchema<V> | IMultiSelectSchema<V> | ICheckboxGroupSchema<V> | IDateFieldSchema<V> | IWrapperSchema | IContactFieldSchema<V> | IRadioButtonGroupSchema<V> | ITimeFieldSchema<V> | IChipsSchema<V> | IUnitNumberFieldSchema<V> | IAlertSchema | ITextSchema | IResetButtonSchema | IFilterSchema | ICustomComponentJsonSchema<V>;
+export type TFrontendEngineFieldSchema<V = undefined> = IAlertSchema | ICheckboxGroupSchema<V> | IChipsSchema<V> | IContactFieldSchema<V> | ICustomComponentJsonSchema<V> | IDateFieldSchema<V> | IEmailFieldSchema<V> | IFilterSchema | IImageUploadSchema<V> | IMultiSelectSchema<V> | IRangeSelectSchema<V> | INumericFieldSchema<V> | IRadioButtonGroupSchema<V> | IResetButtonSchema | ISelectSchema<V> | ISubmitButtonSchema | ISwitchSchema<V> | ITextSchema | ITextareaSchema<V> | ITextFieldSchema<V> | ITimeFieldSchema<V> | IUnitNumberFieldSchema<V> | IWrapperSchema;
 export type TFrontendEngineValues<T = any> = Record<keyof T, T[keyof T]>;
 export type TRevalidationMode = Exclude<keyof ValidationMode, "onTouched" | "all">;
 export type TValidationMode = keyof ValidationMode;
 export type TErrorMessage = string | string[] | Record<string, string | string[]>;
 export type TErrorPayload = Record<string, TErrorMessage>;
 export interface IFrontendEngineRef extends HTMLFormElement {
+    addCustomValidation: (type: TYupSchemaType | "mixed", name: string, fn: (value: unknown, arg: unknown) => boolean) => void;
+    addFieldEventListener: (type: string, id: string, listener: (ev: Event) => any, options?: boolean | AddEventListenerOptions) => void;
+    dispatchFieldEvent: (type: string, id: string, detail?: any) => boolean;
     /** gets form values */
     getValues: () => TFrontendEngineValues;
-    /** sets field value by id */
-    setValue: UseFormSetValue<TFrontendEngineValues>;
     /** checks if form is valid */
     isValid: () => boolean;
-    /** triggers form submission */
-    submit: () => void;
     /** adds custom validation rule */
-    addCustomValidation: (type: TYupSchemaType | "mixed", name: string, fn: (value: unknown, arg: unknown) => boolean) => void;
-    /** allows setting of custom errors thrown by endpoints */
-    setErrors: (errors: TErrorPayload) => void;
+    removeFieldEventListener: (type: string, id: string, listener: (ev: Event) => any, options?: boolean | EventListenerOptions) => void;
     /** resets the form to the default state */
     reset: UseFormReset<TFrontendEngineValues>;
+    /** allows setting of custom errors thrown by endpoints */
+    setErrors: (errors: TErrorPayload) => void;
+    /** sets field value by id */
+    setValue: UseFormSetValue<TFrontendEngineValues>;
+    /** triggers form submission */
+    submit: () => void;
 }
 export interface IFrontendEngineBaseFieldJsonSchema<T, V = undefined, U = undefined> {
     /** defines what kind of component to be rendered */
@@ -104,20 +109,23 @@ export type TComponentOmitProps<T, V = undefined> = Omit<T, UnionOptionalKeys<V>
  * - components that can contain values that can get submitted
  */
 export declare enum EFieldType {
-    TEXTAREA = "Textarea",
-    "TEXT-FIELD" = "TextField",
-    "NUMERIC-FIELD" = "TextField",
-    "EMAIL-FIELD" = "TextField",
-    SUBMIT = "SubmitButton",
-    SELECT = "Select",
-    "MULTI-SELECT" = "MultiSelect",
-    "DATE-FIELD" = "DateField",
     CHECKBOX = "CheckboxGroup",
+    CHIPS = "Chips",
     "CONTACT-FIELD" = "ContactField",
+    "DATE-FIELD" = "DateField",
+    "EMAIL-FIELD" = "TextField",
+    "IMAGE-UPLOAD" = "ImageUpload",
+    "MULTI-SELECT" = "MultiSelect",
+    "RANGE-SELECT" = "RangeSelect",
+    "NUMERIC-FIELD" = "TextField",
     RADIO = "RadioButtonGroup",
-    "TIME-FIELD" = "TimeField",
-    CHIPS = "Chips",
     RESET = "ResetButton",
+    SELECT = "Select",
+    SUBMIT = "SubmitButton",
+    SWITCH = "Switch",
+    TEXTAREA = "Textarea",
+    "TEXT-FIELD" = "TextField",
+    "TIME-FIELD" = "TimeField",
     "UNIT-NUMBER-FIELD" = "UnitNumberField"
 }
 /**