@pro-laico/create-atomic-payload 0.1.4

package/template/src/ts/zap/ap.ts

@@ -0,0 +1,82 @@
+import 'server-only' //DO NOT REMOVE
+import z from 'zod'
+import traverse from 'traverse'
+import type { AtomicRegistry } from '@/ts/types'
+
+type ZapSchemaRegistry = { id: string; description?: string }
+
+//KNOWN ISSUE: Updating past zod 4.1.11 breaks some handling of zod schemas. Need to investigate why and fix.
+const rss = z.record(z.string(), z.string()).meta({ id: 'RSS', description: 'Type: {@link RSS} Record<string, string>' })
+const sosa = z.union([z.string(), z.array(z.string())]).meta({ id: 'SOSA', description: 'Type: {@link SOSA} String | String[]' })
+z.record(z.string(), rss).meta({ id: 'RSRSS', description: 'Type: {@link RSRSS} Record<string, Record<string, string>>' })
+z.record(z.string(), sosa).meta({ id: 'RSSOSA', description: 'Type: {@link RSSOSA} Record<string, string | string[]>' })
+
+class AtomicPayloadZodClass {
+  /**
+   * Adds a schema to the global registry.
+   * @param schema - The zod schema to add.
+   * @param options - The options for the schema. Always includes the id, and optionally the description. Automatically adds a type link to the schema.
+   * @returns The schema.
+   */
+  add<T extends z.ZodType>(schema: T, options: ZapSchemaRegistry): T {
+    const fullDescription = options.description ? `Type:{@link ${options.id}} ${options.description}` : `Type: {@link ${options.id}}`
+    if (!z.globalRegistry._idmap.has(options.id)) {
+      z.globalRegistry.add(schema, { id: options.id, description: fullDescription })
+      z.globalRegistry._idmap.set(options.id, schema)
+    }
+    return schema
+  }
+
+  /**
+   * Gets a schema from the global registry.
+   * @param id - The id of the zod schema to get.
+   * @param schema - Only necessary if the schema is being called before it is added to the global registry. Import and add said schema here to fix.
+   * @returns The schema.
+   */
+  get<T extends keyof AtomicRegistry>(id: T, schema?: z.ZodType): z.ZodType<AtomicRegistry[T]> {
+    const result = z.globalRegistry._idmap.get(id) as z.ZodType<AtomicRegistry[T]>
+    if (!result) throw new Error(`Schema with id ${id} not found. It is recommended you add the second argument, which is the desired schema.`)
+    return result
+  }
+
+  /**
+   * Returns a type helper for the given schema ID.
+   * Use this in type annotations: `const value: z.ap.Type<'SchemaId'> = ...`
+   * @param id - The id of the zod schema type to get.
+   * @returns A type that TypeScript can infer from AtomicRegistry.
+   */
+  type<T extends keyof AtomicRegistry>(id: T): AtomicRegistry[T] {
+    // This method exists for type inference only
+    // The actual type is resolved at compile time via the Type helper
+    return undefined as any as AtomicRegistry[T]
+  }
+
+  /** Converts the ZOD global registry to a JSON Schema. */
+  toJSONSchema() {
+    z.globalRegistry.add(z.object(Object.fromEntries(z.globalRegistry._idmap.entries())), { id: 'AtomicRegistry' })
+
+    const jsonSchema = z.toJSONSchema(z.globalRegistry, { target: 'draft-4', uri: (id) => `#/definitions/${id}` }).schemas
+    traverse(jsonSchema).forEach(function () {
+      if (this.key === '$id') this.remove()
+    })
+    return jsonSchema
+  }
+}
+
+/** {@link AtomicPayloadsZodClass}: Adds methods that enhance Payload's typing. */
+export const ap = new AtomicPayloadZodClass()
+
+/**
+ * Namespace for type-level helpers that merge with the runtime `ap` instance.
+ * This allows `z.ap.Type<'SchemaId'>` to work as a type helper.
+ */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace ap {
+  /**
+   * Type helper to get the TypeScript type for a schema ID from AtomicRegistry.
+   * Usage: `const value: z.ap.Type<'SchemaId'> = ...`
+   */
+  export type Type<T extends keyof AtomicRegistry> = AtomicRegistry[T]
+}
+
+export * from 'zod'

package/template/src/ts/zap/index.ts

@@ -0,0 +1,4 @@
+// Includes all of zods exports, with an attached Atomic Payloads Zod Class Instance
+import * as z from './ap'
+export { z }
+export default z

package/template/src/ui/apf/controls.tsx

