@pro-laico/create-atomic-payload 0.1.4

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

@@ -0,0 +1,20 @@
+import { AttributerType } from '@/ts/types'
+import type { AttFunction } from '@/ts/types/actions'
+
+//Functions
+import { AttCCToDA } from './cCToDA/function'
+import { AttBoolToDA } from './boolToDA/function'
+import { AttTextToDA } from './textToDA/function'
+import { AttFormErrorToDA } from './errorToDA/function'
+import { AttFormStatusToDA } from './statusToDA/function'
+
+const AttributerRegistry = { AttCCToDA, AttBoolToDA, AttTextToDA, AttFormStatusToDA, AttFormErrorToDA }
+
+export const handleAttributerActions: AttFunction<AttributerType[]> = ({ actions, context }) => {
+  if (!actions) return
+  const result = actions.reduce((acc: Record<string, string>, action) => {
+    const attributer = AttributerRegistry[action.type] as AttFunction<typeof action.type>
+    return { ...acc, ...(attributer({ ...action, context }) || {}) }
+  }, {})
+  return Object.keys(result).length === 0 ? undefined : result
+}

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

@@ -0,0 +1,24 @@
+import { AttFunction } from '@/ts/types/actions'
+
+export const AttFormStatusToDA: AttFunction<'AttFormStatusToDA'> = ({ key, context }) => {
+  if (!context.fullFormContext) {
+    console.error('AttFormStatusToDA: fullFormContext is undefined')
+    return
+  }
+  const { getValue, hydrated } = context.atomicStore
+
+  let returns: Record<string, string> | undefined
+  if (!hydrated || !key) return //Prevents SSR hydration errors
+
+  let formKeyValue = getValue(key, false) as undefined | string
+
+  switch (formKeyValue) {
+    case 'setReset':
+    case 'resetting':
+    case 'setPending':
+      formKeyValue = 'pending'
+      break
+  }
+  if (formKeyValue) returns = { [`data-${formKeyValue}`]: '' }
+  return returns
+}

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { z } from '@/ts/zap'
+import { CCtoDASchema } from './cCToDA/zap'
+import { BoolToDASchema } from './boolToDA/zap'
+import { TextToDASchema } from './textToDA/zap'
+import { FormErrorToDASchema } from './errorToDA/zap'
+import { FormStatusToDASchema } from './statusToDA/zap'
+export { CCtoDASchema, BoolToDASchema, TextToDASchema, FormErrorToDASchema, FormStatusToDASchema }
+
+const Attributers = [CCtoDASchema, BoolToDASchema, TextToDASchema, FormErrorToDASchema, FormStatusToDASchema] as const
+
+export const AttributerRefs = z.ap.add(z.discriminatedUnion('type', Attributers), { id: 'Attributer' })
+export const AttributerRefsArray = z.ap.add(z.array(AttributerRefs), { id: 'Attributers' })
+export const AttributerTypes = z.ap.add(z.union(Attributers.map((runner) => runner.shape.type)), { id: 'AttributerType' })
+
+export const Attributer = { ref: AttributerRefs, refs: AttributerRefsArray, types: AttributerTypes }

package/template/src/hooks/frontEnd/useActions/dispatch/index.ts

@@ -0,0 +1,2 @@
+export * from './runner/function'
+export * from './attributer/function'

package/template/src/hooks/frontEnd/useActions/dispatch/runner/cycleText/function.ts

