Thank's for you interest in contributing! 🎉👍
This are the common guidelines to contribute to react-payment-card-component
. Please ensure the following guidelines are being followed by you and any other contributor.
This project and everyone participating in it is governed by the Pagar.me Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to developers@pagar.me.
Help us maintaining this project by reporting bugs, improving our codebase, creating more documentation and submiting new pull requests for features you would like to see in this project.
English is an universal language used across the world and in the vast majority of tools and coding vocabulary.
We follow the pagarme/git-style-guide. Every commit/branch/pull_request must follow its guidelines.
If you find a security vulnerability, do NOT open an issue. Email developers@pagar.me instead.
When reporting a bug make sure to include:
- The project version you are running
- Your OS
- Node.js version
- Steps to reproduce
- Current and expected behavior
Make sure that when writing code you are following Pagarme's style guide
Fork the repo and clone it in your machine: git clone git@github.com:YOUR_USERNAME/react-payment-card-component.git
Although we higly recommend you using yarn for this project, we don't demand it, so feel free to use other package managers.
yarn
or
npm i
yarn test
or
npm run test
Storybook is like a playground so you can see the components up and running before importing it in your project.
To start the Storybook in your local machine, simply run:
yarn start
or
npm run start
If you add new styles, remember to add a corresponding Story so we can see a rendered example.
Do it by creating a new .js file in ./stories
and making it available by exporting it in ./stories/index.js
.
The file should be something like this at the end:
import React from 'react'
import { storiesOf } from '@storybook/react'
import PaymentCardContainer from './PaymentCardContainer'
storiesOf('BankName', module)
.add('CardType1', () => (
<PaymentCardContainer
bank="bankName"
type="type1"
number="4111111111111111"
cvv="444"
holderName="Ygritte Snow"
expiration="12/21"
/>
))
.add('CardType2', () => (
<PaymentCardContainer
bank="bankName"
type="type2"
/>
))
- Make sure the tests still passes (and that you added new ones if needed)
- Fill the PR template when opening it trough GitHub
- Include screenshots and animated GIFs whenever possible.
If in doubt, just send us a PR or open an issue to discussion! We're always happy for receiving contributions!