@@ -0,0 +1,88 @@
+'use client'
+import './index.scss'
+import React, { memo } from 'react'
+import { type APFunction } from '@/ts/types/apf'
+import { apfRegistry } from '@/fields/apf/storage'
+import type { BeforeDocumentControlsClientProps } from 'payload'
+import { Button, EditIcon, PlusIcon, LinkIcon, MenuIcon, PopupList, SearchIcon, FolderIcon, DocumentIcon, useFormFields } from '@payloadcms/ui'
+
+type RunControlsProps = { APFunctions?: APFunction[] } & BeforeDocumentControlsClientProps
+
+//TODO: Add better icons
+const apfIcons: Record<APFunction, React.ComponentType> = {
+  page: LinkIcon,
+  pages: DocumentIcon,
+  classes: EditIcon,
+  actions: PlusIcon,
+  form: MenuIcon,
+  active: FolderIcon,
+  seo: SearchIcon,
+  sitemap: FolderIcon,
+  siteMetadata: SearchIcon,
+}
+
+const RunControls: React.FC<RunControlsProps> = ({ APFunctions = Object.keys(apfRegistry) }) => {
+  const runValues = useFormFields(([fields]) => {
+    const values = {} as Record<APFunction, boolean>
+
+    Object.entries(apfRegistry).forEach(([apFunction, path]) => (values[apFunction as APFunction] = Boolean(fields[path]?.value)))
+
+    return values
+  })
+
+  const setRunValue = useFormFields(([, dispatch]) => (apFunction: APFunction, value: boolean) => {
+    dispatch({ type: 'UPDATE', path: apfRegistry[apFunction], value })
+  })
+
+  const handleToggleRun = (apFunction: APFunction) => setRunValue(apFunction, !runValues[apFunction])
+
+  const activeControls = Object.entries(runValues)
+    .filter(([, isActive]) => isActive)
+    .map(([apfFunction]) => apfFunction as APFunction)
+
+  return (
+    <Button
+      buttonStyle="none"
+      className="full-width-button"
+      tooltip="Processes That Run On Save"
+      SubMenuPopupContent={() => (
+        <PopupList.ButtonGroup>
+          <div className="apf-controls__header flex-column">
+            <span className="apf-controls__header-title text-sm">Processes That Run On Save</span>
+          </div>
+          {Object.keys(apfRegistry)
+            .filter((apFunctionString) => APFunctions.includes(apFunctionString as APFunction))
+            .map((apFunctionString) => {
+              const apFunction = apFunctionString as APFunction
+              //const isActive = runValues[apFunction]
+              const IconComponent = apfIcons[apFunction as APFunction]
+
+              return (
+                <PopupList.Button key={apFunction} onClick={() => handleToggleRun(apFunction)}>
+                  <div className="apf-controls__button-content">
+                    <span>{apFunction}</span>
+                    <IconComponent />
+                  </div>
+                </PopupList.Button>
+              )
+            })}
+        </PopupList.ButtonGroup>
+      )}
+    >
+      {activeControls.length > 0 ? (
+        <div className="apf-controls__active-controls">
+          {activeControls.map((apFunction) => {
+            const IconComponent = apfIcons[apFunction]
+            return <IconComponent key={apFunction} />
+          })}
+        </div>
+      ) : (
+        <span>None</span>
+      )}
+    </Button>
+  )
+}
+
+RunControls.displayName = 'RunControls'
+
+export default memo(RunControls)

package/template/src/ui/apf/field.tsx

