@pro-laico/create-atomic-payload 0.1.4

package/template/src/ui/index.ts

@@ -0,0 +1,32 @@
+//Atomic Payload Fields (apf)
+export const APFieldPath = '@/ui/apf/field'
+export const APFieldLabelPath = '@/ui/apf/label'
+export const APFControlsPath = '@/ui/apf/controls'
+
+//Assets
+export const LogoPath = '@/ui/assets/Logo'
+export const IconPath = '@/ui/assets/Icon'
+
+//Blocks
+export const InputBlocksPath = '@/ui/blocks/inputBlock'
+export const ActionBlocksPath = '@/ui/blocks/actionBlock'
+
+//Decorative
+export const ColoredEndPath = '@/ui/decorative/coloredEnd'
+
+//Fields
+export const SlugPath = '@/ui/fields/slug'
+export const IconSelectPath = '@/ui/fields/iconSelect'
+
+//Root
+export const BeforeDashboard = '@/ui/root/beforeDashboard'
+export const SiteTriggersPath = '@/ui/root/siteTriggers'
+
+//Row Labels
+export const AtomicPath = '@/ui/rowLabels/atomic'
+export const IconLabelPath = '@/ui/rowLabels/icon'
+export const ColorLabelPath = '@/ui/rowLabels/color'
+export const ShortcutLabelPath = '@/ui/rowLabels/shortcut'
+export const AnimationLabelPath = '@/ui/rowLabels/animation'
+export const SimpleTextLabelPath = '@/ui/rowLabels/simpleText'
+export const DesignTokenLabelPath = '@/ui/rowLabels/designToken'

package/template/src/ui/root/beforeDashboard/index.scss

@@ -0,0 +1,22 @@
+.dashboard .before-dashboard {
+  margin-bottom: base(1.5);
+
+  &__banner {
+    & h4 {
+      margin: 0;
+    }
+  }
+
+  &__instructions {
+    list-style: decimal;
+    margin-bottom: base(0.5);
+
+    & li {
+      width: 100%;
+    }
+  }
+
+  & a:hover {
+    opacity: 0.85;
+  }
+}

package/template/src/ui/root/beforeDashboard/index.tsx

@@ -0,0 +1,39 @@
+import { Banner } from '@payloadcms/ui/elements/Banner'
+import React from 'react'
+
+import { SeedButton } from './seedButton'
+import './index.scss'
+
+const baseClass = 'before-dashboard'
+
+const BeforeDashboard: React.FC = () => {
+  return (
+    <div className={baseClass}>
+      <Banner className={`${baseClass}__banner`} type="success">
+        <h4>Welcome to your dashboard!</h4>
+      </Banner>
+      Steps For Set Up:
+      <ul className={`${baseClass}__instructions`}>
+        <li>
+          {'If you want to add some initial data click: '}
+          <SeedButton />
+          {'. (Note this will delete existing collection data)'}
+        </li>
+        <li>
+          {'Check out the home page: '}
+          <a href="/" target="_blank">
+            Link
+          </a>
+        </li>
+        <li>
+          {'Return To ReadMe Setup Steps: '}
+          <a href="https://github.com/pro-laico/atomic-payload" target="_blank">
+            Link
+          </a>
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default BeforeDashboard

package/template/src/ui/root/beforeDashboard/seedButton/index.scss

@@ -0,0 +1,12 @@
+.seedButton {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.85;
+  }
+}

package/template/src/ui/root/beforeDashboard/seedButton/index.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { toast } from '@payloadcms/ui'
+
+import './index.scss'
+
+const SuccessMessage: React.FC = () => (
+  <div>
+    Database seeded! You can now{' '}
+    <a target="_blank" href="/">
+      visit your website
+    </a>
+  </div>
+)
+
+export const SeedButton: React.FC = () => {
+  const [loading, setLoading] = useState(false)
+  const [seeded, setSeeded] = useState(false)
+  const [error, setError] = useState<null | string>(null)
+
+  const handleClick = useCallback(
+    async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+
+      if (seeded) {
+        toast.info('Database already seeded.')
+        return
+      }
+      if (loading) {
+        toast.info('Seeding already in progress.')
+        return
+      }
+      if (error) {
+        toast.error(`An error occurred, please refresh and try again.`)
+        return
+      }
+
+      setLoading(true)
+
+      try {
+        toast.promise(
+          new Promise((resolve, reject) => {
+            try {
+              fetch('/next/seed', { method: 'POST', credentials: 'include' })
+                .then((res) => {
+                  if (res.ok) {
+                    resolve(true)
+                    setSeeded(true)
+                  } else reject('An error occurred while seeding.')
+                })
+                .catch((error) => reject(error))
+            } catch (error) {
+              reject(error)
+            }
+          }),
+          {
+            loading: 'Seeding with data....',
+            success: <SuccessMessage />,
+            error: 'An error occurred while seeding.',
+          },
+        )
+      } catch (err) {
+        const error = err instanceof Error ? err.message : String(err)
+        setError(error)
+      }
+    },
+    [loading, seeded, error],
+  )
+
+  let message = ''
+  if (loading) message = ' (seeding...)'
+  if (seeded) message = ' (done!)'
+  if (error) message = ` (error: ${error})`
+
+  return (
+    <Fragment>
+      <button className="seedButton" onClick={handleClick}>
+        SEED DATABASE
+      </button>
+      {message}
+    </Fragment>
+  )
+}

