@layers-app/shared 0.0.39-comments.2 → 0.0.39-comments.4

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

@@ -0,0 +1,285 @@
+import { UseFormReturnType } from '@mantine/form';
+import { StepsFormValues } from '../hooks/useCreateFormContext';
+import { ControlType, OperatorType, StepData } from '../types/form';
+export declare const getNextStep: (step: StepData, steps: StepData[], form: UseFormReturnType<StepsFormValues>) => {
+    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;
+        otherOption?: 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;
+        otherOption?: 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;
+    position?: {
+        x: number;
+        y: number;
+    } | undefined;
+    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;
+            blur?: number | undefined;
+            shadowSize?: number | undefined;
+            shadowColor?: string | 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;
+    isStart?: boolean | undefined;
+    isEnd?: boolean | undefined;
+    autoSubmit?: boolean | undefined;
+    confirmLabel?: string | undefined;
+    conditions?: {
+        operator: string;
+        trigger: string;
+        controlId: string;
+        compareValue?: string | undefined;
+    }[] | undefined;
+};
+export declare const operatorsRelation: Record<ControlType, OperatorType[]>;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { ControlType } from '../types/form';
+export declare const controlsDataMap: Record<ControlType, {
+    icon: ReactNode;
+    color: string;
+}>;

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

@@ -0,0 +1,11 @@
+/**
+ * Утилита для безопасного скопинга пользовательского CSS
+ */
+/**
+ * Добавляет префикс контейнера к CSS селекторам для изоляции стилей
+ *
+ * @param css - Пользовательский CSS
+ * @param containerId - ID контейнера для скопинга (например, "#forms-provider-abc123")
+ * @returns Scoped CSS с префиксами
+ */
+export declare const scopeCustomCss: (css: string, containerId: string) => string;

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

@@ -0,0 +1,283 @@
+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;
+        otherOption?: 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;
+        otherOption?: 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;
+    position?: {
+        x: number;
+        y: number;
+    } | undefined;
+    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;
+            blur?: number | undefined;
+            shadowSize?: number | undefined;
+            shadowColor?: string | 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;
+    isStart?: boolean | undefined;
+    isEnd?: boolean | undefined;
+    autoSubmit?: boolean | undefined;
+    confirmLabel?: string | 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;