@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/index.js

@@ -1,569 +1,68 @@
-'use strict';
-
-// src/layouts/defaults.ts
-var defaultLayout = {
-  value: "default",
-  label: "Default",
-  description: "Standard page layout with contained content width",
-  classes: {
-    wrapper: "",
-    container: "mx-auto px-4 sm:px-6 lg:px-8",
-    content: ""
-  },
-  maxWidth: "1200px",
-  fullWidth: false
-};
-var landingLayout = {
-  value: "landing",
-  label: "Landing",
-  description: "Full-width sections with no global container constraints",
-  classes: {
-    wrapper: "",
-    container: "",
-    content: ""
-  },
-  fullWidth: true
-};
-var fullWidthLayout = {
-  value: "full-width",
-  label: "Full Width",
-  description: "Content spans the full viewport width",
-  classes: {
-    wrapper: "w-full",
-    container: "w-full",
-    content: ""
-  },
-  maxWidth: "100%",
-  fullWidth: true
-};
-var DEFAULT_LAYOUTS = [
-  defaultLayout,
-  landingLayout,
-  fullWidthLayout
-];
-
-// src/layouts/utils.ts
-function layoutsToPayloadOptions(layouts) {
-  return layouts.map(({ value, label }) => ({
-    label,
-    value
-  }));
-}
-
-// src/plugin/fields/index.ts
-var puckDataField = {
-  name: "puckData",
-  type: "json",
-  admin: {
-    hidden: true,
-    description: "Puck editor data - managed via visual editor"
-  }
-};
-function createEditorVersionField(defaultValue = "puck", sidebar = true, legacyBlocksFieldName = "layout") {
-  return {
-    name: "editorVersion",
-    type: "select",
-    // NO defaultValue here - we use the hook to intelligently detect the value
-    // This prevents migrations from blindly setting 'puck' on legacy pages
-    options: [
-      { label: "Legacy (Payload Blocks)", value: "legacy" },
-      { label: "Puck Visual Editor", value: "puck" }
-    ],
-    admin: {
-      position: sidebar ? "sidebar" : void 0,
-      description: "Which editor was used to create this page"
-    },
-    hooks: {
-      beforeValidate: [
-        ({ value, data, operation }) => {
-          if (value) return value;
-          const legacyBlocks = data?.[legacyBlocksFieldName];
-          const hasLegacyBlocks = Array.isArray(legacyBlocks) && legacyBlocks.length > 0;
-          const puckData = data?.puckData;
-          const hasPuckData = puckData?.content && Array.isArray(puckData.content) && puckData.content.length > 0;
-          if (hasLegacyBlocks && !hasPuckData) {
-            return "legacy";
-          }
-          if (hasPuckData) {
-            return "puck";
-          }
-          return defaultValue;
-        }
-      ]
-    }
-  };
-}
-var editorVersionField = createEditorVersionField("puck", true);
-function createPageLayoutField(layouts = DEFAULT_LAYOUTS, sidebar = true) {
-  return {
-    name: "pageLayout",
-    type: "select",
-    required: true,
-    defaultValue: "default",
-    options: layoutsToPayloadOptions(layouts),
-    admin: {
-      position: sidebar ? "sidebar" : void 0,
-      description: "Overall page structure and layout style"
-    }
-  };
-}
-var pageLayoutField = createPageLayoutField();
-var isHomepageField = {
-  name: "isHomepage",
-  type: "checkbox",
-  defaultValue: false,
-  admin: {
-    position: "sidebar",
-    description: "Mark this page as the homepage"
-  }
-};
-var seoFieldGroup = {
-  name: "meta",
-  type: "group",
-  label: "SEO",
-  admin: {
-    position: "sidebar"
-  },
-  fields: [
-    {
-      name: "title",
-      type: "text",
-      label: "Meta Title",
-      admin: {
-        description: "Override the page title for search engines"
-      }
-    },
-    {
-      name: "description",
-      type: "textarea",
-      label: "Meta Description",
-      admin: {
-        description: "Description shown in search engine results"
-      }
-    },
-    {
-      name: "image",
-      type: "upload",
-      relationTo: "media",
-      label: "Open Graph Image",
-      admin: {
-        description: "Image shown when sharing on social media"
-      }
-    },
-    {
-      name: "noindex",
-      type: "checkbox",
-      label: "No Index",
-      defaultValue: false,
-      admin: {
-        description: "Prevent search engines from indexing this page"
-      }
-    },
-    {
-      name: "nofollow",
-      type: "checkbox",
-      label: "No Follow",
-      defaultValue: false,
-      admin: {
-        description: "Prevent search engines from following links on this page"
-      }
-    },
-    {
-      name: "excludeFromSitemap",
-      type: "checkbox",
-      label: "Exclude from Sitemap",
-      defaultValue: false,
-      admin: {
-        description: "Exclude this page from the XML sitemap"
-      }
-    }
-  ]
-};
-var DEFAULT_CONVERSION_TYPES = [
-  { label: "Lead", value: "lead" },
-  { label: "Registration", value: "registration" },
-  { label: "Purchase", value: "purchase" },
-  { label: "Donation", value: "donation" },
-  { label: "Newsletter Signup", value: "newsletter" },
-  { label: "Contact Form", value: "contact" },
-  { label: "Custom", value: "custom" }
-];
-function createConversionFieldGroup(conversionTypes = DEFAULT_CONVERSION_TYPES, sidebar = true) {
-  return {
-    name: "conversionTracking",
-    type: "group",
-    label: "Conversion Tracking",
-    admin: {
-      position: sidebar ? "sidebar" : void 0,
-      description: "Configure conversion tracking for analytics"
-    },
-    fields: [
-      {
-        name: "isConversionPage",
-        type: "checkbox",
-        label: "Is Conversion Page",
-        defaultValue: false,
-        admin: {
-          description: "Check this if this page represents a completed conversion (e.g., thank you page)"
-        }
-      },
-      {
-        name: "conversionType",
-        type: "select",
-        label: "Conversion Type",
-        options: conversionTypes,
-        admin: {
-          description: "Type of conversion this page represents",
-          condition: (data, siblingData) => siblingData?.isConversionPage === true
-        }
-      },
-      {
-        name: "conversionValue",
-        type: "number",
-        label: "Conversion Value",
-        defaultValue: 0,
-        admin: {
-          description: "Monetary value of this conversion (0 for non-monetary conversions)",
-          condition: (data, siblingData) => siblingData?.isConversionPage === true
-        }
-      }
-    ]
-  };
-}
-var conversionFieldGroup = createConversionFieldGroup();
-function getPuckFields(options = {}) {
-  const {
-    includeSEO = true,
-    includeConversion = false,
-    includeEditorVersion = true,
-    includePageLayout = true,
-    includeIsHomepage = false,
-    layouts = DEFAULT_LAYOUTS,
-    defaultEditorVersion = "puck",
-    legacyBlocksFieldName = "layout",
-    sidebarPosition = true,
-    conversionTypeOptions
-  } = options;
-  const fields = [];
-  fields.push(puckDataField);
-  if (includeEditorVersion) {
-    fields.push(createEditorVersionField(defaultEditorVersion, sidebarPosition, legacyBlocksFieldName));
-  }
-  if (includePageLayout) {
-    fields.push(createPageLayoutField(layouts, sidebarPosition));
-  }
-  if (includeIsHomepage) {
-    fields.push(isHomepageField);
-  }
-  if (includeSEO) {
-    fields.push(seoFieldGroup);
-  }
-  if (includeConversion) {
-    fields.push(createConversionFieldGroup(conversionTypeOptions, sidebarPosition));
-  }
-  return fields;
-}
-
-// src/plugin/collections/Pages.ts
-var defaultAccess = () => true;
-function generatePagesCollection(slug, options) {
-  const {
-    collectionOverrides = {},
-    access = {},
-    layouts = DEFAULT_LAYOUTS,
-    additionalFields = []
-  } = options;
-  const baseFields = [
-    // Core Fields (title and slug with duplication hooks - unique to collection generation)
-    {
-      name: "title",
-      type: "text",
-      required: true,
-      hooks: {
-        beforeDuplicate: [
-          ({ value }) => {
-            if (!value) return value;
-            const copyMatch = value.match(/^(.+) \(Copy(?: (\d+))?\)$/);
-            if (copyMatch) {
-              const baseName = copyMatch[1];
-              const copyNum = copyMatch[2] ? parseInt(copyMatch[2], 10) + 1 : 2;
-              return `${baseName} (Copy ${copyNum})`;
-            }
-            return `${value} (Copy)`;
-          }
-        ]
-      }
-    },
-    {
-      name: "slug",
-      type: "text",
-      required: true,
-      unique: true,
-      index: true,
-      admin: {
-        position: "sidebar",
-        description: "URL path for this page (auto-generated from title)"
-      },
-      hooks: {
-        beforeValidate: [
-          ({ data, value }) => {
-            if (data && !value && data.title) {
-              return data.title.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
-            }
-            return value;
-          }
-        ],
-        beforeDuplicate: [
-          ({ value }) => {
-            if (!value) return value;
-            const copyMatch = value.match(/^(.+)-copy(?:-(\d+))?$/);
-            if (copyMatch) {
-              const baseName = copyMatch[1];
-              const copyNum = copyMatch[2] ? parseInt(copyMatch[2], 10) + 1 : 2;
-              return `${baseName}-copy-${copyNum}`;
-            }
-            return `${value}-copy`;
-          }
-        ]
-      }
-    },
-    // Page Layout
-    createPageLayoutField(layouts, true),
-    // Editor Version
-    createEditorVersionField("puck", true),
-    // Homepage Flag
-    isHomepageField,
-    // Puck Data (hidden - managed via visual editor)
-    puckDataField,
-    // SEO Fields
-    seoFieldGroup,
-    // Conversion Tracking Fields
-    conversionFieldGroup,
-    // Additional fields from options
-    ...additionalFields
-  ];
-  return {
-    slug,
-    admin: {
-      useAsTitle: "title",
-      group: "Content",
-      defaultColumns: ["title", "slug", "_status", "updatedAt"],
-      ...collectionOverrides.admin ?? {}
-    },
-    access: {
-      read: access.read ?? defaultAccess,
-      create: access.create ?? defaultAccess,
-      update: access.update ?? defaultAccess,
-      delete: access.delete ?? defaultAccess,
-      ...collectionOverrides.access ?? {}
-    },
-    versions: typeof collectionOverrides.versions === "object" ? { drafts: true, ...collectionOverrides.versions } : { drafts: true },
-    fields: baseFields,
-    ...collectionOverrides,
-    // Ensure fields aren't overwritten by collectionOverrides
-    ...collectionOverrides.fields && {
-      fields: [...baseFields, ...collectionOverrides.fields]
-    }
-  };
-}
-
-// src/collections/Templates.ts
-var TemplatesCollection = {
-  slug: "puck-templates",
-  admin: {
-    useAsTitle: "name",
-    group: "Puck",
-    defaultColumns: ["name", "category", "updatedAt"],
-    description: "Reusable component templates for the visual editor"
-  },
-  access: {
-    read: () => true,
-    create: ({ req }) => !!req.user,
-    update: ({ req }) => !!req.user,
-    delete: ({ req }) => !!req.user
-  },
-  fields: [
-    {
-      name: "name",
-      type: "text",
-      required: true,
-      admin: {
-        description: "A descriptive name for this template"
-      }
-    },
-    {
-      name: "description",
-      type: "textarea",
-      admin: {
-        description: "Optional description of what this template contains"
-      }
-    },
-    {
-      name: "category",
-      type: "text",
-      admin: {
-        description: 'Category for organizing templates (e.g., "Hero", "Footer", "CTA")'
-      }
-    },
-    {
-      name: "content",
-      type: "json",
-      required: true,
-      admin: {
-        description: "Serialized Puck component data"
-      }
-    },
-    {
-      name: "thumbnail",
-      type: "text",
-      admin: {
-        description: "Optional thumbnail URL for template preview"
-      }
-    }
-  ],
-  timestamps: true
-};
-
-// src/plugin/index.ts
-function getExistingFieldNames(fields) {
-  const names = /* @__PURE__ */ new Set();
-  function addFieldNames(fieldsToCheck) {
-    for (const field of fieldsToCheck) {
-      if ("name" in field && field.name) {
-        names.add(field.name);
-      }
-      if ("fields" in field && Array.isArray(field.fields)) {
-        addFieldNames(field.fields);
-      }
-      if (field.type === "tabs" && "tabs" in field && Array.isArray(field.tabs)) {
-        for (const tab of field.tabs) {
-          if ("fields" in tab && Array.isArray(tab.fields)) {
-            addFieldNames(tab.fields);
-          }
-        }
-      }
-    }
-  }
-  addFieldNames(fields);
-  return names;
-}
-function filterExistingFields(fieldsToAdd, existingNames) {
-  return fieldsToAdd.filter((field) => {
-    if ("name" in field && field.name) {
-      return !existingNames.has(field.name);
-    }
-    return true;
-  });
-}
-function generatePuckEditField(collectionSlug, adminConfig = {}) {
-  const {
-    editorPathPattern = "/pages/{id}/edit",
-    buttonLabel = "Edit with Puck",
-    buttonPosition
-    // undefined = main area (default), 'sidebar' = sidebar
-  } = adminConfig;
-  return {
-    name: "puckEdit",
-    type: "ui",
-    admin: {
-      // Only set position if explicitly specified (sidebar)
-      // undefined means main form area in Payload
-      ...buttonPosition && { position: buttonPosition },
-      components: {
-        Field: "@delmaredigital/payload-puck/admin/client#EditWithPuckButton",
-        Cell: "@delmaredigital/payload-puck/admin/client#EditWithPuckCell"
-      },
-      custom: {
-        collectionSlug,
-        editorPathPattern,
-        label: buttonLabel
-      }
-    }
-  };
-}
-function createPuckPlugin(options = {}) {
-  const {
-    pagesCollection = "pages",
-    autoGenerateCollection = true,
-    admin: adminConfig = {}
-  } = options;
-  const { addEditButton = true } = adminConfig;
-  return (incomingConfig) => {
-    let collections = incomingConfig.collections || [];
-    const templatesCollectionExists = collections.some(
-      (c) => c.slug === "puck-templates"
-    );
-    if (!templatesCollectionExists) {
-      collections = [...collections, TemplatesCollection];
-    }
-    if (autoGenerateCollection) {
-      const existingCollectionIndex = collections.findIndex(
-        (c) => c.slug === pagesCollection
-      );
-      const editButtonField = addEditButton ? [generatePuckEditField(pagesCollection, adminConfig)] : [];
-      if (existingCollectionIndex >= 0) {
-        const existingCollection = collections[existingCollectionIndex];
-        const existingFields = existingCollection.fields || [];
-        const existingFieldNames = getExistingFieldNames(existingFields);
-        const puckFields = getPuckFields({
-          includeSEO: !existingFieldNames.has("meta"),
-          includeConversion: !existingFieldNames.has("conversionTracking"),
-          includeEditorVersion: !existingFieldNames.has("editorVersion"),
-          includePageLayout: !existingFieldNames.has("pageLayout"),
-          includeIsHomepage: !existingFieldNames.has("isHomepage"),
-          layouts: options.layouts
-        });
-        const fieldsToAdd = filterExistingFields(puckFields, existingFieldNames);
-        const editFieldsToAdd = existingFieldNames.has("puckEdit") ? [] : editButtonField;
-        collections = [
-          ...collections.slice(0, existingCollectionIndex),
-          {
-            ...existingCollection,
-            // Ensure drafts are enabled for Puck
-            versions: typeof existingCollection.versions === "object" ? { drafts: true, ...existingCollection.versions } : existingCollection.versions ?? { drafts: true },
-            fields: [
-              ...existingFields,
-              ...fieldsToAdd,
-              ...editFieldsToAdd
-            ]
-          },
-          ...collections.slice(existingCollectionIndex + 1)
-        ];
-      } else {
-        const generatedCollection = generatePagesCollection(pagesCollection, options);
-        collections = [
-          ...collections,
-          {
-            ...generatedCollection,
-            fields: [...generatedCollection.fields, ...editButtonField]
-          }
-        ];
-      }
-    }
-    return {
-      ...incomingConfig,
-      collections,
-      onInit: async (payload) => {
-        if (incomingConfig.onInit) {
-          await incomingConfig.onInit(payload);
-        }
-      }
-    };
-  };
-}
-
-exports.TemplatesCollection = TemplatesCollection;
-exports.conversionFieldGroup = conversionFieldGroup;
-exports.createEditorVersionField = createEditorVersionField;
-exports.createPageLayoutField = createPageLayoutField;
-exports.createPuckPlugin = createPuckPlugin;
-exports.editorVersionField = editorVersionField;
-exports.generatePagesCollection = generatePagesCollection;
-exports.generatePuckEditField = generatePuckEditField;
-exports.getPuckFields = getPuckFields;
-exports.isHomepageField = isHomepageField;
-exports.pageLayoutField = pageLayoutField;
-exports.puckDataField = puckDataField;
-exports.seoFieldGroup = seoFieldGroup;
-//# sourceMappingURL=index.js.map
+/**
+ * @delmaredigital/payload-puck
+ *
+ * A portable PayloadCMS plugin for Puck visual page builder integration.
+ *
+ * @example
+ * ```typescript
+ * // In payload.config.ts
+ * import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'
+ *
+ * export default buildConfig({
+ *   plugins: [
+ *     createPuckPlugin({
+ *       pagesCollection: 'pages',
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using config for rendering
+ * import { baseConfig } from '@delmaredigital/payload-puck/config'
+ * import { PageRenderer } from '@delmaredigital/payload-puck/render'
+ *
+ * <PageRenderer data={page.puckData} config={baseConfig} />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Merging custom components
+ * import { mergeConfigs, editorConfig } from '@delmaredigital/payload-puck/config/editor'
+ *
+ * const customConfig = mergeConfigs({
+ *   base: editorConfig,
+ *   components: {
+ *     CustomHero: myHeroConfig,
+ *   },
+ *   categories: {
+ *     custom: { title: 'Custom', components: ['CustomHero'] },
+ *   },
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Creating API routes
+ * // src/app/api/puck/pages/route.ts
+ * import { createPuckApiRoutes } from '@delmaredigital/payload-puck/api'
+ *
+ * export const { GET, POST } = createPuckApiRoutes({
+ *   auth: {
+ *     authenticate: async (request) => {
+ *       const session = await getSession(request)
+ *       if (!session?.user) return { authenticated: false }
+ *       return { authenticated: true, user: session.user }
+ *     },
+ *   },
+ * })
+ * ```
+ */
+// Re-export all types
+export * from './types';
+// Re-export plugin utilities
+export { createPuckPlugin, generatePagesCollection, generatePuckEditField, TemplatesCollection, } from './plugin';
+// Re-export field utilities for hybrid collection integration
+export { getPuckFields, puckDataField, editorVersionField, createEditorVersionField, pageLayoutField, createPageLayoutField, isHomepageField, seoFieldGroup, conversionFieldGroup, } from './plugin';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,sBAAsB;AACtB,cAAc,SAAS,CAAA;AAEvB,6BAA6B;AAC7B,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,UAAU,CAAA;AAEjB,8DAA8D;AAC9D,OAAO,EACL,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,wBAAwB,EACxB,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,oBAAoB,GACrB,MAAM,UAAU,CAAA"}

