UI Components Library

Problem:

Currently our HTML and CSS consist of the followings:

• A custom bootstrap 3 minified stylesheet injected in the head.
• React-boostrap component library.
• Custom styles to re-write the bootstrap styles due to changes in design style guide.

As a result, we would need to remove a lot of the unused styles, overwrites, and find a better way to manage our components.

Solution:

We should create our own component library that uses Storybook (isolate the components and document them) and tailwindCSS (style each component) and make sure they meet the web accessibility requirements.

---

I would roughly break the project down into smaller tasks, and the list can be adjusted as we go:

• Setup Storybook - https://github.com/freeCodeCamp/freeCodeCamp/pull/41920
• Setup Tailwind CSS
  • Basic Tailwind config - https://github.com/freeCodeCamp/freeCodeCamp/pull/42153
  • Add color tokens to tailwind config (split to issue https://github.com/freeCodeCamp/freeCodeCamp/issues/42186 for further discussion) - https://github.com/freeCodeCamp/freeCodeCamp/pull/42388
  • Support dark mode #43616
• Setup React Testing Library and its ESLint plugins - https://github.com/freeCodeCamp/freeCodeCamp/pull/42221
• Setup TypeScript - #43541
• Setup Prettier & other ESLint rules - https://github.com/freeCodeCamp/freeCodeCamp/pull/42818
• Setup css linter for custom CSS - related https://github.com/freeCodeCamp/freeCodeCamp/issues/16445
• Package build and publication setup
  • Setup Bundler (rollup/webpack/parcel) - https://github.com/freeCodeCamp/freeCodeCamp/pull/42549
  • Setup Publication (not for now)
• Write a guide for component development - @huyenltnguyen
• Build the following components
  • Alert #43835
  • Button - @huyenltnguyen
  • Col
  • ControlLabel
  • DropdownButton (maybe consider using Headless UI’s Menu)
  • Form
  • FormControl
  • FormGroup
  • Grid
  • HelpBlock
  • Image
  • Media
  • MenuItem
  • Modal (maybe consider using Headless UI’s Dialog)
  • Panel
  • Row
  • Tab
  • TabPane
  • Tabs
  • Table
  • ToggleButton (maybe consider using Headless UI’s Switch)
  • ToggleButtonGroup
• Remove the ToggleButton in /components/helpers and replace it with the one above (? - I’m not sure, I haven’t looked at the code closely, but I guess maybe there is a reason to split them)
• Use npm-link to link the ui folder with /client
• Replace react-bootstrap components with our own, one component at a time
• Audit and clean up any unused CSS code
• Remove @freecodecamp/react-bootstrap as a dependency
• Remove the bootstrap stylesheet injection
• Remove all CSS from Learn

---

Lists were borrowed from @huyenltnguyen’s comment below.

[raisedadead]

Actually, melding all of these resources under the https://contribute.freecodecamp.org might be a good idea. It should be possible for us to host this something along these lines:

https://contribute.freecodecamp.org --> Contributing Home/Landing Page https://contribute.freecodecamp.org/translate --> Translations https://contribute.freecodecamp.org/design --> UI Design Style Guide (redirecting the current guide here) https://contribute.freecodecamp.org/design/storybook --> The storybook.

etc., you see the idea.

If you both agree, I will set up some configs (on our existing servers) to make this happen.

[Ismailtlem]

Hi guys I am interested in taking part in this effort, I’ve made a PR for the image component. Any feedback would be greatly appreciated