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.
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.
- 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
- Install node modules
- 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
dist, but for this project static files are stored under
Our site is hosted here
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.
Martin Di Diego
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
We should probably give you some live examples of how to use these components.