@@ -0,0 +1,81 @@
+'use client'
+import './index.scss'
+import APFieldLabelServer from './label'
+import React, { memo, useMemo } from 'react'
+import { apfRegistry } from '@/fields/apf/storage'
+import type { APFFieldComponentType } from '@/ts/types'
+import { toKebabCase } from '@/utilities/format/toKebabCase'
+import { useField, useFormFields, NumberField, TextInput, TextareaInput, CheckboxInput, SelectField, FieldDescription } from '@payloadcms/ui'
+
+export const APFieldComponent: APFFieldComponentType = (props) => {
+  const { path, field, apf, type } = props
+
+  const { value, initialValue, setValue } = useField<unknown>({ path })
+
+  const targetPaths = useMemo(() => {
+    const apfArray = Array.isArray(apf) ? apf : [apf]
+    return apfArray?.map((apfItem) => apfRegistry[apfItem])
+  }, [apf])
+
+  const setTargetValues = useFormFields(([, dispatch]) => (value: boolean) => {
+    targetPaths?.forEach((targetPath) => dispatch({ type: 'UPDATE', path: targetPath, value }))
+  })
+
+  function handleTextChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    if (type === 'text' || type === 'textarea') {
+      const { kebab } = props
+      let tempValue = e.target.value
+      if (kebab) tempValue = toKebabCase(tempValue)
+      setValue(tempValue)
+      setTargetValues(true)
+    }
+    if (value !== initialValue) setTargetValues(true)
+  }
+
+  function handleChange(value: unknown) {
+    setValue(value)
+    if (value !== initialValue) setTargetValues(true)
+  }
+
+  let fieldComponent = null
+  switch (type) {
+    case 'text':
+      fieldComponent = (
+        <TextInput path={path} style={field?.admin?.style} readOnly={field?.admin?.readOnly} value={value as string} onChange={handleTextChange} />
+      )
+      break
+    case 'textarea':
+      fieldComponent = (
+        <TextareaInput
+          path={path}
+          style={field?.admin?.style}
+          readOnly={field?.admin?.readOnly}
+          value={value as string}
+          onChange={handleTextChange}
+        />
+      )
+      break
+    case 'checkbox':
+      fieldComponent = (
+        <CheckboxInput checked={value as boolean} readOnly={field?.admin?.readOnly} onToggle={() => handleChange(!value)} id={`field-${path}`} />
+      )
+      break
+    case 'select':
+      return <SelectField value={value as string} readOnly={field?.admin?.readOnly} field={field} onChange={handleChange} path={path} />
+    case 'number':
+      return <NumberField readOnly={field?.admin?.readOnly} field={field} onChange={handleChange} path={path} />
+    default:
+      console.warn('Missing Field Component With Type: ', type)
+      fieldComponent = <div> Missing Field Component </div>
+  }
+
+  return (
+    <div className={`field-type ${type}`}>
+      <APFieldLabelServer {...props} />
+      {fieldComponent}
+      {field?.admin?.description && <FieldDescription description={field.admin.description} path={path} />}
+    </div>
+  )
+}
+
+export default memo(APFieldComponent)

package/template/src/ui/apf/index.scss

@@ -0,0 +1,59 @@
+.label-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.doc-link-label {
+  display: flex;
+  direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.doc-link-button {
+  background: none;
+  border: none;
+  padding-bottom: 0.3125rem;
+  cursor: pointer;
+  border-radius: calc(infinity * 1px);
+}
+
+.doc-link-button-icon {
+  height: 18px;
+  width: 18px;
+  padding-bottom: 0.3125rem;
+  margin-right: 4px;
+  fill: var(--theme-elevation-800);
+  stroke: var(--theme-elevation-800);
+  &:hover {
+    fill: #27ae60;
+    stroke: #27ae60;
+  }
+}
+
+.apf-controls {
+  &__header {
+    padding: 0 0 4px 0;
+    border-bottom: 2px solid var(--theme-border-color);
+    text-align: center;
+  }
+
+  &__header-title {
+    text-transform: capitalize;
+  }
+
+  &__button-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    text-transform: capitalize;
+  }
+
+  &__active-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}

package/template/src/ui/apf/label.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import NextLink from 'next/link'
+import { FieldLabel } from '@payloadcms/ui'
+import type { APFFieldComponentType } from '@/ts/types'
+
+const APFieldLabelServer: APFFieldComponentType = (props) => {
+  const { path, field, docLink } = props
+  return (
+    <div className="doc-link-label">
+      {docLink && (
+        <NextLink className="doc-link-button" href={docLink} target="_blank" rel="noopener noreferrer">
+          <svg xmlns="http://www.w3.org/2000/svg" className="doc-link-button-icon" viewBox="8.0 8.0 112.1 112.1" fill="#2ecc71" stroke="#2ecc71">
+            <path d="M64 8a56 56 0 10.1 112.1A56 56 0 0064 8m0 104a48 48 0 110-96 48 48 0 010 96" />
+            <path d="M68 36c0 5.3-8 5.3-8 0s8-5.3 8 0m-4 12a4 4 0 00-4 4v40c0 2.2 1.8 4 4 4s4-1.8 4-4V52a4 4 0 00-4-4" />
+          </svg>
+        </NextLink>
+      )}
+      <FieldLabel htmlFor={`field-${path}`} label={field?.label} path={path} required={field?.required} />
+    </div>
+  )
+}
+
+export default APFieldLabelServer

