@pro-laico/create-atomic-payload 0.1.4

package/template/src/globals/storage.ts

@@ -0,0 +1,15 @@
+import type { GlobalConfig } from 'payload'
+import { authd } from '@/access/authenticated'
+
+export function baseStorage(name: string): GlobalConfig {
+  return {
+    slug: `${name}Storage`,
+    admin: { group: 'Storage' },
+    access: { read: authd, update: authd },
+    fields: [
+      { name: 'cssSize', type: 'number', required: true },
+      { name: 'layoutCSS', type: 'code', admin: { language: 'css' }, required: true },
+    ],
+    // Does not have its own revalidation hook because it should not be updated directly.
+  }
+}

package/template/src/globals/tracking/global.ts

@@ -0,0 +1,25 @@
+import type { GlobalConfig } from 'payload'
+import { authd } from '@/access/authenticated'
+import { postHogTabField } from './tabs/postHog'
+import { googleTagManagerTabField } from './tabs/gtm'
+import { revalidateCache } from '@/hooks/global/revalidate'
+
+export const Tracking: GlobalConfig = {
+  slug: 'tracking',
+  label: 'Settings',
+  admin: { group: 'Tracking' },
+  access: { read: authd, update: authd },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        { name: 'googleTagManagerEnabled', type: 'checkbox', defaultValue: false, admin: { position: 'sidebar' } },
+        { name: 'postHogEnabled', type: 'checkbox', defaultValue: false, admin: { position: 'sidebar' } },
+        { name: 'vercelAnalyticsEnabled', type: 'checkbox', defaultValue: false, admin: { position: 'sidebar' } },
+      ],
+    },
+    { type: 'tabs', tabs: [googleTagManagerTabField(), postHogTabField()] },
+  ],
+  hooks: { beforeChange: [revalidateCache] },
+  versions: { drafts: { schedulePublish: true, validate: true }, max: 10 },
+}

package/template/src/globals/tracking/tabs/gtm.ts

@@ -0,0 +1,18 @@
+import { TabAsField } from 'payload'
+
+export const googleTagManagerTabField = () => {
+  const storageField: TabAsField = {
+    type: 'tab',
+    label: 'Google Tag Manager',
+    admin: { condition: (_, siblingData) => siblingData?.googleTagManagerEnabled === true },
+    fields: [
+      {
+        name: 'googleTagManagerId',
+        type: 'text',
+        label: 'Google Tag Manager ID',
+        admin: { condition: (_, siblingData) => siblingData.googleTagManagerEnabled },
+      },
+    ],
+  }
+  return storageField
+}

package/template/src/globals/tracking/tabs/postHog.ts

@@ -0,0 +1,35 @@
+import { TabAsField } from 'payload'
+
+export const postHogTabField = () => {
+  const storageField: TabAsField = {
+    type: 'tab',
+    label: 'PostHog',
+    admin: { condition: (_, sd) => Boolean(sd?.postHogEnabled) },
+    fields: [
+      { name: 'postHogPublicKey', type: 'text', required: true },
+      { name: 'postHogHost', type: 'text', defaultValue: 'https://us.i.posthog.com', required: true },
+      {
+        type: 'group',
+        label: 'Feature Toggles',
+        admin: { condition: (_, sd) => Boolean(sd?.postHogEnabled) },
+        fields: [
+          { name: 'enableAutoCapture', type: 'checkbox', defaultValue: true },
+          { name: 'disableSessionRecording', type: 'checkbox', defaultValue: false },
+          { name: 'disableSurveys', type: 'checkbox', defaultValue: false },
+          { name: 'capturePerformance', type: 'checkbox', defaultValue: true },
+        ],
+      },
+      {
+        type: 'group',
+        name: 'postHogAutoCaptureSettings',
+        label: 'Auto Capture Settings',
+        admin: { condition: (_, sd) => Boolean(sd?.postHogEnabled) },
+        fields: [
+          { name: 'urlAllowList', type: 'array', fields: [{ name: 'url', type: 'text' }] },
+          { name: 'urlIgnoreList', type: 'array', fields: [{ name: 'url', type: 'text' }] },
+        ],
+      },
+    ],
+  }
+  return storageField
+}

