blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DDHG-TeamCards/Component.tsx

@@ -1,131 +1,140 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { Globe, Briefcase, Camera } from 'lucide-react'
-import { cn } from '@/utilities/ui'
-import { getMediaUrl } from '@/utilities/getMediaUrl'
-
-type MediaDoc = {
-  url?: string | null
-  alt?: string | null
-}
-
-type TeamMember = {
-  name?: string | null
-  role?: string | null
-  bio?: string | null
-  image?: number | MediaDoc | null
-  priority?: boolean | null
-  facebookUrl?: string | null
-  linkedinUrl?: string | null
-  instagramUrl?: string | null
-  id?: string | null
-}
-
-export type DDHGTeamCardsProps = {
-  sectionId?: string | null
-  customClassName?: string | null
-  customCSS?: string | null
-  members?: TeamMember[] | null
-}
-
-function getMediaDoc(img?: number | MediaDoc | null): MediaDoc | null {
-  if (!img || typeof img === 'number') return null
-  return img
-}
-
-export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
-  sectionId,
-  customClassName,
-  customCSS,
-  members,
-}) => {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.querySelectorAll<HTMLElement>('.reveal').forEach((el, i) => {
-              setTimeout(() => {
-                el.style.opacity = '1'
-                el.style.transform = 'translateY(0)'
-              }, i * 100)
-            })
-            observer.unobserve(entry.target)
-          }
-        })
-      },
-      { threshold: 0.1 },
-    )
-    if (ref.current) observer.observe(ref.current)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <div id={sectionId ?? undefined} className={cn('px-5 md:px-8 py-8', customClassName)} ref={ref}>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <div className="max-w-7xl mx-auto">
-        {members && members.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
-            {members.map((member, i) => {
-              const imageDoc = getMediaDoc(member.image)
-              const imageUrl = getMediaUrl(imageDoc?.url)
-              const socials = [
-                { Icon: Globe, url: member.facebookUrl, label: 'Facebook' },
-                { Icon: Briefcase, url: member.linkedinUrl, label: 'LinkedIn' },
-                { Icon: Camera, url: member.instagramUrl, label: 'Instagram' },
-              ].filter((s) => !!s.url)
-
-              return (
-                <div
-                  key={member.id != null ? `id-${member.id}` : `idx-${i}`}
-                  className="reveal group relative overflow-hidden cursor-pointer bg-transparent h-[28rem] md:h-[32rem]"
-                  style={{ opacity: 0, transform: 'translateY(20px)', transition: `opacity 0.9s ease ${i * 0.1}s, transform 0.9s ease ${i * 0.1}s` }}
-                >
-                  {imageDoc && imageUrl && (
-                    <div className="relative w-full h-full overflow-hidden brightness-100 group-hover:brightness-50">
-                      <Image
-                        src={imageUrl}
-                        alt={imageDoc.alt ?? member.name ?? ''}
-                        fill
-                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                        priority={Boolean(member.priority)}
-                        className="team-member object-cover object-top brightness-100 group-hover:brightness-50 group-hover:scale-110 transition-transform duration-500 ease-out"
-                      />
-                    </div>
-                  )}
-                  <div className="pattern-overlay absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 20px)' }} />
-                  <div className="gradient-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/80 to-transparent group-hover:from-black/90 transition-all duration-300 group-hover:backdrop-brightness-50" />
-                  <div className="content-card absolute inset-0 flex flex-col justify-end p-3 text-white">
-                    <div className="z-10 text-center mb-3">
-                      {member.name && <h3 className="text-xl md:text-2xl font-bold mb-1 text-white drop-shadow-lg" style={{ fontFamily: 'Outfit, sans-serif', fontWeight: 700 }}>{member.name}</h3>}
-                      {member.role && <p className="text-xs md:text-sm font-medium uppercase tracking-wider text-stone-200 dark:text-stone-200 drop-shadow-md" style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500 }}>{member.role}</p>}
-                    </div>
-                    <div className="hover-panel transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out p-4" style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)' }}>
-                      {member.bio && <p className="text-[13px] text-white/70 leading-relaxed mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">{member.bio}</p>}
-                      {socials.length > 0 && (
-                        <div className="socials-map flex gap-3 justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
-                          {socials.map(({ Icon, url, label }) => (
-                            <Link key={label} href={url!} target="_blank" rel="noopener noreferrer" aria-label={`${member.name} on ${label}`} className="text-white/70 hover:text-white hover:scale-110 transition-all duration-200 p-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm">
-                              <Icon size={14} />
-                            </Link>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default DDHGTeamCards
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { Globe, Briefcase, Camera } from 'lucide-react'
+import { cn } from '@/utilities/ui'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+
+type MediaDoc = {
+  url?: string | null
+  alt?: string | null
+}
+
+type TeamMember = {
+  name?: string | null
+  role?: string | null
+  bio?: string | null
+  image?: number | MediaDoc | null
+  priority?: boolean | null
+  facebookUrl?: string | null
+  linkedinUrl?: string | null
+  instagramUrl?: string | null
+  id?: string | null
+}
+
+export type DDHGTeamCardsProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  members?: TeamMember[] | null
+}
+
+function getMediaDoc(img?: number | MediaDoc | null): MediaDoc | null {
+  if (!img || typeof img === 'number') return null
+  return img
+}
+
+export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  members,
+}) => {
+  return (
+    <div id={sectionId ?? undefined} className={cn('w-full px-5 py-8 md:px-8', customClassName)}>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="mx-auto w-full max-w-7xl">
+        {members && members.length > 0 && (
+          <div className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
+            {members.map((member, i) => {
+              const imageDoc = getMediaDoc(member.image)
+              const imageUrl = getMediaUrl(imageDoc?.url)
+              const socials = [
+                { Icon: Globe, url: member.facebookUrl, label: 'Facebook' },
+                { Icon: Briefcase, url: member.linkedinUrl, label: 'LinkedIn' },
+                { Icon: Camera, url: member.instagramUrl, label: 'Instagram' },
+              ].filter((s) => !!s.url)
+
+              return (
+                <div
+                  key={member.id != null ? `id-${member.id}` : `idx-${i}`}
+                  className="group relative overflow-hidden cursor-pointer rounded-md squircle border-none border-stone-300/0 bg-stone-100/50 transition-all duration-300 hover:shadow-2xl dark:border-stone-700/0 h-[28rem] dark:bg-stone-900/50 md:h-[32rem]"
+                >
+                  {imageDoc && imageUrl && (
+                    <div className="relative w-full h-full overflow-hidden brightness-100 group-hover:brightness-50 transition-all duration-300">
+                      <Image
+                        src={imageUrl}
+                        alt={imageDoc.alt ?? member.name ?? ''}
+                        fill
+                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        priority={Boolean(member.priority)}
+                        className="team-member object-cover object-top brightness-100 group-hover:brightness-50 group-hover:scale-110 transition-transform duration-500 ease-out"
+                      />
+                    </div>
+                  )}
+                  <div
+                    className="pattern-overlay absolute inset-0 opacity-[0.03] pointer-events-none"
+                    style={{
+                      backgroundImage:
+                        'repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 20px)',
+                    }}
+                  />
+                  <div className="gradient-overlay absolute inset-0 bg-linear-to-t from-black/80 via-black/80 to-transparent group-hover:from-black/90 transition-all duration-300 group-hover:backdrop-brightness-50" />
+                  <div className="content-card absolute inset-0 flex flex-col justify-end p-3 text-white">
+                    <div className="z-10 text-center mb-3">
+                      {member.name && (
+                        <h3
+                          className="text-xl md:text-2xl font-bold mb-1 text-white drop-shadow-lg"
+                          style={{ fontFamily: 'Outfit, sans-serif', fontWeight: 700 }}
+                        >
+                          {member.name}
+                        </h3>
+                      )}
+                      {member.role && (
+                        <p
+                          className="text-xs font-bold uppercase tracking-wider md:text-sm text-blue-600 dark:text-blue-500 drop-shadow-md"
+                          style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700 }}
+                        >
+                          {member.role}
+                        </p>
+                      )}
+                    </div>
+                    <div
+                      className="hover-panel transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out p-4"
+                      style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)' }}
+                    >
+                      {member.bio && (
+                        <p className="text-sm text-white/70 leading-relaxed mb-4 opacity-0 group-hover:opacity-100 transition-all duration-300 delay-100">
+                          {member.bio}
+                        </p>
+                      )}
+                      {socials.length > 0 && (
+                        <div className="socials-map flex gap-3 justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 delay-200">
+                          {socials.map(({ Icon, url, label }) => (
+                            <Link
+                              key={label}
+                              href={url!}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              aria-label={`${member.name} on ${label}`}
+                              className="text-white/70 hover:text-white hover:scale-110 transition-all duration-200 p-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm"
+                            >
+                              <Icon size={14} />
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGTeamCards

package/templates/blocks/Form/Checkbox/index.tsx

@@ -0,0 +1,45 @@
+import type { CheckboxField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { useFormContext } from 'react-hook-form'
+
+import { Checkbox as CheckboxUi } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+
+export const Checkbox: React.FC<
+  CheckboxField & {
+    errors: Partial<FieldErrorsImpl>
+    register: UseFormRegister<FieldValues>
+  }
+> = ({ name, defaultValue, errors, label, register, required, width }) => {
+  const props = register(name, { required: required })
+  const { setValue } = useFormContext()
+
+  return (
+    <Width width={width}>
+      <div className="flex items-center gap-2">
+        <CheckboxUi
+          defaultChecked={defaultValue}
+          id={name}
+          {...props}
+          onCheckedChange={(checked) => {
+            setValue(props.name, checked)
+          }}
+        />
+        <Label htmlFor={name}>
+          {required && (
+            <span className="required">
+              * <span className="sr-only">(required)</span>
+            </span>
+          )}
+          {label}
+        </Label>
+      </div>
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}

package/templates/blocks/Form/Component.tsx

@@ -0,0 +1,163 @@
+'use client'
+import type { FormFieldBlock, Form as FormType } from '@payloadcms/plugin-form-builder/types'
+
+import { useRouter } from 'next/navigation'
+import React, { useCallback, useState } from 'react'
+import { useForm, FormProvider } from 'react-hook-form'
+import RichText from '@/components/RichText'
+import { Button } from '@/components/ui/button'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+
+import { fields } from './fields'
+import { getClientSideURL } from '@/utilities/getURL'
+
+export type FormBlockType = {
+  blockName?: string
+  blockType?: 'formBlock'
+  enableIntro: boolean
+  form: FormType
+  introContent?: DefaultTypedEditorState
+}
+
+export const FormBlock: React.FC<
+  {
+    id?: string
+  } & FormBlockType
+> = (props) => {
+  const {
+    enableIntro,
+    form: formFromProps,
+    form: { id: formID, confirmationMessage, confirmationType, redirect, submitButtonLabel } = {},
+    introContent,
+  } = props
+
+  const formMethods = useForm({
+    defaultValues: formFromProps.fields,
+  })
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    register,
+  } = formMethods
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasSubmitted, setHasSubmitted] = useState<boolean>()
+  const [error, setError] = useState<{ message: string; status?: string } | undefined>()
+  const router = useRouter()
+
+  const onSubmit = useCallback(
+    (data: FormFieldBlock[]) => {
+      let loadingTimerID: ReturnType<typeof setTimeout>
+      const submitForm = async () => {
+        setError(undefined)
+
+        const dataToSend = Object.entries(data).map(([name, value]) => ({
+          field: name,
+          value,
+        }))
+
+        // delay loading indicator by 1s
+        loadingTimerID = setTimeout(() => {
+          setIsLoading(true)
+        }, 1000)
+
+        try {
+          const req = await fetch(`${getClientSideURL()}/api/form-submissions`, {
+            body: JSON.stringify({
+              form: formID,
+              submissionData: dataToSend,
+            }),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            method: 'POST',
+          })
+
+          const res = await req.json()
+
+          clearTimeout(loadingTimerID)
+
+          if (req.status >= 400) {
+            setIsLoading(false)
+
+            setError({
+              message: res.errors?.[0]?.message || 'Internal Server Error',
+              status: res.status,
+            })
+
+            return
+          }
+
+          setIsLoading(false)
+          setHasSubmitted(true)
+
+          if (confirmationType === 'redirect' && redirect) {
+            const { url } = redirect
+
+            const redirectUrl = url
+
+            if (redirectUrl) router.push(redirectUrl)
+          }
+        } catch (err) {
+          console.warn(err)
+          setIsLoading(false)
+          setError({
+            message: 'Something went wrong.',
+          })
+        }
+      }
+
+      void submitForm()
+    },
+    [router, formID, redirect, confirmationType],
+  )
+
+  return (
+    <div className="container lg:max-w-[48rem]">
+      {enableIntro && introContent && !hasSubmitted && (
+        <RichText className="mb-8 lg:mb-12" data={introContent} enableGutter={false} />
+      )}
+      <div className="p-4 lg:p-6 border border-border rounded-[0.8rem]">
+        <FormProvider {...formMethods}>
+          {!isLoading && hasSubmitted && confirmationType === 'message' && (
+            <RichText data={confirmationMessage} />
+          )}
+          {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
+          {error && <div>{`${error.status || '500'}: ${error.message || ''}`}</div>}
+          {!hasSubmitted && (
+            <form id={formID} onSubmit={handleSubmit(onSubmit)}>
+              <div className="mb-4 last:mb-0">
+                {formFromProps &&
+                  formFromProps.fields &&
+                  formFromProps.fields?.map((field, index) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const Field: React.FC<any> = fields?.[field.blockType as keyof typeof fields]
+                    if (Field) {
+                      return (
+                        <div className="mb-6 last:mb-0" key={index}>
+                          <Field
+                            form={formFromProps}
+                            {...field}
+                            {...formMethods}
+                            control={control}
+                            errors={errors}
+                            register={register}
+                          />
+                        </div>
+                      )
+                    }
+                    return null
+                  })}
+              </div>
+
+              <Button form={formID} type="submit" variant="default">
+                {submitButtonLabel}
+              </Button>
+            </form>
+          )}
+        </FormProvider>
+      </div>
+    </div>
+  )
+}

package/templates/blocks/Form/Country/index.tsx

@@ -0,0 +1,65 @@
+import type { CountryField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl } from 'react-hook-form'
+
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+import { countryOptions } from './options'
+
+export const Country: React.FC<
+  CountryField & {
+    control: Control
+    errors: Partial<FieldErrorsImpl>
+  }
+> = ({ name, control, errors, label, required, width }) => {
+  return (
+    <Width width={width}>
+      <Label className="" htmlFor={name}>
+        {label}
+
+        {required && (
+          <span className="required">
+            * <span className="sr-only">(required)</span>
+          </span>
+        )}
+      </Label>
+      <Controller
+        control={control}
+        defaultValue=""
+        name={name}
+        render={({ field: { onChange, value } }) => {
+          const controlledValue = countryOptions.find((t) => t.value === value)
+
+          return (
+            <Select onValueChange={(val) => onChange(val)} value={controlledValue?.value}>
+              <SelectTrigger className="w-full" id={name}>
+                <SelectValue placeholder={label} />
+              </SelectTrigger>
+              <SelectContent>
+                {countryOptions.map(({ label, value }) => {
+                  return (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  )
+                })}
+              </SelectContent>
+            </Select>
+          )
+        }}
+        rules={{ required }}
+      />
+      {errors[name] && <Error name={name} />}
+    </Width>
+  )
+}