@kgalexander/mcreate 0.0.7 → 0.0.8

package/dist/index.d.ts

@@ -1,15 +1,294 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type PageElement = {
+    id?: string;
+    type: 'page';
+    tagName: 'mj-body';
+    data: {
+        value: {
+            breakpoint?: string;
+            headAttributes?: string;
+            fontSize?: string;
+            fontWeight?: string;
+            lineHeight?: string;
+            'font-size'?: string;
+            'font-weight'?: string;
+            'line-height'?: string;
+            headStyles?: string[];
+            fonts?: {
+                name?: string;
+                href?: string;
+            }[];
+            responsive?: boolean;
+            fontFamily?: string;
+            'font-family'?: string;
+            textColor?: string;
+            'text-color'?: string;
+            showCompanyFooter?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (SectionElement | SectionColumnElement | SectionPropertyKmElement | SectionPropertySingleTwoElement | SectionPropertyTripleElement)[];
+};
+type SectionElement = {
+    type: 'section';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            columnRows?: number;
+            columnWidths?: string[];
+            noWrap?: boolean;
+            isCompanyFooter?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (ColumnElement)[];
+};
+type SectionColumnElement = {
+    type: 'section-column';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            columnRows?: number;
+            columnWidths?: string[];
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (ColumnElement)[];
+};
+type SectionPropertyKmElement = {
+    type: 'section-property-km';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: [ColumnElement];
+};
+type SectionPropertySingleTwoElement = {
+    type: 'section-property-single-two';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: [ColumnElement];
+};
+type ColumnElement = {
+    type: 'column';
+    tagName: 'mj-column';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (TextElement | ButtonElement | SpaceElement | DividerElement | ImageElement | SocialElement | PropertyCardElement | PropertyCardSingleTwoElement | PropertyCardTripleElement)[];
+};
+type TextElement = {
+    type: 'text';
+    tagName: 'mj-text';
+    data: {
+        value: {
+            content: string;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type ButtonElement = {
+    type: 'button';
+    tagName: 'mj-button';
+    data: {
+        value: {
+            content: string;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardElement = {
+    type: 'property-card';
+    tagName: 'mj-colproperty';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardSingleTwoElement = {
+    type: 'property-card-single-two';
+    tagName: 'mj-propertysingletwo';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardTripleItemElement = {
+    type: 'property-card-triple-item';
+    tagName: 'mj-propertytripleitem';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type PropertyCardTripleElement = {
+    type: 'property-card-triple';
+    tagName: 'mj-propertytriple';
+    data: {
+        value: {
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: PropertyCardTripleItemElement[];
+};
+type SectionPropertyTripleElement = {
+    type: 'section-property-triple';
+    tagName: 'mj-section';
+    data: {
+        value: {
+            noWrap?: boolean;
+            [key: string]: any;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: [ColumnElement];
+};
+type SpaceElement = {
+    type: 'space';
+    tagName: 'mj-spacer';
+    attributes: {
+        [key: string]: string;
+    };
+};
+type DividerElement = {
+    type: 'divider';
+    tagName: 'mj-divider';
+    attributes: {
+        [key: string]: string;
+    };
+};
+type ImageElement = {
+    type: 'image';
+    tagName: 'mj-image';
+    attributes: {
+        [key: string]: string;
+    };
+};
+type SocialStyle = 'Icon + Text' | 'Icon' | 'Text';
+type IconSize = 'Small' | 'Medium' | 'Large';
+type IconStyle = 'Regular' | 'Filled' | 'Outline';
+type IconColor = 'Colored' | 'Dark' | 'Light' | 'Gray';
+type SocialElement = {
+    type: 'social';
+    tagName: 'mj-social';
+    data: {
+        value: {
+            socialStyle: SocialStyle;
+            iconSize: IconSize;
+            iconStyle: IconStyle;
+            iconColor: IconColor;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+    children: (SocialItemElement)[];
+};
+type SocialItemElement = {
+    type: 'social-item';
+    tagName: 'mj-social-element';
+    data: {
+        value: {
+            content: string;
+            socialType: string;
+        };
+    };
+    attributes: {
+        [key: string]: string;
+    };
+};
+type TemplateJSON = {
+    id: string;
+    name: string;
+    version: string;
+    published: boolean;
+    creator: string;
+    content: PageElement[];
+};
+
+type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+
 interface EditorProps {
-    defaultContent?: string;
     setEditorLoading?: (loading: boolean) => void;
     editorLoading?: boolean;
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave }: {
     templateId: string;
-    initialTemplate: any;
+    initialTemplate: TemplateJSON;
+    onSave?: OnSaveCallback;
 }): react_jsx_runtime.JSX.Element;
 
-export { Editor, TemplatePage };
+/**
+ * JSON to MJML Converter
+ * Converts template JSON to MJML string for rendering
+ */
+
+type RenderMode = 'production' | 'editing';
+interface RenderOptions {
+    isPaid?: boolean;
+}
+/**
+ * Convert template JSON to MJML string
+ * @param template - Template JSON object
+ * @param mode - Render mode: 'production' for clean output, 'editing' for tracking classes
+ * @param options - Render options including isPaid for company footer visibility
+ * @returns MJML string
+ */
+declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
+
+export { Editor, type OnSaveCallback, type TemplateJSON, TemplatePage, json2mjml };