Test moving modals

Author: javizqh

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -23,9 +23,9 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@storybook/addon-docs": "^9.0.10",
+    "@storybook/addon-docs": "^9.0.16",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^9.0.10",
+    "@storybook/react-webpack5": "^9.0.16",
     "@svgr/webpack": "^8.1.0",
     "@types/lodash": "^4.17.17",
     "@types/react": "18.2.0",
@@ -34,7 +34,7 @@
     "babel-loader": "^10.0.0",
     "file-loader": "^6.2.0",
     "prettier": "^3.5.3",
-    "storybook": "^9.0.10",
+    "storybook": "^9.0.16",
     "styled-components": "^6.1.19",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@storybook/react": "^9.0.12",
     "jderobot-commsmanager": "^1.0.3",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
@@ -57,4 +56,4 @@
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }
-}
+}

package.json

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import Button, { MenuButtonStroke, MenuButton } from "./Button";
 import {
   ActionTeplateIcon,

src/components/Button/Button.stories.tsx

@@ -430,13 +430,24 @@ const Explorer = ({
           onRename={handleRename}
         />
       </StyledSidebarEntry>
-      <NewFileModal
-        isOpen={isNewFileModalOpen}
-        onSubmit={handleNewActionSubmit}
-        onClose={handleCloseNewFileModal}
-        fileList={fileList}
-        location={selectedLocation}
-      />
+      {api.modals?.createFile ? (
+        <api.modals.createFile.component
+          isOpen={isNewFileModalOpen}
+          onSubmit={api.modals.createFile.onCreate}
+          onClose={handleCloseNewFileModal}
+          fileList={fileList}
+          location={selectedLocation}
+          project={project}
+        />
+      ) : (
+        <NewFileModal
+          isOpen={isNewFileModalOpen}
+          onSubmit={handleNewActionSubmit}
+          onClose={handleCloseNewFileModal}
+          fileList={fileList}
+          location={selectedLocation}
+        />
+      )}
       <NewFolderModal
         isOpen={isNewFolderModalOpen}
         onSubmit={handleCreateFolderSubmit}

src/components/Explorer/Explorer.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import IdeInterface from "./IdeInterface";
 import { VncViewer } from "Components";
 import { SaveIcon } from "Assets";

src/components/IdeInterface/IdeInterface.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import DeleteModal from "./DeleteModal";
 
 type Story = StoryObj<typeof DeleteModal>;

src/components/Modals/DeleteModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import NewFileModal from "./NewFileModal";
 import Modal, { ModalEditableList, ModalRow, ModalTitlebar } from "./Modal";
 import ErrorModal from "./ErrorModal";

src/components/Modals/ErrorModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import NewFileModal from "./NewFileModal";
 import Modal, { ModalEditableList, ModalRow, ModalTitlebar } from "./Modal";
 

src/components/Modals/Modal.stories.tsx

@@ -447,3 +447,86 @@ export const StyledModalDropArea = styled.label<StyledModelDropAreaProps>`
 
   ${handleActive}
 `;
+
+export const StyledModalInputSelectorTitle = styled.label`
+  width: 100%;
+  display: block;
+  border: none;
+  font-size: large;
+  font-weight: bold;
+  text-align: center;
+  margin: 10px 0px;
+`;
+
+export const StyledModalInputSelector = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+`;
+
+interface StyledModalSelectIconProps {
+  hoverColor?: string;
+  selectedColor?: string;
+  color?: string;
+  roundness?: number;
+  icon: "fill" | "stroke";
+  active?: boolean;
+}
+
+const handleActiveSelectIcon = (p: StyledModalSelectIconProps) => {
+  if (p.active) {
+    return `
+      background-color: ${p.selectedColor ?? primaryColor} !important;
+    `;
+  }
+};
+
+const handleIconType = (p: StyledModalSelectIconProps) => {
+  switch (p.icon) {
+    case "fill":
+      return `
+      fill: ${p.color ?? primaryColor};
+    `;
+    case "stroke":
+      return `
+      stroke: ${p.color ?? primaryColor};
+    `;
+  }
+};
+
+export const StyledModalSelectIcon = styled.div<StyledModalSelectIconProps>`
+  float: left;
+  width: 30%;
+  border-radius: ${(p) => p.roundness ?? 1}px;
+
+  & div {
+    border-radius: ${(p) => p.roundness ?? 1}px;
+    cursor: pointer;
+    text-align: center;
+    margin: 3px;
+    padding: 5px;
+    ${handleActiveSelectIcon}
+
+    & svg {
+      height: 90px;
+      width: 100%;
+      ${handleIconType}
+    }
+  }
+
+  &:hover div {
+    background-color: ${(p) => p.hoverColor ?? primaryColor};
+  }
+
+  & p {
+    margin: 3px !important;
+    color: ${(p) => p.color ?? primaryColor};
+  }
+
+  & input[type="radio"] {
+    display: none;
+    z-index: 100;
+  }
+`;

src/components/Modals/Modal.styles.ts

@@ -10,11 +10,14 @@ import {
   StyledModalEditableList,
   StyledModalInput,
   StyledModalInputRowContainer,
+  StyledModalInputSelector,
+  StyledModalInputSelectorTitle,
   StyledModalRow,
+  StyledModalSelectIcon,
   StyledModalTitlebar,
 } from "./Modal.styles";
 import { useTheme } from "Utils";
-import { ModelRowTypes } from "Types";
+import { ModalInputSelectIconEntry, ModelRowTypes } from "Types";
 
 const Modal = ({
   id = "modal",
@@ -386,3 +389,56 @@ export const ModalInputDropArea = ({
     </StyledModalDropArea>
   );
 };
+
+interface ModalInputSelectIconProps {
+  id: string;
+  title: string;
+  onChange: (event: any) => void;
+  selected: string;
+  entries: ModalInputSelectIconEntry[];
+}
+
+export const ModalInputSelectIcon = ({
+  title,
+  id,
+  onChange,
+  selected,
+  entries,
+}: ModalInputSelectIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <StyledModalInputSelectorTitle htmlFor={id}>
+        {title}
+      </StyledModalInputSelectorTitle>
+      <StyledModalInputSelector>
+        {entries.map((entry) => (
+          <StyledModalSelectIcon
+            hoverColor={theme.palette.secondary}
+            selectedColor={theme.palette.primary}
+            color={theme.palette.text}
+            roundness={theme.roundness}
+            icon={entry.iconType}
+            active={selected === entry.id}
+          >
+            <label>
+              <input
+                type="radio"
+                name={id}
+                value={entry.id}
+                id={entry.id}
+                checked={selected === entry.id}
+                onChange={onChange}
+              />
+              <div id={"button-" + entry.id}>
+                {entry.icon}
+                <p> {entry.title} </p>
+              </div>
+            </label>
+          </StyledModalSelectIcon>
+        ))}
+      </StyledModalInputSelector>
+    </>
+  );
+};