@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/App.tsx

@@ -1,314 +0,0 @@
-import { ComponentType, Suspense, lazy } from "react"
-import { Route, Switch } from "wouter"
-import "./components/CmdKMenu"
-import { ContextProviders } from "./ContextProviders"
-import React from "react"
-import { ReloadIcon } from "@radix-ui/react-icons"
-import { Loader2 } from "lucide-react"
-
-export const FullPageLoader = () => (
-  <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
-    <div className="w-48">
-      <div className="loading">
-        <div className="loading-bar"></div>
-      </div>
-    </div>
-  </div>
-)
-
-const lazyImport = (importFn: () => Promise<any>) =>
-  lazy<ComponentType<any>>(async () => {
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 500))
-      const module = await importFn()
-
-      if (module.default) {
-        return { default: module.default }
-      }
-
-      const pageExportNames = ["Page", "Component", "View"]
-      for (const suffix of pageExportNames) {
-        const keys = Object.keys(module).filter((key) => key.endsWith(suffix))
-        if (keys.length > 0) {
-          return { default: module[keys[0]] }
-        }
-      }
-
-      const componentExport = Object.values(module).find(
-        (exp) => typeof exp === "function" && exp.prototype?.isReactComponent,
-      )
-      if (componentExport) {
-        return { default: componentExport }
-      }
-
-      throw new Error(
-        `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}`,
-      )
-    } catch (error) {
-      console.error("Failed to load component:", error)
-      throw error
-    }
-  })
-
-const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
-const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
-const EditorPage = lazyImport(async () => {
-  const [editorModule] = await Promise.all([
-    import("@/pages/editor"),
-    import("@/lib/utils/load-prettier").then((m) => m.loadPrettier()),
-  ])
-  return editorModule
-})
-const LandingPage = lazyImport(() => import("@/pages/landing"))
-const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
-const LatestPage = lazyImport(() => import("@/pages/latest"))
-const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
-const SearchPage = lazyImport(() => import("@/pages/search"))
-const CreateOrganizationPage = lazyImport(
-  () => import("@/pages/create-organization"),
-)
-const ProfileRouter = lazyImport(() => import("@/components/ProfileRouter"))
-const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
-const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
-const TrendingPage = lazyImport(() => import("@/pages/trending"))
-const DatasheetPage = lazyImport(() => import("@/pages/datasheet"))
-const DatasheetsPage = lazyImport(() => import("@/pages/datasheets"))
-const PackageEditorPage = lazyImport(async () => {
-  const [editorModule] = await Promise.all([
-    import("@/pages/package-editor"),
-    import("@/lib/utils/load-prettier").then((m) => m.loadPrettier()),
-  ])
-  return editorModule
-})
-const ReleasesPage = lazyImport(() => import("@/pages/releases"))
-const ReleaseDetailPage = lazyImport(() => import("@/pages/release-detail"))
-const ReleaseBuildsPage = lazyImport(() => import("@/pages/release-builds"))
-const ReleasePreviewPage = lazyImport(() => import("@/pages/preview-release"))
-const OrganizationSettingsPage = lazyImport(
-  () => import("@/pages/organization-settings"),
-)
-const UserSettingsPage = lazyImport(() => import("@/pages/user-settings"))
-
-class ErrorBoundary extends React.Component<
-  { children: React.ReactNode },
-  { hasError: boolean; reloading: boolean }
-> {
-  private visibilityHandler?: () => void
-  private reloadTimeout?: number
-
-  constructor(props: { children: React.ReactNode }) {
-    super(props)
-    this.state = { hasError: false, reloading: false }
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true, reloading: false }
-  }
-
-  componentDidCatch(error: Error) {
-    console.error("ErrorBoundary caught", error)
-    const message = error.message || ""
-    if (
-      /(Loading chunk|ChunkLoadError|dynamically imported module)/i.test(
-        message,
-      )
-    ) {
-      const loadedAt = window.__APP_LOADED_AT || Date.now()
-      if (Date.now() - loadedAt >= 180_000) {
-        this.performReload()
-      }
-    }
-  }
-
-  componentDidUpdate(_prevProps: any, prevState: any) {
-    if (!prevState.hasError && this.state.hasError && !this.state.reloading) {
-      this.setupIdleReload()
-    }
-  }
-
-  componentWillUnmount() {
-    this.cleanup()
-  }
-
-  cleanup = () => {
-    if (this.visibilityHandler) {
-      document.removeEventListener("visibilitychange", this.visibilityHandler)
-      window.removeEventListener("focus", this.visibilityHandler)
-      this.visibilityHandler = undefined
-    }
-    if (this.reloadTimeout) {
-      clearTimeout(this.reloadTimeout)
-      this.reloadTimeout = undefined
-    }
-  }
-
-  performReload = () => {
-    if (this.state.reloading) return // Prevent multiple reloads
-
-    this.cleanup() // Clean up listeners before reload
-    this.setState({ reloading: true })
-    this.reloadTimeout = window.setTimeout(() => {
-      if (window?.location.href.includes("localhost:")) return
-      if (window?.location.href.includes("127.0.0.1:")) return
-      window.location.reload()
-    }, 500)
-  }
-
-  setupIdleReload = () => {
-    this.cleanup() // Clean up any existing handlers
-
-    this.visibilityHandler = () => {
-      const loadedAt = window.__APP_LOADED_AT || Date.now()
-      if (
-        document.visibilityState === "visible" &&
-        this.state.hasError &&
-        !this.state.reloading &&
-        Date.now() - loadedAt >= 180_000
-      ) {
-        this.performReload()
-      }
-    }
-
-    document.addEventListener("visibilitychange", this.visibilityHandler)
-    window.addEventListener("focus", this.visibilityHandler)
-
-    // In case the tab is already visible when the error occurs
-    this.visibilityHandler()
-  }
-
-  render() {
-    if (this.state.reloading) {
-      return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
-          <div className="max-w-md w-full text-center">
-            <div className="mb-6">
-              <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full mb-4">
-                <Loader2 className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin" />
-              </div>
-              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                Reloading Page
-              </h2>
-              <p className="text-gray-600 dark:text-gray-400">
-                We encountered an issue and are refreshing the page for you.
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-    if (this.state.hasError) {
-      return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
-          <div className="max-w-lg w-full text-center">
-            <div className="mb-8">
-              <div className="inline-flex items-center justify-center w-20 h-20 bg-red-100 dark:bg-red-900 rounded-full mb-6">
-                <svg
-                  className="w-10 h-10 text-red-600 dark:text-red-400"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                  />
-                </svg>
-              </div>
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
-                Oops! Something went wrong
-              </h1>
-              <p className="text-gray-600 dark:text-gray-400 mb-6">
-                We're experiencing technical difficulties. The page will
-                automatically reload when you return to this tab.
-              </p>
-            </div>
-            <div className="space-y-3">
-              <button
-                onClick={this.performReload}
-                className="w-full sm:w-auto inline-flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
-              >
-                <ReloadIcon className="w-4 h-4 mr-2" />
-                Reload Now
-              </button>
-            </div>
-          </div>
-        </div>
-      )
-    }
-    return this.props.children
-  }
-}
-
-function App() {
-  return (
-    <ContextProviders>
-      <ErrorBoundary>
-        <Suspense fallback={<FullPageLoader />}>
-          <Switch>
-            <Route path="/" component={LandingPage} />
-            <Route
-              path="/view-package/:author/:packageName"
-              component={ViewPackagePage}
-            />
-            <Route path="/editor" component={PackageEditorPage} />
-            <Route path="/legacy-editor" component={EditorPage} />
-            <Route path="/quickstart" component={QuickstartPage} />
-            <Route path="/dashboard" component={DashboardPage} />
-            <Route path="/latest" component={LatestPage} />
-            <Route path="/search" component={SearchPage} />
-            <Route path="/trending" component={TrendingPage} />
-            <Route path="/datasheets" component={DatasheetsPage} />
-            <Route path="/datasheets/:chipName" component={DatasheetPage} />
-            <Route path="/authorize" component={AuthenticatePage} />
-            <Route path="/my-orders" component={MyOrdersPage} />
-            <Route path="/dev-login" component={DevLoginPage} />
-
-            {/* Organization creation route */}
-            <Route path="/orgs/new" component={CreateOrganizationPage} />
-
-            {/* User settings */}
-            <Route path="/settings" component={UserSettingsPage} />
-
-            {/* Organization settings route */}
-            <Route
-              path="/:orgname/settings"
-              component={OrganizationSettingsPage}
-            />
-
-            {/* Profile fallback route - handles both organizations and users */}
-            <Route path="/:username" component={ProfileRouter} />
-
-            {/* Package-related routes - must come after profile fallback */}
-            <Route
-              path="/:author/:packageName/releases/:releaseId/builds"
-              component={ReleaseBuildsPage}
-            />
-            <Route
-              path="/:author/:packageName/releases/:releaseId"
-              component={ReleaseDetailPage}
-            />
-            <Route
-              path="/:author/:packageName/releases/:packageReleaseId/preview"
-              component={ReleasePreviewPage}
-            />
-            <Route
-              path="/:author/:packageName/releases/:packageReleaseId"
-              component={ReleaseDetailPage}
-            />
-            <Route
-              path="/:author/:packageName/releases"
-              component={ReleasesPage}
-            />
-            <Route path="/:author/:packageName" component={ViewPackagePage} />
-            {/* 404 fallback */}
-            <Route component={lazyImport(() => import("@/pages/404"))} />
-          </Switch>
-        </Suspense>
-      </ErrorBoundary>
-    </ContextProviders>
-  )
-}
-
-export default App

