@tscircuit/cli 0.0.393 → 0.1.1

package/frontend/components/dialogs/generic-export-dialog.tsx

@@ -1,189 +0,0 @@
-import { useMemo, useState } from "react"
-import { Dialog } from "@headlessui/react"
-import { useGlobalStore } from "frontend/hooks/use-global-store"
-import { useActiveDevPackageExampleLite } from "frontend/hooks/use-active-dev-package-example-lite"
-import { Button } from "../ui/button"
-import axios from "axios"
-import type { ExportParametersInput } from "api/lib/zod/export_parameters"
-
-export const useGenericExportDialog = ({
-  exportFileName,
-  dialogTitle,
-  dialogDescription,
-  exportParameters,
-  fileExtension = "",
-}: {
-  exportFileName: string
-  dialogTitle: string
-  dialogDescription: string
-  exportParameters: ExportParametersInput
-  fileExtension?: string
-}) => {
-  const [open, setIsOpen] = useState(false)
-  const activeDevExamplePackage = useActiveDevPackageExampleLite()
-  const [isExporting, setIsExporting] = useState(false)
-  const [exportError, setExportError] = useState<string | null>(null)
-
-  return useMemo(() => {
-    const openDialog = () => {
-      setIsOpen(true)
-    }
-    const closeDialog = () => {
-      setIsOpen(false)
-      setIsExporting(false)
-    }
-    if (!activeDevExamplePackage)
-      return {
-        openDialog,
-        closeDialog,
-        Component: () => null,
-      }
-    const { file_path: inputFilePath, export_name: exampleExportName } =
-      activeDevExamplePackage
-    const outputName = `${
-      inputFilePath.split("/").pop()?.split(".")[0]
-    }-${exampleExportName}-${exportFileName}${fileExtension}`
-
-    return {
-      openDialog,
-      closeDialog,
-      Component: () => (
-        <GenericExportDialog
-          dialogTitle={dialogTitle}
-          dialogDescription={dialogDescription}
-          open={open}
-          isExporting={isExporting}
-          filePath={inputFilePath}
-          tsCircuitExportName={exampleExportName}
-          outputName={outputName}
-          exportError={exportError}
-          onClickExport={async () => {
-            setExportError(null)
-            setIsExporting(true)
-            try {
-              if (exportParameters.should_export_pnp_csv) {
-                exportParameters.pnp_csv_file_name ??= exportFileName
-              }
-              if (exportParameters.should_export_bom_csv) {
-                exportParameters.bom_csv_file_name ??= exportFileName
-              }
-              if (exportParameters.should_export_soup_json) {
-                exportParameters.soup_json_file_name ??= exportFileName
-              }
-
-              let export_request = await axios
-                .post("/api/export_requests/create", {
-                  example_file_path: activeDevExamplePackage.file_path,
-                  export_name: activeDevExamplePackage.export_name,
-                  export_parameters: exportParameters,
-                })
-                .then((r) => r.data.export_request)
-              const pollExportRequest = async () => {
-                while (!export_request.is_complete) {
-                  try {
-                    export_request = await axios
-                      .post("/api/export_requests/get", {
-                        export_request_id: export_request.export_request_id,
-                      })
-                      .then((r) => r.data.export_request)
-                  } catch (e: any) {
-                    console.error(e)
-                    setExportError(
-                      `${e.toString()}\n\n${e.response?.data?.error?.message}`,
-                    )
-                    setIsExporting(false)
-                    return
-                  }
-                  await new Promise((resolve) => setTimeout(resolve, 100))
-                }
-                setIsExporting(false)
-              }
-              await pollExportRequest()
-              // open /api/export_files/download?export_file_id=... in new tab
-              const export_file_id =
-                export_request.file_summary[0].export_file_id
-              window.open(
-                `/api/export_files/download?export_file_id=${export_file_id}`,
-                "_blank",
-              )
-              setIsExporting(false)
-            } catch (e: any) {
-              console.error(e)
-              setExportError(
-                `${e.toString()}\n\n${e.response?.data?.error?.message}`,
-              )
-              setIsExporting(false)
-            }
-          }}
-          onClose={() => closeDialog()}
-        />
-      ),
-    }
-  }, [open, isExporting, exportError])
-}
-
-export const GenericExportDialog = ({
-  open,
-  dialogTitle,
-  dialogDescription,
-  isExporting,
-  filePath,
-  tsCircuitExportName,
-  outputName,
-  exportError,
-  onClose,
-  onClickExport,
-}: {
-  open: boolean
-  dialogTitle: string
-  dialogDescription: string
-  filePath: string
-  tsCircuitExportName: string
-  isExporting: boolean
-  outputName: string
-  exportError?: string | null
-  onClose: (value: boolean) => void
-  onClickExport: () => any
-}) => {
-  return (
-    <Dialog open={open} onClose={onClose} className="relative z-[101]">
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <Dialog.Panel className="w-full max-w-lg rounded bg-white p-6 border border-[rgba(0,0,0,0.3)]">
-          <Dialog.Title className="text-lg font-semibold tracking-tight text-black">
-            {dialogTitle}
-          </Dialog.Title>
-          <Dialog.Description className="text-sm font-medium text-muted-foreground">
-            {dialogDescription}
-          </Dialog.Description>
-          {exportError && (
-            <div className="text-red-700 bg-red-100 border-red-200 border whitespace-pre-wrap font-mono text-xs p-4 mt-8">
-              {exportError}
-            </div>
-          )}
-          <div className="text-xs font-medium grid grid-cols-4 font-mono mt-8 gap-4">
-            <div className="text-muted-foreground font-sans">Status</div>
-            <div className="col-span-3 text-muted-foreground font-sans">
-              {isExporting ? "Exporting" : "Not Started"}
-            </div>
-            <div className="text-muted-foreground font-sans">File Path</div>
-            <div className="col-span-3">{filePath.split("/examples/")[1]}</div>
-            <div className="text-muted-foreground  font-sans">Export Name</div>
-            <div className="col-span-3">{tsCircuitExportName}</div>
-            <div className="text-muted-foreground font-sans">Output Name</div>
-            <div className="col-span-3">{outputName}</div>
-          </div>
-          <div className="flex mt-8 justify-end">
-            <Button
-              variant={isExporting ? "ghost" : "default"}
-              disabled={isExporting}
-              onClick={onClickExport}
-            >
-              {isExporting ? `Exporting...` : `Export`}
-            </Button>
-          </div>
-        </Dialog.Panel>
-      </div>
-    </Dialog>
-  )
-}

