feat(organizations): add theming/story for Mantine TextInput TASK-1378

[RuthShryock]

🗒️ Checklist

1. run linter locally
2. update all related docs (API, README, inline, etc.), if any
3. draft PR with a title <type>(<scope>)<!>: <title> TASK-1234
4. tag PR: at least frontend or backend unless it's global
5. fill in the template below and delete template comments
6. review thyself: read the diff and repro the preview as written
7. open PR & confirm that CI passes
8. request reviewers, if needed
9. delete this section before merging

📣 Summary

Add theming and storybook for custom TextInput component.

💭 Notes

• Mantine has different input types and this implementation is just for the TextInput. So, in the storybook, there is no option to change the type of input.
• This pr just includes the basic functionalities for a TextInput to work for in our organization task so more work will be needed in the future.
• The Icon color styling in the TextInput was tricky and the simplest implementation was to use our custom IconColors so the icon color does not match perfectly to the TextBox icon color.

👀 Preview steps

• Check out storybook and make sure that the TextInput is as similar to our TextBox component in terms of visuals and functionalities.
• If you want to test a TextInput in action, edit the Project Name TextBox to be a TextInput in projectSettings.es6:

import {TextInput} from 'js/components/common/TextInput';

  {/* Project Name */}
  <div className={styles.input}>
      <TextInput
          value={this.state.fields.name}
          onChange={this.onNameChange.bind(this)}
          error={this.hasFieldError('name') ? t('Please enter a title for your project!') : false}
          label={addRequiredToLabel(this.getNameInputLabel(this.state.fields.name))}
          placeholder={t('Enter title of project here')}
          data-cy='title'
      />
  </div>
          

verify that...

• the project name is correctly updated when changed
• errors are displayed for an empty input