@pro-laico/create-atomic-payload 0.1.4

package/template/src/fields/className.ts

@@ -0,0 +1,26 @@
+import { APField } from './apf'
+import deepMerge from '@/utilities/deepMerge'
+import type { APArgs, APFieldWrapper } from '@/ts/types'
+
+type PresetFields = 'apf' | 'type' | 'name'
+
+export const ClassNameField: APFieldWrapper<'textarea', PresetFields, { namePrefix?: string }> = (args) => {
+  let namePrefix = ''
+  let rest: Omit<APArgs<'textarea'>, PresetFields> | undefined
+
+  if (args) {
+    const { namePrefix: namePrefixArg, ...restArg } = args
+    namePrefix = namePrefixArg || ''
+    rest = restArg
+  }
+
+  const baseField: APArgs<'textarea'> = {
+    type: 'textarea',
+    apf: ['classes'],
+    name: `${namePrefix}ClassName`,
+    docLink: 'https://atomicpayload.com/fields/classname',
+    admin: { description: 'Add atomic style classes or shortcuts here.' },
+  }
+
+  return APField(deepMerge(baseField, rest))
+}

package/template/src/fields/coloredEnd.ts

@@ -0,0 +1,5 @@
+import { ColoredEndPath } from '@/ui'
+import type { UIField } from 'payload'
+
+/**Place at the end of a block to add a colored strip that adjusts color based on the block type and values.*/
+export const ColoredEnd: UIField = { name: 'coloredEnd', type: 'ui', admin: { components: { Field: { path: ColoredEndPath } } } }

package/template/src/fields/defaultOpen.ts

@@ -0,0 +1,14 @@
+import { APField } from './apf'
+import deepMerge from '@/utilities/deepMerge'
+import { APArgs, APFieldWrapper } from '@/ts/types'
+
+export const DefaultOpenField: APFieldWrapper<'checkbox', 'name' | 'apf' | 'type'> = (args) => {
+  const baseField: APArgs<'checkbox'> = {
+    name: 'defaultOpen',
+    type: 'checkbox',
+    apf: ['actions'],
+    admin: { description: 'If checked, the portal will be open by default.' },
+  }
+
+  return APField(deepMerge(baseField, args))
+}

package/template/src/fields/designSets/value.ts

@@ -0,0 +1,80 @@
+import { z } from '@/ts/zap'
+import { APField } from '@/fields/apf'
+import type { TextField } from 'payload'
+import type { ArrayField } from 'payload'
+import { DesignTokenLabelPath } from '@/ui'
+import { onArraySetAPFShallow } from '@/hooks/field/apf'
+
+/** Creates a value field for use in the design sets collection. */
+export const ValueField: TextField = APField({ name: 'value', type: 'text', apf: ['classes'], required: true })
+
+type ValuesFieldProps = (args?: { name?: string; defaultValue?: { value: string }[] }) => ArrayField
+
+/** Creates an array of value fields for use in the design sets collection. */
+export const ValuesField: ValuesFieldProps = (args) => {
+  const valueField: ArrayField = {
+    name: args?.name || 'values',
+    type: 'array',
+    required: true,
+    fields: [ValueField],
+    hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+  }
+
+  if (args?.defaultValue) valueField.defaultValue = args.defaultValue
+
+  return valueField
+}
+
+export const TokenString = z.ap.add(
+  z
+    .array(z.object({ name: z.string(), value: z.string() }))
+    .nullable()
+    .optional(),
+  { id: 'TokenString' },
+)
+
+type TokenValueArrayFieldExtras = { description?: string; defaultValue?: { name: string; value: string }[] }
+
+/** Creates an array field with a row label component and a value field for use in the design sets collection */
+export const TokenValueArrayField = (name: string, extras?: TokenValueArrayFieldExtras) => {
+  const valueField: ArrayField = {
+    name: name,
+    type: 'array',
+    admin: { components: { RowLabel: { path: DesignTokenLabelPath } } },
+    fields: [APField({ type: 'text', name: 'name', apf: ['classes'], required: true, kebab: true }), ValueField],
+    hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+    typescriptSchema: [() => ({ $ref: `#/definitions/TokenString` })],
+  }
+
+  if (extras?.description) valueField.admin!.description = extras.description
+  if (extras?.defaultValue) valueField.defaultValue = extras.defaultValue
+
+  return valueField
+}
+
+export const TokenStringArray = z.ap.add(
+  z
+    .array(z.object({ name: z.string(), values: z.array(z.object({ value: z.string() })) }))
+    .nullable()
+    .optional(),
+  { id: 'TokenStringArray' },
+)
+
+type TokenValuesArrayFieldExtras = { description?: string; defaultValue?: TokenValueArrayFieldExtras['defaultValue'][] }
+
+/** Creates an array field with a row label component and a name field for use in the design sets collection.*/
+export const TokenValuesArrayField = (name: string, extras?: TokenValuesArrayFieldExtras) => {
+  const valueField: ArrayField = {
+    name: name,
+    type: 'array',
+    admin: { components: { RowLabel: { path: DesignTokenLabelPath } } },
+    fields: [APField({ type: 'text', name: 'name', apf: ['classes'], required: true, kebab: true }), ValuesField()],
+    hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+    typescriptSchema: [() => ({ $ref: `#/definitions/TokenStringArray` })],
+  }
+
+  if (extras?.description) valueField.admin!.description = extras.description
+  if (extras?.defaultValue) valueField.defaultValue = extras.defaultValue
+
+  return valueField
+}

