Contribution Guide

What do I need to know to help?

If you are looking to help to with a code contribution our project uses:

• React
• Styled Components
• Storybook
• Jest

If you don't feel ready to make a code contribution yet, no problem! You can also check out the documentation issues highlighted with a documentation label or are welcome to make suggestions on the new design issues label we have created.

If you are interested in making a code contribution and would like to learn more about the technologies that we use, check out the list below.

• React

We use React as the backbone for the project. Each component is encapsulated with it's own Storybook .mdx file and .test.js Jest test as best practice. We will still accept PR submissions without tests. All variants of a component should be kept within the same file and then later exported in src/index.js to be made accessible to the user when published to https://www.npmjs.com/ and later downloaded as a package.

A good example to see how this works in practice is to look at the Check.js component located at src/components/forms/Check.js.

Official Docs: https://reactjs.org/docs/getting-started.html

• Styled Components

SC is used in lieu of other tools like SASS or CSS as it provides a number of benefits to a component library. The tool uses CSS-in-JS and template literals to style html elements. For further information, take a look at the docs and some of the other components to see how this is done in practice.

Official Docs: https://styled-components.com/

• Jest

If you're not familiar with testing with Jest, then don't worry. We're still happy to accept any contributions you are able to make. If you are able to use Jest, then including test cases with your PR submissions would be fantastic!

Official Docs: https://jestjs.io/

• Storybook

We use Storybook as a style guide and a tool to produce online technical documentation for the library. Again, we're happy to accept PR requests that don't include a Storybook .mdx file for the component but if you are comfortable creating one then that would be fantastic. You can take a look at the other components to see how it's done and the links below. A nice simple example to start with would be the Button.js component.

Official Docs: https://storybook.js.org/

How to update MDX stories for new components: https://storybook.js.org/docs/react/writing-docs/mdx

Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown!

1. Find an issue that you are interested in addressing or a feature that you would like to add.
2. Fork the repository associated with the issue to your local GitHub organization. This means that you will have a copy of the repository under your-GitHub-username/repository-name.
3. Clone the repository to your local machine using git clone https://github.com/github-username/repository-name.git.
4. Create a new branch for your fix using git checkout -b branch-name-here.
5. Make the appropriate changes for the issue you are trying to address or the feature that you want to add.
6. Use git add insert-paths-of-changed-files-here to add the file contents of the changed files to the "snapshot" git uses to manage the state of the project, also known as the index.
7. Use git commit -m "Insert a short message of the changes made here" to store the contents of the index with a descriptive message.
8. Push the changes to the remote repository using git push origin branch-name-here.
9. Submit a pull request to the upstream repository.
10. Title the pull request with a short description of the changes made and the issue or bug number associated with your change. For example, you can title an issue like so "Added more log outputting to resolve #4352".
11. In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's OK if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it!
12. Wait for the pull request to be reviewed by a maintainer. We'll try to be as fast as possible but this can take up to a few days depending on availability.
13. Make changes to the pull request if the reviewing maintainer recommends them.
14. Celebrate your success after your pull request is merged!

How to work with the project locally on your machine

After you have forked and cloned the project onto your machine you can run the following to start getting the project to run on your machine.

npm start This will start the create-react-app in your browser at port:3000. On a Windows OS that will be http://localhost:3000/. Nothing will currently appear as the project hasn't been built like this but you can use it as a sandbox environment while you build your components.

npm run storybook This is how most development has been done and will enable you to not only test your components but also test Storybook documentation and prop type information too. It's up to you how you wish to build though.

Where can I go for help?

If you need help, you can ask questions on the issue itself or DM me on Twitter at https://twitter.com/danielpnorris.

What does the Code of Conduct mean for me?

Our Code of Conduct means that you are responsible for treating everyone on the project with respect and courtesy regardless of their identity. If you are the victim of any inappropriate behavior or comments as described in our Code of Conduct, we are here for you and will do the best to ensure that the abuser is reprimanded appropriately, per our code.