@delmaredigital/payload-puck 0.6.16 → 0.6.18

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

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

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

@@ -0,0 +1,81 @@
+import { EmailButtonConfig } from './EmailButton.server.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+export const EmailButtonEditorConfig = {
+    ...EmailButtonConfig,
+    fields: {
+        text: {
+            type: 'text',
+            label: 'Button Text'
+        },
+        href: {
+            type: 'text',
+            label: 'Link URL'
+        },
+        backgroundColor: createColorPickerField({
+            label: 'Background Color'
+        }),
+        textColor: createColorPickerField({
+            label: 'Text Color'
+        }),
+        borderRadius: {
+            type: 'number',
+            label: 'Border Radius (px)',
+            min: 0,
+            max: 50
+        },
+        padding: {
+            type: 'select',
+            label: 'Padding',
+            options: [
+                {
+                    label: 'Small',
+                    value: '8px 16px'
+                },
+                {
+                    label: 'Medium',
+                    value: '12px 24px'
+                },
+                {
+                    label: 'Large',
+                    value: '16px 32px'
+                },
+                {
+                    label: 'Extra Large',
+                    value: '20px 40px'
+                }
+            ]
+        },
+        alignment: {
+            type: 'radio',
+            label: 'Alignment',
+            options: [
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Center',
+                    value: 'center'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        },
+        fullWidth: {
+            type: 'radio',
+            label: 'Full Width',
+            options: [
+                {
+                    label: 'No',
+                    value: false
+                },
+                {
+                    label: 'Yes',
+                    value: true
+                }
+            ]
+        }
+    }
+};

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

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

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_ATTRS } from '../utils.js';
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+const defaultProps = {
+    text: 'Click Here',
+    href: '#',
+    backgroundColor: {
+        hex: '#007bff'
+    },
+    textColor: {
+        hex: '#ffffff'
+    },
+    borderRadius: 4,
+    padding: '12px 24px',
+    alignment: 'center',
+    fullWidth: false
+};
+export const EmailButtonConfig = {
+    label: 'Button',
+    defaultProps,
+    render: ({ text, href, backgroundColor, textColor, borderRadius, padding, alignment, fullWidth })=>{
+        const bgColor = colorValueToEmailCSS(backgroundColor) ?? '#007bff';
+        const txtColor = colorValueToEmailCSS(textColor) ?? '#ffffff';
+        const tableStyle = fullWidth ? {
+            width: '100%',
+            borderCollapse: 'collapse'
+        } : {
+            borderCollapse: 'collapse'
+        };
+        const alignAttr = fullWidth ? undefined : alignment;
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: tableStyle,
+            align: alignAttr,
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        align: "center",
+                        style: {
+                            backgroundColor: bgColor,
+                            borderRadius: `${borderRadius}px`,
+                            padding: 0
+                        },
+                        children: /*#__PURE__*/ _jsx("a", {
+                            href: href,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            style: {
+                                display: 'inline-block',
+                                width: fullWidth ? '100%' : undefined,
+                                backgroundColor: bgColor,
+                                color: txtColor,
+                                fontWeight: 'bold',
+                                fontSize: '16px',
+                                textDecoration: 'none',
+                                textAlign: 'center',
+                                padding,
+                                borderRadius: `${borderRadius}px`,
+                                border: `1px solid ${bgColor}`,
+                                boxSizing: 'border-box'
+                            },
+                            children: text
+                        })
+                    })
+                })
+            })
+        });
+    }
+};

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