package/template/src/fields/devMode.ts

@@ -0,0 +1,11 @@
+import { CheckboxField } from 'payload'
+
+export const DevModeField = (): CheckboxField => {
+  const devModeField: CheckboxField = {
+    name: 'devMode',
+    type: 'checkbox',
+    required: true,
+    admin: { style: { maxWidth: '100px', alignSelf: 'center' } },
+  }
+  return devModeField
+}

package/template/src/fields/favicon.ts

@@ -0,0 +1,18 @@
+import { UploadField } from 'payload'
+import type { APFunction } from '@/ts/types'
+import deepMerge from '@/utilities/deepMerge'
+import { onUploadSetAPF } from '@/hooks/field/apf'
+
+type FaviconFieldType = (args?: Partial<UploadField> & { apf?: APFunction[] }) => UploadField
+
+const description = 'Sets the favicon for the site.'
+
+export const FaviconField: FaviconFieldType = (args) => {
+  const { apf, ...rest } = args || {}
+
+  const faviconField: UploadField = { name: 'favicon', type: 'upload', relationTo: 'favicons', admin: { description } }
+
+  if (args?.apf) faviconField.hooks = { beforeValidate: [onUploadSetAPF(args.apf)] }
+
+  return deepMerge(faviconField, rest)
+}

package/template/src/fields/for.ts

@@ -0,0 +1,11 @@
+import { TextField } from 'payload'
+import deepMerge from '@/utilities/deepMerge'
+
+const description = 'The name of the input this label is associated with.'
+
+type ForFieldType = (args?: Partial<TextField>) => TextField
+
+export const ForField: ForFieldType = (args) => {
+  const forField: TextField = { name: 'htmlFor', type: 'text', label: 'HTML For', admin: { description } }
+  return deepMerge(forField, args)
+}

package/template/src/fields/keepMounted.ts

@@ -0,0 +1,11 @@
+import { CheckboxField } from 'payload'
+import deepMerge from '@/utilities/deepMerge'
+
+type KeepMountedFieldType = (args?: Partial<CheckboxField>) => CheckboxField
+
+const description = 'If checked, the portal will remain in the DOM when hidden.'
+
+export const KeepMountedField: KeepMountedFieldType = (args) => {
+  const keepMountedField: CheckboxField = { name: 'keepMounted', type: 'checkbox', admin: { description } }
+  return deepMerge(keepMountedField, args)
+}

package/template/src/fields/modal.ts

@@ -0,0 +1,16 @@
+import { SelectField } from 'payload'
+import deepMerge from '@/utilities/deepMerge'
+
+type ModalFieldType = (args?: Partial<SelectField>) => SelectField
+
+const description = 'Determines if you can interact outside the opened portal. Defaults to window, which allows interaction outside the portal.'
+const options = [
+  { label: 'Trap Focus', value: 'trap-focus' },
+  { label: 'Block', value: 'Block' },
+  { label: 'Window', value: 'Window' },
+]
+
+export const ModalField: ModalFieldType = (args) => {
+  const modalField: SelectField = { name: 'modal', type: 'select', label: 'Trap Focus', interfaceName: 'trapFocus', options, admin: { description } }
+  return deepMerge(modalField, args)
+}

package/template/src/fields/slug.ts

