@pro-laico/create-atomic-payload 0.1.4

package/template/src/collections/pages/tabs/SEO.ts

@@ -0,0 +1,70 @@
+import { type Tab } from 'payload'
+import { APField } from '@/fields/apf'
+import { onUploadSetAPF } from '@/hooks/field/apf'
+import { FaviconField } from '@/fields/favicon'
+
+const d = {
+  darkFavicon: 'Overrides the global dark favicon.',
+  lightFavicon: 'Overrides the global light favicon.',
+  noIndex: 'Prevents the page from being indexed by search engines.',
+  changeFrequency: 'How often the page is updated. Defaults to monthly.',
+  priority: 'Priority of the page compared to other pages. 0-1. Default is 0.5. Home page should be 1.',
+  image: 'The pages Open Graph image. This will override the global Open Graph image.',
+}
+
+export const SEOTab = () => {
+  const seoField: Tab = {
+    name: 'meta',
+    label: 'SEO',
+    interfaceName: 'PageSEO',
+    fields: [
+      APField({ type: 'text', apf: ['seo'], name: 'title' }),
+      APField({ type: 'textarea', apf: ['seo'], name: 'description' }),
+      {
+        name: 'image',
+        type: 'upload',
+        relationTo: 'images',
+        admin: { width: '50%', description: d.image },
+        hooks: { beforeValidate: [onUploadSetAPF(['seo'])] },
+      },
+      {
+        type: 'row',
+        fields: [
+          FaviconField({ apf: ['seo'], name: 'lightFavicon', admin: { description: d.lightFavicon } }),
+          FaviconField({ apf: ['seo'], name: 'darkFavicon', admin: { description: d.darkFavicon } }),
+        ],
+      },
+      {
+        type: 'row',
+        fields: [
+          APField({
+            type: 'checkbox',
+            apf: ['seo', 'sitemap'],
+            name: 'noIndex',
+            required: true,
+            defaultValue: false,
+            admin: { width: '33%', description: d.noIndex },
+          }),
+          APField({
+            apf: ['seo', 'sitemap'],
+            name: 'priority',
+            type: 'number',
+            min: 0,
+            max: 1,
+            defaultValue: 0.5,
+            admin: { width: '33%', description: d.priority },
+          }),
+          APField({
+            type: 'select',
+            apf: ['seo', 'sitemap'],
+            name: 'changeFrequency',
+            options: ['daily', 'weekly', 'monthly', 'yearly', 'never'],
+            admin: { width: '33%', description: d.changeFrequency },
+          }),
+        ],
+      },
+    ],
+  }
+
+  return seoField
+}

package/template/src/collections/pages/tabs/settings.ts

@@ -0,0 +1,17 @@
+import { type Tab } from 'payload'
+import { DevModeField } from '@/fields/devMode'
+import { generateAPFFields } from '@/fields/apf/storage'
+import { createBreadcrumbsField } from '@payloadcms/plugin-nested-docs'
+
+export const SettingsTab = () => {
+  const settingsField: Tab = {
+    label: 'Settings',
+    fields: [
+      DevModeField(),
+      createBreadcrumbsField('pages', { name: 'breadcrumbs', admin: { initCollapsed: true } }),
+      ...generateAPFFields(['form', 'page', 'pages', 'actions', 'classes', 'seo', 'sitemap']),
+    ],
+  }
+
+  return settingsField
+}

package/template/src/collections/posthogProperty.ts

@@ -0,0 +1,48 @@
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+
+const d = {
+  purpose: 'What this should be used for. e.g marketing, user flow, etc.',
+  propertyFormal: 'The formal property name. e.g page_name',
+  propertyObfuscated: 'The obfuscated property name. e.g page_name_obfuscated',
+  valueFormal: 'The formal value. e.g Home',
+  valueObfuscated: 'The obfuscated value. e.g Home_obfuscated',
+  location: 'Where this should be used. e.g page, component, global',
+}
+
+export const PostHogProperty: CollectionConfig = {
+  slug: 'posthogProperty',
+  admin: { group: 'Tracking', useAsTitle: 'title' },
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  defaultPopulate: { propertyObfuscated: true, valueObfuscated: true },
+  fields: [
+    { name: 'title', type: 'text', required: true, unique: true, admin: { position: 'sidebar' } },
+    { name: 'description', type: 'text', admin: { position: 'sidebar' } },
+    { name: 'purpose', type: 'text', required: true, admin: { description: d.purpose } },
+    {
+      type: 'row',
+      fields: [
+        { name: 'propertyFormal', type: 'text', required: true, admin: { description: d.propertyFormal } },
+        { name: 'propertyObfuscated', type: 'text', required: true, admin: { description: d.propertyObfuscated } },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        { name: 'valueFormal', type: 'text', required: true, admin: { description: d.valueFormal } },
+        { name: 'valueObfuscated', type: 'text', required: true, admin: { description: d.valueObfuscated } },
+      ],
+    },
+    {
+      name: 'location',
+      type: 'radio',
+      required: true,
+      admin: { position: 'sidebar', layout: 'horizontal', description: d.location },
+      options: [
+        { label: 'Page', value: 'page' },
+        { label: 'Component', value: 'component' },
+        { label: 'Global', value: 'global' },
+      ],
+    },
+  ],
+}

