From f6b5f720f6b6b3eb5ee0a039112e4f9f6a97c129 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 30 Jun 2023 20:17:30 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(codeAreaComponent):=20update?= =?UTF-8?q?=20import=20statement=20for=20INPUT=5FSTYLE=20constant=20to=20i?= =?UTF-8?q?nclude=20additional=20constants=20for=20input=20dialog=20and=20?= =?UTF-8?q?input=20disable=20=F0=9F=94=A7=20fix(dropdownComponent):=20upda?= =?UTF-8?q?te=20import=20statement=20for=20INPUT=5FSTYLE=20constant=20to?= =?UTF-8?q?=20include=20additional=20constant=20for=20input=20edit=20node?= =?UTF-8?q?=20=F0=9F=94=A7=20fix(floatComponent):=20update=20import=20stat?= =?UTF-8?q?ement=20for=20INPUT=5FSTYLE=20constant=20to=20include=20additio?= =?UTF-8?q?nal=20constants=20for=20input=20disable=20and=20input=20edit=20?= =?UTF-8?q?node=20=F0=9F=94=A7=20fix(inputComponent):=20update=20import=20?= =?UTF-8?q?statement=20for=20INPUT=5FSTYLE=20constant=20to=20include=20add?= =?UTF-8?q?itional=20constants=20for=20input=20disable=20and=20input=20edi?= =?UTF-8?q?t=20node=20=F0=9F=94=A7=20fix(inputFileComponent):=20update=20i?= =?UTF-8?q?mport=20statement=20for=20INPUT=5FSTYLE=20constant=20to=20inclu?= =?UTF-8?q?de=20additional=20constants=20for=20input=20disable=20and=20inp?= =?UTF-8?q?ut=20edit=20node=20=F0=9F=94=A7=20fix(inputListComponent):=20up?= =?UTF-8?q?date=20import=20statement=20for=20INPUT=5FSTYLE=20constant=20to?= =?UTF-8?q?=20include=20additional=20constants=20for=20input=20disable=20a?= =?UTF-8?q?nd=20input=20edit=20node?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐛 fix(intComponent): add INPUT_DISABLE constant to disable input when disabled prop is true 🐛 fix(promptComponent): add INPUT_DISABLE constant to disable input when disabled prop is true 🐛 fix(textAreaComponent): add INPUT_DISABLE constant to disable input when disabled prop is true 🐛 fix(extraSidebarComponent): change INPUT_STYLE to INPUT_SEARCH for search input styling ✨ feat(server.ts): change port variable case from lowercase port to uppercase PORT to improve semantics ✨ feat(server.ts): add support for process.env.PORT environment variable to be able to run app on a configurable port --- .../components/codeAreaComponent/index.tsx | 12 +-- .../components/dropdownComponent/index.tsx | 8 +- .../src/components/floatComponent/index.tsx | 10 +- .../src/components/inputComponent/index.tsx | 11 +-- .../components/inputFileComponent/index.tsx | 8 +- .../components/inputListComponent/index.tsx | 93 +++++++++---------- .../src/components/intComponent/index.tsx | 9 +- .../src/components/promptComponent/index.tsx | 9 +- .../components/textAreaComponent/index.tsx | 9 +- src/frontend/src/constants.tsx | 28 +++++- .../extraSidebarComponent/index.tsx | 5 +- 11 files changed, 108 insertions(+), 94 deletions(-) diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 1c998a20d..0f7c3351d 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -3,7 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext"; import CodeAreaModal from "../../modals/codeAreaModal"; import TextAreaModal from "../../modals/textAreaModal"; import { TextAreaComponentType } from "../../types/components"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; import { ExternalLink } from "lucide-react"; export default function CodeAreaComponent({ @@ -46,11 +46,11 @@ export default function CodeAreaComponent({ }} className={ editNode - ? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm text-sm bg-transparent sm:text-sm" + - INPUT_STYLE - : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + - INPUT_STYLE + - (disabled ? " bg-input" : "") + ? INPUT_EDIT_NODE + + INPUT_DIALOG + : + INPUT_STYLE + 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 1539d6a02..30efb021e 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -2,7 +2,7 @@ import { Listbox, Transition } from "@headlessui/react"; import { Fragment, useEffect, useState } from "react"; import { DropDownComponentType } from "../../types/components"; import { classNames } from "../../utils"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; import { ChevronsUpDown, Check } from "lucide-react"; export default function Dropdown({ @@ -34,9 +34,9 @@ export default function Dropdown({ diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx index 343c83d89..ba82a5a97 100644 --- a/src/frontend/src/components/floatComponent/index.tsx +++ b/src/frontend/src/components/floatComponent/index.tsx @@ -1,7 +1,7 @@ import { useContext, useEffect, useState } from "react"; import { FloatComponentType } from "../../types/components"; import { TabsContext } from "../../contexts/tabsContext"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; export default function FloatComponent({ value, @@ -56,11 +56,9 @@ export default function FloatComponent({ value={myValue} className={ editNode - ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + - INPUT_STYLE - : "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" + - INPUT_STYLE + - (disabled ? " bg-input" : "") + ? INPUT_EDIT_NODE + : INPUT_STYLE + + (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 daef2687b..aee7af369 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -3,7 +3,7 @@ import { InputComponentType } from "../../types/components"; import { classNames } from "../../utils"; import { TabsContext } from "../../contexts/tabsContext"; import { PopUpContext } from "../../contexts/popUpContext"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; export default function InputComponent({ value, @@ -46,13 +46,12 @@ export default function InputComponent({ if (disableCopyPaste) setDisableCopyPaste(false); }} className={classNames( - "block w-full pr-12 form-input rounded-md bg-background border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground", - disabled ? " bg-input" : "", + " pr-12 ", + disabled ? INPUT_DISABLE : "", password && !pwdVisible && myValue !== "" ? "password" : "", editNode - ? "border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" + - INPUT_STYLE - : "ring-offset-input" + INPUT_STYLE, + ? INPUT_EDIT_NODE + : INPUT_STYLE, 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 ce851ec60..bef265b24 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react"; import { alertContext } from "../../contexts/alertContext"; import { FileComponentType } from "../../types/components"; import { TabsContext } from "../../contexts/tabsContext"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; import { FileSearch2 } from "lucide-react"; import { uploadFile } from "../../controllers/API"; @@ -103,11 +103,11 @@ export default function InputFileComponent({ onClick={handleButtonClick} className={ editNode - ? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm border-1" + + ? INPUT_EDIT_NODE + INPUT_STYLE - : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + + : INPUT_STYLE + - (disabled ? " bg-input" : "") + (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 d81da6183..814e59d78 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -3,7 +3,7 @@ import { InputListComponentType } from "../../types/components"; import { TabsContext } from "../../contexts/tabsContext"; import _ from "lodash"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; import { X, Plus } from "lucide-react"; export default function InputListComponent({ @@ -26,58 +26,55 @@ export default function InputListComponent({ "flex flex-col gap-3 py-2" } > - {inputList.map((i, idx) => ( -
- { - setInputList((old) => { - let newInputList = _.cloneDeep(old); - newInputList[idx] = e.target.value; - return newInputList; - }); - onChange(inputList); - }} - /> - {idx === inputList.length - 1 ? ( - - ) : ( - - )} -
- ))} + } } /> + {idx === inputList.length - 1 ? ( + + ) : ( + + )} + + ); + })} ); } diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx index 462fa0466..ee9304c0e 100644 --- a/src/frontend/src/components/intComponent/index.tsx +++ b/src/frontend/src/components/intComponent/index.tsx @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react"; import { FloatComponentType } from "../../types/components"; import { TabsContext } from "../../contexts/tabsContext"; import { classNames } from "../../utils"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; export default function IntComponent({ value, @@ -70,11 +70,10 @@ export default function IntComponent({ value={myValue} className={ editNode - ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" + - INPUT_STYLE - : "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" + + ? INPUT_EDIT_NODE + : INPUT_STYLE + - (disabled ? " bg-input" : "") + (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 96dd72054..a54da7872 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/src/frontend/src/components/promptComponent/index.tsx @@ -3,7 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext"; import { TextAreaComponentType } from "../../types/components"; import GenericModal from "../../modals/genericModal"; import { TypeModal } from "../../utils"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; import { ExternalLink } from "lucide-react"; export default function PromptAreaComponent({ @@ -49,10 +49,9 @@ export default function PromptAreaComponent({ }} className={ editNode - ? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" + - INPUT_STYLE - : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + - (disabled ? " bg-input" : "") + ? INPUT_EDIT_NODE + INPUT_DIALOG + : + (disabled ? INPUT_DISABLE : "") + INPUT_STYLE + INPUT_DIALOG } > {myValue !== "" ? myValue : "Type your prompt here"} diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index 9f934ce2c..ca47f5cc4 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/src/frontend/src/components/textAreaComponent/index.tsx @@ -3,7 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext"; import { TextAreaComponentType } from "../../types/components"; import GenericModal from "../../modals/genericModal"; import { TypeModal } from "../../utils"; -import { INPUT_STYLE } from "../../constants"; +import { INPUT_DIALOG, INPUT_DISABLE, INPUT_EDIT_NODE, INPUT_STYLE } from "../../constants"; import { ExternalLink } from "lucide-react"; export default function TextAreaComponent({ @@ -52,10 +52,9 @@ export default function TextAreaComponent({ }} className={ editNode - ? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring bg-transparent shadow-sm sm:text-sm" + - INPUT_STYLE - : "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" + - (disabled ? " bg-input" : "") + ? INPUT_EDIT_NODE + INPUT_DIALOG + : INPUT_DIALOG + "px-3 py-2" + + (disabled ? INPUT_DISABLE : "") } > {myValue !== "" ? myValue : "Type something..."} diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index e37ee4199..a0d0f64cb 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -144,12 +144,36 @@ export const EXPORT_CODE_DIALOG = "Generate the code to integrate your flow into an external application."; /** - * The base text for subtitle of code dialog + * 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 = - "focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none"; + " px-3 bg-background focus:tw-ring-none focus-visible:outline-none focus:ring-ring focus:outline-none rounded-md block w-full truncate form-input border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground "; +/** + * 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/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 1b76be337..b2f256afa 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -15,7 +15,7 @@ import ExportModal from "../../../../modals/exportModal"; import ApiModal from "../../../../modals/ApiModal"; import { TabsContext } from "../../../../contexts/tabsContext"; import { alertContext } from "../../../../contexts/alertContext"; -import { INPUT_STYLE } from "../../../../constants"; +import { INPUT_SEARCH, INPUT_STYLE } from "../../../../constants"; import { Separator } from "../../../../components/ui/separator"; import { Menu } from "lucide-react"; @@ -125,8 +125,7 @@ export default function ExtraSidebar() { id="search" placeholder="Search" className={ - INPUT_STYLE + - "w-full border-1 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 disabled:cursor-not-allowed disabled:opacity-50" + INPUT_SEARCH } onChange={(e) => { handleSearchInput(e.target.value);