@layers-app/shared 0.0.39-comments.2 → 0.0.39-froms-01

package/dist/components/FormViewer/helpers/helpers.d.ts

@@ -0,0 +1,279 @@
+import { StepData, ThemeData } from '../types/form';
+export declare const mergeTheme: (theme: Partial<ThemeData>, updatedTheme: Partial<ThemeData>) => Partial<ThemeData>;
+export declare const sortSteps: (steps: StepData[]) => {
+    id: string;
+    controls: ({
+        id: string;
+        controlType: "text";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "longText";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "button";
+        label?: string | undefined;
+        link?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        buttons?: any[] | undefined;
+        width?: number | undefined;
+        orientation?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        required?: boolean | undefined;
+        showIconButton?: boolean | undefined;
+        buttonIcon?: string | undefined;
+        alignButton?: "center" | "end" | "start" | undefined;
+        enableTooltip?: boolean | undefined;
+        fullWidthMobile?: boolean | undefined;
+    } | {
+        id: string;
+        controlType: "date";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "start";
+        label?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        showIconButton?: boolean | undefined;
+        buttonIcon?: string | undefined;
+        showButton?: boolean | undefined;
+    } | {
+        id: string;
+        controlType: "confirm";
+        label?: string | undefined;
+        link?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        required?: boolean | undefined;
+        buttonIcon?: string | undefined;
+        showButton?: boolean | undefined;
+    } | {
+        id: string;
+        controlType: "number";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+        }[];
+        controlType: "choice";
+        title?: string | undefined;
+        description?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        showInput?: boolean | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+        }[];
+        controlType: "multipleChoice";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        showInput?: boolean | undefined;
+        minOptions?: number | undefined;
+        maxOptions?: number | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+            image?: string | undefined;
+        }[];
+        controlType: "pictureChoice";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        showInput?: boolean | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+        }[];
+        controlType: "dropdown";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "email";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "location";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "phone";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "slider";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "upload";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        multiple?: boolean | undefined;
+        accept?: string[] | undefined;
+        required?: boolean | undefined;
+        maxSize?: number | undefined;
+        maxFiles?: number | undefined;
+        variableName?: string | undefined;
+        minFiles?: number | undefined;
+    } | {
+        id: string;
+        controlType: "yesNo";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        yesLabel?: string | undefined;
+        noLabel?: string | undefined;
+    } | {
+        id: string;
+        controlType: "rating";
+        title?: string | undefined;
+        description?: string | undefined;
+        required?: boolean | undefined;
+        count?: number | undefined;
+        variableName?: string | undefined;
+    })[];
+    trigger: string;
+    media?: {
+        video?: string | undefined;
+        image?: string | undefined;
+        color?: string | undefined;
+        size?: number | undefined;
+        layout?: "content" | "top" | "left" | "bottom" | "right" | "background" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | undefined;
+        blur?: number | undefined;
+        brightness?: number | undefined;
+        videoThumb?: string | undefined;
+    } | undefined;
+    theme?: {
+        input?: {
+            backgroundColor?: string | undefined;
+            borderColor?: string | undefined;
+        } | undefined;
+        title?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: string | undefined;
+        } | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        description?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: string | undefined;
+        } | undefined;
+        align?: "center" | "end" | "start" | undefined;
+        background?: {
+            image?: string | undefined;
+            color?: string | undefined;
+            opacity?: number | undefined;
+            blur?: number | undefined;
+            brightness?: number | undefined;
+            fit?: string | undefined;
+            blendMode?: string | undefined;
+        } | undefined;
+        container?: {
+            color?: string | undefined;
+            opacity?: number | undefined;
+            backgroundImage?: string | undefined;
+            shadow?: {
+                color?: string | undefined;
+                size?: number | undefined;
+            } | undefined;
+            blur?: number | undefined;
+        } | undefined;
+        borderRadius?: "sm" | "md" | "lg" | undefined;
+        font?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: string | undefined;
+        } | undefined;
+        listStyle?: string | undefined;
+        primaryColor?: string | undefined;
+        customCSS?: string | undefined;
+    } | undefined;
+    confirmLabel?: string | undefined;
+    isStart?: boolean | undefined;
+    isEnd?: boolean | undefined;
+    autoSubmit?: boolean | undefined;
+    conditions?: {
+        operator: string;
+        trigger: string;
+        controlId: string;
+        compareValue?: string | undefined;
+    }[] | undefined;
+}[];

package/dist/components/FormViewer/helpers/index.d.ts

@@ -0,0 +1,7 @@
+export * from './controls';
+export * from './steps';
+export * from './staticClasses';
+export * from './validation';
+export * from './conditions';
+export * from './helpers';
+export * from './themeUtils';

package/dist/components/FormViewer/helpers/slides.d.ts

@@ -0,0 +1,3 @@
+import { MotionProps } from 'framer-motion';
+import { Direction, SlideAnimation } from '../types/form';
+export declare const animations: Record<SlideAnimation, Record<Direction, MotionProps>>;

