Component Library

Project 5 in General Assembly SEI35. Given 1.5 class days and a weekend to work on it.

To see my components in Storybook, click here.

Technologies Used

CSS, Javascript, React, JSX, and Storybook

Approach Taken

Wrote out all componenets and potential CSS classes needed. Added more classes along the way.

Would have done differently/challenges

• When sketching out components, should have psuedo coded what each component might look like
• Conditionals and classes were hard to keep track of
• I copied over my Button directory and ran into formatting bugs from the same class showing up in 2 different CSS files.
• I tried a few different methods for conditional rendering, which makes the code hard to go back and edit.

Unsolved Problems

• Clean up formatting on text input with button
• Clean up Javascript/React code for readability

Authors

Mainly written by Sara Laffin. Help with CSS from my peers and various websites.

Requirements (Given by General Assembly)

You should build out a component library using React and Storybook. Your component library should be deployed tto GitHub Pages, Netlify, or Surge and published to the NPM Package registry.

Your component library should include all of the components in bouncer.xd mockqup from this Adobe XD mock-up folder.

Technical Requirements

Your project should meet the following requirements:

• Runs without errors
• Include the required components in the Adobe XD Mock-up
• Be deployed to GitHub Pages, Netlify, or Surge
• Be published to the NPM Package Registry
• Includes a README written in well formatted Markdown (hint: look up a README template)
• Shows a good commit history with frequent commits. We're looking for lots of small commits.

This project was created with Create React App. A component library was built out and deployed/visualized with Storybook.