feat: add modal component

src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./base";
 export * from "./title-bar";
 export * from "./drawing-item";
 export * from "./create-edit-bar";
+export * from "./modal";

src/components/modal.tsx

@@ -0,0 +1,55 @@
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { POP_UP_WIDTH } from "../style";
+import { Group, Text, Button } from "./base";
+
+export type ModalProps = {
+    title?: string,
+    description?: string,
+    opened: boolean,
+    onSubmit: (response: "Ok" | "Ignore") => void
+}
+
+export const Modal = (props: ModalProps) => {
+    const { title, description, opened, onSubmit } = props;
+    const ModalBackground = styled.div`
+      position: absolute;
+      top: 0px;
+      height: 100%;
+      
+      left: 0px;
+      min-width: 100%;
+      background-color: gray;
+      opacity: 0.4;
+    `;
+    const ModalContainer = styled.div`
+      position: absolute;
+      top: 120px;
+      min-height: 120px;
+      
+      left: ${(POP_UP_WIDTH - 380) / 2}px;
+      min-width: 380px;
+  
+      padding: 10px;
+      z-index: 999;
+  
+      border: 2px black solid;
+      border-radius: 4px;
+      background-color: white;
+    `;
+    return <>
+        <ModalBackground hidden={!opened} />
+        <ModalContainer hidden={!opened}>
+            <Group>
+                <Text size='l'>{title}</Text>
+            </Group>
+            <Group margin='5px 0 0 0' style={{ minHeight: "60px" }}>
+                <Text size='s'>{description}</Text>
+            </Group>
+            <Group margin='0px 30px' justifyContent='space-between'>
+                <Button onClick={() => props.onSubmit("Ignore")} color='green'>Ignore</Button>
+                <Button onClick={() => props.onSubmit("Ok")} color='red'>Ok</Button>
+            </Group>
+        </ModalContainer>
+    </>
+}

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./use-content-script";
 export * from "./use-storage";
+export * from "./use-modal";

src/hooks/use-modal.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { ModalProps } from "../components";
+
+export const useModal = () => {
+  const CLOSED_MODAL_PROPS = {
+    title: "",
+    description: "",
+    opened: false,
+    onSubmit: () => {},
+  };
+  const [modalState, setModalState] = useState<ModalProps>(CLOSED_MODAL_PROPS);
+  const closeModal = () => setModalState(CLOSED_MODAL_PROPS);
+  const openModal = (props: ModalProps) => setModalState(props);
+  return {
+    /**Props to use in the modal */
+    modalProps: modalState,
+    closeModal,
+    openModal,
+  };
+};

src/main.tsx

@@ -3,19 +3,27 @@ import { Global } from '@emotion/react'
 import styled from '@emotion/styled'
 import React, { useState } from 'react'
 import ReactDOM from 'react-dom/client'
-import { Button, CreateEditBar, DrawingItem, Group, Input, Text, TitleBar } from './components'
-import { useStorage, useContentScript } from './hooks'
-import { GlobalStyles } from './style'
+import { CreateEditBar, DrawingItem, Group, Text, TitleBar, Modal } from './components'
+import { useStorage, useContentScript, useModal } from './hooks'
+import { GlobalStyles, POP_UP_HEIGHT, POP_UP_WIDTH } from './style'
 
 
 const App = () => {
   const { drawings, createDrawing, deleteDrawing, updateDrawing } = useStorage();
   const { isAlive, activeDrawingName, getDrawing, setDrawing } = useContentScript();
+  const { modalProps, closeModal, openModal } = useModal();
 
   const onSaveButtonClick = async (drawingName: string) => {
     // do nothing if the name is empty
-    //todo: show a warning to the user
-    if ((drawingName?.length ?? 0) == 0) return;
+    if ((drawingName?.length ?? 0) == 0) {
+      openModal({
+        title: "Invalid drawing name",
+        description: "The name of a drawing should not be empty.",
+        opened: true,
+        onSubmit: closeModal
+      })
+      return;
+    }
 
     // retrieve the drawing from content-script
     const rawDrawing = await getDrawing();
@@ -52,6 +60,7 @@ const App = () => {
         onOpen={async () => await setDrawing(d)}
       />)}
     </div>
+    <Modal {...modalProps} />
   </>
 }
 

src/style/index.ts

@@ -2,6 +2,9 @@ import { css } from "@emotion/react";
 // global styles
 import virgil from "./Virgil.woff2";
 
+export const POP_UP_WIDTH = 600;
+export const POP_UP_HEIGHT = 450;
+
 export const GlobalStyles = css`
   @font-face {
     font-family: "virgil";
@@ -11,11 +14,11 @@ export const GlobalStyles = css`
     font-family: "virgil";
   }
   html {
-    min-width: 600px;
-    max-width: 600px;
+    min-width: ${POP_UP_WIDTH}px;
+    max-width: ${POP_UP_WIDTH}px;
 
-    min-height: 450px;
-    max-height: 450px;
+    min-height: ${POP_UP_HEIGHT}px;
+    max-height: ${POP_UP_HEIGHT}px;
 
     font-family: virgil;
   }