Test new component

Author: javizqh

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "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.16",
+    "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^9.0.16",
+    "@storybook/react-webpack5": "^9.0.18",
     "@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.16",
+    "storybook": "^9.0.18",
     "styled-components": "^6.1.19",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
@@ -56,4 +56,4 @@
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }
-}
+}

package.json

@@ -368,6 +368,14 @@ export const StyledModalEditableList = styled.ul<StyledModalEditableListProps>`
   }
 `;
 
+interface StyledModalActionListProps {
+  bgColor?: string;
+}
+
+export const StyledModalActionList = styled.div<StyledModalActionListProps>`
+  background-color: ${(p) => p.bgColor ?? primaryColor} !important;
+`;
+
 interface StyledModelDropAreaProps {
   text?: string;
   bgColor?: string;

src/components/Modals/Modal.styles.ts

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, ReactNode } from "react";
 import {
   StyledModal,
+  StyledModalActionList,
   StyledModalBackButton,
   StyledModalButtonRow,
   StyledModalCloseButton,
@@ -301,6 +302,65 @@ export const ModalEditableList = ({
   );
 };
 
+export const ModalActionList = ({
+  list,
+  title,
+  onSelect,
+}: {
+  list: {name: string, component: JSX.Element}[];
+  title?: string;
+  onSelect: (event: any, entry: string) => void;
+}) => {
+  const theme = useTheme();
+  const [isOpen, open] = useState<string | undefined>(undefined);
+
+  const openActionModal = (entry: string) => {
+    if (isOpen === entry) {
+      open(undefined);
+    } else {
+      open(entry);
+    }
+  };
+
+  return (
+    <>
+      {title && (
+        <StyledModalInputSelectorTitle>{title}</StyledModalInputSelectorTitle>
+      )}
+      <StyledModalEditableList
+        bgColor={theme.palette.background}
+        color={theme.palette.text}
+        scrollBarColor={theme.palette.scrollbar}
+        entryColor={theme.palette.primary}
+        hoverColor={theme.palette.secondary}
+        deleteColor={theme.palette.button.error}
+        roundness={theme.roundness}
+      >
+        {list.map((entry) => {
+          return (
+            <>
+              <div
+                id={"list-" + entry.name}
+                onClick={(e: any) => openActionModal(entry.name)}
+              >
+                <label>{entry.name}</label>
+              </div>
+              {isOpen === entry.name && (
+                <StyledModalActionList
+                  id={"list-open-" + entry.name}
+                  bgColor={theme.palette.background}
+                >
+                  {entry.component}
+                </StyledModalActionList>
+              )}
+            </>
+          );
+        })}
+      </StyledModalEditableList>
+    </>
+  );
+};
+
 interface ModalInputDropdownProps extends ModalInputBoxProps {
   entries?: string[];
 }