add toast notification, new nocode-builder page layout

2025-12-30 10:19:51 -06:00 · 2022-06-23 15:16:24 +09:00
parent 22feb46e1f
commit 24a1e29af2
14 changed files with 877 additions and 7348 deletions
--- a/components/builder/Builder.tsx
+++ b/components/builder/Builder.tsx
@@ -1,27 +1,32 @@
+import { NoCodeForm } from "@prisma/client";
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
+import { toast } from "react-toastify";
 import { v4 as uuidv4 } from "uuid";
+import { useForm } from "../../lib/forms";
 import { persistNoCodeForm, useNoCodeForm } from "../../lib/noCodeForm";
 import Loading from "../Loading";
 import Page from "./Page";
 import ShareModal from "./ShareModal";
-import UsageIntro from "./UsageIntro";

 export default function Builder({ formId }) {
+  const { form, isLoadingForm } = useForm(formId);
  const { noCodeForm, isLoadingNoCodeForm, mutateNoCodeForm } =
    useNoCodeForm(formId);
  const [isInitialized, setIsInitialized] = useState(false);
  const [openShareModal, setOpenShareModal] = useState(false);

-  const addPage = useCallback(async () => {
-    const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
-    newNoCodeForm.pagesDraft.push({
-      id: uuidv4(),
-      blocks: [],
-    });
-    await persistNoCodeForm(newNoCodeForm);
-    mutateNoCodeForm(newNoCodeForm);
-  }, [noCodeForm, mutateNoCodeForm]);
+  const addPage = useCallback(
+    async (page = undefined) => {
+      const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
+      newNoCodeForm.pagesDraft.push(
+        page || { id: uuidv4(), type: "form", blocks: [] }
+      );
+      await persistNoCodeForm(newNoCodeForm);
+      mutateNoCodeForm(newNoCodeForm);
+    },
+    [noCodeForm, mutateNoCodeForm]
+  );

  const deletePage = async (pageIdx) => {
    const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
@@ -31,13 +36,67 @@ export default function Builder({ formId }) {
  };

  const initPages = useCallback(async () => {
-    if (!isLoadingNoCodeForm && !isInitialized) {
+    if (!isLoadingNoCodeForm && !isLoadingForm && !isInitialized) {
      if (noCodeForm.pagesDraft.length === 0) {
-        await addPage();
+        const newNoCodeForm: NoCodeForm = JSON.parse(
+          JSON.stringify(noCodeForm)
+        );
+        newNoCodeForm.pagesDraft = [
+          {
+            id: uuidv4(),
+            type: "form",
+            blocks: [
+              {
+                id: "FrEb9paDoV",
+                data: {
+                  text: form.name,
+                  level: 1,
+                },
+                type: "header",
+              },
+              {
+                id: "qtvg94SRMB",
+                data: {
+                  placeholder: "",
+                },
+                type: "textQuestion",
+              },
+              {
+                id: "e_N-JpRIfL",
+                data: {
+                  label: "Submit",
+                },
+                type: "submitButton",
+              },
+            ],
+          },
+          {
+            id: uuidv4(),
+            type: "thankyou",
+            blocks: [
+              {
+                id: "pIcLJUy0SY",
+                data: {
+                  text: "Thank you for taking the time to fill out this form 🙏",
+                },
+                type: "paragraph",
+              },
+            ],
+          },
+        ];
+        await persistNoCodeForm(newNoCodeForm);
+        mutateNoCodeForm(newNoCodeForm);
      }
      setIsInitialized(true);
    }
-  }, [isLoadingNoCodeForm, noCodeForm, addPage, isInitialized]);
+  }, [
+    isLoadingNoCodeForm,
+    noCodeForm,
+    isInitialized,
+    isLoadingForm,
+    form,
+    mutateNoCodeForm,
+  ]);

  const publishChanges = async () => {
    const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
@@ -45,6 +104,7 @@ export default function Builder({ formId }) {
    await persistNoCodeForm(newNoCodeForm);
    mutateNoCodeForm(newNoCodeForm);
    setOpenShareModal(true);
+    toast("Your changes are now live 🎉");
  };

  useEffect(() => {
@@ -87,23 +147,18 @@ export default function Builder({ formId }) {
        </div>
      </div>

-      <div className="w-full py-6 bg-white">
-        <div className="flex justify-center w-full mt-10">
-          <div className="w-full px-4 max-w-7xl">
-            <div className="grid grid-cols-1 gap-6">
-              <div className="px-10">
-                <UsageIntro />
-              </div>
-              {noCodeForm.pagesDraft.map((page, pageIdx) => (
-                <Page
-                  key={page.id}
-                  formId={formId}
-                  page={page}
-                  pageIdx={pageIdx}
-                  deletePageAction={deletePage}
-                />
-              ))}
-            </div>
+      <div className="w-full bg-ui-gray-lighter">
+        <div className="flex justify-center w-full">
+          <div className="grid w-full grid-cols-1">
+            {noCodeForm.pagesDraft.map((page, pageIdx) => (
+              <Page
+                key={page.id}
+                formId={formId}
+                page={page}
+                pageIdx={pageIdx}
+                deletePageAction={deletePage}
+              />
+            ))}
          </div>
        </div>
      </div>
--- a/components/builder/Page.tsx
+++ b/components/builder/Page.tsx
@@ -1,7 +1,7 @@
-import { TrashIcon } from "@heroicons/react/outline";
 import dynamic from "next/dynamic";
 import { persistNoCodeForm, useNoCodeForm } from "../../lib/noCodeForm";
 import Loading from "../Loading";
+import PageToolbar from "./PageToolbar";
 let Editor = dynamic(() => import("../editorjs/Editor"), {
  ssr: false,
 });
@@ -23,28 +23,31 @@ export default function Page({ formId, page, pageIdx, deletePageAction }) {
    }
  };

+  const setPageType = async (newType) => {
+    const newNoCodeForm = JSON.parse(JSON.stringify(noCodeForm));
+    newNoCodeForm.pagesDraft[pageIdx].type = newType;
+    await persistNoCodeForm(newNoCodeForm);
+    mutateNoCodeForm(newNoCodeForm);
+  };
+
  if (isLoadingNoCodeForm) {
    return <Loading />;
  }

  return (
-    <div className="flex w-full">
-      <div className="flex w-8">
-        {pageIdx !== 0 && (
-          <button
-            className="flex items-center h-full text-gray-400"
-            onClick={() => {
-              if (confirm("Do you really want to delete this page?")) {
-                deletePageAction(pageIdx);
-              }
-            }}
-          >
-            <TrashIcon className="w-5 h-5" />
-          </button>
-        )}
-      </div>
-      <div className="relative w-full p-10 rounded-md bg-ui-gray-lighter">
-        <div className="relative">
+    <div className="relative w-full bg-white">
+      {pageIdx !== 0 && (
+        <div className="z-10">
+          <PageToolbar
+            page={page}
+            pageIdx={pageIdx}
+            deletePageAction={deletePageAction}
+            setPageType={setPageType}
+          />
+        </div>
+      )}
+      <div className="relative w-full p-10 ">
+        <div className="relative max-w-5xl mx-auto">
          {Editor && (
            <Editor
              id={`${page.id}-editor`}
--- a/components/builder/PageToolbar.tsx
+++ b/components/builder/PageToolbar.tsx
@@ -0,0 +1,54 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { TrashIcon } from "@heroicons/react/solid";
+import { MdWavingHand } from "react-icons/md";
+import { classNames } from "../../lib/utils";
+
+export default function PageToolbar({
+  page,
+  pageIdx,
+  deletePageAction,
+  setPageType,
+}) {
+  return (
+    <div className="relative">
+      <div className="absolute inset-0 flex items-center" aria-hidden="true">
+        <div className="w-full border-t border-gray-200" />
+      </div>
+      <div className="relative flex justify-center">
+        <span className="relative z-0 inline-flex -space-x-px rounded-md shadow-sm">
+          <button
+            type="button"
+            onClick={() => {
+              if (page.type === "form") {
+                return setPageType("thankyou");
+              } else if (page.type === "thankyou") {
+                return setPageType("form");
+              }
+            }}
+            className={classNames(
+              page.type === "thankyou"
+                ? "bg-red-400 text-white hover:bg-red-500"
+                : "bg-white text-gray-400 hover:bg-gray-50",
+              "relative inline-flex items-center px-4 py-2 text-sm font-medium  border border-gray-300 rounded-l-md  focus:z-10 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
+            )}
+          >
+            <span className="sr-only">Annotate</span>
+            <MdWavingHand className="w-4 h-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              if (confirm("Do you really want to delete this page?")) {
+                deletePageAction(pageIdx);
+              }
+            }}
+            className="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
+          >
+            <span className="sr-only">Delete</span>
+            <TrashIcon className="w-4 h-4" aria-hidden="true" />
+          </button>
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/components/editorjs/Editor.tsx
+++ b/components/editorjs/Editor.tsx
@@ -5,6 +5,8 @@ import DragDrop from "editorjs-drag-drop";
 import Undo from "editorjs-undo";
 import TextQuestion from "./tools/TextQuestion";
 import SubmitButton from "./tools/SubmitButton";
+import Paragraph from "@editorjs/paragraph";
+import Header from "@editorjs/header";

 const Editor = ({ id, autofocus = false, onChange, value }) => {
  const [blocks, setBlocks] = useState([]);
@@ -46,7 +48,26 @@ const Editor = ({ id, autofocus = false, onChange, value }) => {
        setBlocks(content.blocks);
      },
      autofocus: autofocus,
-      tools: { textQuestion: TextQuestion, submitButton: SubmitButton },
+      tools: {
+        textQuestion: TextQuestion,
+        submitButton: SubmitButton,
+        paragraph: {
+          class: Paragraph,
+          inlineToolbar: true,
+          config: {
+            placeholder:
+              "Start with your content or hit tab-key to insert block",
+          },
+        },
+        header: {
+          class: Header,
+          config: {
+            placeholder: "Enter a header",
+            levels: [1, 2, 3],
+            defaultLevel: 1,
+          },
+        },
+      },
    });
  };

--- a/components/editorjs/tools/SubmitButton.tsx
+++ b/components/editorjs/tools/SubmitButton.tsx
@@ -40,7 +40,7 @@ export default class TextQuestion implements BlockTool {
  render(): HTMLElement {
    const container = document.createElement("div");
    const toolView = (
-      <div className="inline-flex items-center px-4 py-2 pb-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+      <div className="inline-flex items-center px-4 py-3 text-sm font-medium text-white bg-gray-700 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <div
          contentEditable
          id="label"
--- a/components/editorjs/tools/TextQuestion.tsx
+++ b/components/editorjs/tools/TextQuestion.tsx
@@ -31,8 +31,10 @@ export default class TextQuestion implements BlockTool {

  save(block: HTMLDivElement) {
    return {
-      label: (block.firstElementChild.firstElementChild as HTMLInputElement)
-        .value,
+      label: (
+        block.firstElementChild.firstElementChild
+          .firstElementChild as HTMLInputElement
+      ).value,
      placeholder: (
        block.firstElementChild.lastElementChild as HTMLInputElement
      ).value,
@@ -46,17 +48,19 @@ export default class TextQuestion implements BlockTool {
  render(): HTMLElement {
    const container = document.createElement("div");
    const toolView = (
-      <div className="pb-3">
+      <div className="pb-5">
+        <div className="text-lg font-bold leading-7 text-gray-800 sm:text-xl sm:truncate">
+          <input
+            type="text"
+            id="label"
+            defaultValue={this.label}
+            className="block w-full p-0 border-0 border-transparent ring-0 focus:ring-0"
+            placeholder="Your Question"
+          />
+        </div>
        <input
          type="text"
-          id="label"
-          defaultValue={this.label}
-          className="block w-full p-0 text-base font-medium text-gray-700 border-0 border-transparent ring-0 focus:ring-0"
-          placeholder="Your Question"
-        />
-        <input
-          type="text"
-          className="block w-full mt-1 text-gray-400 border-gray-300 rounded-md shadow-sm sm:text-base placeholder:text-gray-300"
+          className="block w-full mt-1 text-sm text-gray-400 border-gray-300 rounded-md shadow-sm placeholder:text-gray-300"
          placeholder="optional placeholder"
          defaultValue={this.placeholder}
        />
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
    "react-dom": "17.0.2",
    "react-icons": "^4.4.0",
    "react-loader-spinner": "^5.1.5",
+    "react-toastify": "^9.0.5",
    "superjson": "^1.9.1",
    "swr": "^1.3.0"
  },
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,9 @@
 import "../styles/globals.css";
+import "../styles/editorjs.css";
+import "../styles/toastify.css";
 import type { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
+import { ToastContainer } from "react-toastify";

 export default function App({
  Component,
@@ -9,6 +12,7 @@ export default function App({
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
+      <ToastContainer />
    </SessionProvider>
  );
 }
--- a/pages/forms/[id]/form.tsx
+++ b/pages/forms/[id]/form.tsx
@@ -25,11 +25,7 @@ export default function FormPage() {
  if (form.formType === "NOCODE") {
    return (
      <>
-        <LayoutFormBuilder
-          title={form.title}
-          formId={formId}
-          currentStep="form"
-        >
+        <LayoutFormBuilder title={form.name} formId={formId} currentStep="form">
          <Builder formId={formId} />
        </LayoutFormBuilder>
      </>
@@ -37,7 +33,7 @@ export default function FormPage() {
  } else {
    return (
      <>
-        <LayoutFormBasics title={form.title} formId={formId} currentStep="form">
+        <LayoutFormBasics title={form.name} formId={formId} currentStep="form">
          <FormCode formId={formId} />
        </LayoutFormBasics>
      </>
--- a/pages/forms/[id]/preview.tsx
+++ b/pages/forms/[id]/preview.tsx
@@ -7,6 +7,7 @@ import LayoutPreview from "../../../components/layout/LayoutPreview";
 import Loading from "../../../components/Loading";
 import { useForm } from "../../../lib/forms";
 import { v4 as uuidv4 } from "uuid";
+import { toast } from "react-toastify";

 export default function Share({}) {
  const router = useRouter();
@@ -16,6 +17,7 @@ export default function Share({}) {

  const resetApp = () => {
    setAppId(uuidv4());
+    toast("Form reset successful");
  };

  if (isLoadingForm) {
--- a/styles/editorjs.css
+++ b/styles/editorjs.css
@@ -0,0 +1,15 @@
+.ce-paragraph {
+  @apply font-light text-gray-800;
+}
+
+h1.ce-header {
+  @apply pb-5 text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate;
+}
+
+h2.ce-header {
+  @apply pb-3 text-xl font-bold leading-7 text-gray-900 sm:text-2xl sm:truncate;
+}
+
+h3.ce-header {
+  @apply pb-2 text-lg font-bold leading-7 text-gray-900 sm:text-xl sm:truncate;
+}
--- a/styles/toastify.css
+++ b/styles/toastify.css
@@ -0,0 +1,641 @@
+:root {
+  --toastify-color-light: #fff;
+  --toastify-color-dark: #121212;
+  --toastify-color-info: #3498db;
+  --toastify-color-success: #07bc0c;
+  --toastify-color-warning: #f1c40f;
+  --toastify-color-error: #e74c3c;
+  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
+  --toastify-icon-color-info: var(--toastify-color-info);
+  --toastify-icon-color-success: var(--toastify-color-success);
+  --toastify-icon-color-warning: var(--toastify-color-warning);
+  --toastify-icon-color-error: var(--toastify-color-error);
+  --toastify-toast-width: 320px;
+  --toastify-toast-background: #fff;
+  --toastify-toast-min-height: 64px;
+  --toastify-toast-max-height: 800px;
+  --toastify-font-family: sans-serif;
+  --toastify-z-index: 9999;
+  --toastify-text-color-light: #757575;
+  --toastify-text-color-dark: #fff;
+  --toastify-text-color-info: #fff;
+  --toastify-text-color-success: #fff;
+  --toastify-text-color-warning: #fff;
+  --toastify-text-color-error: #fff;
+  --toastify-spinner-color: #616161;
+  --toastify-spinner-color-empty-area: #e0e0e0;
+  --toastify-color-progress-light: linear-gradient(to right, #fea3ad, #f53b57);
+  --toastify-color-progress-dark: #bb86fc;
+  --toastify-color-progress-info: var(--toastify-color-info);
+  --toastify-color-progress-success: var(--toastify-color-success);
+  --toastify-color-progress-warning: var(--toastify-color-warning);
+  --toastify-color-progress-error: var(--toastify-color-error);
+}
+
+.Toastify__toast-container {
+  z-index: var(--toastify-z-index);
+  -webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);
+  position: fixed;
+  padding: 4px;
+  width: var(--toastify-toast-width);
+  box-sizing: border-box;
+  color: #fff;
+}
+.Toastify__toast-container--top-left {
+  top: 1em;
+  left: 1em;
+}
+.Toastify__toast-container--top-center {
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toastify__toast-container--top-right {
+  top: 1em;
+  right: 1em;
+}
+.Toastify__toast-container--bottom-left {
+  bottom: 1em;
+  left: 1em;
+}
+.Toastify__toast-container--bottom-center {
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toastify__toast-container--bottom-right {
+  bottom: 1em;
+  right: 1em;
+}
+
+@media only screen and (max-width: 480px) {
+  .Toastify__toast-container {
+    width: 100vw;
+    padding: 0;
+    left: 0;
+    margin: 0;
+  }
+  .Toastify__toast-container--top-left,
+  .Toastify__toast-container--top-center,
+  .Toastify__toast-container--top-right {
+    top: 0;
+    transform: translateX(0);
+  }
+  .Toastify__toast-container--bottom-left,
+  .Toastify__toast-container--bottom-center,
+  .Toastify__toast-container--bottom-right {
+    bottom: 0;
+    transform: translateX(0);
+  }
+  .Toastify__toast-container--rtl {
+    right: 0;
+    left: initial;
+  }
+}
+.Toastify__toast {
+  position: relative;
+  min-height: var(--toastify-toast-min-height);
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  max-height: var(--toastify-toast-max-height);
+  overflow: hidden;
+  font-family: var(--toastify-font-family);
+  cursor: pointer;
+  direction: ltr;
+}
+.Toastify__toast--rtl {
+  direction: rtl;
+}
+.Toastify__toast-body {
+  margin: auto 0;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 6px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.Toastify__toast-body > div:last-child {
+  -ms-flex: 1;
+  flex: 1;
+}
+.Toastify__toast-icon {
+  -webkit-margin-end: 10px;
+  margin-inline-end: 10px;
+  width: 20px;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.Toastify--animate {
+  animation-fill-mode: both;
+  animation-duration: 0.7s;
+}
+
+.Toastify--animate-icon {
+  animation-fill-mode: both;
+  animation-duration: 0.3s;
+}
+
+@media only screen and (max-width: 480px) {
+  .Toastify__toast {
+    margin-bottom: 0;
+    border-radius: 0;
+  }
+}
+.Toastify__toast-theme--dark {
+  background: var(--toastify-color-dark);
+  color: var(--toastify-text-color-dark);
+}
+.Toastify__toast-theme--light {
+  background: var(--toastify-color-light);
+  color: var(--toastify-text-color-light);
+}
+.Toastify__toast-theme--colored.Toastify__toast--default {
+  background: var(--toastify-color-light);
+  color: var(--toastify-text-color-light);
+}
+.Toastify__toast-theme--colored.Toastify__toast--info {
+  color: var(--toastify-text-color-info);
+  background: var(--toastify-color-info);
+}
+.Toastify__toast-theme--colored.Toastify__toast--success {
+  color: var(--toastify-text-color-success);
+  background: var(--toastify-color-success);
+}
+.Toastify__toast-theme--colored.Toastify__toast--warning {
+  color: var(--toastify-text-color-warning);
+  background: var(--toastify-color-warning);
+}
+.Toastify__toast-theme--colored.Toastify__toast--error {
+  color: var(--toastify-text-color-error);
+  background: var(--toastify-color-error);
+}
+
+.Toastify__progress-bar-theme--light {
+  background: var(--toastify-color-progress-light);
+}
+.Toastify__progress-bar-theme--dark {
+  background: var(--toastify-color-progress-dark);
+}
+.Toastify__progress-bar--info {
+  background: var(--toastify-color-progress-info);
+}
+.Toastify__progress-bar--success {
+  background: var(--toastify-color-progress-success);
+}
+.Toastify__progress-bar--warning {
+  background: var(--toastify-color-progress-warning);
+}
+.Toastify__progress-bar--error {
+  background: var(--toastify-color-progress-error);
+}
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
+  background: var(--toastify-color-transparent);
+}
+
+.Toastify__close-button {
+  color: #fff;
+  background: transparent;
+  outline: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: 0.3s ease;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+.Toastify__close-button--light {
+  color: #000;
+  opacity: 0.3;
+}
+.Toastify__close-button > svg {
+  fill: currentColor;
+  height: 16px;
+  width: 14px;
+}
+.Toastify__close-button:hover,
+.Toastify__close-button:focus {
+  opacity: 1;
+}
+
+@keyframes Toastify__trackProgress {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+.Toastify__progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  z-index: var(--toastify-z-index);
+  opacity: 0.7;
+  transform-origin: left;
+}
+.Toastify__progress-bar--animated {
+  animation: Toastify__trackProgress linear 1 forwards;
+}
+.Toastify__progress-bar--controlled {
+  transition: transform 0.2s;
+}
+.Toastify__progress-bar--rtl {
+  right: 0;
+  left: initial;
+  transform-origin: right;
+}
+
+.Toastify__spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 2px solid;
+  border-radius: 100%;
+  border-color: var(--toastify-spinner-color-empty-area);
+  border-right-color: var(--toastify-spinner-color);
+  animation: Toastify__spin 0.65s linear infinite;
+}
+
+@keyframes Toastify__bounceInRight {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes Toastify__bounceOutRight {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+@keyframes Toastify__bounceInLeft {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(-10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(5px, 0, 0);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes Toastify__bounceOutLeft {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+@keyframes Toastify__bounceInUp {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+  75% {
+    transform: translate3d(0, 10px, 0);
+  }
+  90% {
+    transform: translate3d(0, -5px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes Toastify__bounceOutUp {
+  20% {
+    transform: translate3d(0, -10px, 0);
+  }
+  40%,
+  45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+@keyframes Toastify__bounceInDown {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0);
+  }
+  75% {
+    transform: translate3d(0, -10px, 0);
+  }
+  90% {
+    transform: translate3d(0, 5px, 0);
+  }
+  to {
+    transform: none;
+  }
+}
+@keyframes Toastify__bounceOutDown {
+  20% {
+    transform: translate3d(0, 10px, 0);
+  }
+  40%,
+  45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+.Toastify__bounce-enter--top-left,
+.Toastify__bounce-enter--bottom-left {
+  animation-name: Toastify__bounceInLeft;
+}
+.Toastify__bounce-enter--top-right,
+.Toastify__bounce-enter--bottom-right {
+  animation-name: Toastify__bounceInRight;
+}
+.Toastify__bounce-enter--top-center {
+  animation-name: Toastify__bounceInDown;
+}
+.Toastify__bounce-enter--bottom-center {
+  animation-name: Toastify__bounceInUp;
+}
+
+.Toastify__bounce-exit--top-left,
+.Toastify__bounce-exit--bottom-left {
+  animation-name: Toastify__bounceOutLeft;
+}
+.Toastify__bounce-exit--top-right,
+.Toastify__bounce-exit--bottom-right {
+  animation-name: Toastify__bounceOutRight;
+}
+.Toastify__bounce-exit--top-center {
+  animation-name: Toastify__bounceOutUp;
+}
+.Toastify__bounce-exit--bottom-center {
+  animation-name: Toastify__bounceOutDown;
+}
+
+@keyframes Toastify__zoomIn {
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes Toastify__zoomOut {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+.Toastify__zoom-enter {
+  animation-name: Toastify__zoomIn;
+}
+
+.Toastify__zoom-exit {
+  animation-name: Toastify__zoomOut;
+}
+
+@keyframes Toastify__flipIn {
+  from {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    animation-timing-function: ease-in;
+  }
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  to {
+    transform: perspective(400px);
+  }
+}
+@keyframes Toastify__flipOut {
+  from {
+    transform: perspective(400px);
+  }
+  30% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+  to {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+.Toastify__flip-enter {
+  animation-name: Toastify__flipIn;
+}
+
+.Toastify__flip-exit {
+  animation-name: Toastify__flipOut;
+}
+
+@keyframes Toastify__slideInRight {
+  from {
+    transform: translate3d(110%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes Toastify__slideInLeft {
+  from {
+    transform: translate3d(-110%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes Toastify__slideInUp {
+  from {
+    transform: translate3d(0, 110%, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes Toastify__slideInDown {
+  from {
+    transform: translate3d(0, -110%, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes Toastify__slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    transform: translate3d(110%, 0, 0);
+  }
+}
+@keyframes Toastify__slideOutLeft {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    transform: translate3d(-110%, 0, 0);
+  }
+}
+@keyframes Toastify__slideOutDown {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 500px, 0);
+  }
+}
+@keyframes Toastify__slideOutUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -500px, 0);
+  }
+}
+.Toastify__slide-enter--top-left,
+.Toastify__slide-enter--bottom-left {
+  animation-name: Toastify__slideInLeft;
+}
+.Toastify__slide-enter--top-right,
+.Toastify__slide-enter--bottom-right {
+  animation-name: Toastify__slideInRight;
+}
+.Toastify__slide-enter--top-center {
+  animation-name: Toastify__slideInDown;
+}
+.Toastify__slide-enter--bottom-center {
+  animation-name: Toastify__slideInUp;
+}
+
+.Toastify__slide-exit--top-left,
+.Toastify__slide-exit--bottom-left {
+  animation-name: Toastify__slideOutLeft;
+}
+.Toastify__slide-exit--top-right,
+.Toastify__slide-exit--bottom-right {
+  animation-name: Toastify__slideOutRight;
+}
+.Toastify__slide-exit--top-center {
+  animation-name: Toastify__slideOutUp;
+}
+.Toastify__slide-exit--bottom-center {
+  animation-name: Toastify__slideOutDown;
+}
+
+@keyframes Toastify__spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=ReactToastify.css.map */
--- a/yarn.lock
+++ b/yarn.lock
@@ -55,12 +55,12 @@

 "@editorjs/header@^2.6.2":
  version "2.6.2"
-  resolved "https://registry.npmjs.org/@editorjs/header/-/header-2.6.2.tgz"
+  resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.6.2.tgz#523b6dda72ff882e53f64325840ee7bfc68ee6b7"
  integrity sha512-U1dnT+KGjwFmpWneEEyR2Nqp42hn9iKwQDgRHWQM+y6qx82pg+eAyuIf0QWt2Mluu9uPD2CzNfvJ+pxIuwX8Lw==

 "@editorjs/paragraph@^2.8.0":
  version "2.8.0"
-  resolved "https://registry.npmjs.org/@editorjs/paragraph/-/paragraph-2.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/@editorjs/paragraph/-/paragraph-2.8.0.tgz#11cc381fcafaf8b9160517ce65d59eee93fc4af9"
  integrity sha512-z6w5ZR0ru3p/IjxJW/tb7OcSnVttkZukQMIsnBMX1FIKc1BNdr7NwM1YoCyTl4OnC90YfL0xgES6/20/W267pw==

 "@eslint/eslintrc@^1.2.3":
@@ -620,6 +620,11 @@ chokidar@^3.5.3:
  optionalDependencies:
    fsevents "~2.3.2"

+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 codex-notifier@^1.1.2:
  version "1.1.2"
  resolved "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz"
@@ -2017,6 +2022,13 @@ react-loader-spinner@^5.1.5:
  resolved "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.1.5.tgz"
  integrity sha512-kHSBa3pNPNzd3UGOiOsHCC33qx5bZA7IHKau+YSTVn36Jib4eBVx/TNMggudbzW5CTnRCbP5bnYU4ACAX3mA6g==

+react-toastify@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.5.tgz#310d7bcfcf3887c0e8461ac6068fe1abb8d720e1"
+  integrity sha512-dszPCeQINY+Nm6HmsiAXT/7wsazPqv0S/RuhIYLAW+fTKcd3T1iRjZG0XqrN9nvAzqaE5J6uxMaiBrOevxjY8g==
+  dependencies:
+    clsx "^1.1.1"
+
 react@17.0.2:
  version "17.0.2"
  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"