# RoomsToGo React Style Guide - Backup

*A mostly reasonable approach to achieve consitentcy and maintenance speed in React*

## Table of Contents

1. [Component Folder Structure](#component-folder-structure)
1. [Basics](#basics)
1. [Passing Props or Push Props Up](#passing-props-or-push-props-up)
1. [Imports](#imports)
1. [Constants](#constants)
1. [Styling](#styling)

## Component Folder Structure

- use dot notation with all lowercase letters for all folders and files
> Why? It's very clear that is the same casing. No one will ever spend time guessing how to name these: folders & files like js, images, css, json, tests, stories, and others

    // bad
    / App.css
    |-- / Images
    |-- / components
    |--|- / ProductDetailsView.js
    |--|- / productDetailsImage.jpeg
    |--|- / RTGButton.js
    |--|- / RtgButton.tests.js
    |--|- / sale-flag.js
    |--|- / sale-flag.stories.js

    // good
    / app.css
    |-- / images
    |-- / components
    |--|--|-- / product.details
    |--|--|--|-- / product.details.view.js
    |--|--|--|-- / product.details.image.jpeg
    |--|--|--/ rtg.button
    |--|--|--|-- / rtg.button.js
    |--|--|--|-- / rtg.button.tests.js
    |--|--|-- / sale.flag
    |--|--|--|-- / sale.flag.js
    |--|--|--|-- / sale.flag.stories.js

- create a folder for each component which will contain the component and its helper files like styles, constants, and others.
> Why? components tend to grow so we want to be able to extract styles, constants and others into separate files for faster refactor later. Big files are harder to refactor because there is too much code noise, and you have to scroll up & down the editor.

    // bad
    |-- / components
    |--|-- / swiper.js

    // good
    |-- / components
    |--|-- / swiper
    |--|--|-- / index.js
    |--|--|-- / swiper.js
    |--|--|-- / swiper.styles.js
    |--|--|-- / swiper.constants.js // other files can be added as well

## Basics

- name the component the same as the file name

    // bad
    // inside swiper.js
    function SimpleSwiper(props) {
      // ...
    }

    // good
    // inside swiper.js
    function Swiper(props) {
      // ...
    }

- include `index.js` inside component folder, which should only re-export and do nothing else
> Why? allows encapsulation, shorter imports

- always use propTypes

## Passing Props or Push Props Up

- make sure props being passed to a component should be first and the props being pushed up should be last
- make sure props pushed up have a prefix of on-* so it’s known what that prop is doing

        // bad
        <ExampleComponent 
          passedData={data.this}
          handleFocus={onFocusEffect} 
          onBlur={onBlurEffect}
          passedDataAgain={data.here} 
        />


        // good
        <ExampleComponent 
          passedData={data.this}
          passedDataAgain={data.here} 
          onFocus={onFocusEffect} 
          onBlur={onBlurEffect}
        />

- when you are actually calling the prop function you don’t need to add the prefix

        // good
        <ExampleComponent 
          passedData={data.this}
          passedDataAgain={data.here} 
          onFocus={focusValidation} 
          onBlur={handleBlur}
        />

## Imports

- organize imports in this order
**import node modules**: display node modules first
**import common code**: display common code second
**import component code**: display component code third

    // bad
    // inside select.room.tile.js
    import THEME from '../theme
    import React from 'react'
    import EMPTY_ROOM_TEXT from './select.room.tile.constants'
    import PropTypes from 'prop-types'
    import Card from '@material-ui/core/Card'

    function SelectRoomTile(props) {
      // ...
    }

    // good
    // inside select.room.tile.js
    import React from 'react'
    import PropTypes from 'prop-types'
    import Card from '@material-ui/core/Card'
    
    import THEME from '../theme'
    import Button from '../button'
    
    import EMPTY_ROOM_TEXT from './select.room.tile.constants'
        
    function SelectRoomTile(props) {
      // ...
    }

## Constants

- SNAKE_CASE all constants
- place constant string/number/objects values inside a constant or state file instead of inside the component
Perfect candidates for these are static data for stories and tests. Other candidates are static skus, messages, min/max allowed numbers

> Why? allows to update value in a single place, allows to re-use constant in other components, tests, stories, and others

# TODO (below rules are in progress)

## Derived vs Compound components
- Derived components should be separated and compound components should be grouped together
Button and AppleButton they are different
but dialog and DialogTitle they are compound component
##

## Global Styling

- TODO: global styling: theme vs tokens (constants)

## Component Styling
- TODO: component level styling, adding root class name for specificity (maybe prefix)
- TODO: emotion styling

**[⬆ back to top](#table-of-contents)**