package/dist/layouts/LayoutWrapper.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Layout Wrapper Component
+ *
+ * Wraps page content with layout-specific styling and structure.
+ */
+import type { ReactNode } from 'react';
+import type { LayoutDefinition } from './types';
+import { type BackgroundValue } from '../fields/shared';
+/**
+ * Page-level overrides for layout settings
+ */
+export interface PageOverrides {
+    /** Override header visibility: 'default' uses layout, 'show'/'hide' overrides */
+    showHeader?: 'default' | 'show' | 'hide';
+    /** Override footer visibility: 'default' uses layout, 'show'/'hide' overrides */
+    showFooter?: 'default' | 'show' | 'hide';
+    /** Page background (overrides any layout background) */
+    background?: BackgroundValue | null;
+    /** Page max width: 'default' uses layout, otherwise uses the value */
+    maxWidth?: string;
+}
+export interface LayoutWrapperProps {
+    children: ReactNode;
+    layout?: LayoutDefinition;
+    className?: string;
+    /** Page-level overrides from Puck root props */
+    overrides?: PageOverrides;
+}
+/**
+ * Applies layout configuration to page content
+ */
+export declare function LayoutWrapper({ children, layout, className, overrides }: LayoutWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LayoutWrapper.d.ts.map

package/dist/layouts/LayoutWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutWrapper.d.ts","sourceRoot":"","sources":["../../src/layouts/LayoutWrapper.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,EAAwB,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAE7E;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,iFAAiF;IACjF,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,iFAAiF;IACjF,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,wDAAwD;IACxD,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACnC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAA;CAC1B;AAeD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CA8J3F"}