cleanup

Author: ankormoreankor

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-changes.tsx

@@ -14,6 +14,8 @@ interface PullRequestChangesProps extends PropsWithChildren<React.HTMLAttributes
 }
 
 const PullRequestChanges: FC<PullRequestChangesProps> = ({ state }) => {
+  const isCommitDialogOpen = false
+
   const usePullRequestProviderStore = useCallback(
     () => ({
       ...pullRequestProviderStore,
@@ -45,7 +47,7 @@ const PullRequestChanges: FC<PullRequestChangesProps> = ({ state }) => {
   return (
     <>
       <CommitSuggestionsDialog
-        isOpen={false}
+        isOpen={isCommitDialogOpen}
         onClose={noop}
         onFormSubmit={() => Promise.resolve()}
         isSubmitting={false}

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx

@@ -34,6 +34,8 @@ interface PullRequestConversationProps extends PropsWithChildren<React.HTMLAttri
 }
 
 const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) => {
+  const isCommitDialogOpen = false
+
   const suggestionsBatch: CommitSuggestion[] = []
 
   const handleRebaseBranch = () => {}
@@ -84,7 +86,7 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
   return (
     <>
       <CommitSuggestionsDialog
-        isOpen={false}
+        isOpen={isCommitDialogOpen}
         onClose={noop}
         onFormSubmit={() => Promise.resolve()}
         isSubmitting={false}

packages/ui/src/components/alert-dialog.tsx

@@ -77,7 +77,7 @@ const Content = forwardRef<HTMLDivElement, ContentProps>(({ title, children }, r
   })
 
   return (
-    <Dialog.Content onOpenAutoFocus={event => event.preventDefault()} ref={ref}>
+    <Dialog.Content ref={ref}>
       <Dialog.Header
         icon={
           context.theme === 'danger' ? 'xmark-circle' : context.theme === 'warning' ? 'warning-triangle' : undefined

packages/ui/src/components/dialog.tsx

@@ -69,28 +69,27 @@ const useDialogFocusManager = () => {
   return context
 }
 
+/**
+ * DialogProvider component manages focus for dialog triggers.
+ * It ensures that the last focused element is restored when the dialog is closed.
+ */
 const DialogProvider = ({ children }: { children: ReactNode }) => {
   const focusStack = useRef<FocusEntry[]>([])
 
   const unregisterTrigger = useCallback((id: string) => {
     focusStack.current = focusStack.current.filter(e => e.triggerId !== id)
-    console.log('🚀 ~ unregisterTrigger ~ focusStack.current:', focusStack.current)
   }, [])
 
   const registerTrigger = useCallback((entry: FocusEntry) => {
     unregisterTrigger(entry.triggerId)
-    console.log('🚀 ~ registerTrigger ~ entry.triggerId:', entry.triggerId)
     focusStack.current.push(entry)
-    console.log('🚀 ~ registerTrigger ~ focusStack.current:', focusStack.current)
   }, [])
 
   const restoreFocus = useCallback((id: string) => {
-    console.log('🚀 ~ restoreFocus ~ focusStack.current:', focusStack.current)
     const entryIndex = focusStack.current.findIndex(e => e.triggerId === id)
 
     if (entryIndex !== -1) {
       const entry = focusStack.current[entryIndex]
-      console.log('🚀 ~ restoreFocus ~ entry:', entry)
       if (entry.triggerElement) {
         setTimeout(() => entry.triggerElement.focus(), 0)
       }
@@ -121,6 +120,11 @@ const useTriggerId = (_id?: string) => {
   return id.current
 }
 
+/**
+ * Custom hook to manage dialog trigger elements.
+ * It provides a ref for the trigger element and a callback to register the trigger.
+ * Useful when a dialog is opened from a complex components like dropdowns, etc.
+ */
 const useCustomDialogTrigger = () => {
   const focusManager = useDialogFocusManager()
   const triggerId = useTriggerId()
@@ -173,7 +177,6 @@ const Content = forwardRef<HTMLDivElement, ContentProps>(
     const { open } = useDialogOpen()
 
     const handleCloseAutoFocus = useCallback(() => {
-      console.log('🚀 ~ triggerId:', triggerId)
       if (focusManager) {
         focusManager.restoreFocus(triggerId)
       }
@@ -189,7 +192,6 @@ const Content = forwardRef<HTMLDivElement, ContentProps>(
 
     useEffect(() => {
       return () => {
-        console.log('🚀 ~ return ():', focusManager)
         if (focusManager) {
           focusManager.unregisterTrigger(triggerId)
         }
@@ -324,6 +326,10 @@ const Close = forwardRef<HTMLButtonElement, ButtonProps>(({ children, className,
 ))
 Close.displayName = 'Dialog.Close'
 
+/**
+ * Dialog trigger component is essential for opening dialogs.
+ * It registers the trigger element with the dialog focus manager.
+ */
 const Trigger = forwardRef<HTMLButtonElement, ButtonProps>(({ onClick, id, ...props }, ref) => {
   const triggerId = useTriggerId(id)
   const focusManager = useDialogFocusManager()
@@ -333,7 +339,6 @@ const Trigger = forwardRef<HTMLButtonElement, ButtonProps>(({ onClick, id, ...pr
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (focusManager) {
-      console.log('🚀 ~ focusManager:', focusManager)
       focusManager.registerTrigger({ triggerId, triggerElement: event.currentTarget })
     }
     onClick?.(event)

packages/ui/src/components/file-control-bars/file-viewer-control-bar.tsx

@@ -41,6 +41,7 @@ export const FileViewerControlBar: FC<FileViewerControlBarProps> = ({
   refType = BranchSelectorTab.BRANCHES
 }) => {
   const { triggerRef, registerTrigger } = useCustomDialogTrigger()
+
   const handleViewRaw = () => {
     window.open(url, '_blank')
   }

packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx

@@ -1,19 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import {
-  Alert,
-  Button,
-  ButtonLayout,
-  ControlGroup,
-  Dialog,
-  FormInput,
-  FormWrapper,
-  Label,
-  LanguageDialog,
-  LanguageInterface,
-  languages
-} from '@/components'
+import { Alert, Button, ButtonLayout, ControlGroup, Dialog, FormInput, FormWrapper, Label } from '@/components'
 import { TFunctionWithFallback, useTranslation } from '@/context'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
@@ -117,25 +105,6 @@ export function CreateBranchDialog({
     onClose()
   }
 
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open)
-  }
-
-  const handleChange = (language: LanguageInterface) => {
-    console.log(language)
-  }
-
-  const handleSave = (language: LanguageInterface) => {
-    console.log(language)
-  }
-
-  const handleCancel = () => {
-    console.log('Cancelled')
-    setIsOpen(false)
-  }
-
   return (
     <Dialog.Root open={open} onOpenChange={handleClose}>
       <Dialog.Content aria-describedby={undefined} className="max-w-2xl">
@@ -181,31 +150,9 @@ export function CreateBranchDialog({
                 </Alert.Description>
               </Alert.Root>
             )}
-
-            <Dialog.Root>
-              <Dialog.Trigger>Open test dialog</Dialog.Trigger>
-              <Dialog.Content>
-                <Dialog.Header>
-                  <Dialog.Title>Test dialog</Dialog.Title>
-                </Dialog.Header>
-                <Dialog.Body>
-                  <p>This is a test dialog.</p>
-                  <Dialog.Trigger onClick={() => setIsOpen(true)}>Select Language</Dialog.Trigger>
-                </Dialog.Body>
-              </Dialog.Content>
-            </Dialog.Root>
           </FormWrapper>
         </Dialog.Body>
 
-        <LanguageDialog
-          open={isOpen}
-          onOpenChange={handleOpenChange}
-          onChange={handleChange}
-          onSave={handleSave}
-          onCancel={handleCancel}
-          supportedLanguages={languages}
-        />
-
         <Dialog.Footer>
           <ButtonLayout>
             <Dialog.Close onClick={handleClose} disabled={isLoading}>