Chapter Ui Components

With freeCodeCamp component picking pace, Chakra-ui became obsolete. To adapt for the new library, we need to push the components we’re currently using into it.

For this, we use Storybook to document, test, and isolate the component, and tailwind CSS to style them.

Because this Chapter is in early stage, the research and development of the component isn’t as intense as freeCodeCamp. But it’s still a good idea to check the freeCodeCamp wiki to get better perspective.

Components must follow the web accessibility requirements

The components are:

• Modal (content - overlay - header - button - footer) MVP

---

• PageLayout This pagelayout is for research, we won’t change it, just the Component
• Box (BoxProps)
• Avatar
• Stack
• Grid (item - ItemProps) MVP

---

• Form
• Input
• Form (label - control - error) MVP
• Textarea

---

• Chapter Card
• Heading
• Center
• Text
• Color Mode (useColorModeValue)

---

• Event Card
• Flex MVP
• Spacer

---

to be optimized

• login/register
• Tag
• useBoolean
• UseDisclosureReturn
• Spinner
• useToast
• useDisclosure
• UseDisclosureReturn
• CircularProgress
• Link
• LinkButton
• Badge
• DataTable
• RadioGroup
• Radio
• Select
• LockIcon
• useConfirm
• ChakraProvider
• ConfirmContextProvider

---

• Exist in fcc library

• Image Fcc Image
• Button Fcc button

Development steps

Research

• Find component usage in the project and list all the props being used.
• Compare usage and props with Chakra documentation.
• Find out if a component has a child component and how they work in regard to the props.
• Find out which classes are applied by default.

Development

• Create an interface for the props.
• Convert default styles to tailwind classes.
• Assign classes based on prop.
• Avoid creating a .css file.
• Add children prop, if needed.

[ahmadabdolsaheb]

Just to clarify, we should go ahead with the current spec mentioned here: https://github.com/freeCodeCamp/freeCodeCamp/issues/44668 Once that is released, we will add the additional components that are specifically needed for chapter on the second sprint.

[huyenltnguyen]

Thanks @ojeytonwilliams and @Sboonny!

I’ll need to spin up Chapter and check the components listed here. But at the moment, layout components (Grid, Row, Col,…) mentioned in https://github.com/freeCodeCamp/freeCodeCamp/issues/44668 are on my plate. Do let my know if you need any components to be prioritized 🙂