@pro-laico/create-atomic-payload 0.1.4

package/template/src/collections/designSets/collection.ts

@@ -0,0 +1,44 @@
+import { APFControlsPath } from '@/ui'
+import { FontsTab } from './tabs/fonts'
+import { SizesTab } from './tabs/sizes'
+import { ProseTab } from './tabs/prose'
+import { ColorsTab } from './tabs/colors'
+import { StorageTab } from './tabs/storage'
+import { SettingsTab } from './tabs/settings'
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+import { VariablesTab } from './tabs/variables'
+import { type APFunction } from '@/ts/types/apf'
+import { AnimationsTab } from './tabs/animation'
+import { MiscellaneousTab } from './tabs/miscellaneous'
+import { generateAPFFields } from '@/fields/apf/storage'
+import { atomicHook } from '@/hooks/collection/atomicHook/atomicHook'
+import { revalidateCacheOnDelete } from '@/hooks/collection/revalidate'
+import { generateLivePreviewPath } from '@/utilities/generatePreviewPath'
+
+const APFunctions: APFunction[] = ['classes', 'active']
+
+const DesignSet: CollectionConfig = {
+  slug: 'designSet',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  admin: {
+    group: 'Sets',
+    useAsTitle: 'title',
+    enableListViewSelectAPI: true,
+    defaultColumns: ['title', 'active', '_status'],
+    preview: (data, { req }) => generateLivePreviewPath({ data, req }),
+    livePreview: { url: ({ data, req }) => generateLivePreviewPath({ data, req }) },
+    components: { edit: { beforeDocumentControls: [{ path: APFControlsPath, clientProps: { APFunctions } }] } },
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [SettingsTab(), VariablesTab(), ColorsTab(), SizesTab(), FontsTab(), AnimationsTab(), MiscellaneousTab(), ProseTab, StorageTab()],
+    },
+    ...generateAPFFields(APFunctions),
+  ],
+  hooks: { beforeChange: [atomicHook], afterDelete: [revalidateCacheOnDelete] },
+  versions: { drafts: { schedulePublish: true, validate: true }, maxPerDoc: 50 },
+}
+
+export default DesignSet

package/template/src/collections/designSets/defaults.ts

@@ -0,0 +1,20 @@
+//Any classes manually added in the project files should be added here.
+export const defaultAtomicClasses = [
+  'sr-only',
+  'object-cover',
+  'group',
+  'isolate',
+  'w-full',
+  'h-full',
+  'container',
+  'py-28',
+  'max-w-none',
+  'mb-4',
+  'inline-block',
+  'px-4',
+  'py-2',
+  'rounded',
+  'bg-gray-200',
+]
+
+export const defaultAria = [{ value: 'invalid' }]

package/template/src/collections/designSets/tabs/animation.ts

