@tscircuit/fake-snippets 0.0.67 → 0.0.69

package/src/components/package-port/CodeEditor.tsx

@@ -28,7 +28,7 @@ import CodeEditorHeader from "@/components/package-port/CodeEditorHeader"
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import type { PackageFile } from "./CodeAndPreview"
+import type { CreateFileProps, PackageFile } from "./CodeAndPreview"
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 
 const defaultImports = `
@@ -39,7 +39,6 @@ import type { CommonLayoutProps } from "@tscircuit/props"
 
 export const CodeEditor = ({
   onCodeChange,
-  onDtsChange,
   readOnly = false,
   files = [],
   isStreaming = false,
@@ -48,10 +47,11 @@ export const CodeEditor = ({
   pkgFilesLoaded,
   currentFile,
   setCurrentFile,
+  handleCreateFile,
 }: {
   onCodeChange: (code: string, filename?: string) => void
-  onDtsChange?: (dts: string) => void
   files: PackageFile[]
+  handleCreateFile: (props: CreateFileProps) => void
   readOnly?: boolean
   isStreaming?: boolean
   pkgFilesLoaded?: boolean
@@ -67,9 +67,8 @@ export const CodeEditor = ({
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(files[0]?.content || "")
-  const [isCodeEditorReady, setIsCodeEditorReady] = useState(false)
 
-  const { highlighter, isLoading } = useShikiHighlighter()
+  const { highlighter } = useShikiHighlighter()
 
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
@@ -191,9 +190,6 @@ export const CodeEditor = ({
         return fetch(input, init)
       },
       delegate: {
-        finished: () => {
-          setIsCodeEditorReady(true)
-        },
         started: () => {
           const manualEditsTypeDeclaration = `
 				  declare module "manual-edits.json" {
@@ -248,20 +244,6 @@ export const CodeEditor = ({
           // setCode(newContent)
           onCodeChange(newContent, currentFile)
           onFileContentChanged?.(currentFile, newContent)
-
-          // Generate TypeScript declarations for TypeScript/TSX files
-          if (currentFile.endsWith(".ts") || currentFile.endsWith(".tsx")) {
-            const { outputFiles } = env.languageService.getEmitOutput(
-              currentFile,
-              true,
-            )
-            const dtsFile = outputFiles.find((file) =>
-              file.name.endsWith(".d.ts"),
-            )
-            if (dtsFile?.text && onDtsChange) {
-              onDtsChange(dtsFile.text)
-            }
-          }
         }
         if (update.selectionSet) {
           const pos = update.state.selection.main.head
@@ -452,8 +434,6 @@ export const CodeEditor = ({
 
     if (currentFile.endsWith(".tsx") || currentFile.endsWith(".ts")) {
       ata(`${defaultImports}${code}`)
-    } else if (!!currentFile) {
-      setIsCodeEditorReady(true)
     }
 
     return () => {
@@ -542,6 +522,7 @@ export const CodeEditor = ({
           [sidebarOpen, setSidebarOpen] as ReturnType<typeof useState<boolean>>
         }
         onFileSelect={handleFileChange}
+        handleCreateFile={handleCreateFile}
       />
       <div className="flex flex-col flex-1 w-full min-w-0 h-full">
         {showImportAndFormatButtons && (
@@ -560,9 +541,9 @@ export const CodeEditor = ({
         )}
         <div
           ref={editorRef}
-          className={`flex-1 overflow-auto [&_.cm-editor]:h-full [&_.cm-scroller]:!h-full ${
-            !isCodeEditorReady ? "opacity-50" : ""
-          }`}
+          className={
+            "flex-1 overflow-auto [&_.cm-editor]:h-full [&_.cm-scroller]:!h-full"
+          }
         />
       </div>
     </div>

package/src/components/package-port/EditorNav.tsx

@@ -39,7 +39,6 @@ import { Link, useLocation } from "wouter"
 import { useAxios } from "@/hooks/use-axios"
 import { useToast } from "@/hooks/use-toast"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
-import { useCreateOrderDialog } from "@/components/dialogs/create-order-dialog"
 import { useFilesDialog } from "@/components/dialogs/files-dialog"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
@@ -81,8 +80,6 @@ export default function EditorNav({
   } = useUpdatePackageDescriptionDialog()
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeletePackageDialog()
-  const { Dialog: CreateOrderDialog, openDialog: openCreateOrderDialog } =
-    useCreateOrderDialog()
   const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
   const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
     useViewTsFilesDialog()
@@ -358,13 +355,6 @@ export default function EditorNav({
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openCreateOrderDialog()}
-                >
-                  <PackageIcon className="mr-2 h-3 w-3" />
-                  Submit Order
-                </DropdownMenuItem>
                 <DropdownMenuItem
                   className="text-xs"
                   onClick={() => openFilesDialog()}
@@ -519,8 +509,8 @@ export default function EditorNav({
       <DeleteDialog
         packageId={pkg?.package_id ?? ""}
         packageName={pkg?.unscoped_name ?? ""}
+        packageOwner={pkg?.owner_github_username ?? ""}
       />
-      <CreateOrderDialog />
       <FilesDialog snippetId={pkg?.package_id ?? ""} />
       <ViewTsFilesDialog />
     </nav>

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

@@ -15,6 +15,7 @@ interface PackageDetailsForm {
   website: string
   license: string | null
   visibility: string
+  defaultView: string
 }
 
 interface UsePackageDetailsFormProps {
@@ -22,6 +23,7 @@ interface UsePackageDetailsFormProps {
   initialWebsite: string
   initialLicense: string | null
   initialVisibility: string
+  initialDefaultView: string
   isDialogOpen: boolean
 }
 
@@ -30,6 +32,7 @@ export const usePackageDetailsForm = ({
   initialWebsite,
   initialLicense,
   initialVisibility,
+  initialDefaultView,
   isDialogOpen,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
@@ -37,6 +40,7 @@ export const usePackageDetailsForm = ({
     website: initialWebsite,
     license: initialLicense || null,
     visibility: initialVisibility,
+    defaultView: initialDefaultView,
   })
   const [websiteError, setWebsiteError] = useState<string | null>(null)
 
@@ -47,6 +51,7 @@ export const usePackageDetailsForm = ({
         website: initialWebsite,
         license: initialLicense || null,
         visibility: initialVisibility,
+        defaultView: initialDefaultView,
       })
       setWebsiteError(null)
     }
@@ -56,6 +61,7 @@ export const usePackageDetailsForm = ({
     initialWebsite,
     initialLicense,
     initialVisibility,
+    initialDefaultView,
   ])
 
   useEffect(() => {
@@ -76,18 +82,25 @@ export const usePackageDetailsForm = ({
     [formData.visibility, initialVisibility],
   )
 
+  const hasDefaultViewChanged = useMemo(
+    () => formData.defaultView !== initialDefaultView,
+    [formData.defaultView, initialDefaultView],
+  )
+
   const hasChanges = useMemo(
     () =>
       formData.description !== initialDescription ||
       formData.website !== initialWebsite ||
       formData.license !== initialLicense ||
-      formData.visibility !== initialVisibility,
+      formData.visibility !== initialVisibility ||
+      formData.defaultView !== initialDefaultView,
     [
       formData,
       initialDescription,
       initialWebsite,
       initialLicense,
       initialVisibility,
+      initialDefaultView,
     ],
   )
 
@@ -99,6 +112,7 @@ export const usePackageDetailsForm = ({
     websiteError,
     hasLicenseChanged,
     hasVisibilityChanged,
+    hasDefaultViewChanged,
     hasChanges,
     isFormValid,
   }

package/src/hooks/useFileManagement.ts

@@ -0,0 +1,59 @@
+import { Dispatch, SetStateAction } from "react"
+import { isValidFileName } from "@/lib/utils/isValidFileName"
+import {
+  CodeAndPreviewState,
+  CreateFileProps,
+} from "../components/package-port/CodeAndPreview"
+
+export function useFileManagement(
+  state: CodeAndPreviewState,
+  setState: Dispatch<SetStateAction<CodeAndPreviewState>>,
+) {
+  const handleCreateFile = async ({
+    newFileName,
+    setErrorMessage,
+    onFileSelect,
+    setNewFileName,
+    setIsCreatingFile,
+  }: CreateFileProps) => {
+    newFileName = newFileName.trim()
+    if (!newFileName) {
+      setErrorMessage("File name cannot be empty")
+      return
+    }
+    if (!isValidFileName(newFileName)) {
+      setErrorMessage(
+        'Invalid file name. Avoid using special characters like <>:"/\\|?*',
+      )
+      return
+    }
+    setErrorMessage("")
+
+    const fileExists = state.pkgFilesWithContent.some(
+      (file) => file.path === newFileName,
+    )
+
+    if (fileExists) {
+      setErrorMessage("A file with this name already exists")
+      return
+    }
+
+    setState((prev) => {
+      const updatedFiles = [
+        ...prev.pkgFilesWithContent,
+        { path: newFileName, content: "" },
+      ]
+      return {
+        ...prev,
+        pkgFilesWithContent: updatedFiles,
+      } as CodeAndPreviewState
+    })
+    onFileSelect(newFileName)
+    setIsCreatingFile(false)
+    setNewFileName("")
+  }
+
+  return {
+    handleCreateFile,
+  }
+}

package/src/index.css

@@ -7,6 +7,19 @@
   }
 }
 
+/* add the code bellow */
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
 .shiki {
   font-family: "Fira Code", monospace;
   font-size: 14px;

package/src/lib/utils/isValidFileName.ts

@@ -0,0 +1,5 @@
+export const isValidFileName = (name: string) => {
+  // Basic checks for file naming conventions
+  const invalidChars = /[<>:"/\\|?*]/
+  return name.length > 0 && !invalidChars.test(name)
+}

package/src/pages/dashboard.tsx

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

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>
-  )
-}