package/template/src/hooks/collection/atomicHook/atomicHook.ts

@@ -0,0 +1,223 @@
+'use server'
+import { z } from '@/ts/zap'
+import traverse from 'traverse'
+import { runAPF } from '@/utilities/runAPF'
+import manualLogger from '@/utilities/log/manual'
+import sanitizeData from '@/utilities/sanitizeData'
+import { revalidateTag } from '@/utilities/revalidateTag'
+import type { CollectionBeforeChangeHook } from 'payload'
+import { CollectionBySlug, CollectionThatUsesCSSProcessor, StoredAtomicForm, StoredAtomicFormInput } from '@/ts/types'
+
+//Processors
+import { unsetActive } from './processors/unsetActive'
+import { cssProcessor } from './processors/cssProcessor'
+import processDesignSet from './processors/processDesignSet'
+import { ActionBlockStorageProcessor } from '@/blocks/actions/processor'
+
+function findClosestParent(inputPath: string[], parentPaths: MapIterator<string>): string | null {
+  const inputPathString = inputPath.join('.')
+  let bestMatch = { length: 0, path: '' }
+
+  for (const path of Array.from(parentPaths)) {
+    if (inputPathString.startsWith(path) && path.length > bestMatch.length) bestMatch = { length: path.length, path }
+  }
+  return bestMatch.path
+}
+
+export const atomicHook: CollectionBeforeChangeHook = async ({ collection, context, data, originalDoc, operation, req }) => {
+  if (context.isSeed) return // <- Can be removed if you no longer intend to seed the db
+  const slug = z.ap.get('CollectionThatUsesAtomicHookSlug').parse(collection.slug)
+  const draft = data?._status === 'draft'
+  const isActive = Boolean(data?.active)
+  const id = 'id' in originalDoc ? originalDoc?.id : undefined
+  const hasChildren = 'children' in data && data?.children?.length > 0
+
+  let href: string | undefined
+  let runSlug = false
+  if (slug === 'pages') {
+    //KNOWN ISSUE: If a page is edited without any active triggers, the published version will not update since its tag isn't revalidated.
+    //The solution must account for nested pages, so they don't also trigger a revalidation.
+    const previousHref = data?.href
+    // Because href is updated by its own field, we need to use breadcrumbs to get the latest href.
+    href = data?.breadcrumbs && data?.breadcrumbs?.length > 0 ? data?.breadcrumbs[data?.breadcrumbs?.length - 1]?.url : undefined
+    runSlug = operation !== 'create' ? (data?.slug !== originalDoc?.slug ? true : false) : data?.live
+    if (operation !== 'create' && previousHref !== href ? true : false) await revalidateTag('page', previousHref, draft)
+  }
+
+  // Check to see what should be run based on the ap trigger values of the document. Do not pass sanitized data.
+  const runSEO = runAPF({ context, id, apf: 'seo', data })
+  const runPage = runAPF({ context, id, apf: 'page', data })
+  const runForms = runAPF({ context, id, apf: 'form', data })
+  const runPages = runAPF({ context, id, apf: 'pages', data })
+  const runActive = runAPF({ context, id, apf: 'active', data })
+  const runClasses = runAPF({ context, id, apf: 'classes', data })
+  const runActions = runAPF({ context, id, apf: 'actions', data })
+  const runSitemap = runAPF({ context, id, apf: 'sitemap', data })
+  const runSiteMetadata = runAPF({ context, id, apf: 'siteMetadata', data })
+
+  // Used to dedupe and add extra dependencies for processor triggers.
+  const r = {
+    forms: runForms,
+    classes: runClasses,
+    actions: runActions,
+    sitemap: runSitemap,
+    siteMetadata: runSiteMetadata,
+    seo: runSEO || runPage,
+    pages: runPages || runSlug,
+    active: runActive || isActive,
+    page: runPage || runClasses || runActions || runForms || runSEO,
+  }
+  if (Object.values(r).every((v) => v === false)) {
+    if (hasChildren) return { ...data, children: sanitizeData(data.children) }
+    else return data
+  }
+
+  // /////////////////////////////////////
+  // Unset Active Processing
+  // /////////////////////////////////////
+
+  //When changing active status, due to draft and published may be different, will sometimes require running a processor again.
+  if (r.active) {
+    const unsetSlug = await unsetActive({ id, draft, req, slug })
+    if (unsetSlug) {
+      switch (unsetSlug) {
+        case 'header':
+        case 'footer':
+          r.forms = true
+          r.classes = true
+          r.actions = true
+          break
+        case 'designSet':
+        case 'shortcutSet':
+          r.classes = true
+          break
+        default:
+          break
+      }
+    }
+  }
+
+  // /////////////////////////////////////
+  // Children Processing
+  // /////////////////////////////////////
+
+  const ABSP = new ActionBlockStorageProcessor()
+  const classes = new Set<string>()
+  const formMap = new Map<string, StoredAtomicForm>()
+  const sd = sanitizeData(data) as CollectionBySlug<typeof slug> //Reduces impact of recursive data structure
+
+  if (hasChildren && r.actions) {
+    traverse(sd).forEach(function (node) {
+      if (node && typeof node === 'object') ABSP.setKeyInitialValueByBlock({ node })
+    })
+  }
+
+  if (hasChildren) {
+    traverse(sd).forEach(function (node) {
+      // Store Atomic Classes
+      if (r.classes && this?.key?.endsWith('ClassName') && node) node.split(/\s+/).forEach((cls: string) => classes.add(cls.trim()))
+
+      // Build Form Map
+      if (r.forms && this.path && typeof node === 'object' && node?.type === 'form' && node.children) {
+        const formData: StoredAtomicForm = { id: node.id, backendForm: node.backendForm, sm: node.sm, em: node.em }
+
+        if (node.formSanitationBlocks) formData.sanitation = node.formSanitationBlocks
+        if (node.formValidationBlocks) formData.validation = node.formValidationBlocks
+        if (node.formRateLimitBlocks) formData.rateLimiting = node.formRateLimitBlocks
+
+        formMap.set(this.path.join('.'), formData)
+      }
+
+      // Top Down Handling Goes Here
+      this.before(function (node) {
+        if (!node) return
+        // Set Up Values For Actions
+        if (r.actions && typeof node === 'object') ABSP.before({ node, path: this.path })
+      })
+
+      // Bottom Up Handling Goes Here
+      this.after(function (node) {
+        if (!node) return
+        // Add Inputs to Form Map
+        if (r.forms && this.path && typeof node === 'object' && node?.type === 'input') {
+          const closestFormKey = findClosestParent(this.path, formMap.keys())
+          if (closestFormKey) {
+            const form = formMap.get(closestFormKey)
+            if (form) {
+              if (!form.inputs) form.inputs = []
+              const inputData: StoredAtomicFormInput = { id: node.id, type: node.inputType, inputName: node.inputName }
+              if (node.inputSanitationBlocks) inputData.sanitationBlocks = node.inputSanitationBlocks
+              if (node.inputValidationBlocks) inputData.validationBlocks = node.inputValidationBlocks
+              form.inputs.push(inputData)
+            }
+          }
+        }
+
+        // Add Actions To Blocks
+        if (r.actions) ABSP.after({ node: node, path: this.path })
+
+        if (node === undefined || node === null) throw new Error(`Processed Node Was Set To Undefined Or Null at path: ${this.path.join('.')}`)
+        this.update(node, true)
+      })
+    })
+  }
+
+  // /////////////////////////////////////
+  // Non Cache Dependent Data Processing
+  // /////////////////////////////////////
+
+  if ('children' in data && 'children' in sd) data.children = sd?.children
+
+  if (r.classes) {
+    if ('storedAtomicClasses' in data) {
+      const classesArray = Array.from(classes)
+      data.storedAtomicClasses = classesArray
+      context.storedAtomicClasses = classesArray
+      if (classesArray.length > 0)
+        manualLogger(`[STORE] - Atomic Classes - ${data?.title || originalDoc?.id} - ${classesArray.length} Classes Stored`)
+    }
+    if (slug === 'designSet') processDesignSet(data as CollectionBySlug<'designSet'>) //Mutates data
+    context[slug] = data as Extract<CollectionThatUsesCSSProcessor, { slug: typeof slug }>
+  }
+
+  if (r.forms) {
+    if ('storedAtomicForms' in data) {
+      const formsArray = Array.from(formMap.values())
+      data.storedAtomicForms = formsArray
+      context.storedAtomicForms = formsArray
+    }
+    if (formMap.size > 0) manualLogger(`[STORE] - Atomic Forms - ${data?.title || originalDoc?.id} - ${formMap.size} Forms Stored`)
+  }
+
+  if (r.actions) {
+    const aa = ABSP.getAllActionBlocks()
+    if ('storedAtomicActions' in data) {
+      data.storedAtomicActions = aa
+      context.storedAtomicActions = aa
+    }
+    if (aa) manualLogger(`[STORE] - Atomic Actions - ${data?.title || originalDoc?.id} - ${Object.keys(aa).length} Actions Stored`)
+  }
+
+  // /////////////////////////////////////
+  // Revalidate Tags
+  // /////////////////////////////////////
+
+  if (r.sitemap) await revalidateTag('sitemap', draft)
+  if (r.forms) await revalidateTag('atomic-forms', draft)
+  if (r.actions) await revalidateTag('atomic-actions', draft)
+  if (r.siteMetadata) await revalidateTag('site-metadata', draft)
+  if (slug !== 'pages' && r.active) await revalidateTag(slug, draft)
+  if (slug === 'pages' && r.classes) await revalidateTag('atomic-classes', draft)
+
+  if (r.pages) await revalidateTag('pages', draft)
+  if (r.page && href) await revalidateTag('page', href, draft)
+
+  // /////////////////////////////////////
+  // Cache Dependent Data Processing
+  // /////////////////////////////////////
+  if (r.classes && slug !== 'iconSet') {
+    await cssProcessor({ slug, context, draft: true, req })
+    if (!draft) await cssProcessor({ slug, context, draft: false, req })
+  }
+  return data
+}

