@tscircuit/fake-snippets 0.0.1

package/src/components/TrendingSnippetCarousel.tsx

@@ -0,0 +1,77 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { StarFilledIcon } from "@radix-ui/react-icons"
+import { Link } from "wouter"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { useEffect, useRef, useState } from "react"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { OptimizedImage } from "./OptimizedImage"
+
+export const TrendingSnippetCarousel = () => {
+  const axios = useAxios()
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [isHovered, setIsHovered] = useState(false)
+  const apiBaseUrl = useSnippetsBaseApiUrl()
+
+  const { data: trendingSnippets } = useQuery<Snippet[]>(
+    "trendingSnippets",
+    async () => {
+      const response = await axios.get("/snippets/list_trending")
+      return response.data.snippets
+    },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  )
+
+  return (
+    <div className="w-full bg-gray-50 py-8 min-h-[280px]">
+      {trendingSnippets?.length ? (
+        <>
+          <div className="container mx-auto px-4">
+            <h2 className="text-2xl font-semibold mb-6">Trending Snippets</h2>
+          </div>
+          <div
+            className="flex gap-6 overflow-x-hidden relative"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            <div
+              ref={scrollRef}
+              className="flex gap-6 transition-transform duration-1000 animate-carousel-left"
+            >
+              {[...(trendingSnippets ?? []), ...(trendingSnippets ?? [])].map(
+                (snippet, i) => (
+                  <Link
+                    key={`${snippet.snippet_id}-${i}`}
+                    href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+                  >
+                    <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
+                      <div className="font-medium text-blue-600 mb-1 truncate text-sm">
+                        {snippet.owner_name}/{snippet.unscoped_name}
+                      </div>
+                      <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
+                        <OptimizedImage
+                          src={`${apiBaseUrl}/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.svg`}
+                          alt="PCB preview"
+                          className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
+                        />
+                      </div>
+                      <div className="flex items-center text-xs text-gray-500">
+                        <StarFilledIcon className="w-3 h-3 mr-1" />
+                        {snippet.star_count || 0} stars
+                      </div>
+                    </div>
+                  </Link>
+                ),
+              )}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}

package/src/components/TypeBadge.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { cn } from "@/lib/utils"
+
+type BadgeType = "board" | "package" | "footprint" | "model"
+
+interface TypeBadgeProps {
+  type: string | BadgeType
+  className?: string
+}
+
+const typeColors: Record<BadgeType, string> = {
+  board: "bg-blue-500",
+  package: "bg-green-500",
+  footprint: "bg-purple-500",
+  model: "bg-indigo-500",
+}
+
+export const TypeBadge: React.FC<TypeBadgeProps> = ({ type, className }) => {
+  if (!type) return null
+  return (
+    <span
+      className={cn(
+        "text-white px-2 py-1 rounded text-xs font-semibold",
+        typeColors[type as BadgeType],
+        className,
+      )}
+    >
+      {type.toUpperCase()}
+    </span>
+  )
+}

package/src/components/ViewSnippetHeader.tsx

@@ -0,0 +1,144 @@
+import { TypeBadge } from "@/components/TypeBadge"
+import { Button } from "@/components/ui/button"
+import { useAxios } from "@/hooks/use-axios"
+import { useCurrentSnippet } from "@/hooks/use-current-snippet"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { toast, useToast } from "@/hooks/use-toast"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { ChevronLeft, Eye, GitFork, Star } from "lucide-react"
+import { useEffect, useState } from "react"
+import { useMutation, useQueryClient } from "react-query"
+import { Link } from "wouter"
+import { navigate } from "wouter/use-browser-location"
+
+export default function ViewSnippetHeader() {
+  const { snippet } = useCurrentSnippet()
+  const axios = useAxios()
+  const qc = useQueryClient()
+  const session = useGlobalStore((s) => s.session)
+  const [isStarred, setIsStarred] = useState(snippet?.is_starred || false)
+
+  const useForkSnippetMutation = ({
+    snippet,
+    onSuccess,
+  }: {
+    snippet: Snippet
+    onSuccess?: (forkedSnippet: Snippet) => void
+  }) => {
+    const axios = useAxios()
+    const session = useGlobalStore((s) => s.session)
+
+    return useMutation(
+      ["createForkSnippet"],
+      async () => {
+        if (!session) throw new Error("No session")
+        if (!snippet) throw new Error("No snippet to fork")
+
+        const { data } = await axios.post("/snippets/create", {
+          unscoped_name: snippet.unscoped_name,
+          snippet_type: snippet.snippet_type,
+          owner_name: session.github_username,
+          code: snippet.code,
+        })
+        return data.snippet
+      },
+      {
+        onSuccess: (forkedSnippet: Snippet) => {
+          toast({
+            title: `Forked snippet`,
+            description: `You have successfully forked the snippet. Redirecting...`,
+          })
+          onSuccess?.(forkedSnippet)
+        },
+        onError: (error: any) => {
+          console.error("Error forking snippet:", error)
+        },
+      },
+    )
+  }
+
+  const { mutate: forkSnippet, isLoading: isForking } = useForkSnippetMutation({
+    snippet: snippet!,
+    onSuccess: (forkedSnippet) => {
+      navigate("/editor?snippet_id=" + forkedSnippet.snippet_id)
+    },
+  })
+  const handleStarClick = async () => {
+    try {
+      if (isStarred) {
+        await axios.post("/snippets/remove_star", {
+          snippet_id: snippet!.snippet_id,
+        })
+        setIsStarred(false)
+        toast({
+          title: "Unstarred!",
+          description: "You've unstarred this snippet",
+        })
+      } else {
+        await axios.post("/snippets/add_star", {
+          snippet_id: snippet!.snippet_id,
+        })
+        setIsStarred(true)
+        toast({
+          title: "Starred!",
+          description: "You've starred this snippet",
+        })
+      }
+      qc.invalidateQueries(["snippets", snippet!.snippet_id])
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: `Failed to ${isStarred ? "unstar" : "star"} snippet`,
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <header className="bg-white border-b border-gray-200 py-4 px-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <h1 className="text-xl font-bold mr-2">
+            <Link href={`/${snippet?.owner_name}`} className="text-blue-600">
+              {snippet?.owner_name}
+            </Link>
+            <span className="px-1 text-gray-500">/</span>
+            <Link
+              className="text-blue-600"
+              href={`/${snippet?.owner_name}/${snippet?.unscoped_name}`}
+            >
+              {snippet?.unscoped_name}
+            </Link>
+          </h1>
+          {snippet?.snippet_type && <TypeBadge type={snippet.snippet_type} />}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button variant="outline" size="sm" onClick={handleStarClick}>
+            <Star
+              className={`w-4 h-4 mr-2 ${isStarred ? "fill-yellow-500 text-yellow-500" : ""}`}
+            />
+            {isStarred ? "Starred" : "Star"}
+            {snippet!.star_count > 0 && (
+              <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
+                {snippet!.star_count}
+              </span>
+            )}
+          </Button>
+          {/* <Button variant="outline" size="sm">
+            <Eye className="w-4 h-4 mr-2" />
+            Watch
+          </Button> */}
+
+          <Button variant="outline" size="sm" onClick={() => forkSnippet()}>
+            <GitFork className="w-4 h-4 mr-2" />
+            {snippet?.owner_name === session?.github_username ? "Save" : "Fork"}
+          </Button>
+        </div>
+      </div>
+      {/* <div className="mt-4 flex justify-end items-center text-sm text-gray-500">
+        <span className="mr-4">Last updated: 2 days ago</span>
+        <span>Version: 1.0.0</span>
+      </div> */}
+    </header>
+  )
+}

package/src/components/ViewSnippetSidebar.tsx

@@ -0,0 +1,162 @@
+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/snippets"
+                              >
+                                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/confirm-delete-snippet-dialog.tsx

@@ -0,0 +1,80 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Button } from "../ui/button"
+import { useState } 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"
+import { useLocation } from "wouter"
+
+export const ConfirmDeleteSnippetDialog = ({
+  open,
+  onOpenChange,
+  snippetId,
+  snippetName,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  snippetId: string
+  snippetName: string
+}) => {
+  const axios = useAxios()
+  const { toast } = useToast()
+  const qc = useQueryClient()
+  const [pending, setPending] = useState(false)
+  const [, navigate] = useLocation()
+
+  const handleDelete = async () => {
+    try {
+      setPending(true)
+      await axios.post("/snippets/delete", {
+        snippet_id: snippetId,
+      })
+      onOpenChange(false)
+      setPending(false)
+      toast({
+        title: "Snippet deleted",
+        description: `Successfully deleted "${snippetName}"`,
+      })
+      qc.invalidateQueries({ queryKey: ["snippets"] })
+      navigate("/dashboard")
+    } catch (error) {
+      console.error("Error deleting snippet:", error)
+      toast({
+        title: "Error",
+        description: "Failed to delete the snippet. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm Delete Snippet</DialogTitle>
+        </DialogHeader>
+        <p>Are you sure you want to delete the snippet "{snippetName}"?</p>
+        <p>This action cannot be undone.</p>
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={pending}
+          >
+            {pending ? "Deleting..." : "Delete"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useConfirmDeleteSnippetDialog = createUseDialog(
+  ConfirmDeleteSnippetDialog,
+)

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

@@ -0,0 +1,146 @@
+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/components/dialogs/create-use-dialog.tsx

@@ -0,0 +1,34 @@
+import { FunctionComponent, useMemo, useState } from "react"
+
+export const createUseDialog = <DialogType extends React.ComponentType<any>>(
+  DialogComponent: DialogType,
+) => {
+  return () => {
+    const [open, setOpen] = useState(false)
+
+    return useMemo(
+      () => ({
+        openDialog: () => {
+          setOpen(true)
+        },
+        closeDialog: () => {
+          setOpen(false)
+        },
+        Dialog: (
+          props: Omit<
+            React.ComponentProps<DialogType>,
+            "open" | "onOpenChange"
+          >,
+        ) => (
+          <DialogComponent
+            {...(props as any)}
+            open={open}
+            onOpenChange={setOpen}
+          />
+        ),
+        open,
+      }),
+      [open],
+    )
+  }
+}