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

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

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