@@ -0,0 +1,35 @@
+import { SlugPath } from '@/ui'
+import type { CheckboxField, TextField } from 'payload'
+import { formatSlugHook } from '@/hooks/field/formatSlug'
+
+type Overrides = { slugOverrides?: Partial<TextField>; checkboxOverrides?: Partial<CheckboxField> }
+
+type Slug = (fieldToUse?: string, overrides?: Overrides) => [TextField, CheckboxField]
+
+export const slugField: Slug = (fieldToUse = 'title', overrides = {}) => {
+  const { slugOverrides, checkboxOverrides } = overrides
+
+  const checkBoxField: CheckboxField = {
+    name: 'slugLock',
+    type: 'checkbox',
+    defaultValue: true,
+    admin: { hidden: true, position: 'sidebar' },
+    ...checkboxOverrides,
+  }
+
+  // @ts-expect-error - ts mismatch Partial<TextField> with TextField
+  const slugField: TextField = {
+    name: 'slug',
+    type: 'text',
+    index: true,
+    label: 'Slug',
+    ...(slugOverrides || {}),
+    hooks: { beforeValidate: [formatSlugHook(fieldToUse)] },
+    admin: {
+      ...(slugOverrides?.admin || {}),
+      components: { Field: { path: SlugPath, clientProps: { fieldToUse, checkboxFieldPath: checkBoxField.name } } },
+    },
+  }
+
+  return [slugField, checkBoxField]
+}

package/template/src/fields/staticDataAttributes.ts

@@ -0,0 +1,29 @@
+import { ArrayField } from 'payload'
+import { KeyTextField } from '@/fields/actions'
+
+const d = {
+  array: 'Add static data attributes to the element.',
+  key: 'The name of the key to set.',
+  value: 'The string value of the data-key. Set to "true" to have a data attribute applied with no string value.',
+}
+
+/**Used to add a field to the admin panel that allows the user to add static data attributes to the element.*/
+export const StaticDataAttributesField = (location: 'trigger' | 'content') => {
+  const sda: ArrayField = {
+    type: 'array',
+    name: 'staticDataAttributes',
+    interfaceName: 'StaticDataAttributes',
+    admin: { description: d.array, condition: (_, sd) => Boolean(sd.type !== 'button') || Boolean(sd.buttonType === 'portal') },
+    fields: [
+      KeyTextField({ required: true, admin: { width: '25%', description: d.key } }),
+      { name: 'value', type: 'text', required: true, admin: { description: d.value } },
+    ],
+  }
+
+  if (location === 'trigger') {
+    sda.name = 'triggerStaticDataAttributes'
+    sda.admin!.condition = (_, sd) => Boolean(sd?.type === 'button')
+  }
+
+  return sda
+}

package/template/src/fields/tabs/block/children/actions.ts

@@ -0,0 +1,49 @@
+import { GroupField } from 'payload'
+import { ActionBlocks } from '@/fields/blocks/actions'
+
+type ActionsTab = (prefix: 'trigger' | 'content') => GroupField
+
+export const ActionsTab: ActionsTab = (prefix) => {
+  const actionTab: GroupField = {
+    type: 'group',
+    name: `${prefix}Actions`,
+    interfaceName: 'allActions',
+    label: false,
+    admin: {
+      hideGutter: true,
+      condition: (_, sd) => {
+        if (Boolean(sd.blockType === 'AtomicChild')) {
+          if (prefix === 'trigger') return Boolean(sd.type === 'button')
+          else if (prefix === 'content') return Boolean(sd.type !== 'button') || Boolean(sd.buttonType === 'portal')
+        }
+        return true
+      },
+    },
+    fields: [
+      ActionBlocks(prefix),
+      {
+        name: 'actions',
+        type: 'json',
+        admin: { readOnly: true, condition: (data) => data.devMode },
+        typescriptSchema: [(jsonSchema) => ({ ...jsonSchema, type: 'array', items: { $ref: `#/definitions/ActionBlockType` } })],
+      },
+      {
+        name: 'runners',
+        type: 'json',
+        admin: { readOnly: true, condition: (data) => data.devMode },
+        typescriptSchema: [() => ({ $ref: `#/definitions/Runners` })],
+      },
+      {
+        name: 'attributers',
+        type: 'json',
+        admin: { readOnly: true, condition: (data) => data.devMode },
+        typescriptSchema: [() => ({ $ref: `#/definitions/Attributers` })],
+      },
+    ],
+  }
+
+  return actionTab
+}
+
+export const TriggerActionsTab: GroupField = ActionsTab('trigger')
+export const ContentActionsTab: GroupField = ActionsTab('content')

package/template/src/fields/tabs/block/children/backdrop.ts

