Skip to content

stanleychh/text-input-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Create a text input component in React

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published