package/template/src/ui/root/siteTriggers/index.scss

@@ -0,0 +1,22 @@
+.full-width-button {
+  width: 100% !important;
+  justify-content: space-between !important;
+  text-align: left !important;
+}
+
+.full-width-button .btn__content {
+  width: 100% !important;
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+}
+
+.full-width-button .btn__label {
+  flex: 1 !important;
+  text-align: left !important;
+}
+
+.full-width-button .btn__icon {
+  margin-left: auto !important;
+  flex-shrink: 0 !important;
+}

package/template/src/ui/root/siteTriggers/index.tsx

@@ -0,0 +1,94 @@
+'use client'
+import './index.scss'
+import { useState } from 'react'
+import { UIFieldClientComponent } from 'payload'
+import { revalidateTag } from '@/utilities/revalidateTag'
+import { Button, toast, PopupList } from '@payloadcms/ui'
+import { triggerVercelDeployServerFunction } from './triggerVercelDeploy'
+
+const SiteTriggers: UIFieldClientComponent = () => {
+  const [isDeploying, setIsDeploying] = useState(false)
+  const [isRevalidating, setIsRevalidating] = useState(false)
+
+  const handleRevalidate = async (tag: 'draft' | 'published') => {
+    setIsRevalidating(true)
+
+    try {
+      const result = await revalidateTag(tag)
+      if (result?.success) toast.success(result.message)
+      else if (result) toast.error(result.message)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'An unexpected error occurred')
+    } finally {
+      setIsRevalidating(false)
+    }
+  }
+
+  const handleDeploy = async () => {
+    setIsDeploying(true)
+
+    try {
+      const result = await triggerVercelDeployServerFunction()
+      if (result.success) toast.success(result.message)
+      else toast.error(result.message)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'An unexpected error occurred')
+    } finally {
+      setIsDeploying(false)
+    }
+  }
+
+  return (
+    <>
+      <div style={{ marginLeft: '-10px', marginBottom: '10px' }}>
+        <Button
+          buttonStyle="none"
+          disabled={isRevalidating || isDeploying}
+          SubMenuPopupContent={({ close }) => (
+            <PopupList.ButtonGroup>
+              <PopupList.Button
+                onClick={() => {
+                  handleRevalidate('draft')
+                  close()
+                }}
+              >
+                Revalidate Drafts
+              </PopupList.Button>
+              <PopupList.Button
+                onClick={() => {
+                  handleRevalidate('published')
+                  close()
+                }}
+              >
+                Revalidate Published
+              </PopupList.Button>
+              <PopupList.Button
+                onClick={() => {
+                  handleDeploy()
+                  close()
+                }}
+              >
+                Trigger Deploy
+              </PopupList.Button>
+            </PopupList.ButtonGroup>
+          )}
+        >
+          {isRevalidating ? 'Revalidating...' : isDeploying ? 'Deploying...' : 'Site Actions'}
+        </Button>
+      </div>
+      <div
+        style={{
+          height: '1px',
+          marginLeft: '-20px',
+          width: 'calc(100% + 40px)',
+          backgroundColor: 'var(--theme-elevation-200)',
+          marginBottom: '15px',
+        }}
+      />
+    </>
+  )
+}
+
+SiteTriggers.displayName = 'SiteTriggers'
+
+export default SiteTriggers