package/template/src/collections/shortcutSets/collection.ts

@@ -0,0 +1,30 @@
+import { APFControlsPath } from '@/ui'
+import { SettingsTab } from './tabs/settings'
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+import { ShortcutsTab } from './tabs/shortcuts'
+import type { APFunction } from '@/ts/types/apf'
+import { generateAPFFields } from '@/fields/apf/storage'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+import { revalidateCacheOnDelete } from '@/hooks/collection/revalidate'
+import { generateLivePreviewPath } from '@/utilities/generatePreviewPath'
+
+const APFunctions: APFunction[] = ['classes', 'active']
+
+const ShortcutSet: CollectionConfig = {
+  slug: 'shortcutSet',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  admin: {
+    group: 'Sets',
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'active', '_status'],
+    preview: (data, { req }) => generateLivePreviewPath({ data, req }),
+    livePreview: { url: ({ data, req }) => generateLivePreviewPath({ data, req }) },
+    components: { edit: { beforeDocumentControls: [{ path: APFControlsPath, clientProps: { APFunctions } }] } },
+  },
+  fields: [{ type: 'tabs', tabs: [SettingsTab(), ShortcutsTab()] }, ...generateAPFFields(APFunctions)],
+  hooks: { beforeChange: [atomicHook], afterDelete: [revalidateCacheOnDelete] },
+  versions: { drafts: { schedulePublish: true, validate: true }, maxPerDoc: 50 },
+}
+
+export default ShortcutSet

package/template/src/collections/shortcutSets/defaults.ts

@@ -0,0 +1 @@
+export const defaultShortcuts = []

package/template/src/collections/shortcutSets/protectedNames.ts

@@ -0,0 +1,135 @@
+export const protectedNames = [
+  // Media elements
+  'img',
+  'svg',
+  'video',
+  'canvas',
+  'audio',
+  'iframe',
+  'embed',
+  'object',
+  'picture',
+  'source',
+  'track',
+
+  // Form elements
+  'input',
+  'textarea',
+  'select',
+  'option',
+  'optgroup',
+  'button',
+  'fieldset',
+  'legend',
+  'label',
+  'datalist',
+
+  // Interactive elements
+  'details',
+  'summary',
+  'dialog',
+  'menu',
+  'menuitem',
+
+  // Text elements
+  'p',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'span',
+  'div',
+  'section',
+  'article',
+  'aside',
+  'header',
+  'footer',
+  'nav',
+  'main',
+  'blockquote',
+  'pre',
+  'code',
+  'kbd',
+  'samp',
+  'var',
+  'time',
+  'mark',
+  'ruby',
+  'rt',
+  'rp',
+  'bdi',
+  'bdo',
+  'abbr',
+  'acronym',
+  'cite',
+  'dfn',
+  'em',
+  'i',
+  'strong',
+  'b',
+  'small',
+  'sub',
+  'sup',
+  'del',
+  'ins',
+  's',
+  'u',
+
+  // List elements
+  'ul',
+  'ol',
+  'li',
+  'dl',
+  'dt',
+  'dd',
+
+  // Table elements
+  'table',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+  'td',
+  'th',
+  'caption',
+  'colgroup',
+  'col',
+
+  // Link elements
+  'a',
+  'link',
+  'area',
+
+  // Meta elements
+  'meta',
+  'title',
+  'base',
+  'style',
+  'script',
+  'noscript',
+  'template',
+
+  // Embedded content
+  'map',
+  'area',
+
+  // Semantic elements
+  'figure',
+  'figcaption',
+  'address',
+  'time',
+  'data',
+
+  // Other HTML elements
+  'html',
+  'head',
+  'body',
+  'hr',
+  'br',
+  'wbr',
+  'param',
+  'slot',
+  'portal',
+]

package/template/src/collections/shortcutSets/tabs/settings.ts

@@ -0,0 +1,13 @@
+import { type Tab } from 'payload'
+import { ActiveField } from '@/fields/active'
+import { TestPathField } from '@/fields/testPath'
+import { UniqueTitleField } from '@/fields/uniqueTitle'
+
+export const SettingsTab = () => {
+  const settingsField: Tab = {
+    label: 'Settings',
+    fields: [{ type: 'row', fields: [ActiveField(), UniqueTitleField('New Shortcut Set'), TestPathField] }],
+  }
+
+  return settingsField
+}

package/template/src/collections/shortcutSets/tabs/shortcuts.ts

