​​How to submit a component for review at Funkhaus
​​So you’ve finished building a component and now you want to submit it for a code review? We use GitHub Pull Requests to do this, and they are explained below.
​​
  • ​​Austin: Before you make a PR to be reviewed by the project lead, try to apply notes from previously components, check the designs, etc before making the PR. I've made quite a few repeat notes, and caught some obvious stuff missing. Basically we just all gotta get things as close as we can before asking anyone else to take a look.

​​Pull Request Best Practices

​​Before you make a PR, go through this checklist and ensure you’ve meet these basic best practices. A lot of these points are explained in detail here.
​​
  • ​​Is the component and story named correctly?
  • ​​Does your PR include changes to files that don’t relate to your component?
  • ​​Does the component look like the designs?
  • ​​Is it responsive? What does it look like on a phone?
  • ​​What would happen if user input text was longer? Or it was missing an image?
  • ​​Is there horizontal scroll bars showing at any time?
  • ​​If using width, is max-width actually better?
  • ​​Did you style a hover state?
  • ​​Does the CSS root class name match the component file name?
  • ​​Is all the CSS name spaced inside the root element class?
  • ​​Did Prettier format the code respecting the project’s settings?
  • ​​Is the Storybook story working correctly?
​​

​​Make a Pull Request against the master/main project branch

​​This is explained here: https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request

​​Complete the PR template

​​Each project includes a Pull Request template that you will be asked to fill out. This is an example of that PR template: https://github.com/funkhaus/fuxt/blob/master/.github/PULL_REQUEST_TEMPLATE.md
​​

​​Preview the PR

​​Once the PR has been submitted to GitHub, you can preview it using Storybook, as our repos auto-deploy PRs to Netlify.
​​
​​If you scroll to the bottom of the “Conversation” tab in the PR, you’ll see a list of GitHub actions. The last one in the list will have a “-- Deploy preview ready!” text on it, and the “Details” link next to that will link you out to a Storybook deploy of this specific PR. Make sure to find the component you are looking for in the Storybook, as the link will take you to the first component always.

​​Review Process

​​Once you have submitted a PR, you can continue to make updates to it as needed. Once you are ready for it to be reviewed, please notify the Project Lead via a GitHub comment with an @username​ comment on the PR. Or use the “Request a review” feature of GitHub if you have permission.
​​