Text Input Component

This is a text input component which was implemented in React Hooks.

Installation and Setup Instructions

Example:

Clone down this repository. You will need node and npm installed globally on your machine.

Installation:

npm install

To Start Server:

npm start

To Visit App:

localhost:3000

To Run Test Suite:

npm test

Storybook

To Start Storybook:

npm run storybook

To Visit Storybook:

localhost:6006

Unit Test Libraries

• React Testing Library
• Jest dom

External Libraries

• lodash/fp
• prop-types

Unit Coverage

• PASS src/component/FieldMessage/FieldMessage.test.jsx
• PASS src/component/Input/Input.test.jsx
• PASS src/App.test.js

Test Suites: 3 passed, 3 total

Tests: 12 passed, 12 total

Snapshots: 0 total

Time: 2.531s

Next Steps TODO

This is a very brief list of things that I would love to work (improvement) on given more time:

• Better solution for floating input label, but still sticking with Pure CSS. Not use empty placeholder by default
• Introduce TypeScript
• Make modules css maintenance better, extract out common styling.
• Introduce CSS-in-JS or styled component
• Improve the styling of micro-interactions. Coloring in this case.
• Any edge cases with bugs I haven't found out.

Authors

• Stanley Hsu

Have fun! Please feel free to contact me if you need any further information, I would love to discuss it.