Feature/todo

.editorconfig

@@ -0,0 +1,11 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+public

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

package.json

@@ -4,21 +4,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
     "axios": "^0.19.2",
-    "cross-env": "^7.0.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "4.0.3",
-    "shortid": "^2.2.15",
-    "typescript": "4.5.3"
+    "nanoid": "^3.3.4",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "styled-components": "^5.3.5"
   },
   "scripts": {
     "start:fullstack": "cross-env REACT_APP_WHOAMI=fullstack react-scripts start",
     "start:frontend": "cross-env REACT_APP_WHOAMI=frontend react-scripts start",
+    "format": "prettier --check --write .",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -39,6 +34,31 @@
     ]
   },
   "devDependencies": {
-    "@types/shortid": "^0.0.29"
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.25",
+    "cross-env": "^7.0.2",
+    "prettier": "^2.6.2",
+    "react-scripts": "4.0.3",
+    "typescript": "4.5.3"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "!**/*.style.tsx"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 60,
+        "functions": 65,
+        "lines": 70,
+        "statements": 70
+      }
+    },
+    "coverageReporters": [
+      "text"
+    ]
   }
 }

public/robots.txt

@@ -1,3 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.style.tsx

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+
+type InputProps = {
+  type: string;
+  onChange: () => void;
+  onKeyDown: () => void;
+};
+
+export const Main = styled.main`
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 100vh;
+`;
+
+export const Div = styled.div``;
+
+export const Input = styled.input.attrs<InputProps>({
+  type: 'text',
+})`
+  min-height: 36px;
+  border: none;
+  outline: none;
+  padding: 0 12px;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+
+  &:focus {
+    box-shadow: 1px 0 9px rgba(0, 0, 0, 0.25);
+  }
+`;
+
+export const TodoInput = styled(Input)`
+  flex: 1 1;
+`;
+
+export const Checkbox = styled(Input).attrs({
+  type: 'checkbox',
+})`
+  width: 24px;
+  height: 24px;
+  box-shadow: none;
+  border: none;
+  outline: none;
+
+  &:focus {
+    box-shadow: none;
+    border: none;
+    outline: none;
+  }
+`;
+
+export const Button = styled.button.attrs({
+  type: 'button',
+})`
+  outline: none;
+  border: none;
+  box-shadow: 2px 0 2px currentColor;
+  border-radius: 4px;
+  min-height: 32px;
+  min-width: 80px;
+  padding: 4px 8px;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;

src/App.tsx

@@ -1,14 +1,11 @@
-import React from 'react';
-
-import ToDoPage from './ToDoPage';
-
-import './App.css';
+import ToDoPage from './views/ToDoPage';
+import { Main } from './App.style';
 
 function App() {
   return (
-    <main className="App">
+    <Main>
       <ToDoPage />
-    </main>
+    </Main>
   );
 }