coding-standards.md

Coding Standards

Use lowercase and kebab-case for EVERY file, even hooks:

// BAD
RealViewport

// GOOD
real-viewport

Do not export as default:

// BAD
const test = () => ()
export default test

// Then
import test from 'components/test'

// GOOD
export const test = () => ()

// Then
import { test } from 'components/test'

Use CMS folder for all CMS related files:

// BAD
lib/contenful/renderer.js

// GOOD
contentful/home-renderer.js

Use /assets folder with assets/icons for icons and assets/illustrations for illustrations, duh:

// BAD
illustrations/wizard.svg
lib/arrow.svg
slider/arrow.svg

// GOOD
assets/illustrations/wizard.svg
assets/icons/arrow.svg

Don't attach UI elements to components

// BAD
// In components/slider/index.js:
import arrow from "./arrow.svg"

// GOOD
// In the page where slider is being imported:
import { Slider } from "components/slider"
import Arrow from "assets/icons/arrow.svg"

Add a render validation for rich text or must be set as required on contentful

// BAD
<div>{renderBody(firstBodyContent.content)}</div>

// GOOD
<div>{firstBodyContent.content && renderBody(firstBodyContent.content)}</div>

When using GraphQL there's no need to check for "|| null" in getStaticProps, GraphQL already does that

// BAD
const data = { briefDescription: item?.briefDescription || null }

// GOOD
const data = { briefDescription: item.briefDescription }

In getStaticProps manage arrays with validation and return an empty array if it is null

// BAD
export const getStaticProps = async ({ preview = false }) => {
  const imagesArray = data?.imagesArray ?
    data.imagesArray.map((item) => ({image: item.src})
    : null   
  return imagesArray
}

const MyRender = ({imagesArray}) => {
  return (
    <div>
      {imagesArray && imagesArray.map( ...}
    </div>
  )
}

// GOOD
export const getStaticProps = async ({ preview = false }) => {
   const imagesArray = data?.imagesArray ?
   data.imagesArray.map((item) => ({image: item.src})
   : []
  return imagesArray
}

const MyRender = ({imagesArray}) => {
  return (
    <div>
      {imagesArray.map( ...}
    </div>
  )
}

Use mobile css as default

// BAD
.my-class {
  position: relative;
  top: 50%;
  @include mobile {
    top: unset;
  }
}

// GOOD
.my-class {
  position: relative;
  @include desktop {
    top: 50%;
  }
}