From 55698db93779f2e2a23deb262ce17e4572b95f40 Mon Sep 17 00:00:00 2001
From: Ruidy <r.nemausat@empfohlen.de>
Date: Thu, 22 Oct 2020 17:15:04 +0200
Subject: [PATCH] set types for styled component

---
 src/Router.tsx                                |  2 +-
 src/components/button.tsx                     | 21 ++++++++++++++
 src/components/container.tsx                  |  5 ++++
 src/containers/Home.tsx                       |  9 ------
 .../home}/TodoList.tsx                        |  2 +-
 src/containers/home/index.tsx                 | 28 +++++++++++++++++++
 src/core/theme/index.ts                       |  9 ++++++
 src/core/theme/styled.d.ts                    | 11 ++++++++
 src/index.tsx                                 | 10 +++++--
 9 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 src/components/button.tsx
 create mode 100644 src/components/container.tsx
 delete mode 100644 src/containers/Home.tsx
 rename src/{components => containers/home}/TodoList.tsx (88%)
 create mode 100644 src/containers/home/index.tsx
 create mode 100644 src/core/theme/index.ts
 create mode 100644 src/core/theme/styled.d.ts

diff --git a/src/Router.tsx b/src/Router.tsx
index 4c7afee..2037cd7 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { About } from './components/About';
-import { Home } from './containers/Home';
+import { Home } from './containers/home';
 
 const Router: FC = () => (
   <Switch>
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000..0df7bee
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,21 @@
+import styled, { css } from 'styled-components';
+
+interface ButtonProps {
+  readonly primary: boolean;
+}
+
+export const Button = styled.button<ButtonProps>`
+  background: transparent;
+  border-radius: 3px;
+  border: 2px solid ${(props) => props.theme.colors.primary};
+  color: ${(props) => props.theme.colors.primary};
+  margin: 0 1em;
+  padding: 0 0.25em 1em;
+
+  ${(props) =>
+    props.primary &&
+    css`
+      background: ${(props) => props.theme.colors.primary};
+      color: white;
+    `}
+`;
diff --git a/src/components/container.tsx b/src/components/container.tsx
new file mode 100644
index 0000000..5c69180
--- /dev/null
+++ b/src/components/container.tsx
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  text-align: center;
+`;
\ No newline at end of file
diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx
deleted file mode 100644
index 1db81b4..0000000
--- a/src/containers/Home.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { FC } from 'react';
-
-import { listTodos } from '../core/services/todo';
-import { TodoList } from '../components/TodoList';
-
-export const Home: FC = () => {
-  const todos = listTodos();
-  return <TodoList todos={todos} />;
-};
diff --git a/src/components/TodoList.tsx b/src/containers/home/TodoList.tsx
similarity index 88%
rename from src/components/TodoList.tsx
rename to src/containers/home/TodoList.tsx
index 0f36bcf..eebb1e8 100644
--- a/src/components/TodoList.tsx
+++ b/src/containers/home/TodoList.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import Todo from '../core/models/todo';
+import Todo from '../../core/models/todo';
 
 interface Props {
   todos: Todo[];
diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx
new file mode 100644
index 0000000..babe2a4
--- /dev/null
+++ b/src/containers/home/index.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { TodoList } from './TodoList';
+import { Button } from '../../components/button';
+
+import Todo from '../../core/models/todo';
+import { listTodos } from '../../core/services/todo';
+import { Container } from '../../components/container';
+
+export const Home: FC = () => {
+  const todos: Todo[] = listTodos();
+
+  return (
+    <div>
+      <h1>Your tasks</h1>
+      <p>Hi there!</p>
+      <TodoList todos={todos} />
+      <Container>
+        <Button primary onClick={() => console.log('Clicked Normal Button')}>
+          Normal Button
+        </Button>
+        <Button primary onClick={() => console.log('Clicked Primary Button')}>
+          Primary Button
+        </Button>
+      </Container>
+    </div>
+  );
+};
diff --git a/src/core/theme/index.ts b/src/core/theme/index.ts
new file mode 100644
index 0000000..5d1e3e8
--- /dev/null
+++ b/src/core/theme/index.ts
@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+
+export const myTheme: DefaultTheme = {
+  borderRadius: '5px',
+  colors: {
+    primary: 'palevioletred',
+    secondary: 'magenta'
+  }
+};
diff --git a/src/core/theme/styled.d.ts b/src/core/theme/styled.d.ts
new file mode 100644
index 0000000..0a751d0
--- /dev/null
+++ b/src/core/theme/styled.d.ts
@@ -0,0 +1,11 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    borderRadius: string;
+    colors: {
+      primary: string;
+      secondary: string;
+    };
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index b95d46b..dc19e19 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,12 +4,16 @@ import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { ThemeProvider } from 'styled-components';
+import { myTheme } from './core/theme';
 
 ReactDOM.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <ThemeProvider theme={myTheme}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root')
 );