package/template/src/ui/assets/Icon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const AtomicIcon = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill={'white'}
+      stroke={'white'}
+      height="18px"
+      width="18px"
+      viewBox="4.831294298086888 3.964216194994505 119.20798159513734 119.2044895069186"
+    >
+      <path d="m78.914 57.711-1.453 6.258v-.004a14.34 14.34 0 0 0 10.082-2.895l-4.54-4.539a8.4 8.4 0 0 1-4.089 1.18M40.215 122l38.484-9.164V92.539l-34.102 19.234zM15.164 49.301 6 87.785l10.227-4.383L35.46 49.3zm55.133-.379a8.3 8.3 0 0 1 1.172-3.926l-4.54-4.539a14.6 14.6 0 0 0-2.952 8.844c0 .328 0 .66.035 1zM86.465 5.133A36.4 36.4 0 0 0 78.633 6L122 49.367A36.33 36.33 0 0 0 86.465 5.133" />
+      <path d="M54.762 23.648 20.324 84.695l10 10L51.972 73.05a2.11 2.11 0 0 1 2.977 0c.82.824.82 2.152 0 2.977L33.3 97.672l10 10 61.05-34.434a36.42 36.42 0 0 0 16.302-19.266L74.028 7.347a36.43 36.43 0 0 0-19.266 16.3zM103.938 49.3a25.243 25.243 0 0 1-25.239 25.239 25.23 25.23 0 0 1-17.844-7.395 25.23 25.23 0 0 1 0-35.692 25.24 25.24 0 0 1 17.844-7.39 25.28 25.28 0 0 1 17.84 7.398 25.28 25.28 0 0 1 7.399 17.84" />
+      <path d="M78.699 70.332a21.02 21.02 0 0 0 14.871-6.16 21.03 21.03 0 0 0 0-29.742c-3.941-3.946-9.293-6.16-14.871-6.16s-10.926 2.214-14.871 6.16a21.02 21.02 0 0 0-6.16 14.87 21.05 21.05 0 0 0 6.168 14.864 21.05 21.05 0 0 0 14.863 6.168m13.398-7.676h.004a18.8 18.8 0 0 1-13.402 5.57 19 19 0 0 1-4.266-.496 2.08 2.08 0 0 1-1.312-.937 2.1 2.1 0 0 1-.266-1.59l2.38-10.242a2.11 2.11 0 0 1 2.522-1.574 4.11 4.11 0 0 0 3.93-1.129c.395-.398.93-.625 1.492-.625a1.91 1.91 0 0 1 1.493.613l7.437 7.438c.82.82.82 2.152 0 2.972zm-14.023-19.96 2.383-10.243.004-.004a2.08 2.08 0 0 1 .937-1.308 2.08 2.08 0 0 1 1.586-.262 18.99 18.99 0 0 1 14.188 14.32 2.1 2.1 0 0 1-1.602 2.508L85.293 49.95l.004.004q-.224.047-.453.047c-.98 0-1.832-.68-2.047-1.637a4.21 4.21 0 0 0-3.133-3.144 2.12 2.12 0 0 1-1.312-.938 2.1 2.1 0 0 1-.262-1.586zm-1.488 6.6.004-.003a2.05 2.05 0 0 1 1.644-2.106 2.15 2.15 0 0 1 1.977.586c.508.52.718 1.262.55 1.97a2.28 2.28 0 0 1-2.07 1.66 2.193 2.193 0 0 1-2.09-2.11zM65.332 35.9l.004-.004c.82-.82 2.148-.82 2.968 0l7.438 7.437a2.095 2.095 0 0 1 0 2.98 4.18 4.18 0 0 0-1.25 2.99q.002.434.086.859a2.1 2.1 0 0 1-1.598 2.484l-10.27 2.242a2.103 2.103 0 0 1-2.508-1.613 19 19 0 0 1-.422-3.973 18.8 18.8 0 0 1 5.563-13.41z" />
+      <path d="m86.164 45.457 6.293-1.375a14.82 14.82 0 0 0-8.398-8.48l-1.457 6.265a8.47 8.47 0 0 1 3.562 3.59" />
+    </svg>
+  )
+}
+
+export default AtomicIcon

