search

vantezzen / auto-form

🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
https://vantezzen.github.io/auto-form/
MIT License
2.76k stars 99 forks source link

Added Combobox #23

Open iamsadat opened 1 year ago

iamsadat commented 1 year ago

21

Please let me know if there are any changes required

vantezzen commented 1 year ago

It looks like the combobox wasn't integrated into AutoForm? You just added a combobox for a string of users and replaced the API example with it?

iamsadat commented 1 year ago

This is not the final draft and I just wanted to make sure if the UI and model is okay for the projects. I still have to make amends and integrate the api results in the dropdown menu. p.s. I'm actually new to Open Source and I'm still learning how things work so apologies if I'm doing things wrong

vantezzen commented 1 year ago

No problem, let me know if you need anything! Generally, you'll first need to create a "AutoFormCombobox" component in auto-form.tsx - you can probably copy the existing "AutoFormEnum" and edit it to use the combobox instead. For this, you'll probably need to copy the contents of your current "combobox.tsx" component and update it to be more generic (like "Select..." instead of "Select user...") because auto-form should be usable with all data.

Finally, you'll need to add your new AutoFormCombobox component to the "INPUT_COMPONENTS" object (https://github.com/vantezzen/auto-form/blob/e02d0de88b19a2edb60cfac2e27b72e15739eb5a/src/components/ui/auto-form.tsx#L463C7-L463C23) which is where the components are registered by adding combobox: AutoFormCombobox.

You should now be able to set fieldType: "combobox" for an enum in the fieldConfig. Its probably best if you create a new example component ideas of editing the Api example, just for the combobox.

I'll mark this PR as "draft" while you're working on it, just for overview.

iamsadat commented 1 year ago

Thank you so much for the help! @vantezzen I have made the following changes:

  1. Integrated the API with the combobox
  2. Added combobox to the INPUT_COMPONENTS
  3. Changed ZodEnum: "combobox" in DEFAULT_ZOD_HANDLERS (I'm guessing this might not be correct with its working for me)

Please let me know if any changes are required and thanks again for the help!!

nikolaischunk commented 7 months ago

looks promising! would love to see some updates! @iamsadat