package/src/ContextProviders.tsx

@@ -1,94 +0,0 @@
-import {
-  MutationCache,
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
-} from "react-query"
-import { HelmetProvider } from "react-helmet-async"
-import { useEffect } from "react"
-import { useGlobalStore } from "./hooks/use-global-store"
-import { posthog } from "./lib/posthog"
-import { Toaster } from "react-hot-toast"
-import { populateQueryCacheWithSSRData } from "./lib/populate-query-cache-with-ssr-data"
-import { trackReactQueryApiFailure } from "./lib/react-query-api-failure-tracking"
-
-const staffGithubUsernames = [
-  "imrishabh18",
-  "seveibar",
-  "testuser",
-  ...(import.meta.env.VITE_STAFF_GITHUB_USERNAMES?.split(",") || []),
-]
-
-const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error, query) => {
-      trackReactQueryApiFailure(error, {
-        operationType: "query",
-        queryKey: query.queryKey,
-      })
-    },
-  }),
-  mutationCache: new MutationCache({
-    onError: (error, _variables, _context, mutation) => {
-      trackReactQueryApiFailure(error, {
-        operationType: "mutation",
-        mutationKey: mutation.options?.mutationKey,
-      })
-    },
-  }),
-})
-populateQueryCacheWithSSRData(queryClient)
-
-const isInternalGithubUser = (githubUsername?: string | null) => {
-  if (!githubUsername) return false
-  return staffGithubUsernames.some(
-    (internalGithubUsername: string) =>
-      internalGithubUsername.toLowerCase() === githubUsername.toLowerCase(),
-  )
-}
-
-function PostHogIdentifier() {
-  const session = useGlobalStore((s) => s.session)
-
-  useEffect(() => {
-    if (!posthog.__loaded) {
-      const checkInterval = setInterval(() => {
-        if (posthog.__loaded) {
-          clearInterval(checkInterval)
-          identifyUser()
-        }
-      }, 100)
-      return () => clearInterval(checkInterval)
-    }
-
-    const identifyUser = async () => {
-      try {
-        const githubUsername = session?.github_username
-
-        if (isInternalGithubUser(githubUsername)) {
-          posthog.identify(session?.github_username, {
-            is_tscircuit_staff: true,
-          })
-        }
-      } catch (error) {
-        // Error handling silently fails
-      }
-    }
-
-    identifyUser()
-  }, [session])
-
-  return null
-}
-
-export const ContextProviders = ({ children }: any) => {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <HelmetProvider>
-        <PostHogIdentifier />
-        {children}
-        <Toaster position="bottom-right" />
-      </HelmetProvider>
-    </QueryClientProvider>
-  )
-}

