🔧 chore(frontend): remove unused imports and constants from codeAreaComponent, dropdownComponent, floatComponent, inputComponent, inputFileComponent, inputListComponent, intComponent, promptComponent, and textAreaComponent

🔧 fix(index.css): add new styles for input components to improve consistency and usability
🔧 fix(ApiModal/index.tsx): fix potential null reference error when pushing tweaks to the current tweak ref
🔧 fix(chatInput/index.tsx): remove unused constant import and update input style class name
🔧 fix(genericModal/index.tsx): update class name for textarea to match new primary form style
🔧 fix(textAreaModal/index.tsx): update class name for textarea to match new primary form style
🔧 fix(extraSidebarComponent/index.tsx): remove unused constant imports and update input search class name

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

@@ -138,7 +138,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   }
 
   function startTweaks() {
-    tweak.current.push(buildTweaks(flow));
+    tweak?.current?.push(buildTweaks(flow));
   }
 
   function filterNodes() {

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);