@tscircuit/fake-snippets 0.0.67 → 0.0.68

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

@@ -16,6 +16,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog"
@@ -217,151 +218,157 @@ export const EditPackageDetailsDialog = ({
         </DialogContent>
       </Dialog>
       <Dialog open={open !== showConfirmDelete} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-[500px] lg:h-[70vh] sm:h-[90vh] overflow-y-auto w-[95vw] p-6 gap-6 rounded-2xl shadow-lg">
-          <DialogHeader>
-            <DialogTitle>Edit Package Details</DialogTitle>
-            <DialogDescription>
-              Update your package’s description, website, visibility, or delete
-              it.
-            </DialogDescription>
-          </DialogHeader>
+        <DialogContent className="sm:max-w-[500px] lg:h-[70vh] sm:h-[90vh] overflow-y-auto 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="website">Website</Label>
+                  <Input
+                    id="website"
+                    value={formData.website}
+                    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"
+                    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>
 
-          <div className="grid gap-4">
-            <div className="space-y-1">
-              <Label htmlFor="website">Website</Label>
-              <Input
-                id="website"
-                value={formData.website}
-                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}
+              <details
+                className="mt-2 rounded-md"
+                onToggle={(e) => setDangerOpen(e.currentTarget.open)}
               >
-                <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>
+                <summary className="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={deleting}
+                      className="shrink-0 lg:w-[115px] w-[70px]"
+                    >
+                      {deleting ? "Deleting..." : "Delete"}
+                    </Button>
+                  </div>
+                </div>
+              </details>
             </div>
-            <div className="space-y-1">
-              <Label htmlFor="description">Description</Label>
-              <Textarea
-                id="description"
-                value={formData.description}
-                onChange={(e) =>
-                  setFormData((prev) => ({
-                    ...prev,
-                    description: e.target.value,
-                  }))
-                }
-                placeholder="Enter package description"
+          </div>
+
+          <DialogFooter className="mt-auto">
+            <div className="lg:px-2 flex flex-col sm:flex-row justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
                 disabled={updatePackageDetailsMutation.isLoading}
-                className="w-full min-h-[100px] 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,
-                  }))
+                className="sm:w-auto w-full"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() => updatePackageDetailsMutation.mutate()}
+                disabled={
+                  updatePackageDetailsMutation.isLoading ||
+                  !hasChanges ||
+                  !isFormValid
                 }
-                disabled={updatePackageDetailsMutation.isLoading}
+                className="sm:w-auto lg:w-[115px]"
               >
-                <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>
-          <details
-            className="mt-2 rounded-md"
-            onToggle={(e) => setDangerOpen(e.currentTarget.open)}
-          >
-            <summary className="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={deleting}
-                  className="shrink-0 lg:w-[115px] w-[70px]"
-                >
-                  {deleting ? "Deleting..." : "Delete"}
-                </Button>
-              </div>
+                {updatePackageDetailsMutation.isLoading
+                  ? "Updating..."
+                  : "Save Changes"}
+              </Button>
             </div>
-          </details>
-
-          <div className=" lg:px-2 flex flex-col sm:flex-row justify-end gap-3">
-            <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>

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