package/src/components/AiChatMessage.tsx

@@ -1,86 +0,0 @@
-import { BotIcon, ChevronDown, Eye, RotateCcw } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Avatar } from "@/components/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-export interface AiChatMessage {
-  sender: "user" | "bot"
-  content: string
-  codeVersion?: number
-}
-
-export const AiChatMessage = ({ message }: { message: AiChatMessage }) => {
-  const renderContent = (content: string) => {
-    const parts = content.split(/(```[\s\S]*?(?:```|$))/g)
-    return parts.map((part, index) => {
-      if (part.startsWith("```")) {
-        const isComplete = part.endsWith("```")
-        return (
-          <div
-            key={index}
-            className="bg-gray-100 rounded-md p-2 my-2 text-sm font-mono"
-          >
-            {isComplete
-              ? `Code Version ${message.codeVersion ?? "??"}`
-              : "generating..."}
-          </div>
-        )
-      }
-      return (
-        <p key={index} className="text-xs font-mono whitespace-pre-wrap">
-          {part}
-        </p>
-      )
-    })
-  }
-
-  return (
-    <div
-      className={`flex ${
-        message.sender === "user" ? "justify-end" : "justify-start"
-      }`}
-    >
-      <div
-        className={`max-w-[80%] rounded-lg p-4 ${
-          message.sender === "user" ? "bg-blue-100" : "bg-white"
-        }`}
-      >
-        {message.sender === "bot" && (
-          <div className="flex items-center mb-2">
-            <Avatar className="w-7 h-7 mr-2 flex items-center justify-center bg-black">
-              <BotIcon className="text-white px-1" />
-            </Avatar>
-            <DropdownMenu>
-              <DropdownMenuTrigger>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-6 px-2 text-xs"
-                >
-                  version {message.codeVersion}
-                  <ChevronDown className="ml-1 h-3 w-3" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem className="text-xs bg-white flex">
-                  <RotateCcw className="mr-1 h-3 w-3" />
-                  Revert to v{message.codeVersion}
-                </DropdownMenuItem>
-                <DropdownMenuItem className="text-xs bg-white flex">
-                  <Eye className="mr-1 h-3 w-3" />
-                  View v{message.codeVersion}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        )}
-        {renderContent(message.content)}
-      </div>
-    </div>
-  )
-}