@@ -0,0 +1,70 @@
+import { type Tab } from 'payload'
+import { APField } from '@/fields/apf'
+import { ShortcutLabelPath } from '@/ui'
+import { ClassNameField } from '@/fields/className'
+import { onArraySetAPFShallow } from '@/hooks/field/apf'
+import { defaultShortcuts } from '@/collections/shortcutSets/defaults'
+import { protectedNames } from '@/collections/shortcutSets/protectedNames'
+
+const d = {
+  name: 'The name of the shortcut. This is used to identify the shortcut in the code.',
+  ds: 'Default shortcuts are set in the project code at /src/collections/shortcutSets/defaults.ts',
+}
+
+export const ShortcutsTab = () => {
+  const settingsField: Tab = {
+    label: 'Shortcuts',
+    fields: [
+      {
+        name: 'shortcuts',
+        type: 'array',
+        required: true,
+        admin: { components: { RowLabel: ShortcutLabelPath } },
+        fields: [
+          {
+            type: 'row',
+            fields: [
+              APField({
+                type: 'text',
+                name: 'name',
+                apf: ['classes'],
+                required: true,
+                admin: { width: '75%', description: d.name },
+                kebab: true,
+                validate: (val, options) => {
+                  if (options.event !== 'onChange') return true
+                  if (val) return 'Shortcut name is required.'
+                  if (val === 'default') return 'The name "default" is reserved for the default shortcuts.'
+                  if (val && typeof val === 'string' && protectedNames.includes(val.split('-')[0]))
+                    return `The name "${val.split('-')[0]}" is protected and cannot be used as the first part of a shortcut name.`
+                  return true
+                },
+              }),
+            ],
+          },
+          ClassNameField({ label: 'Atomic Classes' }),
+        ],
+      },
+      {
+        name: 'defaultShortcuts',
+        type: 'array',
+        required: false,
+        defaultValue: defaultShortcuts,
+        admin: { readOnly: true, isSortable: false, initCollapsed: true, description: d.ds, components: { RowLabel: ShortcutLabelPath } },
+        fields: [
+          {
+            type: 'row',
+            fields: [
+              APField({ type: 'text', apf: ['classes'], name: 'name', required: true, kebab: true, admin: { readOnly: true, width: '75%' } }),
+              APField({ type: 'checkbox', apf: ['classes'], name: 'mod', label: 'Mod', admin: { readOnly: true, width: '25%' } }),
+            ],
+          },
+          ClassNameField({ label: 'Atomic Classes', admin: { readOnly: true } }),
+        ],
+        hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+      },
+    ],
+  }
+
+  return settingsField
+}

package/template/src/collections/users.ts

@@ -0,0 +1,11 @@
+import type { CollectionConfig } from 'payload'
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: { group: 'Admin', useAsTitle: 'email' },
+  auth: true,
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+}

package/template/src/collections/zap.ts

@@ -0,0 +1,59 @@
+import { z } from '@/ts/zap'
+import traverse from 'traverse'
+import collections from './index'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+
+function hasField(collection: Record<string, unknown>, fieldName: string): boolean {
+  let found = false
+  traverse(collection).forEach(function (node) {
+    if (typeof node === 'object' && node !== null && 'name' in node && node.name === fieldName) {
+      found = true
+      this.stop()
+    }
+  })
+  return found
+}
+
+function hasAtomicHook(collection: Record<string, unknown>): boolean {
+  if (!('hooks' in collection) || !collection.hooks || typeof collection.hooks !== 'object' || !('beforeChange' in collection.hooks)) return false
+  const beforeChangeHooks = collection.hooks.beforeChange
+  return Array.isArray(beforeChangeHooks) && beforeChangeHooks.includes(atomicHook)
+}
+
+export const CollectionThatUsesAtomicHookSlug = z.ap.add(z.enum(collections.filter(hasAtomicHook).map((collection) => collection.slug)), {
+  id: 'CollectionThatUsesAtomicHookSlug',
+})
+
+export const CollectionWithStoredAtomicClassesSlug = z.ap.add(
+  z.enum(collections.filter((collection) => hasField(collection, 'storedAtomicClasses')).map((collection) => collection.slug)),
+  { id: 'CollectionWithStoredAtomicClassesSlug' },
+)
+
+export const CollectionThatUseCSSProcessorSlug = z.ap.add(
+  z.enum([
+    'designSet',
+    'shortcutSet',
+    ...collections.filter((collection) => hasField(collection, 'storedAtomicClasses')).map((collection) => collection.slug),
+  ]),
+  { id: 'CollectionThatUsesCSSProcessorSlug' },
+)
+
+export const CollectionWithStoredAtomicFormsSlug = z.ap.add(
+  z.enum(collections.filter((collection) => hasField(collection, 'storedAtomicForms')).map((collection) => collection.slug)),
+  { id: 'CollectionWithStoredAtomicFormsSlug' },
+)
+
+export const CollectionWithStoredAtomicActionsSlug = z.ap.add(
+  z.enum(collections.filter((collection) => hasField(collection, 'storedAtomicActions')).map((collection) => collection.slug)),
+  { id: 'CollectionWithStoredAtomicActionsSlug' },
+)
+
+const CollectionSchemas = [
+  CollectionThatUsesAtomicHookSlug,
+  CollectionWithStoredAtomicClassesSlug,
+  CollectionThatUseCSSProcessorSlug,
+  CollectionWithStoredAtomicFormsSlug,
+  CollectionWithStoredAtomicActionsSlug,
+]
+
+export default CollectionSchemas