@@ -0,0 +1,71 @@
+import { z } from '@/ts/zap'
+import { type Tab } from 'payload'
+import { APField } from '@/fields/apf'
+import { AnimationLabelPath } from '@/ui'
+import { onArraySetAPFShallow } from '@/hooks/field/apf'
+import { TokenValueArrayField, TokenValuesArrayField } from '@/fields/designSets/value'
+
+export const unoThemeAnimation = z.ap.add(
+  z.object({
+    category: z.ap.get('RSS').optional(),
+    keyframes: z.ap.get('RSS').optional(),
+    durations: z.ap.get('RSS').optional(),
+    timingFns: z.ap.get('RSS').optional(),
+    properties: z.ap.get('RSRSS').optional(),
+    counts: z.record(z.string(), z.union([z.string(), z.number()])).optional(),
+  }),
+  { id: 'UnoThemeAnimation' },
+)
+
+const ds = {
+  ease: 'The ease of the animation.',
+  duration: 'The length of the animation in seconds.',
+  keyframes: 'The @keyframes information for the animation.',
+  timingFns: 'Interpolation functions like linear/ease-in-out.',
+  counts: 'The times the animation should play, either infinite or a number.',
+  properties: 'Special properties like transform-origin and backface-visibility.',
+  name: 'The name of the animation used in class names fields. Capitals will be lowercased. Spaces will be replaced with hyphens (-). So type freely.',
+}
+
+export const AnimationsTab = () => {
+  const storageField: Tab = {
+    label: 'Animations',
+    admin: { description: 'Add custom animations here. They can be called in other atomic classes.' },
+    fields: [
+      {
+        type: 'collapsible',
+        label: 'Animations',
+        admin: { initCollapsed: true },
+        fields: [
+          {
+            name: 'animation',
+            type: 'array',
+            admin: { components: { RowLabel: { path: AnimationLabelPath } } },
+            fields: [
+              APField({
+                type: 'textarea',
+                apf: ['classes'],
+                name: 'name',
+                label: 'Animations Atomic Class Name',
+                required: true,
+                kebab: true,
+                admin: { description: ds.name },
+              }),
+              APField({ type: 'text', apf: ['classes'], name: 'keyframes', required: true, admin: { description: ds.keyframes } }),
+              APField({ type: 'text', apf: ['classes'], name: 'duration', admin: { description: ds.duration } }),
+              APField({ type: 'text', apf: ['classes'], name: 'timingFns', admin: { description: ds.timingFns } }),
+              APField({ type: 'text', apf: ['classes'], name: 'properties', admin: { description: ds.properties } }),
+              APField({ type: 'text', apf: ['classes'], name: 'counts', admin: { description: ds.counts } }),
+              APField({ type: 'text', apf: ['classes'], name: 'ease', admin: { description: ds.ease } }),
+            ],
+            hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+          },
+        ],
+      },
+      TokenValueArrayField('ease'),
+      TokenValuesArrayField('property'),
+    ],
+  }
+
+  return storageField
+}

package/template/src/collections/designSets/tabs/colors.ts

@@ -0,0 +1,31 @@
+// TODO: Make Color Picker Component
+import { z } from '@/ts/zap'
+import { type Tab } from 'payload'
+import { ColorLabelPath } from '@/ui'
+import { APField } from '@/fields/apf'
+import { onArraySetAPFShallow } from '@/hooks/field/apf'
+
+export const UnoColors = z.ap.add(z.record(z.string(), z.string().or(z.record(z.string(), z.string()))), { id: 'UnoColors' })
+export const designSetColors = z.ap.add(z.array(z.object({ name: z.string(), light: z.string(), dark: z.string() })), { id: 'DesignSetColors' })
+
+export const ColorsTab = () => {
+  const colorsField: Tab = {
+    label: 'Colors',
+    fields: [
+      {
+        type: 'array',
+        name: 'colors',
+        typescriptSchema: [() => ({ $ref: `#/definitions/DesignSetColors` })],
+        admin: { initCollapsed: true, components: { RowLabel: { path: ColorLabelPath } } },
+        fields: [
+          APField({ type: 'text', apf: ['classes'], name: 'name', required: true, kebab: true }),
+          APField({ type: 'text', apf: ['classes'], name: 'light', required: true }),
+          APField({ type: 'text', apf: ['classes'], name: 'dark', required: true }),
+        ],
+        hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+      },
+    ],
+  }
+
+  return colorsField
+}

package/template/src/collections/designSets/tabs/fonts.ts

