Create a components library

We will put our components in a folder and return the appropriate input by calling the default function in ``ìndex.js. For example we will name our folder components/felwine-library```.

index.js

import input from './input'
import inputPassword from './inputPassword'
import submit from './submit'

export default (props) => {
    const { type } = props
    switch (type) {
        case 'input':
            return input                
        case 'inputPassword':
            return inputPassword                
        case 'submit':
            return submit                
        default:
            return null;
    }
}

Create input components

An input component is standardized, it follows the input interface api](/documentation/docs/reference/input)

Text input: */input/index.js

import { useCallback, useEffect, useState, } from 'react'
import TextField from '@mui/material/TextField'
import { useDebouncedCallback } from 'use-debounce'

export default (props) => {
  const {
    value,
    error,
    disabled,
    onValueChanged,
    item: {
      layoutMode = 'form',
      label,
      params = {},
      id }
  } = props

  const {
    placeholder,
    inputDelay = 1000,
    className = '',
    multiline = true,
    inputPropsStyle = {},
    inputLabelPropsStyle = {},
    variant = "outlined" } = params

  const [innerValue, setInnerValue] = useState(value ? value : '')

  useEffect(() => {
    setInnerValue(value ? value : '')
  }, [value])

  const debouncedHandleOnChange = useDebouncedCallback(
    (event) => {
      const value = event.target.value
      onValueChanged(value)
      console.log('textArea debouncedHandleOnChange', value)
    },
    inputDelay
  )

  const handleOnChange = useCallback((event) => {
    event.persist()
    const newValue = event.target.value
    setInnerValue(newValue)
    debouncedHandleOnChange(event)
    console.log('textArea handleOnChange', value)
  }, [])

  const layoutModeProps = () => {
    switch (layoutMode) {
      default:
      case 'form': {
        return {

        }
      }
      case 'inline': {
        return {
          variant: "standard",
        }
      }
    }
  }

  const layoutModeClassName = () => {
    switch (layoutMode) {
      default:
      case 'form': {
        return `
          `
      }
      case 'inline': {
        return `                    
            `
      }
    }
  }

  const onBlur = () => {
    console.log('onblur')
  }

  return <TextField
    variant={variant}
    fullWidth
    disabled={props.disabled}
    inputProps={{
      style: {
        ...inputPropsStyle,
      }
    }}
    InputLabelProps={{ style: inputLabelPropsStyle }}
    value={innerValue}
    multiline={multiline}
    className={`transition-all ease-in-out duration-1000 ${error ? 'bg-red-50' : ''}
    ${className}    
    ${layoutModeClassName()}`}
    onBlur={onBlur}
    onChange={handleOnChange}
    {...layoutModeProps()}
    {...params}
  />
}