Skip to content

Latest commit

 

History

History
129 lines (85 loc) · 3.95 KB

CONTRIBUTING.md

File metadata and controls

129 lines (85 loc) · 3.95 KB

Contributing to the project

Hi 👋 Thanks for considering contributing! Aim of this doc it to guide you throught the process and help you better understand the project.

Process

  1. Run this project locally (described below)
  2. Make your changes (including tests and documentation updates)
  3. Make sure all tests and linters are happy with your changes
  4. Open a PR
  5. Get your PR accepted by two of the maintainers
  6. Bump project version (described below)
  7. Your chagne will be automatically deployed and available at styleguide.brainly.com within couple of minutes

How to run this project locally

Requirements

Step by step guide

  1. Clone this repository
  2. Run yarn install
  3. Run yarn build
  4. Run yarn start
  5. You should be able to access docs in your browser by navigating to localhost:8000/dev/docs/.

Docs

Remember that docs are essential part of this project. Don't forget to update them whenever you change, add or delete any components. Docs for each component are located in the components/COMPONENT_NAME/pages/ folder. Main page and page templates are located in docs/pages.

SCSS

We use BEM naming convetion.

Modifier Dictionary

We have standardized set of words you should use when adding modifiers to blocks.

  • If you component changes only in one dimension:

  • width: xnarrow narrow wide xwide full-width

  • height: xshort short tall xtall full-height

  • If it changes in both sizes: xsmall small large xlarge

  • Behavior changes:

  • non-responsive

  • obscured vs standout

  • disabled

  • active vs inactive

  • Combinations of behaviors:

  • padding-wide

  • padding-tall

  • padding-large

All components are responsive by default, so there is no need for modifiers specific to responsiveness (exception: non-responsive)

React

Each component/container should have its own file. Components are dumb and should be written in pure function form. Each file should export default module like so:

export default ComponentName;

File Location

Component and container files should be located next to .scss files in src/components directory. Documentation pages for components should be located in same directory in subdirectory called pages.

Tests

Each component should be tested. We are using jest as a test runner/framework. Test files should be located next to component/container file with extension .spec.js

Importing dependencies

When importing dependencies we are using global imports instead of relative ones.

Bad:

import ButtonPrimary, {types as buttonTypes} from '../../buttons/ButtonPrimary';

Good:

import ButtonPrimary, {BUTTON_PRIMARY_TYPE} from 'components/buttons/ButtonPrimary';

Components options

Component options should be stored in const object. Options should have singular form ("alignment" not "alignments") and capitalized names like:

const ALIGNMENT = {START: 'start', END: 'end'};

Each component should export its configuration options (if it have some).

export {DIRECTION, ALIGNMENT};

Technical Discipline

Bumping Release Version

This project uses semver versioning.

To simplify version bumping you can use yarn version. It will patch package.json, create a corresponding commit, create a tag and push those to git changes.

To bump the version correctly you should follow these steps:

  1. Wait for your PR to get accepted

  2. Rebase your branch

  3. bump version in branch

  4. Merge your PR to master

Code Style

All linter settings are based on our standarized frontend tools configs. To run the linters (and tests) you should use: yarn test.