MrJadaml

const Modal = ({ children, onClose }) => (
  <div role="presentation">
    <OutsideClickHandler onOutsideClick={onClose}>
      <div> modal stuff... </div>
    </OutsideClickHandler>
  </div>
)

it('should close modal when clicked outside', () => {
  const mockHandleClose = jest.fn()

MrJadaml

import { FC, ChangeEvent, FormEvent, ReactElement, useState, useRef } from 'react'

interface CompProps {
  prop1: string    // required
  prop2?: number   // optional
}

export const Comp: FC<CompProps> = ({ prop1, prop2 }): ReactElement => {
  const [foo, setFoo] = useState<string>('')
  const [bars, setBars] = useState<string[]>([])

MrJadaml

Start Date: (fill me in with today's date, YYYY-MM-DD)

Summary

Basic example

MrJadaml

Startup Steps

Brew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

You can run brew doctor to insure the install ran without any issues. [brew doctor]

MrJadaml

const withDirSizes = {
  'src': {
    size: 42,
    ndoes: {
      'components': {
        size: 42,
        nodes: {
          'add-to-bag': {
            nodes: {
              ...

MrJadaml

const gitlog = require('gitlog');
const util = require('util');
const path = require('path')
const fs = require('fs')
const exec = util.promisify(require('child_process').exec);
const execSync = require('child_process').execSync;

async function asyncForEach(array, callback, done) {
    for (let index = 0; index < array.length; index++) {
        await callback(array[index], index, array);

MrJadaml

💥  ecom-web-app [NCE-1046/webpack-migration] ⚡  yarn build:dev
yarn run v1.12.3
$ cross-env NODE_ENV=development webpack -p --progress
OOOOOOOOOOOoooooOOOOOOOOooooOOOOooOoooOOoooOOooOOOooOOOoo
{ entry: [ 'babel-polyfill', './client.js' ],
  output:
   { path: '/Users/alichty/lulu/ecom-web-app/build',
     publicPath: '/',
     filename: 'bundle.js' },
  stats: { children: false },

MrJadaml

Summary

Adoption of AirBnb Style Guide + Lint Config.

Motivation

Currently we have a linter config, but don't keep it in sync with the rules defined in our style guide. This requires devs to regularly reference the style guide. More realistically speaking, PRs are submitted with code that does not comply with our style guide for rules that are not also defined in our config -- both new and seasoned devs do this. This causes us to kick back PRs due to code style violations which adds additional PR review cycles consuming multiple developer's time.

MrJadaml

Summary

Mocks are designated by a .mocks.js extensions and would be co-located with their corresponding module.

Basic example

├── SomeComponent
  ├── __snapshots__/
 ├── SomeComponent.scss

MrJadaml

[LOG 20:16:38.935] ******* Log Initiated for Kerbal Space Program - 1.5.1.2335 (OSXPlayer) en-us *******
Kerbal Space Program - 1.5.1.2335 (OSXPlayer) en-us


OS: Mac OS X 10.12.6
CPU: Intel(R) Core(TM) i5-6287U CPU @ 3.10GHz (4)
RAM: 16384
GPU: Intel(R) Iris(TM) Graphics 550 (1536MB)
SM: 46 (OpenGL 4.1 INTEL-10.25.19)
RT Formats: ARGB32, Depth, ARGBHalf, Shadowmap, RGB565, ARGB4444, ARGB1555, Default, ARGB2101010, DefaultHDR, ARGB64, ARGBFloat, RGFloat, RGHalf, RFloat, RHalf, R8, ARGBInt, RGInt, RInt, RGB111110Float, RG32, RGBAUShort, RG16