crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+
+interface GitHubRepositoryCardProps {
+  repo: GitHubRepoInfo;
+  onClone?: (repo: GitHubRepoInfo) => void;
+}
+
+export function GitHubRepositoryCard({ repo, onClone }: GitHubRepositoryCardProps) {
+  return (
+    <a
+      key={repo.name}
+      href={repo.html_url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block p-4 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-all duration-200"
+    >
+      <div className="flex flex-col h-full">
+        <div className="flex-1 space-y-3">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-2">
+              <div className="i-ph:git-repository w-4 h-4 text-bolt-elements-icon-info" />
+              <h5 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                {repo.name}
+              </h5>
+              {repo.private && (
+                <div className="i-ph:lock w-3 h-3 text-bolt-elements-textTertiary" title="Private repository" />
+              )}
+              {repo.fork && (
+                <div className="i-ph:git-fork w-3 h-3 text-bolt-elements-textTertiary" title="Forked repository" />
+              )}
+              {repo.archived && (
+                <div className="i-ph:archive w-3 h-3 text-bolt-elements-textTertiary" title="Archived repository" />
+              )}
+            </div>
+            <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+              <span className="flex items-center gap-1" title="Stars">
+                <div className="i-ph:star w-3.5 h-3.5 text-bolt-elements-icon-warning" />
+                {repo.stargazers_count.toLocaleString()}
+              </span>
+              <span className="flex items-center gap-1" title="Forks">
+                <div className="i-ph:git-fork w-3.5 h-3.5 text-bolt-elements-icon-info" />
+                {repo.forks_count.toLocaleString()}
+              </span>
+            </div>
+          </div>
+
+          {repo.description && (
+            <p className="text-xs text-bolt-elements-textSecondary line-clamp-2">{repo.description}</p>
+          )}
+
+          <div className="flex items-center gap-3 text-xs text-bolt-elements-textSecondary">
+            <span className="flex items-center gap-1" title="Default Branch">
+              <div className="i-ph:git-branch w-3.5 h-3.5" />
+              {repo.default_branch}
+            </span>
+            {repo.language && (
+              <span className="flex items-center gap-1" title="Primary Language">
+                <div className="w-2 h-2 rounded-full bg-current opacity-60" />
+                {repo.language}
+              </span>
+            )}
+            <span className="flex items-center gap-1" title="Last Updated">
+              <div className="i-ph:clock w-3.5 h-3.5" />
+              {new Date(repo.updated_at).toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })}
+            </span>
+          </div>
+
+          {/* Repository topics/tags */}
+          {repo.topics && repo.topics.length > 0 && (
+            <div className="flex items-center gap-2 text-xs">
+              {repo.topics.slice(0, 3).map((topic) => (
+                <span
+                  key={topic}
+                  className="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
+                  title={`Topic: ${topic}`}
+                >
+                  {topic}
+                </span>
+              ))}
+              {repo.topics.length > 3 && (
+                <span className="text-bolt-elements-textTertiary">+{repo.topics.length - 3} more</span>
+              )}
+            </div>
+          )}
+
+          {/* Repository size if available */}
+          {repo.size && (
+            <div className="text-xs text-bolt-elements-textTertiary">Size: {(repo.size / 1024).toFixed(1)} MB</div>
+          )}
+        </div>
+
+        {/* Bottom section with Clone button positioned at bottom right */}
+        <div className="flex items-center justify-between pt-3 mt-auto">
+          <span className="flex items-center gap-1 text-xs text-bolt-elements-textSecondary group-hover:text-bolt-elements-item-contentAccent transition-colors">
+            <div className="i-ph:arrow-square-out w-3.5 h-3.5" />
+            View
+          </span>
+          {onClone && (
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClone(repo);
+              }}
+              className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+              title="Clone repository"
+            >
+              <div className="i-ph:git-branch w-3.5 h-3.5" />
+              Clone
+            </button>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+}

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

