@delmaredigital/payload-puck 0.6.16 → 0.6.18

package/dist/components/email/EmailHeading/EmailHeading.editor.js

@@ -0,0 +1,50 @@
+import { EmailHeadingConfig } from './EmailHeading.server.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+export const EmailHeadingEditorConfig = {
+    ...EmailHeadingConfig,
+    fields: {
+        text: {
+            type: 'text',
+            label: 'Text'
+        },
+        level: {
+            type: 'radio',
+            label: 'Level',
+            options: [
+                {
+                    label: 'H1',
+                    value: 1
+                },
+                {
+                    label: 'H2',
+                    value: 2
+                },
+                {
+                    label: 'H3',
+                    value: 3
+                }
+            ]
+        },
+        color: createColorPickerField({
+            label: 'Color'
+        }),
+        alignment: {
+            type: 'radio',
+            label: 'Alignment',
+            options: [
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Center',
+                    value: 'center'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        }
+    }
+};

package/dist/components/email/EmailHeading/EmailHeading.server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailHeadingProps } from './EmailHeading.types.js';
+export declare const EmailHeadingConfig: ComponentConfig<EmailHeadingProps>;

package/dist/components/email/EmailHeading/EmailHeading.server.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+const HEADING_SIZES = {
+    1: '32px',
+    2: '24px',
+    3: '20px'
+};
+const defaultProps = {
+    text: 'Heading',
+    level: 1,
+    color: {
+        hex: '#333333'
+    },
+    alignment: 'left'
+};
+export const EmailHeadingConfig = {
+    label: 'Heading',
+    defaultProps,
+    render: ({ text, level, color, alignment })=>{
+        const textColor = colorValueToEmailCSS(color) ?? '#333333';
+        const fontSize = HEADING_SIZES[level] ?? '24px';
+        return /*#__PURE__*/ _jsx("p", {
+            style: {
+                margin: '0 0 16px 0',
+                padding: 0,
+                fontSize,
+                fontWeight: 'bold',
+                color: textColor,
+                textAlign: alignment,
+                lineHeight: '1.2'
+            },
+            children: text
+        });
+    }
+};

package/dist/components/email/EmailHeading/EmailHeading.types.d.ts

@@ -0,0 +1,7 @@
+import type { ColorValue } from '../../../fields/shared.js';
+export interface EmailHeadingProps {
+    text: string;
+    level: 1 | 2 | 3;
+    color: ColorValue | null;
+    alignment: 'left' | 'center' | 'right';
+}

package/dist/components/email/EmailHeading/EmailHeading.types.js

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

package/dist/components/email/EmailImage/EmailImage.editor.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailImageProps } from './EmailImage.types.js';
+export declare const EmailImageEditorConfig: ComponentConfig<EmailImageProps>;

package/dist/components/email/EmailImage/EmailImage.editor.js

@@ -0,0 +1,46 @@
+import { EmailImageConfig } from './EmailImage.server.js';
+import { createMediaField } from '../../../fields/MediaField.js';
+export const EmailImageEditorConfig = {
+    ...EmailImageConfig,
+    fields: {
+        image: createMediaField({
+            label: 'Image'
+        }),
+        alt: {
+            type: 'text',
+            label: 'Alt Text'
+        },
+        width: {
+            type: 'number',
+            label: 'Width (px)',
+            min: 50,
+            max: 900
+        },
+        height: {
+            type: 'number',
+            label: 'Height (px, optional)'
+        },
+        alignment: {
+            type: 'radio',
+            label: 'Alignment',
+            options: [
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Center',
+                    value: 'center'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        },
+        link: {
+            type: 'text',
+            label: 'Link URL'
+        }
+    }
+};

package/dist/components/email/EmailImage/EmailImage.server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailImageProps } from './EmailImage.types.js';
+export declare const EmailImageConfig: ComponentConfig<EmailImageProps>;

package/dist/components/email/EmailImage/EmailImage.server.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_ATTRS } from '../utils.js';
+const defaultProps = {
+    image: null,
+    alt: '',
+    width: 600,
+    height: null,
+    alignment: 'center',
+    link: ''
+};
+export const EmailImageConfig = {
+    label: 'Image',
+    defaultProps,
+    render: ({ image, alt, width, height, alignment, link })=>{
+        if (!image?.url) {
+            return /*#__PURE__*/ _jsx("table", {
+                ...TABLE_ATTRS,
+                style: {
+                    width: '100%',
+                    borderCollapse: 'collapse'
+                },
+                children: /*#__PURE__*/ _jsx("tbody", {
+                    children: /*#__PURE__*/ _jsx("tr", {
+                        children: /*#__PURE__*/ _jsx("td", {
+                            align: alignment,
+                            style: {
+                                padding: '20px',
+                                textAlign: alignment,
+                                color: '#999999',
+                                fontSize: '14px'
+                            },
+                            children: "No image selected"
+                        })
+                    })
+                })
+            });
+        }
+        const imgElement = /*#__PURE__*/ _jsx("img", {
+            src: image.url,
+            alt: alt || image.alt || '',
+            width: width,
+            height: height ?? undefined,
+            style: {
+                display: 'block',
+                width: `${width}px`,
+                maxWidth: '100%',
+                height: height ? `${height}px` : 'auto',
+                border: 0,
+                outline: 'none',
+                textDecoration: 'none'
+            }
+        });
+        const content = link ? /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+                display: 'block'
+            },
+            children: imgElement
+        }) : imgElement;
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: {
+                width: '100%',
+                borderCollapse: 'collapse'
+            },
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        align: alignment,
+                        style: {
+                            textAlign: alignment
+                        },
+                        children: content
+                    })
+                })
+            })
+        });
+    }
+};

