UI Components Library

[ahmaxed]

Description:

We need a better way of managing our styles and components. In order to achieve that we should create our own light-weight component library that uses Storybook (isolate the components and document them) and tailwindCSS (style each component) and make sure it meets the web accessibility requirements.

Todo list:

Completed tasks

• • Setup Storybook - feat(tools): create ui-components package and setup Storybook #41920
• • Setup Tailwind CSS
• • Basic Tailwind config - feat(tools): setup TailwindCSS in ui-components #42153
• • Add color tokens to tailwind config (split to issue Add color tokens to tailwind config file #42186 for further discussion) - chore(tools): split color tokens to separate layers #42388
• • Support dark mode feat: add tailwind theme support #43616
• • Setup React Testing Library and its ESLint plugins - feat(tools): setup react testing library in ui-components #42221
• • Setup TypeScript - feat(typescript): Add typescript support for UI components library #43541
• • Setup Prettier & other ESLint rules - chore(eslint): use recommended configs for jsx-a11y #42818
• • Package build and publication setup
• • Setup Bundler (rollup/webpack/parcel) - feat: bundling for UI Components #42549
• • Setup Publication (not for now)
• • Write a guide for component development - @huyenltnguyen
• • Alert feat(tools): add Alert component #43835

• Setup css linter for custom CSS - related Creating freeCodeCamp's CSS Style guide #16445
• Write a guide for component development - docs: add development guide for ui-components #45488
• Version management best practices - @huyenltnguyen
• Build the following component
  • Alert feat(tools): add Alert component #43835
  • Button Implement Button component #45357
  • Col feat: add col component #51012
  • ControlLabel - Create ControlLabel Component #47155
  • DropdownButton (maybe consider using Headless UI's Menu) feat(ui-tools): add dropDown component #47043
  • Dropdown feat(ui-tools): add dropDown component #47043
  • Flash (low priority - see Add Flash component to the component library #45206)
  • Form @ahmadabdolsaheb
  • FormControl Creating Custom FormControl Component #45459
  • FormGroup Implemenet FormGroup Componenet #46747
  • Link (inline and full width) feat(ui-components): create Link component #46105
    • Ref feat(ui-components): add support for link to Button component #45671 (comment)
  • Grid feat(client): add bootstrap grid component as container component #49829
  • HelpBlock feat(tools): add helpblock component #45399
  • Image feat(tools): add image component #44590
  • Media Change the Media component to our news card component #49277
  • MenuItem feat(ui-tools): add dropDown component #47043
  • Modal feat: create modal component with radix-ui #51070
  • Panel feat(tools): add panel component #49398
  • Row feat(client): create row component #50989
  • Tab
  • TabPane feat(ui-components): implement Tabs components #47313
  • Tabs feat(ui-components): implement Tabs components #47313
  • Table @JordanMooree Implement Table component #47232
  • ToggleButton (maybe consider using Headless UI's Switch) feat(UI): implement ToggleButton component #48567
  • 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)
• Link ui component 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

Development steps

Refer to the Component Library documentation for research and development steps.

Notes

• After the above-mentioned components are released to production, the rest of the UI components will be added to the library and all CSS will be removed from the client directory.
• This issue is based on discussions in UI Components Library #41580
• Comments with lower priority are deleted regularly to reduce the communication overhead.

[masterX89]

Hi! I found these components like DropdownButton , Modal and ToggleButton are considered using Headless UI. So I wonder if Tabs, Tab and TabPane could also consider Headless UI's Tabs?
Can I try to work on these above components?

[ahmaxed]

@masterX89, we consider using headlessUI if the component is complex and using headless UI would speed up the implementation considerably.
Feel free to research a component that you are interested in and summarize your findings in a new issue. Then, we could discuss the implementation in more details.

[mriiad]

Hello @ahmadabdolsaheb, I would like to work on Panel & MenuItem please!

[ahmaxed]

Thanks for your interest @mriiad.
Please feel free to proceed with reading the issue and related documentation thoroughly and opening an issue with your research findings on the Panel component.

Let's hold of on the Menuitem since it is very close to what @shootermv is working on in #47043.

[lexyd]

@ahmadabdolsaheb Is there a design file like on Figma where the consistency of the UI components can be designed first.

I would like to contribute to it.

[ahmaxed]

@lexyd at this point we are focusing on replacing the existing customized react-bootstrap library.

Once that is done, we will audit our component library's design. We could consider having Figma files then, but it would be more work to keep them in-sync over time.

I will tag you if we decide to go down that route. Meanwhile, feel free to work on the remaining components if you are interested.

[rajgaur98]

Hi @ahmadabdolsaheb , I was researching for the ToggleButton component.
I have a question, do we need to implement the ToggleButton from components/helpers or the ToggleButton from @freecodecamp/react-bootstrap ?

[ahmaxed]

@rajgaur98, thanks for your interest. For the first iteration, it should replace the @freecodecamp/react-bootstrap and include the style overwrites.

[Sboonny]

<Tab> element doesn't exist in codebase, how should we implement it in the UI_Component?

[ahmaxed]

@Sboonny, there used to be one, but it has been removed recently. I removed it from the spec accordingly.

[Sboonny]

I have marked ToggleButtonGroup off, because it has been recently deleted from the codebase.

[fluxthedev]

If no one's started the modal component. I should be able to knock that out. My nickname was modalBoi when I was on a project at Victoria's Secret 😂

[kondapalli19]

I would like to work on this issue can you assign it to me?

[fluxthedev]

I would like to work on this issue can you assign it to me?

Go at it, work and life hit so I won't be able to git to it anytime soon.

[JordanMooree]

@kondapalli19 please refer to this comment - no assignment is necessary

[winniecwng]

Hi, there's a comment above that we don't need to be assigned to work on an issue but I just want to make sure that's the case; I'd like to work on the "Audit and clean up any unused CSS" but not sure if this issue will start until all styles are changed to tailwind

[Sboonny]

Hi, @winniecwng.

Ideally the CSS properties removal should occur with the swapping of the components, because if we need to revert the component PR, we won't need to revert multiple PRs, the PR that adds the component, and the PR that removes the CSS properties, which can lead to broken styles if the order of reverting is incorrect.

if you want to focus purely on cleaning unused CSS, feel free to open PR that clean unused CSS that you find unused, no need to wait, but waiting can make things easier for you.

[KSSaiTeja]

@ahmaxed i want to work on replacing react-bootstrap. could you please tell me more about this.

[ahmaxed]

@KSSaiTeja, thank you for our interest. The component creation phase has been completed. Now @Sboonny is focused on replacing the components and cleaning out the styles from the client. Feel free to start with replacing the Alert component.

[KSSaiTeja]

@ahmaxed thanks for the reply. could you please tell me what should i do in alert component

[KSSaiTeja]

@ahmaxed should i optimsize the alert component? if you don't mind.. as a beginner i didn't understand what should i do now. could you please tell me clearly what should i do now and mentioning the file you're saying..

Hope you will give reply soon..!

[Sboonny]

@KSSaiTeja, the workflow should be similar to the Button component PR, and it should be simpler.

• export the function in tools/ui-components/src/index.ts.
• build the development environment. so you can easily import the component through TypeScript.
• remove the Alert import from bootstrap.
• import the Alert from the library.
• swap the bsStyle prop with variant prop, TypeScript should warn you if you missed a prop.
• check if the classes related to .alert and .alert-success are needed, if they aren't needed, remove them.

Note:

There are classes in bootstrap.min.css but they shouldn't be changed, because the file will be deleted later when the components are merges.

[KSSaiTeja]

@Sboonny thanks for the reply. i will follow your instructions and implement them. And will raise a PR soon

[Eleazar23]

Hi, I would like to help with this task: Remove @freecodecamp/react-bootstrap as a dependency

[huyenltnguyen]

Hey @Eleazar23, thank you for the interest! We are still in the process of build new components, so the dependency replacement is currently still blocked. Please check back later, and in the meantime, we are looking for contributions with issues labelled with help wanted or first timers only.

[Sboonny]

Image and ToggleButton aren't used in the /learn, we can decide what to do with them later, for now I won't create a PR that add them to /learn.

There are good points mentioned by Huyen about the future of the library, that we can discuss and go into further details and how they can be implemented.

[ahmaxed]

The remaining tasks have been migrated to #52030