@cntrl-site/components 0.0.1

package/dist/sdk/Client/Client.d.ts

@@ -0,0 +1,32 @@
+import { Meta } from '../types/project/Meta';
+import { Project } from '../types/project/Project';
+import { Layout } from '../types/project/Layout';
+import { Article } from '../types/article/Article';
+import { KeyframeAny } from '../types/keyframe/Keyframe';
+export declare class Client {
+    private fetchImpl;
+    private url;
+    constructor(APIUrl: string, fetchImpl?: FetchImpl);
+    private static getPageMeta;
+    getPageData(pageSlug: string, buildMode?: 'default' | 'self-hosted'): Promise<CntrlPageData>;
+    getProjectPagesPaths(): Promise<string[]>;
+    getLayouts(): Promise<Layout[]>;
+    private fetchProject;
+    private fetchArticle;
+    private findArticleIdByPageSlug;
+}
+interface FetchImplResponse {
+    ok: boolean;
+    json(): Promise<any>;
+    statusText: string;
+}
+type FetchImpl = (url: string, init?: RequestInit) => Promise<FetchImplResponse>;
+interface ArticleData {
+    article: Article;
+    keyframes: KeyframeAny[];
+}
+interface CntrlPageData extends ArticleData {
+    project: Project;
+    meta: Meta;
+}
+export {};

package/dist/sdk/Client/Client.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sdk/Client/__mock__/articleMock.d.ts

@@ -0,0 +1,2 @@
+import { Article } from '../../types/article/Article';
+export declare const articleMock: Article;

package/dist/sdk/Client/__mock__/keyframesMock.d.ts

@@ -0,0 +1,2 @@
+import { KeyframeAny } from '../../types/keyframe/Keyframe';
+export declare const keyframesMock: KeyframeAny[];

package/dist/sdk/Client/__mock__/projectMock.d.ts

@@ -0,0 +1,2 @@
+import { Project } from '../../types/project/Project';
+export declare const projectMock: Project;

package/dist/sdk/Components/ControlSlider/ControlSlider.d.ts

@@ -0,0 +1,90 @@
+interface SliderProps {
+    settings: SliderSettings;
+    content: SliderItem[];
+    styles: SliderStyles;
+    isEditor?: boolean;
+}
+export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
+type SliderItem = {
+    image: {
+        url: string;
+        name?: string;
+        objectFit?: 'cover' | 'contain';
+    };
+    imageCaption: any[];
+};
+type Offset = {
+    x: number;
+    y: number;
+};
+type SliderControls = {
+    arrowsImgUrl: string | null;
+    isActive: boolean;
+    color: string;
+    hover: string;
+    offset: Offset;
+    scale: number;
+};
+type SliderPagination = {
+    position: 'outside-1' | 'outside-2' | 'inside-1' | 'inside-2';
+    isActive: boolean;
+    scale: number;
+    offset: Offset;
+    colors: string[];
+    hover: string;
+};
+type Alignment = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type SliderCaption = {
+    alignment: Alignment;
+    isActive: boolean;
+    color: string;
+    offset: Offset;
+    hover: string;
+};
+type Triggers = {
+    triggersList: {
+        click: boolean;
+        drag: boolean;
+    };
+    autoPlay: string | null;
+};
+type SliderSettings = {
+    controls: SliderControls;
+    pagination: SliderPagination;
+    direction: 'horiz' | 'vert';
+    transition: {
+        type: 'slide' | 'fade in';
+        duration: string;
+        backgroundColor: string | null;
+    };
+    caption: SliderCaption;
+    triggers: Triggers;
+};
+type CaptionStyles = {
+    fontSettings: {
+        fontFamily: string;
+        fontWeight: number;
+        fontStyle: string;
+    };
+    widthSettings: {
+        width: number;
+        sizing: 'auto' | 'manual';
+    };
+    letterSpacing: number;
+    textAlign: 'left' | 'center' | 'right';
+    wordSpacing: number;
+    fontSizeLineHeight: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    textAppearance: {
+        textTransform: 'none' | 'uppercase' | 'lowercase';
+        textDecoration: 'none' | 'underline';
+        fontVariant: 'normal' | 'small-caps';
+    };
+    color: string;
+};
+type SliderStyles = {
+    caption: CaptionStyles;
+};
+export {};

package/dist/sdk/Components/ControlSlider/ControlSliderComponent.d.ts

