@pro-laico/create-atomic-payload 0.1.4

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

@@ -0,0 +1,157 @@
+'use server'
+import { Icon } from '@/ts/types'
+import type { CollectionBeforeChangeHook } from 'payload'
+
+export const formatSvg = async (icon: Partial<Icon>, svgData: Buffer): Promise<Partial<Icon>> => {
+  try {
+    // Dynamic imports to ensure these only load server-side
+    const [{ optimize }, { svgPathBbox }] = await Promise.all([import('svgo'), import('svg-path-bbox')])
+
+    const svg = svgData.toString('utf-8')
+    const originalSize = svgData.length
+
+    const hasTransforms = svg.includes('transform=')
+    const hasClipPaths = svg.includes('clip-path=') || svg.includes('<clipPath')
+    if (hasTransforms || hasClipPaths) {
+      console.warn('Unsupported SVG features:', { hasTransforms, hasClipPaths })
+      return icon
+    }
+
+    const optimized = optimize(svg, {
+      path: 'input.svg',
+      multipass: true,
+      plugins: [
+        'preset-default',
+        'convertStyleToAttrs',
+        'removeDimensions',
+        {
+          name: 'removeAttrs',
+          params: {
+            attrs: [
+              'fill',
+              'stroke',
+              'stroke-width',
+              'stroke-linecap',
+              'stroke-linejoin',
+              'stroke-miterlimit',
+              'stroke-dasharray',
+              'stroke-dashoffset',
+            ],
+          },
+        },
+        { name: 'cleanupIds', params: { minify: true, remove: false } },
+        { name: 'mergePaths', params: { force: false, noSpaceAfterFlags: true } },
+        { name: 'cleanupNumericValues', params: { floatPrecision: 1, leadingZero: true } },
+        { name: 'removeUnknownsAndDefaults', params: { keepAriaAttrs: true, keepDataAttrs: true, keepRoleAttr: true } },
+        { name: 'addAttributesToSVGElement', params: { attributes: [{ fill: 'currentColor' }, { stroke: 'currentColor' }] } },
+        { name: 'convertTransform', params: { convertToShorts: true, degPrecision: 1, floatPrecision: 1, transformPrecision: 1 } },
+        {
+          name: 'convertPathData',
+          params: { floatPrecision: 1, leadingZero: true, noSpaceAfterFlags: true, removeUseless: true, straightCurves: true, transformPrecision: 1 },
+        },
+        {
+          name: 'sortAttrs',
+          params: {
+            order: [
+              'id',
+              'class',
+              'style',
+              'x',
+              'y',
+              'width',
+              'height',
+              'viewBox',
+              'fill',
+              'stroke',
+              'stroke-width',
+              'stroke-linecap',
+              'stroke-linejoin',
+              'stroke-miterlimit',
+              'stroke-dasharray',
+              'stroke-dashoffset',
+              'd',
+              'transform',
+            ],
+          },
+        },
+      ],
+      js2svg: { pretty: true, indent: 2, eol: 'lf' },
+    })
+
+    let svgStr = optimized.data
+
+    // Round viewBox coordinates to 1 decimal place
+    svgStr = svgStr.replace(/viewBox="([^"]+)"/g, (match, viewBox) => {
+      const coords = viewBox
+        .split(' ')
+        .map((coord: string) => {
+          return isNaN(parseFloat(coord)) ? coord : parseFloat(coord).toFixed(1)
+        })
+        .join(' ')
+      return `viewBox="${coords}"`
+    })
+
+    // Extract paths
+    const paths = Array.from(svgStr.matchAll(/<path[^>]*d="([^"]+)"/g))
+
+    if (paths.length) {
+      let minX = Infinity,
+        minY = Infinity,
+        maxX = -Infinity,
+        maxY = -Infinity
+
+      for (const [, d] of paths) {
+        try {
+          const [x1, y1, x2, y2] = svgPathBbox(d)
+          minX = Math.min(minX, x1)
+          minY = Math.min(minY, y1)
+          maxX = Math.max(maxX, x2)
+          maxY = Math.max(maxY, y2)
+        } catch (e) {
+          console.warn('Failed to calculate path bounds:', e)
+        }
+      }
+
+      if (minX !== Infinity && minY !== Infinity && maxX !== -Infinity && maxY !== -Infinity) {
+        const width = maxX - minX
+        const height = maxY - minY
+
+        // Square viewBox with minimal padding - just enough to center the content
+        const side = Math.max(width, height)
+        const centerX = minX + width / 2
+        const centerY = minY + height / 2
+        const newViewBox = `${(centerX - side / 2).toFixed(1)} ${(centerY - side / 2).toFixed(1)} ${side.toFixed(1)} ${side.toFixed(1)}`
+
+        // Replace or insert viewBox
+        svgStr = svgStr.includes('viewBox=')
+          ? svgStr.replace(/viewBox="[^"]+"/, `viewBox="${newViewBox}"`)
+          : svgStr.replace('<svg', `<svg viewBox="${newViewBox}"`)
+      }
+    }
+
+    const finalSize = Buffer.from(svgStr).length
+    const reduction = originalSize - finalSize
+    const reductionPercentage = ((reduction / originalSize) * 100).toFixed(1)
+    const optimizedString = `SVG optimized: ${originalSize} to ${finalSize} bytes (${reductionPercentage}% reduction)`
+    console.info(optimizedString)
+
+    return { ...icon, svgString: svgStr, optimized: optimizedString, filesize: finalSize }
+  } catch (error) {
+    console.error('Error processing SVG:', error)
+    return icon
+  }
+}
+
+export const formatSVGHook: CollectionBeforeChangeHook<Icon> = async ({ data, operation, req }) => {
+  if (operation === 'create' || operation === 'update') {
+    if (data?.filename && req.file) {
+      try {
+        return await formatSvg(data, req.file.data)
+      } catch (error) {
+        console.warn('Error in formatSVGHook:', error)
+        return data
+      }
+    }
+  }
+  return data
+}

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