package/dist/components/email/EmailImage/EmailImage.types.d.ts

@@ -0,0 +1,9 @@
+import type { MediaReference } from '../../../fields/MediaField.js';
+export interface EmailImageProps {
+    image: MediaReference | null;
+    alt: string;
+    width: number;
+    height: number | null;
+    alignment: 'left' | 'center' | 'right';
+    link: string;
+}

package/dist/components/email/EmailImage/EmailImage.types.js

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

package/dist/components/email/EmailSection/EmailSection.editor.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '@puckeditor/core';
+export declare const EmailSectionEditorConfig: ComponentConfig;

package/dist/components/email/EmailSection/EmailSection.editor.js

@@ -0,0 +1,21 @@
+import { EmailSectionConfig } from './EmailSection.server.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+import { createPaddingField } from '../../../fields/PaddingField.js';
+export const EmailSectionEditorConfig = {
+    ...EmailSectionConfig,
+    fields: {
+        ...EmailSectionConfig.fields,
+        backgroundColor: createColorPickerField({
+            label: 'Background Color'
+        }),
+        padding: createPaddingField({
+            label: 'Padding'
+        }),
+        maxWidth: {
+            type: 'number',
+            label: 'Max Width (px)',
+            min: 200,
+            max: 900
+        }
+    }
+};

package/dist/components/email/EmailSection/EmailSection.server.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '@puckeditor/core';
+export declare const EmailSectionConfig: ComponentConfig;

package/dist/components/email/EmailSection/EmailSection.server.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_ATTRS, centeredTableStyle } from '../utils.js';
+import { colorValueToEmailCSS, paddingValueToEmailCSS } from '../../../fields/shared.js';
+const defaultProps = {
+    content: [],
+    backgroundColor: null,
+    padding: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+        unit: 'px',
+        linked: true
+    },
+    maxWidth: 600
+};
+export const EmailSectionConfig = {
+    label: 'Section',
+    fields: {
+        content: {
+            type: 'slot'
+        }
+    },
+    defaultProps,
+    render: ({ content: Content, backgroundColor, padding, maxWidth })=>{
+        const bgColor = colorValueToEmailCSS(backgroundColor);
+        const paddingCSS = paddingValueToEmailCSS(padding);
+        const ContentSlot = Content;
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: centeredTableStyle(maxWidth),
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...bgColor ? {
+                                backgroundColor: bgColor
+                            } : {},
+                            ...paddingCSS ? {
+                                padding: paddingCSS
+                            } : {}
+                        },
+                        children: /*#__PURE__*/ _jsx(ContentSlot, {})
+                    })
+                })
+            })
+        });
+    }
+};

package/dist/components/email/EmailSection/EmailSection.types.d.ts

@@ -0,0 +1,7 @@
+import type { ColorValue, PaddingValue } from '../../../fields/shared.js';
+export interface EmailSectionProps {
+    content: unknown;
+    backgroundColor: ColorValue | null;
+    padding: PaddingValue | null;
+    maxWidth: number;
+}

package/dist/components/email/EmailSection/EmailSection.types.js

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

package/dist/components/email/EmailSocial/EmailSocial.editor.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailSocialProps } from './EmailSocial.types.js';
+export declare const EmailSocialEditorConfig: ComponentConfig<EmailSocialProps>;

package/dist/components/email/EmailSocial/EmailSocial.editor.js

@@ -0,0 +1,70 @@
+import { EmailSocialConfig } from './EmailSocial.server.js';
+export const EmailSocialEditorConfig = {
+    ...EmailSocialConfig,
+    fields: {
+        links: {
+            type: 'array',
+            label: 'Social Links',
+            arrayFields: {
+                platform: {
+                    type: 'select',
+                    label: 'Platform',
+                    options: [
+                        {
+                            label: 'Facebook',
+                            value: 'facebook'
+                        },
+                        {
+                            label: 'X (Twitter)',
+                            value: 'x'
+                        },
+                        {
+                            label: 'Instagram',
+                            value: 'instagram'
+                        },
+                        {
+                            label: 'LinkedIn',
+                            value: 'linkedin'
+                        },
+                        {
+                            label: 'YouTube',
+                            value: 'youtube'
+                        }
+                    ]
+                },
+                url: {
+                    type: 'text',
+                    label: 'URL'
+                }
+            },
+            defaultItemProps: {
+                platform: 'facebook',
+                url: '#'
+            }
+        },
+        iconSize: {
+            type: 'number',
+            label: 'Icon Size (px)',
+            min: 20,
+            max: 64
+        },
+        alignment: {
+            type: 'radio',
+            label: 'Alignment',
+            options: [
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Center',
+                    value: 'center'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        }
+    }
+};

package/dist/components/email/EmailSocial/EmailSocial.server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailSocialProps } from './EmailSocial.types.js';
+export declare const EmailSocialConfig: ComponentConfig<EmailSocialProps>;

