fix(client): styled-components ts setup

Author: Temzasse

client/jest.config.js

@@ -13,7 +13,6 @@ module.exports = {
     '^~common(.*)$': '<rootDir>/src/common$1',
     '^~ui(.*)$': '<rootDir>/src/common/ui$1',
     '^~theme(.*)$': '<rootDir>/src/common/theme$1',
-    '^~styled(.*)$': '<rootDir>/src/common/styled$1',
     '^~utils(.*)$': '<rootDir>/src/common/utils$1',
     '^~services(.*)$': '<rootDir>/src/common/services$1',
   },

client/src/App.tsx

@@ -6,6 +6,9 @@ import SideBar from './navigation/SideBar';
 import Router from './Router';
 import Providers from './Providers';
 
+// TODO: figure out how to fix typings when using styled + mui together
+// https://material-ui.com/guides/typescript/
+
 const App = () => (
   <Providers>
     <>

client/src/Providers.tsx

@@ -3,9 +3,9 @@ import { Provider } from 'react-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
 import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+import { ThemeProvider } from 'styled-components';
 
 import theme from '~theme';
-import { ThemeProvider } from '~styled';
 import { connectApiToStore } from '~common/services/api';
 import { I18nProvider } from '~ui';
 import configureStore from './store';

client/src/common/styled.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as Sentry from '@sentry/browser';
+import styled from 'styled-components';
 
-import styled from '~styled';
 import config from '../config';
 
 interface Props {

client/src/common/ui/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import styled from '~styled';
+import styled from 'styled-components';
 
 const Page = styled.main`
   padding: ${props => props.theme.spacing.unit * 3}px;

client/src/common/ui/Page.tsx

@@ -1,4 +1,4 @@
-import { css, keyframes } from '~styled';
+import { css, keyframes } from 'styled-components';
 import { BREAKPOINTS } from '../constants';
 
 export const appear = keyframes`

client/src/common/utils/styled.utils.ts

@@ -3,9 +3,9 @@ import { render } from 'react-testing-library';
 import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
 import { I18nProvider } from '@lingui/react';
 import { Catalogs } from '@lingui/core';
+import { ThemeProvider } from 'styled-components';
 
 import theme from '~theme';
-import { ThemeProvider } from '~styled';
 
 // NOTE: we only need to add theme related providers so that certain
 // UI components work properly when testing them

client/src/common/utils/test.utils.tsx

@@ -1,8 +1,14 @@
 /* eslint-disable */
+
+// NOTE: if some lib is missing type definitions you can add them here
+
+// NOTE: however if your are extending existing types put the extensions in
+// a separate file like in `styled.d.ts`!
+
 declare module '*.png';
 declare module '*.svg';
 declare module '*.jpg';
 
 declare module 'workbox-window' {
   export const Workbox: any;
-}
+}

client/src/custom-typings.d.ts

@@ -5,8 +5,8 @@ import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import styled from 'styled-components';
 
-import styled from '~styled';
 import { navigation } from './navigation.model';
 
 interface Props {