crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,291 @@
+import React from 'react';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { classNames } from '~/utils/classNames';
+import { useGitHubStats } from '~/lib/hooks';
+import type { GitHubConnection, GitHubStats as GitHubStatsType } from '~/types/GitHub';
+import { GitHubErrorBoundary } from './GitHubErrorBoundary';
+
+interface GitHubStatsProps {
+  connection: GitHubConnection;
+  isExpanded: boolean;
+  onToggleExpanded: (expanded: boolean) => void;
+}
+
+export function GitHubStats({ connection, isExpanded, onToggleExpanded }: GitHubStatsProps) {
+  const { stats, isLoading, isRefreshing, refreshStats, isStale } = useGitHubStats(
+    connection,
+    {
+      autoFetch: true,
+      cacheTimeout: 30 * 60 * 1000, // 30 minutes
+    },
+    !connection?.token,
+  ); // Use server-side if no token
+
+  return (
+    <GitHubErrorBoundary>
+      <GitHubStatsContent
+        stats={stats}
+        isLoading={isLoading}
+        isRefreshing={isRefreshing}
+        refreshStats={refreshStats}
+        isStale={isStale}
+        isExpanded={isExpanded}
+        onToggleExpanded={onToggleExpanded}
+      />
+    </GitHubErrorBoundary>
+  );
+}
+
+function GitHubStatsContent({
+  stats,
+  isLoading,
+  isRefreshing,
+  refreshStats,
+  isStale,
+  isExpanded,
+  onToggleExpanded,
+}: {
+  stats: GitHubStatsType | null;
+  isLoading: boolean;
+  isRefreshing: boolean;
+  refreshStats: () => Promise<void>;
+  isStale: boolean;
+  isExpanded: boolean;
+  onToggleExpanded: (expanded: boolean) => void;
+}) {
+  if (!stats) {
+    return (
+      <div className="mt-6 border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor pt-6">
+        <div className="flex items-center justify-center p-8">
+          <div className="flex items-center gap-2">
+            {isLoading ? (
+              <>
+                <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                <span className="text-bolt-elements-textSecondary">Loading GitHub stats...</span>
+              </>
+            ) : (
+              <span className="text-bolt-elements-textSecondary">No stats available</span>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-6 border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor pt-6">
+      <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                GitHub Stats
+                {isStale && <span className="text-bolt-elements-textTertiary ml-1">(Stale)</span>}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  refreshStats();
+                }}
+                disabled={isRefreshing}
+                variant="outline"
+                size="sm"
+                className="text-xs"
+              >
+                {isRefreshing ? (
+                  <>
+                    <div className="i-ph:spinner-gap w-3 h-3 animate-spin" />
+                    Refreshing...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:arrows-clockwise w-3 h-3" />
+                    Refresh
+                  </>
+                )}
+              </Button>
+              <div
+                className={classNames(
+                  'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                  isExpanded ? 'rotate-180' : '',
+                )}
+              />
+            </div>
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="overflow-hidden">
+          <div className="space-y-4 mt-4">
+            {/* Languages Section */}
+            <div className="mb-6">
+              <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
+              {stats.mostUsedLanguages && stats.mostUsedLanguages.length > 0 ? (
+                <div className="space-y-3">
+                  <div className="flex flex-wrap gap-2">
+                    {stats.mostUsedLanguages.slice(0, 15).map(({ language, bytes, repos }) => (
+                      <span
+                        key={language}
+                        className="px-3 py-1 text-xs rounded-full bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText"
+                        title={`${language}: ${(bytes / 1024 / 1024).toFixed(2)}MB across ${repos} repos`}
+                      >
+                        {language} ({repos})
+                      </span>
+                    ))}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">
+                    Based on actual codebase size across repositories
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-wrap gap-2">
+                  {Object.entries(stats.languages)
+                    .sort(([, a], [, b]) => b - a)
+                    .slice(0, 5)
+                    .map(([language]) => (
+                      <span
+                        key={language}
+                        className="px-3 py-1 text-xs rounded-full bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText"
+                      >
+                        {language}
+                      </span>
+                    ))}
+                </div>
+              )}
+            </div>
+
+            {/* GitHub Overview Summary */}
+            <div className="mb-6 p-4 bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor">
+              <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">GitHub Overview</h4>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                    {(stats.publicRepos || 0) + (stats.privateRepos || 0)}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Total Repositories</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">{stats.totalBranches || 0}</div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Total Branches</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                    {stats.organizations?.length || 0}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Organizations</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                    {Object.keys(stats.languages).length}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary">Languages Used</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Activity Summary */}
+            <div className="mb-6">
+              <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Activity Summary</h5>
+              <div className="grid grid-cols-4 gap-4">
+                {[
+                  {
+                    label: 'Total Branches',
+                    value: stats.totalBranches || 0,
+                    icon: 'i-ph:git-branch',
+                    iconColor: 'text-bolt-elements-icon-info',
+                  },
+                  {
+                    label: 'Contributors',
+                    value: stats.totalContributors || 0,
+                    icon: 'i-ph:users',
+                    iconColor: 'text-bolt-elements-icon-success',
+                  },
+                  {
+                    label: 'Issues',
+                    value: stats.totalIssues || 0,
+                    icon: 'i-ph:circle',
+                    iconColor: 'text-bolt-elements-icon-warning',
+                  },
+                  {
+                    label: 'Pull Requests',
+                    value: stats.totalPullRequests || 0,
+                    icon: 'i-ph:git-pull-request',
+                    iconColor: 'text-bolt-elements-icon-accent',
+                  },
+                ].map((stat, index) => (
+                  <div
+                    key={index}
+                    className="flex flex-col p-3 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor"
+                  >
+                    <span className="text-xs text-bolt-elements-textSecondary">{stat.label}</span>
+                    <span className="text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-1">
+                      <div className={`${stat.icon} w-4 h-4 ${stat.iconColor}`} />
+                      {stat.value.toLocaleString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Organizations Section */}
+            {stats.organizations && stats.organizations.length > 0 && (
+              <div>
+                <h5 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Organizations</h5>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {stats.organizations.map((org) => (
+                    <a
+                      key={org.login}
+                      href={org.html_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive dark:hover:border-bolt-elements-borderColorActive transition-all duration-200"
+                    >
+                      <img
+                        src={org.avatar_url}
+                        alt={org.login}
+                        className="w-8 h-8 rounded-full border border-bolt-elements-borderColor"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <h6 className="text-sm font-medium text-bolt-elements-textPrimary truncate">
+                          {org.name || org.login}
+                        </h6>
+                        <p className="text-xs text-bolt-elements-textSecondary truncate">{org.login}</p>
+                        {org.description && (
+                          <p className="text-xs text-bolt-elements-textTertiary truncate">{org.description}</p>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 text-xs text-bolt-elements-textSecondary">
+                        {org.public_repos && (
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:folder w-3 h-3" />
+                            {org.public_repos}
+                          </span>
+                        )}
+                        {org.followers && (
+                          <span className="flex items-center gap-1">
+                            <div className="i-ph:users w-3 h-3" />
+                            {org.followers}
+                          </span>
+                        )}
+                      </div>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Last Updated */}
+            <div className="pt-2 border-t border-bolt-elements-borderColor">
+              <span className="text-xs text-bolt-elements-textSecondary">
+                Last updated: {stats.lastUpdated ? new Date(stats.lastUpdated).toLocaleString() : 'Never'}
+              </span>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { GitHubUserResponse } from '~/types/GitHub';
+
+interface GitHubUserProfileProps {
+  user: GitHubUserResponse;
+  className?: string;
+}
+
+export function GitHubUserProfile({ user, className = '' }: GitHubUserProfileProps) {
+  return (
+    <div
+      className={`flex items-center gap-4 p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg ${className}`}
+    >
+      <img
+        src={user.avatar_url}
+        alt={user.login}
+        className="w-12 h-12 rounded-full border-2 border-bolt-elements-item-contentAccent dark:border-bolt-elements-item-contentAccent"
+      />
+      <div>
+        <h4 className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+          {user.name || user.login}
+        </h4>
+        <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">@{user.login}</p>
+        {user.bio && (
+          <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary mt-1">
+            {user.bio}
+          </p>
+        )}
+        <div className="flex items-center gap-4 mt-2 text-xs text-bolt-elements-textSecondary">
+          <span className="flex items-center gap-1">
+            <div className="i-ph:users w-3 h-3" />
+            {user.followers} followers
+          </span>
+          <span className="flex items-center gap-1">
+            <div className="i-ph:folder w-3 h-3" />
+            {user.public_repos} public repos
+          </span>
+          <span className="flex items-center gap-1">
+            <div className="i-ph:file-text w-3 h-3" />
+            {user.public_gists} gists
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,264 @@
+import React from 'react';
+import { Loader2, AlertCircle, CheckCircle, Info, Github } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+
+interface LoadingStateProps {
+  message?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function LoadingState({ message = 'Loading...', size = 'md', className = '' }: LoadingStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary',
+        className,
+      )}
+    >
+      <Loader2 className={classNames('animate-spin mb-2', sizeClasses[size])} />
+      <p className={classNames('text-bolt-elements-textSecondary', textSizeClasses[size])}>{message}</p>
+    </div>
+  );
+}
+
+interface ErrorStateProps {
+  title?: string;
+  message: string;
+  onRetry?: () => void;
+  retryLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function ErrorState({
+  title = 'Error',
+  message,
+  onRetry,
+  retryLabel = 'Try Again',
+  size = 'md',
+  className = '',
+}: ErrorStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
+      <AlertCircle className={classNames('text-red-500 mb-2', sizeClasses[size])} />
+      <h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
+      <p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
+        >
+          {retryLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface SuccessStateProps {
+  title?: string;
+  message: string;
+  onAction?: () => void;
+  actionLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function SuccessState({
+  title = 'Success',
+  message,
+  onAction,
+  actionLabel = 'Continue',
+  size = 'md',
+  className = '',
+}: SuccessStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
+      <CheckCircle className={classNames('text-green-500 mb-2', sizeClasses[size])} />
+      <h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
+      <p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
+      {onAction && (
+        <button
+          onClick={onAction}
+          className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface GitHubConnectionRequiredProps {
+  onConnect?: () => void;
+  className?: string;
+}
+
+export function GitHubConnectionRequired({ onConnect, className = '' }: GitHubConnectionRequiredProps) {
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-12 text-center', className)}>
+      <Github className="w-12 h-12 text-bolt-elements-textTertiary mb-4" />
+      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Connection Required</h3>
+      <p className="text-sm text-bolt-elements-textSecondary mb-6 max-w-md">
+        Please connect your GitHub account to access this feature. You'll be able to browse repositories, push code, and
+        manage your GitHub integration.
+      </p>
+      {onConnect && (
+        <button
+          onClick={onConnect}
+          className="px-6 py-3 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors flex items-center gap-2"
+        >
+          <Github className="w-4 h-4" />
+          Connect GitHub
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface InformationStateProps {
+  title: string;
+  message: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  onAction?: () => void;
+  actionLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function InformationState({
+  title,
+  message,
+  icon = Info,
+  onAction,
+  actionLabel = 'Got it',
+  size = 'md',
+  className = '',
+}: InformationStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  const textSizeClasses = {
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+  };
+
+  return (
+    <div className={classNames('flex flex-col items-center justify-center py-8 text-center', className)}>
+      {React.createElement(icon, { className: classNames('text-blue-500 mb-2', sizeClasses[size]) })}
+      <h3 className={classNames('font-medium text-bolt-elements-textPrimary mb-1', textSizeClasses[size])}>{title}</h3>
+      <p className={classNames('text-bolt-elements-textSecondary mb-4', textSizeClasses[size])}>{message}</p>
+      {onAction && (
+        <button
+          onClick={onAction}
+          className="px-4 py-2 bg-bolt-elements-item-contentAccent text-white rounded-lg hover:bg-bolt-elements-item-contentAccent/90 transition-colors"
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface ConnectionTestIndicatorProps {
+  status: 'success' | 'error' | 'testing' | null;
+  message?: string;
+  timestamp?: number;
+  className?: string;
+}
+
+export function ConnectionTestIndicator({ status, message, timestamp, className = '' }: ConnectionTestIndicatorProps) {
+  if (!status) {
+    return null;
+  }
+
+  const getStatusColor = () => {
+    switch (status) {
+      case 'success':
+        return 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700';
+      case 'error':
+        return 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700';
+      case 'testing':
+        return 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700';
+      default:
+        return 'bg-gray-50 border-gray-200 dark:bg-gray-900/20 dark:border-gray-700';
+    }
+  };
+
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'success':
+        return <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />;
+      case 'error':
+        return <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400" />;
+      case 'testing':
+        return <Loader2 className="w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />;
+      default:
+        return <Info className="w-5 h-5 text-gray-600 dark:text-gray-400" />;
+    }
+  };
+
+  const getStatusTextColor = () => {
+    switch (status) {
+      case 'success':
+        return 'text-green-800 dark:text-green-200';
+      case 'error':
+        return 'text-red-800 dark:text-red-200';
+      case 'testing':
+        return 'text-blue-800 dark:text-blue-200';
+      default:
+        return 'text-gray-800 dark:text-gray-200';
+    }
+  };
+
+  return (
+    <div className={classNames(`p-4 rounded-lg border ${getStatusColor()}`, className)}>
+      <div className="flex items-center gap-2">
+        {getStatusIcon()}
+        <span className={classNames('text-sm font-medium', getStatusTextColor())}>{message || status}</span>
+      </div>
+      {timestamp && <p className="text-xs text-gray-500 mt-1">{new Date(timestamp).toLocaleString()}</p>}
+    </div>
+  );
+}