package/dist/components/FormViewer/helpers/staticClasses.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Static class names for form components
+ * Following Mantine pattern but with "layers-" prefix
+ * Only includes classes that are actually implemented in components
+ */
+export declare const STATIC_CLASSES: {
+    readonly PAGE: "layers-page";
+    readonly START: "layers-start";
+    readonly END: "layers-end";
+    readonly SUBMIT_BUTTON: "layers-submit-button";
+    readonly REQUIRED_INDICATOR: "layers-required-indicator";
+    readonly VALIDATION_ERROR: "layers-validation-error";
+    readonly BLOCK: "layers-block";
+    readonly BLOCK_TEXT: "layers-block-text";
+    readonly BLOCK_TITLE: "layers-block-title";
+    readonly BLOCK_IMAGE: "layers-block-image";
+    readonly MEDIA_LAYOUT_CONTENT: "layers-media-layout-content";
+    readonly MEDIA_LAYOUT_LEFT: "layers-media-layout-left";
+    readonly MEDIA_LAYOUT_RIGHT: "layers-media-layout-right";
+    readonly MEDIA_LAYOUT_FULL_LEFT: "layers-media-layout-full-left";
+    readonly MEDIA_LAYOUT_FULL_RIGHT: "layers-media-layout-full-right";
+    readonly MEDIA_LAYOUT_BACKGROUND: "layers-media-layout-background";
+    readonly MEDIA_LAYOUT_TOP: "layers-media-layout-top";
+    readonly MEDIA_LAYOUT_BOTTOM: "layers-media-layout-bottom";
+    readonly MEDIA_LAYOUT_FULL_TOP: "layers-media-layout-full-top";
+    readonly MEDIA_LAYOUT_FULL_BOTTOM: "layers-media-layout-full-bottom";
+    readonly BLOCK_MULTIPLE_CHOICE: "layers-block-multiple-choice";
+    readonly MULTIPLE_CHOICE_OPTION: "layers-multiple-choice-option";
+    readonly MULTIPLE_CHOICE_OPTION_SELECTED: "layers-multiple-choice-option-selected";
+    readonly NUMBER_BADGE: "layers-number-badge";
+    readonly CHECKBOX: "layers-checkbox";
+    readonly CHECKBOX_SELECTED: "layers-checkbox-selected";
+    readonly RADIO: "layers-radio";
+    readonly RADIO_SELECTED: "layers-radio-selected";
+    readonly BLOCK_INPUT_TEXT: "layers-block-input-text";
+    readonly BLOCK_INPUT_NUMBER: "layers-block-input-number";
+    readonly BLOCK_INPUT_EMAIL: "layers-block-input-email";
+    readonly BLOCK_TEXTAREA: "layers-block-textarea";
+};
+/**
+ * Generate page number class
+ */
+export declare const getPageNumberClass: (pageNumber: number) => string;
+/**
+ * Utility function to combine static classes with existing classes
+ */
+export declare const combineClasses: (...classes: (string | undefined | null)[]) => string;

package/dist/components/FormViewer/helpers/steps.d.ts

