# FE Style Guide

## File Structure
* File name should match component name
* One component per file
* util file names should be written in `camelCase`
* component file names should be written in `PascalCase`
* Components used more than once should be in a folder containing:
* index.ts:

        export { default } from './ComponentName';

* Styled comonents should be in file called ComponentName.styled.ts

## React
* Function component > class component
* boolean props should ideally be prefixed with is or has e.g. `isSmall`, `hasInstagram`
* variable and function names should be written in `camelCase`
* component and type names should be written in `PascalCase`
* shared constant name should be written in `SCREAMING_SNAKE_CASE`
* Don't mutate props or state directly

## Typescript
* Files with JSX must have the `.tsx` file extension
* components with props should have an interface with any types not imported from a types file
Example:

    interface Props {
      isSmall?: boolean;
    }

    const ComponentName = (props: Props) => {

* components can import prop types from a types file
Example:

    import { SharedProps } from '../types';

    const ComponentName = (props: SharedProps) => {

* prop types can be combined as well
Example:

    import { SharedProps } from '../types';
    
    interface Props {
      isSmall?: boolean;
    }

    const ComponentName = (props: Props & SharedProps) => {