@@ -0,0 +1,30 @@
+import type { RunFunction } from '@/ts/types/actions'
+
+export const RunCycleText: RunFunction<'RunCycleText'> = ({ key, textArray, persisted, context }) => {
+  const {
+    atomicStore: { setValue, getValue, removeValue },
+  } = context
+  let value: string | null = null
+  const currentValue = getValue(key, persisted)
+
+  if (textArray.length === 1) {
+    if (currentValue === textArray[0].value) removeValue(key, persisted)
+    else value = textArray[0].value
+  } else {
+    const currentIndex = textArray.findIndex((item) => item.value === currentValue)
+    if (currentIndex !== -1) {
+      const nextIndex = (currentIndex + 1) % textArray.length
+      value = textArray[nextIndex].value
+    } else {
+      const initialIndex = textArray.findIndex((item) => item.initialValue)
+      if (initialIndex !== -1) {
+        const targetIndex = (initialIndex + 1) % textArray.length
+        value = textArray[targetIndex].value
+      } else value = textArray[0].value
+    }
+  }
+
+  if (value === undefined || value === null) return { success: false, message: 'No valid value found in RunCycleText' }
+  setValue(key, value, persisted)
+  return { success: true }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/cycleText/zap.ts

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

package/template/src/hooks/frontEnd/useActions/dispatch/runner/function.ts

@@ -0,0 +1,21 @@
+import { RunnerType } from '@/ts/types'
+import { RunSetCC } from './setCCs/function'
+import { RunSetBool } from './setBool/function'
+import { RunFunction } from '@/ts/types/actions'
+import { RunSetTheme } from './setThemes/function'
+import { RunResetForm } from './resetForm/function'
+import { RunCycleText } from './cycleText/function'
+import { RunSubmitForm } from './submitForm/function'
+
+const RunnerRegistry = { RunCycleText, RunSetBool, RunSetCC, RunSetTheme, RunSubmitForm, RunResetForm }
+
+export const handleRunnerActions: RunFunction<RunnerType[]> = async ({ actions, context }) => {
+  const result: ReturnType<RunFunction<RunnerType[]>> = { success: true }
+  if (!actions) return { success: false, message: 'No actions to run' }
+  for (const action of actions) {
+    const runner = RunnerRegistry[action.type] as RunFunction<typeof action.type>
+    const result = await runner({ ...action, context })
+    if (!result.success) return { success: false, message: result.message }
+  }
+  return result
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/resetForm/function.ts

@@ -0,0 +1,7 @@
+import type { RunFunction } from '@/ts/types'
+
+export const RunResetForm: RunFunction<'RunResetForm'> = async ({ formName, context }) => {
+  if (!formName) return { success: false, message: '[RunResetForm] Form name is missing.' }
+  context?.atomicStore.setValue(formName, 'setReset', false)
+  return { success: true }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/resetForm/zap.ts

@@ -0,0 +1,9 @@
+import { z } from '@/ts/zap'
+
+export const ResetFormSchema = z.ap.add(
+  z.object({
+    type: z.literal('RunResetForm'),
+    formName: z.string().nullable().optional(),
+  }),
+  { id: 'RunResetForm' },
+)

package/template/src/hooks/frontEnd/useActions/dispatch/runner/setBool/function.ts

@@ -0,0 +1,10 @@
+import type { RunFunction } from '@/ts/types/actions'
+
+export const RunSetBool: RunFunction<'RunSetBool'> = ({ key, initialValue, persisted, context }) => {
+  const { setValue, getValue } = context.atomicStore
+
+  const storedValue = getValue(key, persisted)
+  const newValue = storedValue !== undefined ? !storedValue : !initialValue
+  setValue(key, newValue, persisted)
+  return { success: true, key, newValue }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/setBool/zap.ts

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

package/template/src/hooks/frontEnd/useActions/dispatch/runner/setCCs/function.ts

@@ -0,0 +1,33 @@
+import type { RunFunction } from '@/ts/types'
+
+export const RunSetCC: RunFunction<'RunSetCC'> = ({
+  values,
+  context: {
+    atomicStore: { preferences, setPreference, acceptCookies, declineCookies },
+  },
+}) => {
+  switch (values.perform) {
+    case 'preference':
+      if (values.key) setPreference(values.key, !preferences?.[values.key])
+      break
+    case 'accept':
+      acceptCookies(
+        values.acceptAll
+          ? {
+              functional: true,
+              security: true,
+              analytics: true,
+              marketing: true,
+              userData: true,
+              adPersonalization: true,
+              contentPersonalization: true,
+            }
+          : preferences,
+      )
+      break
+    case 'decline':
+      declineCookies()
+      break
+  }
+  return { success: true }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/setCCs/zap.ts

@@ -0,0 +1,14 @@
+import { z } from '@/ts/zap'
+import { cookieConsentKeys } from '@/fields/actions/strict/registry/cookieConsent'
+
+export const SetCCSchema = z.ap.add(
+  z.object({
+    type: z.literal('RunSetCC'),
+    values: z.discriminatedUnion('perform', [
+      z.object({ perform: z.literal('decline') }),
+      z.object({ perform: z.literal('preference'), key: z.ap.get('CookieConsentPreferenceKeys', cookieConsentKeys) }),
+      z.object({ perform: z.literal('accept'), acceptAll: z.boolean().optional() }),
+    ]),
+  }),
+  { id: 'RunSetCC' },
+)

package/template/src/hooks/frontEnd/useActions/dispatch/runner/setThemes/function.ts

@@ -0,0 +1,11 @@
+import type { RunFunction } from '@/ts/types/actions'
+
+export const RunSetTheme: RunFunction<'RunSetTheme'> = ({ perform, context: { theme } }) => {
+  if (!theme) {
+    console.error('RunSetTheme: theme is undefined')
+    return { success: false, message: '[RunSetTheme] Theme is undefined' }
+  }
+  const { setTheme, theme: currentTheme } = theme
+  setTheme(perform === 'cycle' ? (currentTheme === 'light' ? 'dark' : 'light') : perform)
+  return { success: true }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/setThemes/zap.ts

@@ -0,0 +1,10 @@
+import { z } from '@/ts/zap'
+import { themePerform } from '@/fields/actions/strict/registry/theme'
+
+export const SetThemeSchema = z.ap.add(
+  z.object({
+    type: z.literal('RunSetTheme'),
+    perform: themePerform,
+  }),
+  { id: 'RunSetTheme' },
+)

package/template/src/hooks/frontEnd/useActions/dispatch/runner/submitForm/function.ts

@@ -0,0 +1,32 @@
+import type { RunFunction, ImplementedStorageTypes } from '@/ts/types'
+
+export const RunSubmitForm: RunFunction<'RunSubmitForm'> = async ({
+  formName,
+  context: {
+    atomicStore: { setValue, getValue },
+  },
+}) => {
+  if (!formName) return { success: false, message: '[RunSubmitForm] Form name is missing.' }
+
+  const ifs = getValue(formName, false)
+  if (ifs === 'setPending' || ifs === 'pending') return { success: false, message: '[RunSubmitForm] Form already pending' }
+
+  setValue(formName, 'setPending', false)
+
+  let formStatus: ImplementedStorageTypes = 'setPending'
+  const startTime = Date.now()
+  const timeout = 20000 // 20 seconds
+  while (formStatus === 'setPending' || formStatus === 'pending') {
+    await new Promise((resolve) => setTimeout(resolve, 100))
+    formStatus = getValue(formName, false)
+    if (Date.now() - startTime > timeout) {
+      setValue(formName, 'error', false)
+      return { success: false, message: '[RunSubmitForm] Form submission timed out' }
+    }
+  }
+
+  if (formStatus === 'success') return { success: true }
+  if (formStatus === 'error') return { success: false, message: 'Form failed' }
+
+  return { success: false, message: `[RunSubmitForm] Unknown form status: ${formStatus}` }
+}

package/template/src/hooks/frontEnd/useActions/dispatch/runner/submitForm/zap.ts

@@ -0,0 +1,9 @@
+import { z } from '@/ts/zap'
+
+export const RunSubmitFormSchema = z.ap.add(
+  z.object({
+    type: z.literal('RunSubmitForm'),
+    formName: z.string().nullable().optional(),
+  }),
+  { id: 'RunSubmitForm' },
+)

package/template/src/hooks/frontEnd/useActions/dispatch/runner/zap.ts

@@ -0,0 +1,16 @@
+import { z } from '@/ts/zap'
+import { SetCCSchema } from './setCCs/zap'
+import { SetThemeSchema } from './setThemes/zap'
+import { ResetFormSchema } from './resetForm/zap'
+import { SetBoolSchema } from './setBool/zap'
+import { RunSubmitFormSchema } from './submitForm/zap'
+import { CycleTextSchema } from './cycleText/zap'
+export { SetCCSchema, SetThemeSchema, CycleTextSchema, SetBoolSchema, ResetFormSchema, RunSubmitFormSchema }
+
+const Runners = [SetCCSchema, SetThemeSchema, CycleTextSchema, SetBoolSchema, ResetFormSchema, RunSubmitFormSchema] as const
+
+export const RunnerRefs = z.ap.add(z.discriminatedUnion('type', Runners), { id: 'Runner' })
+export const RunnerRefsArray = z.ap.add(z.array(RunnerRefs), { id: 'Runners' })
+export const RunnerTypes = z.ap.add(z.union(Runners.map((runner) => runner.shape.type)), { id: 'RunnerType' })
+
+export const Runner = { ref: RunnerRefs, refs: RunnerRefsArray, types: RunnerTypes }

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

@@ -0,0 +1,2 @@
+export * from './runner/zap'
+export * from './attributer/zap'

package/template/src/hooks/frontEnd/useActions/index.ts

@@ -0,0 +1,6 @@
+export * from './useActionContext'
+export * from './useButtonActions'
+export * from './useDaToText'
+export * from './useForm'
+export * from './usePortal'
+export * from './useToDa'

package/template/src/hooks/frontEnd/useActions/useActionContext.ts

@@ -0,0 +1,21 @@
+'use client'
+import { useMemo } from 'react'
+import { useTheme } from 'next-themes'
+import { ActionContext, FullFormContext } from '@/ts/types'
+import { useAtomicStore } from '@/hooks/frontEnd/atomicStore'
+import { useFormContext } from '@/components/providers/formProvider'
+
+type useActionContextProps = {
+  fullFormContext?: FullFormContext
+}
+
+export function useActionContext(props?: useActionContextProps): ActionContext {
+  const theme = useTheme()
+  const formContext = useFormContext()
+  const atomicStore = useAtomicStore((state) => state)
+
+  return useMemo(
+    () => ({ theme, atomicStore, fullFormContext: props?.fullFormContext || { ...formContext } }),
+    [theme, atomicStore, formContext, props?.fullFormContext],
+  )
+}

package/template/src/hooks/frontEnd/useActions/useButtonActions.ts

@@ -0,0 +1,17 @@
+'use client'
+import { ActionContext, AtomicChild } from '@/ts/types'
+import { handleRunnerActions } from '@/hooks/frontEnd/useActions/dispatch'
+
+export type UseButtonActionsProps = { block: AtomicChild; context: ActionContext }
+
+export type UseButtonActionsReturns = { onClick: () => void }
+
+export function useButtonActions(props: UseButtonActionsProps): UseButtonActionsReturns {
+  const { block, context } = props
+
+  const onClick = async () => {
+    await handleRunnerActions({ actions: block.triggerActions?.runners, context })
+  }
+
+  return { onClick }
+}

package/template/src/hooks/frontEnd/useActions/useDaToText.ts

@@ -0,0 +1,34 @@
+'use client'
+import { useMemo } from 'react'
+import { toKebabCase } from '@/utilities/format/toKebabCase'
+
+export type UseDaToTextProps = {
+  text: string
+  /** State Data Attributes */
+  sda?: Record<string, string>
+  /** SSR Data Attributes */
+  ssrda?: Record<string, string>
+}
+
+export type UseDaToTextReturns = string | undefined
+
+/** Use Data Attributes to Text Parsing Hook */
+export function useDaToText(props: UseDaToTextProps): UseDaToTextReturns {
+  const { text, sda, ssrda } = props
+
+  // Parses {{key}} patterns in text and replace with data attribute values
+  const parsedText = useMemo(() => {
+    if (typeof text === 'string') {
+      const parsedText = text.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
+        const stateValue = sda?.[`data-${toKebabCase(key)}`] as string
+        const ssrValue = ssrda?.[`data-${toKebabCase(key)}`] as string
+        const value = stateValue || ssrValue || match
+        return value
+      })
+      return parsedText
+    }
+    return undefined
+  }, [text, sda, ssrda])
+
+  return parsedText
+}

package/template/src/hooks/frontEnd/useActions/useForm.ts

@@ -0,0 +1,114 @@
+'use client'
+import { Toast } from '@base-ui-components/react/toast'
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { useActionContext } from '@/hooks/frontEnd/useActions/useActionContext'
+import { submitForm as submitFormSF } from '@/blocks/submitForm/serverFunction'
+import { FormResponse, AtomicChild, FullFormContext, ActionContext } from '@/ts/types'
+
+export type UseFormProps = { block: AtomicChild }
+
+export type UseFormReturns = {
+  context: ActionContext
+  handleReset: () => void
+  formRef: React.RefObject<HTMLFormElement | null>
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>
+}
+
+export function useForm(props: UseFormProps): UseFormReturns {
+  const { block } = props
+  const { formName } = block
+
+  const toastManager = Toast.useToastManager()
+
+  const formRef = useRef<HTMLFormElement | null>(null)
+
+  const [formStatus, setFormStatus] = useState<string | null>(null)
+  const [submissionId, setSubmissionId] = useState<string | null>(null)
+  const [formResponse, setFormResponse] = useState<FormResponse | null>(null)
+
+  const fullFormContext: FullFormContext = useMemo(() => ({ formRef, formResponse, submissionId }), [formRef, formResponse, submissionId])
+  const context = useActionContext({ fullFormContext })
+
+  useEffect(() => {
+    if (!formName) return
+    const formStatus = context.atomicStore.getValue(formName, false)
+    setFormStatus(formStatus as string | null)
+  }, [formName, context])
+
+  function setStatus(status: 'pending' | 'success' | 'error' | 'reset', response?: FormResponse) {
+    switch (status) {
+      case 'reset':
+        setSubmissionId(null)
+      case 'pending':
+        setFormResponse(null)
+      case 'error':
+      case 'success':
+        if (formName) context.atomicStore.setValue(formName, status, false)
+        if (response) context.atomicStore.setValue(`${formName}-response`, { form: response.fm, ...response.im }, false)
+    }
+  }
+
+  useEffect(() => {
+    if (!formName) return
+    switch (formStatus) {
+      case 'setPending': {
+        if (formRef.current && !formRef.current.checkValidity()) {
+          formRef.current.reportValidity()
+          setStatus('error')
+          return
+        }
+        formRef.current?.requestSubmit()
+        break
+      }
+      case 'setReset': {
+        formRef.current?.reset()
+        break
+      }
+    }
+    //KNOWN ISSUE: Need to update to next 16+ to properly remove setStatus as a dep with useEffectEvent.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formName, formStatus])
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!formRef?.current) {
+      setStatus('error')
+      console.error('useForm handleSubmit: formRef is null')
+      return
+    }
+
+    const formData = new FormData(formRef.current)
+
+    setStatus('pending')
+
+    const submissionID = Date.now().toString()
+    setSubmissionId(submissionID)
+
+    const clientData = {
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'unknown',
+      screenWidth: `${window.screen.width}`,
+      screenHeight: `${window.screen.height}`,
+      preferences: context.atomicStore.preferences,
+    }
+
+    try {
+      let toastID
+      if (block.formToastEnabled) toastID = toastManager.add({ type: 'loading', description: block.lm || 'Submitting form...' })
+
+      const response = await submitFormSF({ blockID: block.id, formData, submissionID, clientData })
+
+      if (response.success && toastID) toastManager.update(toastID, { type: 'success', description: response.fm })
+      else if (toastID) toastManager.update(toastID, { type: 'error', description: response.fm })
+      if (toastID) setTimeout(() => toastManager.close(toastID), 5000)
+
+      setFormResponse(response)
+      setStatus(response.success ? 'success' : 'error', response)
+    } catch (error: unknown) {
+      setStatus('error', error as FormResponse)
+    }
+  }
+
+  const handleReset = () => setStatus('reset')
+
+  return { handleSubmit, handleReset, context, formRef }
+}

package/template/src/hooks/frontEnd/useActions/usePortal.ts

@@ -0,0 +1,33 @@
+'use client'
+import { useState, useEffect } from 'react'
+import { ActionContext, AtomicChild } from '@/ts/types'
+import { handleRunnerActions } from '@/hooks/frontEnd/useActions/dispatch'
+
+export type UsePortalActionsProps = {
+  block: AtomicChild
+  defaultOpen: boolean
+  context: ActionContext
+}
+
+export type UsePortalActionsReturns = {
+  open: boolean
+  onOpenChange: () => void
+}
+
+export function usePortalActions(props: UsePortalActionsProps): UsePortalActionsReturns {
+  const { block, defaultOpen, context } = props
+
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const storedOpen = context.atomicStore.getValue(block.portalName!, block.persisted)
+    if (typeof storedOpen === 'boolean') setOpen(storedOpen)
+    else setOpen(defaultOpen)
+  }, [block.blockType, block.portalName, block.persisted, context, defaultOpen])
+
+  const onOpenChange = async () => {
+    await handleRunnerActions({ actions: block.triggerActions?.runners, context })
+  }
+
+  return { open, onOpenChange }
+}

package/template/src/hooks/frontEnd/useActions/useToDa.ts

@@ -0,0 +1,12 @@
+'use client'
+import { useMemo } from 'react'
+import { ActionContext, Attributers } from '@/ts/types'
+import { handleAttributerActions } from '@/hooks/frontEnd/useActions/dispatch'
+
+export type UseToDaProps = { attributers: Attributers | undefined; context: ActionContext }
+export type DataAttributes = Record<string, string> | undefined
+
+/** Generates Data Attributes Using Attributer Actions & Context */
+export function useToDa({ attributers, context }: UseToDaProps): DataAttributes {
+  return useMemo(() => handleAttributerActions({ actions: attributers, context }), [attributers, context])
+}

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

@@ -0,0 +1,26 @@
+import type { GlobalBeforeChangeHook } from 'payload'
+import { revalidateTag } from '@/utilities/revalidateTag'
+
+/**
+ * Unified global hook that handles all revalidations on global changes.
+ * Uses collection slug to determine which revalidation logic to apply.
+ */
+export const revalidateCache: GlobalBeforeChangeHook = async ({ global, data, context }) => {
+  if (context.isSeed) return
+  const slug = global.slug
+  const draft = data?._status === 'draft'
+
+  switch (slug) {
+    case 'siteMetaData':
+      await revalidateTag('site-metadata', draft)
+      break
+    case 'tracking':
+      await revalidateTag('tracking', draft)
+      break
+    case 'settings':
+      await revalidateTag('settings', draft)
+      break
+    default:
+      break
+  }
+}