@@ -0,0 +1,312 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { BranchSelector } from '~/components/ui/BranchSelector';
+import { GitHubRepositoryCard } from './GitHubRepositoryCard';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+import { useGitHubConnection, useGitHubStats } from '~/lib/hooks';
+import { classNames } from '~/utils/classNames';
+import { Search, RefreshCw, GitBranch, Calendar, Filter } from 'lucide-react';
+
+interface GitHubRepositorySelectorProps {
+  onClone?: (repoUrl: string, branch?: string) => void;
+  className?: string;
+}
+
+type SortOption = 'updated' | 'stars' | 'name' | 'created';
+type FilterOption = 'all' | 'own' | 'forks' | 'archived';
+
+export function GitHubRepositorySelector({ onClone, className }: GitHubRepositorySelectorProps) {
+  const { connection, isConnected } = useGitHubConnection();
+  const {
+    stats,
+    isLoading: isStatsLoading,
+    refreshStats,
+  } = useGitHubStats(connection, {
+    autoFetch: true,
+    cacheTimeout: 30 * 60 * 1000, // 30 minutes
+  });
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<SortOption>('updated');
+  const [filterBy, setFilterBy] = useState<FilterOption>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedRepo, setSelectedRepo] = useState<GitHubRepoInfo | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isBranchSelectorOpen, setIsBranchSelectorOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const repositories = stats?.repos || [];
+  const REPOS_PER_PAGE = 12;
+
+  // Filter and search repositories
+  const filteredRepositories = useMemo(() => {
+    if (!repositories) {
+      return [];
+    }
+
+    const filtered = repositories.filter((repo: GitHubRepoInfo) => {
+      // Search filter
+      const matchesSearch =
+        !searchQuery ||
+        repo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        repo.full_name.toLowerCase().includes(searchQuery.toLowerCase());
+
+      // Type filter
+      let matchesFilter = true;
+
+      switch (filterBy) {
+        case 'own':
+          matchesFilter = !repo.fork;
+          break;
+        case 'forks':
+          matchesFilter = repo.fork === true;
+          break;
+        case 'archived':
+          matchesFilter = repo.archived === true;
+          break;
+        case 'all':
+        default:
+          matchesFilter = true;
+          break;
+      }
+
+      return matchesSearch && matchesFilter;
+    });
+
+    // Sort repositories
+    filtered.sort((a: GitHubRepoInfo, b: GitHubRepoInfo) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'stars':
+          return b.stargazers_count - a.stargazers_count;
+        case 'created':
+          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(); // Using updated_at as proxy
+        case 'updated':
+        default:
+          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
+      }
+    });
+
+    return filtered;
+  }, [repositories, searchQuery, sortBy, filterBy]);
+
+  // Pagination
+  const totalPages = Math.ceil(filteredRepositories.length / REPOS_PER_PAGE);
+  const startIndex = (currentPage - 1) * REPOS_PER_PAGE;
+  const currentRepositories = filteredRepositories.slice(startIndex, startIndex + REPOS_PER_PAGE);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    setError(null);
+
+    try {
+      await refreshStats();
+    } catch (err) {
+      console.error('Failed to refresh GitHub repositories:', err);
+      setError(err instanceof Error ? err.message : 'Failed to refresh repositories');
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleCloneRepository = (repo: GitHubRepoInfo) => {
+    setSelectedRepo(repo);
+    setIsBranchSelectorOpen(true);
+  };
+
+  const handleBranchSelect = (branch: string) => {
+    if (onClone && selectedRepo) {
+      const cloneUrl = selectedRepo.html_url + '.git';
+      onClone(cloneUrl, branch);
+    }
+
+    setSelectedRepo(null);
+  };
+
+  const handleCloseBranchSelector = () => {
+    setIsBranchSelectorOpen(false);
+    setSelectedRepo(null);
+  };
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, sortBy, filterBy]);
+
+  if (!isConnected || !connection) {
+    return (
+      <div className="text-center p-8">
+        <p className="text-bolt-elements-textSecondary mb-4">Please connect to GitHub first to browse repositories</p>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Refresh Connection
+        </Button>
+      </div>
+    );
+  }
+
+  if (isStatsLoading && !stats) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 space-y-4">
+        <div className="animate-spin w-8 h-8 border-2 border-bolt-elements-borderColorActive border-t-transparent rounded-full" />
+        <p className="text-sm text-bolt-elements-textSecondary">Loading repositories...</p>
+      </div>
+    );
+  }
+
+  if (!repositories.length) {
+    return (
+      <div className="text-center p-8">
+        <GitBranch className="w-12 h-12 text-bolt-elements-textTertiary mx-auto mb-4" />
+        <p className="text-bolt-elements-textSecondary mb-4">No repositories found</p>
+        <Button variant="outline" onClick={handleRefresh} disabled={isRefreshing}>
+          <RefreshCw className={classNames('w-4 h-4 mr-2', { 'animate-spin': isRefreshing })} />
+          Refresh
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className={classNames('space-y-6', className)}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Header with stats */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary">Select Repository to Clone</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">
+            {filteredRepositories.length} of {repositories.length} repositories
+          </p>
+        </div>
+        <Button
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          variant="outline"
+          size="sm"
+          className="flex items-center gap-2"
+        >
+          <RefreshCw className={classNames('w-4 h-4', { 'animate-spin': isRefreshing })} />
+          Refresh
+        </Button>
+      </div>
+
+      {error && repositories.length > 0 && (
+        <div className="p-3 rounded-lg bg-yellow-50 border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700">
+          <p className="text-sm text-yellow-800 dark:text-yellow-200">Warning: {error}. Showing cached data.</p>
+        </div>
+      )}
+
+      {/* Search and Filters */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        {/* Search */}
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-bolt-elements-textTertiary" />
+          <input
+            type="text"
+            placeholder="Search repositories..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          />
+        </div>
+
+        {/* Sort */}
+        <div className="flex items-center gap-2">
+          <Calendar className="w-4 h-4 text-bolt-elements-textTertiary" />
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as SortOption)}
+            className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          >
+            <option value="updated">Recently updated</option>
+            <option value="stars">Most starred</option>
+            <option value="name">Name (A-Z)</option>
+            <option value="created">Recently created</option>
+          </select>
+        </div>
+
+        {/* Filter */}
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-bolt-elements-textTertiary" />
+          <select
+            value={filterBy}
+            onChange={(e) => setFilterBy(e.target.value as FilterOption)}
+            className="px-3 py-2 rounded-lg bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive"
+          >
+            <option value="all">All repositories</option>
+            <option value="own">Own repositories</option>
+            <option value="forks">Forked repositories</option>
+            <option value="archived">Archived repositories</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Repository Grid */}
+      {currentRepositories.length > 0 ? (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {currentRepositories.map((repo) => (
+              <GitHubRepositoryCard key={repo.id} repo={repo} onClone={() => handleCloneRepository(repo)} />
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between pt-4 border-t border-bolt-elements-borderColor">
+              <div className="text-sm text-bolt-elements-textSecondary">
+                Showing {Math.min(startIndex + 1, filteredRepositories.length)} to{' '}
+                {Math.min(startIndex + REPOS_PER_PAGE, filteredRepositories.length)} of {filteredRepositories.length}{' '}
+                repositories
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                  variant="outline"
+                  size="sm"
+                >
+                  Previous
+                </Button>
+                <span className="text-sm text-bolt-elements-textSecondary px-3">
+                  {currentPage} of {totalPages}
+                </span>
+                <Button
+                  onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+                  disabled={currentPage === totalPages}
+                  variant="outline"
+                  size="sm"
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-center py-8">
+          <p className="text-bolt-elements-textSecondary">No repositories found matching your search criteria.</p>
+        </div>
+      )}
+
+      {/* Branch Selector Modal */}
+      {selectedRepo && (
+        <BranchSelector
+          provider="github"
+          repoOwner={selectedRepo.full_name.split('/')[0]}
+          repoName={selectedRepo.full_name.split('/')[1]}
+          token={connection?.token || ''}
+          defaultBranch={selectedRepo.default_branch}
+          onBranchSelect={handleBranchSelect}
+          onClose={handleCloseBranchSelector}
+          isOpen={isBranchSelectorOpen}
+        />
+      )}
+    </motion.div>
+  );
+}