jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🔧 fix(codeAreaComponent): update import statement for INPUT_STYLE constant to include additional constants for input dialog and input disable

Browse source 
🔧 fix(dropdownComponent): update import statement for INPUT_STYLE constant to include additional constant for input edit node
🔧 fix(floatComponent): update import statement for INPUT_STYLE constant to include additional constants for input disable and input edit node
🔧 fix(inputComponent): update import statement for INPUT_STYLE constant to include additional constants for input disable and input edit node
🔧 fix(inputFileComponent): update import statement for INPUT_STYLE constant to include additional constants for input disable and input edit node
🔧 fix(inputListComponent): update import statement for INPUT_STYLE constant to include additional constants for input disable and input edit node

🐛 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
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-30 20:17:30 -03:00
commit f6b5f720f6
11 changed files with 108 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -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..."}

8
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -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({
<Listbox.Button
className={
editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
INPUT_STYLE
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
? "relative pr-8 border-1" + INPUT_EDIT_NODE
: "py-2 pl-3 pr-10 text-left" +
INPUT_STYLE
}
>

10
src/frontend/src/components/floatComponent/index.tsx
View file

@ -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"

11
src/frontend/src/components/inputComponent/index.tsx
View file

@ -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..."}

8
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -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"}

93
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -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) => (
<div key={idx} className="w-full flex gap-3">
<input
type="text"
value={i}
className={
editNode
? "border-[1px] truncate cursor-pointer text-center 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" +
INPUT_STYLE
: "block w-full form-input bg-background rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
(disabled ? " bg-input" : "") +
"focus:placeholder-transparent"
}
placeholder="Type something..."
onChange={(e) => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList[idx] = e.target.value;
return newInputList;
});
onChange(inputList);
}}
/>
{idx === inputList.length - 1 ? (
<button
onClick={() => {
{inputList.map((i, idx) => {
return (
<div key={idx} className="w-full flex gap-3">
<input
type="text"
value={i}
className={editNode
? INPUT_EDIT_NODE
: INPUT_STYLE +
(disabled ? INPUT_DISABLE : "")}
placeholder="Type something..."
onChange={(e) => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList.push("");
newInputList[idx] = e.target.value;
return newInputList;
});
onChange(inputList);
}}
>
<Plus className={"w-4 h-4 hover:text-ring"} />
</button>
) : (
<button
onClick={() => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList.splice(idx, 1);
return newInputList;
});
onChange(inputList);
}}
>
<X className="w-4 h-4 hover:text-status-red" />
</button>
)}
</div>
))}
} } />
{idx === inputList.length - 1 ? (
<button
onClick={() => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList.push("");
return newInputList;
});
onChange(inputList);
} }
>
<Plus className={"w-4 h-4 hover:text-ring"} />
</button>
) : (
<button
onClick={() => {
setInputList((old) => {
let newInputList = _.cloneDeep(old);
newInputList.splice(idx, 1);
return newInputList;
});
onChange(inputList);
} }
>
<X className="w-4 h-4 hover:text-status-red" />
</button>
)}
</div>
);
})}
</div>
);
}

9
src/frontend/src/components/intComponent/index.tsx
View file

@ -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) => {

9
src/frontend/src/components/promptComponent/index.tsx
View file

@ -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"}

9
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -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..."}

28
src/frontend/src/constants.tsx
View file

@ -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

5
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

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