package/frontend/components/dialogs/gerber-export-dialog.tsx

@@ -1,168 +0,0 @@
-import { useMemo, useState } from "react"
-import { Dialog } from "@headlessui/react"
-import { useGlobalStore } from "frontend/hooks/use-global-store"
-import { useActiveDevPackageExampleLite } from "frontend/hooks/use-active-dev-package-example-lite"
-import { Button } from "../ui/button"
-import axios from "axios"
-
-export const useGerberExportDialog = () => {
-  const [open, setIsOpen] = useState(false)
-  const activeDevExamplePackage = useActiveDevPackageExampleLite()
-  const [isExporting, setIsExporting] = useState(false)
-  const [exportError, setExportError] = useState<string | null>(null)
-
-  return useMemo(() => {
-    const openDialog = () => {
-      setIsOpen(true)
-    }
-    const closeDialog = () => {
-      setIsOpen(false)
-      setIsExporting(false)
-    }
-    if (!activeDevExamplePackage)
-      return {
-        openDialog,
-        closeDialog,
-        Component: () => null,
-      }
-    const { file_path, export_name } = activeDevExamplePackage
-    const outputName = `${
-      file_path.split("/").pop()?.split(".")[0]
-    }-${export_name}-gerbers.zip`
-
-    return {
-      openDialog,
-      closeDialog,
-      Component: () => (
-        <GerberExportDialog
-          open={open}
-          isExporting={isExporting}
-          filePath={file_path}
-          exportName={export_name}
-          outputName={outputName}
-          exportError={exportError}
-          onClickExport={async () => {
-            setExportError(null)
-            setIsExporting(true)
-            try {
-              let export_request = await axios
-                .post("/api/export_requests/create", {
-                  example_file_path: activeDevExamplePackage.file_path,
-                  export_name: activeDevExamplePackage.export_name,
-                  export_parameters: {
-                    should_export_gerber_zip: true,
-                    gerbers_zip_file_name: outputName,
-                  },
-                })
-                .then((r) => r.data.export_request)
-
-              const pollExportRequest = async () => {
-                while (!export_request.is_complete) {
-                  try {
-                    export_request = await axios
-                      .post("/api/export_requests/get", {
-                        export_request_id: export_request.export_request_id,
-                      })
-                      .then((r) => r.data.export_request)
-                  } catch (e: any) {
-                    console.error(e)
-                    setExportError(
-                      `${e.toString()}\n\n${e.response?.data?.error?.message}`,
-                    )
-                    setIsExporting(false)
-                    return
-                  }
-                  await new Promise((resolve) => setTimeout(resolve, 100))
-                }
-                setIsExporting(false)
-              }
-
-              await pollExportRequest()
-
-              // open /api/export_files/download?export_file_id=... in new tab
-
-              const export_file_id =
-                export_request.file_summary[0].export_file_id
-
-              window.open(
-                `/api/export_files/download?export_file_id=${export_file_id}`,
-                "_blank",
-              )
-
-              setIsExporting(false)
-            } catch (e: any) {
-              console.error(e)
-              setExportError(
-                `${e.toString()}\n\n${e.response?.data?.error?.message}`,
-              )
-              setIsExporting(false)
-            }
-          }}
-          onClose={() => closeDialog()}
-        />
-      ),
-    }
-  }, [open, isExporting, exportError])
-}
-
-export const GerberExportDialog = ({
-  open,
-  isExporting,
-  filePath,
-  exportName,
-  outputName,
-  exportError,
-  onClose,
-  onClickExport,
-}: {
-  open: boolean
-  filePath: string
-  exportName: string
-  isExporting: boolean
-  outputName: string
-  exportError?: string | null
-  onClose: (value: boolean) => void
-  onClickExport: () => any
-}) => {
-  return (
-    <Dialog open={open} onClose={onClose} className="relative z-[101]">
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <Dialog.Panel className="w-full max-w-lg rounded bg-white p-6 border border-[rgba(0,0,0,0.3)]">
-          <Dialog.Title className="text-lg font-semibold tracking-tight text-black">
-            Export Gerbers
-          </Dialog.Title>
-          <Dialog.Description className="text-sm font-medium text-muted-foreground">
-            Export your PCB design to Gerber files.
-          </Dialog.Description>
-          {exportError && (
-            <div className="text-red-700 bg-red-100 border-red-200 border whitespace-pre-wrap font-mono text-xs p-4 mt-8">
-              {exportError}
-            </div>
-          )}
-          <div className="text-xs font-medium grid grid-cols-4 font-mono mt-8 gap-4">
-            <div className="text-muted-foreground font-sans">Status</div>
-            <div className="col-span-3 text-muted-foreground font-sans">
-              {isExporting ? "Exporting" : "Not Started"}
-            </div>
-            <div className="text-muted-foreground font-sans">File Path</div>
-            <div className="col-span-3">{filePath.split("/examples/")[1]}</div>
-            <div className="text-muted-foreground  font-sans">Export Name</div>
-            <div className="col-span-3">{exportName}</div>
-            <div className="text-muted-foreground font-sans">Output Name</div>
-            <div className="col-span-3">{outputName}</div>
-          </div>
-          <div className="flex mt-8 justify-end">
-            <Button
-              variant={isExporting ? "ghost" : "default"}
-              disabled={isExporting}
-              onClick={onClickExport}
-            >
-              {isExporting ? `Exporting...` : `Export`}
-            </Button>
-          </div>
-        </Dialog.Panel>
-      </div>
-    </Dialog>
-  )
-}

