diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx index 35186ae216b..5c7e7d1f248 100644 --- a/apps/design-system/__registry__/index.tsx +++ b/apps/design-system/__registry__/index.tsx @@ -1160,6 +1160,39 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "sonner-demo": { + name: "sonner-demo", + type: "components:example", + registryDependencies: ["sonner"], + component: React.lazy(() => import("@/registry/default/example/sonner-demo")), + source: "", + files: ["registry/default/example/sonner-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "sonner-types": { + name: "sonner-types", + type: "components:example", + registryDependencies: ["sonner"], + component: React.lazy(() => import("@/registry/default/example/sonner-types")), + source: "", + files: ["registry/default/example/sonner-types.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "sonner-upload": { + name: "sonner-upload", + type: "components:example", + registryDependencies: ["sonner"], + component: React.lazy(() => import("@/registry/default/example/sonner-upload")), + source: "", + files: ["registry/default/example/sonner-upload.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "switch-demo": { name: "switch-demo", type: "components:example", diff --git a/apps/design-system/app/SonnerToast.tsx b/apps/design-system/app/SonnerToast.tsx new file mode 100644 index 00000000000..819a8890e9d --- /dev/null +++ b/apps/design-system/app/SonnerToast.tsx @@ -0,0 +1,9 @@ +'use client' + +import { useConfig } from '@/hooks/use-config' +import { SonnerToaster as Toaster } from 'ui' + +export function SonnerToaster() { + const [config] = useConfig() + return +} diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx index b0e13e68153..d28af7c710a 100644 --- a/apps/design-system/app/layout.tsx +++ b/apps/design-system/app/layout.tsx @@ -2,6 +2,8 @@ import '@/styles/globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' import { ThemeProvider } from './Providers' +import { Toaster } from 'ui' +import { SonnerToaster } from './SonnerToast' const inter = Inter({ subsets: ['latin'] }) @@ -15,22 +17,16 @@ interface RootLayoutProps { } export default async function Layout({ children }: RootLayoutProps) { - // console.log('Root Layout mounted or re-rendered') - return ( - +
{children}
+ + diff --git a/apps/design-system/components/mdx-components.tsx b/apps/design-system/components/mdx-components.tsx index 52e02bb9bc5..8074b7aebb1 100644 --- a/apps/design-system/components/mdx-components.tsx +++ b/apps/design-system/components/mdx-components.tsx @@ -44,6 +44,8 @@ import { Icons } from '@/components/icons' import { ThemeSettings } from '@/components/theme-settings' import { CodeFragment } from '@/components/code-fragment' import { Admonition } from 'ui-patterns/admonition' +import { SonnerExpandConfig } from './sonner-expand-config' +import { SonnerPositionConfig } from './sonner-expand-position' const components = { Accordion, @@ -273,6 +275,8 @@ const components = { ThemeSettings, CodeFragment, Admonition, + SonnerExpandConfig, + SonnerPositionConfig, } interface MdxProps { diff --git a/apps/design-system/components/sonner-expand-config.tsx b/apps/design-system/components/sonner-expand-config.tsx new file mode 100644 index 00000000000..43f2295c298 --- /dev/null +++ b/apps/design-system/components/sonner-expand-config.tsx @@ -0,0 +1,37 @@ +import { useConfig } from '@/hooks/use-config' +import { Switch } from 'ui' +import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' + +function SonnerExpandConfig() { + const [config, setConfig] = useConfig() + + return ( +
+
+ + + setConfig({ + ...config, + sonnerExpand: e, + }) + } + /> + +
+
+ ) +} + +export { SonnerExpandConfig } diff --git a/apps/design-system/components/sonner-expand-position.tsx b/apps/design-system/components/sonner-expand-position.tsx new file mode 100644 index 00000000000..82510e03394 --- /dev/null +++ b/apps/design-system/components/sonner-expand-position.tsx @@ -0,0 +1,70 @@ +import { useConfig } from '@/hooks/use-config' +import { ComponentProps } from 'react' +import { + SelectContent_Shadcn_, + SelectGroup_Shadcn_, + SelectItem_Shadcn_, + SelectLabel_Shadcn_, + SelectTrigger_Shadcn_, + SelectValue_Shadcn_, + Select_Shadcn_, + SonnerToaster, +} from 'ui' +import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' + +function SonnerPositionConfig() { + const [config, setConfig] = useConfig() + + type Position = NonNullable['position']> + + const positions: Position[] = [ + 'top-left', + 'top-right', + 'bottom-left', + 'bottom-right', + 'top-center', + 'bottom-center', + ] + + return ( +
+
+ + { + setConfig({ + ...config, + sonnerPosition: e, + }) + }} + > + + + + + + Positions available + {positions.map((position) => ( + + {position} + + ))} + + + + +
+
+ ) +} + +export { SonnerPositionConfig } diff --git a/apps/design-system/content/docs/components/sonner.mdx b/apps/design-system/content/docs/components/sonner.mdx index 3af18cfd4a8..3ae4ce8ee0a 100644 --- a/apps/design-system/content/docs/components/sonner.mdx +++ b/apps/design-system/content/docs/components/sonner.mdx @@ -16,46 +16,6 @@ Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowal ## Installation - - - - CLI - Manual - - - - - -Run the following command: - -```bash -npx shadcn-ui@latest add sonner -``` - -Add the Toaster component - -```tsx title="app/layout.tsx" {1,9} -import { Toaster } from '@/components/ui/sonner' - -export default function RootLayout({ children }) { - return ( - - - -
{children}
- - - - ) -} -``` - - - - - - - Install the following dependencies: @@ -88,10 +48,6 @@ export default function RootLayout({ children }) { - - - - ## Usage ```tsx @@ -101,3 +57,41 @@ import { toast } from 'sonner' ```tsx toast('Event has been created.') ``` + +## Expand + +You can change the amount of toasts visible through the visibleToasts prop. + +```tsx + +``` + +You can use the Input below to try it out. + + + +## Position + +You can change the amount of toasts visible through the visibleToasts prop. + +```tsx + +``` + +You can use the Input below to try it out. + + + +## Types + +You can customize the type of toast you want to render, and pass an options object as the second argument. + + + +## Upload example + + diff --git a/apps/design-system/hooks/use-config.ts b/apps/design-system/hooks/use-config.ts index 858ffacc11e..7177c77890b 100644 --- a/apps/design-system/hooks/use-config.ts +++ b/apps/design-system/hooks/use-config.ts @@ -1,22 +1,27 @@ -import { useAtom } from 'jotai' -import { atomWithStorage } from 'jotai/utils' - -// import { BackendProvider } from '@/registry/backend-provider' import { Style } from '@/registry/styles' import { Theme } from '@/registry/themes' +import { useAtom } from 'jotai' +import { atomWithStorage } from 'jotai/utils' +import { ComponentProps } from 'react' +import { SonnerToaster } from 'ui' +// import { BackendProvider } from '@/registry/backend-provider' type Config = { style: Style['name'] theme: Theme['name'] radius: number + sonnerPosition: ComponentProps['position'] + sonnerExpand: boolean // backendProvider: BackendProvider['name'] | undefined } const configAtom = atomWithStorage('config', { style: 'default', - // backendProvider: 'nextjs-auth', theme: 'zinc', radius: 0.5, + sonnerPosition: 'bottom-right', + sonnerExpand: false, + // backendProvider: 'nextjs-auth', }) export function useConfig() { diff --git a/apps/design-system/registry/default/example/sonner-demo.tsx b/apps/design-system/registry/default/example/sonner-demo.tsx new file mode 100644 index 00000000000..d2687e6071e --- /dev/null +++ b/apps/design-system/registry/default/example/sonner-demo.tsx @@ -0,0 +1,21 @@ +import { toast } from 'sonner' +import { Button } from 'ui' + +export default function SonnerDemo() { + return ( + + ) +} diff --git a/apps/design-system/registry/default/example/sonner-types.tsx b/apps/design-system/registry/default/example/sonner-types.tsx new file mode 100644 index 00000000000..0fc1212baee --- /dev/null +++ b/apps/design-system/registry/default/example/sonner-types.tsx @@ -0,0 +1,97 @@ +import { toast } from 'sonner' +import { Button } from 'ui' + +export default function SonnerDemo() { + const promise = () => + new Promise((resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000)) + + return ( +
+ + + + + + + + + + + + + ) + } + > + Custom + +
+ ) +} diff --git a/apps/design-system/registry/default/example/sonner-upload.tsx b/apps/design-system/registry/default/example/sonner-upload.tsx new file mode 100644 index 00000000000..dcc25b45692 --- /dev/null +++ b/apps/design-system/registry/default/example/sonner-upload.tsx @@ -0,0 +1,88 @@ +import { Check, Loader2 } from 'lucide-react' +import { useState } from 'react' +import { toast } from 'sonner' +import { Button, Progress } from 'ui' + +export default function SonnerUpload() { + const [isUploading, setIsUploadingState] = useState(false) + + const uploadPromise = (files: number, toastId: number) => { + toast.loading(, { + id: toastId, + }) + + return new Promise((resolve) => { + let currentProgress = 0 + + toast.loading(, { + id: toastId, + }) + + const intervalId = setInterval(() => { + currentProgress += Math.floor(Math.random() * 10) + 1 // Increment progress by a random value + if (currentProgress > 100) currentProgress = 100 // Ensure progress does not exceed 100% + + if (currentProgress >= 100) { + clearInterval(intervalId) // Clear the interval once upload is complete + resolve({ progress: currentProgress, message: 'Upload complete', files: 3, toastId }) // Resolve the promise when progress reaches 100 + } + + toast.loading(, { + id: toastId, + }) + }, 200) // Adjust the interval time as needed + }) + } + + const UploadContent = ({ progress, files }: { progress: number; files: number }) => ( +
+ {progress >= 100 ? ( + + ) : ( + + )} +
+
+

+ {progress >= 100 + ? `Upload complete` + : files + ? `Uploading ${files} files...` + : `Uploading...`} +

+

{`${progress}%`}

+
+ + + Please do not close the browser until completed + +
+
+ ) + + return ( +
+ +
+ ) +} diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts index 51be42a11c6..aebdd16585d 100644 --- a/apps/design-system/registry/examples.ts +++ b/apps/design-system/registry/examples.ts @@ -713,12 +713,24 @@ export const examples: Registry = [ registryDependencies: ['slider'], files: ['example/slider-demo.tsx'], }, - // { - // name: 'sonner-demo', - // type: 'components:example', - // registryDependencies: ['sonner'], - // files: ['example/sonner-demo.tsx'], - // }, + { + name: 'sonner-demo', + type: 'components:example', + registryDependencies: ['sonner'], + files: ['example/sonner-demo.tsx'], + }, + { + name: 'sonner-types', + type: 'components:example', + registryDependencies: ['sonner'], + files: ['example/sonner-types.tsx'], + }, + { + name: 'sonner-upload', + type: 'components:example', + registryDependencies: ['sonner'], + files: ['example/sonner-upload.tsx'], + }, { name: 'switch-demo', type: 'components:example', diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountDeletion.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountDeletion.tsx index 69eeb340a98..c7b848848bb 100644 --- a/apps/studio/components/interfaces/Account/Preferences/AccountDeletion.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/AccountDeletion.tsx @@ -1,6 +1,6 @@ import Panel from 'components/ui/Panel' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui' -import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon } from 'ui' import { DeleteAccountButton } from './DeleteAccountButton' export const AccountDeletion = () => { diff --git a/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx index 8604bee880a..b06f5d8f4d4 100644 --- a/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx @@ -24,7 +24,7 @@ import { InputNumber, Toggle, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' const schema = object({ JWT_EXP: number() diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx index 050bd5ca9b9..df03dc42d2e 100644 --- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx +++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx @@ -5,8 +5,13 @@ import { useParams } from 'common' import { FormHeader } from 'components/ui/Forms/FormHeader' import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers/Shimmers' import { useAuthConfigQuery } from 'data/auth/auth-config-query' -import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, + Button, + WarningIcon, +} from 'ui' import { PROVIDERS_SCHEMAS } from '../AuthProvidersFormValidation' import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants' import ProviderForm from './ProviderForm' diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx index 391779ab1b8..ca4c86f9c65 100644 --- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx +++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx @@ -21,8 +21,8 @@ import { Collapsible, Form, Input, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants' import type { Provider } from './AuthProvidersForm.types' import FormField from './FormField' diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx index a771dbbbaf6..0e3cf915574 100644 --- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx @@ -28,7 +28,7 @@ import { InputNumber, Toggle, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import FormField from '../AuthProvidersForm/FormField' // Use a const string to represent no chars option. Represented as empty string on the backend side. diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx index 6c6d8c19ae0..a16095348a9 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx @@ -3,7 +3,7 @@ import { noop } from 'lodash' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import Panel from 'components/ui/Panel' import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query' import PolicyRow from './PolicyRow' diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx index ae09d21f0cc..700ad0fb428 100644 --- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx +++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx @@ -27,8 +27,8 @@ import { FormItem_Shadcn_, Form_Shadcn_, Input_Shadcn_, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { isSmtpEnabled } from '../SmtpForm/SmtpForm.utils' const RateLimits = () => { diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx index 2d95d30d9ae..6eb14bf3f28 100644 --- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx +++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx @@ -21,8 +21,8 @@ import { Form, Input, Modal, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { urlRegex } from '../Auth.constants' import RedirectUrlList from './RedirectUrlList' import ValueContainer from './ValueContainer' diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx index 53a53a36054..078392f0d0f 100644 --- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx +++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx @@ -25,8 +25,8 @@ import { Input, InputNumber, Toggle, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import EmailRateLimitsAlert from '../EmailRateLimitsAlert' import { urlRegex } from './../Auth.constants' import { defaultDisabledSmtpFormValues } from './SmtpForm.constants' diff --git a/apps/studio/components/interfaces/BranchManagement/BranchStatusBadge.tsx b/apps/studio/components/interfaces/BranchManagement/BranchStatusBadge.tsx index 8e566ab7778..50a7f86fe1d 100644 --- a/apps/studio/components/interfaces/BranchManagement/BranchStatusBadge.tsx +++ b/apps/studio/components/interfaces/BranchManagement/BranchStatusBadge.tsx @@ -1,7 +1,7 @@ import type { BranchData } from 'data/branches/branch-query' import type { Branch } from 'data/branches/branches-query' import { Badge } from 'ui' -import { StatusIcon } from 'ui-patterns/Icons/StatusIcons' +import { StatusIcon } from 'ui' type Status = Branch['status'] | BranchData['status'] diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsStorageAlert.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsStorageAlert.tsx index a6e677ab516..e1544e14393 100644 --- a/apps/studio/components/interfaces/Database/Backups/BackupsStorageAlert.tsx +++ b/apps/studio/components/interfaces/Database/Backups/BackupsStorageAlert.tsx @@ -1,5 +1,5 @@ import { AlertDescription_Shadcn_, Alert_Shadcn_ } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' const BackupsStorageAlert = () => { return ( diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx index fdfb0af34cf..41f9fddc86b 100644 --- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx +++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx @@ -26,8 +26,8 @@ import { Alert_Shadcn_, Button, Modal, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import BackupsEmpty from '../BackupsEmpty' import BackupsStorageAlert from '../BackupsStorageAlert' import type { Timezone } from './PITR.types' diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx index b53911a3cbe..aae7012e721 100644 --- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx @@ -19,8 +19,8 @@ import { Input, Listbox, Modal, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' interface EnableExtensionModalProps { visible: boolean diff --git a/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx b/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx index bca67bcb7b1..ddffec3c04f 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx @@ -24,8 +24,8 @@ import { Button, Form, Input, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import InputField from './InputField' import WrapperTableEditor from './WrapperTableEditor' import { WRAPPERS } from './Wrappers.constants' diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx index 7b1cb2fbd96..3d6bc56bf13 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx @@ -24,12 +24,12 @@ import { AlertTitle_Shadcn_, Alert_Shadcn_, Button, + CriticalIcon, Form, Input, Modal, Toggle, } from 'ui' -import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons' import CommandRender from '../CommandRender' import { generateCLICommands } from './EdgeFunctionDetails.utils' diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx index 50a745659d7..c4b98bb7504 100644 --- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx +++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx @@ -6,7 +6,6 @@ import { ArrowDown, ArrowUp, RefreshCw, User } from 'lucide-react' import Image from 'next/legacy/image' import Link from 'next/link' import { useEffect, useState } from 'react' -import { Alert, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' import { LogDetailsPanel } from 'components/interfaces/AuditLogs' import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold' @@ -25,7 +24,14 @@ import { useOrganizationRolesQuery } from 'data/organizations/organization-roles import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useProjectsQuery } from 'data/projects/projects-query' import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { + Alert, + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, + Button, + WarningIcon, +} from 'ui' // [Joshen considerations] // - Maybe fix the height of the table to the remaining height of the viewport, so that the search input is always visible diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx index fd27caa331a..ec0e95f0dc2 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Restriction.tsx @@ -6,7 +6,7 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que import { useOrgUsageQuery } from 'data/usage/org-usage-query' import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon, WarningIcon } from 'ui' export const Restriction = () => { const org = useSelectedOrganization() diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx index 87a6ec5ee8e..523d020184a 100644 --- a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx +++ b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx @@ -1,6 +1,6 @@ import Panel from 'components/ui/Panel' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui' -import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon } from 'ui' import DeleteOrganizationButton from './DeleteOrganizationButton' const OrganizationDeletePanel = () => { diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx index 828dac7205b..d4f7c9e11aa 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.tsx @@ -38,9 +38,9 @@ import { TooltipContent_Shadcn_, TooltipTrigger_Shadcn_, Tooltip_Shadcn_, + WarningIcon, cn, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { useGetRolesManagementPermissions } from '../TeamSettings.utils' import { UpdateRolesConfirmationModal } from './UpdateRolesConfirmationModal' import { diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanelOld.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanelOld.tsx index 47b5cfdb2fa..f30642ae907 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanelOld.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanelOld.tsx @@ -20,9 +20,9 @@ import { SheetContent, SheetFooter, SheetHeader, + WarningIcon, cn, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2' interface UpdateRolesPanelProps { diff --git a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx index d98e0646f5b..d07b21ce523 100644 --- a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx +++ b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx @@ -24,8 +24,8 @@ import { DialogSection, DialogSectionSeparator, DialogTitle, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' interface HardenAPIModalProps { visible: boolean diff --git a/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx b/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx index d3546469a7e..23901d6a896 100644 --- a/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx +++ b/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx @@ -38,9 +38,9 @@ import { DropdownMenuTrigger, Input, Modal, + WarningIcon, } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { JWT_SECRET_UPDATE_ERROR_MESSAGES, JWT_SECRET_UPDATE_PROGRESS_MESSAGES, diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx index 74a4e37997e..84ac768508c 100644 --- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx +++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx @@ -38,7 +38,7 @@ import { Skeleton, Switch, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { MultiSelector, diff --git a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx index 25fddace292..d8a7d8eb0b1 100644 --- a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx @@ -24,18 +24,19 @@ import Telemetry from 'lib/telemetry' import { useSubscriptionPageStateSnapshot } from 'state/subscription-page' import { Alert, + Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, - Alert_Shadcn_, Badge, Button, + CriticalIcon, IconExternalLink, IconInfo, Modal, Radio, SidePanel, + WarningIcon, } from 'ui' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' const ComputeInstanceSidePanel = () => { const queryClient = useQueryClient() diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx index cdf4bedd930..cbc92592c1f 100644 --- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx @@ -32,7 +32,7 @@ import { SidePanel, cn, } from 'ui' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon, WarningIcon } from 'ui' const PITR_CATEGORY_OPTIONS: { id: 'off' | 'on' diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseConnectionNotices.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseConnectionNotices.tsx index 0b56a1583d2..0bd005cebb1 100644 --- a/apps/studio/components/interfaces/Settings/Database/DatabaseConnectionNotices.tsx +++ b/apps/studio/components/interfaces/Settings/Database/DatabaseConnectionNotices.tsx @@ -1,7 +1,7 @@ import { ExternalLink } from 'lucide-react' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' export const IPv4DeprecationNotice = () => { return ( diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx index 9dd6b55829b..15c6979af63 100644 --- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx +++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx @@ -15,7 +15,7 @@ import Telemetry from 'lib/telemetry' import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' import { useDatabaseSettingsStateSnapshot } from 'state/database-settings' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Input } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import { DefaultSessionModeNotice, IPv4AddonDirectConnectionNotice, diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx index 015b690a771..8b2d35bde36 100644 --- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx +++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx @@ -25,7 +25,7 @@ import { InputNumber, Modal, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' export interface DiskSizeConfigurationProps { disabled?: boolean diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx index 8e3c84d0bbe..48a6fc64636 100644 --- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx +++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx @@ -16,7 +16,7 @@ import { IconHelpCircle, IconRefreshCw, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import DNSRecord from './DNSRecord' export type CustomDomainVerifyProps = { diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx index 4fb76254452..a55c1d038ae 100644 --- a/apps/studio/components/interfaces/Settings/General/General.tsx +++ b/apps/studio/components/interfaces/Settings/General/General.tsx @@ -26,8 +26,8 @@ import { IconAlertCircle, IconBarChart2, Input, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import PauseProjectButton from './Infrastructure/PauseProjectButton' import RestartServerButton from './Infrastructure/RestartServerButton' diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx index 70f3cea6713..edeac6fc017 100644 --- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx +++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx @@ -17,11 +17,11 @@ import { IconShield, IconTool, IconUsers, + InfoIcon, Listbox, Loading, Modal, } from 'ui' -import { InfoIcon } from 'ui-patterns/Icons/StatusIcons' const TransferProjectButton = () => { const project = useSelectedProject() diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx index ac2eea7a8e0..fda7265bec1 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx @@ -21,7 +21,7 @@ import { Listbox, SidePanel, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import { AVAILABLE_REPLICA_REGIONS, AWS_REGIONS_VALUES } from './InstanceConfiguration.constants' // [Joshen] FYI this is purely for AWS only, need to update to support Fly eventually diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx index 87a7d43051e..070a5720635 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx @@ -38,9 +38,9 @@ import { PopoverTrigger_Shadcn_, Popover_Shadcn_, Switch, + WarningIcon, cn, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' interface GitHubIntegrationConnectionFormProps { disabled?: boolean diff --git a/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx b/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx index 8995e3a102c..99c16ce761a 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx @@ -1,12 +1,11 @@ import Link from 'next/link' -import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui' import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker' import SidePanelVercelProjectLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker' import { ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold' import { useProjectByRef, useSelectedProject } from 'hooks/misc/useSelectedProject' import { BASE_PATH } from 'lib/constants' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, WarningIcon } from 'ui' import GitHubSection from './GithubIntegration/GithubSection' import VercelSection from './VercelIntegration/VercelSection' diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx index 787c66cc549..21e9ce0fa44 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx @@ -28,8 +28,8 @@ import { Input, SidePanel, Toggle, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import ActionBar from '../ActionBar' import type { ForeignKey } from '../ForeignKeySelector/ForeignKeySelector.types' import { formatForeignKeys } from '../ForeignKeySelector/ForeignKeySelector.utils' diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx index dedde050505..27a39be39be 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx @@ -21,7 +21,7 @@ import { IconExternalLink, IconTrash, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import { generateColumnField } from '../ColumnEditor/ColumnEditor.utils' import { ForeignKeySelector } from '../ForeignKeySelector/ForeignKeySelector' import type { ForeignKey } from '../ForeignKeySelector/ForeignKeySelector.types' diff --git a/apps/studio/components/layouts/AppLayout/RestrictionBanner.tsx b/apps/studio/components/layouts/AppLayout/RestrictionBanner.tsx index 57d0b30562f..125ce42912f 100644 --- a/apps/studio/components/layouts/AppLayout/RestrictionBanner.tsx +++ b/apps/studio/components/layouts/AppLayout/RestrictionBanner.tsx @@ -2,9 +2,8 @@ import dayjs from 'dayjs' import Link from 'next/link' import { useOrganizationsQuery } from 'data/organizations/organizations-query' -import { AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' import { useSelectedProject } from 'hooks/misc/useSelectedProject' +import { AlertTitle_Shadcn_, Alert_Shadcn_, Button, CriticalIcon, WarningIcon } from 'ui' /** * Shown on projects in organization which are above their qouta diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationRow.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationRow.tsx index 395d1e0d1c0..ae8e2c1c0e5 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationRow.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationRow.tsx @@ -7,7 +7,7 @@ import { useInView } from 'react-intersection-observer' import { Button, IconArchive, IconExternalLink, cn } from 'ui' import { Markdown } from 'components/interfaces/Markdown' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon, WarningIcon } from 'ui' import type { ItemRenderer } from 'components/ui/InfiniteList' import { Notification, NotificationData } from 'data/notifications/notifications-v2-query' import { ProjectInfo } from 'data/projects/projects-query' diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsFilter.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsFilter.tsx index 4f3360fdcff..c5edcf02a3a 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsFilter.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsFilter.tsx @@ -18,7 +18,7 @@ import { } from 'ui' import { CommandGroup } from '@ui/components/shadcn/ui/command' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon, WarningIcon } from 'ui' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useProjectsQuery } from 'data/projects/projects-query' import { useNotificationsStateSnapshot } from 'state/notifications' diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx index 533d082aa95..32e4decbc16 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx @@ -12,7 +12,7 @@ import { } from 'ui' import AlertError from 'components/ui/AlertError' -import { CriticalIcon, WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { CriticalIcon, WarningIcon } from 'ui' import InfiniteList from 'components/ui/InfiniteList' import ShimmeringLoader, { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useNotificationsArchiveAllMutation } from 'data/notifications/notifications-v2-archive-all-mutation' diff --git a/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx b/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx index 2fd1b163ea3..1fa1b12c642 100644 --- a/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/PauseFailedState.tsx @@ -1,6 +1,5 @@ import Link from 'next/link' -import { Button } from 'ui' -import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons' +import { Button, CriticalIcon } from 'ui' import { useProjectContext } from './ProjectContext' diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx index 98ed8553a04..7c8a7055218 100644 --- a/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx @@ -31,7 +31,7 @@ import { } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns' import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import { useProjectContext } from './ProjectContext' import { RestorePaidPlanProjectNotice } from './RestorePaidPlanProjectNotice' diff --git a/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx b/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx index 5e6273c6149..67412b74e3a 100644 --- a/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/RestoreFailedState.tsx @@ -1,7 +1,6 @@ import Link from 'next/link' -import { Button } from 'ui' -import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons' +import { Button, CriticalIcon } from 'ui' import { useProjectContext } from './ProjectContext' const RestoreFailedState = () => { diff --git a/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx b/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx index 522389d673c..df07121421b 100644 --- a/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx +++ b/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx @@ -1,6 +1,11 @@ import { ExternalLink } from 'lucide-react' -import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, + Button, + WarningIcon, +} from 'ui' export const RestorePaidPlanProjectNotice = () => { return ( diff --git a/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx index 4bfd5c69d76..c29fc7535c2 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx @@ -18,8 +18,8 @@ import { HoverCard_Shadcn_, cn, } from 'ui' -import { InnerSideMenuItem } from 'ui-patterns' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { InnerSideMenuItem } from 'ui-patterns/InnerSideMenu' import { QueryItemActions } from './QueryItemActions' export interface QueryItemProps { diff --git a/apps/studio/components/to-be-cleaned/Charts/ChartHandler.tsx b/apps/studio/components/to-be-cleaned/Charts/ChartHandler.tsx index b337c7ec014..dee56127db3 100644 --- a/apps/studio/components/to-be-cleaned/Charts/ChartHandler.tsx +++ b/apps/studio/components/to-be-cleaned/Charts/ChartHandler.tsx @@ -12,7 +12,7 @@ import { import { useProjectDailyStatsQuery } from 'data/analytics/project-daily-stats-query' import { Activity, BarChartIcon, Loader2 } from 'lucide-react' import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import type { ChartData } from './ChartHandler.types' interface ChartHandlerProps { diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx index 9ec92bad94e..f5ac3decb93 100644 --- a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx +++ b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx @@ -18,7 +18,7 @@ import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' import { AlertDescription_Shadcn_, Alert_Shadcn_, Button } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns' import { Input } from 'ui-patterns/DataInputs/Input' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { CreateCredentialModal } from './CreateCredentialModal' import { RevokeCredentialModal } from './RevokeCredentialModal' diff --git a/apps/studio/components/ui/AISettingsModal.tsx b/apps/studio/components/ui/AISettingsModal.tsx index 73f4e1709df..b0b3e9ae82b 100644 --- a/apps/studio/components/ui/AISettingsModal.tsx +++ b/apps/studio/components/ui/AISettingsModal.tsx @@ -12,8 +12,8 @@ import { Button, Modal, Toggle, + WarningIcon, } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' const AISettingsModal = () => { const snap = useAppStateSnapshot() diff --git a/apps/studio/components/ui/AlertError.tsx b/apps/studio/components/ui/AlertError.tsx index 877a3d9970b..e007b7c37da 100644 --- a/apps/studio/components/ui/AlertError.tsx +++ b/apps/studio/components/ui/AlertError.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import type { ResponseError } from 'types' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' export interface AlertErrorProps { projectRef?: string diff --git a/apps/studio/components/ui/ErrorBoundaryState.tsx b/apps/studio/components/ui/ErrorBoundaryState.tsx index f531831d1d9..dfbaf1f3485 100644 --- a/apps/studio/components/ui/ErrorBoundaryState.tsx +++ b/apps/studio/components/ui/ErrorBoundaryState.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/router' import type { FallbackProps } from 'react-error-boundary' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' +import { WarningIcon } from 'ui' export const ErrorBoundaryState = ({ error, resetErrorBoundary }: FallbackProps) => { const router = useRouter() diff --git a/apps/www/public/sitemap_www.xml b/apps/www/public/sitemap_www.xml index eac91cb449c..8241ee4eaa9 100644 --- a/apps/www/public/sitemap_www.xml +++ b/apps/www/public/sitemap_www.xml @@ -61,13 +61,13 @@ - https://supabase.com/blog/ + https://supabase.com/auth weekly 0.5 - https://supabase.com/auth + https://supabase.com/blog/ weekly 0.5 @@ -1724,6 +1724,12 @@ 0.5 + + https://supabase.com/blog/calcom-platform-starter-kit-nextjs-supabase + weekly + 0.5 + + https://supabase.com/customers/berriai weekly @@ -1802,6 +1808,18 @@ 0.5 + + https://supabase.com/customers/tinloof + weekly + 0.5 + + + + https://supabase.com/customers/voypost + weekly + 0.5 + + https://supabase.com/customers/xendit weekly @@ -1825,586 +1843,4 @@ weekly 0.5 - - - https://supabase.com/partners/integrations/appsmith - weekly - 0.5 - - - - https://supabase.com/partners/integrations/arengu - weekly - 0.5 - - - - https://supabase.com/partners/integrations/artie - weekly - 0.5 - - - - https://supabase.com/partners/integrations/auth0 - weekly - 0.5 - - - - https://supabase.com/partners/integrations/authsignal - weekly - 0.5 - - - - https://supabase.com/partners/integrations/basedash - weekly - 0.5 - - - - https://supabase.com/partners/integrations/buster - weekly - 0.5 - - - - https://supabase.com/partners/integrations/clerk - weekly - 0.5 - - - - https://supabase.com/partners/integrations/cloudflare-workers - weekly - 0.5 - - - - https://supabase.com/partners/integrations/clutch - weekly - 0.5 - - - - https://supabase.com/partners/integrations/codesandbox - weekly - 0.5 - - - - https://supabase.com/partners/integrations/corbado - weekly - 0.5 - - - - https://supabase.com/partners/integrations/cyberduck - weekly - 0.5 - - - - https://supabase.com/partners/integrations/deepnote - weekly - 0.5 - - - - https://supabase.com/partners/integrations/dezbor - weekly - 0.5 - - - - https://supabase.com/partners/integrations/dhiwise - weekly - 0.5 - - - - https://supabase.com/partners/integrations/directus - weekly - 0.5 - - - - https://supabase.com/partners/integrations/doppler - weekly - 0.5 - - - - https://supabase.com/partners/integrations/draftbit - weekly - 0.5 - - - - https://supabase.com/partners/integrations/drapcode - weekly - 0.5 - - - - https://supabase.com/partners/integrations/draxlr - weekly - 0.5 - - - - https://supabase.com/partners/integrations/dronahq - weekly - 0.5 - - - - https://supabase.com/partners/integrations/electricsql - weekly - 0.5 - - - - https://supabase.com/partners/integrations/estuary - weekly - 0.5 - - - - https://supabase.com/partners/integrations/explo - weekly - 0.5 - - - - https://supabase.com/partners/integrations/fezto - weekly - 0.5 - - - - https://supabase.com/partners/integrations/flutterflow - weekly - 0.5 - - - - https://supabase.com/partners/integrations/forestadmin - weekly - 0.5 - - - - https://supabase.com/partners/integrations/getstream_io - weekly - 0.5 - - - - https://supabase.com/partners/integrations/illa - weekly - 0.5 - - - - https://supabase.com/partners/integrations/infisical - weekly - 0.5 - - - - https://supabase.com/partners/integrations/insightbase - weekly - 0.5 - - - - https://supabase.com/partners/integrations/internalio - weekly - 0.5 - - - - https://supabase.com/partners/integrations/jetadmin - weekly - 0.5 - - - - https://supabase.com/partners/integrations/keyri - weekly - 0.5 - - - - https://supabase.com/partners/integrations/litellm - weekly - 0.5 - - - - https://supabase.com/partners/integrations/n8n - weekly - 0.5 - - - - https://supabase.com/partners/integrations/nextauth - weekly - 0.5 - - - - https://supabase.com/partners/integrations/nuxt - weekly - 0.5 - - - - https://supabase.com/partners/integrations/onesignal - weekly - 0.5 - - - - https://supabase.com/partners/integrations/ory - weekly - 0.5 - - - - https://supabase.com/partners/integrations/passageidentity - weekly - 0.5 - - - - https://supabase.com/partners/integrations/pgmustard - weekly - 0.5 - - - - https://supabase.com/partners/integrations/picket - weekly - 0.5 - - - - https://supabase.com/partners/integrations/plasmic - weekly - 0.5 - - - - https://supabase.com/partners/integrations/powersync - weekly - 0.5 - - - - https://supabase.com/partners/integrations/prisma - weekly - 0.5 - - - - https://supabase.com/partners/integrations/react-admin - weekly - 0.5 - - - - https://supabase.com/partners/integrations/readyset - weekly - 0.5 - - - - https://supabase.com/partners/integrations/refine_dev - weekly - 0.5 - - - - https://supabase.com/partners/integrations/replibyte - weekly - 0.5 - - - - https://supabase.com/partners/integrations/replicache - weekly - 0.5 - - - - https://supabase.com/partners/integrations/resend - weekly - 0.5 - - - - https://supabase.com/partners/integrations/retool - weekly - 0.5 - - - - https://supabase.com/partners/integrations/risingwave - weekly - 0.5 - - - - https://supabase.com/partners/integrations/sequin_io - weekly - 0.5 - - - - https://supabase.com/partners/integrations/snaplet - weekly - 0.5 - - - - https://supabase.com/partners/integrations/stacksync - weekly - 0.5 - - - - https://supabase.com/partners/integrations/stormkit - weekly - 0.5 - - - - https://supabase.com/partners/integrations/streamlit - weekly - 0.5 - - - - https://supabase.com/partners/integrations/stytch - weekly - 0.5 - - - - https://supabase.com/partners/integrations/supabase_wrapper_bigquery - weekly - 0.5 - - - - https://supabase.com/partners/integrations/supabase_wrapper_firebase - weekly - 0.5 - - - - https://supabase.com/partners/integrations/supabase_wrapper_stripe - weekly - 0.5 - - - - https://supabase.com/partners/integrations/supertokens - weekly - 0.5 - - - - https://supabase.com/partners/integrations/tamagui-takeout - weekly - 0.5 - - - - https://supabase.com/partners/integrations/toddle - weekly - 0.5 - - - - https://supabase.com/partners/integrations/trevor_io - weekly - 0.5 - - - - https://supabase.com/partners/integrations/triggerdotdev - weekly - 0.5 - - - - https://supabase.com/partners/integrations/vercel - weekly - 0.5 - - - - https://supabase.com/partners/integrations/voltapp - weekly - 0.5 - - - - https://supabase.com/partners/integrations/weweb - weekly - 0.5 - - - - https://supabase.com/partners/integrations/windmill - weekly - 0.5 - - - - https://supabase.com/partners/integrations/yepcode - weekly - 0.5 - - - - https://supabase.com/partners/integrations/zapier - weekly - 0.5 - - - - https://supabase.com/partners/integrations/zapp_run - weekly - 0.5 - - - - https://supabase.com/partners/integrations/zuplo - weekly - 0.5 - - - - https://supabase.com/partners/experts/antstack - weekly - 0.5 - - - - https://supabase.com/partners/experts/arceptive - weekly - 0.5 - - - - https://supabase.com/partners/experts/buildlab - weekly - 0.5 - - - - https://supabase.com/partners/experts/calda - weekly - 0.5 - - - - https://supabase.com/partners/experts/driglo - weekly - 0.5 - - - - https://supabase.com/partners/experts/enginedigital - weekly - 0.5 - - - - https://supabase.com/partners/experts/feelantera - weekly - 0.5 - - - - https://supabase.com/partners/experts/jensenlabs - weekly - 0.5 - - - - https://supabase.com/partners/experts/koptional - weekly - 0.5 - - - - https://supabase.com/partners/experts/morrow - weekly - 0.5 - - - - https://supabase.com/partners/experts/overcode - weekly - 0.5 - - - - https://supabase.com/partners/experts/quinence - weekly - 0.5 - - - - https://supabase.com/partners/experts/robkendal - weekly - 0.5 - - - - https://supabase.com/partners/experts/solid_software - weekly - 0.5 - - - - https://supabase.com/partners/experts/sunmoon - weekly - 0.5 - - - - https://supabase.com/partners/experts/theodo - weekly - 0.5 - - - - https://supabase.com/partners/experts/tinloof - weekly - 0.5 - - - - https://supabase.com/partners/experts/uncommonpurpose - weekly - 0.5 - - - - https://supabase.com/partners/experts/voypost - weekly - 0.5 - - - - https://supabase.com/partners/experts/zerodays - weekly - 0.5 - diff --git a/package-lock.json b/package-lock.json index a7aa27be6fd..90259065c4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37663,6 +37663,15 @@ "swr-store": "^0.10" } }, + "node_modules/sonner": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.5.0.tgz", + "integrity": "sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==", + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/sort-keys": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-5.0.0.tgz", @@ -42962,6 +42971,7 @@ "react-use": "^17.5.0", "reactflow": "^11.10.1", "remark-gfm": "^3.0.1", + "sonner": "^1.5.0", "sse.js": "^2.2.0", "tailwind-merge": "^1.13.2", "tailwindcss": "^3.4.1", diff --git a/packages/ui-patterns/Cmdk/AiCommand.tsx b/packages/ui-patterns/Cmdk/AiCommand.tsx index e8d3c6c4274..3f49cfd288b 100644 --- a/packages/ui-patterns/Cmdk/AiCommand.tsx +++ b/packages/ui-patterns/Cmdk/AiCommand.tsx @@ -10,29 +10,26 @@ import { useRef, useState, } from 'react' - +import ReactMarkdown from 'react-markdown' +import remarkGfm from 'remark-gfm' import { SSE } from 'sse.js' +import { isBrowser } from 'common' import { AiIconAnimation, Button, + cn, IconCornerDownLeft, IconUser, Input, markdownComponents, + StatusIcon, } from 'ui' +import { AiWarning } from './Command.alerts' import { AiIconChat } from './Command.icons' import { CommandGroup, CommandItem, useAutoInputFocus, useHistoryKeys } from './Command.utils' - -import { AiWarning } from './Command.alerts' import { useCommandMenu } from './CommandMenuContext' -import ReactMarkdown from 'react-markdown' -import remarkGfm from 'remark-gfm' -import { cn } from 'ui/src/lib/utils' -import { StatusIcon } from '../Icons/StatusIcons' -import { isBrowser } from 'common' - const questions = [ 'How do I get started with Supabase?', 'How do I run Supabase locally?', diff --git a/packages/ui-patterns/Cmdk/DocsSearch.tsx b/packages/ui-patterns/Cmdk/DocsSearch.tsx index 96821cf8df5..deaa3ca67d3 100644 --- a/packages/ui-patterns/Cmdk/DocsSearch.tsx +++ b/packages/ui-patterns/Cmdk/DocsSearch.tsx @@ -10,10 +10,9 @@ import { import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react' import { useRouter } from 'next/navigation' import { useEffect, useRef } from 'react' -import { Button } from 'ui' +import { Button, StatusIcon } from 'ui' import { CommandGroup, CommandItem, CommandLabel, TextHighlighter } from './Command.utils' import { useCommandMenu } from './CommandMenuContext' -import { StatusIcon } from '../Icons/StatusIcons' const questions = [ 'How do I get started with Supabase?', diff --git a/packages/ui-patterns/Cmdk/GenerateSQL/GenerateSQL.tsx b/packages/ui-patterns/Cmdk/GenerateSQL/GenerateSQL.tsx index f8f2f6d1ae7..61f82eb2ac1 100644 --- a/packages/ui-patterns/Cmdk/GenerateSQL/GenerateSQL.tsx +++ b/packages/ui-patterns/Cmdk/GenerateSQL/GenerateSQL.tsx @@ -21,7 +21,7 @@ import { SAMPLE_QUERIES } from '../Command.constants' import SQLOutputActions from './SQLOutputActions' import { generatePrompt } from './GenerateSQL.utils' import { ExcludeSchemaAlert, IncludeSchemaAlert, AiWarning } from '../Command.alerts' -import { StatusIcon } from '../../Icons/StatusIcons' +import { StatusIcon } from 'ui' const GenerateSQL = () => { const [includeSchemaMetadata, setIncludeSchemaMetadata] = useState(false) diff --git a/packages/ui-patterns/Icons/StatusIcons.stories.tsx b/packages/ui-patterns/Icons/StatusIcons.stories.tsx deleted file mode 100644 index 8299d0a7943..00000000000 --- a/packages/ui-patterns/Icons/StatusIcons.stories.tsx +++ /dev/null @@ -1,100 +0,0 @@ -// import { StoryObj } from '@storybook/react' -// import { Badge } from 'ui' -// import { StatusIcon } from './StatusIcons' - -// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -// export default { -// title: 'Icons/StatusIcon', -// component: StatusIcon, -// parameters: { -// // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout -// layout: 'centered', -// }, -// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs -// tags: ['autodocs'], -// // More on argTypes: https://storybook.js.org/docs/api/argtypes -// argTypes: {}, -// } - -// // export default meta - -// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -// // export const Primary = { -// // args: { -// // size: 'small', -// // // visible: true, -// // }, -// // } - -// type Story = StoryObj - -// export const Default: Story = { -// args: { -// variant: 'default', -// }, -// /** -// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. -// * If you are not concerned with linting, you may use an arrow function. -// */ -// render: function Render(args) { -// return -// }, -// } - -// export const Destructive: Story = { -// args: { -// variant: 'destructive', -// }, -// /** -// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. -// * If you are not concerned with linting, you may use an arrow function. -// */ -// render: function Render(args) { -// return -// }, -// } - -// export const Warning: Story = { -// args: { -// variant: 'warning', -// }, -// /** -// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. -// * If you are not concerned with linting, you may use an arrow function. -// */ -// render: function Render(args) { -// return -// }, -// } - -// export const withNoBackground: Story = { -// args: { -// variant: 'default', -// hideBackground: true, -// }, -// /** -// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. -// * If you are not concerned with linting, you may use an arrow function. -// */ -// render: function Render(args) { -// return -// }, -// } - -// export const InsideBadge: Story = { -// args: { -// variant: 'destructive', -// }, -// /** -// * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. -// * If you are not concerned with linting, you may use an arrow function. -// */ -// render: function Render(args) { -// return ( -// -// -// Caution -// -// ) -// }, -// } diff --git a/packages/ui-patterns/tsconfig.json b/packages/ui-patterns/tsconfig.json index a87fac9dc9b..59fbfb092e6 100644 --- a/packages/ui-patterns/tsconfig.json +++ b/packages/ui-patterns/tsconfig.json @@ -3,13 +3,6 @@ "compilerOptions": { "resolveJsonModule": true }, - "include": [ - ".", - "./../../packages/ui/src/**/*.d.ts" - ], - "exclude": [ - "dist", - "build", - "node_modules" - ] + "include": [".", "./../../packages/ui/src/**/*.d.ts", "../ui/src/components/Icons"], + "exclude": ["dist", "build", "node_modules"] } diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 39afd29ca4f..5f4f8464b69 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -75,7 +75,7 @@ export * from './src/components/shadcn/ui/dropdown-menu' export * from './src/components/shadcn/ui/use-toast' export * from './src/components/shadcn/ui/toast' export * from './src/components/shadcn/ui/toaster' - +export * from './src/components/shadcn/ui/sonner' export * from './src/components/shadcn/ui/separator' export * from './src/components/shadcn/ui/sheet' export * from './src/components/shadcn/ui/badge' @@ -265,6 +265,8 @@ export * from './src/components/TextLink' export * from './src/layout/banners' +export * from './src/components/StatusIcon' + // config // export { default as Config } from './../ui.config' diff --git a/packages/ui/package.json b/packages/ui/package.json index aede6b1908d..9725fe6c6d0 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -81,6 +81,7 @@ "react-use": "^17.5.0", "reactflow": "^11.10.1", "remark-gfm": "^3.0.1", + "sonner": "^1.5.0", "sse.js": "^2.2.0", "tailwind-merge": "^1.13.2", "tailwindcss": "^3.4.1", diff --git a/packages/ui-patterns/Icons/StatusIcons.tsx b/packages/ui/src/components/StatusIcon.tsx similarity index 100% rename from packages/ui-patterns/Icons/StatusIcons.tsx rename to packages/ui/src/components/StatusIcon.tsx diff --git a/packages/ui/src/components/shadcn/ui/progress.tsx b/packages/ui/src/components/shadcn/ui/progress.tsx index 5d7e4f6929f..9ab36d806be 100644 --- a/packages/ui/src/components/shadcn/ui/progress.tsx +++ b/packages/ui/src/components/shadcn/ui/progress.tsx @@ -11,11 +11,11 @@ const Progress = React.forwardRef< >(({ className, value, ...props }, ref) => ( diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx new file mode 100644 index 00000000000..e3089f6e8b2 --- /dev/null +++ b/packages/ui/src/components/shadcn/ui/sonner.tsx @@ -0,0 +1,58 @@ +'use client' + +import { useTheme } from 'next-themes' +import { Toaster as Sonner } from 'sonner' +import { cn } from '../../../lib/utils' +import { buttonVariants } from './../../Button' +import { StatusIcon } from './../../StatusIcon' + +type ToasterProps = React.ComponentProps + +const SonnerToaster = ({ ...props }: ToasterProps) => { + const { theme = 'system' } = useTheme() + + return ( + , + error: , + info: , + }} + theme={theme as ToasterProps['theme']} + className="toaster group" + toastOptions={{ + unstyled: true, + classNames: { + toast: cn( + 'group', + 'toast', + 'w-full', + 'rounded-md', + 'py-3', + 'px-5', + 'flex', + 'gap-2', + 'items-start', + 'font-normal', + 'text-sm', + 'group-[.toaster]:bg-overlay group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-overlay group-[.toaster]:shadow-lg' + ), + icon: 'mt-0.5', + title: '!font-normal', + description: + 'text-xs group-[.toast]:text-foreground-lighter transition-opacity group-data-[expanded=false]:opacity-0 group-data-[front=true]:!opacity-100', + actionButton: cn('block', buttonVariants({ type: 'primary', size: 'tiny' })), + cancelButton: cn('block', buttonVariants({ type: 'default', size: 'tiny' })), + // success: 'group toast group-[.toaster]:!bg-brand-200 group-[.toaster]:border-brand-500', + warning: + 'group toast group-[.toaster]:!bg-warning-200 group-[.toaster]:!border-warning-500', + error: + 'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500', + }, + }} + {...props} + /> + ) +} + +export { SonnerToaster }