Implementing @layer components for CSS (#594)

This pull request introduces a new feature that enhances our CSS
architecture by adding support for @layer components. With this feature,
we can now organize and manage our CSS more efficiently, making it
easier to work with and maintain.

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -3,12 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
-import {
+
-  INPUT_DIALOG,
-  INPUT_DISABLE,
-  INPUT_EDIT_NODE,
-  INPUT_STYLE,
-} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function CodeAreaComponent({
@@ -53,8 +48,8 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              ? "input-edit-node input-dialog"
-              : INPUT_STYLE + INPUT_DIALOG + (disabled ? INPUT_DISABLE : "")
+              : "input-primary input-dialog " + (disabled ? "input-disable" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}

src/frontend/src/components/dropdownComponent/index.tsx

@@ -2,7 +2,6 @@ import { Listbox, Transition } from "@headlessui/react";
 import { Fragment, useContext, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
-import { INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { ChevronsUpDown, Check } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -40,8 +39,8 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "border-1 relative pr-8" + INPUT_EDIT_NODE
+                    ? "border-1 relative pr-8 input-edit-node"
-                    : "py-2 pl-3 pr-10 text-left" + INPUT_STYLE
+                    : "py-2 pl-3 pr-10 text-left input-primary"
                 }
               >
                 <span className="block w-full truncate bg-background">

src/frontend/src/components/floatComponent/index.tsx

@@ -1,7 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function FloatComponent({
@@ -58,8 +57,8 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? INPUT_EDIT_NODE
+            ? "input-edit-node"
-            : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
+            : "input-primary" + (disabled ? " input-disable " : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"

src/frontend/src/components/inputComponent/index.tsx

@@ -3,7 +3,6 @@ import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 
 export default function InputComponent({
   value,
@@ -47,9 +46,9 @@ export default function InputComponent({
         }}
         className={classNames(
           " pr-12 ",
-          disabled ? INPUT_DISABLE : "",
+          disabled ? " input-disable " : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
-          editNode ? INPUT_EDIT_NODE : INPUT_STYLE,
+          editNode ? " input-edit-node " : " input-primary ",
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}

src/frontend/src/components/inputFileComponent/index.tsx

@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { FileSearch2 } from "lucide-react";
 import { uploadFile } from "../../controllers/API";
 
@@ -103,8 +102,8 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? INPUT_EDIT_NODE + INPUT_STYLE
+              ? "input-edit-node " + "input-primary "
-              : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
+              : "input-primary " + (disabled ? "input-disable " : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}

src/frontend/src/components/inputListComponent/index.tsx

@@ -3,7 +3,6 @@ import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { X, Plus } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
@@ -43,8 +42,8 @@ export default function InputListComponent({
               value={i}
               className={
                 editNode
-                  ? INPUT_EDIT_NODE
+                  ? "input-edit-node "
-                  : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
+                  : "input-primary " + (disabled ? "input-disable" : "")
               }
               placeholder="Type something..."
               onChange={(e) => {

src/frontend/src/components/intComponent/index.tsx

@@ -2,7 +2,6 @@ import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { classNames } from "../../utils";
-import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function IntComponent({
@@ -72,8 +71,8 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? INPUT_EDIT_NODE
+            ? " input-edit-node "
-            : INPUT_STYLE + (disabled ? INPUT_DISABLE : "")
+            : " input-primary " + (disabled ? " input-disable " : "")
         }
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {

src/frontend/src/components/promptComponent/index.tsx

@@ -3,12 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import {
+
-  INPUT_DIALOG,
-  INPUT_DISABLE,
-  INPUT_EDIT_NODE,
-  INPUT_STYLE,
-} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function PromptAreaComponent({
@@ -54,8 +49,8 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              ? " input-edit-node " + " input-dialog "
-              : (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG
+              : (disabled ? " input-disable " : "") + " input-primary " + " input-dialog "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -76,7 +71,7 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground " />}
+          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
         </button>
       </div>
     </div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -3,12 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-import {
+
-  INPUT_DIALOG,
-  INPUT_DISABLE,
-  INPUT_EDIT_NODE,
-  INPUT_STYLE,
-} from "../../constants";
 import { ExternalLink } from "lucide-react";
 
 export default function TextAreaComponent({
@@ -57,8 +52,8 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? INPUT_EDIT_NODE + INPUT_DIALOG
+              ? "input-edit-node " + " input-dialog "
-              : INPUT_DIALOG + "px-3 py-2" + (disabled ? INPUT_DISABLE : "")
+              : " input_dialog " + "px-3 py-2" + (disabled ? " input-disable " : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -79,7 +74,7 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground " />}
+          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
         </button>
       </div>
     </div>

src/frontend/src/constants.tsx

@@ -166,37 +166,6 @@ export const IMPORT_DIALOG_SUBTITLE =
 export const EXPORT_CODE_DIALOG =
   "Generate the code to integrate your flow into an external application.";
 
-/**
- * The base input for clickable ones
- * @constant
- */
-export const INPUT_DIALOG = " text-ring cursor-pointer bg-transparent";
-
-/**
- * The base input style
- * @constant
- */
-export const INPUT_STYLE =
-  " bg-background block border-ring focus:placeholder-transparent focus:ring-ring focus:tw-ring-none form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full ";
-
-/**
- * The base input on edit node
- * @constant
- */
-export const INPUT_EDIT_NODE =
-  " placeholder:text-center pt-0.5 pb-0.5 text-center " + INPUT_STYLE;
-
-/**
- * The base search input style
- * @constant
- */
-export const INPUT_SEARCH = INPUT_STYLE + " pr-7 mx-2 ";
-
-/**
- * The base disable input style
- * @constant
- */
-export const INPUT_DISABLE = " bg-input ";
 /**
  * The base text for subtitle of code dialog
  * @constant

src/frontend/src/index.css

@@ -140,3 +140,25 @@ The cursor: default; property value restores the browser's default cursor style
 .react-flow__pane {
   cursor: default;
 }
+
+
+@layer components {
+  .input-primary:focus{
+    @apply focus:placeholder-transparent focus:ring-ring focus:border-ring
+  }
+  .input-primary {
+    @apply bg-background block border-ring form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full;
+  }
+  .input-edit-node{
+    @apply input-primary placeholder:text-center pt-0.5 pb-0.5 text-center
+  }
+  .input-search{
+    @apply input-primary pr-7 mx-2
+  }
+  .input-disable{
+    @apply bg-input
+  }
+  .input-dialog{
+    @apply text-ring cursor-pointer bg-transparent
+  }
+}

src/frontend/src/modals/ApiModal/index.tsx

@@ -104,10 +104,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   useEffect(() => {
     if (closeEdit !== "") {
       tweak.current = getTweak;
-      if (tweak.current.length > 0) {
+      if(tweak.current.length > 0){
         setActiveTab("3");
         openAccordions();
-      } else {
+      }
+      else{
         startTweaks();
       }
     } else {
@@ -138,7 +139,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   }
 
   function startTweaks() {
-    tweak.current.push(buildTweaks(flow));
+    tweak?.current?.push(buildTweaks(flow));
   }
 
   function filterNodes() {
@@ -262,18 +263,21 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="h-[580px] sm:max-w-[700px] lg:max-w-[850px]">
+      <DialogContent className="lg:max-w-[80vw] h-[80vh]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <Code2 strokeWidth={1.5} className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
+            <Code2
+              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              aria-hidden="true"
+            />
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
 
         <Tabs
           value={activeTab}
-          className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
+          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
           onValueChange={(value) => {
             setActiveTab(value);
             if (value === "3") {
@@ -289,26 +293,28 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                 </TabsTrigger>
               ))}
             </TabsList>
+            {Number(activeTab) < 3 && (
               <div className="float-right">
                 <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring hover:text-foreground"
+                  className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
                   onClick={copyToClipboard}
                 >
                   {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
                   {isCopied ? "Copied!" : "Copy code"}
                 </button>
               </div>
+            )}
           </div>
 
           {tabs.map((tab, index) => (
             <TabsContent
               value={index.toString()}
-              className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
+              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
               key={index} // Remember to add a unique key prop
             >
               {index < 3 ? (
                 <SyntaxHighlighter
-                  className="h-[400px] w-full overflow-auto"
+                  className="w-full overflow-auto h-[60vh]"
                   language={tab.mode}
                   style={oneDark}
                 >
@@ -316,10 +322,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                 </SyntaxHighlighter>
               ) : index === 3 ? (
                 <>
-                  <div className="mt-2 flex h-[400px] w-full">
+                  <div className="flex w-full h-full mt-2">
                     <div
                       className={classNames(
-                        "w-full rounded-lg  border-[1px] border-gray-200 bg-muted",
+                        "w-full rounded-lg bg-muted h-[60vh]",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
                           : "overflow-hidden"
@@ -332,14 +338,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                               trigger={t["data"]["id"]}
                               open={openAccordion}
                             >
-                              <div className="flex h-fit flex-col gap-5">
+                              <div className="flex flex-col gap-5 h-fit">
                                 <Table className="table-fixed bg-muted outline-1">
-                                  <TableHeader className="h-10 border-gray-200 text-xs font-medium text-gray-500">
+                                  <TableHeader className="border-input text-xs font-medium text-ring h-10">
                                     <TableRow className="dark:border-b-muted">
                                       <TableHead className="h-7 text-center">
                                         PARAM
                                       </TableHead>
-                                      <TableHead className="h-7 p-0 text-center">
+                                      <TableHead className="p-0 h-7 text-center">
                                         VALUE
                                       </TableHead>
                                     </TableRow>
@@ -373,11 +379,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             key={i}
                                             className="h-10 dark:border-b-muted"
                                           >
-                                            <TableCell className="p-0 text-center text-sm text-gray-900">
+                                            <TableCell className="p-0 text-center text-gray-900 text-sm">
                                               {n}
                                             </TableCell>
-                                            <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
+                                            <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
-                                              <div className="m-auto w-[250px]">
+                                              <div className="w-[250px] m-auto">
                                                 {t.data.node.template[n]
                                                   .type === "str" &&
                                                 !t.data.node.template[n]

src/frontend/src/modals/chatModal/chatInput/index.tsx

@@ -1,7 +1,6 @@
 import { classNames } from "../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import { TabsContext } from "../../../contexts/tabsContext";
-import { INPUT_STYLE } from "../../../constants";
 import { Lock, Send } from "lucide-react";
 
 export default function ChatInput({
@@ -54,7 +53,7 @@ export default function ChatInput({
             ? " bg-input text-foreground "
             : "  bg-background text-foreground ",
           "form-input block w-full rounded-md border-ring pr-10  custom-scroll sm:text-sm" +
-            INPUT_STYLE
+            " input-primary "
         )}
         placeholder={"Send a message..."}
       />

src/frontend/src/modals/genericModal/index.tsx

@@ -80,7 +80,7 @@ export default function GenericModal({
         <div className="mt-2 flex h-full w-full">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1"
+            className=" h-[300px] w-full form-primary "
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);

src/frontend/src/modals/textAreaModal/index.tsx

@@ -92,7 +92,7 @@ export default function TextAreaModal({
                       <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-ring"
+                          className="form-input h-full w-full form-primary"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -15,7 +15,6 @@ import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { alertContext } from "../../../../contexts/alertContext";
-import { INPUT_SEARCH, INPUT_STYLE } from "../../../../constants";
 import { Separator } from "../../../../components/ui/separator";
 import { Menu } from "lucide-react";
 
@@ -124,7 +123,7 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search"
-          className={INPUT_SEARCH}
+          className="input-search"
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);