This repository has been archived by the owner on Jun 27, 2024. It is now read-only.
generated from sanity-io/sanity-template-vercel-visual-editing
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
45075fe
commit 1ad1d8f
Showing
16 changed files
with
579 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,8 @@ | ||
| { | ||
| "plugins": ["prettier-plugin-tailwindcss"], | ||
| "plugins": [ | ||
| "prettier-plugin-organize-imports", | ||
| "prettier-plugin-tailwindcss" | ||
| ], | ||
| "tailwindConfig": "./tailwind.config.js", | ||
| "tailwindFunctions": ["tv"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| 'use client' | ||
|
|
||
| import { zodResolver } from '@hookform/resolvers/zod' | ||
| import { useForm } from 'react-hook-form' | ||
| import { z } from 'zod' | ||
|
|
||
| import { | ||
| Button, | ||
| Form, | ||
| FormControl, | ||
| FormField, | ||
| FormMessage, | ||
| Input, | ||
| } from '@/components/ui' | ||
|
|
||
| import { newsletterStyles } from './HomePage.styles' | ||
|
|
||
| const formSchema = z.object({ | ||
| email: z.string().email(), | ||
| }) | ||
|
|
||
| export const HomePageNewsletter = () => { | ||
| const { wrapper, input, button } = newsletterStyles() | ||
|
|
||
| const form = useForm<z.infer<typeof formSchema>>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { | ||
| email: '', | ||
| }, | ||
| }) | ||
|
|
||
| const onSubmit = (values: z.infer<typeof formSchema>) => { | ||
| console.log(values) | ||
| } | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form onSubmit={form.handleSubmit(onSubmit)} className={wrapper()}> | ||
| <FormField | ||
| control={form.control} | ||
| name="email" | ||
| render={({ field }) => ( | ||
| <> | ||
| <FormControl> | ||
| <Input | ||
| type="email" | ||
| placeholder="Your email" | ||
| variant="outline" | ||
| className={input()} | ||
| {...field} | ||
| /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </> | ||
| )} | ||
| /> | ||
| <Button type="submit" variant="white" className={button()}> | ||
| Stay in the loop | ||
| </Button> | ||
| </form> | ||
| </Form> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,181 @@ | ||
| 'use client' | ||
|
|
||
| import * as LabelPrimitive from '@radix-ui/react-label' | ||
| import { Slot } from '@radix-ui/react-slot' | ||
| import { createContext, forwardRef, useContext, useId } from 'react' | ||
| import { | ||
| Controller, | ||
| ControllerProps, | ||
| FieldPath, | ||
| FieldValues, | ||
| FormProvider, | ||
| useFormContext, | ||
| } from 'react-hook-form' | ||
|
|
||
| import { Label } from '@/components/ui/Label/Label' | ||
| import { cn } from '@/lib/utils' | ||
|
|
||
| const Form = FormProvider | ||
|
|
||
| type FormFieldContextValue< | ||
| TFieldValues extends FieldValues = FieldValues, | ||
| TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, | ||
| > = { | ||
| name: TName | ||
| } | ||
|
|
||
| const FormFieldContext = createContext<FormFieldContextValue>( | ||
| {} as FormFieldContextValue, | ||
| ) | ||
|
|
||
| const FormField = < | ||
| TFieldValues extends FieldValues = FieldValues, | ||
| TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, | ||
| >({ | ||
| ...props | ||
| }: ControllerProps<TFieldValues, TName>) => { | ||
| return ( | ||
| <FormFieldContext.Provider value={{ name: props.name }}> | ||
| <Controller {...props} /> | ||
| </FormFieldContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| const useFormField = () => { | ||
| const fieldContext = useContext(FormFieldContext) | ||
| const itemContext = useContext(FormItemContext) | ||
| const { getFieldState, formState } = useFormContext() | ||
|
|
||
| const fieldState = getFieldState(fieldContext.name, formState) | ||
|
|
||
| if (!fieldContext) { | ||
| throw new Error('useFormField should be used within <FormField>') | ||
| } | ||
|
|
||
| const { id } = itemContext | ||
|
|
||
| return { | ||
| id, | ||
| name: fieldContext.name, | ||
| formItemId: `${id}-form-item`, | ||
| formDescriptionId: `${id}-form-item-description`, | ||
| formMessageId: `${id}-form-item-message`, | ||
| ...fieldState, | ||
| } | ||
| } | ||
|
|
||
| type FormItemContextValue = { | ||
| id: string | ||
| } | ||
|
|
||
| const FormItemContext = createContext<FormItemContextValue>( | ||
| {} as FormItemContextValue, | ||
| ) | ||
|
|
||
| const FormItem = forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => { | ||
| const id = useId() | ||
|
|
||
| return ( | ||
| <FormItemContext.Provider value={{ id }}> | ||
| <div ref={ref} className={cn('space-y-2', className)} {...props} /> | ||
| </FormItemContext.Provider> | ||
| ) | ||
| }) | ||
| FormItem.displayName = 'FormItem' | ||
|
|
||
| const FormLabel = forwardRef< | ||
| React.ElementRef<typeof LabelPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> | ||
| >(({ className, ...props }, ref) => { | ||
| const { error, formItemId } = useFormField() | ||
|
|
||
| return ( | ||
| <Label | ||
| ref={ref} | ||
| className={cn(error && 'text-red-500 dark:text-red-900', className)} | ||
| htmlFor={formItemId} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }) | ||
| FormLabel.displayName = 'FormLabel' | ||
|
|
||
| const FormControl = forwardRef< | ||
| React.ElementRef<typeof Slot>, | ||
| React.ComponentPropsWithoutRef<typeof Slot> | ||
| >(({ ...props }, ref) => { | ||
| const { error, formItemId, formDescriptionId, formMessageId } = useFormField() | ||
|
|
||
| return ( | ||
| <Slot | ||
| ref={ref} | ||
| id={formItemId} | ||
| aria-describedby={ | ||
| !error | ||
| ? `${formDescriptionId}` | ||
| : `${formDescriptionId} ${formMessageId}` | ||
| } | ||
| aria-invalid={!!error} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }) | ||
| FormControl.displayName = 'FormControl' | ||
|
|
||
| const FormDescription = forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => { | ||
| const { formDescriptionId } = useFormField() | ||
|
|
||
| return ( | ||
| <p | ||
| ref={ref} | ||
| id={formDescriptionId} | ||
| className={cn('text-sm text-slate-500 dark:text-slate-400', className)} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }) | ||
| FormDescription.displayName = 'FormDescription' | ||
|
|
||
| const FormMessage = forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, children, ...props }, ref) => { | ||
| const { error, formMessageId } = useFormField() | ||
| const body = error ? String(error?.message) : children | ||
|
|
||
| if (!body) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <p | ||
| ref={ref} | ||
| id={formMessageId} | ||
| className={cn( | ||
| 'text-sm font-medium text-red-500 dark:text-red-900', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {body} | ||
| </p> | ||
| ) | ||
| }) | ||
| FormMessage.displayName = 'FormMessage' | ||
|
|
||
| export { | ||
| Form, | ||
| FormControl, | ||
| FormDescription, | ||
| FormField, | ||
| FormItem, | ||
| FormLabel, | ||
| FormMessage, | ||
| useFormField, | ||
| } |
Oops, something went wrong.