package/template/src/ui/assets/Logo.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const AtomicLogo = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill={'white'}
+      stroke={'white'}
+      height="18px"
+      width="18px"
+      viewBox="4.831294298086888 3.964216194994505 119.20798159513734 119.2044895069186"
+    >
+      <path d="m78.914 57.711-1.453 6.258v-.004a14.34 14.34 0 0 0 10.082-2.895l-4.54-4.539a8.4 8.4 0 0 1-4.089 1.18M40.215 122l38.484-9.164V92.539l-34.102 19.234zM15.164 49.301 6 87.785l10.227-4.383L35.46 49.3zm55.133-.379a8.3 8.3 0 0 1 1.172-3.926l-4.54-4.539a14.6 14.6 0 0 0-2.952 8.844c0 .328 0 .66.035 1zM86.465 5.133A36.4 36.4 0 0 0 78.633 6L122 49.367A36.33 36.33 0 0 0 86.465 5.133" />
+      <path d="M54.762 23.648 20.324 84.695l10 10L51.972 73.05a2.11 2.11 0 0 1 2.977 0c.82.824.82 2.152 0 2.977L33.3 97.672l10 10 61.05-34.434a36.42 36.42 0 0 0 16.302-19.266L74.028 7.347a36.43 36.43 0 0 0-19.266 16.3zM103.938 49.3a25.243 25.243 0 0 1-25.239 25.239 25.23 25.23 0 0 1-17.844-7.395 25.23 25.23 0 0 1 0-35.692 25.24 25.24 0 0 1 17.844-7.39 25.28 25.28 0 0 1 17.84 7.398 25.28 25.28 0 0 1 7.399 17.84" />
+      <path d="M78.699 70.332a21.02 21.02 0 0 0 14.871-6.16 21.03 21.03 0 0 0 0-29.742c-3.941-3.946-9.293-6.16-14.871-6.16s-10.926 2.214-14.871 6.16a21.02 21.02 0 0 0-6.16 14.87 21.05 21.05 0 0 0 6.168 14.864 21.05 21.05 0 0 0 14.863 6.168m13.398-7.676h.004a18.8 18.8 0 0 1-13.402 5.57 19 19 0 0 1-4.266-.496 2.08 2.08 0 0 1-1.312-.937 2.1 2.1 0 0 1-.266-1.59l2.38-10.242a2.11 2.11 0 0 1 2.522-1.574 4.11 4.11 0 0 0 3.93-1.129c.395-.398.93-.625 1.492-.625a1.91 1.91 0 0 1 1.493.613l7.437 7.438c.82.82.82 2.152 0 2.972zm-14.023-19.96 2.383-10.243.004-.004a2.08 2.08 0 0 1 .937-1.308 2.08 2.08 0 0 1 1.586-.262 18.99 18.99 0 0 1 14.188 14.32 2.1 2.1 0 0 1-1.602 2.508L85.293 49.95l.004.004q-.224.047-.453.047c-.98 0-1.832-.68-2.047-1.637a4.21 4.21 0 0 0-3.133-3.144 2.12 2.12 0 0 1-1.312-.938 2.1 2.1 0 0 1-.262-1.586zm-1.488 6.6.004-.003a2.05 2.05 0 0 1 1.644-2.106 2.15 2.15 0 0 1 1.977.586c.508.52.718 1.262.55 1.97a2.28 2.28 0 0 1-2.07 1.66 2.193 2.193 0 0 1-2.09-2.11zM65.332 35.9l.004-.004c.82-.82 2.148-.82 2.968 0l7.438 7.437a2.095 2.095 0 0 1 0 2.98 4.18 4.18 0 0 0-1.25 2.99q.002.434.086.859a2.1 2.1 0 0 1-1.598 2.484l-10.27 2.242a2.103 2.103 0 0 1-2.508-1.613 19 19 0 0 1-.422-3.973 18.8 18.8 0 0 1 5.563-13.41z" />
+      <path d="m86.164 45.457 6.293-1.375a14.82 14.82 0 0 0-8.398-8.48l-1.457 6.265a8.47 8.47 0 0 1 3.562 3.59" />
+    </svg>
+  )
+}
+
+export default AtomicLogo

package/template/src/ui/assets/atomicIcon.tsx