@@ -0,0 +1,53 @@
+import { revalidateTag } from '@/utilities/revalidateTag'
+import type { CollectionBeforeChangeHook, CollectionAfterDeleteHook } from 'payload'
+
+/**
+ * Unified collection hook that handles all revalidations on document changes.
+ * Uses collection slug to determine which revalidation logic to apply.
+ */
+export const revalidateCache: CollectionBeforeChangeHook = async ({ collection, data, originalDoc, context }) => {
+  if (context.isSeed) return
+  const slug = collection.slug
+  const active = Boolean(data?.active)
+  const draft = data?._status === 'draft'
+
+  switch (slug) {
+    case 'iconSet':
+      if (active) await revalidateTag('iconSet', draft)
+      break
+    case 'forms':
+      await revalidateTag('backend-forms')
+      await revalidateTag('form-submissions', data?.title)
+      break
+    case 'form-submissions':
+      await revalidateTag('form-submissions', data?.form)
+      break
+    case 'images':
+      await revalidateTag('image', originalDoc?.id)
+      break
+    case 'icon':
+      await revalidateTag('icon', originalDoc?.id, draft)
+      break
+  }
+}
+
+/**
+ * Unified collection hook that handles all revalidations on document deletion.
+ * Uses collection slug to determine which revalidation logic to apply.
+ */
+export const revalidateCacheOnDelete: CollectionAfterDeleteHook = async ({ collection, doc }) => {
+  const { slug: tag } = collection
+  switch (tag) {
+    case 'footer':
+    case 'header':
+    case 'iconSet':
+    case 'designSet':
+    case 'shortcutSet':
+      if (Boolean(doc?.active)) await revalidateTag(tag, false)
+      break
+    case 'pages':
+      revalidateTag(tag, false)
+      revalidateTag('page', doc?.href, false)
+      break
+  }
+}

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

@@ -0,0 +1,5 @@
+import sanitizeData from '@/utilities/sanitizeData'
+import type { CollectionAfterReadHook } from 'payload'
+
+// Would not recommend using this hook, as it is expensive. It is provided in case you want to more easily read recursive data from the database for a short while.
+export const sanitizeAfterRead: CollectionAfterReadHook = async ({ doc }) => sanitizeData(doc)

package/template/src/hooks/field/apf.ts