package/template/src/hooks/collection/atomicHook/processors/cssProcessor.ts

@@ -0,0 +1,60 @@
+import deepMerge from '@/utilities/deepMerge'
+import manualLogger from '@/utilities/log/manual'
+import type { cssProcessorType } from '@/ts/types'
+import getCached from '@/utilities/get/cache/react'
+import { defaultAtomicClasses } from '@/collections/designSets/defaults'
+import { createGenerator, PresetWind4Theme, presetWind4, presetAttributify, presetTypography } from 'unocss'
+
+export const cssProcessor: cssProcessorType = async ({ slug, context, draft, req }) => {
+  const pagesAtomicClasses = await getCached('atomic-classes', draft)
+  const header = slug !== 'header' ? await getCached('header', draft) : context?.header
+  const footer = slug !== 'footer' ? await getCached('footer', draft) : context?.footer
+  const ds = slug !== 'designSet' ? await getCached('designSet', draft) : context?.designSet
+  const shortcutSet = slug !== 'shortcutSet' ? await getCached('shortcutSet', draft) : context?.shortcutSet
+
+  // Classes contained within unoShortcuts are automatically added to the classNames set, but in createGenerator.
+  const shortcuts = [...(shortcutSet?.shortcuts || []), ...(shortcutSet?.defaultShortcuts || [])].reduce((acc: Record<string, string>, shortcut) => {
+    if (shortcut.ClassName) acc[shortcut.name] = shortcut.ClassName
+    return acc
+  }, {})
+
+  const classNames: Set<string> = new Set([
+    ...(pagesAtomicClasses || []),
+    ...(defaultAtomicClasses || []),
+    ...(header?.storedAtomicClasses || []),
+    ...(footer?.storedAtomicClasses || []),
+    ...(context?.storedAtomicClasses || []),
+    ...[...(ds?.htmlClassName?.split(' ') || [])],
+    ...[...(ds?.bodyClassName?.split(' ') || [])],
+    ...[...(ds?.wrapperClassName?.split(' ') || [])],
+  ])
+
+  const defaultClasses = { spacing: { DEFAULT: ds?.tokenStorage?.variables?.spacing || '0.25rem' } }
+
+  const uno = await createGenerator({
+    shortcuts,
+    preflights: [{ getCSS: () => `${ds?.preflightStorage || ''}` }],
+    presets: [
+      presetWind4(),
+      presetAttributify(),
+      presetTypography({
+        colorScheme: ds?.proseColorStorage,
+        cssExtend: ds?.proseDefaultStorage,
+        sizeScheme: {
+          sm: ds?.prosesmStorage || {},
+          base: ds?.proseBaseStorage || {},
+          lg: ds?.proselgStorage || {},
+        },
+      }),
+    ],
+    extendTheme: (theme: PresetWind4Theme) => deepMerge(theme, deepMerge(ds?.tokenStorage, defaultClasses)),
+  })
+
+  const updatedAt = new Date().toISOString()
+  const { css } = await uno.generate(Array.from(classNames), { minify: ds?.minify })
+
+  await req.payload.updateGlobal({ req, slug: `${draft ? 'draft' : 'published'}Storage`, data: { layoutCSS: css, cssSize: css.length, updatedAt } })
+  manualLogger(`[UPDATE] (Global) - ${draft ? 'Draft' : 'Published'} CSS Storage - ${css.length} bytes`)
+
+  return css
+}

