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

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

Browse source 
🔧 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
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-03 16:17:57 -03:00
commit c66939f7c2
16 changed files with 50 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -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
: "py-2 pl-3 pr-10 text-left" + INPUT_STYLE
? "border-1 relative pr-8 input-edit-node"
: "py-2 pl-3 pr-10 text-left input-primary"
}
>
<span className="block w-full truncate bg-background">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22
src/frontend/src/index.css
View file

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

2
src/frontend/src/modals/ApiModal/index.tsx
View file

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

3
src/frontend/src/modals/chatModal/chatInput/index.tsx
View file

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

2
src/frontend/src/modals/genericModal/index.tsx
View file

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

2
src/frontend/src/modals/textAreaModal/index.tsx
View file

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

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

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