package/src/components/Analytics.tsx

@@ -1,23 +0,0 @@
-import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
-
-export const Analytics = () => {
-  return (
-    <div className="absolute bottom-0 left-0 right-0">
-      <VercelAnalytics />
-      {/* <CookieConsent
-        buttonText="Accept"
-        cookieName="cookieConsent"
-        style={{ background: "#2B373B" }}
-        acceptOnScroll
-        buttonStyle={{
-          backgroundColor: "#111",
-          color: "#fff",
-          fontSize: "13px",
-        }}
-        expires={150}
-      >
-        This website uses cookies to enhance the user experience.
-      </CookieConsent> */}
-    </div>
-  )
-}

package/src/components/BomTable.tsx

@@ -1,69 +0,0 @@
-import { SupplierName } from "@tscircuit/props"
-import { AnyCircuitElement } from "circuit-json"
-import { Link } from "wouter"
-
-interface BomTableProps {
-  circuitJson: AnyCircuitElement[]
-}
-
-export const linkify = (supplier: string, partNumber: string) => {
-  if (supplier === "jlcpcb") {
-    return (
-      <a
-        className="underline text-blue-500"
-        target="_blank"
-        href={`https://jlcpcb.com/partdetail/${partNumber}`}
-      >
-        {partNumber}
-      </a>
-    )
-  }
-  return partNumber
-}
-
-export const BomTable: React.FC<BomTableProps> = ({ circuitJson }) => {
-  const sourceComponents = circuitJson.filter(
-    (el) => el.type === "source_component",
-  )
-
-  const supplierColumns = new Set<SupplierName>()
-  sourceComponents.forEach((comp) => {
-    if (comp.supplier_part_numbers) {
-      Object.keys(comp.supplier_part_numbers).forEach((supplier) =>
-        supplierColumns.add(supplier as SupplierName),
-      )
-    }
-  })
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-left text-sm">
-        <thead>
-          <tr className="border-b">
-            <th className="p-2">Name</th>
-            {Array.from(supplierColumns).map((supplier) => (
-              <th key={supplier} className="p-2 capitalize">
-                {supplier}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {sourceComponents.map((comp) => (
-            <tr key={comp.source_component_id} className="border-b">
-              <td className="p-2">{comp.name}</td>
-              {Array.from(supplierColumns).map((supplier) => (
-                <td key={supplier} className="p-2">
-                  {linkify(
-                    supplier,
-                    comp.supplier_part_numbers?.[supplier]?.[0] || "",
-                  )}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}

package/src/components/ChatInput.tsx

@@ -1,53 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Paperclip, ArrowUp } from "lucide-react"
-import { useState, FormEvent } from "react"
-
-interface ChatInputProps {
-  onSubmit: (message: string) => void
-  disabled: boolean
-}
-
-export default function ChatInput({ onSubmit, disabled }: ChatInputProps) {
-  const [inputValue, setInputValue] = useState("")
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    if (inputValue.trim()) {
-      onSubmit(inputValue)
-      setInputValue("")
-    }
-  }
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="relative shadow-lg border-2 border-gray-300 rounded-full m-4"
-    >
-      <Input
-        disabled={disabled}
-        type="text"
-        placeholder="Ask for more"
-        className="pr-20 pl-4 py-6 bg-white rounded-full border-none focus:ring-2 focus:ring-blue-500"
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-      />
-      {/* For when we support attachments */}
-      {/* <Button
-        size="icon"
-        variant="ghost"
-        className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-      >
-        <Paperclip className="h-5 w-5" />
-      </Button> */}
-      <Button
-        type="submit"
-        size="icon"
-        className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-600 text-white rounded-full"
-        disabled={disabled}
-      >
-        <ArrowUp className="h-5 w-5" />
-      </Button>
-    </form>
-  )
-}