rhf-input-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, InputGroupInput } from '@/components/ui/input-group';
9import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
10 
11export interface InputFieldProps extends Omit<React.ComponentProps<typeof InputGroupInput>, 'value' | 'onChange'> {
12  lens: Lens<string>;
13  label?: string;
14  description?: string;
15  tooltip?: React.ReactNode;
16}
17 
18export function InputField({ lens, label, description, tooltip, ...props }: InputFieldProps) {
19  const { field, fieldState } = useController(lens.interop());
20 
21  return (
22    <Field className='gap-2' data-invalid={fieldState.invalid}>
23      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
24      <InputGroup>
25        <InputGroupInput
26          {...field}
27          {...props}
28          id={field.name}
29          value={field.value ?? ''}
30          aria-invalid={fieldState.invalid}
31        />
32        {tooltip && (
33          <InputGroupAddon align='inline-end'>
34            <Tooltip>
35              <TooltipTrigger asChild>
36                <InputGroupButton aria-label='Info' size='icon-xs'>
37                  <InfoIcon />
38                </InputGroupButton>
39              </TooltipTrigger>
40              <TooltipContent>{tooltip}</TooltipContent>
41            </Tooltip>
42          </InputGroupAddon>
43        )}
44      </InputGroup>
45      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
46      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
47    </Field>
48  );
49}