blocks-dusted 0.1.12 → 0.1.13

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

@@ -1,6 +1,5 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Globe, Briefcase, Camera } from 'lucide-react'
@@ -42,35 +41,12 @@ export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
   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}>
+    <div id={sectionId ?? undefined} className={cn('w-full px-5 py-8 md:px-8', customClassName)}>
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <div className="max-w-7xl mx-auto">
+      <div className="mx-auto w-full max-w-7xl">
         {members && members.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
+          <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)
@@ -83,12 +59,7 @@ export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
               return (
                 <div
                   key={member.id != null ? `id-${member.id}` : `idx-${i}`}
-                  className="reveal 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 dark:bg-stone-900/50 h-112 md:h-128"
-                  style={{
-                    opacity: 0,
-                    transform: 'translateY(20px)',
-                    transition: `opacity 0.9s ease ${i * 0.1}s, transform 0.9s ease ${i * 0.1}s`,
-                  }}
+                  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">
@@ -122,8 +93,8 @@ export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
                       )}
                       {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 }}
+                          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>

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>
+  )
+}