From df19f63b51923c7e9f5ad6802f63f97634ea4bf1 Mon Sep 17 00:00:00 2001 From: Mike Fortman Date: Thu, 3 Apr 2025 10:49:13 -0500 Subject: [PATCH 1/6] extrasidebar cleanup --- .../SidebarCategoryComponent/index.tsx | 62 ---- .../extraSidebarComponent/index.tsx | 343 ------------------ .../sideBarDraggableComponent/index.tsx | 164 --------- .../sideBarNoteComponent/index.tsx | 34 -- .../extraSidebarComponent/utils.tsx | 26 -- .../sidebarFilterComponent/index.tsx | 0 .../components/sidebarHeader/index.tsx | 2 +- .../helpers}/sensitive-sort.tsx | 0 .../components/flowSidebarComponent/index.tsx | 2 +- 9 files changed, 2 insertions(+), 631 deletions(-) delete mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx delete mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx delete mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx delete mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx delete mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx rename src/frontend/src/pages/FlowPage/components/{extraSidebarComponent => flowSidebarComponent/components}/sidebarFilterComponent/index.tsx (100%) rename src/frontend/src/pages/FlowPage/components/{extraSidebarComponent/utils => flowSidebarComponent/helpers}/sensitive-sort.tsx (100%) diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx deleted file mode 100644 index dc7b47c2c742..000000000000 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import ShadTooltip from "@/components/common/shadTooltipComponent"; -import { nodeColors, nodeIconsLucide, nodeNames } from "@/utils/styleUtils"; -import { removeCountFromString } from "@/utils/utils"; -import DisclosureComponent from "../../DisclosureComponent"; -import SidebarDraggableComponent from "../sideBarDraggableComponent"; -import sensitiveSort from "../utils/sensitive-sort"; - -export function SidebarCategoryComponent({ - search, - getFilterEdge, - category, - name, - onDragStart, -}) { - return ( - -
- {Object.keys(category) - .sort((a, b) => - sensitiveSort(category[a].display_name, category[b].display_name), - ) - .map((SBItemName: string, idx) => ( - - - onDragStart(event, { - //split type to remove type in nodes saved with same name removing it's - type: removeCountFromString(SBItemName), - node: category[SBItemName], - }) - } - color={nodeColors[name]} - itemName={SBItemName} - //convert error to boolean - error={!!category[SBItemName].error} - display_name={category[SBItemName].display_name} - official={ - category[SBItemName].official === false ? false : true - } - /> - - ))} -
- - ); -} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx deleted file mode 100644 index b28fd14357e3..000000000000 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ /dev/null @@ -1,343 +0,0 @@ -import { ENABLE_INTEGRATIONS } from "@/customization/feature-flags"; -import { useStoreStore } from "@/stores/storeStore"; -import { cloneDeep } from "lodash"; -import { useEffect, useState } from "react"; -import IconComponent from "../../../../components/common/genericIconComponent"; -import { Input } from "../../../../components/ui/input"; -import { Separator } from "../../../../components/ui/separator"; -import { - BUNDLES_SIDEBAR_FOLDER_NAMES, - PRIORITY_SIDEBAR_ORDER, -} from "../../../../constants/constants"; -import useAlertStore from "../../../../stores/alertStore"; -import useFlowStore from "../../../../stores/flowStore"; -import { useTypesStore } from "../../../../stores/typesStore"; -import { APIClassType, APIObjectType } from "../../../../types/api"; -import { nodeIconsLucide } from "../../../../utils/styleUtils"; -import ParentDisclosureComponent from "../ParentDisclosureComponent"; -import { SidebarCategoryComponent } from "./SidebarCategoryComponent"; - -import { useUtilityStore } from "@/stores/utilityStore"; -import { SidebarFilterComponent } from "./sidebarFilterComponent"; -import { sortKeys } from "./utils"; - -export default function ExtraSidebar(): JSX.Element { - const data = useTypesStore((state) => state.data); - const templates = useTypesStore((state) => state.templates); - const getFilterEdge = useFlowStore((state) => state.getFilterEdge); - const setFilterEdge = useFlowStore((state) => state.setFilterEdge); - const hasStore = useStoreStore((state) => state.hasStore); - const filterType = useFlowStore((state) => state.filterType); - - const featureFlags = useUtilityStore((state) => state.featureFlags); - - const setErrorData = useAlertStore((state) => state.setErrorData); - const [dataFilter, setFilterData] = useState(data); - const [search, setSearch] = useState(""); - function onDragStart( - event: React.DragEvent, - data: { type: string; node?: APIClassType }, - ): void { - //start drag event - var crt = event.currentTarget.cloneNode(true); - crt.style.position = "absolute"; - crt.style.width = "215px"; - crt.style.top = "-500px"; - crt.style.right = "-500px"; - crt.classList.add("cursor-grabbing"); - document.body.appendChild(crt); - event.dataTransfer.setDragImage(crt, 0, 0); - event.dataTransfer.setData("genericNode", JSON.stringify(data)); - } - function normalizeString(str: string): string { - return str.toLowerCase().replace(/_/g, " ").replace(/\s+/g, ""); - } - - function searchInMetadata(metadata: any, searchTerm: string): boolean { - if (!metadata || typeof metadata !== "object") return false; - - return Object.entries(metadata).some(([key, value]) => { - if (typeof value === "string") { - return ( - normalizeString(key).includes(searchTerm) || - normalizeString(value).includes(searchTerm) - ); - } - if (typeof value === "object") { - return searchInMetadata(value, searchTerm); - } - return false; - }); - } - - function handleSearchInput(e: string) { - if (e === "") { - setFilterData(data); - return; - } - - const searchTerm = normalizeString(e); - - setFilterData((_) => { - let ret: APIObjectType = {}; - Object.keys(data).forEach((d: keyof APIObjectType) => { - ret[d] = {}; - let keys = Object.keys(data[d]).filter((nd) => { - const item = data[d][nd]; - return ( - normalizeString(nd).includes(searchTerm) || - normalizeString(item.display_name).includes(searchTerm) || - normalizeString(d.toString()).includes(searchTerm) || - (item.metadata && searchInMetadata(item.metadata, searchTerm)) - ); - }); - keys.forEach((element) => { - ret[d][element] = data[d][element]; - }); - }); - return ret; - }); - } - - useEffect(() => { - // show components with error on load - let errors: string[] = []; - Object.keys(templates).forEach((component) => { - if (templates[component].error) { - errors.push(component); - } - }); - if (errors.length > 0) - setErrorData({ title: " Components with errors: ", list: errors }); - }, []); - - function handleBlur() { - // check if search is search to reset fitler on click input - if ((!search && search === "") || search === "search") { - setFilterData(data); - setFilterEdge([]); - setSearch(""); - } - } - - useEffect(() => { - if (getFilterEdge.length !== 0) { - setSearch(""); - } - - if (getFilterEdge.length === 0 && search === "") { - setSearch(""); - setFilterData(data); - } - }, [getFilterEdge, data]); - - useEffect(() => { - handleSearchInput(search); - }, [data]); - - useEffect(() => { - if (getFilterEdge?.length > 0) { - setFilterData((_) => { - let dataClone = cloneDeep(data); - let ret = {}; - Object.keys(dataClone).forEach((d: keyof APIObjectType, i) => { - ret[d] = {}; - if (getFilterEdge.some((x) => x.family === d)) { - ret[d] = dataClone[d]; - - const filtered = getFilterEdge - .filter((x) => x.family === d) - .pop() - .type.split(","); - - for (let i = 0; i < filtered.length; i++) { - filtered[i] = filtered[i].trimStart(); - } - - if (filtered.some((x) => x !== "")) { - let keys = Object.keys(dataClone[d]).filter((nd) => - filtered.includes(nd), - ); - Object.keys(dataClone[d]).forEach((element) => { - if (!keys.includes(element)) { - delete ret[d][element]; - } - }); - } - } - }); - setSearch(""); - return ret; - }); - } - }, [getFilterEdge, data]); - - return ( -
-
- handleBlur()} - value={search} - type="text" - name="search" - id="search" - placeholder="Search" - className="nopan nodelete nodrag noflow input-search" - onChange={(event) => { - handleSearchInput(event.target.value); - // Set search input state - setSearch(event.target.value); - }} - readOnly - onClick={() => - document?.getElementById("search")?.removeAttribute("readonly") - } - /> -
{ - if (search) { - setFilterData(data); - setSearch(""); - } - }} - > -
-
- - -
-
-
- Components - {filterType && ( - { - setFilterEdge([]); - setFilterData(data); - }} - /> - )} -
-
- - {Object.keys(dataFilter) - .sort(sortKeys) - .filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x)) - .map((SBSectionName: keyof APIObjectType, index) => - Object.keys(dataFilter[SBSectionName]).length > 0 ? ( - - ) : ( -
- ), - )} - {(ENABLE_INTEGRATIONS || featureFlags?.mvp_components) && ( - - {Object.keys(dataFilter) - .sort(sortKeys) - .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x)) - .map((SBSectionName: keyof APIObjectType, index) => - Object.keys(dataFilter[SBSectionName]).length > 0 ? ( - - ) : ( -
- ), - )} - - )} - - {Object.keys(dataFilter) - .sort(sortKeys) - .filter( - (x) => - !PRIORITY_SIDEBAR_ORDER.includes(x) && - !BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x), - ) - .map((SBSectionName: keyof APIObjectType, index) => - Object.keys(dataFilter[SBSectionName]).length > 0 ? ( - - ) : ( -
- ), - )} - {hasStore && ( - -
- {/* BUG ON THIS ICON */} - - - - Discover More - -
-
-
- -
-
- - )} - -
-
- ); -} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx deleted file mode 100644 index 1e85821bcf72..000000000000 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import useDeleteFlow from "@/hooks/flows/use-delete-flow"; -import { DragEventHandler, forwardRef, useRef, useState } from "react"; -import IconComponent from "../../../../../components/common/genericIconComponent"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, -} from "../../../../../components/ui/select-custom"; -import { useDarkStore } from "../../../../../stores/darkStore"; -import useFlowsManagerStore from "../../../../../stores/flowsManagerStore"; -import { APIClassType } from "../../../../../types/api"; -import { - createFlowComponent, - downloadNode, - getNodeId, -} from "../../../../../utils/reactflowUtils"; -import { removeCountFromString } from "../../../../../utils/utils"; - -export const SidebarDraggableComponent = forwardRef( - ( - { - sectionName, - display_name, - itemName, - error, - color, - onDragStart, - apiClass, - official, - }: { - sectionName: string; - apiClass: APIClassType; - display_name: string; - itemName: string; - error: boolean; - color: string; - onDragStart: DragEventHandler; - official: boolean; - }, - ref, - ) => { - const [open, setOpen] = useState(false); - const { deleteFlow } = useDeleteFlow(); - const flows = useFlowsManagerStore((state) => state.flows); - - const version = useDarkStore((state) => state.version); - const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 }); - const popoverRef = useRef(null); - - const handlePointerDown = (e) => { - if (!open) { - const rect = popoverRef.current?.getBoundingClientRect() ?? { - left: 0, - top: 0, - }; - setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top }); - } - }; - - function handleSelectChange(value: string) { - switch (value) { - case "share": - break; - case "download": - const type = removeCountFromString(itemName); - downloadNode( - createFlowComponent( - { id: getNodeId(type), type, node: apiClass }, - version, - ), - ); - break; - case "delete": - const flowId = flows?.find((f) => f.name === display_name); - if (flowId) deleteFlow({ id: flowId.id }); - break; - } - } - return ( - - ); - }, -); - -export default SidebarDraggableComponent; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx deleted file mode 100644 index 2dc88b74d453..000000000000 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { APIClassType } from "@/types/api"; -import IconComponent from "../../../../../components/common/genericIconComponent"; -export default function NoteDraggableComponent() { - function onDragStart(event: React.DragEvent): void { - const noteNode: APIClassType = { - description: "", - display_name: "", - documentation: "", - template: {}, - }; - event.dataTransfer.setData( - "noteNode", - JSON.stringify({ node: noteNode, type: "note" }), - ); - } - - return ( -
-
- - Add Note - -
-
- ); -} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx deleted file mode 100644 index ee0509cd0aff..000000000000 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants"; - -export function sortKeys(a: string, b: string) { - // Define the order of specific keys - - const indexA = PRIORITY_SIDEBAR_ORDER.indexOf(a.toLowerCase()); - const indexB = PRIORITY_SIDEBAR_ORDER.indexOf(b.toLowerCase()); - - // Check if both keys are in the predefined order - if (indexA !== -1 && indexB !== -1) { - return indexA - indexB; - } - - // If only 'a' is in the predefined order, it should come first - if (indexA !== -1) { - return -1; - } - - // If only 'b' is in the predefined order, it should come first - if (indexB !== -1) { - return 1; - } - - // If neither 'a' nor 'b' are in the predefined order, sort them alphabetically - return a.localeCompare(b); -} diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFilterComponent/index.tsx similarity index 100% rename from src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx rename to src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFilterComponent/index.tsx diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx index 448085d89722..260beb9c692a 100644 --- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader/index.tsx @@ -9,7 +9,7 @@ import ShadTooltip from "@/components/common/shadTooltipComponent"; import { Button } from "@/components/ui/button"; import { SidebarHeader, SidebarTrigger } from "@/components/ui/sidebar"; import { memo } from "react"; -import { SidebarFilterComponent } from "../../../extraSidebarComponent/sidebarFilterComponent"; +import { SidebarFilterComponent } from "../sidebarFilterComponent"; import { SidebarHeaderComponentProps } from "../../types"; import FeatureToggles from "../featureTogglesComponent"; import { SearchInput } from "../searchInput"; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils/sensitive-sort.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/sensitive-sort.tsx similarity index 100% rename from src/frontend/src/pages/FlowPage/components/extraSidebarComponent/utils/sensitive-sort.tsx rename to src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/sensitive-sort.tsx diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx index 55bd719892c3..b3448d345d78 100644 --- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx @@ -22,7 +22,7 @@ import useAlertStore from "../../../../stores/alertStore"; import useFlowStore from "../../../../stores/flowStore"; import { useTypesStore } from "../../../../stores/typesStore"; import { APIClassType } from "../../../../types/api"; -import sensitiveSort from "../extraSidebarComponent/utils/sensitive-sort"; +import sensitiveSort from "./helpers/sensitive-sort"; import isWrappedWithClass from "../PageComponent/utils/is-wrapped-with-class"; import { CategoryGroup } from "./components/categoryGroup"; import NoResultsMessage from "./components/emptySearchComponent"; From bd76ba926ce09ac78addf8a8fa187b273baa49b8 Mon Sep 17 00:00:00 2001 From: Mike Fortman Date: Thu, 3 Apr 2025 11:20:24 -0500 Subject: [PATCH 2/6] shad component cleanup --- src/frontend/package-lock.json | 92 +------ src/frontend/package.json | 4 - .../src/components/ui/border-beams.tsx | 49 ---- .../src/components/ui/collapsible.tsx | 11 - src/frontend/src/components/ui/combobox.tsx | 79 ------ .../src/components/ui/custom-accordion.tsx | 55 ---- src/frontend/src/components/ui/form.tsx | 176 ------------- src/frontend/src/components/ui/menubar.tsx | 236 ------------------ .../src/components/ui/morphing-menu.tsx | 114 --------- src/frontend/src/components/ui/progress.tsx | 27 -- .../src/components/ui/rename-label.tsx | 104 -------- src/frontend/src/components/ui/sheet.tsx | 140 ----------- src/frontend/src/components/ui/slider.tsx | 27 -- src/frontend/src/components/ui/toggle.tsx | 45 ---- 14 files changed, 10 insertions(+), 1149 deletions(-) delete mode 100644 src/frontend/src/components/ui/border-beams.tsx delete mode 100644 src/frontend/src/components/ui/collapsible.tsx delete mode 100644 src/frontend/src/components/ui/combobox.tsx delete mode 100644 src/frontend/src/components/ui/custom-accordion.tsx delete mode 100644 src/frontend/src/components/ui/form.tsx delete mode 100644 src/frontend/src/components/ui/menubar.tsx delete mode 100644 src/frontend/src/components/ui/morphing-menu.tsx delete mode 100644 src/frontend/src/components/ui/progress.tsx delete mode 100644 src/frontend/src/components/ui/rename-label.tsx delete mode 100644 src/frontend/src/components/ui/sheet.tsx delete mode 100644 src/frontend/src/components/ui/slider.tsx delete mode 100644 src/frontend/src/components/ui/toggle.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 0531087f9d5a..330dbbd05782 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -14,22 +14,18 @@ "@million/lint": "^1.0.0-rc.26", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-form": "^0.0.3", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-menubar": "^1.0.4", "@radix-ui/react-popover": "^1.0.7", - "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", - "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.6.0", "@tailwindcss/forms": "^0.5.7", @@ -3037,6 +3033,7 @@ "version": "0.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz", "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.1", @@ -3065,6 +3062,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10" } @@ -3073,6 +3071,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10" }, @@ -3090,6 +3089,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10" }, @@ -3107,6 +3107,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-layout-effect": "1.0.1" @@ -3125,6 +3126,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-primitive": "1.0.3" @@ -3148,6 +3150,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.2" @@ -3171,6 +3174,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.1" @@ -3189,6 +3193,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10" }, @@ -3288,37 +3293,6 @@ } } }, - "node_modules/@radix-ui/react-menubar": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.6.tgz", - "integrity": "sha512-FHq7+3DlXwh/7FOM4i0G4bC4vPjiq89VEEvNF4VMLchGnaUuUbE5uKXMUCjdKaOghEEMeiKa5XCa2Pk4kteWmg==", - "dependencies": { - "@radix-ui/primitive": "1.1.1", - "@radix-ui/react-collection": "1.1.2", - "@radix-ui/react-compose-refs": "1.1.1", - "@radix-ui/react-context": "1.1.1", - "@radix-ui/react-direction": "1.1.0", - "@radix-ui/react-id": "1.1.0", - "@radix-ui/react-menu": "2.1.6", - "@radix-ui/react-primitive": "2.0.2", - "@radix-ui/react-roving-focus": "1.1.2", - "@radix-ui/react-use-controllable-state": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-popover": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz", @@ -3454,29 +3428,6 @@ } } }, - "node_modules/@radix-ui/react-progress": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.2.tgz", - "integrity": "sha512-u1IgJFQ4zNAUTjGdDL5dcl/U8ntOR6jsnhxKb5RKp5Ozwl88xKR9EqRZOe/Mk8tnx0x5tNUe2F+MzsyjqMg0MA==", - "dependencies": { - "@radix-ui/react-context": "1.1.1", - "@radix-ui/react-primitive": "2.0.2" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-roving-focus": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz", @@ -3575,6 +3526,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.3.tgz", "integrity": "sha512-nNrLAWLjGESnhqBqcCNW4w2nn7LxudyMzeB6VgdyAnFLC6kfQgnAjSL2v6UkQTnDctJBlxrmxfplWS4iYjdUTw==", + "license": "MIT", "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", @@ -3677,30 +3629,6 @@ } } }, - "node_modules/@radix-ui/react-toggle": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz", - "integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==", - "dependencies": { - "@radix-ui/primitive": "1.1.1", - "@radix-ui/react-primitive": "2.0.2", - "@radix-ui/react-use-controllable-state": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-tooltip": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index d416ce21eaa7..e1ed06bcf855 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -9,22 +9,18 @@ "@million/lint": "^1.0.0-rc.26", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-form": "^0.0.3", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-menubar": "^1.0.4", "@radix-ui/react-popover": "^1.0.7", - "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", - "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.6.0", "@tailwindcss/forms": "^0.5.7", diff --git a/src/frontend/src/components/ui/border-beams.tsx b/src/frontend/src/components/ui/border-beams.tsx deleted file mode 100644 index b14f3abf5bda..000000000000 --- a/src/frontend/src/components/ui/border-beams.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { cn } from "@/utils/utils"; - -interface BorderBeamProps { - className?: string; - size?: number; - duration?: number; - borderWidth?: number; - anchor?: number; - colorFrom?: string; - colorTo?: string; - delay?: number; -} - -export const BorderBeam = ({ - className, - size = 200, - duration = 15, - anchor = 90, - borderWidth = 1.5, - colorFrom = "#ffaa40", - colorTo = "#9c40ff", - delay = 0, -}: BorderBeamProps) => { - return ( -
- ); -}; diff --git a/src/frontend/src/components/ui/collapsible.tsx b/src/frontend/src/components/ui/collapsible.tsx deleted file mode 100644 index 1fe76f5d1695..000000000000 --- a/src/frontend/src/components/ui/collapsible.tsx +++ /dev/null @@ -1,11 +0,0 @@ -"use client"; - -import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"; - -const Collapsible = CollapsiblePrimitive.Root; - -const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; - -const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; - -export { Collapsible, CollapsibleContent, CollapsibleTrigger }; diff --git a/src/frontend/src/components/ui/combobox.tsx b/src/frontend/src/components/ui/combobox.tsx deleted file mode 100644 index 3f35ce6a7652..000000000000 --- a/src/frontend/src/components/ui/combobox.tsx +++ /dev/null @@ -1,79 +0,0 @@ -"use client"; - -import { Check, ChevronsUpDown } from "lucide-react"; -import * as React from "react"; -import { cn } from "../../utils/utils"; -import { Button } from "./button"; -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, -} from "./command"; -import { Popover, PopoverContent, PopoverTrigger } from "./popover"; - -export function Combobox({ - items, - onChange, -}: { - items: { value: string; label: string }[]; - onChange: (value: string[]) => void; -}) { - const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState([]); - - React.useEffect(() => { - onChange(value); - }, [value]); - - return ( - - - - - - - - No filters found. - - {items.map((framework) => ( - { - setValue((old) => { - if (old.includes(currentValue)) { - return old.filter((item) => item !== currentValue); - } - return [...old, currentValue]; - }); - }} - > - - {framework.label} - - ))} - - - - - ); -} diff --git a/src/frontend/src/components/ui/custom-accordion.tsx b/src/frontend/src/components/ui/custom-accordion.tsx deleted file mode 100644 index 238e0ddabec8..000000000000 --- a/src/frontend/src/components/ui/custom-accordion.tsx +++ /dev/null @@ -1,55 +0,0 @@ -"use client"; - -import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import { ChevronDownIcon } from "@radix-ui/react-icons"; -import * as React from "react"; -import { cn } from "../../utils/utils"; - -const Accordion = AccordionPrimitive.Root; - -const AccordionItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AccordionItem.displayName = "AccordionItem"; - -const AccordionTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - -
svg]:rotate-180", - className, - )} - > - {children} - -
- - -)); -AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; - -const AccordionContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - -
{children}
- -)); -AccordionContent.displayName = AccordionPrimitive.Content.displayName; - -export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }; diff --git a/src/frontend/src/components/ui/form.tsx b/src/frontend/src/components/ui/form.tsx deleted file mode 100644 index 69789b6f32dc..000000000000 --- a/src/frontend/src/components/ui/form.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import * as LabelPrimitive from "@radix-ui/react-label"; -import { Slot } from "@radix-ui/react-slot"; -import * as React from "react"; -import { - Controller, - ControllerProps, - FieldPath, - FieldValues, - FormProvider, - useFormContext, -} from "react-hook-form"; -import { cn } from "../../utils/utils"; -import { Label } from "./label"; - -const Form = FormProvider; - -type FormFieldContextValue< - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath, -> = { - name: TName; -}; - -const FormFieldContext = React.createContext( - {} as FormFieldContextValue, -); - -const FormField = < - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath, ->({ - ...props -}: ControllerProps) => { - return ( - - - - ); -}; - -const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext); - const itemContext = React.useContext(FormItemContext); - const { getFieldState, formState } = useFormContext(); - - const fieldState = getFieldState(fieldContext.name, formState); - - if (!fieldContext) { - throw new Error("useFormField should be used within "); - } - - const { id } = itemContext; - - return { - id, - name: fieldContext.name, - formItemId: `${id}-form-item`, - formDescriptionId: `${id}-form-item-description`, - formMessageId: `${id}-form-item-message`, - ...fieldState, - }; -}; - -type FormItemContextValue = { - id: string; -}; - -const FormItemContext = React.createContext( - {} as FormItemContextValue, -); - -const FormItem = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { - const id = React.useId(); - - return ( - -
- - ); -}); -FormItem.displayName = "FormItem"; - -const FormLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField(); - - return ( -