@@ -0,0 +1,17 @@
+import { GroupField } from 'payload'
+import { ClassNameField } from '@/fields/className'
+import { BackdropChildren } from '@/fields/blocks/backdropChildren'
+
+const d = {
+  className: 'Add atomic classes or shortcuts to the portal backdrop div here.',
+}
+
+export const PortalBackdropTab: GroupField = {
+  type: 'group',
+  label: 'Portal Backdrop',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'button' && sd?.buttonType === 'portal') },
+  fields: [
+    ClassNameField({ namePrefix: 'backdrop', label: 'Portal Backdrop Atomic Classes', admin: { description: d.className } }),
+    BackdropChildren,
+  ],
+}

package/template/src/fields/tabs/block/children/settings.ts

@@ -0,0 +1,45 @@
+import { TabAsField } from 'payload'
+import { ChildBlockType } from '@/ts/types'
+import type { Field, TextField } from 'payload'
+import { StaticDataAttributesField } from '@/fields/staticDataAttributes'
+import { PortalBackdropTab } from '@/fields/tabs/block/children/backdrop'
+import { TagSettingsTab } from '@/blocks/children/atomic/variants/tag/settings'
+import { FormSettingsTab } from '@/blocks/children/atomic/variants/form/settings'
+import { InputSettingsTab } from '@/blocks/children/atomic/variants/input/settings'
+import { LinkSettingsTab } from '@/blocks/children/atomic/variants/button/variants/link/settings'
+import { DialogSettingsTab } from '@/blocks/children/atomic/variants/button/variants/portal/dialog/settings'
+import { PopoverSettingsTab } from '@/blocks/children/atomic/variants/button/variants/portal/popover/settings'
+
+const d = {
+  tab: 'Whichever block type is selected, this tab will contain the non control bar settings for that block type.',
+  cid: 'Sets the components anchor ID, which can be used in anchor links.',
+}
+
+const cidField: TextField = { name: 'cid', type: 'text', label: 'Anchor ID', admin: { description: d.cid } }
+
+export const ChildsSettingsTab = (childBlock: ChildBlockType) => {
+  let fields: Field[] | undefined = undefined
+
+  switch (childBlock) {
+    case 'AtomicChild':
+      fields = [
+        cidField,
+        TagSettingsTab,
+        FormSettingsTab,
+        LinkSettingsTab,
+        InputSettingsTab,
+        PortalBackdropTab,
+        DialogSettingsTab,
+        PopoverSettingsTab,
+        StaticDataAttributesField('trigger'),
+        StaticDataAttributesField('content'),
+      ]
+      break
+  }
+
+  if (fields === undefined) fields = [cidField, StaticDataAttributesField('content')]
+  const childSettingsTabField: TabAsField = { type: 'tab', label: 'Settings', admin: { description: d.tab }, fields }
+  return childSettingsTabField
+}
+
+export const AtomicChildSettingsTab: TabAsField = ChildsSettingsTab('AtomicChild')

package/template/src/fields/tabs/block/children/submitForm/form.ts

@@ -0,0 +1,23 @@
+import { GroupField } from 'payload'
+import { formFunctionsBlockTemplate } from '@/fields/blocks/submitForm/form'
+
+export const formRateLimitTab: GroupField = {
+  type: 'group',
+  label: false,
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'form') },
+  fields: [formFunctionsBlockTemplate('RateLimit')],
+}
+
+export const formSanitationTab: GroupField = {
+  type: 'group',
+  label: false,
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'form') },
+  fields: [formFunctionsBlockTemplate('Sanitation')],
+}
+
+export const formValidationTab: GroupField = {
+  type: 'group',
+  label: false,
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'form') },
+  fields: [formFunctionsBlockTemplate('Validation')],
+}

package/template/src/fields/tabs/block/children/submitForm/input.ts

@@ -0,0 +1,14 @@
+import { GroupField } from 'payload'
+import { APField } from '@/fields/apf'
+import { inputFunctionsBlockTemplate } from '@/fields/blocks/submitForm/input'
+
+export const inputTab: GroupField = {
+  type: 'group',
+  label: false,
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'input') },
+  fields: [
+    APField({ type: 'checkbox', apf: ['form'], name: 'required', admin: { description: 'If checked, this input field is required.' } }),
+    inputFunctionsBlockTemplate('Sanitation'),
+    inputFunctionsBlockTemplate('Validation'),
+  ],
+}

package/template/src/fields/tabs/block/children/tracking.ts

