@lifesg/web-frontend-engine 1.0.0-alpha.3 → 1.0.0-alpha.5

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,6 +2,7 @@ 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 "./select";
@@ -9,3 +10,5 @@ export * from "./submit-button";
 export * from "./text-field";
 export * from "./textarea";
 export * from "./time-field";
+export * from "./reset-button";
+export * from "./unit-number-field";

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

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

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

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

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

@@ -2,7 +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 FlexWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -3,8 +3,20 @@ import { IFrontendEngineBaseFieldJsonSchema, TComponentOmitProps } from "../../f
 interface IOption {
     label: string;
     value: string;
+    disabled?: boolean | undefined;
+    imgSrc?: string | undefined;
 }
+type TCustomOptions = {
+    styleType: "default";
+} | {
+    styleType: "toggle";
+    indicator?: boolean | undefined;
+    border?: boolean | undefined;
+} | {
+    styleType: "image-button";
+};
 export interface IRadioButtonGroupSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"radio", V>, TComponentOmitProps<RadioButtonProps> {
     options: IOption[];
+    customOptions?: TCustomOptions;
 }
 export {};

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

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

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

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

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

@@ -0,0 +1,6 @@
+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/select/select.d.ts

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

package/components/fields/submit-button/submit-button.d.ts

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IGenericFieldProps } from "../../frontend-engine";
 import { IEmailFieldSchema, INumericFieldSchema, ITextFieldSchema } from "./types";
-export declare const TextField: (props: IGenericFieldProps<ITextFieldSchema | IEmailFieldSchema | INumericFieldSchema>) => JSX.Element;
+export declare const TextField: (props: IGenericFieldProps<ITextFieldSchema | IEmailFieldSchema | INumericFieldSchema>) => import("react/jsx-runtime").JSX.Element;

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.d.ts

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

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/fields/time-field/time-field.d.ts

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

package/components/fields/unit-number-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./unit-number-field";
+export * from "./types";

package/components/fields/unit-number-field/types.d.ts

@@ -0,0 +1,7 @@
+import { UnitNumberInputProps } from "@lifesg/react-design-system/unit-number";
+import { IFrontendEngineBaseFieldJsonSchema, TComponentOmitProps } from "../../frontend-engine";
+export interface IUnitNumberFieldValidationRule {
+    unitNumberFormat?: boolean | undefined;
+}
+export interface IUnitNumberFieldSchema<V = undefined> extends IFrontendEngineBaseFieldJsonSchema<"unit-number-field", V, IUnitNumberFieldValidationRule>, TComponentOmitProps<UnitNumberInputProps> {
+}

package/components/fields/unit-number-field/unit-number-field.d.ts

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

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