package/frontend/components/global-context-providers.tsx

@@ -1,11 +0,0 @@
-import { Toaster } from "react-hot-toast"
-import { QueryClient, QueryClientProvider } from "react-query"
-
-const queryClient = new QueryClient()
-
-export const GlobalContextProviders = ({ children }: any) => (
-  <>
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    <Toaster />
-  </>
-)

package/frontend/components/select-example-search.tsx

@@ -1,118 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "frontend/lib/utils"
-import { Button } from "frontend/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandShortcut,
-} from "frontend/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "frontend/components/ui/popover"
-import { useGlobalStore } from "frontend/hooks/use-global-store"
-import { useDevPackageExamples } from "../hooks/use-dev-package-examples"
-import { useActiveDevPackageExampleLite } from "frontend/hooks/use-active-dev-package-example-lite"
-
-export function inflatePackageExample(ex: any) {
-  if (!ex) return ex
-  return {
-    ...ex,
-    expath: ex.file_path.replace(/.*examples\//, ""),
-    searchable_id: `${ex.file_path.replace(/.*examples\//, "")} | ${
-      ex.export_name
-    }`,
-  }
-}
-
-export const SelectExampleSearch = () => {
-  const [open, setOpen] = React.useState(false)
-  const { data: examples } = useDevPackageExamples()
-  const [active_dev_example_package_id, setActiveDevExamplePackageId] =
-    useGlobalStore((s) => [
-      s.active_dev_example_package_id,
-      s.setActiveDevExamplePackageId,
-    ])
-
-  const activeDevExamplePackage = useActiveDevPackageExampleLite()
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "o" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  return (
-    <Popover open={open} onOpenChange={setOpen} modal>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          <div>
-            {activeDevExamplePackage
-              ? activeDevExamplePackage.expath
-              : "Select Circuit"}
-          </div>
-          <CommandShortcut>
-            <kbd>⌘O</kbd>
-          </CommandShortcut>
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[400px] p-0 z-[101]">
-        <Command value={active_dev_example_package_id ?? "none"}>
-          <CommandInput placeholder="Search for circuit..." className="h-9" />
-          <CommandList>
-            <CommandEmpty>
-              <div className="text-gray-600 mt-8">
-                No matching circuits in{" "}
-                <span className="font-mono bg-gray-100 py-0.5 px-1 rounded-sm">
-                  ./examples
-                </span>
-              </div>
-              <Button className="mt-12 mb-8">Create Circuit</Button>
-            </CommandEmpty>
-            <CommandGroup>
-              {examples?.map((example) => (
-                <CommandItem
-                  key={example.dev_package_example_id}
-                  value={example.searchable_id}
-                  onSelect={() => {
-                    setActiveDevExamplePackageId(
-                      example.dev_package_example_id.toString(),
-                    )
-                    setOpen(false)
-                  }}
-                  className="flex justify-between cursor-pointer hover:bg-gray-100"
-                >
-                  <div className="text-gray-800">{example.expath}</div>
-                  <div className="font-mono text-xs text-gray-600">
-                    {example.export_name}
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}

package/frontend/components/ui/alert-dialog.tsx

@@ -1,139 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "frontend/lib/utils"
-import { buttonVariants } from "frontend/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className,
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/frontend/components/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "frontend/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }