@pro-laico/create-atomic-payload 0.1.4

package/template/src/ts/types/cache.ts

@@ -0,0 +1,166 @@
+import {
+  Form,
+  Page,
+  Footer,
+  Header,
+  Tracking,
+  DesignSet,
+  ImageChild,
+  ShortcutSet,
+  SiteMetaDatum,
+  FormSubmission,
+  StoredAtomicForm,
+  AtomicStoreInitialState,
+  ModifiedStoredAtomicForm,
+} from '@/ts/types'
+
+// /////////////////////////////////////
+// Helper Types
+// /////////////////////////////////////
+
+/** Merges two tuple types by appending the second tuple to the firs t*/
+export type MergeTuples<T extends readonly unknown[], U extends readonly unknown[]> = [...T, ...U]
+
+// /////////////////////////////////////
+// General Types
+// /////////////////////////////////////
+
+/** Array elements data returned by the getCached<'sitemap'> function. */
+export type SiteMapEntry = {
+  url: string
+  priority: number
+  lastModified: string
+  changeFrequency: 'yearly' | 'monthly' | 'weekly' | 'daily' | 'hourly' | 'never'
+}
+
+/** Data returned by the revalidateTag function. */
+export type RevalidateTagResponse = { success: boolean; message: string; timestamp: string }
+
+// /////////////////////////////////////
+// Tags
+// /////////////////////////////////////
+
+// When adding a new tag, also add the corresponding overload at /utilities/get/cache/index.ts
+type PageTags = 'page'
+type CacheTags = 'draft' | 'published'
+type GlobalsTags = 'tracking' | 'settings'
+type CSSTags = 'site-css' | 'atomic-classes'
+type IconTags = 'iconSet' | 'icon' | 'icon-options'
+type CollectionsTags = 'designSet' | 'footer' | 'header' | 'shortcutSet'
+type FrontEndTags = 'sitemap' | 'pages' | 'site-metadata' | 'atomic-actions'
+type FormsTags = 'atomic-forms' | 'all-forms' | 'form-submissions' | 'backend-forms' | 'image'
+
+// Tags that for the revalidateTag function, has a promise return type.
+export type PromiseTagGroup = 'draft' | 'published'
+// Tags that have no corresponding getCached function.
+export type TagsWithNoGetters = 'draft' | 'published' | 'settings'
+// Adds a id key to the tag.
+export type IDTagGroup = 'page' | 'icon' | 'form-submissions' | 'image'
+// Tags that dont handle for draft or published.
+export type NoDraftTagGroup = 'backend-forms' | 'form-submissions' | 'draft' | 'published' | 'image'
+
+export type AllTags = CSSTags | GlobalsTags | IconTags | FrontEndTags | PageTags | FormsTags | CollectionsTags | CacheTags
+export type AllTagsWithGetters = Exclude<AllTags, TagsWithNoGetters>
+
+type Tag<T extends AllTags> = T extends NoDraftTagGroup
+  ? T extends IDTagGroup
+    ? [T, tid: string]
+    : [T]
+  : T extends IDTagGroup
+    ? [T, tid: string, draft: boolean]
+    : [T, draft: boolean]
+
+// /////////////////////////////////////
+// Revalidate Tag Function Types
+// /////////////////////////////////////
+
+export type RevalidateTagType =
+  | { args: Tag<'page'>; return: void }
+  | { args: Tag<'icon'>; return: void }
+  | { args: Tag<'image'>; return: void }
+  | { args: Tag<'pages'>; return: void }
+  | { args: Tag<'header'>; return: void }
+  | { args: Tag<'footer'>; return: void }
+  | { args: Tag<'sitemap'>; return: void }
+  | { args: Tag<'iconSet'>; return: void }
+  | { args: Tag<'site-css'>; return: void }
+  | { args: Tag<'tracking'>; return: void }
+  | { args: Tag<'settings'>; return: void }
+  | { args: Tag<'all-forms'>; return: void }
+  | { args: Tag<'designSet'>; return: void }
+  | { args: Tag<'shortcutSet'>; return: void }
+  | { args: Tag<'icon-options'>; return: void }
+  | { args: Tag<'atomic-forms'>; return: void }
+  | { args: Tag<'backend-forms'>; return: void }
+  | { args: Tag<'site-metadata'>; return: void }
+  | { args: Tag<'atomic-classes'>; return: void }
+  | { args: Tag<'atomic-actions'>; return: void }
+  | { args: Tag<'form-submissions'>; return: void }
+  | { args: Tag<'draft'>; return: RevalidateTagResponse }
+  | { args: Tag<'published'>; return: RevalidateTagResponse }
+
+/** The pass through arguments for the revalidate tag function. Set to 'all' to get the parameters for all tags. Mainly just for function overload. */
+export type RArgs<T extends AllTags | 'all'> = T extends AllTags ? Extract<RevalidateTagType, { args: Tag<T> }>['args'] : RevalidateTagType['args']
+
+/** The return type of the revalidate tag function. Set to 'all' to get the return type for all tags. Mainly just for function overload. */
+export type RReturns<T extends AllTags | 'all'> = Promise<
+  T extends AllTags ? Extract<RevalidateTagType, { args: Tag<T> }>['return'] : RevalidateTagType['return']
+>
+
+// /////////////////////////////////////
+// Get Cache Function Types
+// /////////////////////////////////////
+/** Data returned by the getCached<'iconSet'> function. */
+export type IconSetReturn = { iconsArray: { name: string; icon: string }[] }
+/** Data returned by the getCached<'page'> function. */
+export type PageReturn = Pick<Page, 'children' | 'mainClassName' | 'meta' | 'id'>
+export type StoredAtomicActionsReturn = AtomicStoreInitialState
+
+type PageArgs = [pages: string[]] // Used on tag 'page'
+type ImageArgs = [version?: ImageChild['version']] // Used on tag 'image'
+type IconArgs = [iconSet: IconSetReturn] // Used on tags 'icon' and 'icon-options'
+type AllFormsArgs = [atomicForms: StoredAtomicForm[], backendForms: Form[]] // Used on tag 'all-forms'
+
+export type GetCached =
+  | { args: Tag<'header'>; return: Header }
+  | { args: Tag<'footer'>; return: Footer }
+  | { args: Tag<'pages'>; return: string[] }
+  | { args: Tag<'site-css'>; return: string }
+  | { args: Tag<'designSet'>; return: DesignSet }
+  | { args: Tag<'backend-forms'>; return: Form[] }
+  | { args: Tag<'iconSet'>; return: IconSetReturn }
+  | { args: Tag<'sitemap'>; return: SiteMapEntry[] }
+  | { args: Tag<'shortcutSet'>; return: ShortcutSet }
+  | { args: Tag<'atomic-classes'>; return: string[] }
+  | { args: Tag<'tracking'>; return: Tracking | undefined }
+  | { args: Tag<'form-submissions'>; return: FormSubmission[] }
+  | { args: Tag<'atomic-actions'>; return: AtomicStoreInitialState }
+  | { args: Tag<'site-metadata'>; return: SiteMetaDatum | undefined }
+  | { args: Tag<'atomic-forms'>; return: StoredAtomicForm[] | undefined }
+  | { args: MergeTuples<Tag<'icon'>, IconArgs>; return: string | undefined }
+  | { args: MergeTuples<Tag<'image'>, ImageArgs>; return: string | undefined }
+  | { args: MergeTuples<Tag<'page'>, PageArgs>; return: PageReturn | undefined }
+  | { args: MergeTuples<Tag<'icon-options'>, IconArgs>; return: { label: string; value: string }[] }
+  | { args: MergeTuples<Tag<'all-forms'>, AllFormsArgs>; return: ModifiedStoredAtomicForm[] | undefined }
+
+/** The pass through arguments for the get cache function. Set to 'all' to get the parameters for all tags. Mainly just for function overload. */
+export type GCArgs<T extends AllTagsWithGetters | 'all'> = T extends AllTagsWithGetters
+  ? Extract<GetCached, { args: [T, ...any[]] }>['args']
+  : GetCached['args']
+
+/** The return type of the get cached functions. Set to 'all' to get the return type for all tags. Mainly just for function overload. */
+export type GCReturns<T extends AllTagsWithGetters | 'all'> = T extends AllTagsWithGetters
+  ? Promise<Extract<GetCached, { args: [T, ...any[]] }>['return']>
+  : Promise<GetCached['return']>
+
+/** Function type for get cached functions. Used directly on variable definition getters. */
+export type GCFunction<T extends AllTagsWithGetters> = (
+  ...args: Extract<GetCached, { args: [T, ...any[]] }>['args']
+) => Promise<Extract<GetCached, { args: [T, ...any[]] }>['return']>
+
+// /////////////////////////////////////
+// Miscellaneous Types
+// /////////////////////////////////////
+
+export type RevalidationLoggerType = string[]
+export type CacheLoggerType<T extends AllTagsWithGetters> = (args: RArgs<T>) => void