package/dist/components/email/EmailSocial/EmailSocial.server.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_ATTRS } from '../utils.js';
+const PLATFORM_LABELS = {
+    facebook: 'Facebook',
+    x: 'X',
+    instagram: 'Instagram',
+    linkedin: 'LinkedIn',
+    youtube: 'YouTube'
+};
+const defaultProps = {
+    links: [
+        {
+            platform: 'facebook',
+            url: '#'
+        },
+        {
+            platform: 'x',
+            url: '#'
+        },
+        {
+            platform: 'instagram',
+            url: '#'
+        }
+    ],
+    iconSize: 32,
+    alignment: 'center'
+};
+export const EmailSocialConfig = {
+    label: 'Social Links',
+    defaultProps,
+    render: ({ links, iconSize, alignment })=>{
+        if (!links?.length) {
+            return /*#__PURE__*/ _jsx("table", {
+                ...TABLE_ATTRS,
+                style: {
+                    width: '100%',
+                    borderCollapse: 'collapse'
+                },
+                children: /*#__PURE__*/ _jsx("tbody", {
+                    children: /*#__PURE__*/ _jsx("tr", {
+                        children: /*#__PURE__*/ _jsx("td", {
+                            style: {
+                                padding: '10px 0'
+                            }
+                        })
+                    })
+                })
+            });
+        }
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: {
+                width: '100%',
+                borderCollapse: 'collapse'
+            },
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        align: alignment,
+                        style: {
+                            padding: '10px 0',
+                            textAlign: alignment
+                        },
+                        children: links.map((link, i)=>/*#__PURE__*/ _jsx("a", {
+                                href: link.url,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                style: {
+                                    display: 'inline-block',
+                                    width: `${iconSize}px`,
+                                    height: `${iconSize}px`,
+                                    lineHeight: `${iconSize}px`,
+                                    textAlign: 'center',
+                                    backgroundColor: '#cccccc',
+                                    color: '#ffffff',
+                                    borderRadius: '50%',
+                                    textDecoration: 'none',
+                                    fontSize: '12px',
+                                    fontWeight: 'bold',
+                                    margin: '0 4px'
+                                },
+                                children: PLATFORM_LABELS[link.platform]?.charAt(0) ?? '?'
+                            }, i))
+                    })
+                })
+            })
+        });
+    }
+};

package/dist/components/email/EmailSocial/EmailSocial.types.d.ts

@@ -0,0 +1,10 @@
+export type SocialPlatform = 'facebook' | 'x' | 'instagram' | 'linkedin' | 'youtube';
+export interface SocialLink {
+    platform: SocialPlatform;
+    url: string;
+}
+export interface EmailSocialProps {
+    links: SocialLink[];
+    iconSize: number;
+    alignment: 'left' | 'center' | 'right';
+}

package/dist/components/email/EmailSocial/EmailSocial.types.js

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

package/dist/components/email/EmailSpacer/EmailSpacer.editor.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailSpacerProps } from './EmailSpacer.types.js';
+export declare const EmailSpacerEditorConfig: ComponentConfig<EmailSpacerProps>;

package/dist/components/email/EmailSpacer/EmailSpacer.editor.js

@@ -0,0 +1,12 @@
+import { EmailSpacerConfig } from './EmailSpacer.server.js';
+export const EmailSpacerEditorConfig = {
+    ...EmailSpacerConfig,
+    fields: {
+        height: {
+            type: 'number',
+            label: 'Height (px)',
+            min: 1,
+            max: 200
+        }
+    }
+};

package/dist/components/email/EmailSpacer/EmailSpacer.server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailSpacerProps } from './EmailSpacer.types.js';
+export declare const EmailSpacerConfig: ComponentConfig<EmailSpacerProps>;

package/dist/components/email/EmailSpacer/EmailSpacer.server.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE } from '../utils.js';
+const defaultProps = {
+    height: 24
+};
+export const EmailSpacerConfig = {
+    label: 'Spacer',
+    defaultProps,
+    render: ({ height })=>/*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: FULL_WIDTH_TABLE_STYLE,
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            height: `${height}px`,
+                            fontSize: '1px',
+                            lineHeight: `${height}px`
+                        },
+                        children: " "
+                    })
+                })
+            })
+        })
+};

package/dist/components/email/EmailSpacer/EmailSpacer.types.d.ts

@@ -0,0 +1,3 @@
+export interface EmailSpacerProps {
+    height: number;
+}

package/dist/components/email/EmailSpacer/EmailSpacer.types.js

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

package/dist/components/email/EmailText/EmailText.editor.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailTextProps } from './EmailText.types.js';
+export declare const EmailTextEditorConfig: ComponentConfig<EmailTextProps>;