Adding storybook to the repo

addons.js

import 'storybook-addon-styled-component-theme/dist/src/register';

config.js

import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import { ThemeProvider } from 'styled-components'
import itvTheme from '../src/javascript/styles/themes/itv'
import keshetTheme from '../src/javascript/styles/themes/keshet'
import { withThemesProvider } from 'storybook-addon-styled-component-theme'
import GlobalStyles from '../src/javascript/styles/GlobalStyles'

import './fonts.css'

addDecorator(storyFn => (
  <div
    style={{
      padding: '1.5rem',
    }}
  >
    <GlobalStyles />
    {storyFn()}
  </div>
))

const themes = [
  { name: 'itv', ...itvTheme },
  { name: 'keshet', ...keshetTheme },
]
addDecorator(withThemesProvider(themes))

function loadStories() {
  /**
   * Loads everything in ../app/components with
   * suffix .stories.tsx
   */
  const req = require.context('../src', true, /\.stories\.jsx$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

createGlobalStyle.ts

import {
  createGlobalStyle,
} from 'styled-components'
import { Theme } from './themes/types/Theme'

const GlobalStyle = createGlobalStyle<{theme: Theme}>`
  .no-scroll {
    overflow: hidden;

    body {
      overflow: hidden;
    }
  }

  body {
    background-color: ${({ theme }) => theme.components.body.backgroundColor};
    margin: ${({ theme }) => theme.components.body.margin};
    padding: ${({ theme }) => theme.components.body.padding};
  }

  #app {
    display: flex;
  }

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    width: 100%;

    &__wrapper {

      flex-grow: 1;
      overflow: hidden;
      position: relative;
    }

    &__cover {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 20;
    }

    &::before {

      background-color: ${({ theme }) => theme.components.page.beforeColor};
      bottom: 0;
      content: '';
      left: 0;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      right: 0;
      top: 0;
      transition: opacity .5s ${({ theme }) => theme.animation.easing};
      z-index: 20;
    }
    &.nav-open {
      &::before {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }

  main {
    display: block;
    min-height: 640px;
    overflow: hidden;
  }

  .scroller {
    width: 100%;
    overflow: auto;
  }

  .u-align-center {
    text-align: center;
  }

  .u-align-right {
    text-align: right;
  }

  .fade-on-load {
    animation: fade-in 1s;
  }

  .u-center-content {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .sticky-container {
    padding-bottom: 20px;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`

export default GlobalStyle

styled.ts

import importedStyled, {
  ThemedBaseStyledInterface,
} from 'styled-components'
import { Theme } from './themes/types/Theme'

const styled: ThemedBaseStyledInterface<Theme> = importedStyled

export default styled

webpack.config.js

const appWebpack = require('../webpack.config.js')

const appConfig = appWebpack();

module.exports = ({config}) => {
  config.resolve = appConfig.resolve;
  config.module.rules = [...config.module.rules, ...appConfig.module.rules];
  config.plugins = [...config.plugins, ...appConfig.plugins];
  config.resolveLoader = appConfig.resolveLoader;
  return config;
}