package/template/src/hooks/collection/atomicHook/processors/processDesignSet/generatePreflights.ts

@@ -0,0 +1,36 @@
+import { DesignSet } from '@/ts/types'
+
+function generatePreflights({ ds }: { ds: DesignSet }): string {
+  const minify = ds?.minify ?? true
+
+  const variables = (ds?.variables || []).map((variable) => `  --${variable?.name}: ${variable?.value};`).join(minify ? '' : '\n')
+
+  const defaults = minify
+    ? `--radius: ${ds?.defaults?.radius || '0.625rem'};`
+    : `  
+  --radius: ${ds?.defaults?.radius || '0.625rem'};
+  `
+
+  // Colors
+  const lightColors = (ds?.colors || []).map((color) => `  --${color?.name}: ${color?.light};`).join(minify ? '' : '\n')
+  const darkColors = (ds?.colors || []).map((color) => `  --${color?.name}: ${color?.dark};`).join(minify ? '' : '\n')
+
+  let result: string
+
+  if (minify) {
+    result = `:root{${lightColors}${variables}${defaults}}.dark{${darkColors}}`
+  } else {
+    result = `:root {\n${lightColors}\n${variables}\n${defaults}\n}\n.dark {\n${darkColors}\n}\n`
+
+    // Apply formatting for non-minified output
+    result = result
+      .split('\n')
+      .map((line: string) => line.trim())
+      .filter((line: string) => line.length > 0)
+      .join('\n')
+  }
+
+  return result
+}
+
+export default generatePreflights

