@pro-laico/create-atomic-payload 0.1.4

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

@@ -0,0 +1,41 @@
+import type { Block } from 'payload'
+import { IconSelectPath } from '@/ui'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { ClassNameField } from '@/fields/className'
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { ChildsSettingsTab } from '@/fields/tabs/block/children/settings'
+
+const d = {
+  icon: 'Select an icon to display.',
+  ariaHidden: 'If checked, the icon will be hidden to screen readers. This is useful if you want to use the icon for decorative purposes only.',
+  svgAtomicClasses: 'Styles applied directly on the svg. If left empty, defaults to 100% width and height.',
+}
+
+export const Icon: Block = {
+  slug: 'IconChild',
+  interfaceName: 'IconChild',
+  labels: { singular: 'Icon', plural: 'Icons' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Icon',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                { name: `icon`, type: 'text', admin: { width: '50%', components: { Field: { path: IconSelectPath } } } },
+                { name: 'ariaHidden', type: 'checkbox', admin: { width: '50%', description: d.ariaHidden } },
+              ],
+            },
+            ClassNameField({ label: 'SVG Atomic Classes', admin: { description: d.svgAtomicClasses, width: '100%' } }),
+          ],
+        },
+        ChildsSettingsTab('IconChild'),
+        TrackingTab,
+      ],
+    },
+    ColoredEnd,
+  ],
+}

package/template/src/blocks/children/icon/component.tsx

@@ -0,0 +1,17 @@
+'use server'
+import { draftMode } from 'next/headers'
+import Warning from '@/ui/assets/warningIcon'
+import getCached from '@/utilities/get/cache/react'
+import { IconChild as IconChildType, RenderChild } from '@/ts/types'
+import { extractSvgContent, extractSvgProps } from '@/utilities/extractSVG'
+
+export const IconChild: React.FC<RenderChild<IconChildType>> = async ({ block: { icon }, pt }) => {
+  const { isEnabled: draft } = await draftMode()
+  if (!icon) return <svg {...pt?.c?.p} {...extractSvgProps(Warning)} dangerouslySetInnerHTML={{ __html: extractSvgContent(Warning) }} />
+
+  // Ensures that if iconSet or the original icon doc is revalidated, the icon will be set as stale, but the page itself will not.
+  const iconSet = await getCached('iconSet', draft)
+  const svg = await getCached('icon', icon, draft, iconSet)
+
+  return <svg {...pt?.c?.p} {...extractSvgProps(svg || Warning)} dangerouslySetInnerHTML={{ __html: extractSvgContent(svg || Warning) }} />
+}

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

