changing code, export, python modal to shadcn ui

src/frontend/package.json

@@ -8,6 +8,7 @@
  "@headlessui/react": "^1.7.10",
  "@heroicons/react": "^2.0.15",
  "@mui/material": "^5.11.9",
+ "@radix-ui/react-checkbox": "^1.0.4",
  "@radix-ui/react-dialog": "^1.0.4",
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-slot": "^1.0.2",

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -39,7 +39,7 @@ export default function CodeAreaComponent({
  );
  }}
  className={
- editNode ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
+ editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
  "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
  (disabled ? " bg-gray-200" : "")
  }

src/frontend/src/components/intComponent/index.tsx

@@ -12,8 +12,6 @@ export default function IntComponent({
 }: FloatComponentType) {
  const [myValue, setMyValue] = useState(value ?? "");
  const { setDisableCopyPaste } = useContext(TabsContext);
-
- console.log(editNode);
 
  useEffect(() => {
  if (disabled) {

src/frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "../../utils"
+
+
+const Checkbox = React.forwardRef<
+ React.ElementRef<typeof CheckboxPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+ <CheckboxPrimitive.Root
+ ref={ref}
+ className={cn(
+ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+ className
+ )}
+ {...props}
+ >
+ <CheckboxPrimitive.Indicator
+ className={cn("flex items-center justify-center text-current")}
+ >
+ <Check className="h-4 w-4" />
+ </CheckboxPrimitive.Indicator>
+ </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/frontend/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cn } from "../../utils"
+
+
+export interface InputProps
+ extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+ ({ className, type, ...props }, ref) => {
+ return (
+ <input
+ type={type}
+ className={cn(
+ "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ className
+ )}
+ ref={ref}
+ {...props}
+ />
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }

src/frontend/src/index.css

@@ -98,4 +98,4 @@ 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;
-}
+}

src/frontend/src/modals/ApiModal/index.tsx

@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
 import {
  XMarkIcon,
@@ -15,13 +14,22 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import { darkContext } from "../../contexts/darkContext";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
 
 export default function ApiModal({ flowName }) {
  const [open, setOpen] = useState(true);
  const { dark } = useContext(darkContext);
  const { closePopUp } = useContext(PopUpContext);
  const [activeTab, setActiveTab] = useState(0);
- const ref = useRef();
  const [isCopied, setIsCopied] = useState<Boolean>(false);
 
  const copyToClipboard = () => {
@@ -40,9 +48,7 @@ export default function ApiModal({ flowName }) {
  function setModalOpen(x: boolean) {
  setOpen(x);
  if (x === false) {
- setTimeout(() => {
  closePopUp();
- }, 300);
  }
  }
 
@@ -82,71 +88,34 @@ flow("Hey, have you heard of LangFlow?")`;
  },
  ];
  return (
- <Transition.Root show={open} appear={true} as={Fragment}>
- <Dialog
- as="div"
- className="relative z-10"
- onClose={setModalOpen}
- initialFocus={ref}
- >
- <Transition.Child
- as={Fragment}
- enter="ease-out duration-300"
- enterFrom="opacity-0"
- enterTo="opacity-100"
- leave="ease-in duration-200"
- leaveFrom="opacity-100"
- leaveTo="opacity-0"
- >
- <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
- </Transition.Child>
-
- <div className="fixed inset-0 z-10 overflow-y-auto">
- <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
- <Transition.Child
- as={Fragment}
- enter="ease-out duration-300"
- enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
- enterTo="opacity-100 translate-y-0 sm:scale-100"
- leave="ease-in duration-200"
- leaveFrom="opacity-100 translate-y-0 sm:scale-100"
- leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
- >
- <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
- <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
- <button
- type="button"
- className="rounded-md text-gray-400 hover:text-gray-500"
- onClick={() => {
- setModalOpen(false);
- }}
- >
- <span className="sr-only">Close</span>
- <XMarkIcon className="h-6 w-6" aria-hidden="true" />
- </button>
- </div>
- <div className="h-full w-full flex flex-col justify-center items-center">
- <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
- <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
- <CodeBracketSquareIcon
- className="h-6 w-6 text-blue-600"
- aria-hidden="true"
- />
- </div>
- <div className="mt-4 text-center sm:ml-4 sm:text-left">
- <Dialog.Title
- as="h3"
- className="text-lg font-medium dark:text-white leading-10 text-gray-900"
- >
- Code
- </Dialog.Title>
- </div>
- </div>
- <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+
+
+ <Dialog open={true} onOpenChange={setModalOpen}>
+ <DialogTrigger>
+ </DialogTrigger>
+ <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
+ <DialogHeader>
+ <DialogTitle className="flex items-center">
+ <span className="pr-2">
+ Code
+ </span>
+ <CodeBracketSquareIcon
+ className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+ aria-hidden="true"
+ />
+
+ </DialogTitle>
+ <DialogDescription>
+ Export your flow to use it with this code.
+
+ </DialogDescription>
+ </DialogHeader>
+
+
  <div className="flex flex-col h-full w-full ">
  <div className="flex px-5 z-10">
  {tabs.map((tab, index) => (
- <button
+ <button key={index}
  onClick={() => {
  setActiveTab(index);
  }}
@@ -162,11 +131,9 @@ flow("Hey, have you heard of LangFlow?")`;
  </button>
  ))}
  </div>
- <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
- <div className="w-full flex items-center justify-between mb-2">
- <span className="text-sm text-gray-500 dark:text-gray-300">
- Export your flow to use it with this code.
- </span>
+ <div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+ <div className="items-center mb-2">
+ <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}
@@ -178,9 +145,11 @@ flow("Hey, have you heard of LangFlow?")`;
  )}
  {isCopied ? "Copied!" : "Copy code"}
  </button>
+ </div>
+
  </div>
  <SyntaxHighlighter
- className="h-[370px]"
+ className="h-[370px] w-full"
  language={tabs[activeTab].mode}
  style={oneDark}
  customStyle={{ margin: 0 }}
@@ -189,13 +158,8 @@ flow("Hey, have you heard of LangFlow?")`;
  </SyntaxHighlighter>
  </div>
  </div>
- </div>
- </div>
- </Dialog.Panel>
- </Transition.Child>
- </div>
- </div>
- </Dialog>
- </Transition.Root>
+ </DialogContent>
+ </Dialog>
+
  );
 }