From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: chore!: restructure repo

I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
---
 .../src/components/layout/Footer/Footer.css        |   8 ++
 .../src/components/layout/Footer/Footer.js         |  11 +++
 .../src/components/layout/Header/Header.css        |   7 ++
 .../src/components/layout/Header/Header.js         |  12 +++
 .../notebook/src/components/layout/Main/Main.css   |   3 +
 .../notebook/src/components/layout/Main/Main.js    |   7 ++
 .../notebook/src/components/layout/Nav/Nav.css     |  65 +++++++++++++
 .../apps/notebook/src/components/layout/Nav/Nav.js |  62 ++++++++++++
 .../notebook/src/components/layout/Nav/NavJump.js  |  28 ++++++
 .../notebook/src/components/layout/Page/Cover.css  |  30 ++++++
 .../notebook/src/components/layout/Page/Page.css   |  83 ++++++++++++++++
 .../notebook/src/components/layout/Page/Page.js    | 107 +++++++++++++++++++++
 .../src/components/layout/Page/PageToolbar.js      |  27 ++++++
 .../apps/notebook/src/components/layout/index.js   |   7 ++
 14 files changed, 457 insertions(+)
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.css
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.css
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.css
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Cover.css
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/PageToolbar.js
 create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/index.js

(limited to 'public/projects/react-small-apps/apps/notebook/src/components/layout')

diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.css
new file mode 100644
index 0000000..31db439
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.css
@@ -0,0 +1,8 @@
+.footer {
+  padding: 0 0 1rem;
+}
+
+.footer__copyright {
+  font-size: 0.9rem;
+  text-align: center;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.js
new file mode 100644
index 0000000..20a87f2
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.js
@@ -0,0 +1,11 @@
+import "./Footer.css";
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <p className="footer__copyright">Notebook. MIT 2021. Armand Philippot.</p>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.css
new file mode 100644
index 0000000..a413a4f
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.css
@@ -0,0 +1,7 @@
+.header {
+  padding: 1rem 0 0;
+}
+
+.header__branding {
+  font-size: 2.5rem;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.js
new file mode 100644
index 0000000..03757fa
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.js
@@ -0,0 +1,12 @@
+import "./Header.css";
+
+function Header({ children }) {
+  return (
+    <header className="header">
+      <h1 className="header__branding">Notebook</h1>
+      {children}
+    </header>
+  );
+}
+
+export default Header;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.css
new file mode 100644
index 0000000..f6ee8fe
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.css
@@ -0,0 +1,3 @@
+.main {
+  flex: 1;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.js
new file mode 100644
index 0000000..23e7b9d
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.js
@@ -0,0 +1,7 @@
+import "./Main.css";
+
+function Main({ children }) {
+  return <main className="main">{children}</main>;
+}
+
+export default Main;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css
new file mode 100644
index 0000000..9f5f90c
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css
@@ -0,0 +1,65 @@
+.nav {
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin: 2rem auto 0;
+}
+
+.nav .list--nav {
+  list-style-type: none;
+  position: absolute;
+  bottom: 100%;
+  width: 80vw;
+  margin: 0;
+  padding: 1rem;
+  background: #fff;
+  border: 1px solid #ccc;
+}
+
+@media screen and (min-width: 1024px) {
+  .nav .list--nav {
+    width: 50%;
+  }
+}
+
+.nav__link {
+  background: #fff;
+  border: none;
+  color: hsl(212, 46%, 34%);
+  text-decoration: underline;
+  display: inline-block;
+  margin: 0 1px;
+  padding: 0.8rem 1rem;
+}
+
+.nav .list__link {
+  display: block;
+  padding: 0.2rem;
+}
+
+.nav .list__link--current {
+  background: hsl(212, 46%, 34%);
+  color: #fff;
+}
+
+.nav__link:hover,
+.nav__link:focus,
+.nav .list__link:hover,
+.nav .list__link:focus {
+  text-decoration-thickness: 4px;
+}
+
+.nav__link:focus,
+.nav .list__link:focus {
+  color: inherit;
+}
+
+.nav .list__link--current:focus {
+  color: hsl(0, 0%, 89%);
+}
+
+.nav__link:active {
+  color: hsl(212, 46%, 20%);
+  text-decoration-thickness: 2px;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js
new file mode 100644
index 0000000..4e2a916
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "../../commons";
+import NavJump from "./NavJump";
+import "./Nav.css";
+
+function Nav({ pages, currentPage, addNewPage, isPageExists }) {
+  const [isJumpEnabled, setIsJumpEnabled] = useState(false);
+
+  const isCover = () => currentPage && currentPage.id === 0;
+  const isFirstPage = () => currentPage && currentPage.id === 1;
+  const is404 = () => currentPage && currentPage.id === null;
+
+  useEffect(() => {
+    setIsJumpEnabled(false);
+  }, [currentPage.id]);
+
+  return (
+    <nav
+      className="nav"
+      onBlur={(e) => !e.relatedTarget && setIsJumpEnabled(false)}
+    >
+      {!isCover() && (
+        <Link className="nav__link" to="/" onClick={(e) => e.target.blur()}>
+          Back to cover
+        </Link>
+      )}
+      {!isCover() && !isFirstPage() && isPageExists(currentPage.id - 1) && (
+        <Link
+          className="nav__link"
+          to={`/page/${currentPage.id - 1}`}
+          onFocus={() => setIsJumpEnabled(false)}
+          onClick={(e) => e.target.blur()}
+        >
+          Previous page
+        </Link>
+      )}
+      <Button
+        additionalClassnames="nav__link"
+        onClickHandler={() => setIsJumpEnabled(!isJumpEnabled)}
+      >
+        Jump to
+      </Button>
+      {isJumpEnabled && <NavJump pages={pages} />}
+      {!is404() && (
+        <Link
+          className="nav__link"
+          to={`/page/${currentPage.id + 1}`}
+          onClick={(e) => {
+            !isPageExists(currentPage.id + 1) && addNewPage();
+            e.target.blur();
+          }}
+          onFocus={() => setIsJumpEnabled(false)}
+        >
+          Next page
+        </Link>
+      )}
+    </nav>
+  );
+}
+
+export default Nav;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js
new file mode 100644
index 0000000..9d2a049
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js
@@ -0,0 +1,28 @@
+import { NavLink } from "react-router-dom";
+import { List } from "../../commons";
+
+function NavJump({ pages }) {
+  const links = pages
+    .filter((page) => page.id > 0)
+    .map((page) => {
+      return {
+        id: page.id,
+        body: (
+          <NavLink
+            key={page.id}
+            className={({ isActive }) =>
+              isActive ? "list__link--current" : "list__link"
+            }
+            aria-current="page"
+            to={page.url}
+          >
+            {page.title}
+          </NavLink>
+        ),
+      };
+    });
+
+  return <List data={links} modifier="nav" />;
+}
+
+export default NavJump;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Cover.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Cover.css
new file mode 100644
index 0000000..bf915dd
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Cover.css
@@ -0,0 +1,30 @@
+.notebook--cover .notebook-page--mirror {
+  display: none;
+}
+
+.notebook--cover .notebook-page {
+  grid-column: 1 / -1;
+  background: hsl(0, 4%, 20%);
+  color: rgb(234, 235, 236);
+  letter-spacing: 1px;
+  text-shadow: 1px 1px 0 #000;
+  box-shadow: none;
+}
+
+.notebook--cover .notebook-page {
+  justify-content: center;
+  text-align: center;
+}
+
+.notebook--cover .notebook-page__title {
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+.notebook--cover .notebook-page .notebook-page__content {
+  flex: 0;
+}
+
+.notebook--cover .notebook-page .notebook-page__title .form__input {
+  text-align: center;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css
new file mode 100644
index 0000000..873df47
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css
@@ -0,0 +1,83 @@
+.notebook-page {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: clamp(1rem, 3vw, 2rem) 0;
+  background: #fff;
+  border: 1px solid #cacaca;
+  box-shadow: 1px 1px 0 0 #ebebeb, 1px 1px 0 1px #bebebe, 2px 2px 0 1px #ebebeb,
+    2px 2px 0 2px #bebebe, 3px 3px 0 2px #ebebeb, 3px 3px 0 3px #bebebe;
+}
+
+.notebook-page--mirror {
+  box-shadow: -1px 1px 0 0 #ebebeb, -1px 1px 0 1px #bebebe,
+    -2px 2px 0 1px #ebebeb, -2px 2px 0 2px #bebebe, -3px 3px 0 2px #ebebeb,
+    -3px 3px 0 3px #bebebe;
+}
+
+@media screen and (max-width: 1023px) {
+  .notebook-page {
+    grid-column: 1/-1;
+  }
+  .notebook-page--mirror {
+    display: none;
+  }
+}
+
+.notebook-page__header,
+.notebook-page__footer,
+.notebook-page__content {
+  padding: 0 3rem 0 2rem;
+}
+
+.notebook-page__title {
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin: 1rem 0 0;
+}
+
+.notebook-page__title .form__input {
+  border: none;
+  font-weight: inherit;
+  padding: 0;
+  width: 100%;
+}
+
+.notebook-page__title .form__input:focus {
+  outline: none;
+}
+
+.notebook-page__content {
+  flex: 1;
+  display: flex;
+  margin: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 3vw, 3rem);
+  white-space: pre-wrap;
+  word-break: break-all;
+  hyphens: auto;
+}
+
+.notebook-page__content .form__textarea {
+  border: none;
+  line-height: inherit;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
+}
+
+.notebook-page__content .form__textarea:focus {
+  outline: none;
+  resize: none;
+}
+
+.notebook-page__footer {
+  text-align: right;
+}
+
+.notebook-page__toolbar {
+  display: flex;
+  flex-flow: row;
+  gap: 1rem;
+  position: absolute;
+  top: -4rem;
+  right: 1rem;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.js
new file mode 100644
index 0000000..19e072c
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.js
@@ -0,0 +1,107 @@
+import { useEffect, useRef } from "react";
+import { Input, TextArea } from "../../commons";
+import useToggle from "../../helpers/hooks/useToggle";
+import PageToolbar from "./PageToolbar";
+import "./Cover.css";
+import "./Page.css";
+
+function Page({ page, setPage, removePage, restorePage, deletedPages }) {
+  const [isTitleEditable, setIsTitleEditable] = useToggle();
+  const [isBodyEditable, setIsBodyEditable] = useToggle();
+  const inputRef = useRef(null);
+  const textareaRef = useRef(null);
+
+  const isCover = () => page && page.id === 0;
+  const is404 = () => page && page.id === null;
+
+  useEffect(() => {
+    inputRef.current && inputRef.current.focus();
+    textareaRef.current && textareaRef.current.focus();
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  const handleOnChange = (e) => {
+    let newValue = {};
+
+    switch (e.target.name) {
+      case "notebook-title":
+        newValue = { title: e.target.value };
+        break;
+      case "notebook-body":
+        newValue = { body: e.target.value };
+        break;
+      default:
+        break;
+    }
+
+    setPage((previous) => {
+      return { ...previous, ...newValue };
+    });
+  };
+
+  return (
+    <article
+      className={`notebook-page ${isCover() ? "notebook-page--cover" : ""}`}
+    >
+      <header className="notebook-page__header">
+        {!isTitleEditable && (
+          <h2
+            className="notebook-page__title"
+            onClick={() => {
+              if (!is404()) setIsTitleEditable();
+            }}
+          >
+            {page.title}
+          </h2>
+        )}
+        {isTitleEditable && (
+          <form className="notebook-page__title" onSubmit={handleSubmit}>
+            <Input
+              ref={inputRef}
+              name="notebook-title"
+              value={page.title}
+              onChangeHandler={handleOnChange}
+              onBlurHandler={setIsTitleEditable}
+            />
+          </form>
+        )}
+      </header>
+      {!isBodyEditable && (
+        <div
+          className="notebook-page__content"
+          onClick={() => {
+            if (!is404()) setIsBodyEditable();
+          }}
+        >
+          {page.body}
+        </div>
+      )}
+      {isBodyEditable && (
+        <form className="notebook-page__content" onSubmit={handleSubmit}>
+          <TextArea
+            ref={textareaRef}
+            name="notebook-body"
+            value={page.body}
+            onChangeHandler={handleOnChange}
+            onBlurHandler={setIsBodyEditable}
+          />
+        </form>
+      )}
+      <footer className="notebook-page__footer">
+        {!isCover() && <div className="notebook-page__number">{page.id}</div>}
+        {!isCover() && (
+          <PageToolbar
+            removePage={removePage}
+            restorePage={restorePage}
+            deletedPages={deletedPages}
+          />
+        )}
+      </footer>
+    </article>
+  );
+}
+
+export default Page;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/PageToolbar.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/PageToolbar.js
new file mode 100644
index 0000000..a16aa22
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/Page/PageToolbar.js
@@ -0,0 +1,27 @@
+import { Button } from "../../commons";
+import { ReactComponent as TrashIcon } from "../../../images/trash.svg";
+import { ReactComponent as RestoreIcon } from "../../../images/restore.svg";
+
+function PageToolbar({ removePage, restorePage, deletedPages }) {
+  return (
+    <div className="notebook-page__toolbar toolbar">
+      <div className="toolbar__item">
+        {deletedPages.length > 0 && (
+          <Button modifier="restore" onClickHandler={restorePage}>
+            <RestoreIcon
+              title="Undo page deletion"
+              className="icon icon--restore"
+            />
+          </Button>
+        )}
+      </div>
+      <div className="toolbar__item">
+        <Button modifier="delete" onClickHandler={removePage}>
+          <TrashIcon title="Delete this page" className="icon icon--trash" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default PageToolbar;
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/layout/index.js b/public/projects/react-small-apps/apps/notebook/src/components/layout/index.js
new file mode 100644
index 0000000..1b8d583
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/layout/index.js
@@ -0,0 +1,7 @@
+import Footer from "./Footer/Footer";
+import Header from "./Header/Header";
+import Main from "./Main/Main";
+import Nav from "./Nav/Nav";
+import Page from "./Page/Page";
+
+export { Footer, Header, Main, Nav, Page };
-- 
cgit v1.2.3