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

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

@@ -0,0 +1,275 @@
+export declare const useActiveStep: () => {
+    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;
+            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;
+} | null;

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

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { UseFormReturnType } from '@mantine/form';
+import { Direction } from '../types/form';
+type StepsContext = {
+    handleNext: () => void;
+    handlePrev: () => void;
+    anim: Direction;
+    form: UseFormReturnType<StepsFormValues>;
+    setValue: (controlId: string, value: any, trigger?: string) => void;
+};
+export declare const StepsContext: import('react').Context<StepsContext>;
+export declare const useSteps: () => StepsContext;
+export type StepsFormValues = Record<string, any> & {
+    submissionId: string;
+};
+type StepsContextProviderProps = {
+    onSubmit?: (values: StepsFormValues) => void;
+    onValuesChange?: (values: StepsFormValues) => void;
+};
+/** Используется для хранения данных, которые ввёл пользователь */
+export declare const FormContextProvider: ({ children, ...props }: PropsWithChildren<StepsContextProviderProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,145 @@
+export declare const useFormGlobalTheme: ({ innerId }: {
+    innerId: string;
+}) => {
+    customStyles: string;
+    mantineTheme: {
+        focusRing?: "auto" | "always" | "never" | undefined;
+        scale?: number | undefined;
+        fontSmoothing?: boolean | undefined;
+        white?: string | undefined;
+        black?: string | undefined;
+        colors?: {
+            [x: string & {}]: import('@mantine/core').MantineColorsTuple | undefined;
+            blue?: import('@mantine/core').MantineColorsTuple | undefined;
+            cyan?: import('@mantine/core').MantineColorsTuple | undefined;
+            gray?: import('@mantine/core').MantineColorsTuple | undefined;
+            green?: import('@mantine/core').MantineColorsTuple | undefined;
+            indigo?: import('@mantine/core').MantineColorsTuple | undefined;
+            lime?: import('@mantine/core').MantineColorsTuple | undefined;
+            orange?: import('@mantine/core').MantineColorsTuple | undefined;
+            pink?: import('@mantine/core').MantineColorsTuple | undefined;
+            red?: import('@mantine/core').MantineColorsTuple | undefined;
+            teal?: import('@mantine/core').MantineColorsTuple | undefined;
+            violet?: import('@mantine/core').MantineColorsTuple | undefined;
+            yellow?: import('@mantine/core').MantineColorsTuple | undefined;
+            dark?: import('@mantine/core').MantineColorsTuple | undefined;
+            grape?: import('@mantine/core').MantineColorsTuple | undefined;
+        } | undefined;
+        primaryShade?: import('@mantine/core').MantineColorShade | {
+            light?: import('@mantine/core').MantineColorShade | undefined;
+            dark?: import('@mantine/core').MantineColorShade | undefined;
+        } | undefined;
+        primaryColor?: string | undefined;
+        variantColorResolver?: import('@mantine/core').VariantColorsResolver | undefined;
+        autoContrast?: boolean | undefined;
+        luminanceThreshold?: number | undefined;
+        fontFamily?: string | undefined;
+        fontFamilyMonospace?: string | undefined;
+        headings?: {
+            fontFamily?: string | undefined;
+            fontWeight?: string | undefined;
+            textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
+            sizes?: {
+                h1?: {
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    lineHeight?: string | undefined;
+                } | undefined;
+                h2?: {
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    lineHeight?: string | undefined;
+                } | undefined;
+                h3?: {
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    lineHeight?: string | undefined;
+                } | undefined;
+                h4?: {
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    lineHeight?: string | undefined;
+                } | undefined;
+                h5?: {
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    lineHeight?: string | undefined;
+                } | undefined;
+                h6?: {
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    lineHeight?: string | undefined;
+                } | undefined;
+            } | undefined;
+        } | undefined;
+        radius?: {
+            [x: string & {}]: string | undefined;
+            sm?: string | undefined;
+            xs?: string | undefined;
+            md?: string | undefined;
+            lg?: string | undefined;
+            xl?: string | undefined;
+        } | undefined;
+        defaultRadius?: import('@mantine/core').MantineRadius | undefined;
+        spacing?: {
+            [x: string & {}]: string | undefined;
+            sm?: string | undefined;
+            xs?: string | undefined;
+            md?: string | undefined;
+            lg?: string | undefined;
+            xl?: string | undefined;
+        } | undefined;
+        fontSizes?: {
+            [x: string & {}]: string | undefined;
+            sm?: string | undefined;
+            xs?: string | undefined;
+            md?: string | undefined;
+            lg?: string | undefined;
+            xl?: string | undefined;
+        } | undefined;
+        lineHeights?: {
+            [x: string & {}]: string | undefined;
+            sm?: string | undefined;
+            xs?: string | undefined;
+            md?: string | undefined;
+            lg?: string | undefined;
+            xl?: string | undefined;
+        } | undefined;
+        breakpoints?: {
+            [x: string & {}]: string | undefined;
+            sm?: string | undefined;
+            xs?: string | undefined;
+            md?: string | undefined;
+            lg?: string | undefined;
+            xl?: string | undefined;
+        } | undefined;
+        shadows?: {
+            [x: string & {}]: string | undefined;
+            sm?: string | undefined;
+            xs?: string | undefined;
+            md?: string | undefined;
+            lg?: string | undefined;
+            xl?: string | undefined;
+        } | undefined;
+        respectReducedMotion?: boolean | undefined;
+        cursorType?: "default" | "pointer" | undefined;
+        defaultGradient?: {
+            from?: string | undefined;
+            to?: string | undefined;
+            deg?: number | undefined;
+        } | undefined;
+        activeClassName?: string | undefined;
+        focusClassName?: string | undefined;
+        components?: {
+            [x: string]: {
+                classNames?: any;
+                styles?: any;
+                vars?: any;
+                defaultProps?: any;
+            } | undefined;
+        } | undefined;
+        other?: {
+            [x: string]: any;
+        } | undefined;
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare const useFormMobile: () => {
+    ref: import('react').RefObject<any>;
+    isMobile: boolean;
+};

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

@@ -0,0 +1,2 @@
+export declare const useInterpolateText: (text?: string | null, disabled?: boolean) => string;
+export declare const useInterpolate: () => (text?: string | null) => string;

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

@@ -0,0 +1,8 @@
+export * from './FormViewer';
+export * from './types/form';
+export * from './types/schemes';
+export * from './store/formStore';
+export * from './store/formStoreApi';
+export * from './store/selectors';
+export * from './hooks';
+export * from './helpers';

package/dist/components/FormViewer/store/formStore.d.ts

@@ -0,0 +1,112 @@
+import { UploadFileData } from '../components/fields/UploadField/UploadField';
+import { ParsedFormConfig, SettingsData, StepData, ThemeData } from '../types/form';
+export type FormEditorTabType = 'steps' | 'add' | 'settings' | 'logic';
+export type FormViewLayout = 'all-slides' | 'one-slide';
+export type FormStoreState = {
+    steps: StepData[];
+    listStep: StepData;
+    activeStep: string | null;
+    settings: SettingsData;
+    theme: ThemeData;
+    isMobile?: boolean;
+    editing?: boolean;
+    preview?: boolean;
+    initialConfigSnapshot: ParsedFormConfig | null;
+    addEndStep?: () => StepData;
+    onConfigChange?: (config: ParsedFormConfig) => void;
+    uploadFileFn?: (file: UploadFileData) => Promise<string>;
+    layout?: FormViewLayout;
+};
+export declare const emptySettings: SettingsData;
+export declare const createFormStore: (props?: {
+    initialState?: Partial<FormStoreState>;
+}) => {
+    useStore: import('zustand').UseBoundStore<import('zustand').StoreApi<FormStoreState>>;
+    api: {
+        applyTheme: (theme: ThemeData) => void;
+        setLayout: (layout: FormViewLayout) => void;
+        patchSettingsData: (v: Partial<SettingsData>) => void;
+        patchThemeData: (v: Partial<ThemeData>) => void;
+        patchContainerTheme: (v: Partial<import('../types/form').ContainerProperties>) => void;
+        patchTitleProperties: (v: Partial<import('../types/form').TextProperties>) => void;
+        patchDescriptionProperties: (v: Partial<import('../types/form').TextProperties>) => void;
+        patchCommonFontProperties: (v: Partial<import('../types/form').TextProperties>) => void;
+        setActiveStep: (v: string | null) => void;
+        setSteps: (steps: StepData[]) => void;
+        addStep: (step: StepData, index?: number) => void;
+        removeStep: (stepId: string) => void;
+        updateStep: (stepId: string, updatedStep: Partial<StepData>) => void;
+        updateControl: <CONTROL extends import('../types/form').Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
+        reorderSteps: (fromId: string, toId: string) => void;
+        reorderControls: (stepId: string, activeId: string, overId: string) => void;
+        addControl: (stepId: string, newControl: import('../types/form').Control) => void;
+        removeControl: (stepId: string, controlId: string) => void;
+        addCondition: (stepId: string, newCondition: import('../types/form').Condition) => void;
+        updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<import('../types/form').Condition>) => void;
+        removeCondition: (stepId: string, conditionIndex: number) => void;
+        setIsMobile: (isMobile: boolean) => void;
+        setFormConfig: (config: ParsedFormConfig | null, { silent }?: {
+            silent?: boolean;
+        }) => void;
+        isFormDirty: () => boolean;
+        switchToNextStep: () => void;
+        switchToPrevStep: () => void;
+        setActiveStepId: (stepId: string | null) => void;
+        setFormLayout: (layout: import('../types/form').FormLayout) => void;
+        scrollToControl: (controlId: string) => void;
+    };
+};
+/** Необходимо оборачивать FormViewer в провайдер, иначе будет использоваться `globalFormStore` */
+export declare const FormStoreProvider: ({ children, editing, preview, store, addEndStep, onConfigChange, uploadFileFn, layout, }: {
+    children: React.ReactNode;
+    /** Режим для редактирования */
+    editing?: boolean;
+    /** Режим для предпросмотра */
+    preview?: boolean;
+    onConfigChange?: (config: ParsedFormConfig) => void;
+    /** Можно создать и передать стор снаружи, в ином случае стор создается внутри провайдера */
+    store?: ReturnType<typeof createFormStore>;
+    /** Добавит конечный шаг, если его нету */
+    addEndStep?: () => StepData;
+    /** Как отображать форму */
+    layout?: FormViewLayout;
+    /** Функция для загрузки файлов пользователем */
+    uploadFileFn?: (file: UploadFileData) => Promise<any>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Возвращает ближайший стор для формы, если таких нет - вернёт слобальный стор */
+export declare const useFormViewerStore: () => {
+    useStore: import('zustand').UseBoundStore<import('zustand').StoreApi<FormStoreState>>;
+    api: {
+        applyTheme: (theme: ThemeData) => void;
+        setLayout: (layout: FormViewLayout) => void;
+        patchSettingsData: (v: Partial<SettingsData>) => void;
+        patchThemeData: (v: Partial<ThemeData>) => void;
+        patchContainerTheme: (v: Partial<import('../types/form').ContainerProperties>) => void;
+        patchTitleProperties: (v: Partial<import('../types/form').TextProperties>) => void;
+        patchDescriptionProperties: (v: Partial<import('../types/form').TextProperties>) => void;
+        patchCommonFontProperties: (v: Partial<import('../types/form').TextProperties>) => void;
+        setActiveStep: (v: string | null) => void;
+        setSteps: (steps: StepData[]) => void;
+        addStep: (step: StepData, index?: number) => void;
+        removeStep: (stepId: string) => void;
+        updateStep: (stepId: string, updatedStep: Partial<StepData>) => void;
+        updateControl: <CONTROL extends import('../types/form').Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
+        reorderSteps: (fromId: string, toId: string) => void;
+        reorderControls: (stepId: string, activeId: string, overId: string) => void;
+        addControl: (stepId: string, newControl: import('../types/form').Control) => void;
+        removeControl: (stepId: string, controlId: string) => void;
+        addCondition: (stepId: string, newCondition: import('../types/form').Condition) => void;
+        updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<import('../types/form').Condition>) => void;
+        removeCondition: (stepId: string, conditionIndex: number) => void;
+        setIsMobile: (isMobile: boolean) => void;
+        setFormConfig: (config: ParsedFormConfig | null, { silent }?: {
+            silent?: boolean;
+        }) => void;
+        isFormDirty: () => boolean;
+        switchToNextStep: () => void;
+        switchToPrevStep: () => void;
+        setActiveStepId: (stepId: string | null) => void;
+        setFormLayout: (layout: import('../types/form').FormLayout) => void;
+        scrollToControl: (controlId: string) => void;
+    };
+};

package/dist/components/FormViewer/store/formStoreApi.d.ts

@@ -0,0 +1,36 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { Condition, ContainerProperties, Control, FormLayout, ParsedFormConfig, SettingsData, StepData, TextProperties, ThemeData } from '../types/form';
+import { FormStoreState, FormViewLayout } from './formStore';
+export declare const createFormStoreApi: (store: UseBoundStore<StoreApi<FormStoreState>>) => {
+    applyTheme: (theme: ThemeData) => void;
+    setLayout: (layout: FormViewLayout) => void;
+    patchSettingsData: (v: Partial<SettingsData>) => void;
+    patchThemeData: (v: Partial<ThemeData>) => void;
+    patchContainerTheme: (v: Partial<ContainerProperties>) => void;
+    patchTitleProperties: (v: Partial<TextProperties>) => void;
+    patchDescriptionProperties: (v: Partial<TextProperties>) => void;
+    patchCommonFontProperties: (v: Partial<TextProperties>) => void;
+    setActiveStep: (v: string | null) => void;
+    setSteps: (steps: StepData[]) => void;
+    addStep: (step: StepData, index?: number) => void;
+    removeStep: (stepId: string) => void;
+    updateStep: (stepId: string, updatedStep: Partial<StepData>) => void;
+    updateControl: <CONTROL extends Control>(stepId: string, controlId: string, updatedControl: Partial<CONTROL>) => void;
+    reorderSteps: (fromId: string, toId: string) => void;
+    reorderControls: (stepId: string, activeId: string, overId: string) => void;
+    addControl: (stepId: string, newControl: Control) => void;
+    removeControl: (stepId: string, controlId: string) => void;
+    addCondition: (stepId: string, newCondition: Condition) => void;
+    updateCondition: (stepId: string, conditionIndex: number, updatedCondition: Partial<Condition>) => void;
+    removeCondition: (stepId: string, conditionIndex: number) => void;
+    setIsMobile: (isMobile: boolean) => void;
+    setFormConfig: (config: ParsedFormConfig | null, { silent }?: {
+        silent?: boolean;
+    }) => void;
+    isFormDirty: () => boolean;
+    switchToNextStep: () => void;
+    switchToPrevStep: () => void;
+    setActiveStepId: (stepId: string | null) => void;
+    setFormLayout: (layout: FormLayout) => void;
+    scrollToControl: (controlId: string) => void;
+};