From 8317fecc2401281fca4b3cfc478a489f2b7c738e Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 17 Jul 2023 15:27:15 -0300 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=8E=A8=20style(index.css):=20add=20?= =?UTF-8?q?animation=20for=20accordion=20content=20to=20slide=20down=20and?= =?UTF-8?q?=20slide=20up=20for=20better=20user=20experience=20=F0=9F=94=A7?= =?UTF-8?q?=20chore(tailwind.config.js):=20remove=20unused=20keyframes=20a?= =?UTF-8?q?nd=20animations=20related=20to=20accordion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/index.css | 28 ++++++++++++++++++++++++++++ src/frontend/tailwind.config.js | 30 +----------------------------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index ffba3b082..b76e2a724 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -152,6 +152,34 @@ The cursor: default; property value restores the browser's default cursor style cursor: default; } +.AccordionContent { + overflow: hidden; +} +.AccordionContent[data-state='open'] { + animation: slideDown 300ms ease-out; +} +.AccordionContent[data-state='closed'] { + animation: slideUp 300ms ease-out; +} + +@keyframes slideDown { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes slideUp { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} + @layer components { .round-buttons-position { diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index 429b9b26a..b1ac8f14d 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -28,20 +28,6 @@ module.exports = { }, }, extend: { - keyframes: { - "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, colors: { connection: "var(--connection)", "almost-dark-gray": "var(--almost-dark-gray)", @@ -128,21 +114,7 @@ module.exports = { }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], - }, - keyframes: { - slideDown: { - from: { height: 0 }, - to: { height: 100 }, - }, - slideUp: { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "slideDown 300ms ease-out", - "accordion-up": "slideUp 300ms ease-in", - }, + } }, }, From 69380447b00aeb60f5e6b075b119173fb5d8b906 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 17 Jul 2023 15:46:25 -0300 Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=8E=A8=20style(AccordionComponent):?= =?UTF-8?q?=20change=20border=20style=20of=20AccordionItem=20to=20improve?= =?UTF-8?q?=20visual=20consistency?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/components/AccordionComponent/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 3b0ddd596..68f31aed6 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -34,7 +34,7 @@ export default function AccordionComponent({ return ( <> - + { handleClick(); From 0db3ed20d83239e1d4cfdce2b5b6e57b79496af1 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 17 Jul 2023 19:30:39 -0300 Subject: [PATCH 03/10] =?UTF-8?q?=F0=9F=90=9B=20fix(AccordionComponent):?= =?UTF-8?q?=20change=20trigger=20prop=20type=20to=20accept=20string=20or?= =?UTF-8?q?=20ReactElement=20to=20improve=20flexibility=20=E2=9C=A8=20feat?= =?UTF-8?q?(AccordionComponent):=20add=20keyValue=20prop=20to=20uniquely?= =?UTF-8?q?=20identify=20each=20accordion=20item=20for=20better=20performa?= =?UTF-8?q?nce=20and=20stability=20=F0=9F=90=9B=20fix(ApiModal):=20add=20k?= =?UTF-8?q?eyValue=20prop=20to=20AccordionComponent=20to=20uniquely=20iden?= =?UTF-8?q?tify=20each=20accordion=20item=20for=20better=20performance=20a?= =?UTF-8?q?nd=20stability=20=F0=9F=90=9B=20fix(formModal):=20remove=20unus?= =?UTF-8?q?ed=20imports=20and=20replace=20Accordion,=20AccordionContent,?= =?UTF-8?q?=20AccordionItem,=20and=20AccordionTrigger=20with=20AccordionCo?= =?UTF-8?q?mponent=20=E2=9C=A8=20feat(formModal):=20add=20keyValue=20prop?= =?UTF-8?q?=20to=20AccordionComponent=20to=20uniquely=20identify=20each=20?= =?UTF-8?q?accordion=20item=20for=20better=20performance=20and=20stability?= =?UTF-8?q?=20=F0=9F=90=9B=20fix(types):=20change=20trigger=20prop=20type?= =?UTF-8?q?=20in=20AccordionComponentType=20to=20accept=20string=20or=20Re?= =?UTF-8?q?actElement=20to=20improve=20flexibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/package-lock.json | 39 ++-- .../components/AccordionComponent/index.tsx | 7 +- src/frontend/src/modals/ApiModal/index.tsx | 1 + src/frontend/src/modals/formModal/index.tsx | 192 +++++++++++------- src/frontend/src/types/components/index.ts | 3 +- 5 files changed, 150 insertions(+), 92 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 6ac6b625c..b0302450f 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -147,9 +147,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.22.6", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz", - "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==", + "version": "7.22.9", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz", + "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==", "engines": { "node": ">=6.9.0" } @@ -194,6 +194,14 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/core/node_modules/@nicolo-ribaudo/semver-v6": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz", + "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==", + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/@babel/generator": { "version": "7.22.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz", @@ -226,6 +234,14 @@ "@babel/core": "^7.0.0" } }, + "node_modules/@babel/helper-compilation-targets/node_modules/@nicolo-ribaudo/semver-v6": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz", + "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==", + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/@babel/helper-environment-visitor": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", @@ -1175,9 +1191,9 @@ } }, "node_modules/@mui/private-theming/node_modules/@babel/runtime": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz", - "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz", + "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==", "dependencies": { "regenerator-runtime": "^0.13.11" }, @@ -1338,14 +1354,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, - "node_modules/@nicolo-ribaudo/semver-v6": { - "version": "6.3.3", - "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz", - "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==", - "bin": { - "semver": "bin/semver.js" - } - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3542,7 +3550,7 @@ "version": "16.18.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", - "devOptional": true + "dev": true }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -5588,6 +5596,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 68f31aed6..03d8c0a1d 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -11,6 +11,7 @@ export default function AccordionComponent({ trigger, children, open = [], + keyValue, }: AccordionComponentType) { const [value, setValue] = useState( open.length === 0 ? "" : getOpenAccordion() @@ -28,13 +29,13 @@ export default function AccordionComponent({ } function handleClick() { - value == "" ? setValue(trigger) : setValue(""); + value == "" ? setValue(keyValue) : setValue(""); } return ( <> - - + + { handleClick(); diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index f3f84a9ac..19b012f13 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -340,6 +340,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { {tweaksList.current.includes(t["data"]["id"]) && (
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 12f7683b3..7bcb244de 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -10,13 +10,9 @@ import ChatInput from "./chatInput"; import ChatMessage from "./chatMessage"; import _ from "lodash"; +import AccordionComponent from "../../components/AccordionComponent"; import ToggleShadComponent from "../../components/toggleShadComponent"; -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "../../components/ui/accordion"; +import { AccordionItem } from "../../components/ui/accordion"; import { Badge } from "../../components/ui/badge"; import { Dialog, @@ -388,6 +384,7 @@ export default function FormModal({ setChatValue(""); } } + return ( @@ -422,80 +419,129 @@ export default function FormModal({
- - {Object.keys(tabsState[id.current].formKeysData.input_keys).map( - (i, k) => ( -
- - -
- - {i} - -
{ - event.stopPropagation(); - }} - > - - handleOnCheckedChange(value, i) - } - size="small" - disabled={tabsState[ - id.current - ].formKeysData.handle_keys.some((t) => t === i)} - /> -
-
- - -
- {tabsState[ - id.current - ].formKeysData.handle_keys.some((t) => t === i) && ( -
- Source: Component -
- )} - + size="small" + disabled={tabsState[ + id.current + ].formKeysData.handle_keys.some((t) => t === i)} + />
- - -
- ) - )} - {tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( - -
-
- +
+ } + key={k} + keyValue={i} + > +
+ {tabsState[id.current].formKeysData.handle_keys.some( + (t) => t === i + ) && ( +
+ Source: Component +
+ )} + +
+ +
+ ) + )} + {tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( +
+ + {i} + +
{ + event.stopPropagation(); + }} + > + + handleOnCheckedChange(value, i) + } + size="small" + disabled={tabsState[ + id.current + ].formKeysData.handle_keys.some((t) => t === i)} + /> +
- Used as memory key + } + key={k} + keyValue={i} + > +
+ {tabsState[id.current].formKeysData.handle_keys.some( + (t) => t === i + ) && ( +
+ Source: Component +
+ )} +
- - ))} - + + + ))}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 4ce9e526f..d4f0cb0d7 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -130,7 +130,8 @@ export type RadialProgressType = { export type AccordionComponentType = { children?: ReactElement; open?: string[]; - trigger?: string; + trigger?: string | ReactElement; + keyValue?: string; }; export type Side = "top" | "right" | "bottom" | "left"; From d0f477e6053e56455863ea1805d4f44391074f87 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 17 Jul 2023 19:31:50 -0300 Subject: [PATCH 04/10] formatting code --- .../components/AccordionComponent/index.tsx | 7 +++++- src/frontend/src/components/ui/accordion.tsx | 2 +- .../modals/formModal/chatMessage/index.tsx | 2 +- src/frontend/src/modals/formModal/index.tsx | 9 ++------ .../src/modals/genericModal/index.tsx | 22 +++++++++++++------ src/frontend/tailwind.config.js | 2 +- 6 files changed, 26 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 03d8c0a1d..b7be94f0a 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -34,7 +34,12 @@ export default function AccordionComponent({ return ( <> - + { diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx index 4b5a12384..4ee52db10 100644 --- a/src/frontend/src/components/ui/accordion.tsx +++ b/src/frontend/src/components/ui/accordion.tsx @@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
- {Object.keys(tabsState[id.current].formKeysData.input_keys).map( (i, k) => ( -
( -
+
@@ -523,9 +520,7 @@ export default function FormModal({
)}