From c66939f7c2729dc61bb0ec7b2e3a3b106bed4f7d Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 3 Jul 2023 16:17:57 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20remove=20unus?= =?UTF-8?q?ed=20imports=20and=20constants=20from=20codeAreaComponent,=20dr?= =?UTF-8?q?opdownComponent,=20floatComponent,=20inputComponent,=20inputFil?= =?UTF-8?q?eComponent,=20inputListComponent,=20intComponent,=20promptCompo?= =?UTF-8?q?nent,=20and=20textAreaComponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔧 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 --- .../components/codeAreaComponent/index.tsx | 11 ++----- .../components/dropdownComponent/index.tsx | 5 ++- .../src/components/floatComponent/index.tsx | 5 ++- .../src/components/inputComponent/index.tsx | 5 ++- .../components/inputFileComponent/index.tsx | 5 ++- .../components/inputListComponent/index.tsx | 5 ++- .../src/components/intComponent/index.tsx | 5 ++- .../src/components/promptComponent/index.tsx | 13 +++----- .../components/textAreaComponent/index.tsx | 13 +++----- src/frontend/src/constants.tsx | 31 ------------------- src/frontend/src/index.css | 22 +++++++++++++ src/frontend/src/modals/ApiModal/index.tsx | 2 +- .../src/modals/chatModal/chatInput/index.tsx | 3 +- .../src/modals/genericModal/index.tsx | 2 +- .../src/modals/textAreaModal/index.tsx | 2 +- .../extraSidebarComponent/index.tsx | 3 +- 16 files changed, 50 insertions(+), 82 deletions(-) diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index dab3d9699..d4bf6f716 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/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_STYLE + INPUT_DIALOG + (disabled ? INPUT_DISABLE : "") + ? "input-edit-node input-dialog" + : "input-primary input-dialog " + (disabled ? "input-disable" : "") } > {myValue !== "" ? myValue : "Type something..."} diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 27d355cd2..67447a21f 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/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({ diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx index b725c7490..523892595 100644 --- a/src/frontend/src/components/floatComponent/index.tsx +++ b/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_STYLE + (disabled ? INPUT_DISABLE : "") + ? "input-edit-node" + : "input-primary" + (disabled ? " input-disable " : "") } placeholder={ editNode ? "Number 0 to 1" : "Type a number from zero to one" diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index b8db68274..4182dbbb2 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/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..."} diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index 30e3d729e..edfc8e39d 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/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_STYLE + (disabled ? INPUT_DISABLE : "") + ? "input-edit-node " + "input-primary " + : "input-primary " + (disabled ? "input-disable " : "") } > {myValue !== "" ? myValue : "No file"} diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 8e2321f1f..7dd6d79c6 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/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_STYLE + (disabled ? INPUT_DISABLE : "") + ? "input-edit-node " + : "input-primary " + (disabled ? "input-disable" : "") } placeholder="Type something..." onChange={(e) => { diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx index b4b863622..da8563a59 100644 --- a/src/frontend/src/components/intComponent/index.tsx +++ b/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_STYLE + (disabled ? INPUT_DISABLE : "") + ? " input-edit-node " + : " input-primary " + (disabled ? " input-disable " : "") } placeholder={editNode ? "Integer number" : "Type an integer number"} onChange={(e) => { diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index 16a06b71d..cea548d8b 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/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 - : (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG + ? " input-edit-node " + " input-dialog " + : (disabled ? " input-disable " : "") + " input-primary " + " input-dialog " } > {myValue !== "" ? myValue : "Type your prompt here"} @@ -76,7 +71,7 @@ export default function PromptAreaComponent({ ); }} > - {!editNode && } + {!editNode && } diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index 66bcf72bd..61ce7891b 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/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_DIALOG + "px-3 py-2" + (disabled ? INPUT_DISABLE : "") + ? "input-edit-node " + " input-dialog " + : " input_dialog " + "px-3 py-2" + (disabled ? " input-disable " : "") } > {myValue !== "" ? myValue : "Type something..."} @@ -79,7 +74,7 @@ export default function TextAreaComponent({ ); }} > - {!editNode && } + {!editNode && } diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 08b03787a..99a1beb7f 100644 --- a/src/frontend/src/constants.tsx +++ b/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 diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 7ad4d7821..15a0b4b2e 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -139,4 +139,26 @@ code { The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */ .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 + } } \ No newline at end of file diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index dedcbf332..d796863a8 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/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() { diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx index 6dbf48fdd..953da2940 100644 --- a/src/frontend/src/modals/chatModal/chatInput/index.tsx +++ b/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..."} /> diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index e3894e00b..46291405b 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -80,7 +80,7 @@ export default function GenericModal({