Challenge: Create a reusable input with all the states in the design and a page displaying all the states. You can work on the same project with other design system challenges. Use Front-end libraries like React or Vue. Don't look at the existing solution. Fulfill user stories below:
- User story: I can see error state
- User story: I can choose to disable input
- User story: I can choose to have helper text
- User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
- User story: I can have different input sizes
- User story: I can have different colors
- User story: I can choose to have input take the width of the parent
- User story: I can have multiline input like a textarea
- User story: When I hover or focus, I can see visual indicators
- User story: I can still access all input attributes
- User story (optional): Show input in a similar way like the design or use Storybook. Otherwise, showing the input in multiple states is enough
- React
- TypeScript
- Vite
- Sass
- clsx
- BEM
- @hrc/material-icons
- @hrc/toggle-theme
- @hrc/type-utils
- fontsource
- @material-design-icons/font
In this challenge I learned:
- Create a reusable and extensible input component
- Use Typescript discriminated unions for more restrictive types
To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:
# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges
# install all workspace dependencies
cd dev-challenges && pnpm install
# Run input-component in dev-mode
cd apps/input-component
pnpm run dev --open