package/template/src/ts/types/css.ts

@@ -0,0 +1,14 @@
+import type { RequestContext, PayloadRequest } from 'payload'
+import type { Config, CollectionThatUsesCSSProcessorSlug, CollectionWithStoredAtomicClassesSlug } from '@/ts/types'
+
+/** Document types from collections that include storedAtomicClasses property. E.g., Page | Footer | Header */
+export type CollectionsWithStoredAtomicClasses = Config['collections'][CollectionWithStoredAtomicClassesSlug]
+
+export type CollectionThatUsesCSSProcessor = Config['collections'][CollectionThatUsesCSSProcessorSlug]
+
+export type cssProcessorType = (args: {
+  draft: boolean
+  req: PayloadRequest
+  context: RequestContext
+  slug: CollectionThatUsesCSSProcessorSlug
+}) => Promise<string>

package/template/src/ts/types/forms.ts

@@ -0,0 +1,214 @@
+import type { BlocksFieldClientProps } from 'payload'
+import type {
+  Config,
+  FormSubmission,
+  StoredAtomicForm,
+  AtomicInputTypes,
+  CookiePreferences,
+  FormRateLimitBlocks,
+  FormSanitationBlocks,
+  FormValidationBlocks,
+  InputSanitationBlocks,
+  InputValidationBlocks,
+  FormRateLimitBlockType,
+  FormSanitationBlockType,
+  FormValidationBlockType,
+  InputValidationBlockType,
+  InputSanitationBlockType,
+} from '@/ts/types'
+
+// /////////////////////////////////////
+// Collection Types
+// /////////////////////////////////////
+
+/** Collection slugs where the document type includes storedAtomicForms property. E.g., 'pages' | 'footer' | 'header' */
+export type CollectionsWithStoredFormsSlugs = {
+  [K in keyof Config['collections']]: Config['collections'][K] extends { storedAtomicForms?: unknown } ? K : never
+}[keyof Config['collections']]
+
+/** Document types from collections that include storedAtomicForms property. E.g., Page | Footer | Header */
+export type CollectionsWithStoredForms = Config['collections'][CollectionsWithStoredFormsSlugs]
+
+// /////////////////////////////////////
+// INPUT CLIENT COMPONENT TYPES
+// /////////////////////////////////////
+
+export type UsedOn = { block: string; usedOn: AtomicInputTypes }[]
+export interface InputBlocksFieldProps extends BlocksFieldClientProps {
+  usedOn: { block: string; usedOn: AtomicInputTypes }[]
+}
+
+// /////////////////////////////////////
+// UTILITY FUNCTION TYPES
+// /////////////////////////////////////
+
+export type FilterSubmissionsByFieldAndValue = (args: {
+  fieldName: string
+  submissions: FormSubmission[]
+  fieldValue: FormDataEntryValue | null
+}) => FormSubmission[]
+
+// /////////////////////////////////////
+// DATA TYPES
+// /////////////////////////////////////
+
+/** Data that is collected from the client and passed in. */
+type ClientUserData = {
+  timezone: string
+  preferences: CookiePreferences
+}
+
+/** Data that is collected from the server via headers. */
+type ServerUserData = {
+  userAgent: string
+}
+
+type ClientAnalyticsData = {
+  screenWidth: string
+  screenHeight: string
+}
+
+/** Data that is collected from the server via headers. */
+type ServerAnalyticsData = {
+  referer: string
+}
+
+export type UserData = ClientUserData & ServerUserData
+export type AnalyticsData = ClientAnalyticsData & ServerAnalyticsData
+
+/* Server Functions Response To Client */
+export type FormResponse = {
+  /** Whether or not the form submission was/is successful. */
+  success: boolean
+  /** Input Error Messages. Used for displaying error messages for specific form fields. */
+  im: Record<string, string>
+  /** Form Message. Used for form error or success messages. */
+  fm: string
+  /** Submission ID. Used for tracking seperate submissions. */
+  submissionID: string
+  /** Only contains the actual data submitted by form fields. */
+  formData: FormData
+}
+
+export type SubmitToPayload = { field: string; value: string }[]
+
+// /////////////////////////////////////
+// FORM PROCESSOR TYPES
+// /////////////////////////////////////
+
+// /////////////////////////////////////
+// Generally Used Types
+
+export type AllFormBlockTypes =
+  | FormRateLimitBlockType
+  | FormSanitationBlockType
+  | FormValidationBlockType
+  | InputSanitationBlockType
+  | InputValidationBlockType
+
+export type AllFormBlocks =
+  | FormRateLimitBlocks[number]
+  | FormSanitationBlocks[number]
+  | FormValidationBlocks[number]
+  | (InputSanitationBlocks[number] & { inputName: string })
+  | (InputValidationBlocks[number] & { inputName: string })
+
+/** Contains general context for use in form processor functions. */
+export type FormContext = {
+  ip: string
+  /** The headers of the request. Grabbed By Next.js headers(). */
+  headers: Headers
+  /** The page the submission was made from. */
+  referer: string
+  /** The ID of the backend form. Used for submission. */
+  backendFormID: string
+  /** Data passed in from the client. */
+  clientData: ClientUserData & ClientAnalyticsData
+  /** Set by rate limiting functions, as the time to wait until the next request can be made.
+   * Set in milliseconds.
+   */
+  waitFor?: number
+}
+
+export type ModifiedStoredAtomicForm = {
+  /** The ID of the backend form. Used for submitting formData to payload. */
+  backendFormID: string
+} & StoredAtomicForm
+
+// /////////////////////////////////////
+// Input Parameters For Methods & Functions
+
+/** Input Parameters For Submit Form Function */
+export interface SubmitFormProps {
+  formData: FormData
+  submissionID: string
+  blockID: string | null | undefined
+  clientData: ClientUserData & ClientAnalyticsData
+}
+
+/** Base Parameters For All Functions Used In Form Processor */
+export interface AFPBase {
+  formData: FormData
+  context: FormContext
+  response: FormResponse
+  storedForm: ModifiedStoredAtomicForm
+}
+
+/** Base Parameters For Form Processors public process() and private preProcess(). */
+export type ProcessMethodArgs = {
+  headers: Headers
+  storedForm: ModifiedStoredAtomicForm
+  submissionData: SubmitFormProps
+}
+
+type MessageProcessorArgs = {
+  /** Validation Message. */
+  vm: string
+  /** Time in milliseconds to wait until the next request can be made. */
+  waitFor?: number
+  formData: FormData
+}
+
+type RunBlocksArgs = {
+  type: AllFormBlockTypes
+  block: AllFormBlocks
+  persevere?: true
+}
+
+// /////////////////////////////////////
+// Return Value Types
+
+/** Return Value for Form Processor */
+export type FormProcessorReturn = {
+  response: FormResponse
+  submitToPayload: SubmitToPayload
+}
+
+// /////////////////////////////////////
+// Function Types
+
+export type SubmitFormFunction = (args: SubmitFormProps) => Promise<FormResponse>
+
+// /////////////////////////////////////
+// Method Types
+
+/** Private Method that modifies the incoming data for use in functions. */
+export type PreProcessMethod = (args: ProcessMethodArgs) => void
+
+/** Public Method that actually processes the form.*/
+export type ProcessMethod = (args: ProcessMethodArgs) => Promise<FormProcessorReturn>
+
+/** Private Method that modifies the outgoing data for use in storage. */
+export type PostProcessMethod = () => FormProcessorReturn
+
+/** Private Method that modifies the response messages. */
+export type MessageProcessorMethod = (args: MessageProcessorArgs) => string
+
+/** Private Method that finds and runs a blocks corresponding function.*/
+export type RunBlocksMethod = (args: RunBlocksArgs) => Promise<void>
+
+// /////////////////////////////////////
+// Block Function Types
+
+export type FormFunction<TArgs extends { block: AllFormBlocks } = { block: AllFormBlocks }> = (args: AFPBase & TArgs) => Promise<AFPBase>
+export type FormFunctionsMap = { [K in AllFormBlocks as K['blockType']]: FormFunction<{ block: K }> }

