rhf-textarea-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import { InfoIcon } from 'lucide-react';
5import type * as React from 'react';
6import { useController } from 'react-hook-form';
7import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
8import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from '@/components/ui/input-group';
9import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
10 
11export interface TextareaFieldProps
12  extends Omit<React.ComponentProps<typeof InputGroupTextarea>, 'value' | 'onChange'> {
13  lens: Lens<string>;
14  label?: string;
15  description?: string;
16  tooltip?: React.ReactNode;
17}
18 
19export function TextareaField({ lens, label, description, tooltip, ...props }: TextareaFieldProps) {
20  const { field, fieldState } = useController(lens.interop());
21  const id = props.id ?? field.name;
22 
23  return (
24    <Field className='gap-2' data-invalid={fieldState.invalid}>
25      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
26      <InputGroup>
27        <InputGroupTextarea {...field} {...props} id={id} value={field.value ?? ''} aria-invalid={fieldState.invalid} />
28        {tooltip && (
29          <InputGroupAddon align='block-end' className='justify-end'>
30            <Tooltip>
31              <TooltipTrigger asChild>
32                <InputGroupButton aria-label='Info' size='icon-xs'>
33                  <InfoIcon />
34                </InputGroupButton>
35              </TooltipTrigger>
36              <TooltipContent>{tooltip}</TooltipContent>
37            </Tooltip>
38          </InputGroupAddon>
39        )}
40      </InputGroup>
41      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
42      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
43    </Field>
44  );
45}