migrate from a two-object model to a key-value driven by a "new Map" data structure.

First of all, thank you very much for this repository. I really like it. I think it's one of the best I've seen for tackling the problem of generating forms quickly. I'd love to be a contributor. That's why I created this class because I'm the company's technology director and we use multiple component libraries. I'll be publishing this package on npm and I think you might want to add it to this repository so that you can make the library more apprehensive about the component library.

current form

import AutoFormCheckbox from "./fields/checkbox";
import AutoFormDate from "./fields/date";
import AutoFormEnum from "./fields/enum";
import AutoFormFile from "./fields/file";
import AutoFormInput from "./fields/input";
import AutoFormNumber from "./fields/number";
import AutoFormRadioGroup from "./fields/radio-group";
import AutoFormSwitch from "./fields/switch";
import AutoFormTextarea from "./fields/textarea";

export const INPUT_COMPONENTS = {
  checkbox: AutoFormCheckbox,
  date: AutoFormDate,
  select: AutoFormEnum,
  radio: AutoFormRadioGroup,
  switch: AutoFormSwitch,
  textarea: AutoFormTextarea,
  number: AutoFormNumber,
  file: AutoFormFile,
  fallback: AutoFormInput,
};

/**
 * Define handlers for specific Zod types.
 * You can expand this object to support more types.
 */
export const DEFAULT_ZOD_HANDLERS: {
  [key: string]: keyof typeof INPUT_COMPONENTS;
} = {
  ZodBoolean: "checkbox",
  ZodDate: "date",
  ZodEnum: "select",
  ZodNativeEnum: "select",
  ZodNumber: "number",
};

diagram:

graph TD;
    web(react or other web framework vue, svelt)-->Input_Map
    Input_Map-->shadcn/ui;
    Input_Map-->bootstrap;
    Input_Map-->shakraui;

How would the implementation be:

How to access the content: it is essentially a "Map" constructor so you can use all its methods but with the keys well typed so that the editor offers you suggestions, For now it only uses two different methods than "Map".
exists: it is different from ".has()" it receives a string and checks if it exists in the keys, if it exists it returns the same key that you inserted but typed as if it exists in the keys of the list, and if it does not exist it returns "fallback"

const inputType = INPUT_COMPONENTS.exists(zodBaseType);

const InputComponent =  INPUT_COMPONENTS.get(inputType);

extends: it receives a callback that gives you as a parameter the original instance of the class and allows you to return an object with new keys which extend the original list, InputCompMap accepts two types of parameters, the props-type that the components will accept (P) and a list of additional keys to the base list, each key must have a value in a React.FC
, in this way the props can be changed dynamically according to the component library and if the InputMap instance is exposed to the developer, he could add a custom component using an append method, so new components could be added without having to edit the current code of the repository, it happened to me that I add my custom components but when I reinstall auto-from to get the new functions my changes are deleted or I have to add it again to the old objects.

import { InputCompMap } from "../../custom/auto-form/utils";
import AutoFormCheckbox from "./fields/checkbox";
import AutoFormDate from "./fields/date";
import AutoFormEnum from "./fields/enum";
import AutoFormFile from "./fields/file";
import AutoFormInput from "./fields/input";
import AutoFormNumber from "./fields/number";
import AutoFormRadioGroup from "./fields/radio-group";
import AutoFormSwitch from "./fields/switch";
import AutoFormTextarea from "./fields/textarea";
import { AutoFormInputComponentProps } from "./types";

export const INPUT_COMPONENTS = new InputCompMap<
    AutoFormInputComponentProps,
    "gps"
>({
    checkbox: AutoFormCheckbox,
    date: AutoFormDate,
    select: AutoFormEnum,
    radio: AutoFormRadioGroup,
    switch: AutoFormSwitch,
    textarea: AutoFormTextarea,
    number: AutoFormNumber,
    file: AutoFormFile,
    gps: AutoFormInput,
    fallback: AutoFormInput,
}).extends((INPUT_COMPONENT) => ({
    ZodBoolean: INPUT_COMPONENT.get("checkbox")!,
    ZodDate: INPUT_COMPONENT.get("date")!,
    ZodEnum: INPUT_COMPONENT.get("select")!,
    ZodNativeEnum: INPUT_COMPONENT.get("select")!,
    ZodNumber: INPUT_COMPONENT.get("number")!,
}));

This way you can get the list of keys that exist in the component list

export type INPUT_COMPONENTS_KEYS = Parameters<
typeof INPUT_COMPONENTS.get
>["0"];

vantezzen / autoform

migrate from a two-object model to a key-value driven by a "new Map" data structure. #107