@tscircuit/fake-snippets 0.0.121 → 0.0.123

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

@@ -1,474 +0,0 @@
-import { useState } from "react"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { useAxios } from "@/hooks/use-axios"
-import { usePackageDetailsForm } from "@/hooks/use-package-details-form"
-import { useToast } from "@/hooks/use-toast"
-import { useMutation, useQueryClient } from "react-query"
-import { getLicenseContent } from "../ViewPackagePage/utils/get-license-content"
-import { Button } from "../ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../ui/dialog"
-import { Input } from "../ui/input"
-import { Label } from "../ui/label"
-import { Textarea } from "../ui/textarea"
-import { createUseDialog } from "./create-use-dialog"
-import { ChevronDown } from "lucide-react"
-import { useLocation } from "wouter"
-import { useDeletePackage } from "@/hooks/use-delete-package"
-import { GitHubRepositorySelector } from "./GitHubRepositorySelector"
-
-interface EditPackageDetailsDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  packageId: string
-  currentDescription: string
-  currentWebsite: string
-  currentLicense?: string | null
-  currentDefaultView?: string
-  currentGithubRepoFullName?: string | null
-  isPrivate?: boolean
-  packageName: string
-  unscopedPackageName: string
-  packageReleaseId: string | null
-  packageAuthor?: string | null
-  onUpdate?: (
-    newDescription: string,
-    newWebsite: string,
-    newLicense: string | null,
-    newDefaultView: string,
-    newAllowPrPreviews?: boolean,
-  ) => void
-  currentAllowPrPreviews?: boolean
-}
-
-export const EditPackageDetailsDialog = ({
-  open,
-  onOpenChange,
-  packageId,
-  currentDescription,
-  currentWebsite,
-  currentLicense,
-  currentDefaultView = "files",
-  currentGithubRepoFullName,
-  isPrivate = false,
-  unscopedPackageName,
-  packageReleaseId,
-  packageAuthor,
-  currentAllowPrPreviews,
-  onUpdate,
-}: EditPackageDetailsDialogProps) => {
-  const axios = useAxios()
-  const { toast } = useToast()
-  const qc = useQueryClient()
-  const {
-    formData,
-    setFormData,
-    websiteError,
-    hasLicenseChanged,
-    hasChanges,
-    isFormValid,
-  } = usePackageDetailsForm({
-    initialDescription: currentDescription,
-    initialGithubRepoFullName: currentGithubRepoFullName ?? null,
-    initialWebsite: currentWebsite,
-    initialLicense: currentLicense || null,
-    initialDefaultView: currentDefaultView,
-    initialUnscopedPackageName: unscopedPackageName,
-    isDialogOpen: open,
-    initialVisibility: isPrivate ? "private" : "public",
-    initialAllowPrPreviews: currentAllowPrPreviews,
-  })
-
-  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
-  const [dangerOpen, setDangerOpen] = useState(false)
-  const [, setLocation] = useLocation()
-
-  const deletePackageMutation = useDeletePackage({
-    onSuccess: async () => {
-      await qc.invalidateQueries(["packages"]) // Invalidate the packages query
-      onOpenChange(false) // Close the dialog
-      setLocation("/dashboard") // Redirect to the dashboard
-    },
-  })
-  const updatePackageDetailsMutation = useMutation({
-    mutationFn: async () => {
-      if (!isFormValid)
-        throw new Error("Please fix the form errors before submitting")
-
-      if (hasLicenseChanged) {
-        await axios.post("/package_releases/update", {
-          package_id: packageId,
-          package_release_id: packageReleaseId,
-          license: formData.license ?? "unset",
-        })
-      }
-
-      const response = await axios.post("/packages/update", {
-        package_id: packageId,
-        description: formData.description.trim(),
-        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
-            : formData.githubRepoFullName,
-        ...(formData.unscopedPackageName !== unscopedPackageName && {
-          name: formData.unscopedPackageName.trim(),
-        }),
-      })
-      if (response.status !== 200)
-        throw new Error("Failed to update package details")
-
-      const filesRes = await axios.get("/package_files/list", {
-        params: {
-          package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
-        },
-      })
-      const packageFiles: string[] =
-        filesRes.status === 200
-          ? filesRes.data.package_files.map((x: any) => x.file_path)
-          : []
-      const licenseContent = getLicenseContent(
-        formData.license ?? "",
-        packageAuthor,
-      )
-
-      if (hasLicenseChanged) {
-        if (packageFiles.includes("LICENSE") && !licenseContent) {
-          await axios.post("/package_files/delete", {
-            package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
-            file_path: "LICENSE",
-          })
-        }
-        if (licenseContent) {
-          await axios.post("/package_files/create_or_update", {
-            package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
-            file_path: "LICENSE",
-            content_text: licenseContent,
-          })
-        }
-      }
-
-      if (formData.unscopedPackageName !== unscopedPackageName) {
-        // Use router for client-side navigation
-        window.history.replaceState(
-          {},
-          "",
-          `/${packageAuthor}/${formData.unscopedPackageName}`,
-        )
-      }
-
-      return {
-        description: formData.description,
-        website: formData.website,
-        license: formData.license,
-        visibility: formData.visibility,
-        defaultView: formData.defaultView,
-      }
-    },
-    onMutate: async () => {
-      await qc.cancelQueries(["packages", packageId])
-      const previous = qc.getQueryData(["packages", packageId])
-      qc.setQueryData(["packages", packageId], (old: any) => ({
-        ...old,
-        description: formData.description,
-        website: formData.website,
-        license: formData.license,
-        is_private: formData.visibility == "private",
-        default_view: formData.defaultView,
-      }))
-      return { previous }
-    },
-    onSuccess: (data) => {
-      onUpdate?.(data.description, data.website, data.license, data.defaultView)
-      onOpenChange(false)
-      qc.invalidateQueries("packageFile")
-      qc.invalidateQueries(["packageFiles", packageReleaseId])
-      toast({
-        title: "Package details updated",
-        description: "Successfully updated package details",
-      })
-    },
-    onError: (error, _, context) => {
-      qc.setQueryData(["packages", packageId], context?.previous)
-      toast({
-        title: "Error",
-        description:
-          (error as any)?.data?.error?.message ||
-          "Failed to update package details. Please try again.",
-        variant: "destructive",
-      })
-    },
-    onSettled: () => qc.invalidateQueries(["packages", packageId]),
-  })
-
-  return (
-    <div>
-      <Dialog open={showConfirmDelete} onOpenChange={setShowConfirmDelete}>
-        <DialogContent className="w-[90vw] p-6 rounded-2xl shadow-lg">
-          <DialogHeader>
-            <DialogTitle className="text-left">Confirm Deletion</DialogTitle>
-            <DialogDescription className="text-left">
-              Are you sure you want to delete this package? This action cannot
-              be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-end gap-4 mt-6">
-            <Button
-              variant="outline"
-              onClick={() => setShowConfirmDelete(false)}
-              disabled={deletePackageMutation.isLoading}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => {
-                deletePackageMutation.mutate({ package_id: packageId })
-              }}
-              disabled={deletePackageMutation.isLoading}
-            >
-              {deletePackageMutation.isLoading ? "Deleting..." : "Delete"}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-      <Dialog open={open !== showConfirmDelete} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-[500px] lg:h-[85vh] sm:h-[90vh] overflow-y-auto no-scrollbar w-[95vw] h-[80vh] p-6 gap-6 rounded-2xl shadow-lg">
-          <div className="flex flex-col gap-10">
-            <DialogHeader>
-              <DialogTitle>Edit Package Details</DialogTitle>
-              <DialogDescription>
-                Update your package's description, website, visibility, or
-                delete it.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="">
-              <div className="grid gap-2">
-                <div className="space-y-1">
-                  <Label htmlFor="packageName">Package Name</Label>
-                  <Input
-                    id="packageName"
-                    value={formData.unscopedPackageName}
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        unscopedPackageName: e.target.value.replace(/\s+/g, ""),
-                      }))
-                    }
-                    placeholder="Enter package name"
-                    disabled={updatePackageDetailsMutation.isLoading}
-                    className="w-full"
-                    autoComplete="off"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label htmlFor="website">Website</Label>
-                  <Input
-                    id="website"
-                    value={formData.website}
-                    autoComplete="off"
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        website: e.target.value,
-                      }))
-                    }
-                    placeholder="https://example.com"
-                    disabled={updatePackageDetailsMutation.isLoading}
-                    className="w-full"
-                    aria-invalid={!!websiteError}
-                  />
-                  {websiteError && (
-                    <p className="text-sm text-red-500">{websiteError}</p>
-                  )}
-                </div>
-                <div className="space-y-1">
-                  <Label htmlFor="visibility">Visibility</Label>
-                  <Select
-                    value={formData.visibility}
-                    onValueChange={(val) => {
-                      setFormData((prev) => ({
-                        ...prev,
-                        visibility: val,
-                      }))
-                    }}
-                    disabled={updatePackageDetailsMutation.isLoading}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select visibility" />
-                    </SelectTrigger>
-                    <SelectContent className="!z-[999]">
-                      <SelectItem value="public">public</SelectItem>
-                      <SelectItem value="private">private</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label htmlFor="description">Description</Label>
-                  <Textarea
-                    id="description"
-                    spellCheck={false}
-                    value={formData.description}
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        description: e.target.value,
-                      }))
-                    }
-                    placeholder="Enter package description"
-                    disabled={updatePackageDetailsMutation.isLoading}
-                    className="w-full min-h-[80px] resize-none"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label htmlFor="license">License</Label>
-                  <Select
-                    value={formData.license || "unset"}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        license: value === "unset" ? null : value,
-                      }))
-                    }
-                    disabled={updatePackageDetailsMutation.isLoading}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select a license" />
-                    </SelectTrigger>
-                    <SelectContent className="!z-[999]">
-                      <SelectItem value="MIT">MIT</SelectItem>
-                      <SelectItem value="Apache-2.0">Apache-2.0</SelectItem>
-                      <SelectItem value="BSD-3-Clause">BSD-3-Clause</SelectItem>
-                      <SelectItem value="GPL-3.0">GPL-3.0</SelectItem>
-                      <SelectItem value="unset">Unset</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label htmlFor="defaultView">Default View</Label>
-                  <Select
-                    value={formData.defaultView}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        defaultView: value,
-                      }))
-                    }
-                    disabled={updatePackageDetailsMutation.isLoading}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select default view" />
-                    </SelectTrigger>
-                    <SelectContent className="!z-[999]">
-                      <SelectItem value="files">Files</SelectItem>
-                      <SelectItem value="3d">3D</SelectItem>
-                      <SelectItem value="pcb">PCB</SelectItem>
-                      <SelectItem value="schematic">Schematic</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <GitHubRepositorySelector
-                    selectedRepository={formData.githubRepoFullName || ""}
-                    setSelectedRepository={(value) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        githubRepoFullName: value,
-                      }))
-                    }
-                    disabled={updatePackageDetailsMutation.isLoading}
-                    open={open}
-                    formData={formData}
-                    addFormContent={(content) => {
-                      setFormData((prev) => ({
-                        ...prev,
-                        ...content,
-                      }))
-                    }}
-                  />
-                </div>
-              </div>
-
-              <details
-                className="mt-2 rounded-md"
-                onToggle={(e) => setDangerOpen(e.currentTarget.open)}
-              >
-                <summary className="select-none cursor-pointer p-2 font-medium text-sm text-black list-none flex justify-between items-center">
-                  Danger Zone
-                  <ChevronDown
-                    className={`w-4 h-4 mr-1 transition-transform ${dangerOpen ? "rotate-180" : ""}`}
-                  />
-                </summary>
-                <div className="p-2 pr-2">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <p className="text-sm text-muted-foreground">
-                        Once deleted, it cannot be recovered.
-                      </p>
-                    </div>
-                    <Button
-                      variant="destructive"
-                      size="default"
-                      onClick={() => setShowConfirmDelete(true)}
-                      disabled={deletePackageMutation.isLoading}
-                      className="shrink-0 lg:w-[115px] w-[70px]"
-                    >
-                      {deletePackageMutation.isLoading
-                        ? "Deleting..."
-                        : "Delete"}
-                    </Button>
-                  </div>
-                </div>
-              </details>
-            </div>
-          </div>
-
-          <DialogFooter className="mt-auto">
-            <div className="lg:px-2 select-none flex flex-col sm:flex-row justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => onOpenChange(false)}
-                disabled={updatePackageDetailsMutation.isLoading}
-                className="sm:w-auto w-full"
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={() => updatePackageDetailsMutation.mutate()}
-                disabled={
-                  updatePackageDetailsMutation.isLoading ||
-                  !hasChanges ||
-                  !isFormValid
-                }
-                className="sm:w-auto lg:w-[115px]"
-              >
-                {updatePackageDetailsMutation.isLoading
-                  ? "Updating..."
-                  : "Save Changes"}
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
-
-export const useEditPackageDetailsDialog = createUseDialog(
-  EditPackageDetailsDialog,
-)