package/template/src/ts/types/frontEnd.ts

@@ -0,0 +1,115 @@
+// Front End Types
+import type { ReactNode } from 'react'
+import type { ChildBlocks } from '@/ts/types'
+
+// /////////////////////////////////////
+// UTILITY FUNCTION TYPES
+// /////////////////////////////////////
+
+export type Apply = Record<string, unknown>
+
+export interface AtomicChildReturn {
+  /** Props That Can Be Applied To Trigger */
+  tp: Apply
+  /**  Props That Can Be Applied To Backdrop */
+  bp: Apply
+}
+
+export type PassThrough = {
+  /** Props that should be spread on target element */
+  p?: Record<string, unknown>
+  /** Children */
+  children?: ReactNode
+  /** Data Attributes that should be spread on target element*/
+  da?: Record<string, string>
+}
+
+export type PassThroughs = {
+  /** Content Pass Throughs */
+  c: PassThrough
+  /** Trigger Pass Throughs */
+  t: PassThrough
+  /** Portal Pass Throughs */
+  po: {
+    /** Backdrop Pass Throughs */
+    b: Omit<PassThrough, 'da'>
+    /** Dialog Pass Throughs */
+    di: Omit<PassThrough, 'children' | 'da'>
+    /** Popover Pass Throughs */
+    pop: Omit<PassThrough, 'children' | 'da'>
+  }
+}
+
+// /////////////////////////////////////
+// CHILD TYPES
+// /////////////////////////////////////
+
+/** Used for base ui custom components. */
+export interface RenderChild<T extends ChildBlocks[number] | ChildBlocks> {
+  /** The block being rendered */
+  block: T
+  /** All Possible Pass Throughs. Includes spreadable props, children components, and data attributes. */
+  pt: PassThroughs
+  contentChildren?: ReactNode
+  triggerChildren?: ReactNode
+  backdropChildren?: ReactNode
+}
+
+/** {@link RenderChildrenProps} */
+export type RenderChildrenProps = React.FC<{
+  blocks?: ChildBlocks | null
+}>
+
+// /////////////////////////////////////
+// ATOMIC STORE TYPES
+// /////////////////////////////////////
+
+type PersistedProp = boolean | null | undefined
+export type ImplementedStorageTypes = boolean | string | Record<string, string>
+
+export type AtomicStoreInitialState = {
+  version: number
+  //storedAtomicActions: StoredAtomicActions
+}
+
+export interface AtomicStoreProviderProps {
+  children: ReactNode
+  initialState: AtomicStoreInitialState
+}
+
+export type BaseSlice = {
+  hydrated: boolean
+  setHydrated: (hydrated: boolean) => void
+}
+
+export interface DynamicSlice {
+  memory: Record<string, ImplementedStorageTypes>
+  persisted: Record<string, ImplementedStorageTypes>
+  removeValue: (key: string, persisted: PersistedProp) => void
+  getValue: (key: string, persisted: PersistedProp) => ImplementedStorageTypes
+  setValue: (key: string, value: ImplementedStorageTypes, persisted: PersistedProp) => void
+  //clearStorage: (persisted: PersistedProp) => void
+  //setMultiple: (entries: Array<{ key: string; value: ImplementedStorageTypes; persisted: PersistedProp }>) => void
+  //getMultiple: (keys: Array<{ key: string; persisted: PersistedProp }>) => Record<string, ImplementedStorageTypes>
+}
+
+export interface ConsentPreferences {
+  functional: boolean
+  security: boolean
+  analytics: boolean
+  marketing: boolean
+  userData: boolean
+  adPersonalization: boolean
+  contentPersonalization: boolean
+}
+
+export interface ConsentSlice {
+  hasConsented: boolean | null
+  preferences: ConsentPreferences
+  previouslyConsented: boolean | null
+  declineCookies: () => void
+  acceptCookies: (preferences?: Partial<ConsentPreferences>) => void
+  setPreference: (category: keyof ConsentPreferences, value: boolean) => void
+}
+
+export type AtomicStore = BaseSlice & ConsentSlice & DynamicSlice

