Skip to content

Latest commit

 

History

History
88 lines (58 loc) · 2.37 KB

CONTRIBUTING.md

File metadata and controls

88 lines (58 loc) · 2.37 KB
Raw

How to contribute

Running Arcade Locally

  1. Clone the Git repository
  2. Install the dependencies
  3. Run Storybook
  4. ???
  5. Profit!
$ git clone [email protected]:Frontify/arcade.git
$ npm ci
$ npm run storybook
$ echo "YAY ✨"

Create a new Component

When adding a new component to arcade this is the flow that is applied.

  1. Create new branch
  2. Create component files, write tests, write stories & fiddle with React
  3. Open PR
  4. Squash

Create new branch

Create a new branch for your additions

git checkout -b feat/add-cool-cats-and-kittens

The name of the branch is not really relevant. Nonetheless we usually go for a prefix following Conventional Commits, slash as a separator and a short description of what the branch will change in kebab-case.

Create Component Files

Theres a nifty script that creates that files you'll need:

npm run component:create CoolCatsAndKittens

This will add a folder inside src/components with the name CoolCatsAndKittens and three files:

  • CoolCatsAndKittens.tsx which is where your React magic happens 🧙‍♀️
  • CoolCatsAndKittens.spec.tsx is the place to write your tests 🔬
  • CoolCatsAndKittens.stories.tsx is for your Stories inside Storybook 📄

Opening a PR

Once you're happy with your new component, it's time to open a new PR. Push your branch to GitHub as a start:

git push -u origin feat/cool-cats-and-kittens

and click the link provided by the git CLI.

Naming your PR

The Pull Requests basically follow Conventional Commits.

The name of your PR should be:

<type>[optional scope]: <description>

Following the example from above, it would look like this:

feat: Add CoolCatsAndKittens Component

Breaking Changes can be declared with a exclamation mark (!) after the type.

GitHub Actions

  • GitHub automatically deploys Storybook with your new changes to Netlify and adds a Preview link to the PR.
  • SonarCloud checks the code base for its quality.
  • Cypress tests are run to make sure, you're not breaking anything.

Merge Pull Request

Make sure you choose "Squash and merge" when merging the PR into the main branch. You can find more about that here.