DevChallenges - Button / Input Components Challenge

Solution for a challenge from Devchallenges.io.

Live App | Live Storybook | Button Challenge | Input Challenge

Table of Contents

• Overview
  • Built With
• Features
• Thoughts
• Useful Resources

Overview

---

---

Built With

• React
• Storybook
• Styled Components
• Material Icons

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories. The challenge was to build an application to complete the given user stories. Note: The design documents may be incomplete, as you need to find an archived version of the challenges as all legacy challenges have had their documentation removed from DevChallenges.

Thoughts

• Storybook requires a lot more prep than you would think. Having so many properties, I thought Styled Components offered the best solution.
• Using classnames package would have been an alternative solution.
• I wanted to do both challenges in one repo so I didn't have to re-download Create React App and dependencies again.
• Should I prevent startIcon and endIcon from both being set at the same time?
• Offering multiple image choices seems like a headache - having to import them, etc. vs. using an image from a CDN where you would just need a URL.
• Adding "or null" to the value prop allows you to type into the inputs - without setting up state, controlling the value prop, and adding an onChange handler. This causes a warning in the console. Using an empty string prevents typing in the input.
• Best to use outline when styling focus events.
• Best to use background-image to set icon inside an input field. I used absolute positioning for the start icon and background image for the end icon. Can't use background image for both. I would have to duplicate input and use styled(StyledInput) to overwrite the background image properties. Then use ternary to display either one imported into Input.jsx.
• With background-image, you don't have to worry that the icon will not be in the correct spot when scaling the input's height.
• autoFocus doesn't always work. With multiple autoFocus-ed buttons, usually only the last button has focus.
• Adding a ref didn't help because the app is a functional component. ForwardRef is a possible solution.
• Adding more cases to my background switch is probably an easier solution to autofocus difficulties.
• Possibly didn't need a separate switch statement for hover-background and hover-color.
• There are problems with the switch statements, and this is an area where refactoring may be needed.
• I had some issues with defaultProps not being applied. You always need to remember to pass props.
• It would have been easier to set helperText's default value to be an empty string.
• I added a function to the sidepanel that is called on any click to switch the display between the button and input components. I did this to avoid adding React Router.
• You could add another border vs. using autoFocus to ensure the blue border stays permanently on last input on the top row.
• There is a change handler warning and the value is null in the inputs challenge.
• I didn't make the app mobile responsive. Also, the full-width input does not take into the sidepanel's width, so there is overflow.
• There is a new Storybook competitor in Ladle.

Useful Resources

• YouTube - Storybook Tutorial
• Storybook - Images and Assets in Storybook
• W3 Schools - cursor options
• Stack Overflow - style disabled button
• Blog - react disable button
• Stack Overflow - styled components ternary
• Stack Overflow - box shadow
• Stack Overflow - placeholder padding
• Blog - controlled components storybook
• Packt - storybook actions
• Blog - hover, focus, active states
• Stack Overflow - inset icon in the end of input
• Github - styled components and background-images
• Medium - styled components advanced techniques
• Stack Overflow - textareas
• Stack Overflow - convert string to jsx
• Blog - build and deploy from storybook
• Blog - autofocus
• Blog - autofocus
• HashNode - sidebar tutorial
• Github - storybook controls changed value not reflected because of storybook defaults
• Stack Overflow - react tooltip
• YouTube - styled components navbar