Typescript support for custom fieldConfig props

[michaelbrusegard]

trafficstars

I created a FieldWrapper, with a custom topDescription prop on the fieldConfig as seen below. But I get type errors that it does not exist on fieldConfig, and I was wondering how to fix it. I tried adding it to the fieldconfig type that is used in the fieldconfig function but that did not fix it, probably because it is imported from autoform/react. How can I fix this issue?

import type { FieldWrapperProps } from '@autoform/react';

import { Label } from '@/components/ui/Label';

const DISABLED_LABELS = ['boolean', 'date', 'object', 'array'];

const FieldWrapper: React.FC<FieldWrapperProps> = ({
  label,
  children,
  id,
  field,
}) => {
  const isDisabled = DISABLED_LABELS.includes(field.type);

  return (
    <div className='relative space-y-2'>
      {!isDisabled &&
        (field.fieldConfig?.topDescription ? (
          <div className='flex items-center justify-between'>
            <Label htmlFor={id}>
              {label}
              {field.required && <span className='text-destructive'> *</span>}
            </Label>
            {field.fieldConfig?.topDescription}
          </div>
        ) : (
          <Label htmlFor={id}>
            {label}
            {field.required && <span className='text-destructive'> *</span>}
          </Label>
        ))}
      {children}
      {field.fieldConfig?.description && (
        <p className='pt-2 text-[0.8rem] text-muted-foreground'>
          {field.fieldConfig.description}
        </p>
      )}
    </div>
  );
};

export { FieldWrapper };

[michaelbrusegard]

In other words I got it working for the fieldconfig function used in the schema with the below type, but not with the fieldwrapper type.

type FieldConfig<T, U> = BaseFieldConfig<T, U> & {
  topDescription?: React.ReactNode;
};

[vantezzen]

I'll add support for a customData attribute in the next release, like this:

import { buildZodFieldConfig } from "@autoform/react";
import { FieldTypes } from "./AutoForm";

export const fieldConfig = buildZodFieldConfig<
  FieldTypes,
  {
     isImportant?: boolean
  }
>();

const zodFormSchema = z.object({
  username: z
    .string()
    .superRefine(
      fieldConfig({
        customData: {
          isImportant: true,
        },
      })
    ),

[michaelbrusegard]

It did work to just add it to the default field props, but typescript is complaining. Also a random question, since you are using react-hook-form under the hood, is this something you want to move away from or do you want to use it? I think it is smart to use it

[vantezzen]

In the rewrite I wanted to remove the dependency on react-hook-form so it's currently not used. But I see now that it doesn't make sense to implement that functionality manually, so I will switch to using react-hook-form again in the next release!

[michaelbrusegard]

@vantezzen I think in general it is a bad idea to try to circumvent react-hook-form because it have been developed for a long time and is very mature (it would probably be hard to match its efficiency). Im glad you are incorporating it back in!

[michaelbrusegard]

How do I get this working now that I have updated to V2, v2.1 is not available on npm yet

[leomerida15]

I think this problem can be addressed with this issues #124

[vantezzen]

How do I get this working now that I have updated to V2, v2.1 is not available on npm yet

I think there was a problem generating the new version - it should now be live