@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/components/dialogs/new-package-save-prompt-dialog.tsx

@@ -1,199 +0,0 @@
-import { useState, useEffect, useMemo } from "react"
-import { Button } from "../ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "../ui/dialog"
-import { Input } from "../ui/input"
-import { Label } from "../ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select"
-import { createUseDialog } from "./create-use-dialog"
-import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { ICreatePackageProps } from "@/hooks/useFileManagement"
-
-export const NewPackageSavePromptDialog = ({
-  open,
-  onOpenChange,
-  initialIsPrivate = false,
-  initialName = "",
-  onSave,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  initialIsPrivate?: boolean
-  initialName?: string
-  onSave: (props: ICreatePackageProps) => void
-}) => {
-  const [packageName, setPackageName] = useState(initialName)
-  const session = useGlobalStore((s) => s.session)
-  const [isPrivate, setIsPrivate] = useState(initialIsPrivate)
-  const [selectedOrgId, setSelectedOrgId] = useState<string>("")
-  const { data: organizations, isLoading: orgsLoading } = useListUserOrgs()
-
-  const isOwnerPersonalOrg = useMemo(() => {
-    if (!selectedOrgId) return false
-    const selectedOrg = organizations?.find((x) => x.org_id === selectedOrgId)
-    return (
-      selectedOrg?.is_personal_org &&
-      selectedOrg?.owner_account_id == session?.account_id
-    )
-  }, [selectedOrgId, organizations, session?.github_username])
-
-  const fullPackageName = useMemo(() => {
-    if (!Boolean(packageName)) return
-    if (selectedOrgId) {
-      return `${organizations?.find((x) => x.org_id === selectedOrgId)?.name}/${packageName}`
-    }
-    return `${session?.github_username}/${packageName}`
-  }, [selectedOrgId, packageName, organizations, session?.github_username])
-
-  useEffect(() => {
-    if (organizations && organizations.length > 0 && !selectedOrgId) {
-      setSelectedOrgId(
-        organizations.find((x) => x.is_personal_org)?.org_id ||
-          organizations[0].org_id,
-      )
-    }
-  }, [organizations, selectedOrgId])
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Creating new package</DialogTitle>
-          <DialogDescription>
-            Would you like to save this package?
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-1">
-          <div className="space-y-2">
-            <Label className="text-sm font-medium">Organization</Label>
-            <Select
-              value={selectedOrgId}
-              onValueChange={setSelectedOrgId}
-              disabled={orgsLoading}
-            >
-              <SelectTrigger className="w-full">
-                <div className="flex items-center gap-2 flex-1">
-                  {selectedOrgId && organizations ? (
-                    <span className="truncate">
-                      {organizations.find((org) => org.org_id === selectedOrgId)
-                        ?.display_name ||
-                        organizations.find(
-                          (org) => org.org_id === selectedOrgId,
-                        )?.name ||
-                        `Org ${selectedOrgId.slice(0, 8)}`}
-                    </span>
-                  ) : (
-                    <span className="text-slate-500">
-                      {orgsLoading
-                        ? "Loading organizations..."
-                        : "Select organization"}
-                    </span>
-                  )}
-                </div>
-              </SelectTrigger>
-              <SelectContent className="!z-[999]">
-                {organizations?.length === 0 ? (
-                  <div className="px-2 py-1.5 text-sm text-slate-500">
-                    No organizations found
-                  </div>
-                ) : (
-                  organizations?.map((org) => (
-                    <SelectItem
-                      key={org.org_id}
-                      value={org.org_id}
-                      className="cursor-pointer"
-                    >
-                      {org.display_name ||
-                        org.name ||
-                        `Org ${org.org_id.slice(0, 8)}`}
-                    </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2">
-            <Label className="text-sm font-medium">Package Name</Label>
-            <Input
-              value={packageName}
-              onChange={(e) => setPackageName(e.target.value)}
-              placeholder="Untitled Package"
-              className="w-full"
-            />
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
-              <div className="space-y-1 flex-1">
-                <Label className="text-sm font-medium">Visibility</Label>
-                <p className="text-xs text-slate-500">
-                  {isPrivate
-                    ? "Only you can view and use this package"
-                    : "Anyone can view and use your package"}
-                </p>
-              </div>
-              <Select
-                value={isPrivate ? "private" : "public"}
-                onValueChange={(value) => setIsPrivate(value === "private")}
-              >
-                <SelectTrigger className="w-full sm:w-32 sm:mt-2">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent className="!z-[999]">
-                  <SelectItem value="public" className="cursor-pointer">
-                    <div className="flex items-center gap-2">
-                      <span>Public</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="private" className="cursor-pointer">
-                    <div className="flex items-center gap-2">
-                      <span>Private</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-end gap-2">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              onSave({
-                name: fullPackageName,
-                isPrivate,
-                ...(isOwnerPersonalOrg
-                  ? {}
-                  : {
-                      org_id: selectedOrgId,
-                    }),
-              })
-              onOpenChange(false)
-            }}
-            disabled={!selectedOrgId || orgsLoading || !session}
-          >
-            Save
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useNewPackageSavePromptDialog = createUseDialog(
-  NewPackageSavePromptDialog,
-)

package/src/components/dialogs/package-visibility-settings-dialog.tsx

@@ -1,93 +0,0 @@
-import { useState } from "react"
-import { Button } from "../ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "../ui/dialog"
-import { Label } from "../ui/label"
-import { RadioGroup, RadioGroupItem } from "../ui/radio-group"
-import { createUseDialog } from "./create-use-dialog"
-
-export const PackageVisibilitySettingsDialog = ({
-  open,
-  onOpenChange,
-  initialIsPrivate = false,
-  onSave,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  initialIsPrivate?: boolean
-  onSave: (isPrivate: boolean) => void
-}) => {
-  const [isPrivate, setIsPrivate] = useState(initialIsPrivate)
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Package Privacy Settings</DialogTitle>
-          <DialogDescription>
-            Control whether your package is publicly visible or private.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="py-1">
-          <RadioGroup
-            value={isPrivate ? "private" : "public"}
-            onValueChange={(value) => setIsPrivate(value === "private")}
-          >
-            <div
-              className="flex items-start space-x-2 px-2 py-4 rounded-md hover:bg-slate-100 cursor-pointer"
-              onClick={() => setIsPrivate(false)}
-            >
-              <RadioGroupItem value="public" id="public" />
-              <div className="grid gap-1.5">
-                <Label htmlFor="public" className="font-medium">
-                  Public
-                </Label>
-                <p className="text-sm text-slate-500">
-                  Anyone can view and use your package. It will appear in search
-                  results.
-                </p>
-              </div>
-            </div>
-            <div
-              className="flex items-start space-x-2 px-2 py-4 rounded-md hover:bg-slate-100 cursor-pointer"
-              onClick={() => setIsPrivate(true)}
-            >
-              <RadioGroupItem value="private" id="private" />
-              <div className="grid gap-1.5">
-                <Label htmlFor="private" className="font-medium">
-                  Private
-                </Label>
-                <p className="text-sm text-slate-500">
-                  Only you can view and use this package. It won't appear in
-                  search results.
-                </p>
-              </div>
-            </div>
-          </RadioGroup>
-        </div>
-        <div className="flex justify-end gap-2">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              onSave(isPrivate)
-              onOpenChange(false)
-            }}
-          >
-            Save
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const usePackageVisibilitySettingsDialog = createUseDialog(
-  PackageVisibilitySettingsDialog,
-)

