Cohort component library

A component library built in a day!

Building our components - morning

Each team will have one component to build. You must think about what your component should do and what props it will need. Decide what options to include, e.g. sizes, colors, other styles and modes. Think about what options you've seen in other UI component libraries for inspiration. Use Storybook for development and to document how your component can be used. Write tests to show your component works.

You'll be working with this repo directly rather than in classroom links, so please follow the instructions below carefully to avoid any conflicts with other teams!

Components and teams

• Button (Example)
• Dropdown menu (Team 1)
• Checkbox (Team 2)
• Toggle switch (Team 3)
• Time picker (Team 4)
• Range input (Team 5)
• Number input (Team 6)
• Star rating (Team 7)
• Page header (Team 8)
• Avatar image (Team 9)
• List (Team 10)

Instructions

• In the issues tab, find the issue that corresponds to your component. Assign each member of your team to this issue.

• Branch off from this repo. Name your branch your component's name.

• Once on your branch, make a new folder in src/components for your component. Only add/change files inside of this folder.

• Design your component. Think about what props it should take and what options the user should have.

• Use Storybook for local development and documentation.

• Write tests to show that your component works.

• Once you're finished, create a pull request against the main branch. If time, invite another team to review your code.

Using our components - afternoon

To view the components in Storybook, run npm run storybook.

To run the tests, run npm test.

Once the library is published, install it into another project using npm i soc-bc7-components.

Then you should be able to consume components by importing.

import { Button } from "soc-bc7-components";