feat: namespace and document Toast components (#1216)

Author: knagurski

apps/gitness/src/App.tsx

@@ -12,7 +12,7 @@ import {
 import { QueryClientProvider } from '@tanstack/react-query'
 
 import { CodeServiceAPIClient } from '@harnessio/code-service-client'
-import { ToastProvider, Tooltip } from '@harnessio/ui/components'
+import { Toast, Tooltip } from '@harnessio/ui/components'
 import { RouterContextProvider } from '@harnessio/ui/context'
 
 import { ExitConfirmProvider } from './framework/context/ExitConfirmContext'
@@ -44,7 +44,7 @@ export default function App() {
     <I18nextProvider i18n={i18n}>
       <ThemeProvider defaultTheme="dark-std-std">
         <QueryClientProvider client={queryClient}>
-          <ToastProvider>
+          <Toast.Provider>
             <Tooltip.Provider>
               <ExitConfirmProvider>
                 <NavigationProvider routes={routes}>
@@ -62,7 +62,7 @@ export default function App() {
                 </NavigationProvider>
               </ExitConfirmProvider>
             </Tooltip.Provider>
-          </ToastProvider>
+          </Toast.Provider>
         </QueryClientProvider>
       </ThemeProvider>
     </I18nextProvider>

apps/gitness/src/AppMFE.tsx

@@ -18,7 +18,7 @@ import {
 import { QueryClientProvider } from '@tanstack/react-query'
 
 import { CodeServiceAPIClient } from '@harnessio/code-service-client'
-import { ToastProvider, Tooltip } from '@harnessio/ui/components'
+import { Toast, Tooltip } from '@harnessio/ui/components'
 import { PortalProvider, RouterContextProvider } from '@harnessio/ui/context'
 
 import ShadowRootWrapper from './components-v2/shadow-root-wrapper'
@@ -183,7 +183,7 @@ export default function AppMFE({
                 <I18nextProvider i18n={i18n}>
                   <ThemeProvider defaultTheme={theme === 'Light' ? 'light-std-std' : 'dark-std-std'}>
                     <QueryClientProvider client={queryClient}>
-                      <ToastProvider>
+                      <Toast.Provider>
                         <Tooltip.Provider>
                           <ExitConfirmProvider>
                             <NavigationProvider routes={routesToRender}>
@@ -201,7 +201,7 @@ export default function AppMFE({
                             </NavigationProvider>
                           </ExitConfirmProvider>
                         </Tooltip.Provider>
-                      </ToastProvider>
+                      </Toast.Provider>
                     </QueryClientProvider>
                   </ThemeProvider>
                 </I18nextProvider>

apps/gitness/src/components-v2/toaster.tsx

@@ -1,23 +1,21 @@
-import { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport, useToast } from '@harnessio/ui/components'
+import { Toast, useToast } from '@harnessio/ui/components'
 
 export function Toaster() {
   const { toasts } = useToast()
 
   return (
     <>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast.Root key={id} {...props}>
+          <div className="grid gap-1">
+            {!!title && <Toast.Title>{title}</Toast.Title>}
+            {!!description && <Toast.Description>{description}</Toast.Description>}
+          </div>
+          {action}
+          <Toast.Close />
+        </Toast.Root>
+      ))}
+      <Toast.Viewport />
     </>
   )
 }

apps/gitness/src/framework/hooks/useRepoImportEvent.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
 import { Link, useParams } from 'react-router-dom'
 
 import { RepoRepositoryOutput } from '@harnessio/code-service-client'
-import { ToastAction, useToast } from '@harnessio/ui/components'
+import { Toast, useToast } from '@harnessio/ui/components'
 
 import { useRepoStore } from '../../pages-v2/repo/stores/repo-list-store'
 import { transformRepoList } from '../../pages-v2/repo/transform-utils/repo-list-transform'
@@ -29,7 +29,7 @@ export const useRepoImportEvents = () => {
         duration: 5000,
         action: (
           <Link to={routes.toRepoSummary({ spaceId, repoId: importRepoIdentifier ?? '' })}>
-            <ToastAction altText="View repository">View</ToastAction>
+            <Toast.Action altText="View repository">View</Toast.Action>
           </Link>
         ),
         variant: 'success'

apps/gitness/src/pages-v2/repo/repo-list.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { useDeleteRepositoryMutation, useListReposQuery } from '@harnessio/code-service-client'
-import { ToastAction, useToast } from '@harnessio/ui/components'
+import { Toast, useToast } from '@harnessio/ui/components'
 import { RepositoryType, SandboxRepoListPage } from '@harnessio/ui/views'
 
 import { useRoutes } from '../../framework/context/NavigationContext'
@@ -85,7 +85,7 @@ export default function ReposListPage() {
         description: importRepoIdentifier,
         duration: Infinity,
         action: (
-          <ToastAction
+          <Toast.Action
             onClick={() => {
               deleteRepository({
                 queryParams: {},
@@ -95,7 +95,7 @@ export default function ReposListPage() {
             altText="Cancel import"
           >
             {isCancellingImport ? 'Canceling...' : 'Cancel'}
-          </ToastAction>
+          </Toast.Action>
         )
       })