@@ -0,0 +1,53 @@
+import { type Tab } from 'payload'
+import { APField } from '@/fields/apf'
+import { DesignTokenLabelPath } from '@/ui'
+import { onArraySetAPFShallow } from '@/hooks/field/apf'
+import { TokenValueArrayField } from '@/fields/designSets/value'
+
+export const FontsTab = () => {
+  const fontsField: Tab = {
+    label: 'Fonts',
+    admin: { description: 'These are the fonts that are applied to the entire website.' },
+    fields: [
+      {
+        name: 'font',
+        type: 'group',
+        admin: { hideGutter: true },
+        fields: [
+          {
+            type: 'row',
+            fields: [
+              { name: 'sans', type: 'upload', relationTo: 'font' },
+              { name: 'serif', type: 'upload', relationTo: 'font' },
+            ],
+          },
+          {
+            type: 'row',
+            fields: [
+              { name: 'mono', type: 'upload', relationTo: 'font' },
+              { name: 'display', type: 'upload', relationTo: 'font' },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'array',
+        name: 'text',
+        label: 'Text',
+        admin: { components: { RowLabel: { path: DesignTokenLabelPath } } },
+        fields: [
+          APField({ type: 'text', apf: ['classes'], name: 'name', required: true, kebab: true }),
+          APField({ type: 'text', apf: ['classes'], name: 'fontSize', required: true }),
+          APField({ type: 'text', apf: ['classes'], name: 'lineHeight', required: true }),
+        ],
+        hooks: { beforeValidate: [onArraySetAPFShallow(['classes'])] },
+      },
+      TokenValueArrayField('fontWeight'),
+      TokenValueArrayField('tracking'),
+      TokenValueArrayField('leading'),
+      TokenValueArrayField('textStrokeWidth'),
+    ],
+  }
+
+  return fontsField
+}

package/template/src/collections/designSets/tabs/miscellaneous.ts

@@ -0,0 +1,22 @@
+import { type Tab } from 'payload'
+import { defaultAria } from '@/collections/designSets/defaults'
+import { TokenValueArrayField, TokenValuesArrayField, ValuesField } from '@/fields/designSets/value'
+
+export const MiscellaneousTab = () => {
+  const colorsField: Tab = {
+    label: 'Misc',
+    fields: [
+      ValuesField({ name: 'aria', defaultValue: defaultAria }),
+      TokenValueArrayField('blur'),
+      TokenValueArrayField('media'),
+      TokenValueArrayField('supports'),
+      TokenValueArrayField('perspective'),
+      TokenValuesArrayField('shadow'),
+      TokenValuesArrayField('insetShadow'),
+      TokenValuesArrayField('dropShadow'),
+      TokenValuesArrayField('textShadow'),
+    ],
+  }
+
+  return colorsField
+}

package/template/src/collections/designSets/tabs/prose.ts

@@ -0,0 +1,151 @@
+import { APField } from '@/fields/apf'
+import { ArrayField, TextField, SelectField, TabAsField, GroupField } from 'payload'
+
+export const typographySupportedTags = [
+  'headings',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'th',
+  'p',
+  'a',
+  'blockquote',
+  'figure',
+  'figcaption',
+  'strong',
+  'em',
+  'kbd',
+  'code',
+  'pre',
+  'ol',
+  'ul',
+  'li',
+  'table',
+  'thead',
+  'tr',
+  'td',
+  'img',
+  'video',
+  'hr',
+]
+
+const tagField: SelectField = APField({
+  type: 'select',
+  name: 'tag',
+  required: true,
+  apf: ['classes'],
+  admin: { width: '50%', style: { maxWidth: '500px' }, description: 'Select the tag the nested styles will apply to.' },
+  options: typographySupportedTags,
+  interfaceName: 'TypographySupportedTags',
+})
+
+const psuedoClassField: TextField = APField({
+  name: 'psuedoClass',
+  type: 'text',
+  required: false,
+  admin: {
+    width: '50%',
+    style: { maxWidth: '500px' },
+    description: 'Optionally add a psuedo-class (e.g., :hover, :focus, etc.) to target specific states.',
+  },
+  apf: ['classes'],
+})
+
+const typeographyField = (name: string, description: string): ArrayField => {
+  return {
+    name,
+    type: 'array',
+    admin: { description },
+    interfaceName: 'TypographyStyles',
+    fields: [
+      tagField,
+      psuedoClassField,
+      {
+        type: 'row',
+        fields: [
+          {
+            type: 'array',
+            name: 'values',
+            fields: [
+              APField({ type: 'text', name: 'cssSelector', required: true, apf: ['classes'] }),
+              APField({ type: 'text', name: 'value', required: true, apf: ['classes'] }),
+            ],
+          },
+        ],
+      },
+    ],
+  }
+}
+
+const colorField = (name: string, light: string, dark: string): GroupField => {
+  return {
+    name,
+    type: 'group',
+    interfaceName: 'ProseColorField',
+    fields: [
+      {
+        type: 'row',
+        fields: [
+          APField({ name: 'light', required: true, type: 'text', defaultValue: light, admin: { width: '50%' }, apf: ['classes'] }),
+          APField({ name: 'dark', required: true, type: 'text', defaultValue: dark, admin: { width: '50%' }, apf: ['classes'] }),
+        ],
+      },
+    ],
+  }
+}
+
+export const ProseTab: TabAsField = {
+  type: 'tab',
+  label: 'Prose',
+  admin: {
+    description: 'Configure typography styles and colors for prose content. Utilizes UnoCSS Typography Preset: https://unocss.dev/presets/typography',
+  },
+  fields: [
+    {
+      label: 'Colors',
+      type: 'collapsible',
+      fields: [
+        {
+          type: 'group',
+          label: false,
+          name: 'proseColors',
+          required: true,
+          interfaceName: 'ProseColors',
+          fields: [
+            colorField('body', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('headings', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('lead', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('links', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('bold', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('counters', 'oklch(0.145 0 0)', 'oklch(87.62% 0.240 148.61)'),
+            colorField('bullets', 'oklch(0.145 0 0)', 'oklch(87.62% 0.240 148.61)'),
+            colorField('hr', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('quotes', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('quote-borders', 'oklch(0.145 0 0)', 'oklch(87.62% 0.240 148.61)'),
+            colorField('captions', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('kbd', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('kbd-shadows', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('code', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('pre-code', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('pre-bg', 'oklch(0.145 0 0)', 'oklch(1 0 0 / 10%)'),
+            colorField('th-borders', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+            colorField('td-borders', 'oklch(0.145 0 0)', 'oklch(0.985 0 0)'),
+          ],
+        },
+      ],
+    },
+    {
+      type: 'group',
+      name: 'proseStyles',
+      fields: [
+        typeographyField('default', 'The default typography styles applied with "prose".'),
+        typeographyField('sm', 'This size applies to small screens and above with "prose prose-sm".'),
+        typeographyField('base', 'This size applies to base screens and above with "prose prose-base".'),
+        typeographyField('lg', 'This size applies to large screens and above with "prose prose-lg".'),
+      ],
+    },
+  ],
+}

package/template/src/collections/designSets/tabs/settings.ts

@@ -0,0 +1,52 @@
+import { type Tab } from 'payload'
+import { APField } from '@/fields/apf'
+import { ActiveField } from '@/fields/active'
+import { TestPathField } from '@/fields/testPath'
+import { ClassNameField } from '@/fields/className'
+import { UniqueTitleField } from '@/fields/uniqueTitle'
+
+const d = {
+  htmlClassName:
+    'These are the atomic classes and shortcuts that are applied to the html element. Note that changing will unset the live previews selected theme(dark/light), ctrl + r will fix that.',
+  bodyClassName: 'These are the atomic classes and shortcuts that are applied to the body element. Typically used for a background color.',
+  wrapperClassName:
+    'The wrapper goes around header, main, and footer. It supplies styles to the entire site. But is required for dialogs and popovers to work. Isolate will automatically be added to the beginning of the class name if not included.',
+}
+
+export const SettingsTab = () => {
+  const settingsField: Tab = {
+    label: 'Settings',
+    fields: [
+      { type: 'row', fields: [ActiveField(), UniqueTitleField('New Design Set'), TestPathField] },
+      {
+        type: 'row',
+        fields: [
+          APField({
+            type: 'checkbox',
+            apf: ['classes'],
+            name: 'minify',
+            label: 'Minify CSS',
+            required: true,
+            defaultValue: true,
+            admin: { style: { maxWidth: '100px', alignSelf: 'center' } },
+          }),
+          //TODO: Add enableSystem checkbox for next themes
+          APField({
+            name: 'defaultTheme',
+            type: 'select',
+            apf: ['classes'],
+            required: true,
+            defaultValue: 'light',
+            options: ['light', 'dark'],
+            admin: { style: { maxWidth: '300px' } },
+          }),
+        ],
+      },
+      ClassNameField({ namePrefix: 'html', label: 'HTML Class Name', admin: { description: d.htmlClassName } }),
+      ClassNameField({ namePrefix: 'body', label: 'Body Class Name', admin: { description: d.bodyClassName } }),
+      ClassNameField({ namePrefix: 'wrapper', label: 'Wrapper Class Name', admin: { description: d.wrapperClassName } }),
+    ],
+  }
+
+  return settingsField
+}

package/template/src/collections/designSets/tabs/sizes.ts

@@ -0,0 +1,30 @@
+import { type Tab } from 'payload'
+import { TokenValueArrayField } from '../../../fields/designSets/value'
+
+export const SizesTab = () => {
+  const sizesField: Tab = {
+    label: 'Sizes',
+    fields: [
+      TokenValueArrayField('container'),
+      TokenValueArrayField('breakpoint', {
+        description: 'The breakpoint values to apply to the breakpoint css variable.',
+        defaultValue: [
+          { name: '3xl', value: '100rem' },
+          { name: '4xl', value: '125rem' },
+        ],
+      }),
+      TokenValueArrayField('spacing'),
+      TokenValueArrayField('radius', {
+        description: 'The radius values to apply to the radius css variable.',
+        defaultValue: [
+          { name: 'sm', value: 'calc(var(--radius) - 4px)' },
+          { name: 'md', value: 'calc(var(--radius) - 2px)' },
+          { name: 'lg', value: 'var(--radius)' },
+          { name: 'xl', value: 'calc(var(--radius) + 4px)' },
+        ],
+      }),
+    ],
+  }
+
+  return sizesField
+}

package/template/src/collections/designSets/tabs/storage.ts

@@ -0,0 +1,51 @@
+import { z } from '@/ts/zap'
+import { type Tab } from 'payload'
+import { unoThemeAnimation } from './animation'
+
+export const tokenStorage = z.ap.add(
+  z.object({
+    font: z.ap.get('RSS'),
+    aria: z.ap.get('RSS'),
+    perspective: z.ap.get('RSS'),
+    blur: z.ap.get('RSS'),
+    media: z.ap.get('RSS'),
+    supports: z.ap.get('RSS'),
+    ease: z.ap.get('RSS'),
+    property: z.ap.get('RSS'),
+    container: z.ap.get('RSS'),
+    breakpoint: z.ap.get('RSS'),
+    spacing: z.ap.get('RSS'),
+    radius: z.ap.get('RSS'),
+    fontWeight: z.ap.get('RSS'),
+    tracking: z.ap.get('RSS'),
+    leading: z.ap.get('RSS'),
+    textStrokeWidth: z.ap.get('RSS'),
+    variables: z.ap.get('RSS'),
+    shadow: z.ap.get('RSSOSA'),
+    insetShadow: z.ap.get('RSSOSA'),
+    dropShadow: z.ap.get('RSSOSA'),
+    textShadow: z.ap.get('RSSOSA'),
+    colors: z.ap.get('UnoColors'),
+    animation: z.ap.get('UnoThemeAnimation', unoThemeAnimation),
+  }),
+  { id: 'TokenStorage' },
+)
+
+export const ColorRecordSchema = z.ap.add(z.record(z.string(), z.tuple([z.string(), z.string()])), { id: 'ProseColorStorage' })
+
+export const StorageTab = () => {
+  const storageField: Tab = {
+    label: 'Storage',
+    fields: [
+      { name: 'preflightStorage', type: 'code', admin: { language: 'css', readOnly: true } },
+      { name: 'tokenStorage', type: 'json', admin: { readOnly: true }, typescriptSchema: [() => ({ $ref: `#/definitions/TokenStorage` })] },
+      { name: 'proseDefaultStorage', type: 'json', admin: { readOnly: true }, typescriptSchema: [() => ({ $ref: `#/definitions/RSRSS` })] },
+      { name: 'prosesmStorage', type: 'json', admin: { readOnly: true }, typescriptSchema: [() => ({ $ref: `#/definitions/RSRSS` })] },
+      { name: 'proseBaseStorage', type: 'json', admin: { readOnly: true }, typescriptSchema: [() => ({ $ref: `#/definitions/RSRSS` })] },
+      { name: 'proselgStorage', type: 'json', admin: { readOnly: true }, typescriptSchema: [() => ({ $ref: `#/definitions/RSRSS` })] },
+      { name: 'proseColorStorage', type: 'json', admin: { readOnly: true }, typescriptSchema: [() => ({ $ref: `#/definitions/ProseColorStorage` })] },
+    ],
+  }
+
+  return storageField
+}

package/template/src/collections/designSets/tabs/variables.ts

@@ -0,0 +1,28 @@
+import { type Tab } from 'payload'
+import { APField } from '@/fields/apf'
+import { TokenValueArrayField } from '@/fields/designSets/value'
+
+export const VariablesTab = () => {
+  const variablesField: Tab = {
+    label: 'Variables',
+    fields: [
+      {
+        type: 'group',
+        name: 'defaults',
+        admin: { hideGutter: true, description: 'Sets the value for the corresponding css variable.' },
+        fields: [
+          {
+            type: 'row',
+            fields: [
+              APField({ type: 'text', apf: ['classes'], name: 'spacing', defaultValue: '0.25rem', admin: { width: '25%' } }),
+              APField({ type: 'text', apf: ['classes'], name: 'radius', defaultValue: '0.625rem', admin: { width: '25%' } }),
+            ],
+          },
+        ],
+      },
+      TokenValueArrayField('variables', { description: 'CSS Variables that can be used anywhere. Creates an inline class as well.' }),
+    ],
+  }
+
+  return variablesField
+}

package/template/src/collections/favicons.ts

@@ -0,0 +1,11 @@
+import { anyone } from '@/access/anyone'
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+
+export const Favicons: CollectionConfig = {
+  slug: 'favicons',
+  access: { create: authd, delete: authd, read: anyone, update: authd },
+  admin: { group: 'Assets', enableListViewSelectAPI: true },
+  fields: [],
+  upload: { adminThumbnail: 'thumbnail', mimeTypes: ['image/x-icon'] },
+}

package/template/src/collections/fonts/collection.ts

@@ -0,0 +1,20 @@
+import { authd } from '@/access/authenticated'
+import type { CollectionConfig } from 'payload'
+
+export const Font: CollectionConfig = {
+  slug: 'font',
+  access: { create: authd, delete: authd, read: authd, update: authd },
+  admin: { group: 'Assets', useAsTitle: 'title', enableListViewSelectAPI: true, defaultColumns: ['title', 'family'] },
+  fields: [
+    { name: 'title', type: 'text', required: true },
+    {
+      name: 'family',
+      type: 'radio',
+      required: true,
+      label: 'Preferred Family',
+      interfaceName: 'GenericFontFamily',
+      options: ['sans', 'serif', 'mono', 'display'],
+    },
+  ],
+  upload: { mimeTypes: ['font/ttf', 'font/woff', 'font/woff2', 'font/otf'] },
+}