@pro-laico/create-atomic-payload 0.1.4

package/template/src/blocks/actions/processor.ts

@@ -0,0 +1,263 @@
+//Action Options
+import { ActSetTheme } from './theme/set/options'
+import { ActResetForm } from './form/reset/options'
+import { ActSubmitForm } from './form/submit/options'
+import { ActSetCC } from './cookieConsent/set/options'
+import { ActSetPortalOpen } from './portal/set/options'
+import { ActCCToDA } from './cookieConsent/toDA/options'
+import { ActFormErrorToDA } from './form/errorToDA/options'
+import { ActFormStatusToDA } from './form/statusToDA/options'
+import { ActDSTextToDA } from './dynamicStore/text/toDA/options'
+import { ActDSSetBool } from './dynamicStore/boolean/set/options'
+import { ActDSCycleText } from './dynamicStore/text/cycle/options'
+import { ActDSBoolToDA } from './dynamicStore/boolean/toDA/options'
+
+//Other
+import { z } from '@/ts/zap'
+import { ActionFilters } from './filters'
+import {
+  AllActions,
+  ChildBlocks,
+  InitialValue,
+  StoredAtomicActions,
+  ActionProcessFunction,
+  ActionBlockDefaultReturns,
+  ActionSetKeyInitialByAction,
+} from '@/ts/types'
+
+export const ActionOptions = {
+  ActSetCC,
+  ActCCToDA,
+  ActSetTheme,
+  ActDSSetBool,
+  ActResetForm,
+  ActDSTextToDA,
+  ActDSBoolToDA,
+  ActSubmitForm,
+  ActDSCycleText,
+  ActFormErrorToDA,
+  ActSetPortalOpen,
+  ActFormStatusToDA,
+}
+
+// /////////////////////////////////////
+// Action Processor
+// /////////////////////////////////////
+
+/**
+ * Action Block Processor
+ *
+ * Processes action blocks and manages their execution context.
+ * Handles initial values, form mappings, and action processing for atomic components.
+ *
+ * This class is responsible for processing action blocks within the atomic system.
+ * It manages the lifecycle of actions including setting initial values, processing blocks,
+ * and coordinating between different action types (runners, attributers).
+ */
+export class ActionBlockStorageProcessor {
+  //Before Storage
+  initialValuesMap: Map<string, InitialValue> = new Map()
+  formNameMap: Map<string, string> = new Map()
+  portalNameMap: Map<string, string> = new Map()
+
+  //Temp Storage
+  triggerStore: NonNullableObject<AllActions> = { actionBlocks: [], actions: [], runners: [], attributers: [] }
+  contentStore: NonNullableObject<AllActions> = { actionBlocks: [], actions: [], runners: [], attributers: [] }
+  processorResult: ActionBlockDefaultReturns = { actions: [], runners: [], attributers: [] }
+
+  //New storage for all block actions
+  allBlockActions: StoredAtomicActions = {}
+
+  constructor() {}
+
+  /**
+   * @note Stores values in the class instance.
+   * @description Grabs All Form/Portal Names and stores a blocks actions initial values for later use.
+   */
+  before({ node, path }: { node: object; path: string[] }) {
+    if (!node || typeof node !== 'object' || !('blockType' in node)) return node
+    const block = node as ChildBlocks[number]
+
+    this.setKeyInitialValueByAction({ block })
+
+    //Add FormName & PortalName If They Exist
+    if (block.blockType === 'AtomicChild') {
+      // Add FormName & PortalName If They Exist
+      if (block?.type === 'form' && block.formName) this.formNameMap.set(path.join('.'), block.formName)
+      if (block?.type === 'button' && block.buttonType === 'portal' && block.portalName) this.portalNameMap.set(path.join('.'), block.portalName)
+    }
+  }
+
+  /**
+   *  Sets initial values for action keys by actions.
+   *  Runs blocks first, as some atomic block variants have values that we want to inherit initial values from.
+   *  Then we process the trigger and content actions.
+   */
+  setKeyInitialValueByAction({ block }: { block: ChildBlocks[number] }) {
+    // Get Trigger Action Initial Values
+    if ('triggerActions' in block && block?.triggerActions && block.triggerActions.actionBlocks) {
+      if (Array.isArray(block.triggerActions.actionBlocks) && block.triggerActions.actionBlocks?.length > 0) {
+        block.triggerActions.actionBlocks?.forEach((actionBlock) => {
+          const AO = ActionOptions[actionBlock.blockType]
+          if ('setKeyInitialByAction' in AO) {
+            const setter = AO.setKeyInitialByAction as ActionSetKeyInitialByAction<typeof actionBlock.blockType>
+            const value = setter({ block, initialValuesMap: this.initialValuesMap, actionBlock })
+            if (value && !this.initialValuesMap.has(value.key)) this.initialValuesMap.set(value.key, value)
+          }
+        })
+      }
+    }
+
+    // Get Content Action Initial Values
+    if ('contentActions' in block && block?.contentActions && block.contentActions.actionBlocks) {
+      if (Array.isArray(block.contentActions.actionBlocks) && block.contentActions.actionBlocks?.length > 0) {
+        block.contentActions.actionBlocks?.forEach((actionBlock) => {
+          const AO = ActionOptions[actionBlock.blockType]
+          if ('setKeyInitialByAction' in AO) {
+            const setter = AO.setKeyInitialByAction as ActionSetKeyInitialByAction<typeof actionBlock.blockType>
+            const value = setter({ block, initialValuesMap: this.initialValuesMap, actionBlock })
+            if (value && !this.initialValuesMap.has(value.key)) this.initialValuesMap.set(value.key, value)
+          }
+        })
+      }
+    }
+  }
+
+  setKeyInitialValueByBlock({ node }: { node: unknown }) {
+    if (!node || typeof node !== 'object' || !('blockType' in node)) return node
+    const block = node as ChildBlocks[number]
+    //Get initial values from the block itself
+    Object.values(ActionOptions).forEach((option) => {
+      if ('setKeyInitialByBlock' in option && option.setKeyInitialByBlock) {
+        const value = option.setKeyInitialByBlock({ block, initialValuesMap: this.initialValuesMap })
+        if (value && !this.initialValuesMap.has(value.key)) this.initialValuesMap.set(value.key, value)
+      }
+    })
+  }
+
+  /**
+   * @note Mutates the passed in node.
+   * @description Stores the action blocks to their respective storage fields, and utilizes values stored by the "before" method.
+   */
+  after({ node, path }: { node: unknown; path: string[] }) {
+    if (!node || typeof node !== 'object' || !('blockType' in node)) return node
+    const BlockType = z.ap.get('ChildBlockType').safeParse(node.blockType)
+    if (!BlockType.success) return node
+    const block = node as ChildBlocks[number]
+
+    // Add Defaults For Any Node
+    this.runNodeDefaults({ block })
+
+    if ('triggerActions' in block) {
+      if (block?.triggerActions?.actionBlocks) {
+        this.triggerStore.actionBlocks.push(...block?.triggerActions?.actionBlocks)
+        this.processActionBlocks({ placement: 'trigger', AllActions: this.triggerStore, block, path })
+        block.triggerActions = this.triggerStore
+
+        this.storeActionBlock({ block, placement: 'trigger' })
+        this.resetStore({ placement: 'trigger' })
+      } else block.triggerActions = undefined //Remove previously stored actions if no actions are set
+    }
+
+    if ('contentActions' in block) {
+      if (block?.contentActions?.actionBlocks) {
+        this.contentStore.actionBlocks.push(...block?.contentActions?.actionBlocks)
+        this.processActionBlocks({ placement: 'content', AllActions: this.contentStore, block, path })
+        block.contentActions = this.contentStore
+
+        this.storeActionBlock({ block, placement: 'content' })
+        this.resetStore({ placement: 'content' })
+      } else block.contentActions = undefined //Remove previously stored actions if no actions are set
+    }
+
+    return block
+  }
+
+  /**
+   *  Checks for defaults on every child block that CAN have actions.
+   *  This means if a block has no actions defined, this will still run on it.
+   *  The default functions conditionally apply actions depending on context.
+   */
+  private runNodeDefaults({ block }: { block: ChildBlocks[number] }) {
+    if (z.ap.get('ChildrenWithTriggerActions').safeParse(block.blockType).success) {
+      Object.values(ActionOptions).forEach((option) => {
+        if ('triggerDefaults' in option) {
+          option.triggerDefaults({ block, data: this.triggerStore, initialValuesMap: this.initialValuesMap })
+          //TODO: Fix typing here.
+          //@ts-expect-error zod ensures proper usage.
+          if (this.triggerStore.actions.length > 0) block['triggerActions'] = this.triggerStore
+        }
+      })
+    }
+    if (z.ap.get('ChildrenWithContentActions').safeParse(block.blockType).success) {
+      Object.values(ActionOptions).forEach((option) => {
+        if ('contentDefaults' in option) {
+          option.contentDefaults({ block, data: this.contentStore, initialValuesMap: this.initialValuesMap })
+          //@ts-expect-error zod ensures proper usage.
+          if (this.contentStore.actions.length > 0) block['contentActions'] = this.contentStore
+        }
+      })
+    }
+  }
+
+  private processActionBlocks({
+    placement,
+    AllActions,
+    block,
+    path,
+  }: {
+    placement: 'trigger' | 'content'
+    AllActions: NonNullableObject<AllActions>
+    block: ChildBlocks[number]
+    path: string[]
+  }) {
+    AllActions.actions.push(...AllActions.actionBlocks.map((actionBlock) => actionBlock.blockType))
+    AllActions.actionBlocks.forEach((actionBlock) => {
+      if (ActionFilters[actionBlock.blockType]({ placement, ...block })) {
+        const { blockType } = actionBlock
+        const closestFormName = this.formNameMap.get(this.findClosestParent(path, this.formNameMap.keys()) || '')
+        const closestPortalName = this.portalNameMap.get(this.findClosestParent(path, this.portalNameMap.keys()) || '')
+        const PF = ActionOptions[blockType].processFunction as ActionProcessFunction<typeof blockType>
+        PF({
+          ...actionBlock,
+          block,
+          data: AllActions,
+          initialValuesMap: this.initialValuesMap,
+          useForm: ('formName' in block && block?.formName) || closestFormName || undefined,
+          usePortal: ('portalName' in block && block?.portalName) || closestPortalName || undefined,
+        })
+      }
+    })
+  }
+
+  /** Adds block to the flat storage array on the document. */
+  private storeActionBlock({ block, placement }: { block: ChildBlocks[number]; placement: 'trigger' | 'content' }) {
+    if (!block.id) throw new Error('Block ID is required for storing an action. In action block storage processors after method.')
+    const store = placement === 'trigger' ? this.triggerStore : this.contentStore
+    const { actionBlocks, ...rest } = store
+    this.allBlockActions[block.id] = { id: block.id, ...rest }
+  }
+
+  private resetStore({ placement }: { placement: 'trigger' | 'content' }) {
+    if (placement === 'trigger') this.triggerStore = { actionBlocks: [], actions: [], runners: [], attributers: [] }
+    if (placement === 'content') this.contentStore = { actionBlocks: [], actions: [], runners: [], attributers: [] }
+  }
+
+  /**
+   * @description Gets all action blocks that have been stored during processing
+   * @returns Array of all block actions with their paths
+   */
+  getAllActionBlocks(): StoredAtomicActions | undefined {
+    return Object.keys(this.allBlockActions).length > 0 ? this.allBlockActions : undefined
+  }
+
+  private 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
+  }
+}