@@ -0,0 +1,27 @@
+type AtomicIconProps = { type: 'tag' | 'form' | 'input' | 'button' | 'portal' }
+
+const typeColors: Record<AtomicIconProps['type'], string> = {
+  tag: 'var(--atomic-distinct-1)', // green
+  form: 'var(--atomic-distinct-2)', // orange
+  input: 'var(--atomic-distinct-3)', // blue
+  button: 'var(--atomic-distinct-4)', // yellow
+  portal: 'var(--atomic-distinct-5)', // purple
+}
+
+export const AtomicIcon: React.FC<AtomicIconProps> = ({ type }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill={typeColors[type] || 'white'}
+      stroke={typeColors[type] || 'white'}
+      height="24px"
+      width="24px"
+      viewBox="4.831294298086888 3.964216194994505 119.20798159513734 119.2044895069186"
+    >
+      <path d="m78.914 57.711-1.453 6.258v-.004a14.34 14.34 0 0 0 10.082-2.895l-4.54-4.539a8.4 8.4 0 0 1-4.089 1.18M40.215 122l38.484-9.164V92.539l-34.102 19.234zM15.164 49.301 6 87.785l10.227-4.383L35.46 49.3zm55.133-.379a8.3 8.3 0 0 1 1.172-3.926l-4.54-4.539a14.6 14.6 0 0 0-2.952 8.844c0 .328 0 .66.035 1zM86.465 5.133A36.4 36.4 0 0 0 78.633 6L122 49.367A36.33 36.33 0 0 0 86.465 5.133" />
+      <path d="M54.762 23.648 20.324 84.695l10 10L51.972 73.05a2.11 2.11 0 0 1 2.977 0c.82.824.82 2.152 0 2.977L33.3 97.672l10 10 61.05-34.434a36.42 36.42 0 0 0 16.302-19.266L74.028 7.347a36.43 36.43 0 0 0-19.266 16.3zM103.938 49.3a25.243 25.243 0 0 1-25.239 25.239 25.23 25.23 0 0 1-17.844-7.395 25.23 25.23 0 0 1 0-35.692 25.24 25.24 0 0 1 17.844-7.39 25.28 25.28 0 0 1 17.84 7.398 25.28 25.28 0 0 1 7.399 17.84" />
+      <path d="M78.699 70.332a21.02 21.02 0 0 0 14.871-6.16 21.03 21.03 0 0 0 0-29.742c-3.941-3.946-9.293-6.16-14.871-6.16s-10.926 2.214-14.871 6.16a21.02 21.02 0 0 0-6.16 14.87 21.05 21.05 0 0 0 6.168 14.864 21.05 21.05 0 0 0 14.863 6.168m13.398-7.676h.004a18.8 18.8 0 0 1-13.402 5.57 19 19 0 0 1-4.266-.496 2.08 2.08 0 0 1-1.312-.937 2.1 2.1 0 0 1-.266-1.59l2.38-10.242a2.11 2.11 0 0 1 2.522-1.574 4.11 4.11 0 0 0 3.93-1.129c.395-.398.93-.625 1.492-.625a1.91 1.91 0 0 1 1.493.613l7.437 7.438c.82.82.82 2.152 0 2.972zm-14.023-19.96 2.383-10.243.004-.004a2.08 2.08 0 0 1 .937-1.308 2.08 2.08 0 0 1 1.586-.262 18.99 18.99 0 0 1 14.188 14.32 2.1 2.1 0 0 1-1.602 2.508L85.293 49.95l.004.004q-.224.047-.453.047c-.98 0-1.832-.68-2.047-1.637a4.21 4.21 0 0 0-3.133-3.144 2.12 2.12 0 0 1-1.312-.938 2.1 2.1 0 0 1-.262-1.586zm-1.488 6.6.004-.003a2.05 2.05 0 0 1 1.644-2.106 2.15 2.15 0 0 1 1.977.586c.508.52.718 1.262.55 1.97a2.28 2.28 0 0 1-2.07 1.66 2.193 2.193 0 0 1-2.09-2.11zM65.332 35.9l.004-.004c.82-.82 2.148-.82 2.968 0l7.438 7.437a2.095 2.095 0 0 1 0 2.98 4.18 4.18 0 0 0-1.25 2.99q.002.434.086.859a2.1 2.1 0 0 1-1.598 2.484l-10.27 2.242a2.103 2.103 0 0 1-2.508-1.613 19 19 0 0 1-.422-3.973 18.8 18.8 0 0 1 5.563-13.41z" />
+      <path d="m86.164 45.457 6.293-1.375a14.82 14.82 0 0 0-8.398-8.48l-1.457 6.265a8.47 8.47 0 0 1 3.562 3.59" />
+    </svg>
+  )
+}

package/template/src/ui/assets/warningIcon.ts

