PR #2

.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,18 @@
+favicon.ico,499162500000,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
+manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+asset-manifest.json,1638706700478,eb7ec3814a623a8505b0c23598eeedd98555dbb322e2338058f425fcddc5f647
+index.html,1638706700478,6f81e7693be702d362f54816d45b92b20814993e97580ce9c16dcea45d4599a7
+static/css/main.622cf653.chunk.css,1638706700499,da9d1cd64cac094f79ee2d9ad943cddbd4ec9fdb234890cedd51dc85af8abbf6
+static/js/2.3ebbb465.chunk.js.LICENSE.txt,1638706700504,778549c2e183347c9a3e4ec088f4ee92fe68ee391b2593ae4642eafc59aea763
+static/css/main.622cf653.chunk.css.map,1638706700502,000c08c2c7d95e7fb51daadc7c80235f8ff7abd5052564b001ade20bb56002a6
+static/js/main.60c4126d.chunk.js,1638706700500,4772b4eefa70829282876b9b8766febf28df46bd25e1b5bf7467522816872732
+static/js/runtime-main.c78050a0.js,1638706700502,ae6a81da94288cb9dcbc73b48edd6a0850a6e9ee4c5618b5aef2804a6ffb4d28
+static/js/runtime-main.c78050a0.js.map,1638706700504,25bc469baa6b13a87732cd282070e39fbf9590662fde81509502d649523d4632
+static/media/add.0a53e6f3.svg,1638706700502,683f6f4a31e2204308448ddb626c23630d0900d649149c7cc52e272b6d90006d
+static/media/book.600ff157.svg,1638706700501,f3d8abdf23b8973caa30998dcfec039dde9edb8b537e99870130ec9f045bc72e
+static/media/close.7704b6d5.svg,1638706700499,ee6b0b0cac9bf89c73a44c14376a4766b9709199d302973344291cf92abc6845
+static/media/log-out.316dd325.svg,1638706700500,0e090b6705dddb34364f9f09d229d055622b7971a3db14298bc7025510eba25e
+static/js/main.60c4126d.chunk.js.map,1638706700502,8ad5f89fb798d942f1a8bb3df622a6ecf67c505c05a8b9d6628b1f302ef23add
+static/js/2.3ebbb465.chunk.js,1638706700500,4bf057d302fdf47adc653639983ea70d9334f5c9db403fdfe9681617899e1287
+static/js/2.3ebbb465.chunk.js.map,1638706700504,ec3d364b776397be250ca6ab5b9c321cc651f7bd7eab643720a3f6ef9565d367

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "notr-6524b"
+  }
+}

.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

.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

README.md

@@ -1 +1,3 @@
-# NoTR
+# Простий нотатник
+
+[Прев'ю](https://notr-6524b.web.app/notes)

firebase.json

@@ -0,0 +1,12 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

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": [
@@ -46,5 +46,7 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "eslint-plugin-react-hooks": "^4.2.0"
+  }
 }

src/components/BurgerMenu/style.scss

@@ -6,6 +6,7 @@
   padding: 5px;
   background: none;
   border: none;
+  cursor: pointer;
 
   display: flex;
   flex-direction: column;

src/components/Button/index.tsx

@@ -16,6 +16,7 @@ export const buttonWeaveAnimation = 700;
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   upperCase?: boolean;
+  active?: boolean | { className: string };
 }
 
 interface ClickAnimation {
@@ -30,6 +31,7 @@ export const Button: FC<Props> = ({
   className,
   onClick,
   children,
+  active,
   ...props
 }) => {
   const [clickAnimation, setClickAnimation] = useState<ClickAnimation | null>(
@@ -68,7 +70,9 @@ export const Button: FC<Props> = ({
       className={clsx(
         className,
         css.Button,
-        upperCase && css.Button__upperCase
+        upperCase && css.Button__upperCase,
+        active && css.Button__active,
+        typeof active === "string" && active
       )}
       onClick={handleOnClick}
     >

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;

src/components/Card/index.tsx

@@ -0,0 +1,61 @@
+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 {
+  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;
+
+  classes?: {
+    root?: string;
+  };
+
+  deleteCard?: () => void;
+}
+
+export const Card: FC<Props> = ({
+  name,
+  title,
+  text,
+  color = DefaultCardColors.blue,
+  classes,
+  deleteCard,
+}) => {
+  return (
+    <div
+      className={clsx(css.root, classes?.root)}
+      style={{ background: color }}
+    >
+      <div className={css.name}>
+        {name}
+        {!!deleteCard && (
+          <img
+            src={closeURL}
+            alt="Delete Card"
+            className={css.deleteIcon}
+            onClick={deleteCard}
+          />
+        )}
+      </div>
+      <div className={css.body}>
+        <h5 className={css.title}>{title}</h5>
+        <p className={css.text}>{text}</p>
+      </div>
+    </div>
+  );
+};

src/components/Card/style.module.scss

@@ -0,0 +1,61 @@
+@import "sass/index";
+
+$iconSize: 25px;
+$iconMargin: 10px;
+
+.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;
+  min-height: 45px;
+
+  position: relative;
+
+  &: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;
+}
+
+.deleteIcon {
+  width: $iconSize;
+  height: $iconSize;
+
+  position: absolute;
+  right: 10px;
+  top: 10px;
+
+  cursor: pointer;
+}

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<Props> = ({
+  defaultColor = "#ffffff",
+  className,
+  onChange,
+}) => {
+  const [color, setColor] = useState(defaultColor);
+
+  return (
+    <div className={clsx(css.root, className)} style={{ background: color }}>
+      <input
+        type="color"
+        className={css.input}
+        value={color}
+        onChange={({ target }) => {
+          const color = target.value;
+          setColor(color);
+          onChange && onChange(color);
+        }}
+      />
+    </div>
+  );
+};

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%;
+}

src/components/Input/index.tsx

@@ -0,0 +1,41 @@
+import React, { DetailedHTMLProps, FC, InputHTMLAttributes } from "react";
+import clsx from "clsx";
+
+import css from "./style.module.scss";
+
+interface Props
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  type?: "text" | "number";
+  label?: string;
+
+  classes?: {
+    label?: string;
+    input?: string;
+  };
+}
+
+export const Input: FC<Props> = ({
+  label,
+  className,
+  type = "text",
+  classes,
+  ...props
+}) => {
+  return (
+    <label className={css.wrapper}>
+      {label ? (
+        <p className={clsx(css.label, classes?.label)}>{label}</p>
+      ) : null}
+      <input
+        className={clsx(css.input, className, classes?.input)}
+        {...{
+          type,
+          ...props,
+        }}
+      />
+    </label>
+  );
+};