package/template/src/blocks/actions/theme/set/block.ts

@@ -0,0 +1,10 @@
+import type { Block } from 'payload'
+import { PerformSelectField } from '@/fields/actions'
+
+export const ActSetTheme: Block = {
+  slug: 'ActSetTheme',
+  admin: { group: 'Theme' },
+  interfaceName: 'ActSetTheme',
+  labels: { singular: 'Set Theme', plural: 'Set Theme' },
+  fields: [PerformSelectField({ set: 'theme' })],
+}

package/template/src/blocks/actions/theme/set/filter.ts

@@ -0,0 +1,3 @@
+import { ActionBlockFilter } from '@/ts/types/actions'
+
+export const ActSetTheme = ({ placement, type }: ActionBlockFilter) => Boolean(placement === 'trigger' && type === 'button')

package/template/src/blocks/actions/theme/set/options.ts

@@ -0,0 +1,9 @@
+import { z } from '@/ts/zap'
+import { ActionProcessFunction } from '@/ts/types/actions'
+
+const processFunction: ActionProcessFunction<'ActSetTheme'> = ({ perform, data }) => {
+  const Run: z.ap.Type<'RunSetTheme'> = { type: 'RunSetTheme', perform }
+  data.runners.push(Run)
+}
+
+export const ActSetTheme = { processFunction }

