Apprentice Project: Create a new Input component

[bsbeeks]

Purpose

The main purpose of this project is to gauge your technical and problem solving abilities for acceptance into MX's apprenticeship program. We are looking for clean, discoverable code. We will be evaluating your solution using the following criteria:

• Does the component address all of the desired functionality
• Is the code organized and easy to follow
• Did you follow the outlined process
• How (if at all) did you go above and beyond...this isn't required, but something we'll look at

Please feel free to comment on this Issue with any question or clarification.

Process

• Fork the mx-react-components repo
• Build the component (Refer to CONTRIBUTING.md)
• Create a pull request against the mx-react-components repo master branch
• Once the PR is open we'll review it and get back to you

Design Requirements

Input designs usually vary from project to project. Because of this the component should have a bare but configurable design. That being said, if you'd like to provide an option on the component to use a predefined design you are more than welcome to.

Desired Functionality

The component should include at least the following criteria:

• Validation based on field type
• Prefix and suffix options (Example: the ability to add a static currency symbol)
• Hover and focus states
• Label option
• Responsive width. The component should fill the width of it's containing element.
• onChange handler. A way for parent elements to know when the value changes
• Placeholder option
• Default value option

Other Requirements

• Name it Input
• Use createClass instead of ES6 classes
• Exposed it for use inIndex.js
• Add an example to demo/app.js
• Utilize ES6 syntax and features where appropriate
• Utilize constants/Style where appropriate
• Provide a detailed explanation of the component in your pull request. See Add TypeAhead Component #17 for an example.

[pjtatlow]

Do you want the suffix to be fixed to the end of the input? Or would you rather it move toward the back as you type?

[bsbeeks]

@payhota your call 😄. I can see pros and cons to both approaches.