@@ -0,0 +1,80 @@
+import type { Block } from 'payload'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { ClassNameField } from '@/fields/className'
+import { ChildsSettingsTab } from '@/fields/tabs/block/children/settings'
+import type { Image as ImageType } from '@/ts/types'
+
+const d = {
+  image: 'Select the image to be displayed.',
+  quality: '0-100. Default is 75. Use 100 for best quality.',
+  loading: 'Default is lazy. Use eager for images visible on load.',
+  decoding: 'Default is async. Use sync for images visible on load.',
+  imageClassName: 'Classes are added directly to the nextImage component.',
+  size: 'If not set, will default to image width. Example: "100vw" or "100px".',
+  fill: 'Default false. If true, the image will be resized to fill the parent container.',
+  priority: 'Default false. If true, the asset will be pre-loaded and disable lazy loading.',
+  alt: 'Defaults to alt set on the image asset. But you can add an alt for this instance here.',
+  blur: 'Default false. If true, will use the automatically generated blur data URL for the image.',
+  version: 'Select the stored version of the image you want to use. Leave blank for automatic optimization.',
+  unoptimized: 'Default false. If true, will not optimize the image for the web. Best for tiny images like logos.',
+}
+
+const sizeOptions: { label: string; value: keyof NonNullable<ImageType['sizes']> }[] = [
+  { label: 'Thumbnail', value: 'thumbnail' },
+  { label: 'Square', value: 'square' },
+  { label: 'Small', value: 'small' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'Large', value: 'large' },
+  { label: 'XLarge', value: 'xlarge' },
+  { label: 'OG', value: 'og' },
+]
+
+export const Image: Block = {
+  slug: 'ImageChild',
+  interfaceName: 'ImageChild',
+  labels: { singular: 'Image', plural: 'Images' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Image',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                { name: 'image', type: 'upload', relationTo: 'images', required: true, admin: { width: '50%', description: d.image } },
+                { name: 'version', type: 'select', options: sizeOptions, admin: { width: '50%', description: d.version } },
+              ],
+            },
+            { name: 'alt', type: 'textarea', admin: { description: d.alt } },
+            ClassNameField({ label: 'Image Atomic Classes', admin: { description: d.imageClassName } }),
+            {
+              type: 'row',
+              fields: [
+                { name: 'priority', type: 'checkbox', admin: { width: '25%', description: d.priority } },
+                { name: 'blur', type: 'checkbox', admin: { width: '25%', description: d.blur } },
+                { name: 'unoptimized', type: 'checkbox', admin: { width: '25%', description: d.unoptimized } },
+                { name: 'fill', type: 'checkbox', admin: { width: '25%', description: d.fill } },
+                {
+                  name: 'loading',
+                  type: 'select',
+                  defaultValue: 'lazy',
+                  options: ['lazy', 'eager'],
+                  admin: { width: '25%', description: d.loading },
+                },
+                { name: 'decoding', type: 'select', options: ['auto', 'sync', 'async'], admin: { width: '25%', description: d.decoding } },
+                { name: 'size', type: 'text', admin: { width: '25%', description: d.size } },
+                { name: 'quality', type: 'number', min: 0, max: 100, admin: { width: '25%', description: d.quality } },
+              ],
+            },
+          ],
+        },
+        ChildsSettingsTab('ImageChild'),
+        TrackingTab,
+      ],
+    },
+    ColoredEnd,
+  ],
+}

package/template/src/blocks/children/image/component.tsx

@@ -0,0 +1,21 @@
+'use server'
+import Image from 'next/image'
+import { RenderChild } from '@/ts/types'
+import getCached from '@/utilities/get/cache/react'
+import type { ImageChild as ImageChildType } from '@/ts/types'
+
+export const ImageChild: React.FC<RenderChild<ImageChildType>> = async (props) => {
+  const { block, pt } = props
+  const { alt = '', src: srcFromProps, ...restP } = pt?.c?.p || {}
+
+  if (typeof block?.image === 'string') return <div className={'w-full h-full bg-gray-200'} />
+
+  // Since images are relationships. We use the id value as part of the cache key.
+  // If the image document is modified, all pages that reference the image doc will be revalidated.
+  // Note that the pages using the image will not be revalidated.
+  // Hence using this getCached function. Everything else on the page stays the same, the image url is the only thing that changes.
+  const src = await getCached('image', block?.image?.id, block?.version)
+  if (!src) return <div className={'w-full h-full bg-gray-200'} />
+
+  return <Image alt={alt as string} src={src} {...restP} {...pt?.c?.da} />
+}

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

@@ -0,0 +1,50 @@
+import type { Block } from 'payload'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { ClassNameField } from '@/fields/className'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import { ChildsSettingsTab } from '@/fields/tabs/block/children/settings'
+import { FixedToolbarFeature, HeadingFeature, InlineToolbarFeature } from '@payloadcms/richtext-lexical'
+
+const d = {
+  richTextAtomicClasses:
+    "Add the class 'prose' to apply tag based styles to rich text content. Supports suffixes '-sm', '-base', '-lg', '-xl', '-2xl'",
+}
+
+export const RichText: Block = {
+  slug: 'RichTextChild',
+  interfaceName: 'RichTextChild',
+  labels: { singular: 'Rich Text', plural: 'Rich Texts' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            ClassNameField({
+              label: 'Rich Text Atomic Classes',
+              defaultValue: 'prose dark:prose-invert',
+              admin: { description: d.richTextAtomicClasses },
+            }),
+            {
+              name: 'richText',
+              type: 'richText',
+              required: true,
+              label: false,
+              editor: lexicalEditor({
+                admin: { hideGutter: true, hideInsertParagraphAtEnd: true },
+                features: ({ rootFeatures }) => {
+                  return [...rootFeatures, HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }), FixedToolbarFeature(), InlineToolbarFeature()]
+                },
+              }),
+            },
+          ],
+        },
+        ChildsSettingsTab('RichTextChild'),
+        TrackingTab,
+      ],
+    },
+    ColoredEnd,
+  ],
+}

