Feature - Input Component [Design]

[octaviocvargas]

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The Input component will be used like this:

import { useState } from 'react';
import { Input } from '@platzily-ui/components';
// import Input from '@platzily-ui/components/Input'; Can by called like this either.


export default function MyForm() {
    const [state, setState] = useState({
      name: ''    
    })

    const handleInputChange = (event) => setState({ name: event.target.value })

    return (
      <form>
        <Input
          value={state.name}
          onChange={handleInputChange}
        />
      </form>
    )
}

Requirements 🌈

The Input component will be used by the user to pass information in the UI.

The user will import the Input component and it will have to receive all available props for an input HTML element.

As the user could need to give the Input a ref, it must be done using React.forwardRef API.

The Input should have this states:

• Disabled
• Focus
• Active
• Hover

Motivation 🔦

An Input is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Input element.