---
# System prepended metadata

title: Contributing

---

# Contributing

## Coding Guidelines
When contributing to this codebase, please try to follow these guidelines and linting rules that can be found in `.eslintrc.json` 

### React components

If you're creating a new component or page, use the `npm generate` command which creates your component from a predefined template.

**To create a component:**
`npm run generate:component MyComponentName`

**To create a page:**
`npm run generate:page MyPageName`


- When writing React components, we use functional components and [hooks](https://reactjs.org/docs/hooks-overview.html) 

- Components that can be resued and aren't coupled with store should reside in `/src/components` folder

- Pages that reside in `src/pages` are React components that can be accessed via routes, and usually include one or more components

### Styles

In our codebase, you can encounter styles in 3 different places. We are also preprocessing CSS with [SASS](https://sass-lang.com/guide)

- **Global styles** 
Located in `assets/styles/global.scss`
These styles are supposed to override styles from the antd library and define new classes that can be reused across pages.

- **Styled modules**
Pages often require unique styles. Instead of polluting the global.scss file with specific page-related classes, we put the CSS in their respective `styles.module.scss` file.

- **Component styles**
Each component should have an SCSS file with the same name. This file should contain the styles only for this component, but at the same time it shouldn't be encapsulated in case a page wants to override components style.

Example scenario showing all above mentioned styling methods:

Common styles from `global.scss`:
```
.studio-page {
  label {
    color: grey;
  }
}
```
Component file `Button.tsx`:
```
export default function Button({ text }) {
  return (
    <button className="cresta-button">{text}</button>
  )
}
```
That has `Button.scss`:
```
.cresta-button {
  width: auto;
  display: inline-block;
}
```

Then we have a page `Profile.tsx` that uses some common styles combined with specific styles:
```
export default function Profile() {
  return (
    <div className={classNames(['studio-page', styles.profileWrapper])}>
      // This combines common styles with CSS module styles
      <label>My profile</label>
      <Button text="Log out"></Button>
    </div>
  )
}
```
Styles from the page's `styles.module.scss` file. If we want to set the button's width to 100% on this page, we can target it with the :global selector.
```
.profileWrapper {
  :global {
    .cresta-button {
      width: 100%;
    }
  }
}
```