@@ -0,0 +1,59 @@
+// /////////////////////////////////////
+// ONLY USE THESE HOOKS ON NON RECURSIVE FIELDS
+// OTHERWISE PERFORMANCE WILL SUFFER
+// /////////////////////////////////////
+import type { FieldHook } from 'payload'
+import type { APFunction } from '@/ts/types/apf'
+
+export const virtualAPFBeforeChangeFieldHook: FieldHook = ({ context, value, field, originalDoc }) => {
+  if (!originalDoc?.id) return
+  const key = `${originalDoc?.id}-${field?.name?.replace(/^apf-/, '').trim()}`
+  if (key in context) return
+  context[key] = value
+}
+
+export const virtualAPFAfterReadFieldHook: FieldHook = () => false
+
+/**
+ * Field hook that marks a document as modified when arrays change (shallow comparison).
+ * Only checks array length.
+ *
+ * @fields array
+ * @param apf - The type of change to set in context. {@link APFunctions}
+ */
+export const onArraySetAPFShallow =
+  (apf: APFunction[]): FieldHook =>
+  ({ previousValue, value, context, originalDoc }) => {
+    if (!originalDoc?.id) return
+
+    const hasLengthChange = value?.length !== previousValue?.length
+    if (!hasLengthChange) return
+
+    for (const apfFunction of apf) {
+      const contextKey = `${originalDoc.id}-${apfFunction}`
+      if (context[contextKey]) continue // Respect context values set by other apf before validate hooks.
+      context[contextKey] = true
+    }
+  }
+
+/**
+ * Field hook that marks a document as modified when the upload field changes.
+ *
+ * @fields upload
+ * @param apf - The type of change to set in context. {@link APFunctions}
+ */
+export const onUploadSetAPF =
+  (apf: APFunction[]): FieldHook =>
+  ({ previousValue, value, context, originalDoc }) => {
+    if (!originalDoc?.id) return
+
+    const previousId = previousValue?.id
+    const currentId = value?.id
+    if (previousId === currentId) return
+
+    for (const apfFunction of apf) {
+      const contextKey = `${originalDoc.id}-${apfFunction}`
+      if (context[contextKey]) continue
+      context[contextKey] = true
+    }
+  }

package/template/src/hooks/field/formatSlug.ts

@@ -0,0 +1,23 @@
+import type { FieldHook } from 'payload'
+
+export const formatSlug = (val: string): string =>
+  val
+    .replace(/ /g, '-')
+    .replace(/[^\w-]+/g, '')
+    .toLowerCase()
+
+export const formatSlugHook =
+  (fallback: string): FieldHook =>
+  ({ data, operation, value }) => {
+    if (typeof value === 'string') return formatSlug(value)
+
+    if (operation === 'create' || !data?.slug) {
+      const fallbackData = data?.[fallback] || data?.[fallback]
+
+      if (fallbackData && typeof fallbackData === 'string') {
+        return formatSlug(fallbackData)
+      }
+    }
+
+    return value
+  }

package/template/src/hooks/field/href.ts

@@ -0,0 +1,6 @@
+import type { FieldHook } from 'payload'
+
+export const updateHrefHook: FieldHook = ({ previousValue, data }) => {
+  const lastBreadcrumbUrl = data?.breadcrumbs[data?.breadcrumbs?.length - 1]?.url
+  if (previousValue !== lastBreadcrumbUrl) return lastBreadcrumbUrl
+}

package/template/src/hooks/field/publishedAt.ts

@@ -0,0 +1,5 @@
+import type { FieldHook } from 'payload'
+
+export const updatePublishedAtHook: FieldHook = ({ operation }) => {
+  if (operation === 'update') return new Date()
+}

package/template/src/hooks/frontEnd/atomicStore/create.ts

@@ -0,0 +1,69 @@
+import { createStore } from 'zustand'
+import { baseSlice } from './slices/base'
+import { persist } from 'zustand/middleware'
+import { dynamicSlice } from './slices/dynamic'
+import { consentSlice, STORAGE_KEYS } from './slices/consent'
+import type { AtomicStore, AtomicStoreInitialState } from '@/ts/types'
+
+const safeStorageOperation = <T>(operation: () => T, fallback: T): T => {
+  try {
+    return operation()
+  } catch (error) {
+    console.error('Storage operation failed:', error)
+    return fallback
+  }
+}
+
+//TODO: Implement the initialState, so actions can be site wide, rather than by page. Though this requires many backend changes.
+export const createAtomicStore = (initialState: AtomicStoreInitialState) => {
+  return createStore<AtomicStore>()(
+    persist(
+      (...a) => ({
+        ...baseSlice(...a),
+        ...consentSlice(...a),
+        ...dynamicSlice(...a),
+      }),
+      {
+        name: 'atomic-store',
+        partialize: (state) => ({
+          persisted: state.persisted,
+          preferences: state.preferences,
+          hasConsented: state.hasConsented,
+          previouslyConsented: state.previouslyConsented,
+        }),
+        onRehydrateStorage: () => (state) => {
+          if (!state) return
+          state.setHydrated(true)
+
+          const local = safeStorageOperation(() => localStorage.getItem(STORAGE_KEYS.COOKIE_CONSENT), null)
+          const session = safeStorageOperation(() => sessionStorage.getItem(STORAGE_KEYS.COOKIE_CONSENT), null)
+          // Session storage takes precedence (for session-only declines)
+          if (session === 'false') state.declineCookies()
+
+          // Check localStorage for persistent consent
+          if (local === 'true') {
+            const storedPreferences = safeStorageOperation(() => localStorage.getItem(STORAGE_KEYS.COOKIE_PREFERENCES), null)
+
+            if (storedPreferences) {
+              try {
+                const preferences = JSON.parse(storedPreferences)
+                state.acceptCookies(preferences)
+              } catch (error) {
+                console.error('Error parsing stored preferences:', error)
+                state.acceptCookies()
+              }
+            } else state.acceptCookies()
+          }
+        },
+        //Ensures there are no issues with conflicting versions of the store when editing pages in admin.
+        version: initialState.version,
+        migrate: (persistedState, version) => {
+          if (version !== initialState.version && typeof persistedState === 'object' && persistedState !== null && 'persisted' in persistedState) {
+            delete persistedState.persisted
+          }
+          return persistedState
+        },
+      },
+    ),
+  )
+}