package/template/src/blocks/actions/zap.ts

@@ -0,0 +1,4 @@
+import { z } from '@/ts/zap'
+import { AllActionBlocks } from '@/blocks/actions/blocks'
+
+export const ActionBlockType = z.ap.add(z.enum(AllActionBlocks.map((block) => block.slug)), { id: 'ActionBlockType' })

package/template/src/blocks/children/atomic/block.ts

@@ -0,0 +1,123 @@
+import { AtomicPath } from '@/ui'
+import { DepthControls } from '@/ts/types'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { ClassNameField } from '@/fields/className'
+import { AtomicBlockControlBar } from './controlBar'
+import { NonRecursiveChildBlockType } from '@/ts/types'
+import type { Block, BlocksField } from 'payload'
+
+//Tabs
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { inputTab } from '@/fields/tabs/block/children/submitForm/input'
+import { AtomicChildSettingsTab } from '@/fields/tabs/block/children/settings'
+import { TriggerActionsTab, ContentActionsTab } from '@/fields/tabs/block/children/actions'
+import { formRateLimitTab, formSanitationTab, formValidationTab } from '@/fields/tabs/block/children/submitForm/form'
+
+const d = {
+  trigger: 'The trigger is the actual button element. You can add what the button element renders inside it, such as text, icons, or anything else.',
+  ariaLabel: 'Accessibility label for screen readers.',
+  content: 'Used for all blocks, except non portal button blocks.',
+  svr: '( Sanitation | Validation | Rate Limiting ) Used for form and input blocks.',
+  screenReaderText: 'Text specifically for screen readers. Required if no visible text is present.',
+  actions: 'Used to perform actions, but can also be used to receive data on other actions being performed.',
+  contentTab:
+    'Content is the element itself, and what is rendered inside it. If you set the Atomic Block to (Button + Open Portal), this is the content inside of the opened portal.',
+}
+//let count = 0
+const contentClassNameField = ClassNameField({ label: 'Content Atomic Classes' })
+const triggerClassNameField = ClassNameField({ namePrefix: 'trigger', label: 'Trigger Atomic Classes' })
+
+const NonRecursiveChildBlocks: NonRecursiveChildBlockType[] = [
+  'SimpleTextChild',
+  'RichTextChild',
+  'ImageChild',
+  'VideoChild',
+  'IconChild',
+  'SVGChild',
+]
+
+/** Do not use this anywhere. Only use the files default export. */
+export function AtomicBlockFactory({ depthControls }: { depthControls: DepthControls }): Block {
+  const { cd, cmd, td, tmd } = depthControls
+
+  const childrenBase: Omit<BlocksField, 'name'> = {
+    type: 'blocks',
+    blocks: [],
+    admin: { initCollapsed: true },
+    typescriptSchema: [() => ({ $ref: `#/definitions/ChildBlocks` })],
+  }
+
+  const cb: BlocksField = {
+    ...childrenBase,
+    name: 'children',
+    blockReferences: [...NonRecursiveChildBlocks],
+    admin: { ...childrenBase.admin, condition: (_, sd) => Boolean(sd.type !== 'input') },
+  }
+  if (cd < cmd) cb.blockReferences?.unshift(AtomicBlockFactory({ depthControls: { ...depthControls, cd: cd + 1 } }))
+
+  const tcb: BlocksField = { ...childrenBase, name: 'triggerChildren', blockReferences: [...NonRecursiveChildBlocks] }
+  if (td < tmd) tcb.blockReferences?.unshift(AtomicBlockFactory({ depthControls: { cd: td + 1, cmd: tmd, td: td + 1, tmd } }))
+
+  const atomicBlock: Block = {
+    slug: 'AtomicChild',
+    interfaceName: 'AtomicChild',
+    labels: { singular: 'Atomic', plural: 'Atomic' },
+    admin: { components: { Label: { path: AtomicPath } } },
+    fields: [
+      AtomicBlockControlBar,
+      {
+        type: 'tabs',
+        tabs: [
+          {
+            label: 'Content',
+            admin: { description: d.content },
+            fields: [
+              {
+                type: 'group',
+                label: 'Content',
+                admin: {
+                  hideGutter: true,
+                  description: d.contentTab,
+                  condition: (_, sd) => Boolean(sd?.type !== 'button' || (sd?.type === 'button' && sd?.buttonType === 'portal')),
+                },
+                fields: [contentClassNameField, cb],
+              },
+            ],
+          },
+          {
+            label: 'Trigger',
+            admin: { description: d.trigger },
+            fields: [
+              {
+                type: 'group',
+                label: 'Trigger',
+                admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'button') },
+                fields: [
+                  triggerClassNameField,
+                  {
+                    type: 'row',
+                    fields: [
+                      { type: 'text', name: 'ariaLabel', admin: { description: d.ariaLabel, width: '50%' } },
+                      { type: 'text', name: 'screenReaderText', admin: { description: d.screenReaderText, width: '50%' } },
+                    ],
+                  },
+                  tcb,
+                ],
+              },
+            ],
+          },
+          { label: 'Actions', admin: { description: d.actions }, fields: [TriggerActionsTab, ContentActionsTab] },
+          { label: 'SVR', admin: { description: d.svr }, fields: [formRateLimitTab, formSanitationTab, formValidationTab, inputTab] },
+          AtomicChildSettingsTab,
+          TrackingTab,
+        ],
+      },
+      ColoredEnd,
+    ],
+  }
+  return atomicBlock
+}
+
+const AtomicBlock = AtomicBlockFactory({ depthControls: { cd: 0, cmd: 12, td: 0, tmd: 1 } })
+
+export default AtomicBlock

