Shadcn UI with React Hook Form | Personal Finance Dashboard App

hello today we're going to build a basic form using Chad CN forms and react hook forms this form will be used to create new bank accounts in our finance dashboard application let's jump into it okay so let's start building this bank accounts page to start off we will need a calendar component to give this page like a basic layout so let's go ahead and open chaden components card copy the installation command and in the terminal we can run this all right let's take a look the card component was installed so now we can copy these basic usage example components and we can open the bank accounts page itself so let's import those basic components okay so we can start from wrapping everything with a card component then we will need a card header in which we will have a card title component where we can say bank accounts all right everything is updating live we can see the progress after the header we will need a card content which we will fill up a little bit later so just for now let's say simple to do and in the header itself we also want to include the add button where the user can click that button then the dialogue will open there will be a bank accounts form where you will fill account number balance and will'll be able to click create or submit or whatever we will call it so let's do that div let's say class name flex and justify between and couple more divs so one will be empty just so that the button would be aligned to the right side and the other one will hold our bank accounts form button and the whole like dialogue logic so let's say div class name flex no WP and now we can import our bank accounts form component which we will be creating in a second bank accounts form all right we won't need card footer or card description as of right now so remove that and fix the sment issues so now we can create the bank accounts form component itself let's create a new component which we will call bank accounts form let's say const bank accounts form no props for now return for now just a simple span with some random text so that we would get rid of this error so let's fix the slint issues let's go back and import this new newly created component add import from bank accounts form all right so our bank accounts for form component is being displayed already so now we need to install some more chat CN UI components and we will start with the dialogue so dialogue so basically the idea is that we will have an add button or add new upon clicking the dialogue will be shown and that there the user can like enter the bank accounts number and the balance and save the change or add a new bank account so let's install this component all right the dialogue was installed let's double check the UI components directory dialogue is here so we'll say we want a dialogue and we import that from our components UI dialog this one we can remove we want a dialog trigger which basically will be our button so inside the dialogue trigger we need the button itself so it will be button let's give the size of small and the title will be add so let's import the button again from UI components format the code after the trigger we need some dialogue content itself so dialogue content let's import it again let's give some size class names now we can say dialog header and dialogue title so the dialogue title will be something like create new bank account and let's import the component after the dialog header we will be implementing our form but for now let's add some random text to just look how it looks right now okay so let's format the code again and let's double check so the add button appeared as you can see and if I I would click it we can see the dialogue title create new bank account and this random text oh and also just before uh jumping into the form creation itself let's just rename this component from bank accounts form to bank account form since we will be creating just a single bank account and not like many of them at once so we'll rename the file and also let's update the import bank account form and bank account form it should be good to go all right everything is working so we can close this one and also when working with the dialoges or the models I usually like to set them to be open by default so that it would be easier uh to implement them and you would not need to like click the button every time you you want to see how it looks so let's just say dialog open is true so it should open by itself yeah and now we can like add whatever updates we want and we don't need to open the dialogue again and again so now it's time to create a form so let's head over to the Chad CN documentation and move from there they have a lot of like description how the forms can be difficult to implement Etc and let's just go straight to the installation okay so let's install the chat CN form all right form component was installed let's double check yep we have a form and a label nice so we can close this one and let's see what they have create a form schema so they are using the Zod um library for uh schema validation Zod actually is very powerful tool so I'm very glad that chaden is recommending using it there are also other Alternatives like Yap but I really like the Zod so let's go ahead and create our form schema let's do it right here so const form schema equals the object and let's import the Z from Zod so it will be an object basically in the form schema now what we have to do is Define all of our field names and provide like the types from for them and some validation rules so we will have an account number account number which will be string let's say that we want the minimum length for the account number to be at least one symol of course it should be bigger but I don't know internationally what is the minimum account number length so let's just say one now we can also provide um validation message in case like this validation is failing so we can say new object message which would say account number is empty also we would like to limit the max length of the account number so for the max let's say I don't know maybe 50 same again let's give error message in case the user entered a lot more characters so let's say something like account number should be shorter than 50 characters all right so for the starter account number we'll have the Min and max length validation we will add some more validations a bit later but for now it will be good the next field in our form will be balance and the balance again will be a string you could ask why string why not a number but I will show you why in a second another way how we can add a validation message for Zod we can do the same thing in the string parameters we can say that the balance should be required and if it's empty let's display that balance is empty and for the balance we will also add some more validations for now it will be good just to have a basic validation let's format the code so we do have now our form schema will which will be used to validate the user's input all right let's take a look at the step two use the use form Hook from react hook form to create a form now let's double check Maybe by any chance the Chad CN CI installed the react hook form automatically and yes it did so we don't need to do anything about it so we need to use this hook now const form equals use form which we will import from reactor hook form now we can provide the types for the form using the Zod Library you can read more about Zod in the Zod documentation but basically we can say that infer the types from the form schema which we declared here so it will be Z infer type of form schema and now we also need to provide some more things so it will be resolver which basically tells the react hook form to use the Zod resolver for validation so Zod the resolver and the parameter is form schema Zod resolver should be imported from Hook form resolvers Zod let's do that then we can declare the default values for our form Fields so default values and object and account number will be an empty string and for the balance I will leave it empty the second step is to define a submit Handler basically a method which will be called on the form submit so let's say const on submit which will be a type of submit Handler again let's infer the types from the schema so Z infirm type of form schema the parameter will be form values with the type inferred form scha and for now let's just only console log the values so we could see that everything is working one more thing by default react hook form does the validations only on submit but I would like to show the error messages for the user on change like when you are typing some account number and if the length is bigger than needed show the message right away so to change that we can give a mode and the possible values are like on blur on change on submit untouched or all so the default is on submit but I would like to set it to on change on change so now it's time to build the form itself let's grab the suggested Imports which is like button form form control description Etc so let's copy them and paste it here oh the button we already have imported let's format the code all right cannot find module input so we also need to install that one so let's just quickly open up the input documentation and grab the npm command install it all right now it should be resolved yes it is so let's go back to the form example and let's implement the form itself so let's open our application so that we could see the progress and now instead of this random text let's say form and let's spread all the form props now inside of that we need a HTML form itself let's also give some spacing so Space 4 and now we can start creating our form input Fields so it will be a form field the name will be account number so this name property must match the ones we have defined in the form schema before so the first input field will be account number let's switch the places Also let's pass a control prop from the form object since the form field and all like the form components from chaden are wrappers for react hook form so it's a little bit easier to like create new Fields cuz if you would open a react hook form documentation and if I would search for controlled inputs you can see that the code is very similar but they are using like um different components from react hook form itself so this form field is wrapping react hook form components therefore we still need to provide form control and other props so for the render part we need to provide a function which will receive a field prop and we need to return the GSX component so let's say form item form label so form label will be account number and now we can say form control so it will be for the input itself as you can see the label already appeared and disappeared so inside the control we will we want to add an input with a place holder let's say semi- random string and let's spread the field for the props our input has appeared so this field render prop holds things like field dot name on change function value reference disabled on blur and other things so to avoid naming all of them and passing as prop we just spread the object like that you can read more about that in the react hook form documentation about controlled inputs all right so we have our account number input field now we also need a balance so let's copy and paste this one so the name this time will be balance label again will be balance and we also don't need a placeholder in here and of course we could also say like the type for this input is number now if we would look into our current form like I can enter account number and in the balance input field I cannot enter as you see any letters I can enter any numbers or like plus minus signs I can do like Dot and some more numbers I can do a comma no I cannot do a comma basically I can enter any type of numbers but what I would like to do I would like to have a dedicated special custom component for uh currency inputs so let's just do that I will open up our components directory and UI and in here I will create a new component named currency currency input all right let's say const currency input no props for now and return and Export default currency input now I won't be creating this component from the very scratch I will use small Library called R currency input field the main reason is that this Library already has a bunch of validations and features baked in and it's quite um quite small so it allows abbreviations for example you can enter 1K and get 1,000 it allows prefixes and suffixes it automatically inserts group separators and similar um features so let's go ahead and install this Library so npm install react currency input Field open a terminal all right so let's close that one and now we can say return currency input field let's import it from react currency input field so I imported the component itself which is exported as default and the props so for the props we will accept the value and I can Define the type currency input props and on value change and that's basically all we going to need from these props so right now we can provide some more things in here let's say value equals value let's say allow decimal decimal separator will be will be a comma group separator will be a space decimals limit will be two uh as for max length we can say I don't know let's say 15 and and on value change again on value change so we can even like group them together not that it changes anything but still and one more thing we need is it has a method which is called transform row value so here we will provide a function which will receive a row value and we want to return a value string and replace dots with commas that is required basically if the user is entering either comma or um dot in either case the result will be always with the comma all right so let's format code so now instead of this simple input field let's add our newly created component currency input and import from the components and we need to provide a value which will be value and also we need to provide on value change prop and this will be a function which we'll call onchange with the value so these two things we can distruct from the field we can do like that and let's take a value and on change oh and as you can see our newly created component is looking a bit strange so we'll provide the class name and we will copy the input styles from the Chad CN component so just pick this styles from here copy every single one of them boops okay let's copy that close close class name paste and voila it's looking the exact same way as the regular chadan component okay so now I think we can add one more thing which is basically required in order to have a proper form and that is we need a submit button so that we can do in a dialogue footer and in here we can say button with a type of button also we can say that this button should be disabled if for example the form state is inval Val so form. form state is valid and negation in the front so it will be disabled if the form is invalid and lastly we need an onclick Handler so onclick we will call form dot handle submit and we will pass our previously created onsubmit function okay and the Ty title for the button let's say will be confirm and the button appeared as you can see it's disabled cu the balance is still empty so let's just try and refresh the whole page to start from scratch and now we can check whether or not our validation of the form is working so if you remember our validation is so that account number should be not empty it should have at least one symbol and less than 50 for the balance it simply needs to be not empty so let's try that out so any account number and any balance so 12 and the confirm button was enabled if I would delete the balance we would get error message balance is empty if I would enter again it will enable as as well and as you can see this component does really good stuff for example if I would enter one 0 it automatically adds a space as a group separator if I would try to press a dot it will automatically replace it with a comma it will only allow for me to enter two decimals at the end so that's basically why I chose to install this mini Library okay so let's for example say a th000 and let's say my test account number and now we will try to submit the form we have a console log there so let's open our Dev tools all right confirm and we get all the form values with the account number and the balance and again if the form is not valid we cannot submit so so far our form is getting in shape we already have our two needed input fields for account number and the balance the validation is working the unsubmit is working as well the next step what we can do is to actually close the dialogue when we confirm the form so in order to do that we need to save is open state in our react component so let's say const is dialogue open and set is dialogue open use state which will be a Boolean with a default value as false so in the submit function we can say set is dialog open false and for the dialogue itself the open prop should be using the state [Music] so is dialog open and also we can say on open change call our set is dialog open function this on open change function will be called in case for example user is clicking outside of the dialogue window okay so let's let try one more time account number some balance value confirm the dialogue was successfully closed nice but there is a small problem for example if I would choose to add one more bank account and would press add as you can see the old form values are still there to resolve that we can have a small use effect which should be called when never is dialog state has changed and inside of this use effect all we would need to do is form. reset which basically resets the form values so let's save and double check again all right so first try the form is new let's try sub to submit it confirm one more time the form is empty so that is fixed now we can add one more validation to our balance input field I would like to for the users to be able to input from minus 99999 to like plus 99999 so let's just do that you could say that oh all you need to do is provide Min and Max values the problem is that it's a string and our balance input numbers has a separator with a comma and not with the dot and in JavaScript there is a little bit of problem with that so for example if I would try to parse sorry if I would try to parse float with the 11. 11 as you can see the result is good but if I would say 11 comma 11 the result is only 11 so for that we need to do a little bit more work but the Zod library is very powerful so one way you can refine your validations is with the refine method so it will be a function which gets our value the value will be string so in here we can first convert our string to a proper JavaScript number and then check whether or not this number is within the range we need so we can add a couple helper functions in our number RS so the first one would be export const convert currency to number this function will accept an amount of type string and will return of course a number and in here we will say par float and replace the comma with the dot all right so this function will return us the proper converted number one more function we need is to check whether or not the number is within ranges so let's export one more function and call it is amount within range it will accept an amount of type number and now we can do the comparison so firstly let's define the constant for the max value we want so export con max value and let's say like that and then in this function we can check that our amount is between minus max value and plus max value so let's do that all right so this one will return a bulling and now we can use this these functions so in the the refine all we have to do is to return a booing if the string is correct so is amount within range this accepts only a number so firstly we need to convert currency to number and pass our value string so this will do a check and in case validation fails we can provide a custom message and we can say something like balance should be between minus max value and max value all right let's format the code okay so let's test this out so let's try to add some numbers and as you can see we get a proper error message and if I would like copy this value it's okay and if I would increase it we get a error message the same applies with a negative value thank you for watching hit that subscribe button if you like this video and in the next video we're going to finish this form and by finish I mean we will implement the backend part uh the apis the backend calls and we will actually save this bank account into the database so see you there

Channel: CodeWithOsvaldas

Views: 3,756

Keywords: next.js, react, fullstack application, fullstack, tailwind css, shadcn, shadcn ui, tailwind, react hook form, react form

Id: gp56AzznxRs

Length: 35min 29sec (2129 seconds)

Published: Thu Jan 25 2024