Add more modal components

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/components/Button/Button.tsx

@@ -35,7 +35,7 @@ const Button = ({
       title={title}
       id={id}
       active={active}
-      onClick={(e:any) => onClick(e)}
+      onClick={(e: any) => onClick(e)}
     >
       {children}
     </StyledButton>
@@ -63,7 +63,7 @@ export const MenuButton = ({
       isLabel={false}
       title={title}
       id={id}
-      onClick={(e:any) => onClick(e)}
+      onClick={(e: any) => onClick(e)}
     >
       {children}
     </Button>
@@ -89,7 +89,7 @@ export const MenuButtonStroke = ({
       isLabel={false}
       title={title}
       id={id}
-      onClick={(e:any) => onClick(e)}
+      onClick={(e: any) => onClick(e)}
     >
       {children}
     </Button>
@@ -115,9 +115,9 @@ export const MenuButtonLabel = ({
       isLabel={true}
       title={title}
       id={id}
-      onClick={(e:any) => onClick(e)}
+      onClick={(e: any) => onClick(e)}
     >
       {children}
     </Button>
   );
-};
+};

src/components/Button/index.ts

@@ -1 +1,6 @@
-export { default as Button, MenuButton, MenuButtonStroke, MenuButtonLabel } from "./Button";
+export {
+  default as Button,
+  MenuButton,
+  MenuButtonStroke,
+  MenuButtonLabel,
+} from "./Button";

src/components/Explorer/Explorer.tsx

@@ -55,7 +55,7 @@ const Explorer = ({
   const [deleteEntry, setDeleteEntry] = useState<Entry | undefined>(undefined);
   const [renameEntry, setRenameEntry] = useState<Entry | undefined>(undefined);
   const [selectedEntry, setSelectedEntry] = useState<Entry | undefined>(
-    undefined
+    undefined,
   );
   const [selectedLocation, setSelectedLocation] = useState("");
 
@@ -107,7 +107,7 @@ const Explorer = ({
 
   const inFileList = (list: Entry[], file?: Entry) => {
     if (file === undefined) {
-      return false
+      return false;
     }
 
     for (const entry of list) {
@@ -206,7 +206,7 @@ const Explorer = ({
     //currentFile === Absolute File path
     if (currentFile) {
       if (inFileList(fileList, currentFile)) {
-      handleDeleteModal(currentFile, false);
+        handleDeleteModal(currentFile, false);
       }
     } else {
       warning("No file is currently selected.");
@@ -231,7 +231,7 @@ const Explorer = ({
 
   const handleCreateFolderSubmit = async (
     location: string,
-    folder_name: string
+    folder_name: string,
   ) => {
     if (folder_name !== "") {
       try {

src/components/Modals/Modal.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NewFileModal from "./NewFileModal";
+import Modal, { ModalEditableList, ModalRow, ModalTitlebar } from "./Modal";
+
+type Story = StoryObj<typeof ModalEditableList>;
+
+const meta: Meta<typeof ModalEditableList> = {
+  component: ModalEditableList,
+};
+
+export default meta;
+
+export const Main: Story = {
+  render: (args) => (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+      }}
+    >
+      <Modal
+        id="universes-modal"
+        isOpen={true}
+        onClose={() => {}}
+        onSubmit={() => {}}
+        onReset={() => {}}
+      >
+        <ModalTitlebar
+          title="Manage your Universes"
+          htmlFor="actionName"
+          hasClose
+          handleClose={() => {}}
+        />
+        <ModalRow>
+          <ModalEditableList
+            list={[
+              "a",
+              "sfayguh",
+              "stavyjb",
+              "ycavybun",
+              "cavshbjn",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+            ]}
+            onSelect={() => {}}
+            onDelete={() => {}}
+          />
+        </ModalRow>
+        <ModalRow type="buttons">
+          <button type="button" onClick={() => {}}>
+            New custom universe
+          </button>
+          <button type="button" onClick={() => {}}>
+            Import from zip
+          </button>
+          <button type="button" onClick={() => {}}>
+            Import from
+          </button>
+        </ModalRow>
+      </Modal>
+    </div>
+  ),
+};

src/components/Modals/Modal.styles.ts

@@ -108,7 +108,7 @@ interface StyledModalRowProps {
 
 export const StyledModalRow = styled.div<StyledModalRowProps>`
   display: flex;
-  flex-direction: column; 
+  flex-direction: column;
   align-items: center;
 
   & select,
@@ -208,6 +208,7 @@ const handleValid = (p: StyledModalInputProps) => {
 
 export const StyledModalInput = styled.div<StyledModalInputProps>`
   position: relative;
+  width: 80%;
 
   & label {
     position: absolute;
@@ -276,8 +277,94 @@ export const StyledModalInput = styled.div<StyledModalInputProps>`
     ${handleValid}
   }
 
-  .bt-modal-complex-input-indications {
-    color: var(--input-placeholder-text);
+  & div {
+    color: ${(p) => p.placeholderColor ?? primaryColor};
     font-size: 0.7rem;
+    margin: 5px;
+  }
+`;
+
+interface StyledModalEditableListProps {
+  color?: string;
+  scrollBarColor?: string;
+  bgColor?: string;
+  entryColor?: string;
+  hoverColor?: string;
+  deleteColor?: string;
+  roundness?: number;
+}
+
+export const StyledModalEditableList = styled.ul<StyledModalEditableListProps>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px;
+  overflow-y: auto;
+  max-height: 60vh;
+  width: 100%;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px ${(p) => p.scrollBarColor ?? primaryColor};
+    border-radius: ${(p) => p.roundness ?? 1}px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: ${(p) => p.scrollBarColor ?? primaryColor};
+    border-radius: ${(p) => p.roundness ?? 1}px;
+  }
+
+  & div {
+    width: 90%;
+    height: 3rem;
+    min-height: 3rem;
+    background-color: ${(p) => p.entryColor ?? primaryColor};
+    padding: 5px;
+    align-content: center;
+    color: ${(p) => p.color ?? primaryColor};
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: auto 20px;
+
+    &:hover {
+      background-color: ${(p) => p.hoverColor ?? primaryColor};
+
+      & svg {
+        visibility: visible;
+      }
+    }
+
+    & label {
+      background-color: transparent !important;
+      margin-bottom: 0px !important;
+    }
+
+    & svg {
+      height: 100%;
+      opacity: 0.4;
+      width: 16px;
+      height: 16px;
+      padding: 2px;
+      border-radius: ${(p) => p.roundness ?? 1}px;
+      background-color: ${(p) => p.deleteColor ?? primaryColor};
+      visibility: hidden;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  & div:first-of-type {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+
+  & div:last-of-type {
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
   }
 `;