@@ -0,0 +1,294 @@
+import { TFunction } from 'i18next';
+import { StepData } from '../types/form';
+export declare const getFirstStep: (steps: StepData[]) => {
+    id: string;
+    controls: ({
+        id: string;
+        controlType: "text";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "longText";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "button";
+        label?: string | undefined;
+        link?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        buttons?: any[] | undefined;
+        width?: number | undefined;
+        orientation?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        required?: boolean | undefined;
+        showIconButton?: boolean | undefined;
+        buttonIcon?: string | undefined;
+        alignButton?: "center" | "end" | "start" | undefined;
+        enableTooltip?: boolean | undefined;
+        fullWidthMobile?: boolean | undefined;
+    } | {
+        id: string;
+        controlType: "date";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "start";
+        label?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        showIconButton?: boolean | undefined;
+        buttonIcon?: string | undefined;
+        showButton?: boolean | undefined;
+    } | {
+        id: string;
+        controlType: "confirm";
+        label?: string | undefined;
+        link?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        required?: boolean | undefined;
+        buttonIcon?: string | undefined;
+        showButton?: boolean | undefined;
+    } | {
+        id: string;
+        controlType: "number";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+        }[];
+        controlType: "choice";
+        title?: string | undefined;
+        description?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        showInput?: boolean | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+        }[];
+        controlType: "multipleChoice";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        showInput?: boolean | undefined;
+        minOptions?: number | undefined;
+        maxOptions?: number | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+            image?: string | undefined;
+        }[];
+        controlType: "pictureChoice";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        showInput?: boolean | undefined;
+    } | {
+        id: string;
+        options: {
+            label: string;
+            id: string;
+        }[];
+        controlType: "dropdown";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "email";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "location";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "phone";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "slider";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+    } | {
+        id: string;
+        controlType: "upload";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        multiple?: boolean | undefined;
+        accept?: string[] | undefined;
+        required?: boolean | undefined;
+        maxSize?: number | undefined;
+        maxFiles?: number | undefined;
+        variableName?: string | undefined;
+        minFiles?: number | undefined;
+    } | {
+        id: string;
+        controlType: "yesNo";
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        required?: boolean | undefined;
+        variableName?: string | undefined;
+        yesLabel?: string | undefined;
+        noLabel?: string | undefined;
+    } | {
+        id: string;
+        controlType: "rating";
+        title?: string | undefined;
+        description?: string | undefined;
+        required?: boolean | undefined;
+        count?: number | undefined;
+        variableName?: string | undefined;
+    })[];
+    trigger: string;
+    media?: {
+        video?: string | undefined;
+        image?: string | undefined;
+        color?: string | undefined;
+        size?: number | undefined;
+        layout?: "content" | "top" | "left" | "bottom" | "right" | "background" | "fullLeft" | "fullRight" | "fullTop" | "fullBottom" | undefined;
+        blur?: number | undefined;
+        brightness?: number | undefined;
+        videoThumb?: string | undefined;
+    } | undefined;
+    theme?: {
+        input?: {
+            backgroundColor?: string | undefined;
+            borderColor?: string | undefined;
+        } | undefined;
+        title?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: string | undefined;
+        } | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        description?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: string | undefined;
+        } | undefined;
+        align?: "center" | "end" | "start" | undefined;
+        background?: {
+            image?: string | undefined;
+            color?: string | undefined;
+            opacity?: number | undefined;
+            blur?: number | undefined;
+            brightness?: number | undefined;
+            fit?: string | undefined;
+            blendMode?: string | undefined;
+        } | undefined;
+        container?: {
+            color?: string | undefined;
+            opacity?: number | undefined;
+            backgroundImage?: string | undefined;
+            shadow?: {
+                color?: string | undefined;
+                size?: number | undefined;
+            } | undefined;
+            blur?: number | undefined;
+        } | undefined;
+        borderRadius?: "sm" | "md" | "lg" | undefined;
+        font?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            fontWeight?: number | undefined;
+            fontFamily?: string | undefined;
+        } | undefined;
+        listStyle?: string | undefined;
+        primaryColor?: string | undefined;
+        customCSS?: string | undefined;
+    } | undefined;
+    confirmLabel?: string | undefined;
+    isStart?: boolean | undefined;
+    isEnd?: boolean | undefined;
+    autoSubmit?: boolean | undefined;
+    conditions?: {
+        operator: string;
+        trigger: string;
+        controlId: string;
+        compareValue?: string | undefined;
+    }[] | undefined;
+} | undefined;
+export declare const DEFAULT_END_STEP_ID = "__end_step__";
+export declare const DEFAULT_START_STEP_ID = "__start_step__";
+export declare const getDefaultStartStep: (t: TFunction) => StepData;
+export declare const getDefaultEndStep: (t: TFunction) => StepData;
+export declare const DEFAULT_MIN = 0;
+export declare const DEFAULT_OPTIONS_MIN = 1;
+export declare const DEFAULT_MAX = 9999;
+export declare const DEFAULT_OPTION_MAX_LENGTH = 99;
+export declare const CREATE_CONDITION_FORM_ID = "CREATE_CONDITION_FORM";
+export declare const EDIT_CONDITION_FORM_ID = "EDIT_CONDITION_FORM";
+export declare const MAX_OPTIONS_COUNT = 20;
+export declare const getDefaultDropdownOptions: (t: TFunction) => string;
+export declare const getRandomId: () => string;
+export declare const DEFAULT_MEDIA_BRIGHTNESS = 100;
+export declare const DEFAULT_MEDIA_SIZE = 100;

package/dist/components/FormViewer/helpers/themeUtils.d.ts

@@ -0,0 +1,2 @@
+import { Align } from '../types/form';
+export declare const alignRelation: Record<Align, string>;

package/dist/components/FormViewer/helpers/validation.d.ts

@@ -0,0 +1,10 @@
+import { FileWithPath } from '@mantine/dropzone';
+import { TFunction } from 'i18next';
+import { Control, LongTextControl, TextControl } from '../types/form';
+export declare const useValidation: () => {
+    getValidation: (c: Control) => ((v: string) => string | null) | ((v: (string | number)[]) => string | null) | ((v: boolean) => string | null) | ((v: FileWithPath[]) => string | null) | undefined;
+};
+export declare const getTextValidation: (props: Partial<TextControl> | Partial<LongTextControl>, t: TFunction) => (v: string) => string | null;
+export declare const isValidEmail: (v: string) => boolean;
+export declare const isImageUrl: (url: string) => Promise<unknown>;
+export declare const isValidUrl: (urlString: string) => boolean;

package/dist/components/FormViewer/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useCreateFormContext';
+export * from './useActiveControl';
+export * from './useActiveStep';
+export * from './useCreateFormContext';
+export * from './useFormMobile';
+export * from './useInterpolateText';