dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-06 01:45:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove _Shadcn_ suffix from Command components (#46153)

Browse Source 
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Command` components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Gildas Garcia authored and GitHub committed 2026-05-20 15:45:32 +02:00
1 parent e8af602d2d
commit 243e079a2c
86 files changed
+1320 -1372
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/components/command-menu.tsx
+25 -25
View File
@@ -7,12 +7,12 @@ import * as React from 'react'
import {
Button,
CommandDialog,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
DialogProps,
DialogTitle,
} from 'ui'
@@ -77,13 +77,13 @@ export function CommandMenu({ ...props }: DialogProps) {
/>
<CommandDialog open={open} onOpenChange={setOpen}>
<DialogTitle className="sr-only">Search Design System...</DialogTitle>
<CommandInput_Shadcn_ placeholder="Type a command or search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
{docsConfig.sidebarNav.map((group) => (
<CommandGroup_Shadcn_ key={group.title} heading={group.title}>
<CommandGroup key={group.title} heading={group.title}>
{group.items.map((navItem) => (
<CommandItem_Shadcn_
<CommandItem
key={navItem.href}
value={navItem.title}
onSelect={() => {
@@ -94,30 +94,30 @@ export function CommandMenu({ ...props }: DialogProps) {
<CircleIcon className="h-3 w-3" strokeWidth={1} />
</div>
{navItem.title}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
))}
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Theme">
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
<CommandSeparator />
<CommandGroup heading="Theme">
<CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
<SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Light
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Classic dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
<LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
System
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>
</>
)
apps/design-system/registry/default/example/combobox-demo.tsx
+16 -16
View File
@@ -4,12 +4,12 @@ import { Check, ChevronsUpDown } from 'lucide-react'
import * as React from 'react'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -61,13 +61,13 @@ export default function ComboboxDemo() {
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search framework..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search framework..." />
<CommandList>
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup>
{frameworks.map((framework) => (
<CommandItem_Shadcn_
<CommandItem
key={framework.value}
value={framework.value}
onSelect={(currentValue) => {
@@ -82,11 +82,11 @@ export default function ComboboxDemo() {
)}
/>
{framework.label}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
+16 -16
View File
@@ -4,12 +4,12 @@ import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
import * as React from 'react'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
@@ -72,14 +72,14 @@ export default function ComboboxDropdownMenu() {
Apply label
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Filter label..." autoFocus={true} />
<Command>
<CommandInput placeholder="Filter label..." autoFocus={true} />
<ScrollArea className="h-20">
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No label found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<CommandList>
<CommandEmpty>No label found.</CommandEmpty>
<CommandGroup>
{labels.map((label) => (
<CommandItem_Shadcn_
<CommandItem
key={label}
value={label}
onSelect={(value) => {
@@ -88,12 +88,12 @@ export default function ComboboxDropdownMenu() {
}}
>
{label}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandGroup>
</CommandList>
</ScrollArea>
</Command_Shadcn_>
</Command>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
apps/design-system/registry/default/example/combobox-form.tsx
+16 -16
View File
@@ -6,12 +6,12 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Form,
FormControl,
FormDescription,
@@ -94,13 +94,13 @@ export default function ComboboxForm() {
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search language..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No language found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search language..." />
<CommandList>
<CommandEmpty>No language found.</CommandEmpty>
<CommandGroup>
{languages.map((language) => (
<CommandItem_Shadcn_
<CommandItem
value={language.label}
key={language.value}
onSelect={() => {
@@ -114,11 +114,11 @@ export default function ComboboxForm() {
)}
/>
{language.label}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
apps/design-system/registry/default/example/combobox-popover.tsx
+16 -16
View File
@@ -12,12 +12,12 @@ import {
import * as React from 'react'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -84,13 +84,13 @@ export default function ComboboxPopover() {
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="right" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Change status..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Change status..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{statuses.map((status) => (
<CommandItem_Shadcn_
<CommandItem
key={status.value}
value={status.value}
onSelect={(value) => {
@@ -107,11 +107,11 @@ export default function ComboboxPopover() {
)}
/>
<span>{status.label}</span>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/design-system/registry/default/example/combobox-responsive.tsx
+16 -16
View File
@@ -4,12 +4,12 @@ import { Plus } from 'lucide-react'
import * as React from 'react'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Drawer,
DrawerContent,
DrawerTrigger,
@@ -97,13 +97,13 @@ function StatusList({
setSelectedStatus: (status: Status | null) => void
}) {
return (
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Filter status..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Filter status..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{statuses.map((status) => (
<CommandItem_Shadcn_
<CommandItem
key={status.value}
value={status.value}
onSelect={(value) => {
@@ -112,10 +112,10 @@ function StatusList({
}}
>
{status.label}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
)
}
apps/design-system/registry/default/example/command-demo.tsx
+34 -34
View File
@@ -1,54 +1,54 @@
import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
import {
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
CommandShortcut_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from 'ui'
export default function CommandDemo() {
return (
<Command_Shadcn_ className="rounded-lg border shadow-md">
<CommandInput_Shadcn_ placeholder="Type a command or search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ heading="Suggestions">
<CommandItem_Shadcn_>
<Command className="rounded-lg border shadow-md">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>
<Calendar className="mr-2 h-4 w-4" />
<span>Calendar</span>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
</CommandItem>
<CommandItem>
<Smile className="mr-2 h-4 w-4" />
<span>Search Emoji</span>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
</CommandItem>
<CommandItem>
<Calculator className="mr-2 h-4 w-4" />
<span>Calculator</span>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Settings">
<CommandItem_Shadcn_>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
<CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<CreditCard className="mr-2 h-4 w-4" />
<span>Billing</span>
<CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
<CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
)
}
apps/design-system/registry/default/example/command-dialog.tsx
+31 -31
View File
@@ -4,13 +4,13 @@ import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-
import * as React from 'react'
import {
CommandDialog,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
CommandShortcut_Shadcn_,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from 'ui'
export default function CommandDialogDemo() {
@@ -37,42 +37,42 @@ export default function CommandDialogDemo() {
</kbd>
</p>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput_Shadcn_ placeholder="Type a command or search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ heading="Suggestions">
<CommandItem_Shadcn_>
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>
<Calendar className="mr-2 h-4 w-4" />
<span>Calendar</span>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
</CommandItem>
<CommandItem>
<Smile className="mr-2 h-4 w-4" />
<span>Search Emoji</span>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
</CommandItem>
<CommandItem>
<Calculator className="mr-2 h-4 w-4" />
<span>Calculator</span>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Settings">
<CommandItem_Shadcn_>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
<CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<CreditCard className="mr-2 h-4 w-4" />
<span>Billing</span>
<CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
<CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>
</>
)
apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
+9 -9
View File
@@ -1,21 +1,21 @@
import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
import { noop } from 'lodash-es'
import { Check, ChevronsUpDown } from 'lucide-react'
import { useEffect, useRef, useState } from 'react'
import {
Button_Shadcn_ as Button,
cn,
Command_Shadcn_ as Command,
CommandGroup_Shadcn_ as CommandGroup,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
Popover as Popover,
PopoverContent as PopoverContent,
PopoverTrigger as PopoverTrigger,
Command,
CommandGroup as CommandGroup,
CommandInput,
CommandItem as CommandItem,
CommandList as CommandList,
Popover,
PopoverContent,
PopoverTrigger,
ScrollArea,
} from 'ui'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
export interface ComboBoxOption {
id: string
apps/docs/features/ui/InfoTooltip.tsx
+5 -5
View File
@@ -1,20 +1,20 @@
'use client'
import { useBreakpoint } from 'common'
import { InfoIcon, XIcon } from 'lucide-react'
import React, {
type PropsWithChildren,
useCallback,
useEffect,
useId,
useRef,
useState,
type PropsWithChildren,
} from 'react'
import { InfoIcon, XIcon } from 'lucide-react'
import { ErrorBoundary } from 'react-error-boundary'
import { useBreakpoint } from 'common'
import {
Button,
cn,
CommandEmpty_Shadcn_,
CommandEmpty,
Sheet,
SheetContent,
SheetHeader,
@@ -105,7 +105,7 @@ const InfoTooltip = ({
'w-full h-fit min-h-[200px] py-2 px-4'
)}
>
<ErrorBoundary FallbackComponent={() => <CommandEmpty_Shadcn_ />}>
<ErrorBoundary FallbackComponent={() => <CommandEmpty />}>
<SheetHeader className="flex items-center justify-between gap-2 px-0 py-2 mb-2 max-w-full">
<div className="flex items-center gap-2 max-w-[90%]">
<InfoIcon className="p-px min-w-4 min-h-4 text-foreground-lighter" />
apps/docs/features/ui/McpConfigPanel.tsx
+26 -26
View File
@@ -1,5 +1,9 @@
'use client'
import { useDebounce } from '~/hooks/useDebounce'
import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
import { useProjectsInfiniteQuery } from '~/lib/fetch/projects-infinite'
import { useSendTelemetryEvent } from '~/lib/telemetry'
import { useIsLoggedIn, useIsUserLoading } from 'common'
import { Check, ChevronDown } from 'lucide-react'
import { useTheme } from 'next-themes'
@@ -8,11 +12,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -25,10 +29,6 @@ import {
type McpClient,
} from 'ui-patterns/McpUrlBuilder'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
import { useDebounce } from '~/hooks/useDebounce'
import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
import { useProjectsInfiniteQuery } from '~/lib/fetch/projects-infinite'
import { useSendTelemetryEvent } from '~/lib/telemetry'
type PlatformType = (typeof PLATFORMS)[number]['value']
@@ -135,8 +135,8 @@ function ProjectSelector({
)}
</div>
<PopoverContent className="mt-0 p-0 w-56" side="bottom" align="start">
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
placeholder="Search ..."
className="h-8"
showResetIcon
@@ -144,8 +144,8 @@ function ProjectSelector({
onValueChange={setSearch}
handleReset={() => setSearch('')}
/>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<CommandList>
<CommandGroup>
{isLoading ? (
<div className="px-2 py-1 flex flex-col gap-2">
<ShimmeringLoader className="w-full" />
@@ -160,7 +160,7 @@ function ProjectSelector({
)}
<ScrollArea className={projects.length > 7 ? 'h-[210px]' : ''}>
{projects?.map((project) => (
<CommandItem_Shadcn_
<CommandItem
key={project.ref}
value={project.ref}
onSelect={() => {
@@ -178,16 +178,16 @@ function ProjectSelector({
project.ref === selectedProject?.ref ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
))}
<div ref={sentinelRef} className="h-1 -mt-1" />
{hasNextPage && <ShimmeringLoader className="px-2 py-3" />}
</ScrollArea>
</>
)}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
@@ -230,11 +230,11 @@ function PlatformSelector({
</PopoverTrigger>
</div>
<PopoverContent className="mt-0 p-0 max-w-48" side="bottom" align="start">
<Command_Shadcn_>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandList>
<CommandGroup>
{PLATFORMS.map((platform) => (
<CommandItem_Shadcn_
<CommandItem
key={platform.value}
value={platform.value}
onSelect={() => {
@@ -252,11 +252,11 @@ function PlatformSelector({
platform.value === selectedPlatform ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/learn/components/command-menu.tsx
+28 -28
View File
@@ -4,21 +4,21 @@ import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useRouter } from 'next/navigation'
import * as React from 'react'
import { COMMAND_ITEMS } from '@/config/docs'
import { cn } from '@/lib/utils'
import {
Button,
CommandDialog,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
DialogProps,
} from 'ui'
import { COMMAND_ITEMS } from '@/config/docs'
import { cn } from '@/lib/utils'
export function CommandMenu({ ...props }: DialogProps) {
const router = useRouter()
const [open, setOpen] = React.useState(false)
@@ -69,12 +69,12 @@ export function CommandMenu({ ...props }: DialogProps) {
</kbd>
</Button>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput_Shadcn_ placeholder="Type a command or search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ key="pages" heading="Pages">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup key="pages" heading="Pages">
{COMMAND_ITEMS.map((navItem) => (
<CommandItem_Shadcn_
<CommandItem
key={navItem.href}
value={navItem.label}
onSelect={() => runCommand(() => router.push(navItem.href as string))}
@@ -83,29 +83,29 @@ export function CommandMenu({ ...props }: DialogProps) {
<CircleIcon className="h-3 w-3" strokeWidth={1} />
</div>
{navItem.label}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Theme">
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Theme">
<CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
<SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Light
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Classic dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
<LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
System
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>
</>
)
apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/Permissions/PermissionResourceSelector.tsx
+16 -16
View File
@@ -3,12 +3,12 @@ import { Path, PathValue } from 'react-hook-form'
import {
Button,
Checkbox,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -46,19 +46,19 @@ export const PermissionResourceSelector = <TFormValues extends PermissionsFormVa
</Button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0" align={align}>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search resources..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No resources found.</CommandEmpty_Shadcn_>
<Command>
<CommandInput placeholder="Search resources..." />
<CommandList>
<CommandEmpty>No resources found.</CommandEmpty>
<CommandGroup_Shadcn_ className="[&>div]:text-left">
<CommandGroup className="[&>div]:text-left">
<div className="max-h-[210px] overflow-y-auto">
{ACCESS_TOKEN_RESOURCES.map((resource) => {
const isChecked = permissionRows.some(
(row: PermissionRow) => row.resource === resource.resource
)
return (
<CommandItem_Shadcn_
<CommandItem
key={resource.resource}
value={`${resource.resource} ${resource.title}`}
onSelect={() => handleToggleResource(resource)}
@@ -77,13 +77,13 @@ export const PermissionResourceSelector = <TFormValues extends PermissionsFormVa
</span>
</div>
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</div>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Account/Preferences/TimezoneSettings.tsx
+18 -18
View File
@@ -6,12 +6,12 @@ import {
Card,
CardContent,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -103,13 +103,13 @@ export const TimezoneSettings = () => {
</Button>
</PopoverTrigger>
<PopoverContent id={listboxId} className="w-[--radix-popover-trigger-width] p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No timezones found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search timezone..." className="h-9" />
<CommandList>
<CommandEmpty>No timezones found</CommandEmpty>
<CommandGroup>
<ScrollArea className="h-72">
<CommandItem_Shadcn_
<CommandItem
key={AUTO_OPTION_VALUE}
value={`Auto detect ${browserTimezone}`}
onSelect={() => handleSelect('')}
@@ -126,12 +126,12 @@ export const TimezoneSettings = () => {
isAutoDetected ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
{TIMEZONES_BY_IANA.map((entry) => {
const ianaName = entry.utc[0]
const isSelected = !isAutoDetected && storedTimezone === ianaName
return (
<CommandItem_Shadcn_
<CommandItem
key={ianaName}
// CommandItem matches against the `value` prop for the input filter — include
// both the human label and the IANA name so search works for either.
@@ -145,13 +145,13 @@ export const TimezoneSettings = () => {
isSelected ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</FormItemLayout>
apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
'use client'
import { cn, CommandList_Shadcn_ } from 'ui'
import { cn, CommandList } from 'ui'
import { ShimmeringLoader } from 'ui-patterns'
import { TextHighlighter } from 'ui-patterns/CommandMenu'
import { CommandMenuGroup } from 'ui-patterns/CommandMenu/internal/CommandMenuGroup'
@@ -86,7 +86,7 @@ export function ResultsList({
})
return (
<CommandList_Shadcn_
<CommandList
className={cn(
'max-h-full! flex-1 min-h-0 overflow-y-auto overflow-x-hidden bg-transparent',
className
@@ -106,6 +106,6 @@ export function ResultsList({
</CommandMenuItem>
))}
</CommandMenuGroup>
</CommandList_Shadcn_>
</CommandList>
)
}
apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+16 -16
View File
@@ -11,12 +11,12 @@ import { UseFormReturn } from 'react-hook-form'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
FormControl,
FormField,
FormItem,
@@ -182,14 +182,14 @@ export const PolicyDetailsV2 = ({
align="start"
sameWidthAsTrigger
>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find a table..." />
<CommandList_Shadcn_ onWheel={(event) => event.stopPropagation()}>
<CommandEmpty_Shadcn_>No tables found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Find a table..." />
<CommandList onWheel={(event) => event.stopPropagation()}>
<CommandEmpty>No tables found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(tables ?? []).length > 7 ? 'h-[200px]' : ''}>
{(tables ?? []).map((table) => (
<CommandItem_Shadcn_
<CommandItem
key={table.id}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -205,12 +205,12 @@ export const PolicyDetailsV2 = ({
{field.value === table.name ? <Check size={13} /> : ''}
{table.name}
</span>
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</FormControl>
apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
+16 -16
View File
@@ -6,12 +6,12 @@ import { toast } from 'sonner'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -82,8 +82,8 @@ export const UserSelector = () => {
</Button>
</PopoverTrigger>
<PopoverContent sameWidthAsTrigger className="p-0" side="bottom" align="start">
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
showResetIcon
placeholder="Search for a user"
className="text-xs"
@@ -96,10 +96,10 @@ export const UserSelector = () => {
Failed to fetch users: {error.message}
</Admonition>
) : (
<CommandEmpty_Shadcn_>No user found</CommandEmpty_Shadcn_>
<CommandEmpty>No user found</CommandEmpty>
)}
<CommandList_Shadcn_>
<CommandList>
{isPending && (
<div className="p-2">
<GenericSkeletonLoader />
@@ -107,11 +107,11 @@ export const UserSelector = () => {
)}
{isSuccess && (
<CommandGroup_Shadcn_>
<CommandGroup>
<ScrollArea className={users.length > 7 ? 'h-full md:h-[210px]' : ''}>
{users.map((user) => {
return (
<CommandItem_Shadcn_
<CommandItem
key={user.id}
value={user.email}
className="cursor-pointer w-full"
@@ -129,14 +129,14 @@ export const UserSelector = () => {
</p>
{impersonatingUser?.id === user.id && <Check size={16} />}
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</FormItemLayout>
apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AwsRegionSelector.tsx
+16 -16
View File
@@ -3,12 +3,12 @@ import { useId, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
FormControl,
Popover,
PopoverContent,
@@ -78,14 +78,14 @@ export const AwsRegionSelector = ({
</FormControl>
</PopoverTrigger>
<PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search AWS regions..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No regions found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search AWS regions..." />
<CommandList>
<CommandEmpty>No regions found.</CommandEmpty>
<CommandGroup>
<ScrollArea className="h-72">
{AWS_IDP_REGIONS.map((option) => (
<CommandItem_Shadcn_
<CommandItem
value={option}
key={option}
onSelect={(currentValue) => {
@@ -97,12 +97,12 @@ export const AwsRegionSelector = ({
className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
/>
{option}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+6 -6
View File
@@ -20,12 +20,12 @@ import {
Button,
Checkbox,
cn,
Command_Shadcn_ as Command,
CommandEmpty_Shadcn_ as CommandEmpty,
CommandGroup_Shadcn_ as CommandGroup,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
FormControl,
FormField,
FormItem,
apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx
+16 -16
View File
@@ -1,12 +1,12 @@
import { Check, GitMerge, Shield } from 'lucide-react'
import { useState } from 'react'
import {
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -68,14 +68,14 @@ export const BranchSelector = ({
</ButtonTooltip>
</PopoverTrigger>
<PopoverContent className="p-0 w-80" side="bottom" align="end">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find branch to review..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No available branches found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Find branch to review..." />
<CommandList>
<CommandEmpty>No available branches found</CommandEmpty>
<CommandGroup>
<ScrollArea className="max-h-[210px] overflow-y-auto">
{availableBranches.map((branch) => (
<CommandItem_Shadcn_
<CommandItem
key={branch.id}
value={branch.name.replaceAll('"', '')}
className="cursor-pointer w-full flex items-center justify-between"
@@ -93,12 +93,12 @@ export const BranchSelector = ({
)}
{branch.git_branch && <span>Synced to a Git branch</span>}
{branch.review_requested_at && <span>Merge request opened</span>}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Connect/ConnectDropdown.tsx
+16 -16
View File
@@ -3,12 +3,12 @@ import { useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -73,13 +73,13 @@ export const ConnectDropdown = ({
</PopoverTrigger>
</div>
<PopoverContent className="p-0 max-w-48" side="bottom" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{items.map((item) => (
<CommandItem_Shadcn_
<CommandItem
key={item.key}
value={item.key}
onSelect={() => {
@@ -102,11 +102,11 @@ export const ConnectDropdown = ({
size={15}
className={cn('ml-auto ', item.key === state ? 'opacity-100' : 'opacity-0')}
/>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
+16 -16
View File
@@ -3,12 +3,12 @@ import { useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -64,13 +64,13 @@ export const FrameworkSelector = ({
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{items.map((item) => (
<CommandItem_Shadcn_
<CommandItem
key={item.key}
value={item.key}
onSelect={() => handleSelect(item.key)}
@@ -82,11 +82,11 @@ export const FrameworkSelector = ({
size={15}
className={cn('ml-auto', item.key === value ? 'opacity-100' : 'opacity-0')}
/>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
+16 -16
View File
@@ -3,12 +3,12 @@ import { useId, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -51,14 +51,14 @@ export const TimezoneSelection = ({
</Button>
</PopoverTrigger>
<PopoverContent id={listboxId} className="w-[350px] p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No timezones found...</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search timezone..." className="h-9" />
<CommandList>
<CommandEmpty>No timezones found...</CommandEmpty>
<CommandGroup>
<ScrollArea className="h-72">
{timezoneOptions.map((option) => (
<CommandItem_Shadcn_
<CommandItem
key={option}
value={option}
onSelect={(text) => {
@@ -78,12 +78,12 @@ export const TimezoneSelection = ({
selectedTimezone.text === option ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
+27 -27
View File
@@ -5,12 +5,12 @@ import { toast } from 'sonner'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -195,20 +195,20 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_
<Command>
<CommandInput
placeholder="Find schema..."
value={schemaSearchTerm}
onValueChange={setSchemaSearchTerm}
/>
<CommandList_Shadcn_
<CommandList
className={cn((schemas ?? []).length > 7 && 'max-h-[210px]! overflow-y-auto')}
onWheel={(event) => event.stopPropagation()}
>
<CommandEmpty_Shadcn_>No schemas found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<CommandEmpty>No schemas found</CommandEmpty>
<CommandGroup>
{(schemas ?? []).map((schema) => (
<CommandItem_Shadcn_
<CommandItem
key={schema.name}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -222,11 +222,11 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
{selectedSchema === schema.name && (
<Check className="text-brand" strokeWidth={2} size={16} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</FormItemLayout>
@@ -264,17 +264,17 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
<PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
{/* [Terry] shouldFilter context:
https://github.com/pacocoursey/cmdk/issues/267#issuecomment-2252717107 */}
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
placeholder="Find table..."
value={searchTerm}
onValueChange={handleSearchChange}
/>
<CommandList_Shadcn_
<CommandList
className={cn(entityTypes.length > 7 && 'max-h-[210px]! overflow-y-auto')}
onWheel={(event) => event.stopPropagation()}
>
<CommandEmpty_Shadcn_>
<CommandEmpty>
{isLoadingEntities ? (
<div className="flex items-center gap-2 text-center justify-center">
<Loader2 size={12} className="animate-spin" />
@@ -283,10 +283,10 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
) : (
'No tables found'
)}
</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
</CommandEmpty>
<CommandGroup>
{entityTypes.map((entity) => (
<CommandItem_Shadcn_
<CommandItem
key={entity.name}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -302,11 +302,11 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
{selectedEntity === entity.name && (
<Check className="text-brand" strokeWidth={2} size={16} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</FormItemLayout>
apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx
+23 -23
View File
@@ -5,13 +5,13 @@ import {
Badge,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -74,8 +74,8 @@ export const PublicationsComboBox = ({
</Button>
</PopoverTrigger>
<PopoverContent sameWidthAsTrigger className="p-0" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_
<Command>
<CommandInput
placeholder="Find publication..."
className="text-xs"
value={searchTerm}
@@ -86,8 +86,8 @@ export const PublicationsComboBox = ({
Publications with no tables are hidden
</p>
</div>
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>
<CommandList>
<CommandEmpty>
{isLoadingPublications ? (
<div className="flex items-center gap-2 text-center justify-center">
<Loader2 size={12} className="animate-spin" />
@@ -96,9 +96,9 @@ export const PublicationsComboBox = ({
) : (
'No publications found'
)}
</CommandEmpty_Shadcn_>
</CommandEmpty>
<CommandGroup_Shadcn_>
<CommandGroup>
{publications.length === 0 && (
<p className="text-foreground-lighter text-xs py-3 px-2">
No publications available
@@ -106,7 +106,7 @@ export const PublicationsComboBox = ({
)}
<ScrollArea className={publications.length > 7 ? 'h-[210px]' : ''}>
{publications.map((pub) => (
<CommandItem_Shadcn_
<CommandItem
key={pub.name}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -128,25 +128,25 @@ export const PublicationsComboBox = ({
<Check className="text-brand" strokeWidth={2} size={13} />
)}
</div>
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
<CommandSeparator_Shadcn_ />
<CommandSeparator />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={onNewPublicationClick}
onClick={onNewPublicationClick}
>
<Plus size={14} strokeWidth={1.5} className="mr-2" />
<p>New publication</p>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
+16 -16
View File
@@ -6,12 +6,12 @@ import { UseFormReturn } from 'react-hook-form'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
FormControl,
FormField,
FormItem,
@@ -152,15 +152,15 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
</FormControl>
</PopoverTrigger>
<PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search edge functions..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No edge function found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search edge functions..." />
<CommandList>
<CommandEmpty>No edge function found.</CommandEmpty>
<CommandGroup>
<ScrollArea className={edgeFunctions.length > 7 ? 'h-[210px]' : ''}>
{edgeFunctions.map((fn) => {
return (
<CommandItem_Shadcn_
<CommandItem
value={fn.name}
key={fn.id}
onSelect={() => {
@@ -175,13 +175,13 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
)}
/>
{fn.name}
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormMessage />
apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx
+16 -16
View File
@@ -4,12 +4,12 @@ import {
Badge,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -85,14 +85,14 @@ const OrganizationPicker = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-full" side="bottom" align="center" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search organizations..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search organizations..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{organizationsData?.map((org) => {
return (
<CommandItem_Shadcn_
<CommandItem
value={org.slug}
key={org.slug}
className="flex gap-2 items-center"
@@ -112,12 +112,12 @@ const OrganizationPicker = ({
{configurationId && installed[org.slug] && (
<Badge className="flex-none!">Integration Installed</Badge>
)}
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</>
apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx
+27 -27
View File
@@ -7,13 +7,13 @@ import {
Badge,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -262,8 +262,8 @@ const ProjectLinker = ({
renderActions={() => {
return (
projectCreationEnabled && (
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
setOpenProjectsDropdown(false)
@@ -281,8 +281,8 @@ const ProjectLinker = ({
<Plus size={14} strokeWidth={1.5} />
<p>Create a new project</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
)
)
}}
@@ -324,14 +324,14 @@ const ProjectLinker = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="center" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search for a project" />
<CommandList_Shadcn_ className="max-h-[170px]!">
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search for a project" />
<CommandList className="max-h-[170px]!">
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{foreignProjects.map((project, i) => {
return (
<CommandItem_Shadcn_
<CommandItem
key={project.id}
value={`${project.name.replaceAll('"', '')}-${i}`}
className="flex gap-2 items-center"
@@ -344,29 +344,29 @@ const ProjectLinker = ({
<span className="truncate" title={project.name}>
{project.name}
</span>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
{foreignProjects.length === 0 && (
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandEmpty>No results found.</CommandEmpty>
)}
</CommandGroup_Shadcn_>
</CommandGroup>
{mode === 'GitHub' && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandSeparator />
<CommandGroup>
<CommandItem
className="flex gap-2 items-center cursor-pointer"
onSelect={() => openInstallGitHubIntegrationWindow('install')}
>
<PlusIcon size={16} />
Add GitHub Repositories
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</Panel>
apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
+22 -22
View File
@@ -17,13 +17,13 @@ import {
AlertTitle,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CriticalIcon,
FormControl,
FormField,
@@ -159,20 +159,20 @@ export const ColumnType = ({
</Button>
</PopoverTrigger>
<PopoverContent id={listboxId} className="w-[460px] p-0" side="bottom" align="center">
<Command_Shadcn_>
<CommandInput_Shadcn_
<Command>
<CommandInput
placeholder="Search types..."
// [Joshen] Addresses style issues when this component is being used in the old Form component
// Specifically in WrapperDynamicColumns - can be cleaned up once we're no longer using that
className="bg-transparent! focus:shadow-none! focus:ring-0! text-xs"
/>
<CommandEmpty_Shadcn_>Type not found.</CommandEmpty_Shadcn_>
<CommandEmpty>Type not found.</CommandEmpty>
<CommandList_Shadcn_>
<CommandList>
<ScrollArea className="h-[240px]">
<CommandGroup_Shadcn_ heading="Postgres data types">
<CommandGroup heading="Postgres data types">
{POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => (
<CommandItem_Shadcn_
<CommandItem
key={option.name}
value={option.name}
className={cn(
@@ -196,16 +196,16 @@ export const ColumnType = ({
''
)}
</span>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
{enumTypes.length > 0 && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Other types">
<CommandSeparator />
<CommandGroup heading="Other types">
{enumTypes.map((option) => (
<CommandItem_Shadcn_
<CommandItem
key={option.id}
value={option.format}
className={cn(
@@ -246,14 +246,14 @@ export const ColumnType = ({
</span>
)}
</div>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
</>
)}
</ScrollArea>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{showRecommendation && recommendation !== undefined && (
apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+16 -16
View File
@@ -12,12 +12,12 @@ import {
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Form,
FormControl,
FormField,
@@ -136,14 +136,14 @@ const WrapperTableEditor = ({
</Button>
</PopoverTrigger>
<PopoverContent id={listboxId} className="p-0" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find a table..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No targets found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Find a table..." />
<CommandList>
<CommandEmpty>No targets found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(tables ?? []).length > 7 ? 'h-[200px]' : ''}>
{(tables ?? []).map((table, i) => (
<CommandItem_Shadcn_
<CommandItem
key={table.label}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -162,12 +162,12 @@ const WrapperTableEditor = ({
{String(i) === selectedTableIndex && (
<Check className={cn('mr-2 h-4 w-4')} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx
+6 -6
View File
@@ -10,12 +10,12 @@ import { UseFormReturn } from 'react-hook-form'
import {
Button,
cn,
Command_Shadcn_ as Command,
CommandEmpty_Shadcn_ as CommandEmpty,
CommandGroup_Shadcn_ as CommandGroup,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
FormControl,
FormField,
FormMessage,
apps/studio/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet.tsx
+16 -16
View File
@@ -5,12 +5,12 @@ import { toast } from 'sonner'
import {
Button,
Checkbox,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Input,
Popover,
PopoverContent,
@@ -206,14 +206,14 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
</Button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0" align="end">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search permissions..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No permissions found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ className="[&>div]:text-left">
<Command>
<CommandInput placeholder="Search permissions..." />
<CommandList>
<CommandEmpty>No permissions found.</CommandEmpty>
<CommandGroup className="[&>div]:text-left">
<div className="max-h-[210px] overflow-y-auto">
{PERMISSIONS.map((perm) => (
<CommandItem_Shadcn_
<CommandItem
key={perm.id}
value={`${perm.id} ${perm.label}`}
onSelect={() => toggle(perm.id)}
@@ -230,12 +230,12 @@ export function CreateAppSheet({ visible, onClose, onCreated }: CreateAppSheetPr
{perm.label}
</span>
</div>
</CommandItem_Shadcn_>
</CommandItem>
))}
</div>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/studio/components/interfaces/Organization/Usage/Usage.tsx
+5 -5
View File
@@ -5,7 +5,7 @@ import { Check, ChevronDown } from 'lucide-react'
import Link from 'next/link'
import { useQueryState } from 'nuqs'
import { useMemo, useState } from 'react'
import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui'
import { Button, cn, CommandGroup, CommandItem } from 'ui'
import { Admonition } from 'ui-patterns'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -191,8 +191,8 @@ export const Usage = () => {
)
}}
renderActions={() => (
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer flex items-center justify-between w-full"
onSelect={() => {
setOpenProjectSelector(false)
@@ -205,8 +205,8 @@ export const Usage = () => {
>
All projects
{!selectedProjectRef && <Check size={16} />}
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
)}
/>
</div>
apps/studio/components/interfaces/ProjectAPIDocs/LanguageSelector.tsx
+14 -14
View File
@@ -2,10 +2,10 @@ import { ChevronDown, Terminal } from 'lucide-react'
import { useState } from 'react'
import {
Button,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -58,26 +58,26 @@ const LanguageSelector = ({ simplifiedVersion = false }: LanguageSelectorProps)
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-24" side="bottom" align="end">
<Command_Shadcn_>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<Command>
<CommandList>
<CommandGroup>
<CommandItem
className="cursor-pointer"
onSelect={() => updateLanguage('js')}
onClick={() => updateLanguage('js')}
>
<p>Javascript</p>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_
</CommandItem>
<CommandItem
className="cursor-pointer"
onSelect={() => updateLanguage('bash')}
onClick={() => updateLanguage('bash')}
>
<p>Bash</p>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.ResourcePicker.tsx
+11 -17
View File
@@ -1,10 +1,4 @@
import {
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
} from 'ui'
import { cn, Command, CommandGroup, CommandItem, CommandList } from 'ui'
import type { ResourcePickerRenderProps } from './SecondLevelNav.Layout'
@@ -28,18 +22,18 @@ export const ResourcePickerList = ({
}
return (
<Command_Shadcn_>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandList>
<CommandGroup>
{items.length === 0 && (
<CommandItem_Shadcn_ disabled className="cursor-default px-4">
<CommandItem disabled className="cursor-default px-4">
<p className="text-foreground-light">{emptyMessage}</p>
</CommandItem_Shadcn_>
</CommandItem>
)}
{items.map((item) => {
const isActive = item.name === selectedResource
return (
<CommandItem_Shadcn_
<CommandItem
key={item.name}
className={cn(
'cursor-pointer px-4',
@@ -48,11 +42,11 @@ export const ResourcePickerList = ({
onSelect={() => handleSelect(item.name)}
>
<p className="truncate">{item.name}</p>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
)
}
apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx
+12 -23
View File
@@ -1,15 +1,7 @@
import { keepPreviousData } from '@tanstack/react-query'
import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks'
import { useEffect, useMemo, useRef, useState } from 'react'
import {
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
} from 'ui'
import { cn, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from 'ui'
import type { ResourcePickerRenderProps } from './SecondLevelNav.Layout'
import { usePaginatedBucketsQuery } from '@/data/storage/buckets-query'
@@ -101,22 +93,19 @@ export const StorageResourceList = ({
rawQuery.length > 0 ? 'No buckets found for this search' : 'No buckets available'
return (
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
showResetIcon
value={rawQuery}
onValueChange={setSearch}
placeholder="Search buckets..."
handleReset={() => setSearch('')}
/>
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_
hidden={!showEmptyState}
className="py-3 text-sm text-foreground-light"
>
<CommandList>
<CommandEmpty hidden={!showEmptyState} className="py-3 text-sm text-foreground-light">
{emptyMessage}
</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
</CommandEmpty>
<CommandGroup>
{isFetching && buckets.length === 0 ? (
<div className="px-4 py-3 text-sm text-foreground-light">Loading buckets...</div>
) : (
@@ -124,7 +113,7 @@ export const StorageResourceList = ({
{buckets.map((bucket) => {
const isActive = bucket.name === selectedResource
return (
<CommandItem_Shadcn_
<CommandItem
key={bucket.id}
value={bucket.name}
className={cn(
@@ -134,17 +123,17 @@ export const StorageResourceList = ({
onSelect={() => handleSelect(bucket.name)}
>
<p className="truncate">{bucket.name}</p>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
{hasNextPage && <div ref={sentinelRef} className="h-2 w-full" />}
</div>
)}
</CommandGroup_Shadcn_>
</CommandGroup>
{isFetchingNextPage && (
<div className="px-4 py-2 text-sm text-foreground-light">Loading more buckets...</div>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
)
}
apps/studio/components/interfaces/ProjectHome/SnippetDropdown.tsx
+18 -18
View File
@@ -3,11 +3,11 @@ import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks'
import { Plus } from 'lucide-react'
import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
import {
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
@@ -91,8 +91,8 @@ export const SnippetDropdown = ({
align={align}
className={['w-80 p-0', className].filter(Boolean).join(' ')}
>
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
showResetIcon
autoFocus={autoFocus}
placeholder="Search snippets..."
@@ -100,22 +100,22 @@ export const SnippetDropdown = ({
onValueChange={setSearch}
handleReset={() => setSearch('')}
/>
<CommandList_Shadcn_ ref={scrollRootRef}>
<CommandList ref={scrollRootRef}>
{isLoading ? (
<p className="text-xs text-center text-foreground-lighter py-3">Loading...</p>
) : search.length > 0 && snippets.length === 0 ? (
<p className="text-xs text-center text-foreground-lighter py-3">No snippets found</p>
) : (
<CommandGroup_Shadcn_>
<CommandGroup>
<ScrollArea className={snippets.length > 7 ? 'h-[210px]' : ''}>
{snippets.map((snippet) => (
<CommandItem_Shadcn_
<CommandItem
key={snippet.id}
value={snippet.id}
onSelect={() => onSelect({ id: snippet.id, name: snippet.name })}
>
{snippet.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
<div ref={sentinelRef} className="h-1 -mt-1" />
{hasNextPage && (
@@ -124,13 +124,13 @@ export const SnippetDropdown = ({
</div>
)}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
)}
<div className="h-px bg-border-overlay -mx-1" />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
setOpen(false)
@@ -142,10 +142,10 @@ export const SnippetDropdown = ({
<Plus size={14} strokeWidth={1.5} />
<p>Create snippet</p>
</div>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</DropdownMenuContent>
</DropdownMenu>
)
apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
+18 -23
View File
@@ -6,12 +6,12 @@ import {
AlertDescription,
AlertTitle,
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -101,12 +101,9 @@ const TableSelector = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-64" side="bottom" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_
placeholder="Find table..."
onValueChange={(str) => searchTables(str)}
/>
<CommandList_Shadcn_>
<Command>
<CommandInput placeholder="Find table..." onValueChange={(str) => searchTables(str)} />
<CommandList>
{isLoading && (
<div className="flex items-center justify-center space-x-2 px-3 py-2">
<Loader className="animate-spin" size={12} />
@@ -128,13 +125,11 @@ const TableSelector = ({
{isSuccess && (
<>
<CommandGroup_Shadcn_ forceMount>
<CommandGroup forceMount>
<ScrollArea className={(entities || []).length > 7 ? 'h-[210px]' : ''}>
{entities.length === 0 && (
<CommandEmpty_Shadcn_>No tables found</CommandEmpty_Shadcn_>
)}
{entities.length === 0 && <CommandEmpty>No tables found</CommandEmpty>}
{!searchInput && (
<CommandItem_Shadcn_
<CommandItem
key="all-tables"
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -150,10 +145,10 @@ const TableSelector = ({
{selectedSchemaName === '*' && (
<Check className="text-brand" strokeWidth={2} />
)}
</CommandItem_Shadcn_>
</CommandItem>
)}
{entities?.map((table) => (
<CommandItem_Shadcn_
<CommandItem
key={table.id}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -169,14 +164,14 @@ const TableSelector = ({
{selectedSchemaName === table.name && (
<Check className="text-brand" strokeWidth={2} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/studio/components/interfaces/Reports/MetricOptions.tsx
+18 -18
View File
@@ -3,11 +3,11 @@ import { useParams } from 'common'
import { Home, Plus } from 'lucide-react'
import { useState } from 'react'
import {
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
DropdownMenuCheckboxItem,
DropdownMenuPortal,
DropdownMenuSub,
@@ -118,14 +118,14 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="p-0">
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
autoFocus
placeholder="Search snippets..."
value={search}
onValueChange={setSearch}
/>
<CommandList_Shadcn_>
<CommandList>
{isLoading ? (
<div className="flex flex-col p-1 gap-y-1">
<ShimmeringLoader />
@@ -136,9 +136,9 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
No snippets found
</p>
) : null}
<CommandGroup_Shadcn_>
<CommandGroup>
{snippets?.map((snippet) => (
<CommandItem_Shadcn_
<CommandItem
key={snippet.id}
value={snippet.id}
className="cursor-pointer"
@@ -163,15 +163,15 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
}}
>
{snippet.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandGroup>
</CommandList>
<div className="h-px bg-border-overlay -mx-1" />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
editorPanelState.openAsNew()
@@ -182,9 +182,9 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro
<Plus size={14} strokeWidth={1.5} />
<p>Create snippet</p>
</div>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</Command>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
+17 -17
View File
@@ -4,12 +4,12 @@ import { KeyboardEvent, useCallback, useEffect, useMemo, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Input,
Popover,
PopoverContent,
@@ -79,8 +79,8 @@ const FilterableInput = ({
return (
<div className="relative flex-1">
<Command_Shadcn_ className="relative overflow-visible bg-transparent">
<CommandInput_Shadcn_
<Command className="relative overflow-visible bg-transparent">
<CommandInput
placeholder={placeholder}
value={inputValue}
onValueChange={handleInputChange}
@@ -96,25 +96,25 @@ const FilterableInput = ({
isOpen && safeOptions.length > 0 && 'opacity-100 pointer-events-auto'
)}
>
<CommandList_Shadcn_ className="max-h-60 overflow-auto bg-surface-100 border border-border rounded-md shadow-lg">
<CommandEmpty_Shadcn_ className="py-2 px-3 text-sm text-foreground-lighter">
<CommandList className="max-h-60 overflow-auto bg-surface-100 border border-border rounded-md shadow-lg">
<CommandEmpty className="py-2 px-3 text-sm text-foreground-lighter">
No matching options found. Press Enter to use "{inputValue}"
</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
</CommandEmpty>
<CommandGroup>
{safeOptions.map((option, index) => (
<CommandItem_Shadcn_
<CommandItem
key={`${option}-${index}`}
value={option}
onSelect={() => handleOptionSelect(option)}
className="px-3 py-2 text-sm cursor-pointer"
>
{option}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandGroup>
</CommandList>
</div>
</Command_Shadcn_>
</Command>
{isOpen && <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />}
</div>
)
apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
+3 -11
View File
@@ -4,15 +4,7 @@ import { Label } from '@ui/components/shadcn/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
import { ChevronDown } from 'lucide-react'
import { useEffect, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_ as Command,
CommandEmpty_Shadcn_ as CommandEmpty,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_,
CommandList_Shadcn_ as CommandList,
} from 'ui'
import { Button, cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from 'ui'
import { z } from 'zod'
export interface ReportSelectOption {
@@ -95,7 +87,7 @@ export const ReportsSelectFilter = ({
<CommandEmpty>No options found.</CommandEmpty>
<CommandGroup>
{options.map((option) => (
<CommandItem_Shadcn_ key={option.value}>
<CommandItem key={option.value}>
<Label
key={option.value}
className={
@@ -121,7 +113,7 @@ export const ReportsSelectFilter = ({
)}
</div>
</Label>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup>
</CommandList>
apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
+24 -24
View File
@@ -7,13 +7,13 @@ import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Dialog,
DialogContent,
DialogDescription,
@@ -252,13 +252,13 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find folder..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No folders found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Find folder..." />
<CommandList>
<CommandEmpty>No folders found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(folders || []).length > 6 ? 'h-[210px]' : ''}>
<CommandItem_Shadcn_
<CommandItem
key="root"
value="root"
className="cursor-pointer w-full justify-between"
@@ -278,9 +278,9 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
` (Current)`}
</span>
{selectedId === 'root' && <Check size={14} />}
</CommandItem_Shadcn_>
</CommandItem>
{folders?.map((folder) => (
<CommandItem_Shadcn_
<CommandItem
key={folder.id}
value={folder.name}
className="cursor-pointer w-full justify-between"
@@ -300,13 +300,13 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
` (Current)`}
</span>
{folder.id === selectedId && <Check size={14} />}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer w-full justify-start gap-x-2"
onSelect={(_e) => {
setOpen(false)
@@ -319,10 +319,10 @@ export const MoveQueryModal = ({ visible, snippets = [], onClose }: MoveQueryMod
>
<Plus size={14} strokeWidth={1.5} />
<p>New folder</p>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
apps/studio/components/interfaces/Settings/API/ExposedFunctionSelector.tsx
+14 -14
View File
@@ -5,11 +5,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -126,15 +126,15 @@ export const ExposedFunctionSelector = ({
align="start"
sameWidthAsTrigger
>
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
className="text-xs"
placeholder="Find function..."
value={search}
onValueChange={setSearch}
/>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<CommandList>
<CommandGroup>
{isPending ? (
<>
<div className="px-2 py-1">
@@ -179,7 +179,7 @@ export const ExposedFunctionSelector = ({
})
return (
<CommandItem_Shadcn_
<CommandItem
key={key}
value={key}
className={cn(
@@ -266,7 +266,7 @@ export const ExposedFunctionSelector = ({
)}
</div>
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
<div ref={sentinelRef} className="h-1 -mt-1" />
@@ -278,9 +278,9 @@ export const ExposedFunctionSelector = ({
</ScrollArea>
</>
)}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
+17 -17
View File
@@ -3,12 +3,12 @@ import { useMemo, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -85,10 +85,10 @@ export const ExposedSchemaSelector = ({
align="start"
sameWidthAsTrigger
>
<Command_Shadcn_>
<CommandInput_Shadcn_ className="text-xs" placeholder="Find schema..." />
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput className="text-xs" placeholder="Find schema..." />
<CommandList>
<CommandGroup>
{isPending ? (
<>
<div className="px-2 py-1">
@@ -104,17 +104,17 @@ export const ExposedSchemaSelector = ({
</div>
) : (
<>
<CommandEmpty_Shadcn_>
<CommandEmpty>
<p className="text-xs text-center text-foreground-lighter py-3">
No schemas found
</p>
</CommandEmpty_Shadcn_>
</CommandEmpty>
<ScrollArea className={schemas.length > 7 ? 'h-[210px]' : ''}>
{schemas.map((schema) => {
const isExposed = selectedSet.has(schema.name)
return (
<CommandItem_Shadcn_
<CommandItem
key={schema.id}
value={schema.name}
className="cursor-pointer w-full"
@@ -128,15 +128,15 @@ export const ExposedSchemaSelector = ({
{isExposed && <Check size={16} className="text-brand shrink-0" />}
<span className="truncate">{schema.name}</span>
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</ScrollArea>
</>
)}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
+14 -14
View File
@@ -5,11 +5,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -120,15 +120,15 @@ export const ExposedTableSelector = ({
align="start"
sameWidthAsTrigger
>
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
className="text-xs"
placeholder="Find table..."
value={search}
onValueChange={setSearch}
/>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<CommandList>
<CommandGroup>
{isPending ? (
<>
<div className="px-2 py-1">
@@ -173,7 +173,7 @@ export const ExposedTableSelector = ({
})
return (
<CommandItem_Shadcn_
<CommandItem
key={table.id}
value={`${table.schema}.${table.name}-${table.id}`}
className={cn(
@@ -260,7 +260,7 @@ export const ExposedTableSelector = ({
)}
</div>
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
<div ref={sentinelRef} className="h-1 -mt-1" />
@@ -272,9 +272,9 @@ export const ExposedTableSelector = ({
</ScrollArea>
</>
)}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx
+26 -26
View File
@@ -3,13 +3,13 @@ import { useMemo, useState, type ComponentProps, type ReactNode } from 'react'
import type { FieldValues, Path, UseFormReturn } from 'react-hook-form'
import {
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
FormControl,
FormField,
Popover,
@@ -174,14 +174,14 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
</FormControl>
</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search repositories..." />
<CommandList_Shadcn_ className="!max-h-[220px]">
<CommandEmpty_Shadcn_>No repositories found.</CommandEmpty_Shadcn_>
<Command>
<CommandInput placeholder="Search repositories..." />
<CommandList className="!max-h-[220px]">
<CommandEmpty>No repositories found.</CommandEmpty>
{repositories.length > 0 ? (
<CommandGroup_Shadcn_>
<CommandGroup>
{repositories.map((repo) => (
<CommandItem_Shadcn_
<CommandItem
key={repo.id}
value={`${repo.name.replaceAll('"', '')}-${repo.id}`}
className="flex gap-2 items-center"
@@ -208,12 +208,12 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
<span className="truncate" title={repo.name}>
{repo.name}
</span>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
) : null}
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="flex gap-2 items-center cursor-pointer"
onSelect={() => {
setIsRepoSelectorOpen(false)
@@ -222,13 +222,13 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
>
<PlusIcon size={16} />
Add GitHub Repositories
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
{hasPartialResponseDueToSSO && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandSeparator />
<CommandGroup>
<CommandItem
className="flex gap-2 items-start cursor-pointer"
onSelect={() => {
setIsRepoSelectorOpen(false)
@@ -239,12 +239,12 @@ export const GitHubRepositoryField = <TFormValues extends FieldValues>({
<div className="text-xs text-foreground-light">
Re-authorize GitHub with SSO to show all repositories
</div>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+16 -16
View File
@@ -7,12 +7,12 @@ import {
Badge,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
copyToClipboard,
DropdownMenu,
DropdownMenuContent,
@@ -280,13 +280,13 @@ const LogsQueryPanel = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search source..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No source found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search source..." />
<CommandList>
<CommandEmpty>No source found.</CommandEmpty>
<CommandGroup>
{logConstants.schemas.map((schema) => (
<CommandItem_Shadcn_
<CommandItem
key={schema.reference}
value={schema.reference}
onSelect={() => {
@@ -301,11 +301,11 @@ const LogsQueryPanel = ({
)}
/>
{schema.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Table
apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
+14 -14
View File
@@ -8,10 +8,10 @@ import { useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -228,26 +228,26 @@ const result = await index.putVectors({
</div>
</PopoverTrigger>
<PopoverContent className="p-0 w-32" side="bottom" align="end">
<Command_Shadcn_>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<Command>
<CommandList>
<CommandGroup>
<CommandItem
className="cursor-pointer"
onSelect={() => onLanguageChange('sql')}
onClick={() => onLanguageChange('sql')}
>
<p>SQL</p>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_
</CommandItem>
<CommandItem
className="cursor-pointer"
onSelect={() => onLanguageChange('javascript')}
onClick={() => onLanguageChange('javascript')}
>
<p>JavaScript</p>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ import { Check, ChevronsUpDown, ExternalLink } from 'lucide-react'
import Link from 'next/link'
import type { UseFormReturn } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, FormControl, FormField } from 'ui'
import { Button, cn, CommandGroup, CommandItem, FormControl, FormField } from 'ui'
import { Admonition } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
@@ -99,8 +99,8 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
)
}}
renderActions={(setOpen) => (
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="w-full gap-x-2"
onSelect={() => {
field.onChange(NO_PROJECT_MARKER)
@@ -111,8 +111,8 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
<p className={cn(field.value !== NO_PROJECT_MARKER && 'ml-6')}>
No specific project
</p>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
)}
/>
</FormControl>
apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+22 -22
View File
@@ -17,13 +17,13 @@ import {
AlertTitle,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CriticalIcon,
Input,
InputGroup,
@@ -209,22 +209,22 @@ const ColumnType = ({
</Button>
</PopoverTrigger>
<PopoverContent id={listboxId} className="w-[460px] p-0" side="bottom" align="center">
<Command_Shadcn_>
<CommandInput_Shadcn_
<Command>
<CommandInput
placeholder="Search types..."
// [Joshen] Addresses style issues when this component is being used in the old Form component
// Specifically in WrapperDynamicColumns - can be cleaned up once we're no longer using that
className="bg-transparent! focus:shadow-none! focus:ring-0! text-xs"
/>
<CommandEmpty_Shadcn_>Type not found.</CommandEmpty_Shadcn_>
<CommandEmpty>Type not found.</CommandEmpty>
<CommandList_Shadcn_>
<CommandList>
<ScrollArea className="h-[240px]">
<CommandGroup_Shadcn_ heading="Postgres data types">
<CommandGroup heading="Postgres data types">
{POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => {
const isSelected = matchesBuiltin(option.name, value)
return (
<CommandItem_Shadcn_
<CommandItem
key={option.name}
value={option.name}
className={cn('relative', isSelected ? 'bg-surface-200' : '')}
@@ -241,19 +241,19 @@ const ColumnType = ({
<span className="absolute right-3 top-2">
{isSelected ? <Check className="text-brand" size={14} /> : ''}
</span>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
</CommandGroup>
{enumTypes.length > 0 && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Other types">
<CommandSeparator />
<CommandGroup heading="Other types">
{enumTypes.map((option) => {
const isSelected = matchesEnum(option, value)
return (
<CommandItem_Shadcn_
<CommandItem
key={option.id}
value={option.format}
className={cn('relative', isSelected ? 'bg-surface-200' : '')}
@@ -287,15 +287,15 @@ const ColumnType = ({
</span>
)}
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
</CommandGroup>
</>
)}
</ScrollArea>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+18 -18
View File
@@ -7,11 +7,11 @@ import {
Button,
Checkbox,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandGroup,
CommandItem,
CommandList,
CommandSeparator,
Input,
Popover,
PopoverContent,
@@ -167,16 +167,16 @@ export const Column = ({
<div className="text-xs px-2 pt-2">
Involved in {relations.length} foreign key{relations.length > 1 ? 's' : ''}
</div>
<Command_Shadcn_>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandList>
<CommandGroup>
{relations.map((relation, idx) => {
const key = String(relation?.id ?? `${column.id}-relation-${idx}`)
const status = getRelationStatus(relation)
if (status === 'REMOVE') return null
return (
<CommandItem_Shadcn_
<CommandItem
key={key}
value={key}
className="cursor-pointer w-full"
@@ -216,23 +216,23 @@ export const Column = ({
</p>
</div>
)}
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer w-full gap-x-2"
onSelect={() => onEditForeignKey()}
onClick={() => onEditForeignKey()}
>
<Plus size={14} strokeWidth={1.5} />
<p>Add foreign key relation</p>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
+18 -18
View File
@@ -2,12 +2,12 @@ import { CheckIcon } from 'lucide-react'
import { useMemo, useState } from 'react'
import {
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
@@ -59,13 +59,13 @@ export const TimezoneDropdown = () => {
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="p-0 w-[320px]" sideOffset={4}>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No timezones found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search timezone..." className="h-9" />
<CommandList>
<CommandEmpty>No timezones found</CommandEmpty>
<CommandGroup>
<ScrollArea className="h-72">
<CommandItem_Shadcn_
<CommandItem
key={AUTO_OPTION_VALUE}
value={`Auto detect ${browserTimezone}`}
onSelect={() => handleSelect('')}
@@ -80,12 +80,12 @@ export const TimezoneDropdown = () => {
isAutoDetected ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
{TIMEZONES_BY_IANA.map((entry) => {
const ianaName = entry.utc[0]
const isSelected = !isAutoDetected && storedTimezone === ianaName
return (
<CommandItem_Shadcn_
<CommandItem
key={ianaName}
// CommandItem matches against the `value` prop for the input filter — include
// both the human label and the IANA name so search works for either.
@@ -99,13 +99,13 @@ export const TimezoneDropdown = () => {
isSelected ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
+35 -35
View File
@@ -3,13 +3,13 @@ import Link from 'next/link'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
ScrollArea,
} from 'ui'
@@ -46,7 +46,7 @@ export function BranchDropdownCommandContent({
if (embedded) {
return (
<Command_Shadcn_ className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
<Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
<div className="grid grid-cols-2 gap-2 shrink-0 p-2 border-b">
<Button
type="text"
@@ -96,11 +96,11 @@ export function BranchDropdownCommandContent({
</Button>
</div>
{isBranchingEnabled && (
<CommandInput_Shadcn_ placeholder="Find branch..." wrapperClassName="shrink-0 border-b" />
<CommandInput placeholder="Find branch..." wrapperClassName="shrink-0 border-b" />
)}
<CommandList_Shadcn_ className="flex flex-col flex-1 p-1 min-h-0 overflow-y-auto max-h-none!">
{isBranchingEnabled && <CommandEmpty_Shadcn_>No branches found</CommandEmpty_Shadcn_>}
<CommandGroup_Shadcn_ className="min-h-0">
<CommandList className="flex flex-col flex-1 p-1 min-h-0 overflow-y-auto max-h-none!">
{isBranchingEnabled && <CommandEmpty>No branches found</CommandEmpty>}
<CommandGroup className="min-h-0">
{branchList.map((branch) => (
<BranchLink
key={branch.id}
@@ -109,18 +109,18 @@ export function BranchDropdownCommandContent({
onClose={onClose}
/>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
)
}
return (
<Command_Shadcn_ className={className}>
{isBranchingEnabled && <CommandInput_Shadcn_ placeholder="Find branch..." />}
<CommandList_Shadcn_>
{isBranchingEnabled && <CommandEmpty_Shadcn_>No branches found</CommandEmpty_Shadcn_>}
<CommandGroup_Shadcn_>
<Command className={className}>
{isBranchingEnabled && <CommandInput placeholder="Find branch..." />}
<CommandList>
{isBranchingEnabled && <CommandEmpty>No branches found</CommandEmpty>}
<CommandGroup>
<ScrollArea className="max-h-[210px] overflow-y-auto">
{branchList.map((branch) => (
<BranchLink
@@ -131,12 +131,12 @@ export function BranchDropdownCommandContent({
/>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
<CommandSeparator_Shadcn_ />
<CommandSeparator />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
track('branch_selector_create_clicked')
@@ -148,8 +148,8 @@ export function BranchDropdownCommandContent({
<Plus size={14} strokeWidth={1.5} />
<p>Create branch</p>
</div>
</CommandItem_Shadcn_>
<CommandItem_Shadcn_
</CommandItem>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
track('branch_selector_manage_clicked')
@@ -163,13 +163,13 @@ export function BranchDropdownCommandContent({
<ListTree size={14} strokeWidth={1.5} />
<p>Manage branches</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
<CommandSeparator_Shadcn_ />
<CommandSeparator />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
onClose()
@@ -190,9 +190,9 @@ export function BranchDropdownCommandContent({
<p className="text-lighter">Join GitHub Discussion</p>
</div>
</a>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
)
}
apps/studio/components/layouts/AppLayout/BranchLink.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { Check, Shield } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { CommandItem_Shadcn_ } from 'ui'
import { CommandItem } from 'ui'
import { sanitizeRoute } from './ProjectDropdown.utils'
import type { Branch } from '@/data/branches/branches-query'
@@ -22,7 +22,7 @@ export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
return (
<Link passHref href={href}>
<CommandItem_Shadcn_
<CommandItem
value={branch.name.replaceAll('"', '')}
className="cursor-pointer w-full flex items-center justify-between text-sm md:text-xs p-2 md:py-1.5 md:px-2"
onSelect={() => {
@@ -38,7 +38,7 @@ export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
{branch.name}
</p>
{isSelected && <Check size={14} strokeWidth={1.5} />}
</CommandItem_Shadcn_>
</CommandItem>
</Link>
)
}
apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { Check } from 'lucide-react'
import Link from 'next/link'
import { cn, CommandItem_Shadcn_ } from 'ui'
import { cn, CommandItem } from 'ui'
import PartnerIcon from '@/components/ui/PartnerIcon'
import type { Organization } from '@/types'
@@ -25,7 +25,7 @@ export function OrgCommandItem({
const href = hasRouteSlug ? routePathname.replace('[slug]', org.slug) : `/org/${org.slug}`
return (
<CommandItem_Shadcn_
<CommandItem
key={org.slug}
value={`${org.name.replaceAll('"', '')} - ${org.slug}`}
className="cursor-pointer w-full"
@@ -44,6 +44,6 @@ export function OrgCommandItem({
</div>
{org.slug === selectedSlug && <Check size={16} />}
</Link>
</CommandItem_Shadcn_>
</CommandItem>
)
}
apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
+32 -32
View File
@@ -3,13 +3,13 @@ import Link from 'next/link'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
ScrollArea,
} from 'ui'
@@ -55,7 +55,7 @@ export function OrganizationDropdownCommandContent({
if (embedded) {
return (
<Command_Shadcn_ className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
<Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
<div className="flex items-center gap-2 shrink-0 border-b p-2">
<Button type="text" block size="small" asChild>
<Link
@@ -84,51 +84,51 @@ export function OrganizationDropdownCommandContent({
</Button>
)}
</div>
<CommandInput_Shadcn_
<CommandInput
placeholder="Find organization..."
wrapperClassName="shrink-0"
className="text-base sm:text-sm"
/>
<CommandList_Shadcn_ className="flex flex-col flex-1 min-h-0 overflow-y-auto p-1 max-h-none!">
<CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ className="min-h-0">{orgList}</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
<CommandList className="flex flex-col flex-1 min-h-0 overflow-y-auto p-1 max-h-none!">
<CommandEmpty>No organizations found</CommandEmpty>
<CommandGroup className="min-h-0">{orgList}</CommandGroup>
</CommandList>
</Command>
)
}
return (
<Command_Shadcn_ className={className}>
<CommandInput_Shadcn_ placeholder="Find organization..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command className={className}>
<CommandInput placeholder="Find organization..." />
<CommandList>
<CommandEmpty>No organizations found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(organizations || []).length > 7 ? 'md:h-[210px]' : ''}>
{orgList}
</ScrollArea>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_ className="cursor-pointer w-full" onSelect={() => onClose()}>
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem className="cursor-pointer w-full" onSelect={() => onClose()}>
<Link href="/organizations" className="flex items-center gap-2 w-full">
All Organizations
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
{organizationCreationEnabled && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_ className="cursor-pointer w-full" onSelect={() => onClose()}>
<CommandSeparator />
<CommandGroup>
<CommandItem className="cursor-pointer w-full" onSelect={() => onClose()}>
<Link href="/new" className="flex items-center gap-2 w-full">
<Plus size={14} strokeWidth={1.5} />
<p>New organization</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
)
}
apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+5 -5
View File
@@ -4,7 +4,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import type { ComponentProps } from 'react'
import { useState } from 'react'
import { Button, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui'
import { Button, CommandGroup, CommandItem } from 'ui'
import { ShimmeringLoader } from 'ui-patterns'
import { AppLayoutDropdownTriggerButton } from './AppLayoutDropdown'
@@ -55,8 +55,8 @@ function ProjectDropdownNewProjectActions({
}
return (
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
onClose()
@@ -68,8 +68,8 @@ function ProjectDropdownNewProjectActions({
<Plus size={14} strokeWidth={1.5} />
<p>New project</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
)
}
apps/studio/components/layouts/Navigation/NavigationBar/OrgSelector.tsx
+25 -25
View File
@@ -4,13 +4,13 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
import {
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -107,11 +107,11 @@ export function OrgSelector() {
<Popover open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find organization..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Find organization..." />
<CommandList>
<CommandEmpty>No organizations found</CommandEmpty>
<CommandGroup>
<ScrollArea
className={(organizations || []).length > 7 ? 'h-full md:h-[210px]' : ''}
>
@@ -126,10 +126,10 @@ export function OrgSelector() {
/>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
setOpen(false)
@@ -140,13 +140,13 @@ export function OrgSelector() {
<Link href="/organizations" className="flex items-center gap-2 w-full">
<p>All Organizations</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
{organizationCreationEnabled && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
setOpen(false)
@@ -158,12 +158,12 @@ export function OrgSelector() {
<Plus size={14} strokeWidth={1.5} />
<p>New organization</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</SidebarMenuItem>
apps/studio/components/layouts/ProjectLayout/index.test.tsx
+5 -5
View File
@@ -96,11 +96,11 @@ vi.mock('ui', () => ({
Alert: ({ children, ...props }: any) => <div {...props}>{children}</div>,
AlertDescription: ({ children, ...props }: any) => <div {...props}>{children}</div>,
AlertTitle: ({ children, ...props }: any) => <div {...props}>{children}</div>,
CommandInput_Shadcn_: { displayName: 'CommandInput' },
Command_Shadcn_: { displayName: 'Command' },
CommandGroup_Shadcn_: { displayName: 'CommandGroup' },
CommandItem_Shadcn_: { displayName: 'CommandItem' },
CommandList_Shadcn_: { displayName: 'CommandList' },
CommandInput: { displayName: 'CommandInput' },
Command: { displayName: 'Command' },
CommandGroup: { displayName: 'CommandGroup' },
CommandItem: { displayName: 'CommandItem' },
CommandList: { displayName: 'CommandList' },
LogoLoader: () => <div data-testid="logo-loader" />,
ResizableHandle: (props: any) => <div {...props} />,
ResizablePanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
+24 -30
View File
@@ -4,13 +4,7 @@ import { useParams } from 'common'
import { AlertTriangle, Code, Loader2, Table2 } from 'lucide-react'
import { useRouter } from 'next/navigation'
import { useEffect, useMemo, useRef } from 'react'
import {
cn,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
} from 'ui'
import { cn, CommandEmpty, CommandGroup, CommandItem, CommandList } from 'ui'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import type { CommandOptions } from 'ui-patterns/CommandMenu'
import {
@@ -166,17 +160,17 @@ function EmptyState({
return (
<div className="p-6">
<p className="mb-2 text-center">No snippets found.</p>
<CommandList_Shadcn_ className="py-2">
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandList className="py-2">
<CommandGroup>
<CommandItem
id="create-snippet"
className={generateCommandClassNames(false)}
onSelect={() => router.push(`/project/${projectRef ?? '_'}/sql/new`)}
>
{canCreateNew ? 'Create new snippet' : 'Run new SQL'}
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</div>
)
}
@@ -198,16 +192,16 @@ function SnippetSelector({
return (
<div className="w-full grow min-h-0 grid gap-4 md:grid-cols-2">
<CommandList_Shadcn_
<CommandList
className={cn(
'h-full! min-h-0 max-h-[unset] py-2 overflow-hidden',
'*:[[cmdk-list-sizer]]:h-full *:[[cmdk-list-sizer]]:flex *:[[cmdk-list-sizer]]:flex-col'
)}
>
{!!snippets && snippets.length > 0 && (
<CommandGroup_Shadcn_ className="grow min-h-0 overflow-auto">
<CommandGroup className="grow min-h-0 overflow-auto">
{snippets.map((snippet) => (
<CommandItem_Shadcn_
<CommandItem
key={snippet.id}
id={`${snippet.id}-${snippet.name}`}
className={generateCommandClassNames(false)}
@@ -215,26 +209,26 @@ function SnippetSelector({
onSelect={() => void router.push(`/project/${projectRef ?? '_'}/sql/${snippet.id}`)}
>
{snippet.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
)}
{canCreateNew && (
<div className="min-h-fit grow-0">
<hr className="mt-4 mb-2 mx-2" />
<CommandGroup_Shadcn_ forceMount={true}>
<CommandItem_Shadcn_
<CommandGroup forceMount={true}>
<CommandItem
id="create-snippet"
className={generateCommandClassNames(false)}
onSelect={() => router.push(`/project/${projectRef ?? '_'}/sql/new`)}
forceMount={true}
>
Create new snippet
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
</div>
)}
</CommandList_Shadcn_>
</CommandList>
<CodeBlock
language="sql"
value={isSQLSnippet ? selectedSnippet?.content?.unchecked_sql : ''}
@@ -321,15 +315,15 @@ function TableSelector() {
<Breadcrumb />
<CommandMenuInput autoFocus />
</CommandHeader>
<CommandList_Shadcn_>
<CommandList>
{isLoading && <LoadingState />}
{isError && <ErrorState />}
{isSuccess && (
<>
<CommandEmpty_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandEmpty />
<CommandGroup>
{tables?.map((table) => (
<CommandItem_Shadcn_
<CommandItem
key={table.id}
className={generateCommandClassNames(false)}
value={escapeAttributeSelector(`${table.schema}.${table.name}`)}
@@ -340,12 +334,12 @@ function TableSelector() {
}}
>
{`${table.schema}.${table.name}`}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</CommandList>
</CommandWrapper>
)
}
apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
+22 -22
View File
@@ -3,13 +3,13 @@ import { useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Input,
Popover,
PopoverContent,
@@ -97,15 +97,15 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
</Button>
</PopoverTrigger>
<PopoverContent className="w-[250px] p-0" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ className="text-xs" placeholder="Search chats..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No chats found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput className="text-xs" placeholder="Search chats..." />
<CommandList>
<CommandEmpty>No chats found.</CommandEmpty>
<CommandGroup>
<ScrollArea className={chats.length > 4 ? 'h-40' : ''}>
{/* @ts-ignore */}
{chats.map(([id, chat]) => (
<CommandItem_Shadcn_
<CommandItem
key={id}
value={id}
onSelect={() => handleSelectChat(id)}
@@ -185,13 +185,13 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
)}
</div>
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer w-full gap-x-2"
onSelect={() => {
snap.newChat()
@@ -205,10 +205,10 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
>
<Plus size={14} strokeWidth={1.5} />
<span>Start a new chat</span>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/ui/AIAssistantPanel/ModelSelector.tsx
+12 -12
View File
@@ -4,10 +4,10 @@ import { useState } from 'react'
import {
Badge,
Button,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -64,11 +64,11 @@ export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorPro
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-44" align="start" side="top">
<Command_Shadcn_>
<CommandList_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandList>
<CommandGroup>
{ASSISTANT_MODELS.map((m) => (
<CommandItem_Shadcn_
<CommandItem
key={m.id}
value={m.id}
disabled={isLoadingEntitlements && isAdvanceOnlyModelId(m.id)}
@@ -94,11 +94,11 @@ export const ModelSelector = ({ selectedModel, onSelectModel }: ModelSelectorPro
) : (
selectedModel === m.id && <Check className="h-3.5 w-3.5" />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
+6 -6
View File
@@ -2,12 +2,12 @@ import { GripVertical, Settings2 } from 'lucide-react'
import { useId, useMemo, useState } from 'react'
import {
Checkbox,
Command_Shadcn_ as Command,
CommandEmpty_Shadcn_ as CommandEmpty,
CommandGroup_Shadcn_ as CommandGroup,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
apps/studio/components/ui/DatabaseSelector.tsx
+20 -20
View File
@@ -9,10 +9,10 @@ import {
Button,
ButtonProps,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -123,12 +123,12 @@ export const DatabaseSelector = ({
</div>
</PopoverTrigger>
<PopoverContent className="p-0 w-64" side="bottom" align={align}>
<Command_Shadcn_>
<CommandList_Shadcn_>
<Command>
<CommandList>
{additionalOptions.length > 0 && (
<CommandGroup_Shadcn_ className="border-b">
<CommandGroup className="border-b">
{additionalOptions.map((option) => (
<CommandItem_Shadcn_
<CommandItem
key={option.id}
value={option.id}
className="cursor-pointer w-full"
@@ -147,11 +147,11 @@ export const DatabaseSelector = ({
<p>{option.name}</p>
{option.id === selectedDatabaseId && <Check size={14} />}
</div>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandGroup>
)}
<CommandGroup_Shadcn_>
<CommandGroup>
<ScrollArea className={(databases || []).length > 7 ? 'h-[210px]' : ''}>
{sortedDatabases?.map((database) => {
const region = formatDatabaseRegion(database.region)
@@ -185,7 +185,7 @@ export const DatabaseSelector = ({
}
return (
<CommandItem_Shadcn_
<CommandItem
key={database.identifier}
value={database.identifier}
className="cursor-pointer w-full"
@@ -208,14 +208,14 @@ export const DatabaseSelector = ({
</p>
{database.identifier === selectedDatabaseId && <Check size={16} />}
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
{IS_PLATFORM && infrastructureReadReplicas && (
<CommandGroup_Shadcn_ className="border-t">
<CommandItem_Shadcn_
<CommandGroup className="border-t">
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
setOpen(false)
@@ -235,11 +235,11 @@ export const DatabaseSelector = ({
<Plus size={14} strokeWidth={1.5} />
<p>Create a new read replica</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+26 -26
View File
@@ -19,12 +19,12 @@ import { useEffect, useRef, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
HoverCard,
HoverCardContent,
HoverCardTrigger,
@@ -330,23 +330,23 @@ export const EditorPanel = () => {
></ButtonTooltip>
</PopoverTrigger>
<PopoverContent align="end" className="w-[300px] p-0">
<Command_Shadcn_ shouldFilter={false}>
<CommandInput_Shadcn_
<Command shouldFilter={false}>
<CommandInput
placeholder="Search snippets..."
value={snippetSearch}
onValueChange={setSnippetSearch}
/>
<CommandList_Shadcn_>
<CommandList>
{isLoadingSnippets ? (
<div className="py-6 text-center text-sm text-foreground-light">
Loading snippets...
</div>
) : (
<CommandEmpty_Shadcn_>No snippets found.</CommandEmpty_Shadcn_>
<CommandEmpty>No snippets found.</CommandEmpty>
)}
<CommandGroup_Shadcn_>
<CommandGroup>
{(snippetsData?.content ?? []).map((snippet) => (
<CommandItem_Shadcn_
<CommandItem
key={snippet.id}
value={snippet.id}
className="cursor-pointer"
@@ -357,11 +357,11 @@ export const EditorPanel = () => {
}}
>
{snippet.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{templates.length > 0 && (
@@ -379,15 +379,15 @@ export const EditorPanel = () => {
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="w-[300px] p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search templates..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No templates found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search templates..." />
<CommandList>
<CommandEmpty>No templates found.</CommandEmpty>
<CommandGroup>
{templates.map((template) => (
<HoverCard key={template.name}>
<HoverCardTrigger asChild>
<CommandItem_Shadcn_
<CommandItem
value={template.name}
onSelect={() => onSelectTemplate(template.content)}
className="cursor-pointer"
@@ -406,7 +406,7 @@ export const EditorPanel = () => {
</p>
</div>
</div>
</CommandItem_Shadcn_>
</CommandItem>
</HoverCardTrigger>
<HoverCardContent side="left" className="w-[500px] p-0">
<CodeBlock
@@ -418,9 +418,9 @@ export const EditorPanel = () => {
</HoverCardContent>
</HoverCard>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
apps/studio/components/ui/FunctionSelector.tsx
+24 -24
View File
@@ -9,13 +9,13 @@ import {
AlertDescription,
AlertTitle,
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -123,25 +123,25 @@ const FunctionSelector = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="start" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search functions..." />
<CommandList_Shadcn_
<Command>
<CommandInput placeholder="Search functions..." />
<CommandList
onWheel={stopScrollPropagation ? (event) => event.stopPropagation() : undefined}
>
<CommandEmpty_Shadcn_>No functions found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<CommandEmpty>No functions found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(functions || []).length > 7 ? 'h-[210px]' : ''}>
{!functions.length && (
<CommandItem_Shadcn_
<CommandItem
key="no-function-found"
disabled={true}
className="flex items-center justify-between space-x-2 w-full"
>
{noResultsLabel}
</CommandItem_Shadcn_>
</CommandItem>
)}
{functions.map((func) => (
<CommandItem_Shadcn_
<CommandItem
key={func.id}
value={func.name.replaceAll('"', '')}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
@@ -158,13 +158,13 @@ const FunctionSelector = ({
{value === func.name && (
<Check className="text-brand" size={14} strokeWidth={2} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer w-full"
onSelect={() => {
setOpen(false)
@@ -182,10 +182,10 @@ const FunctionSelector = ({
<Plus size={14} strokeWidth={1.5} />
<p>New function</p>
</Link>
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
+16 -16
View File
@@ -5,12 +5,12 @@ import { logConstants } from 'shared-data'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
copyToClipboard,
Popover,
PopoverContent,
@@ -115,13 +115,13 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" sameWidthAsTrigger>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search source..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No source found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search source..." />
<CommandList>
<CommandEmpty>No source found.</CommandEmpty>
<CommandGroup>
{logConstants.schemas.map((schema) => (
<CommandItem_Shadcn_
<CommandItem
key={schema.reference}
value={schema.reference}
onSelect={() => {
@@ -136,11 +136,11 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
)}
/>
{schema.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Table
apps/studio/components/ui/OrganizationProjectSelector.tsx
+11 -11
View File
@@ -5,10 +5,10 @@ import { ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandList_Shadcn_,
Command,
CommandGroup,
CommandInput,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -217,7 +217,7 @@ export const OrganizationProjectSelector = ({
}
const commandContent = (
<Command_Shadcn_
<Command
shouldFilter={false}
className={cn(className, embedded && 'flex flex-col flex-1 min-h-0 overflow-hidden')}
>
@@ -226,7 +226,7 @@ export const OrganizationProjectSelector = ({
{renderActions(setOpen, { embedded: true })}
</div>
)}
<CommandInput_Shadcn_
<CommandInput
showResetIcon
value={search}
onValueChange={setSearch}
@@ -235,24 +235,24 @@ export const OrganizationProjectSelector = ({
wrapperClassName={embedded ? 'shrink-0 border-b' : undefined}
className="text-base sm:text-sm"
/>
<CommandList_Shadcn_
<CommandList
className={
embedded
? 'flex-1 min-h-0 overflow-y-auto overflow-x-hidden max-h-none!'
: 'max-h-none md:max-h-[300px] overflow-y-auto overflow-x-hidden'
}
>
<CommandGroup_Shadcn_ className={embedded ? 'flex-1 min-h-0 overflow-hidden' : ''}>
<CommandGroup className={embedded ? 'flex-1 min-h-0 overflow-hidden' : ''}>
{renderListContent()}
</CommandGroup_Shadcn_>
</CommandGroup>
{!!renderActions && !embedded && (
<>
<div className="h-px bg-border-overlay -mx-1 shrink-0" />
{renderActions(setOpen)}
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
)
if (embedded) {
apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { Check } from 'lucide-react'
import { ReactNode } from 'react'
import { cn, CommandItem_Shadcn_ } from 'ui'
import { cn, CommandItem } from 'ui'
import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
@@ -31,7 +31,7 @@ export function ProjectCommandItem({
const disabled = isOptionDisabled?.(project) ?? false
return (
<CommandItem_Shadcn_
<CommandItem
key={project.ref}
value={`${project.name.replaceAll('"', '')}-${project.ref}`}
className="cursor-pointer w-full"
@@ -53,6 +53,6 @@ export function ProjectCommandItem({
{checkPosition === 'right' && project.ref === selectedRef && <Check size={16} />}
</div>
)}
</CommandItem_Shadcn_>
</CommandItem>
)
}
apps/studio/components/ui/SchemaComboBox.tsx
+16 -16
View File
@@ -5,12 +5,12 @@ import {
AlertDescription,
AlertTitle,
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -108,14 +108,14 @@ export const SchemaComboBox = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0 w-56" side="bottom" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find schema..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No schemas found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Find schema..." />
<CommandList>
<CommandEmpty>No schemas found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(schemas || []).length > 7 ? 'h-[210px]' : ''}>
{schemas?.map((schema) => (
<CommandItem_Shadcn_
<CommandItem
key={schema.id}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => toggleSchema(schema.name)}
@@ -125,12 +125,12 @@ export const SchemaComboBox = ({
{selectedSchemas.includes(schema.name) && (
<Check className="text-brand" strokeWidth={2} size={16} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
apps/studio/components/ui/SchemaSelector.tsx
+24 -24
View File
@@ -6,13 +6,13 @@ import {
AlertDescription,
AlertTitle,
Button,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -149,16 +149,16 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
align={align}
sameWidthAsTrigger
>
<Command_Shadcn_>
<CommandInput_Shadcn_ className="text-xs" placeholder="Find schema..." />
<CommandList_Shadcn_
<Command>
<CommandInput className="text-xs" placeholder="Find schema..." />
<CommandList
onWheel={stopScrollPropagation ? (event) => event.stopPropagation() : undefined}
>
<CommandEmpty_Shadcn_>No schemas found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<CommandEmpty>No schemas found</CommandEmpty>
<CommandGroup>
<ScrollArea className={(schemas || []).length > 7 ? 'h-[210px]' : ''}>
{supportSelectAll && (
<CommandItem_Shadcn_
<CommandItem
key="select-all"
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -174,10 +174,10 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
{selectedSchemaName === '*' && (
<Check className="text-brand" strokeWidth={2} size={16} />
)}
</CommandItem_Shadcn_>
</CommandItem>
)}
{schemas.map((schema) => (
<CommandItem_Shadcn_
<CommandItem
key={schema.id}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
@@ -193,15 +193,15 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
{selectedSchemaName === schema.name && (
<Check className="text-brand" strokeWidth={2} size={16} />
)}
</CommandItem_Shadcn_>
</CommandItem>
))}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandGroup>
{onSelectCreateSchema !== undefined && canCreateSchemas && (
<>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
<CommandSeparator />
<CommandGroup>
<CommandItem
className="cursor-pointer flex items-center gap-x-2 w-full"
onSelect={() => {
onSelectCreateSchema()
@@ -214,12 +214,12 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
>
<Plus size={12} />
Create a new schema
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandItem>
</CommandGroup>
</>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)}
apps/studio/pages/project/[ref]/functions/new.tsx
+16 -16
View File
@@ -10,12 +10,12 @@ import {
AiIconAnimation,
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Form,
FormControl,
FormField,
@@ -313,13 +313,13 @@ const NewFunctionPage = () => {
</Button>
</PopoverTrigger>
<PopoverContent id={templatesListboxId} className="w-[300px] p-0" align="end">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search templates..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No templates found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Search templates..." />
<CommandList>
<CommandEmpty>No templates found.</CommandEmpty>
<CommandGroup>
{templates.map((template) => (
<CommandItem_Shadcn_
<CommandItem
key={template.value}
value={template.value}
onSelect={onSelectTemplate}
@@ -343,11 +343,11 @@ const NewFunctionPage = () => {
{template.description}
</span>
</div>
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<Button
apps/ui-library/components/command-menu.tsx
+25 -25
View File
@@ -7,12 +7,12 @@ import * as React from 'react'
import {
Button,
CommandDialog,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
DialogProps,
} from 'ui'
@@ -69,12 +69,12 @@ export function CommandMenu({ ...props }: DialogProps) {
</kbd>
</Button>
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput_Shadcn_ placeholder="Type a command or search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_ key="pages" heading="Pages">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup key="pages" heading="Pages">
{COMMAND_ITEMS.map((navItem) => (
<CommandItem_Shadcn_
<CommandItem
key={navItem.href}
value={navItem.label}
onSelect={() => runCommand(() => router.push(navItem.href as string))}
@@ -83,29 +83,29 @@ export function CommandMenu({ ...props }: DialogProps) {
<CircleIcon className="h-3 w-3" strokeWidth={1} />
</div>
{navItem.label}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_ heading="Theme">
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Theme">
<CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
<SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Light
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('classic-dark'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('classic-dark'))}>
<MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
Classic dark
</CommandItem_Shadcn_>
<CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
</CommandItem>
<CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
<LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
System
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>
</>
)
apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
+9 -8
View File
@@ -6,17 +6,18 @@ import { useEffect, useRef, useState } from 'react'
import {
Button_Shadcn_ as Button,
cn,
Command_Shadcn_ as Command,
CommandGroup_Shadcn_ as CommandGroup,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
Popover as Popover,
PopoverContent as PopoverContent,
PopoverTrigger as PopoverTrigger,
Command,
CommandGroup as CommandGroup,
CommandInput,
CommandItem as CommandItem,
CommandList as CommandList,
Popover,
PopoverContent,
PopoverTrigger,
ScrollArea,
} from 'ui'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
export interface ComboBoxOption {
apps/www/components/Pricing/UpgradePlan.tsx
+22 -22
View File
@@ -9,13 +9,13 @@ import {
Button,
ButtonProps,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
CommandSeparator_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
Dialog,
DialogClose,
DialogContent,
@@ -81,13 +81,13 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Select organization..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No organizations found.</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<Command>
<CommandInput placeholder="Select organization..." />
<CommandList>
<CommandEmpty>No organizations found.</CommandEmpty>
<CommandGroup>
{organizations.map((organization) => (
<CommandItem_Shadcn_
<CommandItem
key={organization.slug}
value={organization.slug}
onSelect={(currentValue) => {
@@ -103,12 +103,12 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
)}
/>
{organization.name}
</CommandItem_Shadcn_>
</CommandItem>
))}
</CommandGroup_Shadcn_>
<CommandSeparator_Shadcn_ />
<CommandGroup_Shadcn_>
<CommandItem_Shadcn_
</CommandGroup>
<CommandSeparator />
<CommandGroup>
<CommandItem
value="new-organization"
onSelect={(currentValue) => {
setValue(currentValue === value ? '' : currentValue)
@@ -123,10 +123,10 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
)}
/>
<Plus className="h-4 w-4 mr-2" /> Create a new organization
</CommandItem_Shadcn_>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</DialogSection>
packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+6 -6
View File
@@ -10,7 +10,7 @@ import { ErrorBoundary } from 'react-error-boundary'
import {
Button,
cn,
Command_Shadcn_,
Command,
Dialog,
DialogContent,
DialogDescription,
@@ -50,11 +50,11 @@ function Breadcrumb({ className }: { className?: string }) {
}
const CommandWrapper = forwardRef<
React.ElementRef<typeof Command_Shadcn_>,
React.ComponentPropsWithoutRef<typeof Command_Shadcn_>
React.ElementRef<typeof Command>,
React.ComponentPropsWithoutRef<typeof Command>
>(({ children, className, ...props }, ref) => {
return (
<Command_Shadcn_
<Command
ref={ref}
className={cn(
'h-full w-full flex flex-col overflow-hidden',
@@ -71,10 +71,10 @@ const CommandWrapper = forwardRef<
{...props}
>
{children}
</Command_Shadcn_>
</Command>
)
})
CommandWrapper.displayName = Command_Shadcn_.displayName
CommandWrapper.displayName = Command.displayName
function CommandError({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
return (
packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
+4 -4
View File
@@ -3,7 +3,7 @@
import { useBreakpoint, useDebounce } from 'common'
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
import type React from 'react'
import { cn, CommandInput_Shadcn_ } from 'ui'
import { cn, CommandInput } from 'ui'
import { useQuery, useSetQuery } from './hooks/queryHooks'
import { useCommandMenuTelemetryContext } from './hooks/useCommandMenuTelemetryContext'
@@ -42,8 +42,8 @@ function useFocusInputOnWiderScreens(ref: React.ForwardedRef<HTMLInputElement>)
}
const CommandMenuInput = forwardRef<
React.ElementRef<typeof CommandInput_Shadcn_>,
React.ComponentPropsWithoutRef<typeof CommandInput_Shadcn_>
React.ElementRef<typeof CommandInput>,
React.ComponentPropsWithoutRef<typeof CommandInput>
>(({ className, ...props }, ref) => {
const inputRef = useFocusInputOnWiderScreens(ref)
@@ -113,7 +113,7 @@ const CommandMenuInput = forwardRef<
return (
<div className="relative w-full" cmdk-input-wrapper="">
<CommandInput_Shadcn_
<CommandInput
// Focus needs to be manually handled to check breakpoint first, due to
// delays from useEffect
autoFocus={false}
packages/ui-patterns/src/CommandMenu/api/CommandMenuList.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
'use client'
import { forwardRef, useRef } from 'react'
import { cn, CommandList_Shadcn_ } from 'ui'
import { cn, CommandList } from 'ui'
import { CommandMenuEmpty } from '../internal/CommandMenuEmpty'
import { CommandMenuGroup } from '../internal/CommandMenuGroup'
@@ -11,8 +11,8 @@ import { useQuery } from './hooks/queryHooks'
import { TextHighlighter } from './TextHighlighter'
const CommandMenuList = forwardRef<
React.ElementRef<typeof CommandList_Shadcn_>,
React.ComponentPropsWithoutRef<typeof CommandList_Shadcn_>
React.ElementRef<typeof CommandList>,
React.ComponentPropsWithoutRef<typeof CommandList>
>(({ className, ...props }, ref) => {
const commandSections = useCommands()
const query = useQuery()
@@ -26,7 +26,7 @@ const CommandMenuList = forwardRef<
}
return (
<CommandList_Shadcn_
<CommandList
ref={setRef}
className={cn('max-h-[initial] overflow-y-auto overflow-x-hidden bg-transparent', className)}
{...props}
@@ -47,7 +47,7 @@ const CommandMenuList = forwardRef<
</CommandMenuGroup>
)
})}
</CommandList_Shadcn_>
</CommandList>
)
})
CommandMenuList.displayName = 'CommandMenuList'
packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
+4 -4
View File
@@ -1,14 +1,14 @@
'use client'
import { forwardRef } from 'react'
import { cn, CommandGroup_Shadcn_ } from 'ui'
import { cn, CommandGroup } from 'ui'
const CommandMenuGroup = forwardRef<
React.ElementRef<typeof CommandGroup_Shadcn_>,
React.ComponentPropsWithoutRef<typeof CommandGroup_Shadcn_>
React.ElementRef<typeof CommandGroup>,
React.ComponentPropsWithoutRef<typeof CommandGroup>
>(({ className, ...props }, ref) => {
return (
<CommandGroup_Shadcn_
<CommandGroup
ref={ref}
className={cn(
'overflow-hidden py-3 px-2 text-foreground-lighter/60 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-lighter/60',
packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
'use client'
import { forwardRef, type PropsWithChildren } from 'react'
import { cn, CommandItem_Shadcn_ } from 'ui'
import { cn, CommandItem } from 'ui'
import { useQuery } from '../api/hooks/queryHooks'
import { useCommandMenuTelemetryContext } from '../api/hooks/useCommandMenuTelemetryContext'
@@ -45,12 +45,12 @@ data-[disabled=true]:opacity-50
`
)
interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof CommandItem_Shadcn_> {
interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof CommandItem> {
command: ICommand
}
const CommandMenuItem = forwardRef<
React.ElementRef<typeof CommandItem_Shadcn_>,
React.ElementRef<typeof CommandItem>,
PropsWithChildren<CommandItemProps>
>(({ children, className, command: _command, ...props }, ref) => {
const router = useCrossCompatRouter()
@@ -95,7 +95,7 @@ const CommandMenuItem = forwardRef<
}
return (
<CommandItem_Shadcn_
<CommandItem
ref={ref}
onSelect={handleCommandSelect}
value={command.value ?? command.name}
@@ -114,7 +114,7 @@ const CommandMenuItem = forwardRef<
</div>
{command.badge?.()}
</div>
</CommandItem_Shadcn_>
</CommandItem>
)
})
CommandMenuItem.displayName = 'CommandMenuItem'
packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+8 -15
View File
@@ -5,14 +5,7 @@ import { User } from 'lucide-react'
import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import {
AiIconAnimation,
Button,
cn,
CommandGroup_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
} from 'ui'
import { AiIconAnimation, Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
import { markdownComponents } from 'ui-patterns/Markdown'
import { StatusIcon } from 'ui/src/components/StatusIcon'
@@ -195,7 +188,7 @@ function AiMessages({ messages }: { messages: Array<Message> }) {
error. This display doesn't actually need the Command Menu, but it's
needed for the empty state to work with the input, so this is a somewhat
hacktastic way of making it not error. */}
<CommandList_Shadcn_ />
<CommandList />
<div
className={cn(
'grow min-h-0 overflow-auto p-4',
@@ -289,8 +282,8 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
const query = useQuery()
return (
<CommandList_Shadcn_ className="max-h-[unset]">
<CommandGroup_Shadcn_
<CommandList className="max-h-[unset]">
<CommandGroup
heading="Examples"
className={cn(
'text-border-strong',
@@ -301,7 +294,7 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
{questions.map((question) => {
const key = question.replace(/\s+/g, '_')
return (
<CommandItem_Shadcn_
<CommandItem
className={generateCommandClassNames(false)}
onSelect={() => {
if (!query) {
@@ -312,11 +305,11 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
>
<AiIconAnimation />
{question}
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</CommandGroup>
</CommandList>
)
}
packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
+13 -13
View File
@@ -8,7 +8,7 @@ import {
} from 'common'
import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
import { useCallback, useEffect, useRef } from 'react'
import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, CommandList_Shadcn_ } from 'ui'
import { Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
import { StatusIcon } from 'ui/src/components/StatusIcon'
import {
@@ -193,18 +193,18 @@ const DocsSearchPage = () => {
<Breadcrumb />
<CommandMenuInput placeholder="Search..." ref={inputRef} />
</CommandHeader>
<CommandList_Shadcn_ className="max-h-[initial]">
<CommandList className="max-h-[initial]">
{hasResults &&
('results' in state ? state.results : state.staleResults).map((page, i) => {
return (
<CommandGroup_Shadcn_
<CommandGroup
heading=""
key={`${page.path}-group`}
value={`${escapeAttributeSelector(page.title)}-group-index-${i}`}
forceMount={true}
className="overflow-hidden py-3 px-2 text-border-strong **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted"
>
<CommandItem_Shadcn_
<CommandItem
key={`${page.path}-item`}
value={`${escapeAttributeSelector(page.title)}-item-index-${i}`}
onSelect={() => {
@@ -227,11 +227,11 @@ const DocsSearchPage = () => {
</div>
<ChevronArrow />
</CommandItem_Shadcn_>
</CommandItem>
{page.sections.length > 0 && (
<div className="border-l border-muted ml-3 pt-3">
{page.sections.map((section, i) => (
<CommandItem_Shadcn_
<CommandItem
className={cn(
generateCommandClassNames(true),
'border border-overlay/90',
@@ -262,19 +262,19 @@ const DocsSearchPage = () => {
</div>
</div>
<ChevronArrow />
</CommandItem_Shadcn_>
</CommandItem>
))}
</div>
)}
</CommandGroup_Shadcn_>
</CommandGroup>
)
})}
{state.status === 'initial' && (
<CommandGroup_Shadcn_ className="overflow-hidden py-3 px-2 text-border-strong **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted">
<CommandGroup className="overflow-hidden py-3 px-2 text-border-strong **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted">
{questions.map((question) => {
const key = question.replace(/\s+/g, '_')
return (
<CommandItem_Shadcn_
<CommandItem
className={generateCommandClassNames(false)}
disabled={hasResults}
onSelect={() => {
@@ -287,10 +287,10 @@ const DocsSearchPage = () => {
>
<Search />
{question}
</CommandItem_Shadcn_>
</CommandItem>
)
})}
</CommandGroup_Shadcn_>
</CommandGroup>
)}
{state.status === 'loading' && state.staleResults.length === 0 && (
<div className="flex items-center gap-3 my-4 justify-center">
@@ -319,7 +319,7 @@ const DocsSearchPage = () => {
</Button>
</div>
)}
</CommandList_Shadcn_>
</CommandList>
</CommandWrapper>
)
}
packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
+17 -17
View File
@@ -5,12 +5,12 @@ import { useState } from 'react'
import {
Button,
cn,
Command_Shadcn_,
CommandEmpty_Shadcn_,
CommandGroup_Shadcn_,
CommandInput_Shadcn_,
CommandItem_Shadcn_,
CommandList_Shadcn_,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -50,7 +50,7 @@ export const ClientSelectDropdown = ({
function renderClient(client: McpClient) {
return (
<CommandItem_Shadcn_
<CommandItem
key={client.key}
value={client.key}
onSelect={() => onSelectClient(client.key)}
@@ -71,7 +71,7 @@ export const ClientSelectDropdown = ({
size={15}
className={cn('ml-auto', client.key === selectedClient.key ? 'opacity-100' : 'opacity-0')}
/>
</CommandItem_Shadcn_>
</CommandItem>
)
}
@@ -109,21 +109,21 @@ export const ClientSelectDropdown = ({
</PopoverTrigger>
</div>
<PopoverContent className="mt-0 p-0 max-w-48" side="bottom" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Search..." />
<CommandList_Shadcn_>
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
<Command>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
{groups ? (
groups.map((group) => (
<CommandGroup_Shadcn_ key={group.heading} heading={group.heading}>
<CommandGroup key={group.heading} heading={group.heading}>
{group.clients.map(renderClient)}
</CommandGroup_Shadcn_>
</CommandGroup>
))
) : (
<CommandGroup_Shadcn_>{clients.map(renderClient)}</CommandGroup_Shadcn_>
<CommandGroup>{clients.map(renderClient)}</CommandGroup>
)}
</CommandList_Shadcn_>
</Command_Shadcn_>
</CommandList>
</Command>
</PopoverContent>
</Popover>
)
packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import { useWindowSize } from 'react-use'
import { CommandEmpty_Shadcn_, Sheet, SheetContent } from 'ui'
import { CommandEmpty, Sheet, SheetContent } from 'ui'
import { cn } from 'ui/src/lib/utils'
const MobileSheetNav: React.FC<{
@@ -53,7 +53,7 @@ const MobileSheetNav: React.FC<{
className
)}
>
<ErrorBoundary FallbackComponent={() => <CommandEmpty_Shadcn_ />}>{children}</ErrorBoundary>
<ErrorBoundary FallbackComponent={() => <CommandEmpty />}>{children}</ErrorBoundary>
</SheetContent>
</Sheet>
)
packages/ui-patterns/src/multi-select/multi-select.tsx
+5 -5
View File
@@ -8,11 +8,11 @@ import React, { isValidElement, ReactElement, useEffect } from 'react'
import {
Badge,
cn,
Command_Shadcn_ as Command,
CommandEmpty_Shadcn_ as CommandEmpty,
CommandInput_Shadcn_ as CommandInput,
CommandItem_Shadcn_ as CommandItem,
CommandList_Shadcn_ as CommandList,
Command as Command,
CommandEmpty as CommandEmpty,
CommandInput as CommandInput,
CommandItem as CommandItem,
CommandList as CommandList,
Popover,
PopoverAnchor,
PopoverContent,
packages/ui/index.tsx
+1 -11
View File
@@ -63,17 +63,7 @@ export * from './src/components/shadcn/ui/toggle-group'
export * from './src/components/shadcn/ui/toggle'
export * from './src/components/shadcn/ui/card'
export {
Command as Command_Shadcn_,
CommandDialog as CommandDialog,
CommandInput as CommandInput_Shadcn_,
CommandList as CommandList_Shadcn_,
CommandEmpty as CommandEmpty_Shadcn_,
CommandGroup as CommandGroup_Shadcn_,
CommandItem as CommandItem_Shadcn_,
CommandShortcut as CommandShortcut_Shadcn_,
CommandSeparator as CommandSeparator_Shadcn_,
} from './src/components/shadcn/ui/command'
export * from './src/components/shadcn/ui/command'
export * from './src/components/shadcn/ui/context-menu'