Drawer Form

    import React from "react"
    import Label from "components/ui/Form/Label"
    import Input from "components/ui/Form/Input"
    import Drawer from "components/ui/Drawer"

    const [isOpen, setIsOpen] = useState(false)

    function onOpen() { setIsOpen(true) }
    function onClose() { setIsOpen(false) }

    function reducer(state, action) {
      const updatedValues = state
      const currentErrors = Object.assign({}, updatedValues.errors)
  
      if ('username' in action) {
        updatedValues.username = action.username
        updatedValues.errors.username = isBlankString(updatedValues.username)
      }
      
      if ('firstName' in action) {
        updatedValues.firstName = action.firstName
        updatedValues.errors.firstName = isBlankString(updatedValues.firstName)
      }
  
      if ('lastName' in action) {
        updatedValues.lastName = action.lastName
        updatedValues.errors.lastName = isBlankString(updatedValues.lastName)
      }
  
      const needRendering = (
        currentErrors.username !== updatedValues.errors.username ||
        currentErrors.firstName !== updatedValues.errors.firstName ||
        currentErrors.lastName !== updatedValues.errors.lastName
      )
  
      if (!!action.render || needRendering) { setCurrentState(1 - currentState) }
  
      return updatedValues
    }
  
  
    const [currentState, setCurrentState] = useState(0)
    const [values, dispatch] = useReducer(reducer, { username: '', firstName: '', lastName: '', errors: {}, updated: {} })
  
  
    async function validate() {
      await dispatch({
        username: values.username || '',
        firstName: values.firstName || '',
        lastName: values.lastName || '',
        render: true
      })
    }
  
    async function handleSubmit() {
      await validate()
  
      const isValid = !values.errors.username && ! values.errors.firstName && ! values.errors.lastName
  
      if (!!values && !!isValid) {
        const fields = {
          username: values.username,
          firstName: values.firstName,
          lastName: values.lastName,
        }
        console.log(fields)
      }
    }

    <Drawer
      open={isOpen}
      onClose={onClose}
      level="base" //base / middle / top
      title={"User Information"}
      footer={
        <div className="flex items-center justify-end">
          <button
            className="inline-flex justify-center rounded-md border border-transparent px-4 py-2 bg-primary-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition ease-in-out duration-150 sm:text-sm sm:leading-5"
            onClick={handleSubmit}
          >
            Save
          </button>
        </div>
      }
    >
      <div className="grid grid-cols-2 gap-4">
        <div className="col-span-2">
          <Label htmlFor="username">Username</Label>
          <Input
            listening={true}
            name="username"
            type="text"
            className="rounded"
            error={values.errors.username}
            onChange={value => dispatch({ username: value })}
          />
        </div>
        <div className="col-span-2">
          <Label htmlFor="firstName">First Name</Label>
          <Input
            listening={true}
            name="firstName"
            type="text"
            className="rounded"
            error={values.errors.firstName}
            onChange={value => dispatch({ firstName: value })}
          />
        </div>
        <div className="col-span-2">
          <Label htmlFor="lastName">Last Name</Label>
          <Input
            listening={true}
            name="lastName"
            type="text"
            className="rounded"
            error={values.errors.lastName}
            onChange={value => dispatch({ lastName: value })}
          />
        </div>
      </div>
    </Drawer>