package/src/components/dialogs/pcb-download-dialog.tsx

@@ -1,113 +0,0 @@
-import { useState } from "react"
-import { Button } from "../ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "../ui/dialog"
-import { Label } from "../ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select"
-import { Checkbox } from "../ui/checkbox"
-import { AnyCircuitElement } from "circuit-json"
-import { createUseDialog } from "./create-use-dialog"
-import {
-  downloadPcbSvg,
-  DownloadPcbSvgOptions,
-} from "@/lib/download-fns/download-pcb-svg"
-
-interface PcbDownloadDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  circuitJson: AnyCircuitElement[]
-  fileName: string
-}
-
-export const PcbDownloadDialog = ({
-  open,
-  onOpenChange,
-  circuitJson,
-  fileName,
-}: PcbDownloadDialogProps) => {
-  const [layer, setLayer] = useState<"all" | "top" | "bottom">("all")
-  const [drawPadding, setDrawPadding] = useState(true)
-  const [transparentBg, setTransparentBg] = useState(false)
-  const [matchAspectRatio, setMatchAspectRatio] = useState(false)
-
-  const handleDownload = () => {
-    const options: DownloadPcbSvgOptions = {
-      layer,
-      drawPaddingOutsideBoard: drawPadding,
-      backgroundColor: transparentBg ? "transparent" : "#000",
-      matchAspectRatio,
-    }
-    downloadPcbSvg(circuitJson, fileName, options)
-    onOpenChange(false)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Download PCB SVG</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4 py-2">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="layer" className="text-right">
-              Layer
-            </Label>
-            <Select value={layer} onValueChange={(v) => setLayer(v as any)}>
-              <SelectTrigger id="layer" className="col-span-3">
-                <SelectValue placeholder="Layer" />
-              </SelectTrigger>
-              <SelectContent className="!z-[999]">
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="top">Top</SelectItem>
-                <SelectItem value="bottom">Bottom</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="padding"
-              checked={drawPadding}
-              onCheckedChange={(v) => setDrawPadding(Boolean(v))}
-            />
-            <Label htmlFor="padding">Draw Padding and Board Outline</Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="transparentBg"
-              checked={transparentBg}
-              onCheckedChange={(v) => setTransparentBg(Boolean(v))}
-            />
-            <Label htmlFor="transparentBg">Transparent Background</Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="matchAspectRatio"
-              checked={matchAspectRatio}
-              onCheckedChange={(v) => setMatchAspectRatio(Boolean(v))}
-            />
-            <Label htmlFor="matchAspectRatio">Match Aspect Ratio</Label>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={handleDownload}>Download</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const usePcbDownloadDialog = createUseDialog(PcbDownloadDialog)

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

@@ -1,86 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Input } from "../ui/input"
-import { Button } from "../ui/button"
-import { useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
-import { createUseDialog } from "./create-use-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-
-export const RenamePackageDialog = ({
-  open,
-  onOpenChange,
-  packageId,
-  currentName,
-  onRename,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  packageId: string
-  currentName: string
-  onRename?: (newName: string) => void
-}) => {
-  const [newName, setNewName] = useState(currentName)
-  const axios = useAxios()
-  const { toast } = useToast()
-  const qc = useQueryClient()
-
-  const renamePackageMutation = useMutation({
-    mutationFn: async () => {
-      const response = await axios.post("/packages/update", {
-        package_id: packageId,
-        name: newName,
-      })
-      if (response.status !== 200) {
-        throw new Error("Failed to rename package")
-      }
-      return response.data
-    },
-    onSuccess: () => {
-      onRename?.(newName)
-      onOpenChange(false)
-      toast({
-        title: "Package renamed",
-        description: `Successfully renamed to "${newName}"`,
-      })
-      qc.invalidateQueries({ queryKey: ["packages", packageId] })
-    },
-    onError: (error) => {
-      console.error("Error renaming package:", error)
-      toast({
-        title: "Error",
-        description: "Failed to rename the package. Please try again.",
-        variant: "destructive",
-      })
-    },
-  })
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Rename Package</DialogTitle>
-        </DialogHeader>
-        <Input
-          value={newName}
-          onChange={(e) => setNewName(e.target.value.replace(" ", "").trim())}
-          placeholder="Enter new name"
-          disabled={renamePackageMutation.isLoading}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !renamePackageMutation.isLoading) {
-              renamePackageMutation.mutate()
-            }
-          }}
-        />
-        <Button
-          disabled={renamePackageMutation.isLoading}
-          onClick={() => renamePackageMutation.mutate()}
-        >
-          {renamePackageMutation.isLoading ? "Renaming..." : "Rename"}
-        </Button>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useRenamePackageDialog = createUseDialog(RenamePackageDialog)