@@ -0,0 +1,25 @@
+import type { Tab } from 'payload'
+
+export const TrackingTab: Tab = {
+  label: 'Tracking',
+  admin: { description: 'Used to add tracking properties to the block.' },
+  fields: [
+    {
+      name: 'contentPostHogProperty',
+      type: 'relationship',
+      relationTo: 'posthogProperty',
+      hasMany: true,
+      admin: {
+        condition: (_, sd) =>
+          Boolean(sd?.blockType === 'AtomicChild') ? Boolean(sd.type !== 'button') || Boolean(sd.buttonType === 'portal') : true,
+      },
+    },
+    {
+      name: 'triggerPostHogProperty',
+      type: 'relationship',
+      relationTo: 'posthogProperty',
+      hasMany: true,
+      admin: { condition: (_, sd) => (Boolean(sd?.blockType === 'AtomicChild') ? Boolean(sd.type === 'button') : false) },
+    },
+  ],
+}

package/template/src/fields/tabs/collection/storage.ts

@@ -0,0 +1,55 @@
+import { CollapsibleField, TabAsField } from 'payload'
+
+type StorageTabType = (args?: { filter?: ('classes' | 'forms' | 'actions')[] }) => TabAsField
+
+/**Used to add a tab to the admin panel that displays the stored atomic classes and forms.*/
+export const StorageTab: StorageTabType = ({ filter = ['classes', 'forms', 'actions'] } = {}) => {
+  const allFields: Record<'classes' | 'forms' | 'actions', CollapsibleField> = {
+    classes: {
+      type: 'collapsible',
+      label: 'Class Names',
+      admin: { initCollapsed: true },
+      fields: [
+        {
+          name: 'storedAtomicClasses',
+          type: 'json',
+          admin: { readOnly: true },
+          typescriptSchema: [() => ({ type: 'array', items: { type: 'string' } })],
+        },
+      ],
+    },
+    forms: {
+      type: 'collapsible',
+      label: 'Forms',
+      admin: { initCollapsed: true },
+      fields: [
+        {
+          name: 'storedAtomicForms',
+          type: 'json',
+          admin: { readOnly: true },
+          typescriptSchema: [() => ({ type: 'array', items: { $ref: '#/definitions/StoredAtomicForm' } })],
+        },
+      ],
+    },
+    actions: {
+      type: 'collapsible',
+      label: 'Actions',
+      admin: { initCollapsed: true },
+      fields: [
+        {
+          name: 'storedAtomicActions',
+          type: 'json',
+          admin: { readOnly: true },
+          typescriptSchema: [() => ({ $ref: '#/definitions/StoredAtomicActions' })],
+        },
+      ],
+    },
+  }
+
+  const filteredFields =
+    filter.length > 0
+      ? Object.values(Object.fromEntries(Object.entries(allFields).filter(([key]) => filter.includes(key))))
+      : Object.values(allFields)
+
+  return { type: 'tab', label: 'Storage', fields: filteredFields }
+}

package/template/src/fields/tagType.ts