package/template/src/blocks/children/atomic/controlBar.ts

@@ -0,0 +1,43 @@
+import { GroupField } from 'payload'
+import { FormFields } from './variants/form/controlBar'
+import { TagControlBar } from './variants/tag/controlBar'
+import { InputTypeField } from './variants/input/typeField'
+import { ButtonTypeField } from './variants/button/typeField'
+import { InputControlBar } from './variants/input/controlBar'
+import { LinkControlBarFields } from './variants/button/variants/link/controlBar'
+import { PortalControlsFields } from './variants/button/variants/portal/controlBar'
+
+const atomicTypeOptions = [
+  { label: 'Tag', value: 'tag' },
+  { label: 'Form', value: 'form' },
+  { label: 'Input', value: 'input' },
+  { label: 'Button', value: 'button' },
+]
+
+export const AtomicBlockControlBar: GroupField = {
+  type: 'group',
+  admin: { hideGutter: true },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'type',
+          type: 'select',
+          required: true,
+          defaultValue: 'tag',
+          admin: { width: '25%' },
+          interfaceName: 'AtomicChildVariants',
+          options: atomicTypeOptions,
+        },
+        ...TagControlBar,
+        ButtonTypeField,
+        InputTypeField,
+        ...FormFields,
+        ...InputControlBar,
+        ...PortalControlsFields,
+      ],
+    },
+    LinkControlBarFields,
+  ],
+}