package/template/src/blocks/children/richText/component/converters/index.tsx

@@ -0,0 +1,10 @@
+import { internalDocToHref } from './internalLink'
+import { DefaultNodeTypes } from '@payloadcms/richtext-lexical'
+import { JSXConvertersFunction, LinkJSXConverter } from '@payloadcms/richtext-lexical/react'
+
+type NodeTypes = DefaultNodeTypes
+
+export const jsxConverter: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
+  ...defaultConverters,
+  ...LinkJSXConverter({ internalDocToHref }),
+})

package/template/src/blocks/children/richText/component/converters/internalLink.tsx

@@ -0,0 +1,8 @@
+import { SerializedLinkNode } from '@payloadcms/richtext-lexical'
+
+export const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
+  const { value } = linkNode.fields.doc!
+  if (typeof value !== 'object') throw new Error('Expected value to be an object')
+
+  return value.href as string
+}

package/template/src/blocks/children/richText/component/index.tsx

@@ -0,0 +1,10 @@
+import { jsxConverter } from './converters'
+import { type DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+import { RichText as ConvertRichText } from '@payloadcms/richtext-lexical/react'
+
+type Props = { data: DefaultTypedEditorState } & React.HTMLAttributes<HTMLDivElement>
+
+export default function RichText(props: Props) {
+  const { className, ...rest } = props
+  return <ConvertRichText className={className} converters={jsxConverter} {...rest} />
+}

package/template/src/blocks/children/richText/component.tsx

@@ -0,0 +1,7 @@
+import { RenderChild } from '@/ts/types'
+import RichText from '@/blocks/children/richText/component/index'
+import type { RichTextChild as RichTextChildType } from '@/ts/types'
+
+export const RichTextChild: React.FC<RenderChild<RichTextChildType>> = ({ block: { richText }, pt }) => {
+  return <div {...pt?.c?.p}>{richText && <RichText data={richText} />}</div>
+}

package/template/src/blocks/children/richText/defaultLexical.ts

@@ -0,0 +1,65 @@
+import type { TextFieldSingleValidation } from 'payload'
+import {
+  BoldFeature,
+  ItalicFeature,
+  LinkFeature,
+  ParagraphFeature,
+  lexicalEditor,
+  UnderlineFeature,
+  type LinkFields,
+  StrikethroughFeature,
+  OrderedListFeature,
+  UnorderedListFeature,
+  SuperscriptFeature,
+  InlineCodeFeature,
+  HeadingFeature,
+  AlignFeature,
+  IndentFeature,
+  BlockquoteFeature,
+  InlineToolbarFeature,
+  FixedToolbarFeature,
+} from '@payloadcms/richtext-lexical'
+
+export const defaultLexical = lexicalEditor({
+  features: [
+    BoldFeature(),
+    ItalicFeature(),
+    UnderlineFeature(),
+    StrikethroughFeature(),
+    SuperscriptFeature(),
+    InlineCodeFeature(),
+    ParagraphFeature(),
+    HeadingFeature(),
+    AlignFeature(),
+    IndentFeature(),
+    UnorderedListFeature(),
+    OrderedListFeature(),
+    BlockquoteFeature(),
+    InlineToolbarFeature(),
+    FixedToolbarFeature(),
+    LinkFeature({
+      enabledCollections: ['pages'],
+      fields: ({ defaultFields }) => {
+        const defaultFieldsWithoutUrl = defaultFields.filter((field) => {
+          if ('name' in field && field.name === 'url') return false
+          return true
+        })
+
+        return [
+          ...defaultFieldsWithoutUrl,
+          {
+            name: 'url',
+            type: 'text',
+            required: true,
+            label: ({ t }) => t('fields:enterURL'),
+            admin: { condition: (_data, sd) => Boolean(sd?.linkType !== 'internal') },
+            validate: ((value, options) => {
+              if ((options?.siblingData as LinkFields)?.linkType === 'internal') return true
+              return value ? true : 'URL is required'
+            }) as TextFieldSingleValidation,
+          },
+        ]
+      },
+    }),
+  ],
+})

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

@@ -0,0 +1,41 @@
+import type { Block } from 'payload'
+import { ForField } from '@/fields/for'
+import { SimpleTextLabelPath } from '@/ui'
+import { TagTypeField } from '@/fields/tagType'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { ClassNameField } from '@/fields/className'
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { ContentActionsTab } from '@/fields/tabs/block/children/actions'
+import { ChildsSettingsTab } from '@/fields/tabs/block/children/settings'
+
+const ds = {
+  text: 'The text content to display. Use {{data attribute name}} to display the data attributes value.',
+  className: 'Add atomic classes or shortcuts to the simple text element here.',
+}
+
+export const SimpleText: Block = {
+  slug: 'SimpleTextChild',
+  interfaceName: 'SimpleTextChild',
+  labels: { singular: '"Simple" Text', plural: '"Simple" Texts' },
+  admin: { components: { Label: { path: SimpleTextLabelPath } } },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            TagTypeField({ childBlock: 'SimpleTextChild', width: '25%' }),
+            ClassNameField({ admin: { description: ds.className, condition: (_, sd) => Boolean(sd?.tagType !== 'fragment') } }),
+            ForField({ admin: { condition: (_, sd) => Boolean(sd?.tagType === 'label') } }),
+            { name: `text`, type: 'textarea', required: true, admin: { description: ds.text } },
+          ],
+        },
+        { label: 'Actions', fields: [ContentActionsTab] },
+        ChildsSettingsTab('SimpleTextChild'),
+        TrackingTab,
+      ],
+    },
+    ColoredEnd,
+  ],
+}

