Add new components and update styleUtils.ts

src/frontend/src/components/NewFlowCardComponent/index.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { getComponent, postLikeComponent } from "../../controllers/API";
+import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useStoreStore } from "../../stores/storeStore";
+import { storeComponent } from "../../types/store";
+import cloneFLowWithParent from "../../utils/storeUtils";
+import { cn } from "../../utils/utils";
+import ShadTooltip from "../ShadTooltipComponent";
+import IconComponent from "../genericIconComponent";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "../ui/card";
+import { FlowType } from "../../types/flow";
+import { useNavigate } from "react-router-dom";
+
+export default function NewFlowCardComponent({
+}: {
+    }) {
+    const addFlow = useFlowsManagerStore((state) => state.addFlow);
+    const navigate = useNavigate();
+
+    return (
+        <Card
+
+            className={cn(
+                "group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md",
+            )}
+        >
+                <CardContent className="w-full h-full flex align-middle items-center justify-center">
+            <button onClick={() => {
+              addFlow(true).then((id) => {
+                navigate("/flow/" + id);
+              });
+            }}>
+                    <IconComponent
+                        className={cn(
+                            "h-12 w-12 text-muted-foreground",
+                        )}
+                        name="PlusCircle"
+                    />
+            </button>
+                </CardContent>
+        </Card>
+    );
+}

src/frontend/src/components/exampleComponent/index.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { getComponent, postLikeComponent } from "../../controllers/API";
+import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useStoreStore } from "../../stores/storeStore";
+import { storeComponent } from "../../types/store";
+import cloneFLowWithParent from "../../utils/storeUtils";
+import { cn } from "../../utils/utils";
+import ShadTooltip from "../ShadTooltipComponent";
+import IconComponent from "../genericIconComponent";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import {
+    Card,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "../ui/card";
+import { FlowType } from "../../types/flow";
+
+export default function CollectionCardComponent({
+    data,
+}: {
+    data: FlowType;
+    authorized?: boolean;
+}) {
+    const addFlow = useFlowsManagerStore((state) => state.addFlow);
+
+    return (
+        <Card
+            className={cn(
+                "group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md",
+            )}
+        >
+            <div>
+                <CardHeader>
+                    <div>
+                        <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+                            <IconComponent
+                                className={cn(
+                                    "flex-shrink-0 h-7 w-7 text-flow-icon",
+                                )}
+                                name="Group"
+                            />
+                            <ShadTooltip content={data.name}>
+                                <div className="w-full truncate">{data.name}</div>
+                            </ShadTooltip>
+                        </CardTitle>
+                    </div>
+                    <CardDescription className="pb-2 pt-2">
+                        <div className="truncate-doubleline">{data.description}</div>
+                    </CardDescription>
+                </CardHeader>
+            </div>
+
+            <CardFooter>
+                <div className="flex w-full items-center justify-between gap-2">
+                    <div className="flex w-full justify-end flex-wrap gap-2">
+                        <Button
+                            tabIndex={-1}
+                            variant="outline"
+                            size="sm"
+                            className="whitespace-nowrap "
+                        >
+                            <IconComponent
+                                name="ExternalLink"
+                                className="main-page-nav-button select-none"
+                            />
+                            Select Flow
+                        </Button>
+                    </div>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+}

src/frontend/src/pages/MainPage/index.tsx

@@ -1,5 +1,5 @@
 import { Group, ToyBrick } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -14,6 +14,9 @@ import {
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
+import BaseModal from "../../modals/baseModal";
+import ExampleCardComponent from "../../components/exampleComponent";
+import NewFlowCardComponent from "../../components/NewFlowCardComponent";
 export default function HomePage(): JSX.Element {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
@@ -25,6 +28,7 @@ export default function HomePage(): JSX.Element {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const location = useLocation();
   const pathname = location.pathname;
+  const [openModal, setOpenModal] = useState(false);
   const is_component = pathname === "/components";
   const dropdownOptions = [
     {
@@ -36,8 +40,7 @@ export default function HomePage(): JSX.Element {
         })
           .then((id) => {
             setSuccessData({
-              title: `${
+              title: `${is_component ? "Component" : "Flow"
-                is_component ? "Component" : "Flow"
                 } uploaded successfully`,
             });
             if (!is_component) navigate("/flow/" + id);
@@ -98,11 +101,7 @@ export default function HomePage(): JSX.Element {
           </Button>
           <DropdownButton
             firstButtonName="New Project"
-            onFirstBtnClick={() => {
+            onFirstBtnClick={() => setOpenModal(true)}
-              addFlow(true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
             options={dropdownOptions}
           />
         </div>
@@ -116,6 +115,27 @@ export default function HomePage(): JSX.Element {
           <Outlet />
         </div>
       </div>
+      <BaseModal open={openModal} setOpen={setOpenModal}>
+        <BaseModal.Header description={"Select a template or start from scratch"}>
+          <span className="pr-2" data-testid="modal-title">
+            Create a New Flow
+          </span>
+          <IconComponent
+            name="Group"
+            className="h-6 w-6 text-primary stroke-2 "
+            aria-hidden="true"
+          />
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <div className="flex flex-wrap w-full h-full p-4 gap-3">
+            <ExampleCardComponent data={
+              { data: { edges: [], nodes: [], viewport: { x: 0, y: 0, zoom: 1 } }, 
+            description: "test description",id:"teste",name:"test name",}
+            } />
+            <NewFlowCardComponent/>
+            </div>
+        </BaseModal.Content>
+      </BaseModal>
     </PageLayout>
   );
 }

src/frontend/src/utils/styleUtils.ts

@@ -5,8 +5,11 @@ import {
   Bell,
   BookMarked,
   BookmarkPlus,
+  PlusCircle,
+  PlusSquare,
   Bot,
   Boxes,
+  GitCompare,
   Braces,
   Check,
   CheckCircle2,
@@ -392,6 +395,8 @@ export const nodeIconsLucide: iconsType = {
   Circle,
   CircleDot,
   Clipboard,
+  PlusCircle,
+  PlusSquare,
   Code2,
   Variable,
   Snowflake,
@@ -469,3 +474,4 @@ export const nodeIconsLucide: iconsType = {
   Delete,
   Command,
 };
+