package/template/src/blocks/children/atomic/variants/button/typeField.ts

@@ -0,0 +1,16 @@
+import { SelectField } from 'payload'
+import { APField } from '@/fields/apf'
+
+export const ButtonTypeField: SelectField = APField({
+  name: 'buttonType',
+  apf: ['actions'],
+  type: 'select',
+  required: true,
+  interfaceName: 'AtomicButtonTypes',
+  admin: { condition: (_, sd) => Boolean(sd?.type === 'button'), width: '25%' },
+  options: [
+    { label: 'Link', value: 'link' },
+    { label: 'Regular', value: 'regular' },
+    { label: 'Open Portal', value: 'portal' },
+  ],
+})

package/template/src/blocks/children/atomic/variants/button/variants/link/component.client.tsx

@@ -0,0 +1,21 @@
+'use client'
+import React from 'react'
+import NextLink from 'next/link'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useToDa, useButtonActions, useActionContext } from '@/hooks/frontEnd/useActions'
+
+export const AtomicButtonLinkClient: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { block, pt, triggerChildren } = props
+
+  const context = useActionContext()
+  const useButton = useButtonActions({ block, context })
+  const tda = useToDa({ attributers: block.triggerActions?.attributers, context })
+
+  return (
+    //@ts-expect-error href is already applied in the defaultProps
+    <NextLink {...useButton} {...pt?.t?.p} {...pt?.t?.da} {...tda}>
+      {triggerChildren}
+      {block?.screenReaderText && <span className="sr-only">{block?.screenReaderText}</span>}
+    </NextLink>
+  )
+}

