Add new row entry for modals

Author: javizqh

package-lock.json

@@ -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.18",
+    "@storybook/addon-docs": "^9.1.3",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^9.0.18",
+    "@storybook/react-webpack5": "^9.1.3",
     "@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.18",
+    "storybook": "^9.1.3",
     "styled-components": "^6.1.19",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",

package.json

@@ -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("");
 
@@ -256,7 +256,7 @@ const Explorer = ({
 
   const handleCreateFolderSubmit = async (
     location: string,
-    folder_name: string
+    folder_name: string,
   ) => {
     if (folder_name !== "") {
       try {

src/components/Explorer/Explorer.tsx

@@ -4,6 +4,7 @@ import Modal, {
   ModalActionList,
   ModalEditableList,
   ModalRow,
+  ModalRowDataText,
   ModalTitlebar,
 } from "./Modal";
 
@@ -57,6 +58,27 @@ export const Main: Story = {
             onSelect={() => {}}
           />
         </ModalRow>
+        <ModalRow>
+          <ModalRowDataText
+            title="Subtrees"
+            data={[
+              "a",
+              "sfayguh",
+              "stavyjb",
+              "ycavybun",
+              "cavshbjn",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+              "acvsbhnj",
+            ]}
+          />
+        </ModalRow>
         <ModalRow type="buttons">
           <button type="button" onClick={() => {}}>
             New custom universe

src/components/Modals/Modal.stories.tsx

@@ -136,6 +136,33 @@ export const StyledModalRow = styled.div<StyledModalRowProps>`
   }
 `;
 
+export const StyledModalRowDataText = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background: none;
+  width: 100%;
+`;
+
+interface StyledModalRowDataTextTitleProps {
+  color?: string;
+  buttonColor?: string;
+  roundness?: number;
+}
+
+export const StyledModalRowDataTextTitle = styled.li<StyledModalRowDataTextTitleProps>`
+  color: ${(p) => p.color ?? primaryColor};
+`;
+
+export const StyledModalRowDataTextEntries = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background: none;
+  margin-left: auto;
+  opacity: 80%;
+`;
+
 interface StyledModalButtonRowProps {
   color?: string;
   buttonColor?: string;
@@ -168,6 +195,18 @@ export const StyledModalButtonRow = styled.div<StyledModalButtonRowProps>`
   }
 `;
 
+interface StyledModalImageRowProps {
+  color?: string;
+  roundness?: number;
+}
+
+export const StyledModalImageRow = styled.div<StyledModalImageRowProps>`
+  width: 100%;
+  margin: 10px;
+  background-color: ${(p) => p.color ?? primaryColor};
+  border-radius: ${(p) => p.roundness ?? 1}px;
+`;
+
 interface StyledModalButtonDeleteProps {
   bgColor?: string;
 }

src/components/Modals/Modal.styles.ts

@@ -10,11 +10,15 @@ import {
   StyledModalDropArea,
   StyledModalEditableList,
   StyledModalEntryList,
+  StyledModalImageRow,
   StyledModalInput,
   StyledModalInputRowContainer,
   StyledModalInputSelector,
   StyledModalInputSelectorTitle,
   StyledModalRow,
+  StyledModalRowDataText,
+  StyledModalRowDataTextEntries,
+  StyledModalRowDataTextTitle,
   StyledModalSelectIcon,
   StyledModalTitlebar,
 } from "./Modal.styles";
@@ -187,7 +191,16 @@ export const ModalRow = ({
       return (
         <StyledModalEditableList id={id}>{children}</StyledModalEditableList>
       );
-
+    case "img":
+      return (
+        <StyledModalImageRow
+          color={theme.palette.text}
+          roundness={theme.roundness}
+          id={id}
+        >
+          {children}
+        </StyledModalImageRow>
+      );
     default:
       return (
         <StyledModalRow
@@ -206,6 +219,41 @@ ModalRow.defaultProps = {
   type: "all",
 };
 
+export const ModalRowDataText = ({
+  id,
+  title,
+  data,
+}: {
+  id?: string;
+  title: string;
+  data: string[];
+}) => {
+  const theme = useTheme();
+
+  if (data.length == 0) {
+    return (
+      <StyledModalRowDataText>
+        <StyledModalRowDataTextTitle color={theme.palette.text}>
+          {`${title}:`}
+        </StyledModalRowDataTextTitle>
+      </StyledModalRowDataText>
+    );
+  }
+
+  return (
+    <StyledModalRowDataText>
+      <StyledModalRowDataTextTitle color={theme.palette.text}>
+        {`${title}:`}
+      </StyledModalRowDataTextTitle>
+      <StyledModalRowDataTextEntries>
+        {data.map((entry) => {
+          return <label>{entry}</label>;
+        })}
+      </StyledModalRowDataTextEntries>
+    </StyledModalRowDataText>
+  );
+};
+
 interface ModalInputBoxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   ref: React.RefObject<HTMLInputElement>;

src/components/Modals/Modal.tsx

@@ -8,6 +8,7 @@ export {
   ModalInputDropArea,
   ModalInputSelectIcon,
   ModalActionList,
+  ModalRowDataText,
 } from "./Modal";
 export { default as DeleteModal } from "./DeleteModal";
 export { default as NewFileModal } from "./NewFileModal";

src/components/Modals/index.ts

@@ -19,7 +19,8 @@ export {
   ModalEditableList,
   ModalInputDropArea,
   ModalInputSelectIcon,
-  ModalActionList
+  ModalActionList,
+  ModalRowDataText,
 } from "./components";
 export {
   ThemeProvider,

src/index.ts

@@ -1,4 +1,10 @@
-export type ModelRowTypes = "all" | "buttons" | "input" | "list";
+export type ModelRowTypes =
+  | "all"
+  | "buttons"
+  | "input"
+  | "list"
+  | "img"
+  | "text";
 
 export interface ModalInputSelectIconEntry {
   id: string;