feat: add GitHub deployment functionality (#1904)

- Add GitHubDeploy component to handle build and file preparation
- Create GitHubDeploymentDialog for repository selection and creation
- Update DeployButton to include GitHub deployment option
- Support both new and existing GitHub repositories
- Allow choosing between public and private repositories

app/components/deploy/DeployButton.tsx

@@ -10,23 +10,30 @@ import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.c
 import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.client';
 import { useVercelDeploy } from '~/components/deploy/VercelDeploy.client';
 import { useNetlifyDeploy } from '~/components/deploy/NetlifyDeploy.client';
+import { useGitHubDeploy } from '~/components/deploy/GitHubDeploy.client';
+import { GitHubDeploymentDialog } from '~/components/deploy/GitHubDeploymentDialog';
 
 interface DeployButtonProps {
   onVercelDeploy?: () => Promise<void>;
   onNetlifyDeploy?: () => Promise<void>;
+  onGitHubDeploy?: () => Promise<void>;
 }
 
-export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy }: DeployButtonProps) => {
+export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy, onGitHubDeploy }: DeployButtonProps) => {
   const netlifyConn = useStore(netlifyConnection);
   const vercelConn = useStore(vercelConnection);
   const [activePreviewIndex] = useState(0);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
   const [isDeploying, setIsDeploying] = useState(false);
-  const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | null>(null);
+  const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | 'github' | null>(null);
   const isStreaming = useStore(streamingState);
   const { handleVercelDeploy } = useVercelDeploy();
   const { handleNetlifyDeploy } = useNetlifyDeploy();
+  const { handleGitHubDeploy } = useGitHubDeploy();
+  const [showGitHubDeploymentDialog, setShowGitHubDeploymentDialog] = useState(false);
+  const [githubDeploymentFiles, setGithubDeploymentFiles] = useState<Record<string, string> | null>(null);
+  const [githubProjectName, setGithubProjectName] = useState('');
 
   const handleVercelDeployClick = async () => {
     setIsDeploying(true);
@@ -60,87 +67,142 @@ export const DeployButton = ({ onVercelDeploy, onNetlifyDeploy }: DeployButtonPr
     }
   };
 
+  const handleGitHubDeployClick = async () => {
+    setIsDeploying(true);
+    setDeployingTo('github');
+
+    try {
+      if (onGitHubDeploy) {
+        await onGitHubDeploy();
+      } else {
+        const result = await handleGitHubDeploy();
+        
+        if (result && result.success && result.files) {
+          setGithubDeploymentFiles(result.files);
+          setGithubProjectName(result.projectName);
+          setShowGitHubDeploymentDialog(true);
+        }
+      }
+    } finally {
+      setIsDeploying(false);
+      setDeployingTo(null);
+    }
+  };
+
   return (
-    <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden text-sm">
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger
-          disabled={isDeploying || !activePreview || isStreaming}
-          className="rounded-md items-center justify-center [&:is(:disabled,.disabled)]:cursor-not-allowed [&:is(:disabled,.disabled)]:opacity-60 px-3 py-1.5 text-xs bg-accent-500 text-white hover:text-bolt-elements-item-contentAccent [&:not(:disabled,.disabled)]:hover:bg-bolt-elements-button-primary-backgroundHover outline-accent-500 flex gap-1.7"
-        >
-          {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'}
-          <span className={classNames('i-ph:caret-down transition-transform')} />
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          className={classNames(
-            'z-[250]',
-            'bg-bolt-elements-background-depth-2',
-            'rounded-lg shadow-lg',
-            'border border-bolt-elements-borderColor',
-            'animate-in fade-in-0 zoom-in-95',
-            'py-1',
-          )}
-          sideOffset={5}
-          align="end"
-        >
-          <DropdownMenu.Item
+    <>
+      <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden text-sm">
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger
+            disabled={isDeploying || !activePreview || isStreaming}
+            className="rounded-md items-center justify-center [&:is(:disabled,.disabled)]:cursor-not-allowed [&:is(:disabled,.disabled)]:opacity-60 px-3 py-1.5 text-xs bg-accent-500 text-white hover:text-bolt-elements-item-contentAccent [&:not(:disabled,.disabled)]:hover:bg-bolt-elements-button-primary-backgroundHover outline-accent-500 flex gap-1.7"
+          >
+            {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'}
+            <span className={classNames('i-ph:caret-down transition-transform')} />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
             className={classNames(
-              'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
-              {
-                'opacity-60 cursor-not-allowed': isDeploying || !activePreview || !netlifyConn.user,
-              },
+              'z-[250]',
+              'bg-bolt-elements-background-depth-2',
+              'rounded-lg shadow-lg',
+              'border border-bolt-elements-borderColor',
+              'animate-in fade-in-0 zoom-in-95',
+              'py-1',
             )}
-            disabled={isDeploying || !activePreview || !netlifyConn.user}
-            onClick={handleNetlifyDeployClick}
+            sideOffset={5}
+            align="end"
           >
-            <img
-              className="w-5 h-5"
-              height="24"
-              width="24"
-              crossOrigin="anonymous"
-              src="https://cdn.simpleicons.org/netlify"
-            />
-            <span className="mx-auto">{!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'}</span>
-            {netlifyConn.user && <NetlifyDeploymentLink />}
-          </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className={classNames(
+                'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                {
+                  'opacity-60 cursor-not-allowed': isDeploying || !activePreview || !netlifyConn.user,
+                },
+              )}
+              disabled={isDeploying || !activePreview || !netlifyConn.user}
+              onClick={handleNetlifyDeployClick}
+            >
+              <img
+                className="w-5 h-5"
+                height="24"
+                width="24"
+                crossOrigin="anonymous"
+                src="https://cdn.simpleicons.org/netlify"
+              />
+              <span className="mx-auto">{!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'}</span>
+              {netlifyConn.user && <NetlifyDeploymentLink />}
+            </DropdownMenu.Item>
 
-          <DropdownMenu.Item
-            className={classNames(
-              'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
-              {
-                'opacity-60 cursor-not-allowed': isDeploying || !activePreview || !vercelConn.user,
-              },
-            )}
-            disabled={isDeploying || !activePreview || !vercelConn.user}
-            onClick={handleVercelDeployClick}
-          >
-            <img
-              className="w-5 h-5 bg-black p-1 rounded"
-              height="24"
-              width="24"
-              crossOrigin="anonymous"
-              src="https://cdn.simpleicons.org/vercel/white"
-              alt="vercel"
-            />
-            <span className="mx-auto">{!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'}</span>
-            {vercelConn.user && <VercelDeploymentLink />}
-          </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className={classNames(
+                'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                {
+                  'opacity-60 cursor-not-allowed': isDeploying || !activePreview || !vercelConn.user,
+                },
+              )}
+              disabled={isDeploying || !activePreview || !vercelConn.user}
+              onClick={handleVercelDeployClick}
+            >
+              <img
+                className="w-5 h-5 bg-black p-1 rounded"
+                height="24"
+                width="24"
+                crossOrigin="anonymous"
+                src="https://cdn.simpleicons.org/vercel/white"
+                alt="vercel"
+              />
+              <span className="mx-auto">{!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'}</span>
+              {vercelConn.user && <VercelDeploymentLink />}
+            </DropdownMenu.Item>
 
-          <DropdownMenu.Item
-            disabled
-            className="flex items-center w-full rounded-md px-4 py-2 text-sm text-bolt-elements-textTertiary gap-2 opacity-60 cursor-not-allowed"
-          >
-            <img
-              className="w-5 h-5"
-              height="24"
-              width="24"
-              crossOrigin="anonymous"
-              src="https://cdn.simpleicons.org/cloudflare"
-              alt="cloudflare"
-            />
-            <span className="mx-auto">Deploy to Cloudflare (Coming Soon)</span>
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </div>
+            <DropdownMenu.Item
+              className={classNames(
+                'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                {
+                  'opacity-60 cursor-not-allowed': isDeploying || !activePreview,
+                },
+              )}
+              disabled={isDeploying || !activePreview}
+              onClick={handleGitHubDeployClick}
+            >
+              <img
+                className="w-5 h-5"
+                height="24"
+                width="24"
+                crossOrigin="anonymous"
+                src="https://cdn.simpleicons.org/github"
+                alt="github"
+              />
+              <span className="mx-auto">Deploy to GitHub</span>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              disabled
+              className="flex items-center w-full rounded-md px-4 py-2 text-sm text-bolt-elements-textTertiary gap-2 opacity-60 cursor-not-allowed"
+            >
+              <img
+                className="w-5 h-5"
+                height="24"
+                width="24"
+                crossOrigin="anonymous"
+                src="https://cdn.simpleicons.org/cloudflare"
+                alt="cloudflare"
+              />
+              <span className="mx-auto">Deploy to Cloudflare (Coming Soon)</span>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+
+      {/* GitHub Deployment Dialog */}
+      {showGitHubDeploymentDialog && githubDeploymentFiles && (
+        <GitHubDeploymentDialog 
+          isOpen={showGitHubDeploymentDialog}
+          onClose={() => setShowGitHubDeploymentDialog(false)}
+          projectName={githubProjectName}
+          files={githubDeploymentFiles}
+        />
+      )}
+    </>
   );
 };