package/template/src/blocks/children/atomic/variants/button/variants/link/component.tsx

@@ -0,0 +1,13 @@
+'use server'
+import NextLink from 'next/link'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const AtomicButtonLink: React.FC<RenderChild<AtomicChild>> = async ({ block, pt, triggerChildren }) => {
+  return (
+    //@ts-expect-error href is already applied in the defaultProps
+    <NextLink {...pt?.t?.p} {...pt?.t?.da}>
+      {triggerChildren}
+      {block?.screenReaderText && <span className="sr-only">{block?.screenReaderText}</span>}
+    </NextLink>
+  )
+}

package/template/src/blocks/children/atomic/variants/button/variants/link/controlBar.ts

@@ -0,0 +1,73 @@
+import type { RelationshipField, RowField, SelectField, TextField, UploadField, EmailField as EmailFieldType } from 'payload'
+
+const linkTypeField: SelectField = {
+  name: 'linkType',
+  type: 'select',
+  label: 'Link Type',
+  required: true,
+  interfaceName: 'AtomicButtonLinkTypes',
+  options: [
+    { label: 'Internal Link', value: 'internalLink' },
+    { label: 'External Link', value: 'externalLink' },
+    { label: 'Download', value: 'download' },
+    { label: 'Email', value: 'email' },
+    { label: 'Phone', value: 'phone' },
+  ],
+  admin: { width: '25%', condition: (_, sd) => Boolean(sd?.buttonType === 'link') },
+}
+
+const DownloadField: UploadField = {
+  name: 'download',
+  type: 'upload',
+  relationTo: 'images',
+  label: 'Download',
+  required: true,
+  admin: {
+    width: '25%',
+    allowCreate: false,
+    condition: (_, sd) => Boolean(sd?.linkType && sd?.linkType === 'download'),
+  },
+}
+
+const EmailField: EmailFieldType = {
+  name: 'email',
+  type: 'email',
+  label: 'Email',
+  required: true,
+  admin: { width: '25%', condition: (_, sd) => Boolean(sd?.linkType && sd?.linkType === 'email') },
+}
+
+const ExternalLinkField: TextField = {
+  name: 'externalLink',
+  type: 'text',
+  required: true,
+  admin: { width: '25%', condition: (_, sd) => Boolean(sd?.linkType === 'externalLink') },
+}
+const InternalLinkField: RelationshipField = {
+  name: 'internalLink',
+  type: 'relationship',
+  relationTo: 'pages',
+  required: true,
+  admin: {
+    width: '25%',
+    allowEdit: false,
+    allowCreate: false,
+    condition: (_, sd) => Boolean(sd?.linkType && sd?.linkType === 'internalLink'),
+  },
+}
+
+const PhoneField: TextField = {
+  name: 'phone',
+  type: 'text',
+  admin: {
+    width: '25%',
+    placeholder: '+1 123 456 7890 ',
+    condition: (_, sd) => Boolean(sd?.linkType && sd?.linkType === 'phone'),
+  },
+}
+
+export const LinkControlBarFields: RowField = {
+  type: 'row',
+  admin: { condition: (_, sd) => Boolean(sd?.buttonType === 'link') },
+  fields: [linkTypeField, InternalLinkField, ExternalLinkField, DownloadField, EmailField, PhoneField],
+}