@@ -0,0 +1,11 @@
+import type { ColorValue } from '../../../fields/shared.js';
+export interface EmailButtonProps {
+    text: string;
+    href: string;
+    backgroundColor: ColorValue | null;
+    textColor: ColorValue | null;
+    borderRadius: number;
+    padding: string;
+    alignment: 'left' | 'center' | 'right';
+    fullWidth: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,45 @@
+import { EmailColumnsConfig } from './EmailColumns.server.js';
+export const EmailColumnsEditorConfig = {
+    ...EmailColumnsConfig,
+    fields: {
+        ...EmailColumnsConfig.fields,
+        columnCount: {
+            type: 'radio',
+            label: 'Columns',
+            options: [
+                {
+                    label: '2',
+                    value: 2
+                },
+                {
+                    label: '3',
+                    value: 3
+                }
+            ]
+        },
+        gap: {
+            type: 'number',
+            label: 'Gap (px)',
+            min: 0,
+            max: 48
+        },
+        verticalAlign: {
+            type: 'radio',
+            label: 'Vertical Align',
+            options: [
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Middle',
+                    value: 'middle'
+                },
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                }
+            ]
+        }
+    }
+};

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

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

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE } from '../utils.js';
+const defaultProps = {
+    columnCount: 2,
+    column1: [],
+    column2: [],
+    column3: [],
+    gap: 16,
+    verticalAlign: 'top'
+};
+export const EmailColumnsConfig = {
+    label: 'Columns',
+    fields: {
+        column1: {
+            type: 'slot'
+        },
+        column2: {
+            type: 'slot'
+        },
+        column3: {
+            type: 'slot'
+        }
+    },
+    defaultProps,
+    render: ({ columnCount, column1: Col1, column2: Col2, column3: Col3, gap, verticalAlign })=>{
+        const ColSlot1 = Col1;
+        const ColSlot2 = Col2;
+        const ColSlot3 = Col3;
+        const halfGap = Math.floor(gap / 2);
+        const colStyle = {
+            verticalAlign,
+            paddingLeft: `${halfGap}px`,
+            paddingRight: `${halfGap}px`
+        };
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: FULL_WIDTH_TABLE_STYLE,
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsxs("tr", {
+                    children: [
+                        /*#__PURE__*/ _jsx("td", {
+                            style: colStyle,
+                            children: /*#__PURE__*/ _jsx(ColSlot1, {})
+                        }),
+                        /*#__PURE__*/ _jsx("td", {
+                            style: colStyle,
+                            children: /*#__PURE__*/ _jsx(ColSlot2, {})
+                        }),
+                        columnCount === 3 && /*#__PURE__*/ _jsx("td", {
+                            style: colStyle,
+                            children: /*#__PURE__*/ _jsx(ColSlot3, {})
+                        })
+                    ]
+                })
+            })
+        });
+    }
+};

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

@@ -0,0 +1,8 @@
+export interface EmailColumnsProps {
+    columnCount: 2 | 3;
+    column1: unknown;
+    column2: unknown;
+    column3: unknown;
+    gap: number;
+    verticalAlign: 'top' | 'middle' | 'bottom';
+}

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { EmailDividerConfig } from './EmailDivider.server.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+export const EmailDividerEditorConfig = {
+    ...EmailDividerConfig,
+    fields: {
+        color: createColorPickerField({
+            label: 'Color'
+        }),
+        thickness: {
+            type: 'number',
+            label: 'Thickness (px)',
+            min: 1,
+            max: 10
+        },
+        width: {
+            type: 'select',
+            label: 'Width',
+            options: [
+                {
+                    label: '100%',
+                    value: '100%'
+                },
+                {
+                    label: '80%',
+                    value: '80%'
+                },
+                {
+                    label: '60%',
+                    value: '60%'
+                },
+                {
+                    label: '40%',
+                    value: '40%'
+                }
+            ]
+        }
+    }
+};

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

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

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TABLE_ATTRS } from '../utils.js';
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+const defaultProps = {
+    color: {
+        hex: '#dddddd'
+    },
+    thickness: 1,
+    width: '100%'
+};
+export const EmailDividerConfig = {
+    label: 'Divider',
+    defaultProps,
+    render: ({ color, thickness, width })=>{
+        const borderColor = colorValueToEmailCSS(color) ?? '#dddddd';
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: {
+                width,
+                margin: '0 auto',
+                borderCollapse: 'collapse'
+            },
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            borderTop: `${thickness}px solid ${borderColor}`,
+                            fontSize: '1px',
+                            lineHeight: '1px',
+                            height: '1px'
+                        },
+                        children: " "
+                    })
+                })
+            })
+        });
+    }
+};

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

