crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/@settings/tabs/github/components/GitHubConnection.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { useGitHubConnection } from '~/lib/hooks';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface GitHubConnectionProps {
+  connectionTest: ConnectionTestResult | null;
+  onTestConnection: () => void;
+}
+
+export function GitHubConnection({ connectionTest, onTestConnection }: GitHubConnectionProps) {
+  const { isConnected, isLoading, isConnecting, connect, disconnect, error } = useGitHubConnection();
+
+  const [token, setToken] = React.useState('');
+  const [tokenType, setTokenType] = React.useState<'classic' | 'fine-grained'>('classic');
+
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('handleConnect called with token:', token ? 'token provided' : 'no token', 'tokenType:', tokenType);
+
+    if (!token.trim()) {
+      console.log('No token provided, returning early');
+      return;
+    }
+
+    try {
+      console.log('Calling connect function...');
+      await connect(token, tokenType);
+      console.log('Connect function completed successfully');
+      setToken(''); // Clear token on successful connection
+    } catch (error) {
+      console.log('Connect function failed:', error);
+
+      // Error handling is done in the hook
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="flex items-center gap-2">
+          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+          <span className="text-bolt-elements-textSecondary">Loading connection...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        {!isConnected && (
+          <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+            <p className="flex items-center gap-1 mb-1">
+              <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+              <span className="font-medium">Tip:</span> You can also set the{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITHUB_ACCESS_TOKEN
+              </code>{' '}
+              environment variable to connect automatically.
+            </p>
+            <p>
+              For fine-grained tokens, also set{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITHUB_TOKEN_TYPE=fine-grained
+              </code>
+            </p>
+          </div>
+        )}
+
+        <form onSubmit={handleConnect} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                Token Type
+              </label>
+              <select
+                value={tokenType}
+                onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
+                disabled={isConnecting || isConnected}
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
+                  'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
+                  'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
+                  'disabled:opacity-50',
+                )}
+              >
+                <option value="classic">Personal Access Token (Classic)</option>
+                <option value="fine-grained">Fine-grained Token</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                {tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+              </label>
+              <input
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                disabled={isConnecting || isConnected}
+                placeholder={`Enter your GitHub ${
+                  tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
+                }`}
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                  'border border-[#E5E5E5] dark:border-[#333333]',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href={`https://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+                <span className="mx-2">•</span>
+                <span>
+                  Required scopes:{' '}
+                  {tokenType === 'classic' ? 'repo, read:org, read:user' : 'Repository access, Organization access'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+              <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            {!isConnected ? (
+              <button
+                type="submit"
+                disabled={isConnecting || !token.trim()}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {isConnecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            ) : (
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-4">
+                  <button
+                    onClick={disconnect}
+                    type="button"
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                      'bg-red-500 text-white',
+                      'hover:bg-red-600',
+                    )}
+                  >
+                    <div className="i-ph:plug w-4 h-4" />
+                    Disconnect
+                  </button>
+                  <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                    <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                    Connected to GitHub
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => window.open('https://github.com/dashboard', '_blank', 'noopener,noreferrer')}
+                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                  >
+                    <div className="i-ph:layout w-4 h-4" />
+                    Dashboard
+                  </Button>
+                  <Button
+                    onClick={onTestConnection}
+                    disabled={connectionTest?.status === 'testing'}
+                    variant="outline"
+                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                  >
+                    {connectionTest?.status === 'testing' ? (
+                      <>
+                        <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                        Testing...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Test Connection
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </motion.div>
+  );
+}

tools/bolt.diy/app/components/@settings/tabs/github/components/GitHubErrorBoundary.tsx

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+import { Button } from '~/components/ui/Button';
+import { AlertTriangle } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class GitHubErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('GitHub Error Boundary caught an error:', error, errorInfo);
+
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center p-8 text-center space-y-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg">
+          <div className="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
+            <AlertTriangle className="w-6 h-6 text-red-500" />
+          </div>
+
+          <div>
+            <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Integration Error</h3>
+            <p className="text-sm text-bolt-elements-textSecondary mb-4 max-w-md">
+              Something went wrong while loading GitHub data. This could be due to network issues, API limits, or a
+              temporary problem.
+            </p>
+
+            {this.state.error && (
+              <details className="text-xs text-bolt-elements-textTertiary mb-4">
+                <summary className="cursor-pointer hover:text-bolt-elements-textSecondary">Show error details</summary>
+                <pre className="mt-2 p-2 bg-bolt-elements-background-depth-2 rounded text-left overflow-auto">
+                  {this.state.error.message}
+                </pre>
+              </details>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={this.handleRetry}>
+              Try Again
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => window.location.reload()}>
+              Reload Page
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Higher-order component for wrapping components with error boundary
+export function withGitHubErrorBoundary<P extends object>(component: React.ComponentType<P>) {
+  return function WrappedComponent(props: P) {
+    return <GitHubErrorBoundary>{React.createElement(component, props)}</GitHubErrorBoundary>;
+  };
+}
+
+// Hook for handling async errors in GitHub operations
+export function useGitHubErrorHandler() {
+  const handleError = React.useCallback((error: unknown, context?: string) => {
+    console.error(`GitHub Error ${context ? `(${context})` : ''}:`, error);
+
+    /*
+     * You could integrate with error tracking services here
+     * For example: Sentry, LogRocket, etc.
+     */
+
+    return error instanceof Error ? error.message : 'An unknown error occurred';
+  }, []);
+
+  return { handleError };
+}

tools/bolt.diy/app/components/@settings/tabs/github/components/GitHubProgressiveLoader.tsx

@@ -0,0 +1,266 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { Loader2, ChevronDown, RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ProgressiveLoaderProps {
+  isLoading: boolean;
+  isRefreshing?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  onRefresh?: () => void;
+  children: React.ReactNode;
+  className?: string;
+  loadingMessage?: string;
+  refreshingMessage?: string;
+  showProgress?: boolean;
+  progressSteps?: Array<{
+    key: string;
+    label: string;
+    completed: boolean;
+    loading?: boolean;
+    error?: boolean;
+  }>;
+}
+
+export function GitHubProgressiveLoader({
+  isLoading,
+  isRefreshing = false,
+  error,
+  onRetry,
+  onRefresh,
+  children,
+  className = '',
+  loadingMessage = 'Loading...',
+  refreshingMessage = 'Refreshing...',
+  showProgress = false,
+  progressSteps = [],
+}: ProgressiveLoaderProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Calculate progress percentage
+  const progress = useMemo(() => {
+    if (!showProgress || progressSteps.length === 0) {
+      return 0;
+    }
+
+    const completed = progressSteps.filter((step) => step.completed).length;
+
+    return Math.round((completed / progressSteps.length) * 100);
+  }, [showProgress, progressSteps]);
+
+  const handleToggleExpanded = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  // Loading state with progressive steps
+  if (isLoading) {
+    return (
+      <div className={classNames('flex flex-col items-center justify-center py-8', className)}>
+        <div className="relative mb-4">
+          <Loader2 className="w-8 h-8 animate-spin text-bolt-elements-item-contentAccent" />
+          {showProgress && progress > 0 && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="text-xs font-medium text-bolt-elements-item-contentAccent">{progress}%</span>
+            </div>
+          )}
+        </div>
+
+        <div className="text-center space-y-2">
+          <p className="text-sm font-medium text-bolt-elements-textPrimary">{loadingMessage}</p>
+
+          {showProgress && progressSteps.length > 0 && (
+            <div className="w-full max-w-sm">
+              {/* Progress bar */}
+              <div className="w-full bg-bolt-elements-background-depth-2 rounded-full h-2 mb-3">
+                <motion.div
+                  className="bg-bolt-elements-item-contentAccent h-2 rounded-full"
+                  initial={{ width: 0 }}
+                  animate={{ width: `${progress}%` }}
+                  transition={{ duration: 0.5, ease: 'easeOut' }}
+                />
+              </div>
+
+              {/* Steps toggle */}
+              <button
+                onClick={handleToggleExpanded}
+                className="flex items-center justify-center gap-2 text-xs text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+              >
+                <span>Show details</span>
+                <ChevronDown
+                  className={classNames(
+                    'w-3 h-3 transform transition-transform duration-200',
+                    isExpanded ? 'rotate-180' : '',
+                  )}
+                />
+              </button>
+
+              {/* Progress steps */}
+              <AnimatePresence>
+                {isExpanded && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="mt-3 space-y-2 overflow-hidden"
+                  >
+                    {progressSteps.map((step) => (
+                      <div key={step.key} className="flex items-center gap-2 text-xs">
+                        {step.error ? (
+                          <AlertCircle className="w-3 h-3 text-red-500 flex-shrink-0" />
+                        ) : step.completed ? (
+                          <CheckCircle className="w-3 h-3 text-green-500 flex-shrink-0" />
+                        ) : step.loading ? (
+                          <Loader2 className="w-3 h-3 animate-spin text-bolt-elements-item-contentAccent flex-shrink-0" />
+                        ) : (
+                          <div className="w-3 h-3 rounded-full border border-bolt-elements-borderColor flex-shrink-0" />
+                        )}
+                        <span
+                          className={classNames(
+                            step.error
+                              ? 'text-red-500'
+                              : step.completed
+                                ? 'text-green-600 dark:text-green-400'
+                                : step.loading
+                                  ? 'text-bolt-elements-textPrimary'
+                                  : 'text-bolt-elements-textSecondary',
+                          )}
+                        >
+                          {step.label}
+                        </span>
+                      </div>
+                    ))}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={classNames('flex flex-col items-center justify-center py-8 text-center space-y-4', className)}>
+        <div className="w-10 h-10 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
+          <AlertCircle className="w-5 h-5 text-red-500" />
+        </div>
+
+        <div>
+          <h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-1">Failed to Load</h3>
+          <p className="text-xs text-bolt-elements-textSecondary mb-4 max-w-sm">{error}</p>
+        </div>
+
+        <div className="flex gap-2">
+          {onRetry && (
+            <Button variant="outline" size="sm" onClick={onRetry} className="text-xs">
+              <RefreshCw className="w-3 h-3 mr-1" />
+              Try Again
+            </Button>
+          )}
+          {onRefresh && (
+            <Button variant="outline" size="sm" onClick={onRefresh} className="text-xs">
+              <RefreshCw className="w-3 h-3 mr-1" />
+              Refresh
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Success state - render children with optional refresh indicator
+  return (
+    <div className={classNames('relative', className)}>
+      {isRefreshing && (
+        <div className="absolute top-0 right-0 z-10">
+          <div className="flex items-center gap-2 px-2 py-1 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg shadow-sm">
+            <Loader2 className="w-3 h-3 animate-spin text-bolt-elements-item-contentAccent" />
+            <span className="text-xs text-bolt-elements-textSecondary">{refreshingMessage}</span>
+          </div>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}
+
+// Hook for managing progressive loading steps
+export function useProgressiveLoader() {
+  const [steps, setSteps] = useState<
+    Array<{
+      key: string;
+      label: string;
+      completed: boolean;
+      loading?: boolean;
+      error?: boolean;
+    }>
+  >([]);
+
+  const addStep = useCallback((key: string, label: string) => {
+    setSteps((prev) => [
+      ...prev.filter((step) => step.key !== key),
+      { key, label, completed: false, loading: false, error: false },
+    ]);
+  }, []);
+
+  const updateStep = useCallback(
+    (
+      key: string,
+      updates: {
+        completed?: boolean;
+        loading?: boolean;
+        error?: boolean;
+        label?: string;
+      },
+    ) => {
+      setSteps((prev) => prev.map((step) => (step.key === key ? { ...step, ...updates } : step)));
+    },
+    [],
+  );
+
+  const removeStep = useCallback((key: string) => {
+    setSteps((prev) => prev.filter((step) => step.key !== key));
+  }, []);
+
+  const clearSteps = useCallback(() => {
+    setSteps([]);
+  }, []);
+
+  const startStep = useCallback(
+    (key: string) => {
+      updateStep(key, { loading: true, error: false });
+    },
+    [updateStep],
+  );
+
+  const completeStep = useCallback(
+    (key: string) => {
+      updateStep(key, { completed: true, loading: false, error: false });
+    },
+    [updateStep],
+  );
+
+  const errorStep = useCallback(
+    (key: string) => {
+      updateStep(key, { error: true, loading: false });
+    },
+    [updateStep],
+  );
+
+  return {
+    steps,
+    addStep,
+    updateStep,
+    removeStep,
+    clearSteps,
+    startStep,
+    completeStep,
+    errorStep,
+  };
+}