Open Source Miami's Component Library

A React component library created so that we could standardize the design and behavior throughout all of our sites and products. The objective is not to make a full component library like Material, or Bootstrap. We are just planning to make whatever is needed to complete our projects, and accumulate all of the components over time.

Storybook

This project is utilizing a JavaScript Library called Storybook which is, "an open source tool for developing UI component in isolation for React, Vue, and Angular." This UI allows us to catalog all of our components and documentation in one place. Storybook runs alongside your app in development mode.

Building the UI Components first follows a Component-Driven Development methodology.

To start building components with Storybook, take a look at the documentation here

Getting Started - Local Development

If you have Node and Typescript installed on your system getting started should be fairly simple.

1. Clone or Fork the repo (Should you clone or fork the repo? we kind of talk about that in the Contributing section)

        git clone https://github.com/open-source-miami/component-library.git

2. Install node modules

        npm install

3. Run Projects locally

        npm run start

The script should open the local version of our component storybook in your default browser. If all is well you should see our storybook on http://localhost:6006/

If you need additional information about setting up your development environment take a look at our setup doc.

Deploying this project

The static version of the site is going to be deployed to Netlify. Netlify makes it incredibly easy to deploy just give it authorization to access the repo, and let it know how to build the static files, in our case:

        npm run build-storybook

Then you just tell it where the static files are going to be stored, with most projects it would be called build or dist, but for this project static files are stored under storybook-static.

See the status of our latest deployment:

Our site is hosted here

Contributing

For information on how you could help us build out these components, and improve the library take a look at the contributing doc.

If this is your first time contributing to an Open Source Project, maybe it would be a good idea to take a look at this short course by Kent C Dodds.

Contributors

We are going to try to follow the all-contributors specification.

We have a bot installed in all of our repos, to help us manage contributors list, for info on how to use it take a look at the docs here

Components

For a full list of components featured in this repo take a look at components doc, or better yet take a look at the Storybook online here

Examples

We should probably give you some live examples of how to use these components.