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

Implementing @layer components for CSS (#594)

Browse source 
This pull request introduces a new feature that enhances our CSS
architecture by adding support for @layer components. With this feature,
we can now organize and manage our CSS more efficiently, making it
easier to work with and maintain.
This commit is contained in:
anovazzi1 2023-07-03 17:59:34 -03:00 • committed by GitHub
commit d91451cbfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 87 additions and 113 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
}
}

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

@ -104,10 +104,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
useEffect(() => {
if (closeEdit !== "") {
tweak.current = getTweak;
if (tweak.current.length > 0) {
if(tweak.current.length > 0){
setActiveTab("3");
openAccordions();
} else {
}
else{
startTweaks();
}
} else {
@ -138,7 +139,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}
function startTweaks() {
tweak.current.push(buildTweaks(flow));
tweak?.current?.push(buildTweaks(flow));
}
function filterNodes() {
@ -249,31 +250,34 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
function openAccordions() {
let accordionsToOpen = [];
tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen);
}
tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen);
}
});
});
});
}
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="h-[580px] sm:max-w-[700px] lg:max-w-[850px]">
<DialogContent className="lg:max-w-[80vw] h-[80vh]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2 strokeWidth={1.5} className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
<Code2
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader>
<Tabs
value={activeTab}
className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
onValueChange={(value) => {
setActiveTab(value);
if (value === "3") {
@ -289,26 +293,28 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsTrigger>
))}
</TabsList>
<div className="float-right">
<button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring hover:text-foreground"
onClick={copyToClipboard}
>
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
{isCopied ? "Copied!" : "Copy code"}
</button>
</div>
{Number(activeTab) < 3 && (
<div className="float-right">
<button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
onClick={copyToClipboard}
>
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
{isCopied ? "Copied!" : "Copy code"}
</button>
</div>
)}
</div>
{tabs.map((tab, index) => (
<TabsContent
value={index.toString()}
className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
key={index} // Remember to add a unique key prop
>
{index < 3 ? (
<SyntaxHighlighter
className="h-[400px] w-full overflow-auto"
className="w-full overflow-auto h-[60vh]"
language={tab.mode}
style={oneDark}
>
@ -316,10 +322,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</SyntaxHighlighter>
) : index === 3 ? (
<>
<div className="mt-2 flex h-[400px] w-full">
<div className="flex w-full h-full mt-2">
<div
className={classNames(
"w-full rounded-lg border-[1px] border-gray-200 bg-muted",
"w-full rounded-lg bg-muted h-[60vh]",
1 == 1
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
@ -332,14 +338,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
trigger={t["data"]["id"]}
open={openAccordion}
>
<div className="flex h-fit flex-col gap-5">
<div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed bg-muted outline-1">
<TableHeader className="h-10 border-gray-200 text-xs font-medium text-gray-500">
<TableHeader className="border-input text-xs font-medium text-ring h-10">
<TableRow className="dark:border-b-muted">
<TableHead className="h-7 text-center">
PARAM
</TableHead>
<TableHead className="h-7 p-0 text-center">
<TableHead className="p-0 h-7 text-center">
VALUE
</TableHead>
</TableRow>
@ -373,11 +379,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
key={i}
className="h-10 dark:border-b-muted"
>
<TableCell className="p-0 text-center text-sm text-gray-900">
<TableCell className="p-0 text-center text-gray-900 text-sm">
{n}
</TableCell>
<TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
<div className="m-auto w-[250px]">
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
<div className="w-[250px] m-auto">
{t.data.node.template[n]
.type === "str" &&
!t.data.node.template[n]

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