@@ -0,0 +1,6 @@
+import type { ColorValue } from '../../../fields/shared.js';
+export interface EmailDividerProps {
+    color: ColorValue | null;
+    thickness: number;
+    width: string;
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { EmailFooterConfig } from './EmailFooter.server.js';
+export const EmailFooterEditorConfig = {
+    ...EmailFooterConfig,
+    fields: {
+        companyName: {
+            type: 'text',
+            label: 'Company Name'
+        },
+        address: {
+            type: 'textarea',
+            label: 'Address'
+        },
+        unsubscribeText: {
+            type: 'text',
+            label: 'Unsubscribe Text'
+        },
+        unsubscribeUrl: {
+            type: 'text',
+            label: 'Unsubscribe URL'
+        }
+    }
+};

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

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

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE } from '../utils.js';
+const mutedStyle = {
+    fontSize: '12px',
+    lineHeight: '1.5',
+    color: '#999999',
+    margin: '0 0 4px 0'
+};
+const defaultProps = {
+    companyName: 'Company Name',
+    address: '123 Main St, City, State 12345',
+    unsubscribeText: 'Unsubscribe',
+    unsubscribeUrl: '#'
+};
+export const EmailFooterConfig = {
+    label: 'Footer',
+    defaultProps,
+    render: ({ companyName, address, unsubscribeText, unsubscribeUrl })=>/*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: FULL_WIDTH_TABLE_STYLE,
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsxs("td", {
+                        align: "center",
+                        style: {
+                            padding: '20px',
+                            textAlign: 'center',
+                            borderTop: '1px solid #eeeeee'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: mutedStyle,
+                                children: companyName
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: mutedStyle,
+                                children: address
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: {
+                                    ...mutedStyle,
+                                    marginTop: '8px'
+                                },
+                                children: /*#__PURE__*/ _jsx("a", {
+                                    href: unsubscribeUrl,
+                                    style: {
+                                        color: '#999999',
+                                        textDecoration: 'underline',
+                                        fontSize: '12px'
+                                    },
+                                    children: unsubscribeText
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        })
+};

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

@@ -0,0 +1,6 @@
+export interface EmailFooterProps {
+    companyName: string;
+    address: string;
+    unsubscribeText: string;
+    unsubscribeUrl: string;
+}

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { EmailHeaderConfig } from './EmailHeader.server.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+export const EmailHeaderEditorConfig = {
+    ...EmailHeaderConfig,
+    fields: {
+        logoSrc: {
+            type: 'text',
+            label: 'Logo URL'
+        },
+        logoAlt: {
+            type: 'text',
+            label: 'Logo Alt Text'
+        },
+        logoWidth: {
+            type: 'number',
+            label: 'Logo Width (px)',
+            min: 30,
+            max: 400
+        },
+        title: {
+            type: 'text',
+            label: 'Title (optional)'
+        },
+        backgroundColor: createColorPickerField({
+            label: 'Background Color'
+        })
+    }
+};

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

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

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE } from '../utils.js';
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+const defaultProps = {
+    logoSrc: '',
+    logoAlt: 'Logo',
+    logoWidth: 150,
+    title: '',
+    backgroundColor: {
+        hex: '#ffffff'
+    }
+};
+export const EmailHeaderConfig = {
+    label: 'Header',
+    defaultProps,
+    render: ({ logoSrc, logoAlt, logoWidth, title, backgroundColor })=>{
+        const bgColor = colorValueToEmailCSS(backgroundColor) ?? '#ffffff';
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: FULL_WIDTH_TABLE_STYLE,
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsxs("td", {
+                        align: "center",
+                        style: {
+                            backgroundColor: bgColor,
+                            padding: '20px',
+                            textAlign: 'center'
+                        },
+                        children: [
+                            logoSrc && /*#__PURE__*/ _jsx("img", {
+                                src: logoSrc,
+                                alt: logoAlt,
+                                width: logoWidth,
+                                style: {
+                                    display: 'block',
+                                    margin: '0 auto',
+                                    width: `${logoWidth}px`,
+                                    maxWidth: '100%',
+                                    height: 'auto',
+                                    border: 0
+                                }
+                            }),
+                            title && /*#__PURE__*/ _jsx("p", {
+                                style: {
+                                    margin: logoSrc ? '12px 0 0 0' : '0',
+                                    fontSize: '24px',
+                                    fontWeight: 'bold',
+                                    color: '#333333',
+                                    lineHeight: '1.2'
+                                },
+                                children: title
+                            })
+                        ]
+                    })
+                })
+            })
+        });
+    }
+};

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

@@ -0,0 +1,8 @@
+import type { ColorValue } from '../../../fields/shared.js';
+export interface EmailHeaderProps {
+    logoSrc: string;
+    logoAlt: string;
+    logoWidth: number;
+    title: string;
+    backgroundColor: ColorValue | null;
+}

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

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

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

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