Input refactoring. Split select, radio, textarea, text-input

[ivan-kleshnin]

Currently they are in one codebase and the code is contaminated with multiple if statements...
I think it's worth splitting onto two, three or more distinct components. react-bootstrap is, perhaps, the only one that merged them together. My anti-favorite is <Input type="select"/> :(

-- EDIT by @mtscout6 --

I originally wrote down these thoughts against #205, that issue has been resolved, but these notes apply better here.

I think we should extract smaller components, where some are not publicly exposed.

We could add these components publicly:

• RadioGroup - Addressed in [added] RadioButton and RadioGroup #962
• RadioButton - Addressed in [added] RadioButton and RadioGroup #962
• CheckboxGroup
• Checkbox
• TextArea
• TextInput - With with type prop to support password, email, etc.
• FileInput - This one doesn't even work with our current implementation, but
  we should figure this one out at some point.
• Select
• Static - Addressed in PR Static FormControl Component #674
• Submit - Addressed in PR Splitting Button, Reset, and Submit from Input #626

@ivan-kleshnin Correct me if I missed one.

The public components would make use of these private components:

• FormGroup - Generic form-group and validation wrapper - Completed in Make Input form group rendering optional? #205
• InputGroup - Generic label, help text, and addon wrapper

Each control than can should implement a getValue() function.

Since checkboxes do not correlate with each other the way radios do with the name property, I'm thinking they'd be different group types. This gets especially difficult when figuring out how to implement a getValue() function for the two different groups.

Example form when all is said and done:

class MyForm extends React.Component {
  render() {
    return (
      <form>
        {/* type prop defaults to 'text' */}
        <Input label='Text' placeholder='Enter text' />
        <Input type='email' label='Email' placeholder='Enter email' />
        <TextArea label='Text Area' placeholder='textarea' />
        {/* inline prop optional */}
        <CheckboxGroup inline>
          <Checkbox label='Package 1' checked />
          <Checkbox label='Package 2' />
          <Checkbox label='Package 3' checked readonly />
        </CheckboxGroup>
        {/* inline prop optional */}
        <RadioGroup name='radio-name' checked='option1' inline>
          <Radio label='Option 1' value='option1' />
          <Radio label='Option 2' value='option2' />
          <Radio label='Option 3' value='option3' />
        </RadioGroup>
        {/* multiple prop optional */}
        <Select label='Select' placeholder='select' multiple>
          <option value='select'>select</option>
          <option value='other'>...</option>
        </Select>
        <Static label='Static Text'>Static value</Static>
        <Submit>Submit button</Submit>
      </form>
    );
  }
}

I know this introduces a lot of work and really isn't a quick solution, but I feel that something like this would allow the flexibility that everyone is looking for, and significantly simplify what is now a very large component.

[mtscout6]

👍

[mtscout6]

EDIT Moved this comment to issue description in edit clause

[ivan-kleshnin]

1. What is Static?

2. My wish would be to have the same API for interchangeable elements:
   RadioGroup <=> Select
CheckboxGroup <=> MultiSelect