package/src/components/dialogs/rename-snippet-dialog.tsx

@@ -1,81 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Input } from "../ui/input"
-import { Button } from "../ui/button"
-import { useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
-import { createUseDialog } from "./create-use-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-
-export const RenameSnippetDialog = ({
-  open,
-  onOpenChange,
-  snippetId,
-  currentName,
-  onRename,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  snippetId: string
-  currentName: string
-  onRename?: (newName: string) => void
-}) => {
-  const [newName, setNewName] = useState(currentName)
-  const axios = useAxios()
-  const { toast } = useToast()
-  const qc = useQueryClient()
-
-  const renameSnippetMutation = useMutation({
-    mutationFn: async () => {
-      const response = await axios.post("/snippets/update", {
-        snippet_id: snippetId,
-        unscoped_name: newName,
-      })
-      if (response.status !== 200) {
-        throw new Error("Failed to rename snippet")
-      }
-      return response.data
-    },
-    onSuccess: () => {
-      onRename?.(newName)
-      onOpenChange(false)
-      toast({
-        title: "Snippet renamed",
-        description: `Successfully renamed to "${newName}"`,
-      })
-      qc.invalidateQueries({ queryKey: ["snippets", snippetId] })
-    },
-    onError: (error) => {
-      console.error("Error renaming snippet:", error)
-      toast({
-        title: "Error",
-        description: "Failed to rename the snippet. Please try again.",
-        variant: "destructive",
-      })
-    },
-  })
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Rename Snippet</DialogTitle>
-        </DialogHeader>
-        <Input
-          value={newName}
-          onChange={(e) => setNewName(e.target.value)}
-          placeholder="Enter new name"
-          disabled={renameSnippetMutation.isLoading}
-        />
-        <Button
-          disabled={renameSnippetMutation.isLoading}
-          onClick={() => renameSnippetMutation.mutate()}
-        >
-          {renameSnippetMutation.isLoading ? "Renaming..." : "Rename"}
-        </Button>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useRenameSnippetDialog = createUseDialog(RenameSnippetDialog)

package/src/components/dialogs/update-package-description-dialog.tsx

@@ -1,96 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Button } from "../ui/button"
-import { useState } from "react"
-import { useMutation, useQueryClient } from "react-query"
-import { createUseDialog } from "./create-use-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-import { Textarea } from "../ui/textarea"
-
-export const UpdatePackageDescriptionDialog = ({
-  open,
-  onOpenChange,
-  packageId,
-  currentDescription,
-  onUpdate,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  packageId: string
-  currentDescription: string
-  onUpdate?: (newDescription: string) => void
-}) => {
-  const [newDescription, setNewDescription] = useState(currentDescription)
-  const axios = useAxios()
-  const { toast } = useToast()
-  const qc = useQueryClient()
-
-  const updateDescriptionMutation = useMutation({
-    mutationFn: async () => {
-      const response = await axios.post("/packages/update", {
-        package_id: packageId,
-        description: newDescription,
-      })
-      if (response.status !== 200) {
-        throw new Error("Failed to update description")
-      }
-      return response.data
-    },
-    onMutate: async () => {
-      await qc.cancelQueries({ queryKey: ["packages", packageId] })
-      const previousSnippet = qc.getQueryData(["packages", packageId])
-      qc.setQueryData(["packages", packageId], (old: any) => ({
-        ...old,
-        description: newDescription,
-      }))
-      return { previousSnippet }
-    },
-    onSuccess: () => {
-      onUpdate?.(newDescription)
-      onOpenChange(false)
-      toast({
-        title: "Description updated",
-        description: "Successfully updated package description",
-      })
-    },
-    onError: (error, variables, context) => {
-      qc.setQueryData(["packages", packageId], context?.previousSnippet)
-      console.error("Error updating description:", error)
-      toast({
-        title: "Error",
-        description: "Failed to update package description. Please try again.",
-        variant: "destructive",
-      })
-    },
-    onSettled: () => {
-      qc.invalidateQueries({ queryKey: ["packages", packageId] })
-    },
-  })
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Update Package Description</DialogTitle>
-        </DialogHeader>
-        <Textarea
-          value={newDescription}
-          onChange={(e) => setNewDescription(e.target.value)}
-          placeholder="Enter new description"
-          disabled={updateDescriptionMutation.isLoading}
-          className="resize-none min-h-[80px]"
-        />
-        <Button
-          disabled={updateDescriptionMutation.isLoading}
-          onClick={() => updateDescriptionMutation.mutate()}
-        >
-          {updateDescriptionMutation.isLoading ? "Updating..." : "Update"}
-        </Button>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useUpdatePackageDescriptionDialog = createUseDialog(
-  UpdatePackageDescriptionDialog,
-)