package/template/src/hooks/collection/atomicHook/processors/processDesignSet/index.ts

@@ -0,0 +1,176 @@
+import { z } from '@/ts/zap'
+import manualLogger from '@/utilities/log/manual'
+import generatePreflights from './generatePreflights'
+import { designSetColors } from '@/collections/designSets/tabs/colors'
+import { TokenString, TokenStringArray } from '@/fields/designSets/value'
+import type { DesignSet, TokenStorage, RSS, RSSOSA, UnoThemeAnimation, UnoColors as UnoColorsType } from '@/ts/types'
+
+const processTokenString = z.function({ input: [z.ap.get('TokenString', TokenString)], output: z.ap.get('RSS') }).implement((input) => {
+  if (!input) return {}
+  const result = input.reduce<RSS>((acc, item) => {
+    if (item.name && item.value) acc[item.name] = item.value
+    return acc
+  }, {})
+  return result
+})
+
+const processTokenStringArray = z
+  .function({ input: [z.ap.get('TokenStringArray', TokenStringArray)], output: z.ap.get('RSSOSA') })
+  .implement((input) => {
+    if (!input) return {}
+    const result = input.reduce<RSSOSA>((acc, item) => {
+      if (item.name && Array.isArray(item.values)) {
+        const values = item.values.map((val) => val.value).filter((val): val is string => val !== undefined)
+        acc[item.name] = values
+      }
+      return acc
+    }, {})
+    return result
+  })
+
+const processProperty = z.function({ input: [z.ap.get('TokenStringArray', TokenStringArray)], output: z.ap.get('RSS') }).implement((input) => {
+  if (!input) return {}
+  const result = input.reduce<RSS>((acc, item) => {
+    if (item.name && Array.isArray(item.values)) {
+      const values = item.values.map((val) => val.value).filter((val): val is string => val !== undefined)
+      acc[item.name] = values.join(',')
+    }
+    return acc
+  }, {})
+  return result
+})
+
+function generateUnoFonts(fonts: DesignSet['font'] | undefined): RSS {
+  if (!fonts) return {}
+  return { mono: `var(--font-setMono)`, sans: `var(--font-setSans)`, serif: `var(--font-setSerif)`, display: `var(--font-setDisplay)` }
+}
+
+function generateUnoAnimation(input: DesignSet['animation'] | undefined): UnoThemeAnimation {
+  if (!input) return {}
+  return {
+    category: input.reduce<RSS>((acc, i: { name?: string; category?: string | null }) => {
+      if (i.name && i.category) acc[i.name.toLowerCase().replace(/\s+/g, '-')] = i.category
+      return acc
+    }, {}),
+    keyframes: input.reduce<RSS>((acc, i: { name?: string; keyframes?: string | null }) => {
+      if (i.name && i.keyframes) acc[i.name.toLowerCase().replace(/\s+/g, '-')] = i.keyframes
+      return acc
+    }, {}),
+    durations: input.reduce<RSS>((acc, i: { name?: string; duration?: string | null }) => {
+      if (i.name && i.duration) acc[i.name.toLowerCase().replace(/\s+/g, '-')] = i.duration
+      return acc
+    }, {}),
+    timingFns: input.reduce<RSS>((acc, i: { name?: string; timingFns?: string | null }) => {
+      if (i.name && i.timingFns) acc[i.name.toLowerCase().replace(/\s+/g, '-')] = i.timingFns
+      return acc
+    }, {}),
+    counts: input.reduce<RSS>((acc, i: { name?: string; counts?: string | null }) => {
+      if (i.name && i.counts) acc[i.name.toLowerCase().replace(/\s+/g, '-')] = i.counts
+      return acc
+    }, {}),
+  }
+}
+
+const processColors = z.function({ input: [z.ap.get('DesignSetColors', designSetColors)], output: z.ap.get('UnoColors') }).implement((input) => {
+  if (!input) return {}
+
+  const o = input.reduce<UnoColorsType>((acc, color) => {
+    if (!color) return acc
+    acc[color.name] = `var(--${color.name})`
+    return acc
+  }, {})
+  return o
+})
+
+function processAria(input: DesignSet['aria'] | undefined): RSS {
+  if (!input) return {}
+
+  return input.reduce<RSS>((acc, item) => {
+    if (item.value) acc[item.value] = `${item.value}="${item.value}"`
+    return acc
+  }, {})
+}
+
+function processProseColor(input: DesignSet['proseColors'] | undefined): Record<string, [string, string]> {
+  if (!input) return {}
+
+  return Object.entries(input).reduce<Record<string, [string, string]>>((acc, [name, item]) => {
+    acc[name] = [item.light, item.dark]
+    return acc
+  }, {})
+}
+
+function processProseTagStyles(input: NonNullable<DesignSet['proseStyles']>['default'] | undefined): Record<string, Record<string, string>> {
+  if (!input) return {}
+
+  return input.reduce<Record<string, Record<string, string>>>((acc, { tag, psuedoClass, values }) => {
+    if (!values || !tag) return acc
+
+    const fullTag = psuedoClass ? `${tag}${psuedoClass}` : tag
+
+    acc[fullTag] ??= {}
+
+    for (const { cssSelector, value } of values) acc[fullTag][cssSelector] = value
+
+    return acc
+  }, {})
+}
+
+const processDesignSet = (ds: DesignSet): void => {
+  const tokenStorage: TokenStorage = {
+    //Colors
+    colors: processColors(ds.colors || []), //Custom
+
+    //Variables
+    variables: {
+      spacing: ds.defaults?.spacing || '0.25rem',
+      radius: ds.defaults?.radius || '0.625rem',
+      ...processTokenString(ds?.variables),
+    },
+
+    //Animations
+    ease: processTokenString(ds?.ease),
+    animation: generateUnoAnimation(ds?.animation), //Custom
+    property: processProperty(ds?.property), //Custom
+
+    //Miscellaneous
+    aria: processAria(ds?.aria),
+    blur: processTokenString(ds?.blur),
+    media: processTokenString(ds?.media),
+    supports: processTokenString(ds?.supports),
+    perspective: processTokenString(ds?.perspective),
+    shadow: processTokenStringArray(ds?.shadow),
+    textShadow: processTokenStringArray(ds?.textShadow),
+    dropShadow: processTokenStringArray(ds?.dropShadow),
+    insetShadow: processTokenStringArray(ds?.insetShadow),
+
+    //Sizes
+    radius: processTokenString(ds?.radius),
+    spacing: processTokenString(ds?.spacing),
+    container: processTokenString(ds?.container),
+    breakpoint: processTokenString(ds?.breakpoint),
+
+    // Fonts
+    font: generateUnoFonts(ds?.font), //Custom
+    leading: processTokenString(ds?.leading),
+    tracking: processTokenString(ds?.tracking),
+    fontWeight: processTokenString(ds?.fontWeight),
+    textStrokeWidth: processTokenString(ds?.textStrokeWidth),
+  }
+
+  const preflightStorage = generatePreflights({ ds })
+  ds.proseColorStorage = processProseColor(ds.proseColors)
+
+  ds.proseDefaultStorage = processProseTagStyles(ds?.proseStyles?.default)
+  ds.prosesmStorage = processProseTagStyles(ds?.proseStyles?.sm)
+  ds.proseBaseStorage = processProseTagStyles(ds?.proseStyles?.base)
+  ds.proselgStorage = processProseTagStyles(ds?.proseStyles?.lg)
+
+  ds.tokenStorage = tokenStorage
+  ds.preflightStorage = preflightStorage
+  ds.updatedAt = new Date().toISOString()
+
+  manualLogger(`[STORE] - Design Set - ${ds?.title}`)
+}
+
+export default processDesignSet

package/template/src/hooks/collection/atomicHook/processors/unsetActive.ts

@@ -0,0 +1,24 @@
+import { PayloadRequest, CollectionSlug } from 'payload'
+import manualLogger from '@/utilities/log/manual'
+
+export type UnsetActiveType = (args: { id: string; draft: boolean; req: PayloadRequest; slug: CollectionSlug }) => Promise<string | undefined>
+
+export const unsetActive: UnsetActiveType = async ({ id, draft, req, slug }) => {
+  try {
+    const results = await req.payload
+      .update({
+        req,
+        draft,
+        collection: slug,
+        data: { active: false },
+        where: { active: { equals: true }, id: { not_equals: id }, _status: { equals: draft ? 'draft' : 'published' } },
+      })
+      .then((res) => res?.docs.map((doc) => ('title' in doc ? doc?.title : doc?.id)))
+
+    if (results && results.length > 0) manualLogger(`[UPDATE] Removed active status from: (${results?.join('), (')})`)
+    else manualLogger(`[INFO] No active status to remove from ${slug} docs.`)
+    return slug
+  } catch (error) {
+    manualLogger(`[ERROR] Error removing active status from ${slug} docs. ${error}`)
+  }
+}