@@ -1,8 +1,9 @@
-import { ControllerFieldState, ControllerRenderProps, UseFormSetValue, ValidationMode } from "react-hook-form";
+import { ControllerFieldState, ControllerRenderProps, UseFormReset, UseFormSetValue, ValidationMode } from "react-hook-form";
+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, ISelectSchema, ISubmitButtonSchema, ITextFieldSchema, ITextareaSchema, ITimeFieldSchema } from "../fields";
+import { ICheckboxGroupSchema, IChipsSchema, IContactFieldSchema, IDateFieldSchema, IEmailFieldSchema, IImageUploadSchema, IMultiSelectSchema, INumericFieldSchema, IRadioButtonGroupSchema, IResetButtonSchema, ISelectSchema, ISubmitButtonSchema, ITextFieldSchema, ITextareaSchema, ITimeFieldSchema, IUnitNumberFieldSchema } from "../fields";
 import { IYupValidationRule, TRenderRules, TYupSchemaType } from "./yup";
 export type { IYupValidationRule } from "./yup";
 export interface IFrontendEngineProps<V = undefined> {
@@ -35,25 +36,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> | IAlertSchema | ITextSchema | ICustomComponentJsonSchema;
+export type TFrontendEngineFieldSchema<V = undefined> = IAlertSchema | ICheckboxGroupSchema<V> | IChipsSchema<V> | IContactFieldSchema<V> | ICustomComponentJsonSchema<V> | IDateFieldSchema<V> | IEmailFieldSchema<V> | IFilterSchema | IImageUploadSchema<V> | IMultiSelectSchema<V> | INumericFieldSchema<V> | IRadioButtonGroupSchema<V> | IResetButtonSchema | ISelectSchema<V> | ISubmitButtonSchema | 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;
+    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 */
@@ -72,11 +78,17 @@ export interface IFrontendEngineBaseFieldJsonSchema<T, V = undefined, U = undefi
 /**
  * to support custom components from other form / frontend engines
  */
-export interface ICustomComponentJsonSchema {
-    referenceKey: string;
-    [otherOptions: string]: unknown;
+export interface ICustomComponentJsonSchema<T> {
+    referenceKey: T;
     uiType?: never | undefined;
 }
+export interface ICustomFieldJsonSchema<T, V = undefined, U = undefined> extends ICustomComponentJsonSchema<T> {
+    validation?: (V | U | IYupValidationRule)[];
+    /** render conditions
+     * - need to fulfil at least 1 object in array (OR condition)
+     * - in order for an object to be valid, need to fulfil all conditions in that object (AND condition) */
+    showIf?: TRenderRules[] | undefined;
+}
 /**
  * JSON keys to omit from field schema when extending from other interfaces
  * - keys already defined in `IFrontendEngineBaseFieldJsonSchema` to prevent collision
@@ -95,19 +107,22 @@ 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",
+    "NUMERIC-FIELD" = "TextField",
     RADIO = "RadioButtonGroup",
+    RESET = "ResetButton",
+    SELECT = "Select",
+    SUBMIT = "SubmitButton",
+    TEXTAREA = "Textarea",
+    "TEXT-FIELD" = "TextField",
     "TIME-FIELD" = "TimeField",
-    CHIPS = "Chips"
+    "UNIT-NUMBER-FIELD" = "UnitNumberField"
 }
 /**
  * Non-field types
@@ -140,6 +155,17 @@ export declare enum EElementType {
     H6 = "Wrapper",
     P = "Wrapper"
 }
+/**
+ * Custom element types
+ * - components that do not have uiType and have specific schema to render
+ */
+export declare enum ECustomElementType {
+    FILTER = "Filter",
+    "FILTER-ITEM" = "FilterItem"
+}
+export declare enum ECustomFieldType {
+    "FILTER-CHECKBOX" = "FilterCheckbox"
+}
 export interface IGenericFieldProps<T = TFrontendEngineFieldSchema> extends Partial<ControllerFieldState>, Partial<ControllerRenderProps> {
     id: string;
     schema: T;

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

@@ -8,5 +8,5 @@ interface IProps {
     children: ReactElement;
 }
 export declare const YupContext: React.Context<IYupContext>;
-export declare const YupProvider: ({ children }: IProps) => JSX.Element;
+export declare const YupProvider: ({ children }: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import * as Yup from "yup";
 export declare const YUP_TYPES: readonly ["string", "number", "boolean", "array", "object"];
-export declare const YUP_CONDITIONS: readonly ["required", "length", "min", "max", "matches", "email", "url", "uuid", "positive", "negative", "integer", "lessThan", "moreThan", "when", "filled", "empty", "equals", "notEquals", "includes", "excludes", "uinfin"];
+export declare const YUP_CONDITIONS: readonly ["required", "length", "min", "max", "matches", "email", "url", "uuid", "positive", "negative", "integer", "lessThan", "moreThan", "when", "filled", "empty", "equals", "notEquals", "includes", "excludes", "uinfin", "equalsField"];
 export type TYupSchemaType = (typeof YUP_TYPES)[number];
 export type TYupCondition = (typeof YUP_CONDITIONS)[number];
 interface IYupRule {
@@ -22,6 +22,7 @@ interface IYupRule {
     includes?: unknown | undefined;
     excludes?: unknown | undefined;
     uinfin?: boolean | undefined;
+    equalsField?: unknown | undefined;
 }
 export interface IYupValidationRule extends IYupRule {
     required?: boolean | undefined;

package/components/shared/chip/chip.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 import { IChipButtonProps } from "./types";
 interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, IChipButtonProps {
 }
-export declare const Chip: ({ children, ...otherProps }: IProps) => JSX.Element;
+export declare const Chip: ({ children, ...otherProps }: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/shared/drag-upload/drag-upload.d.ts

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