Refactor and Unification of Inputs/Textarea Components using ShadCn Styling (#669)

**BRANCH CREATED FROM MODALREFACTOR*** This pull request introduces a significant enhancement to the existing codebase by refactoring the inputs and textarea components. Currently, each input and textarea element uses different styling components, leading to inconsistencies and difficulties in maintaining a unified design language across the application. To address this issue, we propose a refactor that unifies all inputs and textareas under a single ShadCn component.
2023-07-25 10:50:34 -03:00 · 2023-07-25 10:50:34 -03:00 · 3aa4270fe7
commit 3aa4270fe7
parent 45673dcda8 f58500c89b
10 changed files with 70 additions and 89 deletions
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
+import { Input } from "../ui/input";

 export default function FloatComponent({
  value,
@ -19,8 +20,8 @@ export default function FloatComponent({
  }, [disabled, onChange]);

  return (
-    <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
-      <input
+    <div className="w-full">
+      <Input
        type="number"
        step={step}
        min={min}
@ -34,12 +35,8 @@ export default function FloatComponent({
        }}
        max={max}
        value={value ?? ""}
-        className={
-          "nopan nodrag noundo nocopy " +
-          (editNode
-            ? "input-edit-node"
-            : "input-primary" + (disabled ? " input-disable " : ""))
-        }
+        disabled={disabled}
+        className={editNode ? "input-edit-node" : ""}
        placeholder={
          editNode ? "Number 0 to 1" : "Type a number from zero to one"
        }
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils/utils";
+import { Input } from "../ui/input";

 export default function InputComponent({
  value,
@ -19,16 +20,15 @@ export default function InputComponent({
  }, [disabled, onChange]);

  return (
-    <div className={disabled ? "input-component-div" : "relative"}>
-      <input
+    <div className="relative w-full">
+      <Input
        value={value}
+        disabled={disabled}
        className={classNames(
-          disabled ? " input-disable " : "",
          password && !pwdVisible && value !== "" ? " text-clip password " : "",
-          editNode ? " input-edit-node " : " input-primary ",
+          editNode ? " input-edit-node " : "",
          password && editNode ? "pr-8" : "",
-          password && !editNode ? "pr-10" : "",
-          "nopan nodrag noundo nocopy"
+          password && !editNode ? "pr-10" : ""
        )}
        placeholder={password && editNode ? "Key" : "Type something..."}
        onChange={(e) => {
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { InputListComponentType } from "../../types/components";

+import { Input } from "../ui/input";
+import { classNames } from "../../utils/utils";
 import _ from "lodash";
 import IconComponent from "../genericIconComponent";

@ -17,24 +19,21 @@ export default function InputListComponent({
  }, [disabled]);

  return (
-    <div
-      className={
-        (disabled ? "pointer-events-none cursor-not-allowed" : "") +
-        "flex flex-col gap-3"
-      }
-    >
+    <div 
+    className={
+    classNames(
+      value.length > 1 && editNode ? "my-1" : "",
+      "flex flex-col gap-3"
+    )
+  }>
      {value.map((i, idx) => {
        return (
          <div key={idx} className="flex w-full gap-3">
-            <input
+            <Input
+              disabled={disabled}
              type="text"
              value={i}
-              className={
-                "nopan nodrag noundo nocopy " +
-                (editNode
-                  ? "input-edit-node "
-                  : "input-primary " + (disabled ? "input-disable" : ""))
-              }
+              className={editNode ? "input-edit-node" : ""}
              placeholder="Type something..."
              onChange={(e) => {
                let newInputList = _.cloneDeep(value);
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
+import { Input } from "../ui/input";

 export default function IntComponent({
  value,
@ -17,13 +18,8 @@ export default function IntComponent({
  }, [disabled, onChange]);

  return (
-    <div
-      className={
-        "w-full " +
-        (disabled ? "pointer-events-none w-full cursor-not-allowed" : "")
-      }
-    >
-      <input
+    <div className="w-full">
+      <Input
        onKeyDown={(event) => {
          if (
            event.key !== "Backspace" &&
@ -51,12 +47,8 @@ export default function IntComponent({
          }
        }}
        value={value ?? ""}
-        className={
-          "nopan nodrag noundo nocopy " +
-          (editNode
-            ? " input-edit-node "
-            : " input-primary " + (disabled ? " input-disable" : ""))
-        }
+        className={editNode ? "input-edit-node" : ""}
+        disabled={disabled}
        placeholder={editNode ? "Integer number" : "Type an integer number"}
        onChange={(e) => {
          onChange(e.target.value);
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@ -3,6 +3,7 @@ import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
+import { Input } from "../ui/input";

 export default function TextAreaComponent({
  value,
@ -18,42 +19,36 @@ export default function TextAreaComponent({
  }, [disabled]);

  return (
-    <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
-      <div className="flex w-full items-center">
-        <input
+    <div className="flex w-full items-center">
+      <Input
+        value={value}
+        disabled={disabled}
+        className={editNode ? "input-edit-node" : ""}
+        placeholder={"Type something..."}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      />
+      <div>
+        <GenericModal
+          type={TypeModal.TEXT}
+          buttonText="Finishing Editing"
+          modalTitle="Edit Text"
          value={value}
-          className={
-            (editNode
-              ? " input-edit-node "
-              : " input-primary " + (disabled ? " input-disable" : "")) +
-            " nopan nodrag noundo nocopy w-full"
-          }
-          placeholder={"Type something..."}
-          onChange={(e) => {
-            onChange(e.target.value);
+          setValue={(t: string) => {
+            onChange(t);
          }}
-        />
-        <div>
-          <GenericModal
-            type={TypeModal.TEXT}
-            buttonText="Finishing Editing"
-            modalTitle="Edit Text"
-            value={value}
-            setValue={(t: string) => {
-              onChange(t);
-            }}
-          >
-            {!editNode && (
-              <IconComponent
-                name="ExternalLink"
-                className={
-                  "icons-parameters-comp" +
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
-                }
-              />
-            )}
-          </GenericModal>
-        </div>
+        >
+          {!editNode && (
+            <IconComponent
+              name="ExternalLink"
+              className={
+                "icons-parameters-comp" +
+                (disabled ? " text-ring" : " hover:text-accent-foreground")
+              }
+            />
+          )}
+        </GenericModal>
      </div>
    </div>
  );
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@ -9,10 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
    return (
      <input
        type={type}
-        className={cn(
-          "nopan nodrag noundo nocopy flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
+        className={cn("nopan nodrag noundo nocopy input-primary", className)}
        ref={ref}
        {...props}
      />
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@ -8,10 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
+        className={cn("nopan nodrag noundo nocopy textarea-primary", className)}
        ref={ref}
        {...props}
      />
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@ -243,13 +243,15 @@ The cursor: default; property value restores the browser's default cursor style
  .button-div-style {
    @apply gap-2 flex
  }
-  .input-primary:focus{
-    @apply focus:placeholder-transparent focus:ring-ring focus:border-ring
+  .input-primary{
+    @apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full truncate
  }
-  .input-primary {
-    @apply bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full;
+  
+/* The same as input-primary but no-truncate */
+  .textarea-primary{
+    @apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full
  }
-
+  
  .input-edit-node{
    @apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
  }
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
+import { Textarea } from "../../../components/ui/textarea";
 import { classNames } from "../../../utils/utils";

 export default function ChatInput({
@ -25,7 +26,7 @@ export default function ChatInput({

  return (
    <div className="relative">
-      <textarea
+      <Textarea
        onKeyDown={(event) => {
          if (event.key === "Enter" && !lockChat && !event.shiftKey) {
            sendMessage();
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@ -1,6 +1,7 @@
 import { useContext, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
+import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
@ -109,7 +110,7 @@ export default function ExtraSidebar() {
      </div>
      <Separator />
      <div className="side-bar-search-div-placement">
-        <input
+        <Input
          type="text"
          name="search"
          id="search"