package/src/components/dialogs/files-dialog.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { ScrollArea } from "../ui/scroll-area"
-import { cn } from "@/lib/utils"
-import { createUseDialog } from "./create-use-dialog"
-import { useSnippet } from "@/hooks/use-snippet"
-
-interface FilesDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  snippetId: string
-}
-
-export const FilesDialog: React.FC<FilesDialogProps> = ({
-  open,
-  onOpenChange,
-  snippetId,
-}) => {
-  const { data: snippet } = useSnippet(snippetId)
-
-  const files = Object.entries({
-    "dist/index.d.ts": snippet?.dts || "",
-    "index.ts": snippet?.code || "",
-    "dist/index.js": snippet?.compiled_js || "",
-    "manual-edits.json": snippet?.manual_edits_json_content || "",
-  })
-    .sort(([a], [b]) => a.localeCompare(b))
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
-
-  const [selectedFile, setSelectedFile] = useState<string | null>("index.ts")
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl w-full h-[80vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>Files</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-grow overflow-hidden">
-          <div className="w-1/4 border-r">
-            <ScrollArea className="h-full">
-              {Object.keys(files).map((filePath) => (
-                <div
-                  key={filePath}
-                  className={cn(
-                    "px-4 py-2 cursor-pointer hover:bg-gray-100 text-xs",
-                    selectedFile === filePath && "bg-gray-200",
-                  )}
-                  onClick={() => setSelectedFile(filePath)}
-                >
-                  {filePath}
-                </div>
-              ))}
-            </ScrollArea>
-          </div>
-          <div className="w-3/4 overflow-hidden">
-            <ScrollArea className="h-full">
-              <pre className="p-4 text-xs whitespace-pre-wrap">
-                {selectedFile
-                  ? files[selectedFile as keyof typeof files]
-                  : "Select a file"}
-              </pre>
-            </ScrollArea>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useFilesDialog = createUseDialog(FilesDialog)

package/src/components/dialogs/import-component-dialog.tsx

@@ -1,32 +0,0 @@
-import { createUseDialog } from "./create-use-dialog"
-import {
-  ImportComponentDialog2 as RunframeImportComponentDialog,
-  type ImportComponentDialog2Props,
-} from "@tscircuit/runframe/runner"
-
-export type ImportComponentDialogProps = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-} & Pick<
-  ImportComponentDialog2Props,
-  | "onTscircuitPackageSelected"
-  | "onJlcpcbComponentTsxLoaded"
-  | "onKicadStringSelected"
-  | "jlcpcbProxyRequestHeaders"
->
-
-export const ImportComponentDialog = ({
-  open,
-  onOpenChange,
-  ...rest
-}: ImportComponentDialogProps) => {
-  return (
-    <RunframeImportComponentDialog
-      isOpen={open}
-      onClose={() => onOpenChange(false)}
-      {...rest}
-    />
-  )
-}
-
-export const useImportComponentDialog = createUseDialog(ImportComponentDialog)

package/src/components/dialogs/import-package-dialog.tsx

@@ -1,90 +0,0 @@
-import { useAxios } from "@/hooks/use-axios"
-import { useDebounce } from "@/hooks/use-debounce"
-import type { Package } from "fake-snippets-api/lib/db/schema"
-import { useState } from "react"
-import { useQuery } from "react-query"
-import { Button } from "../ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Input } from "../ui/input"
-import { createUseDialog } from "./create-use-dialog"
-import { Link } from "wouter"
-
-export const ImportPackageDialog = ({
-  open,
-  onOpenChange,
-  onPackageSelected,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => any
-  onPackageSelected: (pkg: Package) => any
-}) => {
-  const [searchText, setSearchText] = useState("")
-  const debouncedSearch = useDebounce(searchText, 300)
-  const axios = useAxios()
-  const { data: snippets, isLoading } = useQuery(
-    ["packageSearch", debouncedSearch],
-    async () => {
-      const response = await axios.post("/packages/search", {
-        query: debouncedSearch,
-      })
-      return response.data.packages
-    },
-    {
-      enabled: debouncedSearch.length > 0,
-    },
-  )
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="z-[100] p-4 sm:p-6">
-        <DialogHeader>
-          <DialogTitle>Import Package</DialogTitle>
-        </DialogHeader>
-        <Input
-          placeholder="Search packages..."
-          value={searchText}
-          onChange={(e) => setSearchText(e.target.value)}
-          className="w-full mb-4"
-        />
-        <div className="h-64 overflow-y-auto">
-          {isLoading ? (
-            <div className="text-center">Loading...</div>
-          ) : (
-            <ul className="w-full">
-              {snippets?.map((pkg: Package) => (
-                <li
-                  className="flex flex-col sm:flex-row items-start sm:items-center my-2 text-sm w-full"
-                  key={pkg.package_id}
-                >
-                  <Link
-                    href={`/${pkg.name}`}
-                    target="_blank"
-                    className="text-blue-500 hover:underline cursor-pointer flex-shrink-0 mb-1 sm:mb-0 sm:mr-2"
-                  >
-                    {pkg.name}
-                  </Link>
-                  <div className="text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap mb-1 sm:mb-0">
-                    {pkg.description}
-                  </div>
-                  <Button
-                    size="sm"
-                    className="flex-shrink-0"
-                    variant="outline"
-                    onClick={() => {
-                      onPackageSelected(pkg)
-                      onOpenChange(false)
-                    }}
-                  >
-                    Import
-                  </Button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useImportPackageDialog = createUseDialog(ImportPackageDialog)