From a9ecf32a56c9da27295ce40363065ed94cbf02d5 Mon Sep 17 00:00:00 2001 From: dm1sh Date: Mon, 11 Oct 2021 13:53:17 +0300 Subject: [PATCH] Added basic application design with material design --- src/App.tsx | 36 ++++++++++++++++++++++++++++++++++-- src/AppBar.tsx | 23 +++++++++++++++++++++++ src/Layout.tsx | 27 +++++++++++++++++++++++++++ src/TodoItem.tsx | 41 +++++++++++++++++++++++++++++++++++++++++ src/TodoList.tsx | 20 ++++++++++++++++++++ src/hooks.ts | 20 ++++++++++++++++++++ src/index.css | 25 ------------------------- src/index.tsx | 6 ------ src/types.ts | 5 +++++ 9 files changed, 170 insertions(+), 33 deletions(-) create mode 100644 src/AppBar.tsx create mode 100644 src/Layout.tsx create mode 100644 src/TodoItem.tsx create mode 100644 src/TodoList.tsx create mode 100644 src/hooks.ts delete mode 100644 src/index.css create mode 100644 src/types.ts diff --git a/src/App.tsx b/src/App.tsx index e57a5c7..1242f46 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,35 @@ -import React from "react"; +import React, { useMemo } from "react"; +import CssBaseline from "@mui/material/CssBaseline"; +import useMediaQuery from "@mui/material/useMediaQuery"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; -export const App = () =>
Hello, world
; +import { Layout } from "./Layout"; +import { TodoList } from "./TodoList"; +import { AppBar } from "./AppBar"; +import { TaskItemT } from "./types"; + +const tasks: TaskItemT[] = [ + { text: "test", done: false, id: 0 }, + { text: "Long, a bit tooooooo0000000000oooooo long test", done: true, id: 1 }, +]; + +export const App = () => { + const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + + const theme = useMemo( + () => + createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }), + [prefersDarkMode] + ); + + return ( + + + } + title="My tasks" + content={} + /> + + ); +}; diff --git a/src/AppBar.tsx b/src/AppBar.tsx new file mode 100644 index 0000000..454d029 --- /dev/null +++ b/src/AppBar.tsx @@ -0,0 +1,23 @@ +import { Fab, Box } from "@mui/material"; +import Add from "@mui/icons-material/Add"; +import React from "react"; + +/* TODO: create component for task adding */ + +export const AppBar: React.FC = () => ( + + + + Add a new task + + +); diff --git a/src/Layout.tsx b/src/Layout.tsx new file mode 100644 index 0000000..ba15544 --- /dev/null +++ b/src/Layout.tsx @@ -0,0 +1,27 @@ +import { AppBar, Box, Toolbar, Typography, Checkbox } from "@mui/material"; +import React, { ReactNode } from "react"; + +export type LayoutProps = { + appBar: ReactNode; + content: ReactNode; + title: string; +}; + +export const Layout: React.FC = ({ appBar, content, title }) => ( + <> + theme.spacing(2, 2, 10, 2) }}> + + + {title} + + {content} + + + {appBar} + + +); diff --git a/src/TodoItem.tsx b/src/TodoItem.tsx new file mode 100644 index 0000000..55330bb --- /dev/null +++ b/src/TodoItem.tsx @@ -0,0 +1,41 @@ +import { + Checkbox, + IconButton, + ListItem, + ListItemSecondaryAction, + ListItemText, + TextField, +} from "@mui/material"; +import DeleteOutlined from "@mui/icons-material/DeleteOutlined"; +import React, { useState } from "react"; +import { TaskItemT } from "./types"; + +export type TodoItemProps = { task: TaskItemT }; + +export const TodoItem: React.FC = ({ task }) => { + const { done, text } = task; + + const [editing, setEditing] = useState(false); + + return ( + + + {editing ? ( + setEditing(false)} + > + ) : ( + setEditing(true)} primary={text} /> + )} + + + + + + + ); +}; diff --git a/src/TodoList.tsx b/src/TodoList.tsx new file mode 100644 index 0000000..550e0c3 --- /dev/null +++ b/src/TodoList.tsx @@ -0,0 +1,20 @@ +import { List, Paper } from "@mui/material"; +import React from "react"; +import { TodoItem } from "./TodoItem"; +import { TaskItemT } from "./types"; + +export type TodoListProps = { + tasks: TaskItemT[]; +}; + +export const TodoList: React.FC = ({ tasks }) => { + return ( + + + {tasks.map((task) => ( + + ))} + + + ); +}; diff --git a/src/hooks.ts b/src/hooks.ts new file mode 100644 index 0000000..25d6efb --- /dev/null +++ b/src/hooks.ts @@ -0,0 +1,20 @@ +import { ChangeEventHandler, useState } from "react"; + +export type UseInputValueReturnT = { + onChange: ChangeEventHandler; + submit: () => void; + value: string; +}; + +export const useInputValue = ( + initialValue: string = "", + onSubmit: (value: string) => void +): UseInputValueReturnT => { + const [value, setValue] = useState(initialValue); + + return { + onChange: (e) => setValue(e.currentTarget.value), + submit: () => onSubmit(value), + value, + }; +}; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 2ecc5ad..0000000 --- a/src/index.css +++ /dev/null @@ -1,25 +0,0 @@ -* { - margin: 0; - padding: 0; - -ms-overflow-style: none; - scrollbar-width: none; - box-sizing: border-box; - outline: none; -} - -*::-webkit-scrollbar { - display: none; -} - -body { - font-family: Inter, system-ui, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background: rgba(54, 54, 69, 0.05) none repeat scroll 0% 0%; - color: rgb(54, 54, 69); -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index 0f66784..cfdd49e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,8 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; -import './index.css' - import { App } from "./App"; ReactDOM.render( @@ -11,7 +9,3 @@ ReactDOM.render( , document.getElementById("root") ); - -if (import.meta.hot) { - import.meta.hot.accept(); -} diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..05f36bd --- /dev/null +++ b/src/types.ts @@ -0,0 +1,5 @@ +export type TaskItemT = { + id: number; + text: string; + done: boolean; +};