@@ -0,0 +1,519 @@
+import { ControlSlider } from './ControlSlider';
+export declare const ControlSliderComponent: {
+    element: typeof ControlSlider;
+    id: string;
+    name: string;
+    preview: {
+        type: "video";
+        url: string;
+    };
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    schema: {
+        type: string;
+        properties: {
+            settings: {
+                layoutBased: boolean;
+                type: string;
+                properties: {
+                    triggers: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            triggersList: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    click: {
+                                        type: string;
+                                    };
+                                    drag: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            autoPlay: {
+                                type: string[];
+                                label: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: (string | null)[];
+                            };
+                        };
+                    };
+                    direction: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        display: {
+                            type: string;
+                        };
+                        enum: string[];
+                    };
+                    transition: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            type: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                            backgroundColor: {
+                                type: string[];
+                                name: string;
+                                display: {
+                                    visible: boolean;
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                            duration: {
+                                type: string;
+                                label: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                        };
+                    };
+                    controls: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            isActive: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            arrowsImgUrl: {
+                                type: string[];
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            offset: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    x: {
+                                        type: string;
+                                    };
+                                    y: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            scale: {
+                                type: string;
+                                name: string;
+                                min: number;
+                                max: number;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            color: {
+                                name: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                            hover: {
+                                name: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                        };
+                    };
+                    pagination: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            isActive: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            position: {
+                                name: string;
+                                display: {
+                                    type: string;
+                                    direction: string;
+                                };
+                                type: string;
+                                enum: string[];
+                            };
+                            offset: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    x: {
+                                        type: string;
+                                    };
+                                    y: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            scale: {
+                                type: string;
+                                name: string;
+                                min: number;
+                                max: number;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            colors: {
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                                name: string;
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                            hover: {
+                                name: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                        };
+                    };
+                    caption: {
+                        name: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            isActive: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            alignment: {
+                                name: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                            offset: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    x: {
+                                        type: string;
+                                    };
+                                    y: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            hover: {
+                                name: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                        };
+                    };
+                };
+                default: {
+                    triggers: {
+                        triggersList: {
+                            click: boolean;
+                            drag: boolean;
+                        };
+                        autoPlay: null;
+                    };
+                    controls: {
+                        isActive: boolean;
+                        arrowsImgUrl: null;
+                        offset: {
+                            x: number;
+                            y: number;
+                        };
+                        scale: number;
+                        color: string;
+                        hover: string;
+                    };
+                    transition: {
+                        type: string;
+                        duration: string;
+                        backgroundColor: null;
+                    };
+                    pagination: {
+                        isActive: boolean;
+                        scale: number;
+                        position: string;
+                        offset: {
+                            x: number;
+                            y: number;
+                        };
+                        colors: string[];
+                        hover: string;
+                    };
+                    direction: string;
+                    caption: {
+                        offset: {
+                            x: number;
+                            y: number;
+                        };
+                        isActive: boolean;
+                        alignment: string;
+                        hover: string;
+                    };
+                };
+                displayRules: ({
+                    if: {
+                        name: string;
+                        value: string;
+                    };
+                    then: {
+                        name: string;
+                        value: string;
+                    };
+                } | {
+                    if: {
+                        name: string;
+                        value: string;
+                    };
+                    then: {
+                        name: string;
+                        value: boolean;
+                    };
+                })[];
+            };
+            content: {
+                layoutBased: boolean;
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        image: {
+                            type: string;
+                            display: {
+                                type: string;
+                            };
+                            properties: {
+                                url: {
+                                    type: string;
+                                };
+                                name: {
+                                    type: string;
+                                };
+                                objectFit: {
+                                    type: string;
+                                    enum: string[];
+                                };
+                            };
+                            required: string[];
+                        };
+                        imageCaption: {
+                            display: {
+                                type: string;
+                                placeholder: string;
+                            };
+                        };
+                        link: {
+                            type: string;
+                            display: {
+                                type: string;
+                                placeholder: string;
+                            };
+                            properties: {
+                                text: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    required: string[];
+                };
+                default: {
+                    image: {
+                        objectFit: string;
+                        url: string;
+                        name: string;
+                    };
+                    imageCaption: {
+                        type: string;
+                        children: {
+                            text: string;
+                        }[];
+                    }[];
+                }[];
+            };
+            styles: {
+                layoutBased: boolean;
+                type: string;
+                properties: {
+                    caption: {
+                        dataName: string;
+                        type: string;
+                        properties: {
+                            fontSettings: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    fontFamily: {
+                                        type: string;
+                                    };
+                                    fontWeight: {
+                                        type: string;
+                                    };
+                                    fontStyle: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            widthSettings: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                                properties: {
+                                    width: {
+                                        type: string;
+                                    };
+                                    sizing: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                };
+                            };
+                            fontSizeLineHeight: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    fontSize: {
+                                        type: string;
+                                    };
+                                    lineHeight: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            letterSpacing: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                            };
+                            wordSpacing: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                            };
+                            textAlign: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                                enum: string[];
+                            };
+                            textAppearance: {
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    textTransform: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                    textDecoration: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                    fontVariant: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                };
+                            };
+                            color: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                            };
+                        };
+                    };
+                };
+                default: {
+                    caption: {
+                        widthSettings: {
+                            width: number;
+                            sizing: string;
+                        };
+                        fontSettings: {
+                            fontFamily: string;
+                            fontWeight: number;
+                            fontStyle: string;
+                        };
+                        fontSizeLineHeight: {
+                            fontSize: number;
+                            lineHeight: number;
+                        };
+                        letterSpacing: number;
+                        wordSpacing: number;
+                        textAlign: string;
+                        textAppearance: {
+                            textTransform: string;
+                            textDecoration: string;
+                            fontVariant: string;
+                        };
+                        color: string;
+                    };
+                };
+            };
+        };
+        required: string[];
+    };
+};