package/template/src/blocks/children/atomic/variants/button/variants/link/settings.ts

@@ -0,0 +1,26 @@
+import { GroupField } from 'payload'
+
+export const LinkSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Link Settings',
+  admin: {
+    hideGutter: true,
+    condition: (_, sd) =>
+      Boolean(sd?.type === 'button' && sd?.buttonType === 'link' && (sd?.linkType === 'internalLink' || sd?.linkType === 'externalLink')),
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        { name: 'anchor', type: 'text', admin: { width: '50%' } },
+        { name: 'parameters', type: 'text', admin: { width: '50%' } },
+      ],
+    },
+    { name: 'prefetch', type: 'checkbox', label: 'Prefetch Link Data', admin: { width: '20%' } },
+    { name: 'newTab', type: 'checkbox', label: 'Open in new tab', admin: { width: '20%' } },
+    { name: 'noOpener', type: 'checkbox', admin: { width: '20%' } },
+    { name: 'noReferrer', type: 'checkbox', admin: { width: '20%' } },
+    { name: 'replace', type: 'checkbox', label: 'Replace current page', admin: { width: '20%' } },
+    { name: 'scrollTo', type: 'checkbox', label: 'Scroll to anchor on click?', admin: { width: '20%' } },
+  ],
+}

package/template/src/blocks/children/atomic/variants/button/variants/portal/controlBar.ts

@@ -0,0 +1,35 @@
+import { APField } from '@/fields/apf'
+
+import type { CheckboxField, SelectField, TextField } from 'payload'
+
+const portalTypeOptions = [
+  { label: 'Popover', value: 'popover' },
+  { label: 'Dialog', value: 'dialog' },
+]
+
+const portalTypeField: SelectField = APField({
+  type: 'select',
+  apf: ['actions'],
+  name: 'portalType',
+  required: true,
+  options: portalTypeOptions,
+  interfaceName: 'AtomicButtonPortalTypes',
+  admin: { width: '25%', condition: (_, sd) => Boolean(sd?.type === 'button' && sd?.buttonType === 'portal') },
+})
+
+const portalNameField: TextField = APField({
+  type: 'text',
+  apf: ['actions'],
+  name: 'portalName',
+  required: true,
+  admin: { condition: (_, sd) => Boolean(sd?.type === 'button' && sd?.buttonType === 'portal'), width: '25%' },
+})
+
+const portalPersistedField: CheckboxField = APField({
+  type: 'checkbox',
+  apf: ['actions'],
+  name: 'persisted',
+  admin: { condition: (_, sd) => Boolean(sd?.type === 'button' && sd?.buttonType === 'portal' && sd?.portalName), width: '25%' },
+})
+
+export const PortalControlsFields: [SelectField, TextField, CheckboxField] = [portalTypeField, portalNameField, portalPersistedField]