@@ -0,0 +1,32 @@
+import { SelectField, Condition } from 'payload'
+
+type ChildBlocksWithTagType = 'SimpleTextChild' | 'VideoChild' | 'AtomicChild'
+type TagTypeFieldType = (args: { childBlock: ChildBlocksWithTagType; width?: string; condition?: Condition }) => SelectField
+
+const locations: Record<ChildBlocksWithTagType, { interfaceName: string; defaultValue: string; options: string[] }> = {
+  VideoChild: { interfaceName: 'VideoTagType', defaultValue: 'div', options: ['div', 'section'] },
+  AtomicChild: {
+    interfaceName: 'AtomicTagType',
+    defaultValue: 'div',
+    options: ['div', 'section', 'fragment', 'article', 'nav', 'label', 'ul', 'ol', 'li', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code'],
+  },
+  SimpleTextChild: {
+    interfaceName: 'SimpleTextTagType',
+    defaultValue: 'p',
+    options: ['p', 'span', 'fragment', 'div', 'label', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code'],
+  },
+}
+
+//Where this field is used, is where options are set.
+export const TagTypeField: TagTypeFieldType = ({ childBlock, width, condition }) => {
+  const tagTypeField: SelectField = {
+    name: 'tagType',
+    type: 'select',
+    required: true,
+    admin: { width, condition },
+    interfaceName: locations[childBlock].interfaceName,
+    options: locations[childBlock].options,
+    defaultValue: locations[childBlock].defaultValue,
+  }
+  return tagTypeField
+}

package/template/src/fields/testPath.ts

@@ -0,0 +1,3 @@
+import { RelationshipField } from 'payload'
+
+export const TestPathField: RelationshipField = { name: 'testPath', type: 'relationship', relationTo: 'pages' }

package/template/src/fields/uniqueTitle.ts

@@ -0,0 +1,8 @@
+import { TextField } from 'payload'
+
+type UniqueTitleFieldType = (defaultValue?: string) => TextField
+
+export const UniqueTitleField: UniqueTitleFieldType = (defaultValue = 'New Title') => {
+  const uniqueTitleField: TextField = { name: 'title', type: 'text', required: true, unique: true, defaultValue }
+  return uniqueTitleField
+}

package/template/src/fields/validationMessage.ts

@@ -0,0 +1,13 @@
+import { APField } from '@/fields/apf'
+import type { TextField } from 'payload'
+
+const description = "The message to display when the validation fails. Use {{inputName}} to display the input's value."
+
+/** Used in form SVR block fields to set the validation message. */
+export const ValidationMessageField: TextField = APField({
+  type: 'text',
+  apf: ['form'],
+  required: true,
+  admin: { description },
+  name: 'validationMessage',
+})

package/template/src/globals/index.ts

@@ -0,0 +1,8 @@
+import { Settings } from './settings'
+import { baseStorage } from './storage'
+import { Tracking } from './tracking/global'
+import { SiteMetaData } from './siteMetaData'
+
+const globals = [Settings, Tracking, SiteMetaData, baseStorage('draft'), baseStorage('published')]
+
+export default globals

package/template/src/globals/settings.ts

@@ -0,0 +1,36 @@
+import type { GlobalConfig } from 'payload'
+import { authd } from '@/access/authenticated'
+import { revalidateCache } from '@/hooks/global/revalidate'
+
+const d = {
+  draft: 'Settings for the draft version of the website.',
+  published: 'Settings for the published version of the website.',
+  storeVersion:
+    "The version of the websites persistent data. Changing this will reset the store, except for the cookie consent preferences. Use this when you change actions and things aren't working as expected.",
+}
+
+export const Settings: GlobalConfig = {
+  slug: 'settings',
+  label: 'Settings',
+  admin: { group: 'Website' },
+  access: { read: authd, update: authd },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          name: 'draft',
+          admin: { description: d.draft },
+          fields: [{ name: 'storeVersion', type: 'number', required: true, defaultValue: 0, admin: { description: d.storeVersion } }],
+        },
+        {
+          name: 'published',
+          admin: { description: d.published },
+          fields: [{ name: 'storeVersion', type: 'number', required: true, defaultValue: 0, admin: { description: d.storeVersion } }],
+        },
+      ],
+    },
+  ],
+  hooks: { beforeChange: [revalidateCache] },
+  versions: { drafts: { schedulePublish: true, validate: true }, max: 10 },
+}

package/template/src/globals/siteMetaData.ts

@@ -0,0 +1,29 @@
+import { APField } from '@/fields/apf'
+import type { GlobalConfig } from 'payload'
+import { authd } from '@/access/authenticated'
+import { FaviconField } from '@/fields/favicon'
+import { onUploadSetAPF } from '@/hooks/field/apf'
+import { generateAPFFields } from '@/fields/apf/storage'
+import { revalidateCache } from '@/hooks/global/revalidate'
+
+export const SiteMetaData: GlobalConfig = {
+  slug: 'siteMetaData',
+  label: 'Site MetaData',
+  admin: { group: 'Website' },
+  access: { read: authd, update: authd },
+  fields: [
+    APField({ type: 'text', apf: ['siteMetadata'], name: 'siteName' }),
+    APField({ type: 'textarea', apf: ['siteMetadata'], name: 'fallbackSiteDescription' }),
+    { type: 'upload', name: 'fallbackOGImage', relationTo: 'images', hooks: { afterChange: [onUploadSetAPF(['siteMetadata'])] } },
+    {
+      type: 'row',
+      fields: [
+        FaviconField({ apf: ['siteMetadata'], name: 'fallbackLightFavicon' }),
+        FaviconField({ apf: ['siteMetadata'], name: 'fallbackDarkFavicon' }),
+      ],
+    },
+    ...generateAPFFields(['siteMetadata']),
+  ],
+  hooks: { beforeChange: [revalidateCache] },
+  versions: { drafts: { schedulePublish: true, validate: true }, max: 10 },
+}