@tscircuit/cli 0.0.2

package/dev-server-frontend/src/HeaderMenu.tsx

@@ -0,0 +1,188 @@
+import { useState } from "react"
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarCheckboxItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "src/components/ui/menubar"
+import toast from "react-hot-toast"
+import { useGlobalStore } from "./hooks/use-global-store"
+
+export const HeaderMenu = () => {
+  const [viewMode, setViewMode] = useGlobalStore((s) => [
+    s.view_mode,
+    s.setViewMode,
+  ])
+  const [splitMode, setSplitMode] = useGlobalStore((s) => [
+    s.split_mode,
+    s.setSplitMode,
+  ])
+  const [inDebugMode, setInDebugMode] = useState(false)
+
+  return (
+    <Menubar className="border-none shadow-none">
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem disabled>seveibar/arduino@1.0.0</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem
+            onSelect={() => {
+              toast.error("Not yet implemented!")
+            }}
+          >
+            New Circuit
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Export</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem
+                onSelect={() => {
+                  toast.error("Not yet implemented!")
+                }}
+              >
+                Gerbers
+              </MenubarItem>
+              <MenubarItem
+                onSelect={() => {
+                  toast.error("Not yet implemented!")
+                }}
+              >
+                Netlist
+              </MenubarItem>
+              <MenubarItem
+                onSelect={() => {
+                  toast.error("Not yet implemented!")
+                }}
+              >
+                PNG
+              </MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup
+            value={viewMode}
+            onValueChange={(v) => setViewMode(v as any)}
+          >
+            <MenubarRadioItem value="schematic">Schematic</MenubarRadioItem>
+            <MenubarRadioItem value="pcb">PCB</MenubarRadioItem>
+            <MenubarRadioItem value="split">Split View</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarRadioGroup
+            value={viewMode === "split" ? splitMode : "neither"}
+            onValueChange={(v) => setSplitMode(v as any)}
+          >
+            <MenubarRadioItem
+              disabled={viewMode !== "split"}
+              value="horizontal"
+            >
+              Horizontal Split
+            </MenubarRadioItem>
+            <MenubarRadioItem disabled={viewMode !== "split"} value="vertical">
+              Vertical Split
+            </MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarCheckboxItem
+            checked={inDebugMode}
+            onSelect={() => setInDebugMode(!inDebugMode)}
+          >
+            Debug Mode
+          </MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Package</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem disabled>seveibar/arduino@1.0.0</MenubarItem>
+          <MenubarSeparator />
+          <MenubarCheckboxItem
+            checked
+            onSelect={() => toast.error("Not yet implemented!")}
+          >
+            Published
+          </MenubarCheckboxItem>
+          <MenubarCheckboxItem
+            onSelect={() => toast.error("Not yet implemented!")}
+          >
+            Locked
+          </MenubarCheckboxItem>
+          <MenubarItem onSelect={() => toast.error("Not yet implemented!")}>
+            Publish New Version
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem
+            onSelect={() => {
+              toast.error("Not yet implemented!")
+              // window.open(`https://registry.tscircuit.com/${}`)
+            }}
+          >
+            View on Registry
+          </MenubarItem>
+          <MenubarItem
+            onSelect={() => {
+              toast.error("Not yet implemented!")
+              // window.open(`https://registry.tscircuit.com/${}`)
+            }}
+          >
+            Edit Registry Settings
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>About</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem
+            onSelect={() => {
+              window.open("https://github.com/tscircuit/tscircuit", "_blank")
+            }}
+          >
+            Github
+          </MenubarItem>
+          <MenubarItem
+            onSelect={() => {
+              toast.error("Not yet implemented!")
+            }}
+          >
+            Tutorials
+          </MenubarItem>
+          <MenubarItem
+            onSelect={() => {
+              toast.error("Not yet implemented!")
+            }}
+          >
+            tscircuit.com
+          </MenubarItem>
+          <MenubarItem
+            onSelect={() => {
+              toast.error("Not yet implemented!")
+            }}
+          >
+            registry.tscircuit.com
+          </MenubarItem>
+          <MenubarItem
+            onSelect={() => {
+              window.open("https://tscircuit.com/changelog", "_blank")
+            }}
+          >
+            Changelog
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}

package/dev-server-frontend/src/components/command-k.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react"
+import {
+  Command,
+  CommandDialog,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "./ui/command"
+import { useGlobalStore } from "src/hooks/use-global-store"
+
+export const CommandK = () => {
+  const [open, setOpen] = useState(false)
+  const store = useGlobalStore()
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  const close = () => {
+    setOpen(false)
+    return true
+  }
+
+  return (
+    <CommandDialog open={open}>
+      <Command className="rounded-lg border shadow-md">
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandGroup>
+          <CommandList>
+            <CommandItem
+              onSelect={() => close() && store.setViewMode("schematic")}
+            >
+              View Schematic
+              <CommandShortcut></CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={() => close() && store.setViewMode("pcb")}>
+              View PCB
+              <CommandShortcut></CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={() => close() && store.setViewMode("split")}>
+              View in Split Mode
+              <CommandShortcut></CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={() => close() && store.setViewMode("split")}>
+              Vertical Split
+              <CommandShortcut></CommandShortcut>
+            </CommandItem>
+          </CommandList>
+        </CommandGroup>
+      </Command>
+    </CommandDialog>
+  )
+}

package/dev-server-frontend/src/components/global-context-providers.tsx

@@ -0,0 +1,11 @@
+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/dev-server-frontend/src/components/select-example-search.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import { useQuery } from "react-query"
+import axios from "axios"
+
+import { cn } from "src/lib/utils"
+import { Button } from "src/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "src/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "src/components/ui/popover"
+import { useGlobalStore } from "src/hooks/use-global-store"
+
+export const useDevPackageExamples = () => {
+  return useQuery("examples", async () => {
+    const { data } = await axios.get("/api/dev_package_examples/list")
+    return data.dev_package_examples.map(inflatePackageExample) as Array<{
+      dev_package_example_id: number
+      searchable_id: string
+      file_path: string
+      expath: string
+      export_name: string
+      last_updated_at: string
+    }>
+  })
+}
+
+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 = inflatePackageExample(
+    examples?.find(
+      (ex) =>
+        ex.dev_package_example_id.toString() === active_dev_example_package_id
+    )
+  )
+
+  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">
+        <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/dev-server-frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "src/lib/utils"
+import { buttonVariants } from "src/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/dev-server-frontend/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "src/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 }