diff --git a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx index 96a4f3ba08..dd09e33c84 100644 --- a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx +++ b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx @@ -1,11 +1,16 @@ -import { Transition } from '@headlessui/react' import { useParams } from 'common' import { map as lodashMap, uniqBy } from 'lodash' -import { ChevronDown, HelpCircle, Terminal } from 'lucide-react' +import { HelpCircle, Terminal } from 'lucide-react' import Link from 'next/link' import { useRouter } from 'next/router' -import { useState } from 'react' -import { Button, SidePanel } from 'ui' +import { + Accordion_Shadcn_, + AccordionContent_Shadcn_, + AccordionItem_Shadcn_, + AccordionTrigger_Shadcn_, + Button, + SidePanel, +} from 'ui' import ProductEmptyState from '@/components/to-be-cleaned/ProductEmptyState' import InformationBox from '@/components/ui/InformationBox' @@ -145,40 +150,31 @@ export interface FunctionProps { } const Function = ({ id, completeStatement, name, onClick }: FunctionProps) => { - const [visible, setVisible] = useState(false) return (
onClick(id)}> -
-
-
- + + +
+
+
+ +
+

{name}

+
+ e.stopPropagation()} + className="py-0 text-xs font-normal text-foreground-light hover:no-underline" + > + View definition +
-

{name}

-
- -
- -
- -
- + e.stopPropagation()}> +
+ +
+ + +
) } diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx index 1036fd2004..ae5e9f25e7 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx @@ -1,5 +1,5 @@ -import { Transition } from '@headlessui/react' import { PermissionAction } from '@supabase/shared-types/out/constants' +import { AnimatePresence, motion } from 'framer-motion' import { get, noop, sum, uniqBy } from 'lodash' import { ChevronsDown, ChevronsUp, Copy, Eye, FolderPlus, Upload } from 'lucide-react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -37,35 +37,36 @@ import { useStorageExplorerStateSnapshot } from '@/state/storage-explorer' const DragOverOverlay = ({ isOpen, onDragLeave, onDrop, folderIsEmpty }: any) => { return ( - -
- {!folderIsEmpty && ( + + {isOpen && ( +
- -

- Drop your files to upload to this folder -

+ {!folderIsEmpty && ( +
+ +

+ Drop your files to upload to this folder +

+
+ )}
- )} -
- + + )} + ) } diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx index 951c022426..533a185786 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx @@ -1,6 +1,4 @@ -import { Transition } from '@headlessui/react' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { isEmpty } from 'lodash' import { AlertCircle, ChevronDown, Copy, Download, LoaderCircle, Trash2, X } from 'lucide-react' import SVG from 'react-inlinesvg' import { @@ -129,154 +127,143 @@ export const PreviewPane = () => { if (!file) return null const width = 450 - const isOpen = !isEmpty(file) const size = file.metadata ? formatBytes(file.metadata.size) : null const mimeType = file.metadata ? file.metadata.mimetype : undefined const createdAt = file.created_at ? new Date(file.created_at).toLocaleString() : 'Unknown' const updatedAt = file.updated_at ? new Date(file.updated_at).toLocaleString() : 'Unknown' return ( - -
- {/* Preview Header */} -
- setSelectedFilePreview(undefined)} - /> -
+ {/* Preview Header */} +
+ setSelectedFilePreview(undefined)} + /> +
- {/* Preview Thumbnail*/} -
-
- -
-
- -
- {/* Preview Information */} -
-
{file.name}
- {file.isCorrupted && ( -
- -

- File is corrupted, please delete and reupload this file again -

-
- )} - {mimeType && ( -

- {mimeType} - {size && - {size}} -

- )} -
- - {/* Preview Metadata */} -
-
- -

{createdAt}

-
-
- -

{updatedAt}

-
-
- - {/* Actions */} -
- - {selectedBucket.public ? ( - - ) : ( - - - - - - onCopyUrl(file.path!, URL_EXPIRY_DURATION.WEEK)} - > - Expire in 1 week - - onCopyUrl(file.path!, URL_EXPIRY_DURATION.MONTH)} - > - Expire in 1 month - - onCopyUrl(file.path!, URL_EXPIRY_DURATION.YEAR)} - > - Expire in 1 year - - setSelectedFileCustomExpiry(file)} - > - Custom expiry - - - - )} -
- } - onClick={() => setSelectedItemsToDelete([file])} - tooltip={{ - content: { - side: 'bottom', - text: !canUpdateFiles - ? 'You need additional permissions to delete this file' - : undefined, - }, - }} - > - Delete file - + {/* Preview Thumbnail*/} +
+
+
- + +
+ {/* Preview Information */} +
+
{file.name}
+ {file.isCorrupted && ( +
+ +

+ File is corrupted, please delete and reupload this file again +

+
+ )} + {mimeType && ( +

+ {mimeType} + {size && - {size}} +

+ )} +
+ + {/* Preview Metadata */} +
+
+ +