package/template/src/blocks/children/simpleText/component.client.tsx

@@ -0,0 +1,18 @@
+'use client'
+import { useActionContext, useDaToText, useToDa } from '@/hooks/frontEnd/useActions'
+import type { SimpleTextChild as SimpleTextChildType, RenderChild } from '@/ts/types'
+
+export const SimpleTextChildClient: React.FC<RenderChild<SimpleTextChildType>> = (props) => {
+  const { block, pt } = props
+
+  const context = useActionContext()
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+  const stt = useDaToText({ text: block.text, sda: cda, ssrda: pt?.c?.da })
+
+  if (block.tagType === 'fragment') return <>{stt}</>
+  return (
+    <block.tagType {...pt?.c?.p} {...pt?.c?.da} {...cda}>
+      {stt}
+    </block.tagType>
+  )
+}

package/template/src/blocks/children/simpleText/component.tsx

@@ -0,0 +1,11 @@
+'use server'
+import type { SimpleTextChild as SimpleTextChildType, RenderChild } from '@/ts/types'
+
+export const SimpleTextChild: React.FC<RenderChild<SimpleTextChildType>> = async ({ block, pt }) => {
+  if (block.tagType === 'fragment') return <>{block.text}</>
+  return (
+    <block.tagType {...pt?.c?.p} {...pt?.c?.da}>
+      {block.text}
+    </block.tagType>
+  )
+}

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

@@ -0,0 +1,39 @@
+import type { Block } from 'payload'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { ClassNameField } from '@/fields/className'
+import { ChildsSettingsTab } from '@/fields/tabs/block/children/settings'
+
+const d = {
+  svgAtomicClasses: 'Add atomic classes or shortcuts to the svg element here.',
+  ariaHidden: 'If true, the element will be hidden from screen readers.',
+  viewbox: 'SVG viewbox attribute. Example: "0 0 24 24".',
+  fill: 'SVG fill attribute. Example: "currentColor" or "#000000".',
+  contents: 'SVG content/path data.',
+}
+
+export const SVGBlock: Block = {
+  slug: 'SVGChild',
+  interfaceName: 'SVGChild',
+  labels: { singular: 'SVG', plural: 'SVGs' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            ClassNameField({ label: 'SVG Atomic Classes', admin: { description: d.svgAtomicClasses } }),
+            { name: 'ariaHidden', type: 'checkbox', admin: { description: d.ariaHidden } },
+            { name: 'viewBox', type: 'text', required: true, admin: { description: d.viewbox } },
+            { name: 'fill', type: 'text', admin: { description: d.fill } },
+            { name: 'contents', type: 'textarea', required: true, admin: { description: d.contents } },
+          ],
+        },
+        ChildsSettingsTab('SVGChild'),
+        TrackingTab,
+      ],
+    },
+    ColoredEnd,
+  ],
+}

