@tscircuit/fake-snippets 0.0.103 → 0.0.105

package/src/components/dialogs/GitHubRepositorySelector.tsx

@@ -1,17 +1,24 @@
-import { useRef } from "react"
+import { useRef, useState, useMemo } from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
 import { useAxios } from "@/hooks/use-axios"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useQuery } from "react-query"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
-import { Minus, Plus } from "lucide-react"
+import { Minus, Plus, RefreshCw } from "lucide-react"
 import { Switch } from "../ui/switch"
 
 interface GitHubRepositorySelectorProps {
@@ -19,9 +26,8 @@ interface GitHubRepositorySelectorProps {
   setSelectedRepository?: (value: string | null) => void
   disabled?: boolean
   open?: boolean
-  addFormContent?: (data: {
-    enablePrPreview?: boolean
-    privateBuild?: boolean
+  addFormContent?: (props: {
+    allowPrPreviews?: boolean
   }) => void
   formData?: any
 }
@@ -37,8 +43,15 @@ export const GitHubRepositorySelector = ({
   const axios = useAxios()
   const apiBaseUrl = useApiBaseUrl()
   const initialValue = useRef(selectedRepository).current
+  const [comboboxOpen, setComboboxOpen] = useState(false)
+  const [searchValue, setSearchValue] = useState("")
   // Fetch available repositories
-  const { data: repositoriesData, error: repositoriesError } = useQuery(
+  const {
+    data: repositoriesData,
+    error: repositoriesError,
+    refetch: refetchRepositories,
+    isLoading,
+  } = useQuery(
     ["github-repositories"],
     async () => {
       const response = await axios.get("/github/repos/list_available")
@@ -54,20 +67,103 @@ export const GitHubRepositorySelector = ({
     window.location.href = `${apiBaseUrl}/github/installations/create_new_installation_redirect?return_to_page=${window.location.pathname}`
   }
 
-  const handleValueChange = (newValue: string) => {
-    if (newValue === "connect-more") {
+  const handleRefreshRepositories = async () => {
+    try {
+      // First call the refresh endpoint to update repositories
+      await axios.post("/github/repos/refresh")
+      // Then refetch the repositories list
+      refetchRepositories()
+    } catch (error) {
+      console.error("Failed to refresh repositories:", error)
+      // Still try to refetch in case the error is not critical
+      refetchRepositories()
+    }
+  }
+
+  // Create searchable options for the combobox
+  const comboboxOptions = useMemo(() => {
+    const repos = repositoriesData?.repos || []
+    const repoOptions = repos.map((repo: any) => ({
+      value: repo.full_name,
+      label: repo.unscoped_name,
+      isPrivate: repo.private,
+      type: "repo" as const,
+    }))
+
+    const specialOptions = [
+      {
+        value: "connect-more",
+        label: "Connect More Repos",
+        type: "special" as const,
+        icon: "plus" as const,
+      },
+      ...(initialValue
+        ? [
+            {
+              value: "unlink//repo",
+              label: "Unlink Repo",
+              type: "special" as const,
+              icon: "minus" as const,
+            },
+          ]
+        : []),
+    ]
+
+    return [...repoOptions, ...specialOptions]
+  }, [repositoriesData?.repos, initialValue])
+
+  // Filter options based on search
+  const filteredOptions = useMemo(() => {
+    if (!searchValue) return comboboxOptions
+    return comboboxOptions.filter(
+      (option) =>
+        option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
+        option.value.toLowerCase().includes(searchValue.toLowerCase()),
+    )
+  }, [comboboxOptions, searchValue])
+
+  const handleComboboxSelect = (value: string) => {
+    if (value === "connect-more") {
       handleConnectMoreRepos()
-    } else if (newValue === "unlink//repo") {
-      setSelectedRepository?.("unlink//repo")
     } else {
-      setSelectedRepository?.(newValue)
+      setSelectedRepository?.(value)
     }
+    setComboboxOpen(false)
+    setSearchValue("")
+  }
+
+  const getDisplayValue = () => {
+    if (!selectedRepository) return "Select a repository"
+    const option = comboboxOptions.find(
+      (opt) => opt.value === selectedRepository,
+    )
+    return option?.label || selectedRepository
   }
 
   return (
     <>
       <div className="space-y-1 mb-3">
-        <Label htmlFor="repository">GitHub Repository</Label>
+        <div className="flex items-center justify-between">
+          <Label htmlFor="repository">GitHub Repository</Label>
+          {!(
+            (repositoriesError as any)?.response?.status === 400 &&
+            (repositoriesError as any)?.response?.data?.error_code ===
+              "github_not_connected"
+          ) && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleRefreshRepositories}
+              disabled={disabled || isLoading}
+              className="h-auto p-1"
+            >
+              <RefreshCw
+                className={`w-3 h-3 ${isLoading ? "animate-spin" : ""}`}
+              />
+            </Button>
+          )}
+        </div>
         {(repositoriesError as any)?.response?.status === 400 &&
         (repositoriesError as any)?.response?.data?.error_code ===
           "github_not_connected" ? (
@@ -94,71 +190,85 @@ export const GitHubRepositorySelector = ({
           </div>
         ) : (
           <div className="space-y-2">
-            <Select
-              value={selectedRepository}
-              onValueChange={handleValueChange}
-              disabled={disabled}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a repository" />
-              </SelectTrigger>
-              <SelectContent className="!z-[999]">
-                {repositoriesData?.repos?.map((repo: any) => (
-                  <SelectItem key={repo.full_name} value={repo.full_name}>
-                    <div className="flex items-center space-x-2">
-                      <span>{repo.unscoped_name}</span>
-                      {repo.private && (
-                        <span className="text-xs text-muted-foreground">
-                          (private)
-                        </span>
-                      )}
-                    </div>
-                  </SelectItem>
-                ))}
-                <SelectItem value="connect-more">
-                  <div className="flex items-center space-x-2 text-blue-600">
-                    <Plus className="w-3 h-3" />
-                    <span>Connect More Repos</span>
-                  </div>
-                </SelectItem>
-                {Boolean(initialValue) && (
-                  <SelectItem value="unlink//repo">
-                    <div className="flex items-center space-x-2 text-red-600">
-                      <Minus className="w-3 h-3" />
-                      <span>Unlink Repo</span>
-                    </div>
-                  </SelectItem>
-                )}
-              </SelectContent>
-            </Select>
+            <Popover open={comboboxOpen} onOpenChange={setComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={comboboxOpen}
+                  className="w-full justify-between"
+                  disabled={disabled}
+                >
+                  {getDisplayValue()}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-full p-0 z-[999]">
+                <Command shouldFilter={false}>
+                  <CommandInput
+                    value={searchValue}
+                    onValueChange={setSearchValue}
+                    placeholder="Search repositories..."
+                  />
+                  <CommandEmpty className="text-sm text-slate-500 py-6">
+                    No repositories found.
+                  </CommandEmpty>
+                  <CommandGroup className="max-h-[400px] overflow-y-auto">
+                    {filteredOptions.map((option) => (
+                      <CommandItem
+                        key={option.value}
+                        onSelect={() => handleComboboxSelect(option.value)}
+                        className="cursor-pointer"
+                      >
+                        <div className="flex items-center space-x-2 w-full">
+                          {option.type === "repo" ? (
+                            <>
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  selectedRepository === option.value
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              <span>{option.label}</span>
+                              {option.isPrivate && (
+                                <span className="text-xs text-muted-foreground">
+                                  (private)
+                                </span>
+                              )}
+                            </>
+                          ) : (
+                            <>
+                              {option.icon === "plus" ? (
+                                <Plus className="w-3 h-3 text-blue-600" />
+                              ) : (
+                                <Minus className="w-3 h-3 text-red-600" />
+                              )}
+                              <span
+                                className={
+                                  option.icon === "plus"
+                                    ? "text-blue-600"
+                                    : "text-red-600"
+                                }
+                              >
+                                {option.label}
+                              </span>
+                            </>
+                          )}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
           </div>
         )}
       </div>
 
       {initialValue && selectedRepository !== "unlink//repo" && (
         <div className="space-y-4 mt-4 p-4 border rounded-lg bg-gray-50">
-          <h4 className="text-sm font-medium text-gray-900">
-            Repository Settings
-          </h4>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label className="text-sm font-medium">Private Build</Label>
-              <p className="text-xs text-gray-500">
-                Keep build previews private
-              </p>
-            </div>
-            <Switch
-              checked={formData?.privateBuild}
-              onCheckedChange={(checked) =>
-                addFormContent?.({
-                  privateBuild: checked,
-                })
-              }
-              disabled={disabled}
-            />
-          </div>
-
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
               <Label className="text-sm font-medium">Enable PR Preview</Label>
@@ -167,10 +277,10 @@ export const GitHubRepositorySelector = ({
               </p>
             </div>
             <Switch
-              checked={formData?.enablePrPreview}
+              checked={formData?.allowPrPreviews}
               onCheckedChange={(checked) =>
                 addFormContent?.({
-                  enablePrPreview: checked,
+                  allowPrPreviews: checked,
                 })
               }
               disabled={disabled}

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -48,7 +48,9 @@ interface EditPackageDetailsDialogProps {
     newWebsite: string,
     newLicense: string | null,
     newDefaultView: string,
+    newAllowPrPreviews?: boolean,
   ) => void
+  currentAllowPrPreviews?: boolean
 }
 
 export const EditPackageDetailsDialog = ({
@@ -64,6 +66,7 @@ export const EditPackageDetailsDialog = ({
   unscopedPackageName,
   packageReleaseId,
   packageAuthor,
+  currentAllowPrPreviews,
   onUpdate,
 }: EditPackageDetailsDialogProps) => {
   const axios = useAxios()
@@ -85,6 +88,7 @@ export const EditPackageDetailsDialog = ({
     initialUnscopedPackageName: unscopedPackageName,
     isDialogOpen: open,
     initialVisibility: isPrivate ? "private" : "public",
+    initialAllowPrPreviews: currentAllowPrPreviews,
   })
 
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
@@ -117,6 +121,7 @@ export const EditPackageDetailsDialog = ({
         website: formData.website.trim(),
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
+        allow_pr_previews: formData.allowPrPreviews,
         github_repo_full_name:
           formData.githubRepoFullName === "unlink//repo"
             ? null

package/src/hooks/use-package-details-form.ts

@@ -18,6 +18,7 @@ interface PackageDetailsForm {
   defaultView: string
   githubRepoFullName: string | null
   unscopedPackageName: string
+  allowPrPreviews?: boolean
 }
 
 interface UsePackageDetailsFormProps {
@@ -29,6 +30,7 @@ interface UsePackageDetailsFormProps {
   initialUnscopedPackageName: string
   initialGithubRepoFullName: string | null
   isDialogOpen: boolean
+  initialAllowPrPreviews?: boolean
 }
 
 export const usePackageDetailsForm = ({
@@ -40,6 +42,7 @@ export const usePackageDetailsForm = ({
   initialUnscopedPackageName,
   initialGithubRepoFullName,
   isDialogOpen,
+  initialAllowPrPreviews,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
     description: initialDescription,
@@ -62,6 +65,7 @@ export const usePackageDetailsForm = ({
         githubRepoFullName: initialGithubRepoFullName,
         defaultView: initialDefaultView,
         unscopedPackageName: initialUnscopedPackageName,
+        allowPrPreviews: initialAllowPrPreviews,
       })
       setWebsiteError(null)
     }
@@ -98,6 +102,11 @@ export const usePackageDetailsForm = ({
     [formData.defaultView, initialDefaultView],
   )
 
+  const hasAllowPrPreviewsChanged = useMemo(
+    () => formData.allowPrPreviews !== initialAllowPrPreviews,
+    [formData.allowPrPreviews, initialAllowPrPreviews],
+  )
+
   const hasChanges = useMemo(
     () =>
       formData.description !== initialDescription ||
@@ -106,7 +115,8 @@ export const usePackageDetailsForm = ({
       formData.visibility !== initialVisibility ||
       formData.defaultView !== initialDefaultView ||
       formData.githubRepoFullName !== initialGithubRepoFullName ||
-      formData.unscopedPackageName !== initialUnscopedPackageName,
+      formData.unscopedPackageName !== initialUnscopedPackageName ||
+      formData.allowPrPreviews !== initialAllowPrPreviews,
     [
       formData,
       initialDescription,
@@ -116,6 +126,7 @@ export const usePackageDetailsForm = ({
       initialDefaultView,
       initialGithubRepoFullName,
       initialUnscopedPackageName,
+      initialAllowPrPreviews,
     ],
   )
 
@@ -128,6 +139,7 @@ export const usePackageDetailsForm = ({
     hasLicenseChanged,
     hasVisibilityChanged,
     hasDefaultViewChanged,
+    hasAllowPrPreviewsChanged,
     hasChanges,
     isFormValid,
   }