@tscircuit/fake-snippets 0.0.67 → 0.0.68

package/src/pages/quickstart.tsx

@@ -3,7 +3,7 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { TypeBadge } from "@/components/TypeBadge"
@@ -48,7 +48,7 @@ export const QuickstartPage = () => {
       <Header />
       <div className="container mx-auto px-4 py-8">
         <div className="mb-8 hidden md:block">
-          <h2 className="text-xl font-semibold mb-4">Recent Snippets</h2>
+          <h2 className="text-xl font-semibold mb-4">Recent Packages</h2>
           {isLoading ? (
             <div>Loading...</div>
           ) : (
@@ -63,7 +63,7 @@ export const QuickstartPage = () => {
                 .map((pkg) => (
                   <PrefetchPageLink
                     key={pkg.package_id}
-                    href={`/editor?snippet_id=${pkg.package_id}`}
+                    href={`/editor?package_id=${pkg.package_id}`}
                   >
                     <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col h-full">
                       <CardHeader className="pb-0 p-4">
@@ -85,7 +85,7 @@ export const QuickstartPage = () => {
         </div>
 
         <div className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Start Blank Snippet</h2>
+          <h2 className="text-xl font-semibold mb-4">Start Blank Packages</h2>
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             {blankTemplates.map((template, index) => (
               <PrefetchPageLink
@@ -117,7 +117,7 @@ export const QuickstartPage = () => {
         </div>
 
         <div className="mt-12">
-          <h2 className="text-xl font-semibold mb-4">Import as Snippet</h2>
+          <h2 className="text-xl font-semibold mb-4">Import as Package</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {[
               { name: "KiCad Footprint", type: "footprint" },

package/src/pages/search.tsx

@@ -97,7 +97,7 @@ export const SearchPage = () => {
             <div className="mb-6">
               <div className="flex items-center gap-2 mb-3">
                 <h1 className="text-3xl font-bold text-gray-900">
-                  Search tscircuit Packages
+                  Search Packages
                 </h1>
               </div>
               <div className="flex flex-col sm:flex-row gap-4 mb-4">

package/src/pages/user-profile.tsx

@@ -212,6 +212,7 @@ export const UserProfilePage = () => {
         <DeleteDialog
           packageId={packageToDelete.package_id}
           packageName={packageToDelete.unscoped_name}
+          packageOwner={packageToDelete.owner_github_username ?? ""}
           refetchUserPackages={refetchUserPackages}
         />
       )}

package/src/components/OrderPreviewContent.tsx

@@ -1,61 +0,0 @@
-import React from "react"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
-import { CadViewer } from "@tscircuit/3d-viewer"
-import { CircuitJsonTableViewer } from "./TableViewer/CircuitJsonTableViewer"
-import { AnyCircuitElement } from "circuit-json"
-
-interface OrderPreviewContentProps {
-  circuitJson: AnyCircuitElement[] | null
-  className?: string
-}
-
-export const OrderPreviewContent: React.FC<OrderPreviewContentProps> = ({
-  circuitJson,
-  className,
-}) => {
-  return (
-    <div className={className}>
-      <Tabs defaultValue="pcb" className="w-full">
-        <TabsList>
-          <TabsTrigger value="pcb">PCB</TabsTrigger>
-          <TabsTrigger value="cad">3D</TabsTrigger>
-          <TabsTrigger value="json-table">JSON</TabsTrigger>
-        </TabsList>
-        <TabsContent value="pcb">
-          <div className="h-[500px] shadow overflow-hidden sm:rounded-lg mb-6">
-            {circuitJson ? (
-              <PCBViewer height={500} circuitJson={circuitJson} />
-            ) : (
-              <div className="flex items-center justify-center h-full bg-gray-100">
-                No PCB data available
-              </div>
-            )}
-          </div>
-        </TabsContent>
-        <TabsContent value="cad">
-          <div className="h-[500px] shadow overflow-hidden sm:rounded-lg mb-6">
-            {circuitJson ? (
-              <CadViewer soup={circuitJson as any} />
-            ) : (
-              <div className="flex items-center justify-center h-full bg-gray-100">
-                No 3D data available
-              </div>
-            )}
-          </div>
-        </TabsContent>
-        <TabsContent value="json-table">
-          <div className="h-[500px] shadow overflow-hidden sm:rounded-lg mb-6">
-            {circuitJson ? (
-              <CircuitJsonTableViewer elements={circuitJson} />
-            ) : (
-              <div className="flex items-center justify-center h-full bg-gray-100">
-                No JSON data available
-              </div>
-            )}
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}

package/src/components/ViewSnippetSidebar.tsx

@@ -1,162 +0,0 @@
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { useCurrentSnippet } from "@/hooks/use-current-snippet"
-import { useToast } from "@/hooks/use-toast"
-import { cn } from "@/lib/utils"
-import { AtSign, Bot, Clock, Code, File, GitFork, Package } from "lucide-react"
-import { useFilesDialog } from "./dialogs/files-dialog"
-import { PrefetchPageLink } from "./PrefetchPageLink"
-
-export default function ViewSnippetSidebar({
-  className,
-}: {
-  className?: string
-}) {
-  const { snippet } = useCurrentSnippet()
-  const { toast } = useToast()
-  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
-  const { copyToClipboard } = useCopyToClipboard()
-
-  return (
-    <div
-      className={cn(
-        "w-64 h-full bg-gray-100 text-gray-700 flex flex-col flex-shrink-0",
-        "hidden sm:block h-screen sticky top-0",
-        className,
-      )}
-    >
-      <nav className="flex-grow overflow-y-auto">
-        <ul className="p-2 space-y-2">
-          {[
-            {
-              icon: <Code className="w-5 h-5" />,
-              label: "Edit Code",
-              href: `/editor?snippet_id=${snippet?.snippet_id}`,
-            },
-            {
-              icon: <Bot className="w-5 h-5" />,
-              label: "Edit with AI",
-              badge: "AI",
-              href: `/ai?snippet_id=${snippet?.snippet_id}`,
-            },
-            // {
-            //   icon: <GitHubLogoIcon className="w-5 h-5" />,
-            //   label: "Github",
-            // },
-            {
-              icon: <GitFork className="w-5 h-5" />,
-              label: "Forks",
-              notImplemented: true,
-            },
-            {
-              icon: <AtSign className="w-5 h-5" />,
-              label: "References",
-              notImplemented: true,
-            },
-            {
-              icon: <Package className="w-5 h-5" />,
-              label: "Dependencies",
-              notImplemented: true,
-            },
-            {
-              icon: <Clock className="w-5 h-5" />,
-              label: "Versions",
-              notImplemented: true,
-            },
-            {
-              icon: <File className="w-5 h-5" />,
-              label: "Files",
-              onClick: () => {
-                if (snippet) {
-                  openFilesDialog()
-                }
-              },
-            },
-            // { icon: <Settings className="w-5 h-5" />, label: "Settings" },
-          ].map((item, index) => (
-            <li key={index}>
-              <PrefetchPageLink
-                href={item.href ?? "#"}
-                onClick={
-                  item.notImplemented
-                    ? () => {
-                        toast({
-                          title: "Not Implemented!",
-                          description: (
-                            <div>
-                              The {item.label} selection is not implemented yet.
-                              Help us out!{" "}
-                              <a
-                                className="text-blue-500 hover:underline font-semibold"
-                                href="https://github.com/tscircuit/tscircuit.com"
-                              >
-                                Check out our Github
-                              </a>
-                            </div>
-                          ),
-                        })
-                      }
-                    : item.onClick
-                }
-                className="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-200 rounded-md"
-              >
-                {item.icon}
-                <span className="text-sm">{item.label}</span>
-                {item.badge && (
-                  <span className="ml-auto bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded">
-                    {item.badge}
-                  </span>
-                )}
-              </PrefetchPageLink>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <div className="p-4 border-t border-gray-200 space-y-4">
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy embed code</div>
-          <div
-            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
-            onClick={() => {
-              const embedCode = `<iframe src="${window.location.origin}/preview?snippet_id=${snippet?.snippet_id}" width="100%" height="500" frameborder="0"></iframe>`
-              navigator.clipboard.writeText(embedCode)
-              toast({
-                title: "Copied!",
-                description: "Embed code copied to clipboard",
-              })
-            }}
-          >
-            {`<iframe src="${window.location.origin}/preview?snippet_id=${snippet?.snippet_id}" width="100%" height="500" frameborder="0"></iframe>`}
-          </div>
-        </div>
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy import code</div>
-          <div
-            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
-            onClick={() =>
-              copyToClipboard(
-                `import CircuitModule from "@tsci/${snippet?.owner_name}.${snippet?.unscoped_name}"`,
-              )
-            }
-          >
-            import CircuitModule from "@tsci/{snippet?.owner_name}.
-            {snippet?.unscoped_name}"
-          </div>
-        </div>
-        <div className="space-y-1">
-          <div className="text-xs font-medium">Copy install command</div>
-          <div
-            className="text-[0.5em] p-2 rounded-sm bg-blue-50 border border-blue-200 cursor-pointer font-mono whitespace-nowrap overflow-hidden text-ellipsis"
-            onClick={() =>
-              copyToClipboard(
-                `tsci add @tsci/${snippet?.owner_name}.${snippet?.unscoped_name}`,
-              )
-            }
-          >
-            tsci add @tsci/{snippet?.owner_name}.{snippet?.unscoped_name}
-          </div>
-        </div>
-      </div>
-      {snippet && <FilesDialog snippetId={snippet.snippet_id} />}
-    </div>
-  )
-}

package/src/components/dialogs/create-order-dialog.tsx

@@ -1,146 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
-import { Button } from "../ui/button"
-import { Checkbox } from "../ui/checkbox"
-import { useState, useEffect } from "react"
-import { createUseDialog } from "./create-use-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-import { useQueryClient } from "react-query"
-
-export const CreateOrderDialog = ({
-  open,
-  onOpenChange,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) => {
-  const axios = useAxios()
-  const { toast } = useToast()
-  const qc = useQueryClient()
-  const [pending, setPending] = useState(false)
-  const [checkpoints, setCheckpoints] = useState({
-    shipping: false,
-    errors: false,
-    parts: false,
-  })
-
-  useEffect(() => {
-    if (open) {
-      validateCheckpoints()
-    }
-  }, [open])
-
-  const validateCheckpoints = async () => {
-    try {
-      // Placeholder: Check if shipping information is in profile
-      const hasShippingInfo = await checkShippingInfo()
-
-      // Placeholder: Check if PCB has no errors
-      const hasNoErrors = await checkPCBErrors()
-
-      // Placeholder: Check if all parts are available at PCB fab
-      const allPartsAvailable = await checkPartsAvailability()
-
-      setCheckpoints({
-        shipping: hasShippingInfo,
-        errors: hasNoErrors,
-        parts: allPartsAvailable,
-      })
-    } catch (error) {
-      console.error("Error validating checkpoints:", error)
-    }
-  }
-
-  const checkShippingInfo = async () => {
-    // Placeholder: Implement actual check for shipping info
-    return true
-  }
-
-  const checkPCBErrors = async () => {
-    // Placeholder: Implement actual check for PCB errors
-    return true
-  }
-
-  const checkPartsAvailability = async () => {
-    // Placeholder: Implement actual check for parts availability
-    return true
-  }
-
-  const handleSubmit = async () => {
-    try {
-      setPending(true)
-      // TODO: Implement order submission logic
-      onOpenChange(false)
-      setPending(false)
-      toast({
-        title: "Order submitted",
-        description: "Your order has been successfully submitted.",
-      })
-      qc.invalidateQueries({ queryKey: ["orders"] })
-    } catch (error) {
-      console.error("Error submitting order:", error)
-      toast({
-        title: "Error",
-        description: "Failed to submit the order. Please try again.",
-        variant: "destructive",
-      })
-    } finally {
-      setPending(false)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create Order</DialogTitle>
-        </DialogHeader>
-        <p className="text-sm text-gray-500 mb-4">
-          Order the circuit board fully assembled from a PCB fabricator
-        </p>
-        <div className="space-y-4">
-          <div className="flex items-center space-x-2">
-            <Checkbox id="shipping" checked={checkpoints.shipping} />
-            <label
-              htmlFor="shipping"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              Shipping Information in Profile
-            </label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox id="errors" checked={checkpoints.errors} />
-            <label
-              htmlFor="errors"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              PCB Has No Errors
-            </label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <Checkbox id="parts" checked={checkpoints.parts} />
-            <label
-              htmlFor="parts"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              All parts available at PCB fabricator
-            </label>
-          </div>
-        </div>
-        <div className="flex justify-end space-x-2 mt-4">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            disabled={pending || !Object.values(checkpoints).every(Boolean)}
-          >
-            {pending ? "Submitting..." : "Submit Order"}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export const useCreateOrderDialog = createUseDialog(CreateOrderDialog)

package/src/pages/preview.tsx

@@ -1,44 +0,0 @@
-import { useSnippet } from "@/hooks/use-snippet"
-import { useUrlParams } from "@/hooks/use-url-params"
-import { CircuitJsonPreview } from "@tscircuit/runframe"
-import { Loader2 } from "lucide-react"
-
-export const PreviewPage = () => {
-  const urlParams = useUrlParams()
-  const snippetId = urlParams.snippet_id
-  const { data: snippet, isLoading, error } = useSnippet(snippetId)
-
-  if (isLoading) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center">
-        <Loader2 className="w-8 h-8 animate-spin" />
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center text-red-500">
-        Error loading snippet: {error.message}
-      </div>
-    )
-  }
-
-  if (!snippet) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center text-gray-500">
-        Snippet not found
-      </div>
-    )
-  }
-
-  if (!snippet.circuit_json) {
-    return (
-      <div className="w-full h-screen flex items-center justify-center text-gray-500">
-        No circuit data available
-      </div>
-    )
-  }
-
-  return <CircuitJsonPreview circuitJson={snippet.circuit_json as any} />
-}

package/src/pages/view-order.tsx

@@ -1,111 +0,0 @@
-import React from "react"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { Order } from "fake-snippets-api/lib/db/schema"
-import { Link, useParams } from "wouter"
-import { Button } from "@/components/ui/button"
-import { OrderPreviewContent } from "@/components/OrderPreviewContent"
-import { AnyCircuitElement } from "circuit-json"
-
-export const ViewOrderPage = () => {
-  const { orderId } = useParams()
-  const axios = useAxios()
-
-  const {
-    data: order,
-    isLoading,
-    error,
-  } = useQuery<Order>(
-    ["order", orderId],
-    async () => {
-      const response = await axios.get(`/orders/get?order_id=${orderId}`)
-      return response.data.order
-    },
-    {
-      enabled: !!orderId,
-    },
-  )
-
-  if (isLoading) {
-    return <div>Loading order...</div>
-  }
-
-  if (error) {
-    return <div>Error loading order: {(error as Error).message}</div>
-  }
-
-  if (!order) {
-    return <div>Order not found</div>
-  }
-
-  return (
-    <div>
-      <Header />
-      <div className="container mx-auto px-4 py-4">
-        <h1 className="text-3xl font-bold mb-6">Order Details</h1>
-        <div className="flex flex-col md:flex-row gap-6">
-          <div className="w-full md:w-1/2 md:max-w-[50%]">
-            <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
-              <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                  Order #{order.order_id}
-                </h3>
-                <p className="mt-1 max-w-2xl text-sm text-gray-500">
-                  Created at: {new Date(order.created_at).toLocaleString()}
-                </p>
-              </div>
-              <div className="border-t border-gray-200">
-                <dl>
-                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                    <dt className="text-sm font-medium text-gray-500">
-                      Status
-                    </dt>
-                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                      {order.is_running ? "Running" : "Finished"}
-                    </dd>
-                  </div>
-                  <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                    <dt className="text-sm font-medium text-gray-500">
-                      Started at
-                    </dt>
-                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                      {order.started_at
-                        ? new Date(order.started_at).toLocaleString()
-                        : "Not started"}
-                    </dd>
-                  </div>
-                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                    <dt className="text-sm font-medium text-gray-500">
-                      Pending Validation
-                    </dt>
-                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                      {order.completed_at
-                        ? new Date(order.completed_at).toLocaleString()
-                        : "Not finished"}
-                    </dd>
-                  </div>
-                </dl>
-              </div>
-            </div>
-            <div className="mt-6">
-              <Link href={`/my-orders`}>
-                <Button variant="outline" onClick={() => window.history.back()}>
-                  Back to Orders
-                </Button>
-              </Link>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 md:max-w-[50%]">
-            <OrderPreviewContent
-              circuitJson={order.circuit_json as AnyCircuitElement[]}
-              className="h-[calc(100vh-200px)]"
-            />
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </div>
-  )
-}