package/template/src/blocks/children/svg/component.tsx

@@ -0,0 +1,6 @@
+import { RenderChild } from '@/ts/types'
+import type { SVGChild as SVGChildType } from '@/ts/types'
+
+export const SVGChild: React.FC<RenderChild<SVGChildType>> = ({ pt }) => {
+  return <svg {...pt?.c?.p} {...pt?.c?.da} />
+}

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

@@ -0,0 +1,70 @@
+import type { Block } from 'payload'
+import { TagTypeField } from '@/fields/tagType'
+import { ColoredEnd } from '@/fields/coloredEnd'
+import { ClassNameField } from '@/fields/className'
+import { TrackingTab } from '@/fields/tabs/block/children/tracking'
+import { ChildsSettingsTab } from '@/fields/tabs/block/children/settings'
+
+const d = {
+  video: 'Select the video to be displayed.',
+  quality: 'Default is 1. The quality of the video.',
+  blur: 'Default is 20. The blur amount of the video.',
+  loop: 'Default is false. If true, the video will loop.',
+  muted: 'Default is false. If true, the video will be muted.',
+  preload: 'Default is metadata. Controls when the video starts loading.',
+  time: 'Default is 0. The time in the video, the blur image will be generated from.',
+  disableBlur: 'Default is false. If true, the video will not use the blur data URL.',
+  autoplay: 'Default is false. If true, the video will autoplay, which also forces muted to be true.',
+  className: 'It is recommended to use this inside a tag component that controls sizing, use the default value.',
+}
+
+export const Video: Block = {
+  slug: 'VideoChild',
+  interfaceName: 'VideoChild',
+  labels: { singular: 'Video', plural: 'Videos' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Video',
+          fields: [
+            ClassNameField({
+              admin: { description: d.className },
+              label: 'Video Atomic Classes',
+              defaultValue: 'relative flex max-w-full aspect-video overflow-hidden',
+            }),
+            {
+              type: 'row',
+              fields: [
+                TagTypeField({ childBlock: 'VideoChild', width: '25%' }),
+                { name: 'video', label: 'Mux Video', type: 'relationship', relationTo: 'mux-video', required: true, admin: { width: '25%' } },
+              ],
+            },
+            {
+              type: 'row',
+              fields: [
+                { name: 'preload', type: 'select', options: ['none', 'metadata', 'auto'], admin: { width: '20%', description: d.preload } },
+                { name: 'autoplay', type: 'checkbox', admin: { width: '20%', description: d.autoplay } },
+                { name: 'loop', type: 'checkbox', admin: { width: '20%', description: d.loop } },
+                { name: 'muted', type: 'checkbox', admin: { width: '20%', description: d.muted } },
+              ],
+            },
+            {
+              type: 'row',
+              fields: [
+                { name: 'disableBlur', type: 'checkbox', admin: { width: '25%', description: d.disableBlur } },
+                { name: 'time', type: 'number', admin: { width: '25%', description: d.time } },
+                { name: 'blur', type: 'number', min: 0, max: 100, admin: { width: '25%', description: d.blur } },
+                { name: 'quality', type: 'number', min: 0.25, max: 10, admin: { width: '25%', description: d.quality } },
+              ],
+            },
+          ],
+        },
+        ChildsSettingsTab('VideoChild'),
+        TrackingTab,
+      ],
+    },
+    ColoredEnd,
+  ],
+}

package/template/src/blocks/children/video/component.tsx

@@ -0,0 +1,11 @@
+'use client'
+import React from 'react'
+import dynamic from 'next/dynamic'
+import { RenderChild } from '@/ts/types'
+import type { VideoChild as VideoChildType } from '@/ts/types'
+
+const MuxVideoReact = dynamic(() => import('@mux/mux-video-react'))
+
+export const VideoChild: React.FC<RenderChild<VideoChildType>> = ({ pt }) => {
+  return <MuxVideoReact {...pt?.c?.p} {...pt?.c?.da} />
+}

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