{createdAt}

+
+
+ +

{updatedAt}

+
+
+ + {/* Actions */} +
+ + {selectedBucket.public ? ( + + ) : ( + + + + + + onCopyUrl(file.path!, URL_EXPIRY_DURATION.WEEK)} + > + Expire in 1 week + + onCopyUrl(file.path!, URL_EXPIRY_DURATION.MONTH)} + > + Expire in 1 month + + onCopyUrl(file.path!, URL_EXPIRY_DURATION.YEAR)} + > + Expire in 1 year + + setSelectedFileCustomExpiry(file)} + > + Custom expiry + + + + )} +
+ } + onClick={() => setSelectedItemsToDelete([file])} + tooltip={{ + content: { + side: 'bottom', + text: !canUpdateFiles + ? 'You need additional permissions to delete this file' + : undefined, + }, + }} + > + Delete file + +
+
) } diff --git a/apps/studio/package.json b/apps/studio/package.json index 50d57823f2..f2fadd709f 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -44,7 +44,6 @@ "@graphiql/react": "^0.19.4", "@graphiql/toolkit": "^0.9.1", "@hcaptcha/react-hcaptcha": "^1.12.0", - "@headlessui/react": "^1.7.17", "@heroicons/react": "^2.1.3", "@hookform/resolvers": "^3.1.1", "@mjackson/multipart-parser": "^0.10.1", diff --git a/packages/ui/package.json b/packages/ui/package.json index 4c75388081..b1ac690795 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -19,7 +19,6 @@ "test:report": "open coverage/lcov-report/index.html" }, "dependencies": { - "@headlessui/react": "^1.7.17", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-aspect-ratio": "^1.0.3", diff --git a/packages/ui/src/lib/Overlay/Overlay.module.css b/packages/ui/src/lib/Overlay/Overlay.module.css deleted file mode 100644 index 0800ca6d72..0000000000 --- a/packages/ui/src/lib/Overlay/Overlay.module.css +++ /dev/null @@ -1,75 +0,0 @@ -/* - Overlay animations imported first as so placement styles are not affected. -*/ - -.sbui-overlay--enter { - @apply transition ease-out duration-100; -} -.sbui-overlay--enterFrom { - @apply transform opacity-0 scale-95; -} -.sbui-overlay--enterTo { - @apply transform opacity-100 scale-100; -} -.sbui-overlay--leave { - @apply transition ease-in duration-75; -} -.sbui-overlay--leaveFrom { - @apply transform opacity-100 scale-100; -} -.sbui-overlay--leaveTo { - @apply transform opacity-0 scale-95; -} - -.sbui-overlay { - @apply relative inline-block; -} - -.sbui-overlay-container { - @apply w-56; -} - -.sbui-overlay-container--bottomRight { - @apply absolute origin-top-right right-0 mt-2; -} - -.sbui-overlay-container--bottomLeft { - @apply absolute origin-top-left left-0 mt-2; -} - -.sbui-overlay-container--bottomCenter { - margin-top: 0.5rem; - position: absolute; - transform-origin: center; - transform-origin: bottom center; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} - -.sbui-overlay-container--topRight { - @apply origin-bottom-right; - margin-top: -0.5rem; - position: absolute; - left: 0; - transform-origin: top left; - transform: translatey(-100%); -} - -.sbui-overlay-container--topLeft { - @apply origin-bottom-left; - margin-top: -0.5rem; - position: absolute; - right: 0; - transform-origin: top left; - transform: translatey(-100%); -} - -.sbui-overlay-container--topCenter { - @apply origin-bottom-left; - margin-top: -0.5rem; - position: absolute; - left: 50%; - transform-origin: top left; - transform: translatey(-100%) translateX(-50%); -} diff --git a/packages/ui/src/lib/Overlay/Overlay.tsx b/packages/ui/src/lib/Overlay/Overlay.tsx deleted file mode 100644 index 072101c575..0000000000 --- a/packages/ui/src/lib/Overlay/Overlay.tsx +++ /dev/null @@ -1,95 +0,0 @@ -'use client' - -import { Transition } from '@headlessui/react' -import React, { useEffect, useRef, useState } from 'react' - -import { AnimationTailwindClasses } from '../../types' -//@ts-ignore -import { useOnClickOutside } from './../../lib/Hooks' -// @ts-ignore -import OverlayStyles from './Overlay.module.css' -import { DropdownContext } from './OverlayContext' - -interface Props { - visible?: boolean - overlay?: React.ReactNode - children?: React.ReactNode - placement?: 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'topLeft' | 'topRight' | 'topCenter' - onVisibleChange?: any - disabled?: boolean - triggerElement?: any - overlayStyle?: React.CSSProperties - overlayClassName?: string - transition?: AnimationTailwindClasses -} - -function Overlay({ - visible, - overlay, - children, - placement = 'topCenter', - onVisibleChange, - disabled, - triggerElement, - overlayStyle, - overlayClassName, - transition, -}: Props) { - const ref = useRef(null) - const [visibleState, setVisibleState] = useState(!!visible) - - let classes = [ - OverlayStyles['sbui-overlay-container'], - OverlayStyles[`sbui-overlay-container--${placement}`], - ] - if (overlayClassName) classes.push(overlayClassName) - - function onToggle() { - setVisibleState(!visibleState) - if (onVisibleChange) onVisibleChange(visibleState) - } - - // allow ovveride of Dropdown - useEffect(() => { - setVisibleState(!!visible) - }, [visible]) - - // detect clicks from outside - useOnClickOutside(ref, () => { - if (visibleState) { - setVisibleState(!visibleState) - } - }) - - const TriggerElement = () => { - return
{triggerElement}
- } - - return ( -
- {placement === 'bottomRight' || placement === 'bottomLeft' || placement === 'bottomCenter' ? ( - - ) : null} - -
- - {children} - -
- - {placement === 'topRight' || placement === 'topLeft' || placement === 'topCenter' ? ( - - ) : null} -
- ) -} - -export default Overlay diff --git a/packages/ui/src/lib/Overlay/OverlayContext.tsx b/packages/ui/src/lib/Overlay/OverlayContext.tsx deleted file mode 100644 index 69ff55ae97..0000000000 --- a/packages/ui/src/lib/Overlay/OverlayContext.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { createContext } from 'react' - -// Make sure the shape of the default value passed to -// createContext matches the shape that the consumers expect! -export const DropdownContext = createContext({ - onClick: (e: any) => {}, -}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ddb3366f01..24263a6d11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -886,9 +886,6 @@ importers: '@hcaptcha/react-hcaptcha': specifier: ^1.12.0 version: 1.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@headlessui/react': - specifier: ^1.7.17 - version: 1.7.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@heroicons/react': specifier: ^2.1.3 version: 2.1.3(react@18.3.1) @@ -2437,9 +2434,6 @@ importers: packages/ui: dependencies: - '@headlessui/react': - specifier: ^1.7.17 - version: 1.7.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-accordion': specifier: ^1.2.12 version: 1.2.12(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)