@@ -22,6 +22,8 @@ import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
+import { isValidFileName } from "@/lib/utils/isValidFileName"
+import { useFileManagement } from "@/hooks/useFileManagement"
 
 interface Props {
   pkg?: Package
@@ -32,12 +34,19 @@ export interface PackageFile {
   content: string
 }
 
-interface CodeAndPreviewState {
+export interface CreateFileProps {
+  newFileName: string
+  setErrorMessage: (message: string) => void
+  onFileSelect: (fileName: string) => void
+  setNewFileName: (fileName: string) => void
+  setIsCreatingFile: (isCreatingFile: boolean) => void
+}
+
+export interface CodeAndPreviewState {
   pkgFilesWithContent: PackageFile[]
   initialFilesLoad: PackageFile[]
   showPreview: boolean
   fullScreen: boolean
-  dts: string
   lastSavedAt: number
   circuitJson: null | any
   isPrivate: boolean
@@ -92,7 +101,6 @@ export function CodeAndPreview({ pkg }: Props) {
     initialFilesLoad: [],
     showPreview: true,
     fullScreen: false,
-    dts: "",
     lastSavedAt: Date.now(),
     circuitJson: null,
     isPrivate: false,
@@ -148,7 +156,6 @@ export function CodeAndPreview({ pkg }: Props) {
 
     if (loadedFiles && !isLoadingFiles) {
       const processedResults = [...loadedFiles]
-
       setState((prev) => ({
         ...prev,
         pkgFilesWithContent: processedResults,
@@ -159,13 +166,7 @@ export function CodeAndPreview({ pkg }: Props) {
           defaultCode,
       }))
     }
-  }, [
-    isLoadingFiles,
-    pkg,
-    pkgFiles.data,
-    state.pkgFilesWithContent.length,
-    defaultCode,
-  ])
+  }, [isLoadingFiles, pkg, pkgFiles.data, defaultCode])
 
   const createPackageMutation = useCreatePackageMutation()
   const { mutate: createRelease } = useCreatePackageReleaseMutation({
@@ -250,10 +251,21 @@ export function CodeAndPreview({ pkg }: Props) {
     setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
 
     if (pkg) {
-      updatePackageFilesMutation.mutate({
-        package_name_with_version: `${pkg.name}@latest`,
-        ...pkg,
-      })
+      updatePackageFilesMutation.mutate(
+        {
+          package_name_with_version: `${pkg.name}@latest`,
+          ...pkg,
+        },
+        {
+          onSuccess: () => {
+            setState((prev) => ({
+              ...prev,
+              initialFilesLoad: [...prev.pkgFilesWithContent],
+            }))
+            pkgFiles.refetch()
+          },
+        },
+      )
     }
   }
 
@@ -284,10 +296,17 @@ export function CodeAndPreview({ pkg }: Props) {
     state.pkgFilesWithContent,
   ])
   const mainComponentPath = useMemo(() => {
-    return state.currentFile?.endsWith(".tsx") &&
+    const isReactComponentExported =
+      /export function\s+\w+/.test(currentFileCode) ||
+      /export const\s+\w+\s*=/.test(currentFileCode) ||
+      /export default\s+\w+/.test(currentFileCode) ||
+      /export default\s+function\s*(\w*)\s*\(/.test(currentFileCode) ||
+      /export default\s*\(\s*\)\s*=>/.test(currentFileCode)
+
+    return (state.currentFile?.endsWith(".tsx") ||
+      state.currentFile?.endsWith(".ts")) &&
       !!state.pkgFilesWithContent.some((x) => x.path == state.currentFile) &&
-      (currentFileCode.match(/export function (\w+)/) ||
-        currentFileCode.match(/export const (\w+) ?=/))
+      isReactComponentExported
       ? state.currentFile
       : state.defaultComponentFile
   }, [state.currentFile, state.pkgFilesWithContent, currentFileCode])
@@ -327,6 +346,8 @@ export function CodeAndPreview({ pkg }: Props) {
     })
   }
 
+  const { handleCreateFile } = useFileManagement(state, setState)
+
   if ((!pkg && urlParams.package_id) || pkgFiles.isLoading || isLoadingFiles) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -363,6 +384,7 @@ export function CodeAndPreview({ pkg }: Props) {
           )}
         >
           <CodeEditor
+            handleCreateFile={handleCreateFile}
             currentFile={state.currentFile}
             setCurrentFile={(file) =>
               setState((prev) => ({ ...prev, currentFile: file }))
@@ -379,7 +401,6 @@ export function CodeAndPreview({ pkg }: Props) {
                 ),
               }))
             }}
-            onDtsChange={(dts) => setState((prev) => ({ ...prev, dts }))}
             pkgFilesLoaded={state.pkgFilesLoaded}
           />
         </div>

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/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/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>