From 3cc8c8e6b594cac066479fdd1576b8a7dde28ad0 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 7 Jun 2023 18:59:11 -0300 Subject: [PATCH] changing code, export, python modal to shadcn ui --- src/frontend/package-lock.json | 31 +++ src/frontend/package.json | 1 + .../components/codeAreaComponent/index.tsx | 2 +- .../src/components/intComponent/index.tsx | 2 - src/frontend/src/components/ui/checkbox.tsx | 30 +++ src/frontend/src/components/ui/input.tsx | 25 ++ src/frontend/src/index.css | 2 +- src/frontend/src/modals/ApiModal/index.tsx | 122 ++++------ .../src/modals/codeAreaModal/index.tsx | 215 +++++++---------- src/frontend/src/modals/exportModal/index.tsx | 226 +++++++----------- 10 files changed, 315 insertions(+), 341 deletions(-) create mode 100644 src/frontend/src/components/ui/checkbox.tsx create mode 100644 src/frontend/src/components/ui/input.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 3608ccca3..73b5e359e 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -13,6 +13,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", @@ -1295,6 +1296,36 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz", + "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index 2b330e2e7..c15cb7d2e 100644 --- a/src/frontend/package.json +++ b/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", diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 83f1afccc..b9a32eca6 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/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" : "") } diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx index 80f627fcd..8794cae53 100644 --- a/src/frontend/src/components/intComponent/index.tsx +++ b/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) { diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx new file mode 100644 index 000000000..c8b0eb960 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx new file mode 100644 index 000000000..20c529a79 --- /dev/null +++ b/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 {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 8809ecc3a..962e3c025 100644 --- a/src/frontend/src/index.css +++ b/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; -} \ No newline at end of file +} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index daeafe6bb..47f0c854d 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/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(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 ( - - - -
- -
-
- - -
- -
-
-
-
-
-
- - Code - -
-
-
+ + + + + + + + + Code + + + + Export your flow to use it with this code. + + + + +
{tabs.map((tab, index) => ( - ))}
-
-
- - Export your flow to use it with this code. - +
+
+
+
-
-
- - -
-
-
- + + + ); } diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 2a14fabe6..c5d9573cb 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -1,4 +1,3 @@ -import { Dialog, Transition } from "@headlessui/react"; import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline"; import { Fragment, useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; @@ -12,6 +11,17 @@ import { darkContext } from "../../contexts/darkContext"; import { checkCode } from "../../controllers/API"; import { alertContext } from "../../contexts/alertContext"; import { TabsContext } from "../../contexts/tabsContext"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../../components/ui/dialog"; +import { Button } from "../../components/ui/button"; + export default function CodeAreaModal({ value, setValue, @@ -34,70 +44,31 @@ export default function CodeAreaModal({ } } return ( - - - -
- -
-
- - -
- -
-
-
-
-
-
- - Edit Code - -
-
-
-
-
- + + + + + + + Edit Code + + + + Make configurations changes to your nodes. Click save when you're done. + + + + + +
+ { setCode(value); }} - className="h-full w-full rounded-lg" + className="w-full rounded-lg h-[300px] custom-scroll" /> -
+
-
-
- -
-
- - -
-
-
- + + + + + + + + + ); } diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index 8aff12586..7628fb327 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/src/frontend/src/modals/exportModal/index.tsx @@ -1,4 +1,3 @@ -import { Dialog, Transition } from "@headlessui/react"; import { XMarkIcon, ArrowDownTrayIcon, @@ -10,6 +9,20 @@ import { alertContext } from "../../contexts/alertContext"; import { PopUpContext } from "../../contexts/popUpContext"; import { TabsContext } from "../../contexts/tabsContext"; import { removeApiKeys } from "../../utils"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../../components/ui/dialog"; +import { Button } from "../../components/ui/button"; +import { Label } from "@radix-ui/react-label"; +import { Checkbox } from "../../components/ui/checkbox"; +import { Textarea } from "../../components/ui/textarea"; +import { Input } from "../../components/ui/input"; export default function ExportModal() { const [open, setOpen] = useState(true); @@ -28,105 +41,55 @@ export default function ExportModal() { const [checked, setChecked] = useState(true); const [name, setName] = useState(flows[tabIndex].name); return ( - - - -
- -
-
- - -
- -
-
-
-
-
-
- - Export - -
-
-
-
- - { - if (event.target.value != "") { - let newFlow = flows[tabIndex]; - newFlow.name = event.target.value; - setName(event.target.value); - updateFlow(newFlow); - } else { - setName(event.target.value); - } - }} - type="text" - name="name" - value={name ?? null} - placeholder="File name" - id="name" - className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100" - /> -
-
- - -
+ className="max-h-[100px] mt-2" + rows={3} /> -
- -
-
- -
-
-
- - -
-
-
- + + type="submit">Download Flow + + + + + + + + ); }