measuredco / puck

The visual editor for React
https://puckeditor.com
MIT License
5.28k stars 322 forks source link

onChange provided to override field types has incorrect type #626

Open princebansal opened 1 month ago

princebansal commented 1 month ago

Overview

When I try to override any fieldType, I get error on the line where onChange is called. Error: Argument of type 'string' is not assignable to parameter of type 'NumberField'. Type 'string' is not assignable to type '{ type: "number"; min?: number | undefined; max?: number | undefined; }'.ts(2345)

Example code snippet

        fieldTypes: {
          number: ({ onChange, field, id, name }) => (
            <div>
              <label
                className="block text-sm font-medium leading-6 text-gray-900"
                htmlFor={name}
              >
                {field.label}
              </label>
              <div className="mt-2">
                <input
                  aria-describedby="number-description"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  id={id}
                  type="number"
                  // eslint-disable-next-line react/jsx-sort-props
                  onChange={(e) => onChange(e.currentTarget.value)}
                />
              </div>
            </div>
          ),

Expectations

onChange should accept type that is the Value of the field, instead it accepts the FieldType.

Potential problematic source code

Overrides.ts

type FieldRenderFunctions = Omit<{
    [Type in Field["type"]]: React.FunctionComponent<FieldProps<Extract<Field, {
        type: Type;
    }>> & {
        children: ReactNode;
        name: string;
    }>;
}, "custom"> & {
    [key: string]: React.FunctionComponent<FieldProps<any> & {
        children: ReactNode;
        name: string;
    }>;
};