Initial implementation of the design system and storybook

frontend/.storybook/config.js

@@ -1,11 +1,17 @@
-import { configure } from "@storybook/react";
+import { configure, addDecorator as add } from '@storybook/react';
 
-import 'modern-normalize';
+import 'reset-css';
+
+import { wrapper } from './wrapper';
 
 function loadStories() {
-  require("../src/stories/index.tsx");
-  require("../src/stories/navbar/index.tsx");
-  require("../src/stories/logo/index.tsx");
+  require('../src/stories/index.tsx');
+  require('../src/stories/navbar/index.tsx');
+  require('../src/stories/logo/index.tsx');
+  require('../src/stories/box/index.tsx');
+  require('../src/stories/typography/index.tsx');
 }
 
+add(wrapper());
+
 configure(loadStories, module);

frontend/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">

frontend/.storybook/wrapper.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
+
+import { theme } from '../src/theme';
+
+export function wrapper() {
+  return story => {
+    return (
+      <ThemeProvider theme={theme}>
+        <div>{story()}</div>
+      </ThemeProvider>
+    );
+  };
+}

frontend/package.json

@@ -4,11 +4,14 @@
   "private": true,
   "dependencies": {
     "emotion": "^9.0.2",
-    "modern-normalize": "^0.4.0",
+    "emotion-theming": "^9.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-emotion": "^9.0.2",
-    "react-scripts-ts": "2.13.0"
+    "react-scripts-ts": "2.13.0",
+    "recompose": "^0.26.0",
+    "reset-css": "^3.0.0",
+    "styled-system": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts-ts start",

frontend/public/index.html

@@ -6,6 +6,8 @@
     <meta name="theme-color" content="#000000">
 
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/src/components/box/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {
+  space,
+  width,
+  fontSize,
+  color,
+  boxShadow,
+  SpaceProps,
+  WidthProps,
+  FontSizeProps,
+  ColorProps,
+  BoxShadowProps
+} from 'styled-system';
+
+import styled from '../../styled';
+
+type BoxProps = SpaceProps &
+  WidthProps &
+  FontSizeProps &
+  ColorProps &
+  BoxShadowProps;
+
+export const Box: React.SFC<BoxProps> = styled('div')`
+  ${space}
+  ${width}
+  ${fontSize}
+  ${color}
+  ${boxShadow}
+`;

frontend/src/components/typography/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { withTheme } from 'emotion-theming';
+import withProps from 'recompose/withProps';
+
+import { Theme } from '../../theme';
+
+import {
+  space,
+  fontSize,
+  color,
+  lineHeight,
+  fontFamily,
+  FontFamilyProps,
+  LineHeightProps,
+  SpaceProps,
+  FontSizeProps,
+  ColorProps,
+  BoxShadowProps
+} from 'styled-system';
+
+import styled from '../../styled';
+
+type TypographyProps = SpaceProps &
+  FontSizeProps &
+  LineHeightProps &
+  ColorProps &
+  FontFamilyProps &
+  BoxShadowProps;
+
+const BaseTypography = styled<TypographyProps, 'h1'>('h1')`
+  ${space}
+  ${fontFamily}
+  ${fontSize}
+  ${lineHeight}
+  ${color}
+`;
+
+interface TitleProps {
+  level: 1 | 2 | 3;
+  children: React.ReactNode;
+}
+
+// TODO spacing etc
+const BaseTitle = ({
+  theme,
+  level,
+  children
+}: TitleProps & { theme: Theme }) => {
+  // ugly, but works :)
+  const tagName: keyof JSX.IntrinsicElements = `h${level}` as keyof JSX.IntrinsicElements;
+  const name = `title${level}`;
+
+  const X = BaseTypography.withComponent(tagName);
+
+  return (
+    <X fontSize={name} lineHeight={name} fontFamily="title">
+      {children}
+    </X>
+  );
+};
+
+export const Title = withTheme<TitleProps, Theme>(BaseTitle);
+
+const BaseParagraph = withProps({
+  fontFamily: 'base',
+  fontSize: 'body',
+  lineHeight: 'body',
+  mb: 3
+})(BaseTypography.withComponent('p'));
+
+export const Paragraph = withTheme<{}, Theme>(BaseParagraph);

frontend/src/index.tsx

@@ -2,6 +2,15 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';
 
-import 'modern-normalize';
+import { ThemeProvider } from 'emotion-theming';
 
-ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
+import { theme } from './theme';
+
+import 'reset-css';
+
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>,
+  document.getElementById('root') as HTMLElement
+);