package/template/src/hooks/frontEnd/atomicStore/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+import { useStore } from 'zustand'
+import { createContext, useState, useContext } from 'react'
+import { createAtomicStore } from '@/hooks/frontEnd/atomicStore/create'
+import type { AtomicStore, AtomicStoreProviderProps } from '@/ts/types'
+
+export type AtomicStoreApi = ReturnType<typeof createAtomicStore>
+export const AtomicStoreContext = createContext<AtomicStoreApi | undefined>(undefined)
+
+export const AtomicStoreProvider = ({ children, initialState }: AtomicStoreProviderProps) => {
+  const [store] = useState(() => createAtomicStore(initialState))
+
+  return <AtomicStoreContext.Provider value={store}>{children}</AtomicStoreContext.Provider>
+}
+
+export const useAtomicStore = <T,>(selector: (store: AtomicStore) => T): T => {
+  const atomicStoreContext = useContext(AtomicStoreContext)
+  if (!atomicStoreContext) throw new Error(`useAtomicStore must be used within AtomicStoreProvider`)
+  return useStore(atomicStoreContext, selector)
+}

package/template/src/hooks/frontEnd/atomicStore/slices/base.ts

@@ -0,0 +1,7 @@
+import { StateCreator } from 'zustand'
+import type { AtomicStore, BaseSlice } from '@/ts/types'
+
+export const baseSlice: StateCreator<AtomicStore, [], [], BaseSlice> = (set) => ({
+  hydrated: false,
+  setHydrated: (s) => set({ hydrated: s }),
+})

package/template/src/hooks/frontEnd/atomicStore/slices/consent.ts

