Swap emotion for styled components

frontend/.storybook/wrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from 'styled-components';
 
 import { theme } from '../src/theme';
 

frontend/package.json

@@ -3,14 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "emotion": "^9.0.2",
-    "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",
     "recompose": "^0.26.0",
     "reset-css": "^3.0.0",
+    "styled-components": "^3.2.3",
     "styled-system": "^2.1.1"
   },
   "scripts": {

frontend/src/components/button/index.tsx

@@ -1,6 +1,5 @@
 import React, { AnchorHTMLAttributes } from 'react';
 import { Box } from '../box';
-import styled from '../../styled';
 import { ButtonVariant } from './types';
 import {
   getBackgroundColor,
@@ -15,22 +14,21 @@ type Props = {
   children: React.ReactNode;
 };
 
+const Base = Box.extend`
+  transition: background-color ${props => props.theme.timings[0]}s ease-out,
+    color ${props => props.theme.timings[0]}s ease-out;
+  cursor: pointer;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-family: ${props => props.theme.fonts.button};
+  display: inline-block;
+`;
+
 const button = (
   { variant, children, ...additionalProps }: Props,
   tagName: 'a' | 'button'
 ) => {
-  // looks like emotion has some bug when using withComponent when using
-  // styled with additional styles
-
-  const Component = styled(Box.withComponent(tagName))`
-    transition: background-color ${props => props.theme.timings[0]}s ease-out,
-      color ${props => props.theme.timings[0]}s ease-out;
-    cursor: pointer;
-    text-transform: uppercase;
-    text-decoration: none;
-    font-family: ${props => props.theme.fonts.button};
-    display: inline-block;
-  `;
+  const Component = Base.withComponent(tagName);
 
   return (
     <Component

frontend/src/components/typography/index.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { withTheme } from 'emotion-theming';
 import withProps from 'recompose/withProps';
 
-import { Theme } from '../../theme';
-
 import {
   space,
   fontSize,
@@ -41,11 +38,7 @@ interface TitleProps {
 }
 
 // TODO spacing etc
-const BaseTitle = ({
-  theme,
-  level,
-  children
-}: TitleProps & { theme: Theme }) => {
+export const Title = ({ level, children }: TitleProps) => {
   // ugly, but works :)
   const tagName: keyof JSX.IntrinsicElements = `h${level}` as keyof JSX.IntrinsicElements;
   const name = `title${level}`;
@@ -59,13 +52,9 @@ const BaseTitle = ({
   );
 };
 
-export const Title = withTheme<TitleProps, Theme>(BaseTitle);
-
-const BaseParagraph = withProps({
+export const Paragraph = withProps({
   fontFamily: 'base',
   fontSize: 'body',
   lineHeight: 'body',
   mb: 3
 })(BaseTypography.withComponent('p'));
-
-export const Paragraph = withTheme<{}, Theme>(BaseParagraph);

frontend/src/index.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import App from './App';
-
-import { ThemeProvider } from 'emotion-theming';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'styled-components';
 
+import App from './App';
 import { theme } from './theme';
 
 import 'reset-css';

frontend/src/styled/index.ts

@@ -1,5 +1,14 @@
-import styled, { ThemedReactEmotionInterface } from 'react-emotion';
+import * as styledComponents from 'styled-components';
 
 import { Theme } from '../theme';
 
-export default styled as ThemedReactEmotionInterface<Theme>;
+const {
+  default: styled,
+  css,
+  injectGlobal,
+  keyframes,
+  ThemeProvider
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
+
+export default styled;
+export { css, injectGlobal, keyframes, ThemeProvider };