package/template/src/ui/root/siteTriggers/triggerVercelDeploy.ts

@@ -0,0 +1,37 @@
+'use server'
+
+export async function triggerVercelDeployServerFunction(): Promise<{
+  success: boolean
+  message: string
+  timestamp: string
+}> {
+  try {
+    const webhookUrl = process.env.VERCEL_DEPLOY_WEBHOOK_URL
+
+    if (!webhookUrl) {
+      throw new Error('VERCEL_DEPLOY_WEBHOOK_URL environment variable is not configured')
+    }
+
+    const response = await fetch(webhookUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    })
+
+    if (!response.ok) {
+      throw new Error(`Webhook request failed with status: ${response.status}`)
+    }
+
+    return {
+      success: true,
+      message: 'Vercel deploy webhook triggered successfully',
+      timestamp: new Date().toISOString(),
+    }
+  } catch (error) {
+    console.error('Failed to trigger Vercel deploy:', error)
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to trigger Vercel deploy',
+      timestamp: new Date().toISOString(),
+    }
+  }
+}

package/template/src/ui/rowLabels/animation.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { useRowLabel, RowLabel, Pill, SectionTitle } from '@payloadcms/ui'
+
+const AnimationRowLabel = () => {
+  const { data, path, rowNumber } = useRowLabel<{ [key: string]: string }>()
+  const formattedRowNumber = String(rowNumber ?? 0).padStart(2, '0')
+
+  return (
+    <RowLabel
+      path={path}
+      rowNumber={rowNumber}
+      label={
+        <>
+          <span>{formattedRowNumber}</span>
+          <Pill pillStyle="white" size="small">
+            {data?.name}
+          </Pill>
+          <SectionTitle path={`${path}.name`} readOnly={true} />
+        </>
+      }
+    />
+  )
+}
+
+AnimationRowLabel.displayName = 'AnimationRowLabel'
+
+export default AnimationRowLabel

package/template/src/ui/rowLabels/atomic/index.scss

