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

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

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