From d228b4b952284b99f257a4cf725cd1220d010416 Mon Sep 17 00:00:00 2001 From: DTR Date: Sat, 9 Oct 2021 13:35:37 +0300 Subject: [PATCH 01/10] created sidebar --- src/assets/icons/book.svg | 1 + src/assets/icons/mark.svg | 1 + src/components/BurgerMenu/style.scss | 1 + src/components/UserName/index.tsx | 32 +++++++++++++++ src/components/UserName/style.module.scss | 17 ++++++++ src/components/index.tsx | 1 + src/containers/Layout/index.tsx | 28 ++++++++----- src/containers/Layout/style.module.scss | 8 ++++ src/containers/Page/index.tsx | 31 ++++++-------- src/sass/_variables.scss | 7 ++++ .../NavElement/style.module.scss | 3 +- .../components/UserNavigation/index.tsx | 11 +---- .../UserNavigation/style.module.scss | 22 +--------- .../components/UserMenu/style.module.scss | 2 + .../SideBar/components/BarItem/index.tsx | 26 ++++++++++++ .../components/BarItem/style.module.scss | 31 ++++++++++++++ src/sections/SideBar/components/index.ts | 1 + src/sections/SideBar/index.tsx | 40 ++++++++++++++++++- src/sections/SideBar/style.module.scss | 24 +++++++++++ 19 files changed, 224 insertions(+), 63 deletions(-) create mode 100644 src/assets/icons/book.svg create mode 100644 src/assets/icons/mark.svg create mode 100644 src/components/UserName/index.tsx create mode 100644 src/components/UserName/style.module.scss create mode 100644 src/containers/Layout/style.module.scss create mode 100644 src/sections/SideBar/components/BarItem/index.tsx create mode 100644 src/sections/SideBar/components/BarItem/style.module.scss create mode 100644 src/sections/SideBar/components/index.ts create mode 100644 src/sections/SideBar/style.module.scss diff --git a/src/assets/icons/book.svg b/src/assets/icons/book.svg new file mode 100644 index 0000000..9f6133c --- /dev/null +++ b/src/assets/icons/book.svg @@ -0,0 +1 @@ +Book \ No newline at end of file diff --git a/src/assets/icons/mark.svg b/src/assets/icons/mark.svg new file mode 100644 index 0000000..c6cdee7 --- /dev/null +++ b/src/assets/icons/mark.svg @@ -0,0 +1 @@ +Bookmark \ No newline at end of file diff --git a/src/components/BurgerMenu/style.scss b/src/components/BurgerMenu/style.scss index 6374709..91c01ee 100644 --- a/src/components/BurgerMenu/style.scss +++ b/src/components/BurgerMenu/style.scss @@ -6,6 +6,7 @@ padding: 5px; background: none; border: none; + cursor: pointer; display: flex; flex-direction: column; diff --git a/src/components/UserName/index.tsx b/src/components/UserName/index.tsx new file mode 100644 index 0000000..366933a --- /dev/null +++ b/src/components/UserName/index.tsx @@ -0,0 +1,32 @@ +import React, { FC } from "react"; +import { Img } from "components"; +import { useUser } from "providers"; +import css from "./style.module.scss"; +import clsx from "clsx"; + +interface Props { + withoutName?: boolean; + classes?: { + wrapper?: string; + img?: string; + text?: string; + }; +} + +export const UserName: FC = ({ withoutName, classes }) => { + const { user } = useUser(); + return ( +
+ user + {!withoutName && ( +

+ {user?.displayName} +

+ )} +
+ ); +}; diff --git a/src/components/UserName/style.module.scss b/src/components/UserName/style.module.scss new file mode 100644 index 0000000..5419f11 --- /dev/null +++ b/src/components/UserName/style.module.scss @@ -0,0 +1,17 @@ +@import "sass/index"; +$avatarSize: 30px; + +.user { + display: flex; + align-items: center; + + &_avatar { + width: $avatarSize; + height: $avatarSize; + border-radius: 50%; + } + &_name { + white-space: nowrap; + margin-left: 10px; + } +} diff --git a/src/components/index.tsx b/src/components/index.tsx index 919223b..da3700b 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,3 +1,4 @@ export { BurgerMenu } from "./BurgerMenu"; export { Button } from "./Button"; export { Img } from "./Img"; +export { UserName } from "./UserName"; diff --git a/src/containers/Layout/index.tsx b/src/containers/Layout/index.tsx index f593fd9..8744991 100644 --- a/src/containers/Layout/index.tsx +++ b/src/containers/Layout/index.tsx @@ -1,21 +1,27 @@ import { FC, useState } from "react"; +import { BrowserRouter as Router } from "react-router-dom"; +import clsx from "clsx"; + import { Header, SideBar } from "sections"; import { Page } from ".."; +import css from "./style.module.scss"; export const Layout: FC = () => { const [isSideBarOpen, setIsSideBarOpen] = useState(false); return ( -
-
-
- - + +
+
+
+ + +
-
+ ); }; diff --git a/src/containers/Layout/style.module.scss b/src/containers/Layout/style.module.scss new file mode 100644 index 0000000..73abeb7 --- /dev/null +++ b/src/containers/Layout/style.module.scss @@ -0,0 +1,8 @@ +@import "sass/index"; + +.root { +} + +.page { + display: flex; +} diff --git a/src/containers/Page/index.tsx b/src/containers/Page/index.tsx index f0c6de7..a086997 100644 --- a/src/containers/Page/index.tsx +++ b/src/containers/Page/index.tsx @@ -1,29 +1,22 @@ -import { - BrowserRouter as Router, - Switch, - Route, - Redirect, -} from "react-router-dom"; +import { Switch, Route, Redirect } from "react-router-dom"; import { appPageList } from "configs/pages"; export const Page = () => { return ( <>
- - - {appPageList.map(({ component, path, redirect }) => { - if (component) { - return ; - } - if (redirect) { - return ; - } + + {appPageList.map(({ component, path, redirect }) => { + if (component) { + return ; + } + if (redirect) { + return ; + } - return null; - })} - - + return null; + })} +
); diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 09bfbda..4e89933 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -1,7 +1,14 @@ $transition-time: 0.4s; +$long-transition-time: 0.75s; +$lineOpacity: 0.3; $main-functional-color: #0d6efd; $second-functional-color: white; +// $main-light-color: #dedede; + +$line: 1px solid rgba($main-functional-color, $lineOpacity); + +$minimum-screen-width: 320px; /* diff --git a/src/sections/Header/components/UserMenu/components/UserNavigation/NavElement/style.module.scss b/src/sections/Header/components/UserMenu/components/UserNavigation/NavElement/style.module.scss index d3661a7..59c4d6b 100644 --- a/src/sections/Header/components/UserMenu/components/UserNavigation/NavElement/style.module.scss +++ b/src/sections/Header/components/UserMenu/components/UserNavigation/NavElement/style.module.scss @@ -1,5 +1,4 @@ -@import "/src/sass/index"; -$lineOpacity: 0.3; +@import "sass/index"; .root { padding: 0; diff --git a/src/sections/Header/components/UserMenu/components/UserNavigation/index.tsx b/src/sections/Header/components/UserMenu/components/UserNavigation/index.tsx index b94930c..46d5b21 100644 --- a/src/sections/Header/components/UserMenu/components/UserNavigation/index.tsx +++ b/src/sections/Header/components/UserMenu/components/UserNavigation/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect } from "react"; import { PopUpMenu } from "pop-ups"; import { useUser } from "providers"; -import { Img } from "components"; +import { Img, UserName } from "components"; import logOutIconUrl from "assets/icons/log-out.svg"; @@ -38,14 +38,7 @@ export const UserNavigation: FC = ({ anchor, isOpen, onClose }) => { > {user && (
-
- user -

{user?.displayName}

-
+
= ({ name, path, img }) => { + const { pathname } = useLocation(); + return ( + + +

{name}

+ + ); +}; diff --git a/src/sections/SideBar/components/BarItem/style.module.scss b/src/sections/SideBar/components/BarItem/style.module.scss new file mode 100644 index 0000000..5c3b374 --- /dev/null +++ b/src/sections/SideBar/components/BarItem/style.module.scss @@ -0,0 +1,31 @@ +@import "sass/index"; + +$navImgSize: 20px; + +.root { + padding: 5px; + margin: 2px 0; + display: flex; + align-items: center; + color: $main-functional-color; + text-decoration: none; + border-radius: 4px; + + transition: background $transition-time, color $transition-time; + + &_img { + width: $navImgSize; + height: $navImgSize; + margin-right: 5px; + } + &_name { + margin: 0; + font-weight: bold; + font-size: 1.2rem; + } + + &__selected { + background: $main-functional-color; + color: $second-functional-color; + } +} diff --git a/src/sections/SideBar/components/index.ts b/src/sections/SideBar/components/index.ts new file mode 100644 index 0000000..524d305 --- /dev/null +++ b/src/sections/SideBar/components/index.ts @@ -0,0 +1 @@ +export { BarItem } from "./BarItem"; diff --git a/src/sections/SideBar/index.tsx b/src/sections/SideBar/index.tsx index 63d509e..67e5f28 100644 --- a/src/sections/SideBar/index.tsx +++ b/src/sections/SideBar/index.tsx @@ -1,3 +1,39 @@ -export const SideBar = () => { - return
; +import { FC } from "react"; +import clsx from "clsx"; + +import { UserName } from "components"; + +import bookUrl from "assets/icons/book.svg"; +import markUrl from "assets/icons/mark.svg"; + +import { BarItem } from "./components"; +import css from "./style.module.scss"; + +const navigation = [ + { + path: "/main", + name: "Main", + img: markUrl, + }, + { + path: "/notes", + name: "Notes", + img: bookUrl, + }, +]; + +interface Props { + disabled: boolean; +} + +export const SideBar: FC = ({ disabled }) => { + return ( +
+ + + {navigation.map(({ name, path, img }) => ( + + ))} +
+ ); }; diff --git a/src/sections/SideBar/style.module.scss b/src/sections/SideBar/style.module.scss new file mode 100644 index 0000000..519b10d --- /dev/null +++ b/src/sections/SideBar/style.module.scss @@ -0,0 +1,24 @@ +@import "sass/index"; + +.root { + padding: 5px; + + max-width: $minimum-screen-width; + min-width: calc(#{$minimum-screen-width} - 100px); + height: 100%; + overflow: hidden; + transition: max-width $long-transition-time, min-width $long-transition-time, + padding $long-transition-time; + + &__disabled { + max-width: 0; + min-width: 0; + padding-left: 0; + padding-right: 0; + } +} + +.user { + border-bottom: $line; + padding: 5px; +} From 99bcb822f372aee9e24f7068e210c9e1e22107f0 Mon Sep 17 00:00:00 2001 From: DTR Date: Sun, 10 Oct 2021 20:38:11 +0300 Subject: [PATCH 02/10] local card creator done --- package.json | 4 +- src/assets/icons/add.svg | 1 + src/components/Button/index.tsx | 6 +- src/components/Button/style.module.scss | 3 + src/components/Card/index.tsx | 36 ++++++++++ src/components/Card/style.module.scss | 44 ++++++++++++ src/components/Color/index.tsx | 32 +++++++++ src/components/Color/style.module.scss | 16 +++++ src/components/Input/index.tsx | 33 +++++++++ src/components/Input/style.module.scss | 39 +++++++++++ src/components/SideBar/index.tsx | 15 ++++ src/components/SideBar/style.module.scss | 19 +++++ .../SideBarItem}/index.tsx | 4 +- .../SideBarItem}/style.module.scss | 0 src/components/index.tsx | 8 ++- src/configs/pages/types.ts | 2 +- src/containers/App/index.tsx | 2 +- src/containers/App/style.css | 3 - src/containers/App/style.scss | 15 ++++ src/containers/Layout/index.tsx | 25 +++---- src/containers/Page/index.tsx | 8 ++- src/containers/Page/style.module.scss | 3 + src/containers/Providers/index.tsx | 11 ++- src/pages/ErrorPage/index.tsx | 4 +- src/pages/Main/index.tsx | 4 +- .../Creator/components/ColorSelect/index.tsx | 44 ++++++++++++ .../components/ColorSelect/style.module.scss | 22 ++++++ .../Cards/components/Creator/index.tsx | 70 +++++++++++++++++++ .../components/Creator/style.module.scss | 29 ++++++++ .../components/Cards/components/index.ts | 1 + src/pages/Notes/components/Cards/index.tsx | 45 ++++++++++++ .../Notes/components/Cards/style.module.scss | 20 ++++++ src/pages/Notes/components/Tabs/index.tsx | 27 +++++++ .../Notes/components/Tabs/style.module.scss | 11 +++ src/pages/Notes/components/index.ts | 2 + src/pages/Notes/index.tsx | 20 +++++- src/pop-ups/PopUpMenu/index.tsx | 16 ++++- src/pop-ups/PopUpWrapper/index.tsx | 7 +- src/providers/NoteProvider/context.ts | 18 +++++ src/providers/NoteProvider/index.tsx | 60 ++++++++++++++++ src/providers/UserProvider/index.tsx | 10 +-- .../UserNavigation/style.module.scss | 1 + src/sections/Header/index.tsx | 4 +- .../Header/{style.scss => style.module.scss} | 4 ++ src/sections/SideBar/components/index.ts | 1 - src/sections/SideBar/index.tsx | 11 ++- src/sections/SideBar/style.module.scss | 18 ----- src/utils/createGuard.ts | 4 +- 48 files changed, 710 insertions(+), 72 deletions(-) create mode 100644 src/assets/icons/add.svg create mode 100644 src/components/Card/index.tsx create mode 100644 src/components/Card/style.module.scss create mode 100644 src/components/Color/index.tsx create mode 100644 src/components/Color/style.module.scss create mode 100644 src/components/Input/index.tsx create mode 100644 src/components/Input/style.module.scss create mode 100644 src/components/SideBar/index.tsx create mode 100644 src/components/SideBar/style.module.scss rename src/{sections/SideBar/components/BarItem => components/SideBarItem}/index.tsx (89%) rename src/{sections/SideBar/components/BarItem => components/SideBarItem}/style.module.scss (100%) delete mode 100644 src/containers/App/style.css create mode 100644 src/containers/App/style.scss create mode 100644 src/containers/Page/style.module.scss create mode 100644 src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/index.tsx create mode 100644 src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/style.module.scss create mode 100644 src/pages/Notes/components/Cards/components/Creator/index.tsx create mode 100644 src/pages/Notes/components/Cards/components/Creator/style.module.scss create mode 100644 src/pages/Notes/components/Cards/components/index.ts create mode 100644 src/pages/Notes/components/Cards/index.tsx create mode 100644 src/pages/Notes/components/Cards/style.module.scss create mode 100644 src/pages/Notes/components/Tabs/index.tsx create mode 100644 src/pages/Notes/components/Tabs/style.module.scss create mode 100644 src/pages/Notes/components/index.ts create mode 100644 src/providers/NoteProvider/context.ts create mode 100644 src/providers/NoteProvider/index.tsx rename src/sections/Header/{style.scss => style.module.scss} (64%) delete mode 100644 src/sections/SideBar/components/index.ts diff --git a/package.json b/package.json index c82e72c..d1b5a61 100644 --- a/package.json +++ b/package.json @@ -46,5 +46,7 @@ "last 1 safari version" ] }, - "devDependencies": {} + "devDependencies": { + "eslint-plugin-react-hooks": "^4.2.0" + } } diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg new file mode 100644 index 0000000..a627142 --- /dev/null +++ b/src/assets/icons/add.svg @@ -0,0 +1 @@ +Add Circle \ No newline at end of file diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 822f5bc..82171b1 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -16,6 +16,7 @@ export const buttonWeaveAnimation = 700; interface Props extends ButtonHTMLAttributes { upperCase?: boolean; + active?: boolean | { className: string }; } interface ClickAnimation { @@ -30,6 +31,7 @@ export const Button: FC = ({ className, onClick, children, + active, ...props }) => { const [clickAnimation, setClickAnimation] = useState( @@ -68,7 +70,9 @@ export const Button: FC = ({ className={clsx( className, css.Button, - upperCase && css.Button__upperCase + upperCase && css.Button__upperCase, + active && css.Button__active, + typeof active === "string" && active )} onClick={handleOnClick} > diff --git a/src/components/Button/style.module.scss b/src/components/Button/style.module.scss index 77903ca..ec16eb9 100644 --- a/src/components/Button/style.module.scss +++ b/src/components/Button/style.module.scss @@ -48,6 +48,9 @@ &:focus { box-shadow: 0 0 0 0.4rem rgba(13, 110, 253, 0.5); } + &__active { + border-bottom: 2px solid $main-functional-color; + } &__upperCase { text-transform: uppercase; diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 0000000..2dda665 --- /dev/null +++ b/src/components/Card/index.tsx @@ -0,0 +1,36 @@ +import React, { FC } from "react"; +import css from "./style.module.scss"; + +export enum DefaultCardColors { + blue = "#007bff", + green = "#28a745", + red = "#dc3545", + yellow = "#ffc107", + teal = "#17a2b8", + dark = "#343a40", + gray = "#6c757d", +} + +interface Props { + name: string; + title: string; + text: string; + color?: DefaultCardColors | string; +} + +export const Card: FC = ({ + name, + title, + text, + color = DefaultCardColors.blue, +}) => { + return ( +
+
{name}
+
+
{title}
+

{text}

+
+
+ ); +}; diff --git a/src/components/Card/style.module.scss b/src/components/Card/style.module.scss new file mode 100644 index 0000000..1afbd00 --- /dev/null +++ b/src/components/Card/style.module.scss @@ -0,0 +1,44 @@ +@import "sass/index"; + +.root { + background-clip: border-box; + position: relative; + word-wrap: break-word; + + display: flex; + flex-direction: column; + + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 4px; + width: 290px; + min-height: 200px; + margin: 5px; + + text-align: left; + color: white; +} +.name { + padding: 12px 20px; + background: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid rgba(0, 0, 0, 0.125); + font-size: 1.6rem; + + &:first-child { + border-radius: 3px 3px 0 0; + } +} +.body { + flex: 1 1 auto; + padding: 20px; +} +.title { + font-weight: 500; + line-height: 1.2; + font-size: 2rem; + margin: 0; + margin-bottom: 12px; +} +.text { + margin: 0; + font-size: 1.6rem; +} diff --git a/src/components/Color/index.tsx b/src/components/Color/index.tsx new file mode 100644 index 0000000..8d45367 --- /dev/null +++ b/src/components/Color/index.tsx @@ -0,0 +1,32 @@ +import clsx from "clsx"; +import React, { FC, useState } from "react"; +import css from "./style.module.scss"; + +interface Props { + defaultColor?: string; + className?: string; + onChange?: (value: string) => void; +} + +export const Color: FC = ({ + defaultColor = "#ffffff", + className, + onChange, +}) => { + const [color, setColor] = useState(defaultColor); + + return ( +
+ { + const color = target.value; + setColor(color); + onChange && onChange(color); + }} + /> +
+ ); +}; diff --git a/src/components/Color/style.module.scss b/src/components/Color/style.module.scss new file mode 100644 index 0000000..e33995f --- /dev/null +++ b/src/components/Color/style.module.scss @@ -0,0 +1,16 @@ +$size: 20px; + +.root { + width: $size; + height: $size; + border-radius: 50%; + margin: 2px; + position: relative; +} + +.input { + opacity: 0; + position: absolute; + width: 100%; + height: 100%; +} diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx new file mode 100644 index 0000000..8ba6c50 --- /dev/null +++ b/src/components/Input/index.tsx @@ -0,0 +1,33 @@ +import React, { DetailedHTMLProps, FC, InputHTMLAttributes } from "react"; +import clsx from "clsx"; + +import css from "./style.module.scss"; + +interface Props + extends DetailedHTMLProps< + InputHTMLAttributes, + HTMLInputElement + > { + type?: "text" | "number"; + label?: string; +} + +export const Input: FC = ({ + label, + className, + type = "text", + ...props +}) => { + return ( + + ); +}; diff --git a/src/components/Input/style.module.scss b/src/components/Input/style.module.scss new file mode 100644 index 0000000..c3ac46d --- /dev/null +++ b/src/components/Input/style.module.scss @@ -0,0 +1,39 @@ +@import "sass/index"; + +.wrapper { + display: block; +} + +.input { + display: block; + + width: 100%; + padding: 6px 12px; + + font-size: 16px; + line-height: 1.5; + color: #495057; + + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 4px; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + + margin: 0; + overflow: visible; + + &:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 3.5px RGB(0 123 255 / 25%); + } +} + +.label { + color: $main-functional-color; + font-size: 1.4rem; + margin: 0 0 5px; +} diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx new file mode 100644 index 0000000..2ac3858 --- /dev/null +++ b/src/components/SideBar/index.tsx @@ -0,0 +1,15 @@ +import React, { FC } from "react"; +import clsx from "clsx"; +import css from "./style.module.scss"; + +interface Props { + disabled: boolean; +} + +export const SideBar: FC = ({ disabled, children }) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/SideBar/style.module.scss b/src/components/SideBar/style.module.scss new file mode 100644 index 0000000..a80ef9a --- /dev/null +++ b/src/components/SideBar/style.module.scss @@ -0,0 +1,19 @@ +@import "sass/index"; + +.root { + padding: 5px; + + max-width: $minimum-screen-width; + min-width: calc(#{$minimum-screen-width} - 100px); + height: 100%; + overflow: hidden; + transition: max-width $long-transition-time, min-width $long-transition-time, + padding $long-transition-time; + + &__disabled { + max-width: 0; + min-width: 0; + padding-left: 0; + padding-right: 0; + } +} diff --git a/src/sections/SideBar/components/BarItem/index.tsx b/src/components/SideBarItem/index.tsx similarity index 89% rename from src/sections/SideBar/components/BarItem/index.tsx rename to src/components/SideBarItem/index.tsx index 6334758..be750d5 100644 --- a/src/sections/SideBar/components/BarItem/index.tsx +++ b/src/components/SideBarItem/index.tsx @@ -1,10 +1,10 @@ import React, { FC } from "react"; import { Link } from "react-router-dom"; import { useLocation } from "react-router"; +import clsx from "clsx"; import { Img } from "components"; import css from "./style.module.scss"; -import clsx from "clsx"; interface Props { name: string; @@ -12,7 +12,7 @@ interface Props { img?: string; } -export const BarItem: FC = ({ name, path, img }) => { +export const SideBarItem: FC = ({ name, path, img }) => { const { pathname } = useLocation(); return ( JSX.Element) | FC | (() => FC); + component?: FC; redirect?: string; } diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx index bf5c7f6..0a185d2 100644 --- a/src/containers/App/index.tsx +++ b/src/containers/App/index.tsx @@ -1,6 +1,6 @@ import { Layout, Providers } from ".."; -import "./style.css"; +import "./style.scss"; function App() { return ( diff --git a/src/containers/App/style.css b/src/containers/App/style.css deleted file mode 100644 index 4931613..0000000 --- a/src/containers/App/style.css +++ /dev/null @@ -1,3 +0,0 @@ -.App { - text-align: center; -} diff --git a/src/containers/App/style.scss b/src/containers/App/style.scss new file mode 100644 index 0000000..6272068 --- /dev/null +++ b/src/containers/App/style.scss @@ -0,0 +1,15 @@ +@import "sass/index"; + +body { + color: $main-functional-color; +} + +.App { + text-align: center; +} + +p { + font-size: 1.4rem; + margin: 0; + color: inherit; +} diff --git a/src/containers/Layout/index.tsx b/src/containers/Layout/index.tsx index 8744991..8e69e9a 100644 --- a/src/containers/Layout/index.tsx +++ b/src/containers/Layout/index.tsx @@ -1,5 +1,4 @@ import { FC, useState } from "react"; -import { BrowserRouter as Router } from "react-router-dom"; import clsx from "clsx"; import { Header, SideBar } from "sections"; @@ -9,19 +8,17 @@ import css from "./style.module.scss"; export const Layout: FC = () => { const [isSideBarOpen, setIsSideBarOpen] = useState(false); return ( - -
-
-
- - -
+
+
+
+ +
- +
); }; diff --git a/src/containers/Page/index.tsx b/src/containers/Page/index.tsx index a086997..935e208 100644 --- a/src/containers/Page/index.tsx +++ b/src/containers/Page/index.tsx @@ -1,14 +1,16 @@ +import React, { FC } from "react"; import { Switch, Route, Redirect } from "react-router-dom"; import { appPageList } from "configs/pages"; +import css from "./style.module.scss"; -export const Page = () => { +export const Page: FC = () => { return ( <> -
+
{appPageList.map(({ component, path, redirect }) => { if (component) { - return ; + return ; } if (redirect) { return ; diff --git a/src/containers/Page/style.module.scss b/src/containers/Page/style.module.scss new file mode 100644 index 0000000..88de80d --- /dev/null +++ b/src/containers/Page/style.module.scss @@ -0,0 +1,3 @@ +.root { + width: 100%; +} diff --git a/src/containers/Providers/index.tsx b/src/containers/Providers/index.tsx index 408bea1..239eda6 100644 --- a/src/containers/Providers/index.tsx +++ b/src/containers/Providers/index.tsx @@ -1,6 +1,15 @@ import React, { FC } from "react"; +import { BrowserRouter } from "react-router-dom"; + import { UserContextProvider } from "providers"; +import { NotesContextProvider } from "providers/NoteProvider"; export const Providers: FC = ({ children }) => { - return {children}; + return ( + + + {children} + + + ); }; diff --git a/src/pages/ErrorPage/index.tsx b/src/pages/ErrorPage/index.tsx index cdc9c8a..ecb7ddb 100644 --- a/src/pages/ErrorPage/index.tsx +++ b/src/pages/ErrorPage/index.tsx @@ -1,3 +1,5 @@ -export const ErrorPage = () => { +import { FC } from "react"; + +export const ErrorPage: FC = () => { return
404 page
; }; diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 089270f..526ca20 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,3 +1,5 @@ -export const Main = () => { +import { FC } from "react"; + +export const Main: FC = () => { return
Main page
; }; diff --git a/src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/index.tsx b/src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/index.tsx new file mode 100644 index 0000000..877dd99 --- /dev/null +++ b/src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/index.tsx @@ -0,0 +1,44 @@ +import React, { DetailedHTMLProps, FC } from "react"; + +import { Color } from "components"; +import { DefaultCardColors } from "components/Card"; + +import css from "./style.module.scss"; + +interface Props { + onChange: (v: string) => void; +} +interface ColorProps + extends DetailedHTMLProps< + React.HTMLAttributes, + HTMLDivElement + > { + color: string; +} + +const DefaultColor: FC = ({ color, ...props }) => ( +
+); + +const ColorSelect: FC = ({ onChange }) => { + return ( +
+
+

Select Color:

+
+ {Object.values(DefaultCardColors).map((color) => { + return ( + onChange(color)} /> + ); + })} +
+
+
+

Or create custom:

+ +
+
+ ); +}; + +export default ColorSelect; diff --git a/src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/style.module.scss b/src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/style.module.scss new file mode 100644 index 0000000..29eda19 --- /dev/null +++ b/src/pages/Notes/components/Cards/components/Creator/components/ColorSelect/style.module.scss @@ -0,0 +1,22 @@ +.root { +} + +.box { + margin-top: 10px; +} + +.text { + margin-bottom: 3px; +} + +.defaultColorsList { + display: flex; +} + +.defaultColor { + width: 20px; + height: 20px; + cursor: pointer; + border-radius: 50%; + margin: 2px; +} diff --git a/src/pages/Notes/components/Cards/components/Creator/index.tsx b/src/pages/Notes/components/Cards/components/Creator/index.tsx new file mode 100644 index 0000000..6812548 --- /dev/null +++ b/src/pages/Notes/components/Cards/components/Creator/index.tsx @@ -0,0 +1,70 @@ +import React, { ChangeEvent, FC, useState } from "react"; +import { Button, Card, Input } from "components"; +import { NoteElement, useNotes } from "providers/NoteProvider"; + +import ColorSelect from "./components/ColorSelect"; +import css from "./style.module.scss"; + +interface Props { + onClose: () => void; +} + +export const Creator: FC = ({ onClose }) => { + const { addNote } = useNotes(); + const [cardData, setCardData] = useState({ + name: "", + title: "", + text: "", + }); + + const handleChangeName = (ev: ChangeEvent) => { + setCardData({ + ...cardData, + name: ev.target.value, + }); + }; + + const handleChangeTitle = (ev: ChangeEvent) => { + setCardData({ + ...cardData, + title: ev.target.value, + }); + }; + + const handleChangeText = (ev: ChangeEvent) => { + setCardData({ + ...cardData, + text: ev.target.value, + }); + }; + + const handleChangeColor = (value: string) => { + setCardData({ + ...cardData, + color: value, + }); + }; + + const handleCreateNote = (event: React.FormEvent) => { + debugger; + event.preventDefault(); + addNote(cardData, "local"); + setTimeout(() => { + onClose(); + }, 0); + }; + + return ( +
+
+ + + + + + + + +
+ ); +}; diff --git a/src/pages/Notes/components/Cards/components/Creator/style.module.scss b/src/pages/Notes/components/Cards/components/Creator/style.module.scss new file mode 100644 index 0000000..3c8d0b0 --- /dev/null +++ b/src/pages/Notes/components/Cards/components/Creator/style.module.scss @@ -0,0 +1,29 @@ +$padding: 5px; + +.root { + position: absolute; + top: 0; + left: 0; + + background: white; + width: 600px; + padding: $padding; + + display: flex; + justify-content: space-between; + align-items: flex-start; + + & > :last-child { + min-width: 290px; + margin: 0; + } +} + +.control { + width: 100%; + margin-right: $padding; + + & > :nth-child(n) { + margin-top: 10px; + } +} diff --git a/src/pages/Notes/components/Cards/components/index.ts b/src/pages/Notes/components/Cards/components/index.ts new file mode 100644 index 0000000..369db48 --- /dev/null +++ b/src/pages/Notes/components/Cards/components/index.ts @@ -0,0 +1 @@ +export { Creator } from "./Creator"; diff --git a/src/pages/Notes/components/Cards/index.tsx b/src/pages/Notes/components/Cards/index.tsx new file mode 100644 index 0000000..3ef18f3 --- /dev/null +++ b/src/pages/Notes/components/Cards/index.tsx @@ -0,0 +1,45 @@ +import React, { useRef, useState } from "react"; + +import { Card } from "components"; + +import addIconUrl from "assets/icons/add.svg"; +import css from "./style.module.scss"; +import { Creator } from "./components"; +import { PopUpMenu } from "pop-ups"; +import { useNotes } from "providers/NoteProvider"; + +export const Cards = () => { + const { notes } = useNotes(); + const [creatorIsOpen, setCreatorIsOpen] = useState(false); + const addButtonRef = useRef(null); + + const closeCreator = () => setCreatorIsOpen(false); + const openCreator = () => setCreatorIsOpen(true); + + return ( +
+ + + + + + +
+ {notes.local.map((note) => { + return ; + })} +
+
+ ); +}; diff --git a/src/pages/Notes/components/Cards/style.module.scss b/src/pages/Notes/components/Cards/style.module.scss new file mode 100644 index 0000000..4131350 --- /dev/null +++ b/src/pages/Notes/components/Cards/style.module.scss @@ -0,0 +1,20 @@ +$img-size: 30px; + +.root { +} +.addButton { + background: transparent; + border: none; + display: block; + cursor: pointer; + + &__img { + width: $img-size; + height: $img-size; + } +} + +.cardWrapper { + display: flex; + flex-wrap: wrap; +} diff --git a/src/pages/Notes/components/Tabs/index.tsx b/src/pages/Notes/components/Tabs/index.tsx new file mode 100644 index 0000000..2c002b1 --- /dev/null +++ b/src/pages/Notes/components/Tabs/index.tsx @@ -0,0 +1,27 @@ +import React, { FC } from "react"; +import { Button } from "components"; + +import css from "./style.module.scss"; +import clsx from "clsx"; + +interface Props { + tabList: string[]; + activeTab: string; + changeActiveTab: (value: string) => void; +} + +export const Tabs: FC = ({ tabList, activeTab, changeActiveTab }) => { + return ( +
+ {tabList.map((item) => ( + + ))} +
+ ); +}; diff --git a/src/pages/Notes/components/Tabs/style.module.scss b/src/pages/Notes/components/Tabs/style.module.scss new file mode 100644 index 0000000..de48bd0 --- /dev/null +++ b/src/pages/Notes/components/Tabs/style.module.scss @@ -0,0 +1,11 @@ +.root { + width: 100%; + padding: 5px; + display: flex; + justify-content: flex-end; + flex-wrap: wrap; +} + +.tab { + margin: 0 5px; +} diff --git a/src/pages/Notes/components/index.ts b/src/pages/Notes/components/index.ts new file mode 100644 index 0000000..434706b --- /dev/null +++ b/src/pages/Notes/components/index.ts @@ -0,0 +1,2 @@ +export { Tabs } from "./Tabs"; +export { Cards } from "./Cards"; diff --git a/src/pages/Notes/index.tsx b/src/pages/Notes/index.tsx index 670cbd3..ddff526 100644 --- a/src/pages/Notes/index.tsx +++ b/src/pages/Notes/index.tsx @@ -1,5 +1,19 @@ -import React from "react"; +import React, { FC, useState } from "react"; -export const Notes = () => { - return
Notes PAge
; +import { Cards, Tabs } from "./components"; + +const tabList = ["Local", "Cloud"]; + +export const Notes: FC = () => { + const [activeTab, setActiveTab] = useState(tabList[0]); + const changeActiveTab = (value: string) => { + setActiveTab(value); + }; + + return ( +
+ + +
+ ); }; diff --git a/src/pop-ups/PopUpMenu/index.tsx b/src/pop-ups/PopUpMenu/index.tsx index d06f0d5..019937f 100644 --- a/src/pop-ups/PopUpMenu/index.tsx +++ b/src/pop-ups/PopUpMenu/index.tsx @@ -1,21 +1,31 @@ import clsx from "clsx"; -import React, { FC, useEffect, useMemo, useRef, useState } from "react"; +import React, { FC, useEffect, useMemo, useState } from "react"; import { PopUpWrapper } from "pop-ups"; import { createGuard } from "utils"; +import { PopUpFrameBackground } from "pop-ups/PopUpWrapper"; + import css from "./style.module.scss"; interface Props { anchor?: HTMLElement | Element | null; isOpen: boolean; onClose: () => void; + background?: PopUpFrameBackground; } -export const PopUpMenu: FC = ({ children, anchor, isOpen, onClose }) => { +export const PopUpMenu: FC = ({ + children, + anchor, + isOpen, + onClose, + background = "transparent", +}) => { const [rootElement, setRootElement] = useState(null); const [isClosed, setIsClosed] = useState(true); const menuPosition = useMemo(() => { const elementGuard = createGuard("offsetLeft"); + if (anchor && elementGuard(anchor) && rootElement) { let top = anchor.offsetTop + anchor.offsetHeight; let left = anchor.offsetLeft + anchor.offsetWidth / 2; @@ -67,7 +77,7 @@ export const PopUpMenu: FC = ({ children, anchor, isOpen, onClose }) => { } return ( - +
setRootElement(node)} diff --git a/src/pop-ups/PopUpWrapper/index.tsx b/src/pop-ups/PopUpWrapper/index.tsx index d327799..a2fdb9c 100644 --- a/src/pop-ups/PopUpWrapper/index.tsx +++ b/src/pop-ups/PopUpWrapper/index.tsx @@ -3,17 +3,20 @@ import { createPortal } from "react-dom"; import clsx from "clsx"; import css from "./style.module.scss"; +export type PopUpFrameBackground = "transparent" | "dark"; + interface Props { - background?: "transparent" | "dark"; + background?: PopUpFrameBackground; frameOnClick?: () => void; } +const rootDom = document.getElementById("pop-up"); + export const PopUpWrapper: FC = ({ children, background = "transparent", frameOnClick, }) => { - const rootDom = document.querySelector("#pop-up"); const stopPropagation = useCallback((event: MouseEvent) => { event.stopPropagation(); }, []); diff --git a/src/providers/NoteProvider/context.ts b/src/providers/NoteProvider/context.ts new file mode 100644 index 0000000..f6106f4 --- /dev/null +++ b/src/providers/NoteProvider/context.ts @@ -0,0 +1,18 @@ +import { createContext } from "react"; +import { NoteElement, Notes } from "."; + +interface NoteContext { + notes: Notes; + setNotes: React.Dispatch>; + addNote: (value: NoteElement, place: keyof Notes) => void; +} + +const defaultContext: NoteContext = { + notes: { + cloud: [], + local: [], + }, + setNotes: () => null, + addNote: () => null, +}; +export const NotesContext = createContext(defaultContext); diff --git a/src/providers/NoteProvider/index.tsx b/src/providers/NoteProvider/index.tsx new file mode 100644 index 0000000..ca8eba3 --- /dev/null +++ b/src/providers/NoteProvider/index.tsx @@ -0,0 +1,60 @@ +import { FC, useContext, useEffect, useState } from "react"; + +import { NotesContext } from "./context"; + +export interface NoteElement { + name: string; + title: string; + text: string; + color?: string; +} + +export interface Notes { + local: NoteElement[]; + cloud: NoteElement[]; +} + +const localNotesName = "localNotes"; + +export const NotesContextProvider: FC = ({ children }) => { + const [notes, setNotes] = useState({ + cloud: [], + local: [], + }); + + const addNote = (value: NoteElement, place: "local" | "cloud") => { + setNotes({ + ...notes, + [place]: [...notes.local, value], + }); + }; + + useEffect(() => { + const local = JSON.parse( + localStorage.getItem(localNotesName) || "[]" + ) as NoteElement[]; + + setNotes({ + ...notes, + local, + }); + }, []); + + useEffect(() => { + localStorage.setItem(localNotesName, JSON.stringify(notes.local)); + }, [notes.local]); + + return ( + + {children} + + ); +}; + +export const useNotes = () => useContext(NotesContext); diff --git a/src/providers/UserProvider/index.tsx b/src/providers/UserProvider/index.tsx index e63d1af..20193d2 100644 --- a/src/providers/UserProvider/index.tsx +++ b/src/providers/UserProvider/index.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useContext, useEffect, useState } from "react"; +import { FC, useContext, useEffect, useState } from "react"; import { User } from "@firebase/auth"; import { @@ -12,13 +12,13 @@ import { UserContext } from "./context"; export const UserContextProvider: FC = ({ children }) => { const [user, setUser] = useState(null); - const checkAuth = useCallback(() => { + const checkAuth = () => { getAuthResult((user) => setUser(user)); - }, []); + }; const logIn = () => { fireBaseAuth((user) => setUser(user)); }; - const logOut = useCallback(() => { + const logOut = () => { const deleteUser = () => setUser(null); const getMessage = (type: AuthStatus) => { console.log("log out status:", type); @@ -28,7 +28,7 @@ export const UserContextProvider: FC = ({ children }) => { }; getLogOut(deleteUser, getMessage); - }, []); + }; useEffect(() => { checkAuth(); diff --git a/src/sections/Header/components/UserMenu/components/UserNavigation/style.module.scss b/src/sections/Header/components/UserMenu/components/UserNavigation/style.module.scss index a6f3ba5..58a37d1 100644 --- a/src/sections/Header/components/UserMenu/components/UserNavigation/style.module.scss +++ b/src/sections/Header/components/UserMenu/components/UserNavigation/style.module.scss @@ -6,6 +6,7 @@ box-shadow: 0px 5px 10px 4px rgba(0, 0, 0, 0.3); border-radius: 5px; + background: white; } .navigation { diff --git a/src/sections/Header/index.tsx b/src/sections/Header/index.tsx index 00b5210..b6ef9c4 100644 --- a/src/sections/Header/index.tsx +++ b/src/sections/Header/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from "react"; import { BurgerMenu } from "components"; import { UserMenu } from "./components"; -import "./style.scss"; +import css from "./style.module.scss"; interface Props { isSideBarOpen: boolean; @@ -11,7 +11,7 @@ interface Props { export const Header: FC = ({ isSideBarOpen, setIsSideBarOpen }) => { return ( -
+
= ({ disabled }) => { return ( -
+ - {navigation.map(({ name, path, img }) => ( - + ))} -
+ ); }; diff --git a/src/sections/SideBar/style.module.scss b/src/sections/SideBar/style.module.scss index 519b10d..c7b8726 100644 --- a/src/sections/SideBar/style.module.scss +++ b/src/sections/SideBar/style.module.scss @@ -1,23 +1,5 @@ @import "sass/index"; -.root { - padding: 5px; - - max-width: $minimum-screen-width; - min-width: calc(#{$minimum-screen-width} - 100px); - height: 100%; - overflow: hidden; - transition: max-width $long-transition-time, min-width $long-transition-time, - padding $long-transition-time; - - &__disabled { - max-width: 0; - min-width: 0; - padding-left: 0; - padding-right: 0; - } -} - .user { border-bottom: $line; padding: 5px; diff --git a/src/utils/createGuard.ts b/src/utils/createGuard.ts index 62eece1..42ed50a 100644 --- a/src/utils/createGuard.ts +++ b/src/utils/createGuard.ts @@ -5,6 +5,8 @@ export function createGuard(checkedKey: string) { } //@ts-ignore - return !!(value as Type)[checkedKey]; + const result = (value as Type)[checkedKey]; + + return !!result || result === 0; }; } From e1cfac84c48cd45f80b0b67b22de441e087c143e Mon Sep 17 00:00:00 2001 From: DTR Date: Sun, 17 Oct 2021 17:07:20 +0300 Subject: [PATCH 03/10] connected firebase hosting --- .firebase/hosting.YnVpbGQ.cache | 18 ++++ .firebaserc | 5 ++ .github/workflows/firebase-hosting-merge.yml | 20 +++++ .../firebase-hosting-pull-request.yml | 17 ++++ firebase.json | 12 +++ n/index.html | 89 +++++++++++++++++++ package.json | 2 +- 7 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 .firebase/hosting.YnVpbGQ.cache create mode 100644 .firebaserc create mode 100644 .github/workflows/firebase-hosting-merge.yml create mode 100644 .github/workflows/firebase-hosting-pull-request.yml create mode 100644 firebase.json create mode 100644 n/index.html diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache new file mode 100644 index 0000000..f00fdd1 --- /dev/null +++ b/.firebase/hosting.YnVpbGQ.cache @@ -0,0 +1,18 @@ +asset-manifest.json,1634478865426,c954252d91e2c750f5f91304a4f39bec55afaca7b886cfe8a9e494123f821d61 +favicon.ico,499162500000,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 +index.html,1634478865428,f01940ab8c2edf9b8a1c580110f41c21c7717afa60304fac407b24db5c366d85 +manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a +robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 +static/js/2.01106e8d.chunk.js.LICENSE.txt,1634478865461,aea587baccbeb03e4b14386f5248ba83b32bc7d6da081537025be9ebb4ad69b5 +static/css/main.2d2b08b8.chunk.css,1634478865462,4ed2acb9a2fff0c9b853d78de3422b7ed54ca29c44f228e125f403db27b79e3e +static/css/main.2d2b08b8.chunk.css.map,1634478865462,261cf54e124549984bcaa1ced3c0d197540a68413bfb9ec846b72b7d9b4cff78 +static/js/main.32e1e7e1.chunk.js,1634478865461,a017b00191b4b5468630e182eb318f9058d6764ad3e45169bb63ee2d8b3ee15d +static/js/runtime-main.c78050a0.js,1634478865462,ae6a81da94288cb9dcbc73b48edd6a0850a6e9ee4c5618b5aef2804a6ffb4d28 +static/js/runtime-main.c78050a0.js.map,1634478865463,25bc469baa6b13a87732cd282070e39fbf9590662fde81509502d649523d4632 +static/media/add.0a53e6f3.svg,1634478865460,683f6f4a31e2204308448ddb626c23630d0900d649149c7cc52e272b6d90006d +static/media/book.600ff157.svg,1634478865461,f3d8abdf23b8973caa30998dcfec039dde9edb8b537e99870130ec9f045bc72e +static/media/log-out.316dd325.svg,1634478865451,0e090b6705dddb34364f9f09d229d055622b7971a3db14298bc7025510eba25e +static/media/mark.8d793b5c.svg,1634478865461,fb0df75a487c7e1e0ec8bde61f69742bd55070af9c36d754e6bbd4332cec1863 +static/js/main.32e1e7e1.chunk.js.map,1634478865464,96527a9ced5e7d43002d5c77ae63d6793abed9a800c599f335b7fd434e606b31 +static/js/2.01106e8d.chunk.js,1634478865461,01a539c104f4e17507fc8ff4856eea72b7282ba73dca9dec385e87c9ce7f6106 +static/js/2.01106e8d.chunk.js.map,1634478865465,7bfc0821757641bbcef3fabd552115b4aef1a5a661bf90975c8a5e11c8a5c7b5 diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..f5fe2ed --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "notr-6524b" + } +} diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml new file mode 100644 index 0000000..e7a598f --- /dev/null +++ b/.github/workflows/firebase-hosting-merge.yml @@ -0,0 +1,20 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on merge +'on': + push: + branches: + - main +jobs: + build_and_deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - run: npm ci && npm run build + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_NOTR_6524B }}' + channelId: live + projectId: notr-6524b diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml new file mode 100644 index 0000000..cb29a1b --- /dev/null +++ b/.github/workflows/firebase-hosting-pull-request.yml @@ -0,0 +1,17 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on PR +'on': pull_request +jobs: + build_and_preview: + if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - run: npm ci && npm run build + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_NOTR_6524B }}' + projectId: notr-6524b diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..cfbc74c --- /dev/null +++ b/firebase.json @@ -0,0 +1,12 @@ +{ + "hosting": { + "public": "build", + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} diff --git a/n/index.html b/n/index.html new file mode 100644 index 0000000..9b861c2 --- /dev/null +++ b/n/index.html @@ -0,0 +1,89 @@ + + + + + + Welcome to Firebase Hosting + + + + + + + + + + + + + + + + + + + +
+

Welcome

+

Firebase Hosting Setup Complete

+

You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

+ Open Hosting Documentation +
+

Firebase SDK Loading…

+ + + + diff --git a/package.json b/package.json index d1b5a61..337712b 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "deploy": "npm run build && gh-pages -d build" + "deploy": "npm run build && firebase deploy" }, "eslintConfig": { "extends": [ From 345fbfc6c5890d6b10fc0905823996e24ab5155f Mon Sep 17 00:00:00 2001 From: DTR Date: Sun, 17 Oct 2021 17:07:39 +0300 Subject: [PATCH 04/10] fix --- n/index.html | 89 ---------------------------------------------------- 1 file changed, 89 deletions(-) delete mode 100644 n/index.html diff --git a/n/index.html b/n/index.html deleted file mode 100644 index 9b861c2..0000000 --- a/n/index.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - Welcome to Firebase Hosting - - - - - - - - - - - - - - - - - - - -
-

Welcome

-

Firebase Hosting Setup Complete

-

You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

- Open Hosting Documentation -
-

Firebase SDK Loading…

- - - - From eba8a3c5df08718e8181a355404fa6acab7c6c0f Mon Sep 17 00:00:00 2001 From: Dead-TR Date: Sun, 7 Nov 2021 13:29:41 +0200 Subject: [PATCH 05/10] add card fix mobile layout + create delete card func --- src/assets/icons/close.svg | 1 + src/components/Card/index.tsx | 29 +++++++- src/components/Card/style.module.scss | 17 +++++ src/components/Input/index.tsx | 12 +++- src/configs/general.ts | 4 ++ src/configs/style.module.scss | 1 + src/hooks/index.ts | 1 + src/hooks/useWindowSize.ts | 24 +++++++ .../Creator/components/ColorSelect/index.tsx | 10 ++- .../Cards/components/Creator/index.tsx | 48 +++++++++++-- .../components/Creator/style.module.scss | 68 +++++++++++++++++-- src/pages/Notes/components/Cards/index.tsx | 25 ++++--- src/pop-ups/Modal/index.tsx | 31 +++++++++ src/pop-ups/Modal/style.module.scss | 18 +++++ src/pop-ups/PopUpMenu/index.tsx | 3 +- src/pop-ups/PopUpWrapper/index.tsx | 16 ++--- src/pop-ups/index.ts | 3 + src/pop-ups/types.ts | 12 ++++ src/providers/NoteProvider/index.tsx | 2 +- src/sass/_variables.scss | 6 ++ 20 files changed, 290 insertions(+), 41 deletions(-) create mode 100644 src/assets/icons/close.svg create mode 100644 src/configs/general.ts create mode 100644 src/configs/style.module.scss create mode 100644 src/hooks/useWindowSize.ts create mode 100644 src/pop-ups/Modal/index.tsx create mode 100644 src/pop-ups/Modal/style.module.scss create mode 100644 src/pop-ups/types.ts diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 0000000..5b0112c --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1 @@ +Close Circle \ No newline at end of file diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 2dda665..2de2161 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -1,4 +1,8 @@ import React, { FC } from "react"; +import clsx from "clsx"; + +import closeURL from "assets/icons/close.svg"; + import css from "./style.module.scss"; export enum DefaultCardColors { @@ -16,6 +20,12 @@ interface Props { title: string; text: string; color?: DefaultCardColors | string; + + classes?: { + root?: string; + }; + + deleteCard?: () => void; } export const Card: FC = ({ @@ -23,10 +33,25 @@ export const Card: FC = ({ title, text, color = DefaultCardColors.blue, + classes, + deleteCard, }) => { return ( -
-
{name}
+
+
+ {name} + {!!deleteCard && ( + Delete Card + )} +
{title}

{text}

diff --git a/src/components/Card/style.module.scss b/src/components/Card/style.module.scss index 1afbd00..48add56 100644 --- a/src/components/Card/style.module.scss +++ b/src/components/Card/style.module.scss @@ -1,5 +1,8 @@ @import "sass/index"; +$iconSize: 25px; +$iconMargin: 10px; + .root { background-clip: border-box; position: relative; @@ -22,6 +25,9 @@ background: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); font-size: 1.6rem; + min-height: 45px; + + position: relative; &:first-child { border-radius: 3px 3px 0 0; @@ -42,3 +48,14 @@ margin: 0; font-size: 1.6rem; } + +.deleteIcon { + width: $iconSize; + height: $iconSize; + + position: absolute; + right: 10px; + top: 10px; + + cursor: pointer; +} diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 8ba6c50..3fff594 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -10,19 +10,27 @@ interface Props > { type?: "text" | "number"; label?: string; + + classes?: { + label?: string; + input?: string; + }; } export const Input: FC = ({ label, className, type = "text", + classes, ...props }) => { return (