package/template/src/ts/types/index.ts

@@ -0,0 +1,49 @@
+import type { Config, ChildBlockType, ActionBlockType } from '@/ts/types'
+import type { BlockSlug, CollectionSlug } from 'payload'
+export * from './apf'
+export * from './css'
+export * from './cache'
+export * from './forms'
+export * from './actions'
+export * from './frontEnd'
+export * from './payload-types'
+
+// /////////////////////////////////////
+// Miscellaneous Types
+// /////////////////////////////////////
+
+export type StringKeyOf<T> = Extract<keyof T, string>
+
+/** The type used by the atomic child block's for depth management */
+export type DepthControls = {
+  /** Current content blocks depth. */
+  cd: number
+  /** The maximum content blocks depth. */
+  cmd: number
+  /** The current trigger blocks depth. */
+  td: number
+  /** The maximum trigger blocks depth. */
+  tmd: number
+}
+
+export type DotNestedKeys<T> = T extends object
+  ? {
+      [K in keyof T & (string | number)]: T[K] extends object ? `${K}` | `${K}.${DotNestedKeys<T[K]>}` : `${K}`
+    }[keyof T & (string | number)]
+  : never
+
+export type Last<T extends any[]> = T extends [...infer _, infer L] ? L : never
+
+// /////////////////////////////////////
+// Payload Types
+// /////////////////////////////////////
+export type AllBlocks = Config['blocks'][keyof Config['blocks']]
+export type AllCollections = Config['collections'][keyof Config['collections']]
+
+export type CollectionBySlug<T extends CollectionSlug> = Config['collections'][T]
+
+export type BlockBySlug<T extends BlockSlug> = Config['blocks'][T]
+export type ChildBySlug<T extends ChildBlockType> = BlockBySlug<T>
+export type ActionBySlug<T extends ActionBlockType> = BlockBySlug<T>
+
+export type AllBlockDotNestedKeys = DotNestedKeys<AllBlocks>