@@ -0,0 +1,6 @@
+const warning = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="10.7 10.7 106.6 106.6" fill="currentColor" stroke="currentColor">
+  <path d="M64 37.3a5.3 5.3 0 015.3 5.4v26.6a5.3 5.3 0 11-10.6 0V42.7a5.3 5.3 0 015.3-5.4m0 53.4A5.3 5.3 0 0064 80a5.3 5.3 0 000 10.7"/>
+  <path fill-rule="evenodd" d="M10.7 64a53.3 53.3 0 11106.6 0 53.3 53.3 0 01-106.6 0M64 21.3a42.7 42.7 0 100 85.4 42.7 42.7 0 000-85.4"/>
+</svg>`
+
+export default warning

package/template/src/ui/blocks/actionBlock.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { useMemo } from 'react'
+import { type BlocksFieldClientProps } from 'payload'
+import { ActionFilters } from '@/blocks/actions/filters'
+import { useFormFields, BlocksField } from '@payloadcms/ui'
+import { ActionBlockFilter, ActionBlockPrefix } from '@/ts/types/actions'
+import { AtomicInputTypes, AtomicButtonTypes, AtomicButtonPortalTypes, ChildBlockType, AtomicChildVariants, ActionBlockType } from '@/ts/types'
+
+interface ActionBlocksFieldProps extends BlocksFieldClientProps {
+  placement: ActionBlockPrefix
+}
+
+const ActionBlocksField: React.FC<ActionBlocksFieldProps> = (props) => {
+  const { path, field, placement } = props
+  const p = useMemo(() => path.split('.').slice(0, -2).join('.'), [path])
+
+  const type = useFormFields(([fields]) => fields[`${p}.type`]?.value as AtomicChildVariants | undefined)
+  const blockType = useFormFields(([fields]) => fields[`${p}.blockType`]?.value as ChildBlockType | undefined)
+  const inputType = useFormFields(([fields]) => fields[`${p}.inputType`]?.value as AtomicInputTypes | undefined)
+  const buttonType = useFormFields(([fields]) => fields[`${p}.buttonType`]?.value as AtomicButtonTypes | undefined)
+  const portalType = useFormFields(([fields]) => fields[`${p}.portalType`]?.value as AtomicButtonPortalTypes | undefined)
+
+  const block = useMemo((): ActionBlockFilter => {
+    const blockFilter: ActionBlockFilter = { placement, blockType: blockType || 'AtomicChild' }
+
+    if (type) blockFilter.type = type
+    if (inputType) blockFilter.inputType = inputType
+    if (buttonType) blockFilter.buttonType = buttonType
+    if (portalType) blockFilter.portalType = portalType
+
+    return blockFilter
+  }, [placement, type, blockType, inputType, buttonType, portalType])
+
+  const filteredField = useMemo(() => {
+    const blockRefs = field?.blockReferences?.filter((slug) => ActionFilters[slug as ActionBlockType](block))
+    return { ...field, blocks: [], blockReferences: blockRefs }
+  }, [field, block])
+
+  return <BlocksField {...props} field={filteredField} />
+}
+
+ActionBlocksField.displayName = 'ActionBlocksField'
+
+export default ActionBlocksField

package/template/src/ui/blocks/inputBlock.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { useMemo } from 'react'
+import { AtomicInputTypes } from '@/ts/types'
+import { useFormFields, BlocksField } from '@payloadcms/ui'
+import { type InputBlocksFieldProps } from '@/ts/types'
+
+const InputBlocksField: React.FC<InputBlocksFieldProps> = (props) => {
+  const { path, field, usedOn } = props
+  const p = useMemo(() => path.split('.').slice(0, -1).join('.'), [path])
+
+  const inputType = useFormFields(([fields]) => fields[`${p}.inputType`]?.value as AtomicInputTypes | undefined)
+
+  const filteredField = useMemo(() => {
+    if (!inputType) return { ...field, blocks: [], blockReferences: [] }
+    const inputTypes = field.blockReferences?.filter((ref) => usedOn?.some(({ block, usedOn }) => block === ref && usedOn?.includes(inputType)))
+    return { ...field, blocks: [], blockReferences: inputTypes }
+  }, [field, usedOn, inputType])
+
+  return <BlocksField {...props} field={filteredField} />
+}
+
+InputBlocksField.displayName = 'InputBlocksField'
+
+export default InputBlocksField

package/template/src/ui/decorative/coloredEnd.tsx

@@ -0,0 +1,16 @@
+'use client'
+import './index.scss'
+import { useFormFields } from '@payloadcms/ui'
+import { AtomicChildVariants } from '@/ts/types'
+import type { UIFieldClientComponent } from 'payload'
+
+export const ColoredEnd: UIFieldClientComponent = ({ path }) => {
+  const parentBlockPath = path.split('.').slice(0, -1).join('.')
+  const type = useFormFields(([fields]) => fields[`${parentBlockPath}.type`]?.value as AtomicChildVariants | undefined)
+
+  const styleClasses = ['colored-end', type && `colored-end--${type}`].filter(Boolean).join(' ')
+
+  return <div className={styleClasses} />
+}
+
+export default ColoredEnd

package/template/src/ui/decorative/index.scss

@@ -0,0 +1,46 @@
+.colored-end {
+  width: calc(100% + 40px);
+  height: 15px;
+  border-radius: 0 0 3px 3px;
+  margin-left: -20px;
+  margin-right: -20px;
+  margin-bottom: -20px;
+
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    color-mix(in srgb, #fff 65%, transparent) 100%
+  );
+
+  &--tag {
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      color-mix(in srgb, var(--atomic-distinct-1) 65%, transparent) 100%
+    );
+  }
+
+  &--form {
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      color-mix(in srgb, var(--atomic-distinct-2) 65%, transparent) 100%
+    );
+  }
+
+  &--input {
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      color-mix(in srgb, var(--atomic-distinct-3) 65%, transparent) 100%
+    );
+  }
+
+  &--button {
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      color-mix(in srgb, var(--atomic-distinct-4) 65%, transparent) 100%
+    );
+  }
+}

package/template/src/ui/fields/iconSelect/index.tsx

@@ -0,0 +1,19 @@
+'use server'
+import type React from 'react'
+import { SelectField } from '@payloadcms/ui'
+import getCached from '@/utilities/get/cache/react'
+import type { SelectFieldServerComponent } from 'payload'
+
+const IconSelect: SelectFieldServerComponent = async ({ clientField, path, schemaPath, permissions }) => {
+  const iconSet = await getCached('iconSet', true)
+  const result = await getCached('icon-options', true, iconSet)
+
+  if (!result) {
+    console.warn('Icon options fetch failed')
+    return <SelectField field={{ ...clientField, options: [] }} path={path} schemaPath={schemaPath} permissions={permissions} />
+  }
+
+  return <SelectField field={{ ...clientField, options: result || [] }} path={path} schemaPath={schemaPath} permissions={permissions} />
+}
+
+export default IconSelect

package/template/src/ui/fields/slug/index.scss

@@ -0,0 +1,12 @@
+.slug-field-component {
+  .label-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .lock-button {
+    margin: 0;
+    padding-bottom: 0.3125rem;
+  }
+}

package/template/src/ui/fields/slug/index.tsx

@@ -0,0 +1,72 @@
+'use client'
+import './index.scss'
+import { TextFieldClientProps } from 'payload'
+import { formatSlug } from '@/hooks/field/formatSlug'
+import React, { useCallback, useEffect } from 'react'
+import { useField, Button, TextInput, FieldLabel, useFormFields, useForm } from '@payloadcms/ui'
+
+type SlugComponentProps = { fieldToUse: string; checkboxFieldPath: string } & TextFieldClientProps
+
+const SlugComponent: React.FC<SlugComponentProps> = ({
+  path,
+  field,
+  fieldToUse,
+  readOnly: readOnlyFromProps,
+  checkboxFieldPath: checkboxFieldPathFromProps,
+}) => {
+  const { label } = field
+
+  const checkboxFieldPath = path?.includes('.') ? `${path}.${checkboxFieldPathFromProps}` : checkboxFieldPathFromProps
+
+  const { value, setValue } = useField<string>({ path: path || field.name })
+  const { dispatchFields } = useForm()
+
+  // The value of the checkbox
+  // We're using separate useFormFields to minimise re-renders
+  const checkboxValue = useFormFields(([fields]) => {
+    return fields[checkboxFieldPath]?.value as string
+  })
+
+  // The value of the field we're listening to for the slug
+  const targetFieldValue = useFormFields(([fields]) => {
+    return fields[fieldToUse]?.value as string
+  })
+
+  useEffect(() => {
+    if (checkboxValue) {
+      if (targetFieldValue) {
+        const formattedSlug = formatSlug(targetFieldValue)
+        if (value !== formattedSlug) setValue(formattedSlug)
+      } else {
+        if (value !== '') setValue('')
+      }
+    }
+  }, [targetFieldValue, checkboxValue, setValue, value])
+
+  const handleLock = useCallback(
+    (e: React.MouseEvent<Element>) => {
+      e.preventDefault()
+
+      dispatchFields({ type: 'UPDATE', path: checkboxFieldPath, value: !checkboxValue })
+    },
+    [checkboxValue, checkboxFieldPath, dispatchFields],
+  )
+
+  const readOnly = readOnlyFromProps || checkboxValue
+
+  return (
+    <div className="field-type slug-field-component">
+      <div className="label-wrapper" style={field?.admin?.style}>
+        <FieldLabel htmlFor={`field-${path}`} label={label} />
+
+        <Button className="lock-button" buttonStyle="none" onClick={handleLock}>
+          {checkboxValue ? 'Unlock' : 'Lock'}
+        </Button>
+      </div>
+
+      <TextInput value={value} onChange={setValue} path={path || field.name} style={field?.admin?.style} readOnly={Boolean(readOnly)} />
+    </div>
+  )
+}
+
+export default SlugComponent