@@ -0,0 +1,54 @@
+import { z } from '@/ts/zap'
+import ChildrenBlocks from './blocks'
+
+// Helper function to check if a block has actions with the specified prefix
+function hasActions(block: any, prefix: 'trigger' | 'content'): boolean {
+  if (!block.fields) return false
+
+  const actionFieldName = `${prefix}Actions`
+
+  // Check if any field has the action field name or if it's in a tab with that action field
+  return block.fields.some((field: any) => {
+    if (field.name === actionFieldName) return true
+    if (field.type === 'tabs' && field.tabs) {
+      return field.tabs.some((tab: any) => tab.fields?.some((tabField: any) => tabField.name === actionFieldName))
+    }
+    return false
+  })
+}
+
+// All Child Blocks
+export const ChildBlockType = z.ap.add(z.enum(ChildrenBlocks.map((block) => block.slug)), { id: 'ChildBlockType' })
+
+// Non Recursive Child Blocks. So all except AtomicChild
+export const NonRecursiveChildBlockType = z.ap.add(
+  z.enum(ChildrenBlocks.filter((block) => block.slug !== 'AtomicChild').map((block) => block.slug)),
+  { id: 'NonRecursiveChildBlockType' },
+)
+
+// Portal Backdrop Blocks. Set manually.
+export const BackdropChildSlug = z.ap.add(z.enum(['SVGChild']), { id: 'BackdropChildSlug' })
+
+// Blocks that contain triggerActions - automatically determined from ChildrenBlocks
+export const TriggerActionsBlockType = z.ap.add(z.enum(ChildrenBlocks.filter((block) => hasActions(block, 'trigger')).map((block) => block.slug)), {
+  id: 'ChildrenWithTriggerActions',
+})
+
+// Blocks that contain contentActions - automatically determined from ChildrenBlocks
+export const ContentActionsBlockType = z.ap.add(z.enum(ChildrenBlocks.filter((block) => hasActions(block, 'content')).map((block) => block.slug)), {
+  id: 'ChildrenWithContentActions',
+})
+
+export const ChildrenWithActions = z.ap.add(z.enum([...TriggerActionsBlockType.options, ...ContentActionsBlockType.options]), {
+  id: 'ChildrenWithActions',
+})
+
+const ChildBlocks = [
+  ChildBlockType,
+  NonRecursiveChildBlockType,
+  BackdropChildSlug,
+  TriggerActionsBlockType,
+  ContentActionsBlockType,
+  ChildrenWithActions,
+]
+export default ChildBlocks

package/template/src/blocks/submitForm/form/rateLimiting/blocks.ts

@@ -0,0 +1,5 @@
+import { FrlSimpleSlidingWindow } from './simpleSlidingWindow/block'
+
+const frlBlocks = [FrlSimpleSlidingWindow]
+
+export default frlBlocks

package/template/src/blocks/submitForm/form/rateLimiting/functions.ts

@@ -0,0 +1 @@
+export * from './simpleSlidingWindow/serverFunction'

package/template/src/blocks/submitForm/form/rateLimiting/simpleSlidingWindow/block.ts

@@ -0,0 +1,23 @@
+import type { Block } from 'payload'
+import { APField } from '@/fields/apf'
+import { ValidationMessageField } from '@/fields/validationMessage'
+
+const d = {
+  atStart:
+    'If true, the rate limit trigger runs before validation. For normal forms its recommended to set this to false, as failed submissions due to validation errors will count towards the rate limit.',
+  rateLimit: 'The number of requests allowed per time period.',
+  rateLimitPeriod: 'The time period in minutes.',
+}
+
+export const FrlSimpleSlidingWindow: Block = {
+  slug: 'FrlSimpleSlidingWindow',
+  admin: { disableBlockName: true },
+  interfaceName: 'FrlSimpleSlidingWindow',
+  labels: { singular: 'Simple Sliding Window Rate Limit', plural: 'Simple Sliding Window Rate Limit' },
+  fields: [
+    APField({ type: 'checkbox', apf: ['form'], name: 'atStart', label: 'At Start', required: true, admin: { description: d.atStart } }),
+    APField({ type: 'number', apf: ['form'], name: 'rateLimit', required: true, admin: { description: d.rateLimit } }),
+    APField({ type: 'number', apf: ['form'], name: 'rateLimitPeriod', required: true, admin: { description: d.rateLimitPeriod } }),
+    ValidationMessageField,
+  ],
+}