frontend/src/stories/box/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Box } from '../../components/box';
+
+storiesOf('Box', module)
+  .add('plain', () => <Box>Hello world</Box>)
+  .add('font size', () => <Box fontSize={4}>Hello world</Box>)
+  .add('complex', () => (
+    <Box m={2} p={1} boxShadow={1}>
+      Hello world
+    </Box>
+  ))
+  .add('padding', () => (
+    // padding: 32px (theme.space[3])
+    <Box p={3}>Hello world</Box>
+  ))
+  .add('color', () => (
+    // color
+    <Box color="tomato">Hello world </Box>
+  ))
+  .add('background color', () => (
+    // background color
+    <Box bg="tomato">Hello world</Box>
+  ));

frontend/src/stories/typography/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Title, Paragraph } from '../../components/typography';
+
+storiesOf('Typography', module)
+  .add('titles', () => (
+    <div>
+      <Title level={1}>Title 1</Title>
+      <Title level={2}>Title 2</Title>
+      <Title level={3}>Title 3</Title>
+    </div>
+  ))
+  .add('paragraphs', () => (
+    <div>
+      <Paragraph>
+        Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima
+        dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia
+        benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum
+        quis impera fabula lacuna lorem medius ora.
+      </Paragraph>
+      <Paragraph>
+        Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima
+        dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia
+        benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum
+        quis impera fabula lacuna lorem medius ora.
+      </Paragraph>
+    </div>
+  ));

frontend/src/styled/index.ts

@@ -0,0 +1,5 @@
+import styled, { ThemedReactEmotionInterface } from 'react-emotion';
+
+import { Theme } from '../theme';
+
+export default styled as ThemedReactEmotionInterface<Theme>;

frontend/src/theme/index.ts

@@ -0,0 +1,62 @@
+const breakpoints = ['40em', '52em', '64em'];
+
+const colors = {
+  text: '#333333',
+  blue: '#0c67ff',
+
+  grey: '#f4f4f4',
+  white: '#ffffff'
+};
+
+const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];
+
+const fontSizes = {
+  title1: 45.234335104,
+  title2: 31.990336,
+  title3: 22.624,
+  body: 16
+};
+
+const lineHeights = {
+  title1: 1.1,
+  title2: 1.2,
+  title3: 1.3,
+  body: 1.4
+};
+
+const fontWeights = {
+  normal: 500,
+  bold: 700
+};
+
+const letterSpacings = {
+  normal: 'normal',
+  caps: '0.25em'
+};
+
+const radii = [0, 2, 4, 8];
+
+const borders = [0, '1px solid', '2px solid'];
+
+const shadows = [`0 1px 2px 0 ${colors.text}`, `0 1px 4px 0 ${colors.text}`];
+
+const fonts = {
+  title: 'Rubik',
+  base: 'Roboto Mono',
+};
+
+export const theme = {
+  breakpoints,
+  colors,
+  space,
+  fontSizes,
+  lineHeights,
+  fontWeights,
+  letterSpacings,
+  radii,
+  fonts,
+  borders,
+  shadows
+};
+
+export type Theme = typeof theme;

frontend/src/typings/recompose/index.d.ts

@@ -0,0 +1,2 @@
+declare module 'recompose';
+declare module 'recompose/withProps';