@@ -0,0 +1,62 @@
+.atomic-row-pill {
+    border-radius: 3px;
+    display:inline-flex;
+    font-weight:500;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 10px 0 10px;
+    text-transform: capitalize;
+    color: var(--theme-elevation-900);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+.nocap {
+    text-transform: none !important;
+}
+
+.pill-default {
+    background: var(--theme-elevation-0);
+}
+
+.pill-name {
+    background: var(--theme-base-0);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+
+.pill-tag {
+    background: color-mix(
+        in oklch,
+        var(--atomic-distinct-1),
+        black 25%
+    );
+}
+
+.pill-form {
+    background: color-mix(
+        in oklch,
+        var(--atomic-distinct-2),
+        black 8%
+    );
+}
+
+.pill-input {
+    background: color-mix(
+        in oklch,
+        var(--atomic-distinct-3),
+        black 8%
+    );
+}
+
+.pill-button {
+    background: color-mix(
+        in oklch,
+        var(--atomic-distinct-4),
+        black 16%
+    );
+}
+

package/template/src/ui/rowLabels/atomic/index.tsx

@@ -0,0 +1,96 @@
+'use client'
+import './index.scss'
+import React from 'react'
+import { AtomicChild } from '@/ts/types'
+import { AtomicIcon } from '@/ui/assets/atomicIcon'
+import { RowLabel, useRowLabel, SectionTitle } from '@payloadcms/ui'
+
+const AtomicRowLabel = () => {
+  const { data, path, rowNumber } = useRowLabel<AtomicChild>()
+  const { type, tagType, inputType, inputName, buttonType, backendForm, portalType, formName, linkType, portalName, externalLink, email, phone } =
+    data || {}
+
+  let typePill = type
+  const typePillStyle = 'atomic-row-pill pill-default'
+  let elaborationPill
+  let elaborationPillStyle = 'atomic-row-pill pill-default'
+  let namePill
+  const namePillStyle = 'atomic-row-pill pill-name nocap'
+  switch (type) {
+    case 'tag': {
+      typePill = type
+      elaborationPill = tagType
+      elaborationPillStyle = 'atomic-row-pill pill-tag'
+      break
+    }
+    case 'form': {
+      elaborationPill = backendForm
+      elaborationPillStyle = 'atomic-row-pill pill-form'
+      namePill = formName
+      break
+    }
+    case 'input': {
+      elaborationPill = inputType
+      elaborationPillStyle = 'atomic-row-pill pill-input'
+      namePill = inputName
+      break
+    }
+    case 'button': {
+      elaborationPillStyle = 'atomic-row-pill pill-button'
+      switch (buttonType) {
+        case 'regular': {
+          elaborationPill = 'Regular'
+          break
+        }
+        case 'link': {
+          elaborationPill = linkType
+          switch (linkType) {
+            case 'email': {
+              namePill = email
+              break
+            }
+            case 'externalLink': {
+              namePill = externalLink
+              break
+            }
+            case 'phone': {
+              namePill = phone
+              break
+            }
+          }
+          break
+        }
+        case 'portal': {
+          elaborationPill = portalType
+          namePill = portalName
+          break
+        }
+      }
+      break
+    }
+  }
+
+  const formattedRowNumber = String(rowNumber ?? 0).padStart(2, '0')
+
+  return (
+    <RowLabel
+      path={path}
+      rowNumber={rowNumber}
+      label={
+        <div style={{ display: 'flex', gap: '6px' }}>
+          <span>{formattedRowNumber}</span>
+          <AtomicIcon type={type || 'fragment'} />
+          <div style={{ display: 'flex', gap: '6px' }}>
+            {typePill && <div className={typePillStyle}>{typePill}</div>}
+            {elaborationPill && <div className={elaborationPillStyle}>{elaborationPill}</div>}
+            {namePill && <div className={namePillStyle}>{namePill}</div>}
+          </div>
+          <SectionTitle path={`${path}.blockName`} readOnly={false} />
+        </div>
+      }
+    />
+  )
+}
+
+AtomicRowLabel.displayName = 'AtomicRowLabel'
+export default AtomicRowLabel

package/template/src/ui/rowLabels/color.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { useRowLabel, RowLabel, Pill } from '@payloadcms/ui'
+import { toTitleCase } from '@/utilities/format/toTitleCase'
+
+const ColorRowLabel = () => {
+  const { data, path, rowNumber } = useRowLabel<{ [key: string]: string }>()
+  const { name, light, dark } = data
+
+  const formattedRowNumber = String(rowNumber ?? 0).padStart(2, '0')
+
+  return (
+    <RowLabel
+      path={path}
+      rowNumber={rowNumber}
+      label={
+        <>
+          <span>{formattedRowNumber}</span>
+          {light && <div style={{ width: '40px', height: '20px', backgroundColor: light, display: 'inline-block', flexShrink: 0 }} />}
+          {dark && <div style={{ width: '40px', height: '20px', backgroundColor: dark, display: 'inline-block', flexShrink: 0 }} />}
+          {name && (
+            <Pill pillStyle="white" size="small">
+              {toTitleCase(name)}
+            </Pill>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+ColorRowLabel.displayName = 'ColorRowLabel'
+
+export default ColorRowLabel

package/template/src/ui/rowLabels/designToken.tsx

@@ -0,0 +1,30 @@
+'use client'
+import { useRowLabel, Pill, SectionTitle } from '@payloadcms/ui'
+
+interface DesignTokenData {
+  name: string
+  value: string | string[]
+}
+
+const DesignTokenRowLabel = () => {
+  const { data, path } = useRowLabel<DesignTokenData>()
+  const { name, value } = data || {}
+
+  return (
+    <>
+      <Pill pillStyle="white" size="small">
+        {name || 'Add Name'}
+      </Pill>
+      {typeof value === 'string' && <SectionTitle path={`${path}.value`} readOnly={false} />}
+      {Array.isArray(value) && (
+        <Pill pillStyle="white" size="small">
+          Values: {value?.length}
+        </Pill>
+      )}
+    </>
+  )
+}
+
+DesignTokenRowLabel.displayName = 'DesignTokenRowLabel'
+
+export default DesignTokenRowLabel

package/template/src/ui/rowLabels/icon.tsx

@@ -0,0 +1,32 @@
+'use client'
+import { Icon } from '@/ts/types'
+import { Pill, RowLabel, useRowLabel } from '@payloadcms/ui'
+import { toTitleCase } from '@/utilities/format/toTitleCase'
+
+interface IconData {
+  name: string
+  icon: string | Icon
+}
+
+const IconRowLabel = () => {
+  const { data, path, rowNumber } = useRowLabel<IconData>()
+
+  return (
+    <RowLabel
+      path={path}
+      rowNumber={rowNumber}
+      label={
+        <>
+          <span>{rowNumber}</span>
+          <Pill pillStyle="white" size="small">
+            {toTitleCase(data?.name) || 'Add Name'}
+          </Pill>
+        </>
+      }
+    />
+  )
+}
+
+IconRowLabel.displayName = 'IconRowLabel'
+
+export default IconRowLabel

package/template/src/ui/rowLabels/shortcut/index.scss

@@ -0,0 +1,21 @@
+.shortcut-pill {
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+/* cycle through five rich dark colors for white text contrast */
+.color-cycle:nth-child(5n) {
+  background: rgb(22, 101, 52); /* Deep green */
+}
+.color-cycle:nth-child(5n + 1) {
+  background: rgb(30, 64, 175); /* Deep blue */
+}
+.color-cycle:nth-child(5n + 2) {
+  background: rgb(22, 101, 52); /* Deep green */
+}
+.color-cycle:nth-child(5n + 3) {
+  background: rgb(88, 28, 135); /* Deep purple */
+}
+.color-cycle:nth-child(5n + 4) {
+  background: rgb(153, 27, 27); /* Deep red */
+}

package/template/src/ui/rowLabels/shortcut/index.tsx

@@ -0,0 +1,30 @@
+'use client'
+import './index.scss'
+import { useMemo } from 'react'
+import { ShortcutSet } from '@/ts/types'
+import { Pill, RowLabel, useRowLabel } from '@payloadcms/ui'
+
+const ShortcutRowLabel = () => {
+  const { data, path, rowNumber } = useRowLabel<ShortcutSet['shortcuts'][number]>()
+  const { name } = data
+
+  const namePills = useMemo(() => {
+    if (!name) return null
+    const namePieces = name.split('-')
+
+    return namePieces.map((piece, index) => {
+      return (
+        <Pill className="shortcut-pill color-cycle" key={index} pillStyle="white" size="small">
+          {piece}
+        </Pill>
+      )
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [name, rowNumber])
+
+  return <RowLabel path={path} rowNumber={rowNumber} label={namePills} />
+}
+
+ShortcutRowLabel.displayName = 'ShortcutRowLabel'
+
+export default ShortcutRowLabel