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

Starting migration for shadUI

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-01 21:10:27 -03:00
commit 0e234030a9
2 changed files with 131 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/frontend/src/components/ui/table.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react" import * as React from "react";
import { cn } from "./lib/utils" import { cn } from "./lib/utils";
const Table = React.forwardRef< const Table = React.forwardRef<
HTMLTableElement, HTMLTableElement,
@ -12,16 +12,16 @@ const Table = React.forwardRef<
{...props} {...props}
/> />
</div> </div>
)) ));
Table.displayName = "Table" Table.displayName = "Table";
const TableHeader = React.forwardRef< const TableHeader = React.forwardRef<
HTMLTableSectionElement, HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement> React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} /> <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
)) ));
TableHeader.displayName = "TableHeader" TableHeader.displayName = "TableHeader";
const TableBody = React.forwardRef< const TableBody = React.forwardRef<
HTMLTableSectionElement, HTMLTableSectionElement,
@ -32,8 +32,8 @@ const TableBody = React.forwardRef<
className={cn("[&_tr:last-child]:border-0", className)} className={cn("[&_tr:last-child]:border-0", className)}
{...props} {...props}
/> />
)) ));
TableBody.displayName = "TableBody" TableBody.displayName = "TableBody";
const TableFooter = React.forwardRef< const TableFooter = React.forwardRef<
HTMLTableSectionElement, HTMLTableSectionElement,
@ -44,8 +44,8 @@ const TableFooter = React.forwardRef<
className={cn("bg-primary font-medium text-primary-foreground", className)} className={cn("bg-primary font-medium text-primary-foreground", className)}
{...props} {...props}
/> />
)) ));
TableFooter.displayName = "TableFooter" TableFooter.displayName = "TableFooter";
const TableRow = React.forwardRef< const TableRow = React.forwardRef<
HTMLTableRowElement, HTMLTableRowElement,
@ -59,8 +59,8 @@ const TableRow = React.forwardRef<
)} )}
{...props} {...props}
/> />
)) ));
TableRow.displayName = "TableRow" TableRow.displayName = "TableRow";
const TableHead = React.forwardRef< const TableHead = React.forwardRef<
HTMLTableCellElement, HTMLTableCellElement,
@ -74,8 +74,8 @@ const TableHead = React.forwardRef<
)} )}
{...props} {...props}
/> />
)) ));
TableHead.displayName = "TableHead" TableHead.displayName = "TableHead";
const TableCell = React.forwardRef< const TableCell = React.forwardRef<
HTMLTableCellElement, HTMLTableCellElement,
@ -86,8 +86,8 @@ const TableCell = React.forwardRef<
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props} {...props}
/> />
)) ));
TableCell.displayName = "TableCell" TableCell.displayName = "TableCell";
const TableCaption = React.forwardRef< const TableCaption = React.forwardRef<
HTMLTableCaptionElement, HTMLTableCaptionElement,
@ -98,8 +98,8 @@ const TableCaption = React.forwardRef<
className={cn("mt-4 text-sm text-muted-foreground", className)} className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props} {...props}
/> />
)) ));
TableCaption.displayName = "TableCaption" TableCaption.displayName = "TableCaption";
export { export {
Table, Table,
@ -110,4 +110,4 @@ export {
TableRow, TableRow,
TableCell, TableCell,
TableCaption, TableCaption,
} };

203
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -8,11 +8,7 @@ import {
import { Fragment, useContext, useEffect, useRef, useState } from "react"; import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { import { classNames, limitScrollFieldsModal, nodeIcons } from "../../utils";
classNames,
limitScrollFieldsModal,
nodeIcons,
} from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { import {
Table, Table,
@ -22,7 +18,7 @@ import {
TableHead, TableHead,
TableHeader, TableHeader,
TableRow, TableRow,
} from "../../components/ui/table" } from "../../components/ui/table";
const invoices = [ const invoices = [
{ {
@ -67,7 +63,7 @@ const invoices = [
totalAmount: "$300.00", totalAmount: "$300.00",
paymentMethod: "Credit Card", paymentMethod: "Credit Card",
}, },
] ];
export default function EditNodeModal({ data }: { data: NodeDataType }) { export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -84,7 +80,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
const [advanced, setAdvanced] = useState([]); const [advanced, setAdvanced] = useState([]);
const [parameters, setParameters] = useState([]); const [parameters, setParameters] = useState([]);
const [enabled, setEnabled] = useState(false) const [enabled, setEnabled] = useState(false);
const updateAdvancedParameters = () => { const updateAdvancedParameters = () => {
setAdvanced( setAdvanced(
@ -112,13 +108,13 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
) )
); );
}; };
useEffect(() => { useEffect(() => {
updateAdvancedParameters(); updateAdvancedParameters();
}, [data.node.template]); }, [data.node.template]);
console.log("DATA", data.node.template); console.log("DATA", data.node.template);
const Icon = nodeIcons[types[data.type]]; const Icon = nodeIcons[types[data.type]];
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
@ -203,88 +199,113 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
)} )}
> >
<div className="flex flex-col h-full gap-5 h-fit "> <div className="flex flex-col h-full gap-5 h-fit ">
<Table>
<TableCaption>
A list of your recent invoices.
</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">
Invoice
</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead className="text-right">
Amount
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{invoices.map((invoice) => (
<TableRow key={invoice.invoice}>
<TableCell className="font-medium">
{invoice.invoice}
</TableCell>
<TableCell>{invoice.paymentStatus}</TableCell>
<TableCell>{invoice.paymentMethod}</TableCell>
<TableCell className="text-right">
{invoice.totalAmount}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<table className="min-w-full divide-y divide-gray-300">
<Table> <thead className="bg-gray-50">
<TableCaption>A list of your recent invoices.</TableCaption> <tr>
<TableHeader> <th
<TableRow> scope="col"
<TableHead className="w-[100px]">Invoice</TableHead> className="py-1 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
<TableHead>Status</TableHead> >
<TableHead>Method</TableHead> Param
<TableHead className="text-right">Amount</TableHead> </th>
</TableRow> <th
</TableHeader> scope="col"
<TableBody> className="px-3 py-1 text-left text-sm font-semibold text-gray-900"
{invoices.map((invoice) => ( >
<TableRow key={invoice.invoice}> Value
<TableCell className="font-medium">{invoice.invoice}</TableCell> </th>
<TableCell>{invoice.paymentStatus}</TableCell> <th
<TableCell>{invoice.paymentMethod}</TableCell> scope="col"
<TableCell className="text-right">{invoice.totalAmount}</TableCell> className="px-3 py-1 text-left text-sm font-semibold text-gray-900"
</TableRow> >
))} Show
</TableBody> </th>
</Table> </tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<table className="min-w-full divide-y divide-gray-300"> {Object.keys(data.node.template)
<thead className="bg-gray-50"> .filter((t) => t.charAt(0) !== "_")
<tr> .map((n, i) => (
<th scope="col" className="py-1 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"> <tr key={i}>
Param <td className="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
</th> {data.node.template[n].name
<th scope="col" className="px-3 py-1 text-left text-sm font-semibold text-gray-900"> ? data.node.template[n].name
Value : data.node.template[n].display_name}
</th> </td>
<th scope="col" className="px-3 py-1 text-left text-sm font-semibold text-gray-900"> <td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
Show {data.node.template[n].value
</th> ? data.node.template[n].value
</tr> : "-"}
</thead> </td>
<tbody className="divide-y divide-gray-200 bg-white"> <td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
<Switch
{ checked={enabled}
Object.keys(data.node.template).filter( onChange={setEnabled}
(t) => className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
t.charAt(0) !== "_" >
).map((n, i) => ( <span className="sr-only">
<tr key={i}> Use setting
<td className="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6"> </span>
{data.node.template[n].name ? data.node.template[n].name : data.node.template[n].display_name } <span
</td> aria-hidden="true"
<td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500">{data.node.template[n].value ? data.node.template[n].value : '-'}</td> className="pointer-events-none absolute h-full w-full rounded-md bg-white"
<td className="whitespace-nowrap px-3 py-1 text-sm text-gray-500"> />
<Switch <span
checked={enabled} aria-hidden="true"
onChange={setEnabled} className={classNames(
className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" enabled
> ? "bg-indigo-600"
<span className="sr-only">Use setting</span> : "bg-gray-200",
<span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-white" /> "pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
<span )}
aria-hidden="true" />
className={classNames( <span
enabled ? 'bg-indigo-600' : 'bg-gray-200', aria-hidden="true"
'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out' className={classNames(
)} enabled
/> ? "translate-x-5"
<span : "translate-x-0",
aria-hidden="true" "pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out"
className={classNames( )}
enabled ? 'translate-x-5' : 'translate-x-0', />
'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out' </Switch>
)} </td>
/> </tr>
</Switch> ))}
</tbody>
</td> </table>
</tr>
))}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>