@@ -0,0 +1,76 @@
+import { StateCreator } from 'zustand'
+import type { AtomicStore, ConsentPreferences, ConsentSlice } from '@/ts/types'
+
+const COOKIE_EXPIRY_YEARS = 1
+export const STORAGE_KEYS = {
+  COOKIE_CONSENT: 'cookieConsent',
+  COOKIE_PREFERENCES: 'cookiePreferences',
+} as const
+
+const DEFAULT_PREFERENCES: ConsentPreferences = {
+  functional: true,
+  security: true,
+  analytics: false,
+  marketing: false,
+  userData: false,
+  adPersonalization: false,
+  contentPersonalization: false,
+}
+
+// Utility functions
+const setCookie = (name: string, value: string, expiryYears: number = COOKIE_EXPIRY_YEARS) => {
+  const date = new Date()
+  date.setFullYear(date.getFullYear() + expiryYears)
+  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/; SameSite=Lax; Secure`
+}
+
+const safeStorageOperation = <T>(operation: () => T, fallback: T): T => {
+  try {
+    return operation()
+  } catch (error) {
+    console.error('Storage operation failed:', error)
+    return fallback
+  }
+}
+
+export const consentSlice: StateCreator<AtomicStore, [], [], ConsentSlice> = (set) => ({
+  hasConsented: null,
+  previouslyConsented: null,
+  preferences: DEFAULT_PREFERENCES,
+  setPreference: (category, value) => {
+    set((state) => ({ preferences: { ...state.preferences, [category]: category === 'functional' || category === 'security' ? true : value } }))
+  },
+  acceptCookies: (preferences) => {
+    const newPreferences = { ...DEFAULT_PREFERENCES, ...preferences, functional: true, security: true }
+
+    // Batch storage operations
+    safeStorageOperation(() => {
+      setCookie(STORAGE_KEYS.COOKIE_CONSENT, 'true')
+      localStorage.setItem(STORAGE_KEYS.COOKIE_CONSENT, 'true')
+      localStorage.setItem(STORAGE_KEYS.COOKIE_PREFERENCES, JSON.stringify(newPreferences))
+      sessionStorage.removeItem(STORAGE_KEYS.COOKIE_CONSENT)
+    }, null)
+
+    set({ hasConsented: true, previouslyConsented: true, preferences: newPreferences })
+  },
+  declineCookies: () => {
+    const declinedPreferences = {
+      ...DEFAULT_PREFERENCES,
+      // Only functional and security remain true
+      analytics: false,
+      marketing: false,
+      userData: false,
+      adPersonalization: false,
+      contentPersonalization: false,
+    }
+
+    // Batch storage operations
+    safeStorageOperation(() => {
+      localStorage.removeItem(STORAGE_KEYS.COOKIE_CONSENT)
+      localStorage.removeItem(STORAGE_KEYS.COOKIE_PREFERENCES)
+      sessionStorage.setItem(STORAGE_KEYS.COOKIE_CONSENT, 'false')
+    }, null)
+
+    set({ previouslyConsented: true, hasConsented: false, preferences: declinedPreferences })
+  },
+})

package/template/src/hooks/frontEnd/atomicStore/slices/dynamic.ts

@@ -0,0 +1,51 @@
+import { StateCreator } from 'zustand'
+import type { AtomicStore, DynamicSlice } from '@/ts/types'
+
+export const dynamicSlice: StateCreator<AtomicStore, [], [], DynamicSlice> = (set, get) => ({
+  persisted: {},
+  memory: {},
+  setValue: (key, value, persisted) => {
+    if (!get().hydrated) return
+    if (persisted) set((state) => ({ persisted: { ...state.persisted, [key]: value } }))
+    else set((state) => ({ memory: { ...state.memory, [key]: value } }))
+  },
+  getValue: (key, persisted) => {
+    return persisted ? get().persisted[key] : get().memory[key]
+  },
+  removeValue: (key, persisted) => {
+    if (persisted) {
+      set((state) => {
+        const { [key]: _, ...rest } = state.persisted
+        return { persisted: rest }
+      })
+    } else {
+      set((state) => {
+        const { [key]: _, ...rest } = state.memory
+        return { memory: rest }
+      })
+    }
+  },
+})
+
+/*   clearStorage: (persisted) => {
+    if (persisted) set({ persisted: {} })
+    else set({ memory: {} })
+  },
+  setMultiple: (entries) => {
+    const persistedUpdates: Record<string, ImplementedStorageTypes> = {}
+    const memoryUpdates: Record<string, ImplementedStorageTypes> = {}
+    entries.forEach(({ key, value, persisted }) => {
+      if (persisted) persistedUpdates[key] = value
+      else memoryUpdates[key] = value
+    })
+    if (Object.keys(persistedUpdates).length) set((state) => ({ persisted: { ...state.persisted, ...persistedUpdates } }))
+    if (Object.keys(memoryUpdates).length) set((state) => ({ memory: { ...state.memory, ...memoryUpdates } }))
+  },
+  getMultiple: (keys) => {
+    const state = get()
+    const result: Record<string, ImplementedStorageTypes> = {}
+    keys.forEach(({ key, persisted }) => {
+      result[key] = persisted ? state.persisted[key] : state.memory[key]
+    })
+    return result
+  }, */

package/template/src/hooks/frontEnd/useActions/dispatch/attributer/boolToDA/function.ts

@@ -0,0 +1,14 @@
+import { AttFunction } from '@/ts/types/actions'
+
+export const AttBoolToDA: AttFunction<'AttBoolToDA'> = ({ key, persisted, initialValue, changeKey, context }) => {
+  const { getValue, hydrated } = context.atomicStore
+  if (!hydrated) {
+    if (initialValue) return { [`data-${changeKey || key}`]: '' }
+    else return
+  } //Prevents SSR hydration errors
+
+  const storedValue = getValue(key, persisted)
+  const newValue = storedValue && typeof storedValue === 'boolean' ? storedValue : initialValue
+  if (newValue) return { [`data-${changeKey || key}`]: '' }
+  else return
+}

package/template/src/hooks/frontEnd/useActions/dispatch/attributer/boolToDA/zap.ts

@@ -0,0 +1,12 @@
+import { z } from '@/ts/zap'
+
+export const BoolToDASchema = z.ap.add(
+  z.object({
+    type: z.literal('AttBoolToDA'),
+    key: z.string(),
+    changeKey: z.string().nullable().optional(),
+    persisted: z.boolean().nullable().optional(),
+    initialValue: z.boolean().nullable().optional(),
+  }),
+  { id: 'AttBoolToDA' },
+)

package/template/src/hooks/frontEnd/useActions/dispatch/attributer/cCToDA/function.ts

@@ -0,0 +1,34 @@
+import { AttFunction } from '@/ts/types'
+
+export const AttCCToDA: AttFunction<'AttCCToDA'> = ({
+  listen,
+  changeKey,
+  context: {
+    atomicStore: { preferences, hasConsented, previouslyConsented },
+  },
+}) => {
+  let returns: Record<string, string> | undefined
+
+  switch (listen.listen) {
+    case 'preference':
+      if (!listen.key) return
+      const checked = preferences?.[listen.key]
+      if (checked) returns = { [`data-${changeKey || listen.key}`]: '' }
+      break
+    case 'accept':
+      if (hasConsented === true) returns = { [`data-${changeKey || 'accepted'}`]: '' }
+      break
+    case 'decline':
+      if (hasConsented === false) returns = { [`data-${changeKey || 'declined'}`]: '' }
+      break
+    case 'hasConsented':
+      if (changeKey) returns = { [`data-${changeKey}`]: hasConsented ? 'accepted' : 'declined' }
+      else returns = { [`data-${hasConsented ? `accepted` : `declined`}`]: '' }
+      break
+    case 'previouslyConsented':
+      if (changeKey) returns = { [`data-${changeKey}`]: previouslyConsented ? 'accepted' : 'declined' }
+      else returns = { [`data-${previouslyConsented ? `accepted` : `declined`}`]: '' }
+      break
+  }
+  return returns
+}

package/template/src/hooks/frontEnd/useActions/dispatch/attributer/cCToDA/zap.ts

@@ -0,0 +1,17 @@
+import { z } from '@/ts/zap'
+import { cookieConsentKeys } from '@/fields/actions/strict/registry/cookieConsent'
+
+export const CCtoDASchema = z.ap.add(
+  z.object({
+    type: z.literal('AttCCToDA'),
+    listen: z.discriminatedUnion('listen', [
+      z.object({ listen: z.literal('preference'), key: cookieConsentKeys }),
+      z.object({ listen: z.literal('accept') }),
+      z.object({ listen: z.literal('decline') }),
+      z.object({ listen: z.literal('hasConsented') }),
+      z.object({ listen: z.literal('previouslyConsented') }),
+    ]),
+    changeKey: z.string().nullable().optional(),
+  }),
+  { id: 'AttCCToDA' },
+)

package/template/src/hooks/frontEnd/useActions/dispatch/attributer/errorToDA/function.ts

@@ -0,0 +1,22 @@
+import { AttFunction, ImplementedStorageTypes } from '@/ts/types'
+
+export const AttFormErrorToDA: AttFunction<'AttFormErrorToDA'> = ({ key, inputName = 'form', context }) => {
+  if (!context.fullFormContext) {
+    console.error('AttFormErrorToDA: fullFormContext is undefined')
+    return
+  }
+  const { getValue, hydrated } = context.atomicStore
+
+  if (!hydrated) return //Prevents SSR hydration errors
+  if (!key) return
+  const inputKey = inputName || 'form'
+
+  if (context.fullFormContext.formResponse?.success) return
+
+  const storedValue: ImplementedStorageTypes = getValue(`${key}-response`, false)
+  if (!storedValue || typeof storedValue !== 'object') return
+
+  const errorMessage = storedValue[inputKey]
+  if (!errorMessage) return
+  return { [`data-error`]: errorMessage || '' }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/attributer/errorToDA/zap.ts

@@ -0,0 +1,10 @@
+import { z } from '@/ts/zap'
+
+export const FormErrorToDASchema = z.ap.add(
+  z.object({
+    type: z.literal('AttFormErrorToDA'),
+    key: z.string(),
+    inputName: z.string().nullable().optional(),
+  }),
+  { id: 'AttFormErrorToDA' },
+)