diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx deleted file mode 100644 index 1a84c7bdd40..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/accordion.tsx +++ /dev/null @@ -1,57 +0,0 @@ -'use client' - -import * as React from 'react' -import * as AccordionPrimitive from '@radix-ui/react-accordion' -import { ChevronDown } from 'lucide-react' - -import { cn } from 'ui' - -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', - 'rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', - className - )} - {...props} - > - {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, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx deleted file mode 100644 index 686d4d7c833..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/copy-to-clipboard-container.tsx +++ /dev/null @@ -1,103 +0,0 @@ -'use client' - -import { Button } from 'ui' -import { useCopyToClipboard } from 'components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard' -import { composeRefs } from 'components/interfaces/DataTableDemo/lib/compose-refs' -import { cn } from 'ui' -import { cva, VariantProps } from 'class-variance-authority' -import { Check, Copy, Plus } from 'lucide-react' -import * as React from 'react' - -const containerVariants = cva( - 'peer whitespace-pre-wrap break-all rounded-md border p-2 font-mono text-sm', - { - variants: { - variant: { - default: 'border-border/50 bg-border/30', - destructive: 'border-destructive/50 bg-destructive/30', - }, - defaultVariants: { - variant: 'default', - }, - }, - } -) - -export interface CopyToClipboardContainerProps - extends React.HTMLAttributes, - VariantProps { - /** - * If set and the content exceeds the maximum height, - * a "Show content" button will collapse the full content - */ - maxHeight?: number -} - -export const CopyToClipboardContainer = React.forwardRef< - HTMLDivElement, - CopyToClipboardContainerProps ->(({ children, variant, maxHeight, className, ...props }, ref) => { - const [open, setOpen] = React.useState(false) - const [collapsible, setCollapsible] = React.useState(!!maxHeight) - const innerRef = React.useRef(null) - const { copy, isCopied } = useCopyToClipboard() - - React.useLayoutEffect(() => { - if (innerRef.current && maxHeight) { - // REMINDER: scrollHeight will keep the max possible height of the content - // if maxHeight is set, we show the button by default and remove it if height is too narrow. - // That way, we avoid having a layout shift of first showing the full height and then collapsible. - if (innerRef.current.scrollHeight <= maxHeight) { - setCollapsible(false) - } - } - }, [innerRef.current, maxHeight]) - - return ( -
-
- {children} -
- - {collapsible && !open ? ( -
- -
- ) : null} -
- ) -}) - -CopyToClipboardContainer.displayName = 'CopyToClipboardContainer' diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx deleted file mode 100644 index 0f0b8f1fb83..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/input-with-addons.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react' - -import { cn } from 'ui' - -export interface InputWithAddonsProps extends React.InputHTMLAttributes { - leading?: React.ReactNode - trailing?: React.ReactNode - containerClassName?: string -} - -const InputWithAddons = React.forwardRef( - ({ leading, trailing, containerClassName, className, ...props }, ref) => { - return ( -
- {leading ? ( -
{leading}
- ) : null} - - {trailing ? ( -
{trailing}
- ) : null} -
- ) - } -) -InputWithAddons.displayName = 'InputWithAddons' - -export { InputWithAddons } diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx deleted file mode 100644 index 7d54ea17c3c..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/kbd.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Copy Pasta from: https://github.com/sadmann7/shadcn-table/blob/main/src/components/kbd.tsx#L54 -import { type VariantProps, cva } from 'class-variance-authority' -import * as React from 'react' - -import { cn } from 'ui' - -export const kbdVariants = cva( - 'select-none rounded border px-1.5 py-px font-mono text-[0.7rem] font-normal font-mono shadow-sm disabled:opacity-50', - { - variants: { - variant: { - default: 'bg-accent text-accent-foreground', - outline: 'bg-background text-foreground', - }, - }, - defaultVariants: { - variant: 'default', - }, - } -) - -export interface KbdProps - extends React.ComponentPropsWithoutRef<'kbd'>, - VariantProps { - /** - * The title of the `abbr` element inside the `kbd` element. - * @default undefined - * @type string | undefined - * @example title="Command" - */ - abbrTitle?: string -} - -const Kbd = React.forwardRef( - ({ abbrTitle, children, className, variant, ...props }, ref) => { - return ( - - {abbrTitle ? ( - - {children} - - ) : ( - children - )} - - ) - } -) -Kbd.displayName = 'Kbd' - -export { Kbd } diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx deleted file mode 100644 index 55762b040f4..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-table.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { - Table, - TableBody, - TableCell, - TableRow, -} from 'components/interfaces/DataTableDemo/components/custom/table' -import { useCopyToClipboard } from 'components/interfaces/DataTableDemo/hooks/use-copy-to-clipboard' -import { Check, Copy } from 'lucide-react' - -interface KVTableProps { - data: Record -} -export function KVTable({ data }: KVTableProps) { - return ( -
-
- - - {Object.entries(data).map(([key, value]) => { - return - })} - -
-
-
- ) -} - -function RowAction({ label, value }: { label: string; value: string | number | boolean }) { - const { copy, isCopied } = useCopyToClipboard() - - return ( - { - e.stopPropagation() - copy(value.toString()) - }} - > - {label} - - {value} -
- {!isCopied ? : } -
- - - ) -} diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx deleted file mode 100644 index bfa88ac79bc..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/kv-tabs.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { - Tabs_Shadcn_ as Tabs, - TabsContent_Shadcn_ as TabsContent, - TabsList_Shadcn_ as TabsList, - TabsTrigger_Shadcn_ as TabsTrigger, -} from 'ui' -import { Braces, TableProperties } from 'lucide-react' -import { CopyToClipboardContainer } from './copy-to-clipboard-container' -import { KVTable } from './kv-table' - -interface KVTabsProps { - data: Record - className?: string -} - -export function KVTabs({ data, className }: KVTabsProps) { - return ( - -
- - - - - - - - -
- - - - - {/* REMINDER: either `overflow-auto whitespace-pre` or `whitespace-pre-wrap` - depends if we want to wrap the text or not */} - - {JSON.stringify(data, null, 2)} - - - - ) -} diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx deleted file mode 100644 index 2f2b317f56d..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/link.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import NextLink, { type LinkProps as NextLinkProps } from 'next/link' -import React from 'react' -import { cn } from 'ui' -import { ArrowUpRight } from 'lucide-react' - -export interface LinkProps extends NextLinkProps { - className?: string - children?: React.ReactNode - hideArrow?: boolean -} - -const Link = React.forwardRef( - ({ className, href, children, hideArrow, ...props }, ref) => { - const isInternal = href?.toString().startsWith('/') || href?.toString().startsWith('#') - const externalLinkProps = !isInternal ? { target: '_blank', rel: 'noreferrer' } : undefined - - return ( - - {children} - {!isInternal && !hideArrow ? ( - - ) : null} - - ) - } -) - -Link.displayName = 'Link' - -export { Link } diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx deleted file mode 100644 index ea1a4c5d29e..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/sheet.tsx +++ /dev/null @@ -1,128 +0,0 @@ -'use client' - -import * as React from 'react' -import * as SheetPrimitive from '@radix-ui/react-dialog' -import { cva, type VariantProps } from 'class-variance-authority' -import { X } from 'lucide-react' - -import { cn } from 'ui' - -const Sheet = SheetPrimitive.Root - -const SheetTrigger = SheetPrimitive.Trigger - -const SheetClose = SheetPrimitive.Close - -const SheetPortal = SheetPrimitive.Portal - -const SheetOverlay = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SheetOverlay.displayName = SheetPrimitive.Overlay.displayName - -const sheetVariants = cva( - 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', - { - variants: { - side: { - top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', - bottom: - 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', - left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', - right: - 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', - }, - }, - defaultVariants: { - side: 'right', - }, - } -) - -interface SheetContentProps - extends React.ComponentPropsWithoutRef, - VariantProps { - hideClose?: boolean -} - -const SheetContent = React.forwardRef< - React.ElementRef, - SheetContentProps ->(({ side = 'right', className, children, hideClose, ...props }, ref) => ( - - - - {children} - {!hideClose ? ( - - - Close - - ) : null} - - -)) -SheetContent.displayName = SheetPrimitive.Content.displayName - -const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => ( -
-) -SheetHeader.displayName = 'SheetHeader' - -const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => ( -
-) -SheetFooter.displayName = 'SheetFooter' - -const SheetTitle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SheetTitle.displayName = SheetPrimitive.Title.displayName - -const SheetDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SheetDescription.displayName = SheetPrimitive.Description.displayName - -export { - Sheet, - SheetPortal, - SheetOverlay, - SheetTrigger, - SheetClose, - SheetContent, - SheetHeader, - SheetFooter, - SheetTitle, - SheetDescription, -} diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx deleted file mode 100644 index cf7a9c7c166..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/slider.tsx +++ /dev/null @@ -1,35 +0,0 @@ -// Props to https://github.com/shadcn-ui/ui/issues/885#issuecomment-2059600641 - -'use client' - -import * as React from 'react' -import * as SliderPrimitive from '@radix-ui/react-slider' - -import { cn } from 'ui' - -const Slider = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { - const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max] - - return ( - - - - - {initialValue.map((_, index) => ( - - - - ))} - - ) -}) -Slider.displayName = SliderPrimitive.Root.displayName - -export { Slider } diff --git a/apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx b/apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx deleted file mode 100644 index 36ea2d461a1..00000000000 --- a/apps/studio/components/interfaces/DataTableDemo/components/custom/sortable.tsx +++ /dev/null @@ -1,333 +0,0 @@ -'use client' - -import * as React from 'react' -import type { - DndContextProps, - DraggableSyntheticListeners, - DropAnimation, - UniqueIdentifier, -} from '@dnd-kit/core' -import { - closestCenter, - defaultDropAnimationSideEffects, - DndContext, - DragOverlay, - KeyboardSensor, - MouseSensor, - TouchSensor, - useSensor, - useSensors, -} from '@dnd-kit/core' -import { - restrictToHorizontalAxis, - restrictToParentElement, - restrictToVerticalAxis, -} from '@dnd-kit/modifiers' -import { - arrayMove, - horizontalListSortingStrategy, - SortableContext, - useSortable, - verticalListSortingStrategy, - type SortableContextProps, -} from '@dnd-kit/sortable' -import { CSS } from '@dnd-kit/utilities' -import { Slot, type SlotProps } from '@radix-ui/react-slot' - -import { composeRefs } from 'components/interfaces/DataTableDemo/lib/compose-refs' -import { cn } from 'ui' -import { Button, type ButtonProps } from 'ui' -import { createPortal } from 'react-dom' - -const orientationConfig = { - vertical: { - modifiers: [restrictToVerticalAxis, restrictToParentElement], - strategy: verticalListSortingStrategy, - }, - horizontal: { - modifiers: [restrictToHorizontalAxis, restrictToParentElement], - strategy: horizontalListSortingStrategy, - }, - mixed: { - modifiers: [restrictToParentElement], - strategy: undefined, - }, -} - -interface SortableProps extends DndContextProps { - /** - * An array of data items that the sortable component will render. - * @example - * value={[ - * { id: 1, name: 'Item 1' }, - * { id: 2, name: 'Item 2' }, - * ]} - */ - value: TData[] - - /** - * An optional callback function that is called when the order of the data items changes. - * It receives the new array of items as its argument. - * @example - * onValueChange={(items) => console.log(items)} - */ - onValueChange?: (items: TData[]) => void - - /** - * An optional callback function that is called when an item is moved. - * It receives an event object with `activeIndex` and `overIndex` properties, representing the original and new positions of the moved item. - * This will override the default behavior of updating the order of the data items. - * @type (event: { activeIndex: number; overIndex: number }) => void - * @example - * onMove={(event) => console.log(`Item moved from index ${event.activeIndex} to index ${event.overIndex}`)} - */ - onMove?: (event: { activeIndex: number; overIndex: number }) => void - - /** - * A collision detection strategy that will be used to determine the closest sortable item. - * @default closestCenter - * @type DndContextProps["collisionDetection"] - */ - collisionDetection?: DndContextProps['collisionDetection'] - - /** - * An array of modifiers that will be used to modify the behavior of the sortable component. - * @default - * [restrictToVerticalAxis, restrictToParentElement] - * @type Modifier[] - */ - modifiers?: DndContextProps['modifiers'] - - /** - * A sorting strategy that will be used to determine the new order of the data items. - * @default verticalListSortingStrategy - * @type SortableContextProps["strategy"] - */ - strategy?: SortableContextProps['strategy'] - - /** - * Specifies the axis for the drag-and-drop operation. It can be "vertical", "horizontal", or "both". - * @default "vertical" - * @type "vertical" | "horizontal" | "mixed" - */ - orientation?: 'vertical' | 'horizontal' | 'mixed' - - /** - * An optional React node that is rendered on top of the sortable component. - * It can be used to display additional information or controls. - * @default null - * @type React.ReactNode | null - * @example - * overlay={} - */ - overlay?: React.ReactNode | null -} - -function Sortable({ - value, - onValueChange, - onDragStart, - onDragEnd, - onDragCancel, - collisionDetection = closestCenter, - modifiers, - strategy, - onMove, - orientation = 'vertical', - overlay, - children, - ...props -}: SortableProps) { - const [activeId, setActiveId] = React.useState(null) - const sensors = useSensors( - useSensor(MouseSensor), - useSensor(TouchSensor), - useSensor(KeyboardSensor) - ) - - const config = orientationConfig[orientation] - - return ( - { - setActiveId(event.active.id) - onDragStart?.(event) - }} - onDragEnd={(event) => { - const { active, over } = event - if (over && active.id !== over?.id) { - const activeIndex = value.findIndex((item) => item.id === active.id) - const overIndex = value.findIndex((item) => item.id === over.id) - - if (onMove) { - onMove({ activeIndex, overIndex }) - } else { - onValueChange?.(arrayMove(value, activeIndex, overIndex)) - } - } - setActiveId(null) - onDragEnd?.(event) - }} - onDragCancel={(event) => { - setActiveId?.(null) - onDragCancel?.(event) - }} - collisionDetection={collisionDetection} - {...props} - > - - {children} - - {overlay - ? // https://docs.dndkit.com/api-documentation/draggable/drag-overlay#portals - createPortal( - {overlay}, - document.body - ) - : null} - - ) -} - -const dropAnimationOpts: DropAnimation = { - sideEffects: defaultDropAnimationSideEffects({ - styles: { - active: { - opacity: '0.4', - }, - }, - }), -} - -interface SortableOverlayProps extends React.ComponentPropsWithRef { - activeId?: UniqueIdentifier | null -} - -const SortableOverlay = React.forwardRef( - ({ activeId, dropAnimation = dropAnimationOpts, children, ...props }, ref) => { - return ( - - {activeId ? ( - - {children} - - ) : null} - - ) - } -) -SortableOverlay.displayName = 'SortableOverlay' - -interface SortableItemContextProps { - attributes: React.HTMLAttributes - listeners: DraggableSyntheticListeners | undefined - isDragging?: boolean -} - -const SortableItemContext = React.createContext({ - attributes: {}, - listeners: undefined, - isDragging: false, -}) - -function useSortableItem() { - const context = React.useContext(SortableItemContext) - - if (!context) { - throw new Error('useSortableItem must be used within a SortableItem') - } - - return context -} - -interface SortableItemProps extends SlotProps { - /** - * The unique identifier of the item. - * @example "item-1" - * @type UniqueIdentifier - */ - value: UniqueIdentifier - - /** - * Specifies whether the item should act as a trigger for the drag-and-drop action. - * @default false - * @type boolean | undefined - */ - asTrigger?: boolean - - /** - * Merges the item's props into its immediate child. - * @default false - * @type boolean | undefined - */ - asChild?: boolean -} - -const SortableItem = React.forwardRef( - ({ value, asTrigger, asChild, className, ...props }, ref) => { - const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ - id: value, - }) - - const context = React.useMemo( - () => ({ - attributes, - listeners, - isDragging, - }), - [attributes, listeners, isDragging] - ) - const style: React.CSSProperties = { - opacity: isDragging ? 0.5 : 1, - transform: CSS.Translate.toString(transform), - transition, - } - - const Comp = asChild ? Slot : 'div' - - return ( - - )} - style={style} - {...(asTrigger ? attributes : {})} - {...(asTrigger ? listeners : {})} - {...props} - /> - - ) - } -) -SortableItem.displayName = 'SortableItem' - -interface SortableDragHandleProps extends ButtonProps { - withHandle?: boolean -} - -const SortableDragHandle = React.forwardRef( - ({ className, ...props }, ref) => { - const { attributes, listeners, isDragging } = useSortableItem() - - return ( -