@tscircuit/fake-snippets 0.0.1

package/src/pages/user-profile.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react"
+import { useParams } from "wouter"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Link } from "wouter"
+import { Button } from "@/components/ui/button"
+import { GitHubLogoIcon, StarIcon } from "@radix-ui/react-icons"
+import { Input } from "@/components/ui/input"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const UserProfilePage = () => {
+  const { username } = useParams()
+  const axios = useAxios()
+  const [searchQuery, setSearchQuery] = useState("")
+  const session = useGlobalStore((s) => s.session)
+  const isCurrentUserProfile = username === session?.github_username
+
+  const { data: userSnippets, isLoading } = useQuery<Snippet[]>(
+    ["userSnippets", username],
+    async () => {
+      const response = await axios.get(`/snippets/list?owner_name=${username}`)
+      return response.data.snippets
+    },
+  )
+
+  const filteredSnippets = userSnippets?.filter(
+    (snippet) =>
+      !searchQuery ||
+      snippet.unscoped_name.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">
+          {isCurrentUserProfile ? "My Profile" : `${username}'s Profile`}
+        </h1>
+        <div className="mb-6">
+          <a
+            href={`https://github.com/${username}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center"
+          >
+            <Button variant="outline">
+              <GitHubLogoIcon className="mr-2" />
+              View GitHub Profile
+            </Button>
+          </a>
+        </div>
+        <h2 className="text-2xl font-semibold mb-4">Snippets</h2>
+        <Input
+          type="text"
+          placeholder="Search snippets..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="mb-4"
+        />
+        {isLoading ? (
+          <div>Loading snippets...</div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredSnippets
+              ?.sort((a, b) => b.updated_at.localeCompare(a.updated_at))
+              ?.map((snippet) => (
+                <Link
+                  key={snippet.snippet_id}
+                  href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+                >
+                  <div className="border p-4 rounded-md hover:shadow-md transition-shadow">
+                    <div className="flex justify-between items-start">
+                      <h3 className="text-md font-semibold">
+                        {snippet.unscoped_name}
+                      </h3>
+                      <div className="flex items-center text-gray-600">
+                        <StarIcon className="w-4 h-4 mr-1" />
+                        <span>{snippet.star_count || 0}</span>
+                      </div>
+                    </div>
+                    <p className="text-sm text-gray-500">
+                      Last Updated:{" "}
+                      {new Date(snippet.updated_at).toLocaleString()}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+          </div>
+        )}
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/view-order.tsx

@@ -0,0 +1,123 @@
+import React from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Order } from "fake-snippets-api/lib/db/schema"
+import { Link, useParams } from "wouter"
+import { Button } from "@/components/ui/button"
+import { OrderPreviewContent } from "@/components/OrderPreviewContent"
+import { AnyCircuitElement } from "circuit-json"
+
+export const ViewOrderPage = () => {
+  const { orderId } = useParams()
+  const axios = useAxios()
+
+  const {
+    data: order,
+    isLoading,
+    error,
+  } = useQuery<Order>(
+    ["order", orderId],
+    async () => {
+      const response = await axios.get(`/orders/get?order_id=${orderId}`)
+      return response.data.order
+    },
+    {
+      enabled: !!orderId,
+    },
+  )
+
+  if (isLoading) {
+    return <div>Loading order...</div>
+  }
+
+  if (error) {
+    return <div>Error loading order: {(error as Error).message}</div>
+  }
+
+  if (!order) {
+    return <div>Order not found</div>
+  }
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-4">
+        <h1 className="text-3xl font-bold mb-6">Order Details</h1>
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="w-full md:w-1/2 md:max-w-[50%]">
+            <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
+              <div className="px-4 py-5 sm:px-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                  Order #{order.order_id}
+                </h3>
+                <p className="mt-1 max-w-2xl text-sm text-gray-500">
+                  Created at: {new Date(order.created_at).toLocaleString()}
+                </p>
+              </div>
+              <div className="border-t border-gray-200">
+                <dl>
+                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt className="text-sm font-medium text-gray-500">
+                      Status
+                    </dt>
+                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                      {order.is_shipped ? "Shipped" : "Processing"}
+                    </dd>
+                  </div>
+                  <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt className="text-sm font-medium text-gray-500">
+                      Is Draft
+                    </dt>
+                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                      {order.is_draft ? "Yes" : "No"}
+                    </dd>
+                  </div>
+                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt className="text-sm font-medium text-gray-500">
+                      Pending Validation
+                    </dt>
+                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                      {order.is_pending_validation_by_fab ? "Yes" : "No"}
+                    </dd>
+                  </div>
+                  <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt className="text-sm font-medium text-gray-500">
+                      Approved by Fab
+                    </dt>
+                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                      {order.is_approved_by_fab_review ? "Yes" : "No"}
+                    </dd>
+                  </div>
+                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                    <dt className="text-sm font-medium text-gray-500">
+                      In Production
+                    </dt>
+                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                      {order.is_in_production ? "Yes" : "No"}
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+            </div>
+            <div className="mt-6">
+              <Link href={`/my-orders`}>
+                <Button variant="outline" onClick={() => window.history.back()}>
+                  Back to Orders
+                </Button>
+              </Link>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 md:max-w-[50%]">
+            <OrderPreviewContent
+              circuitJson={order.circuit_json as AnyCircuitElement[]}
+              className="h-[calc(100vh-200px)]"
+            />
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/view-snippet.tsx

@@ -0,0 +1,149 @@
+import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
+import Header from "@/components/Header"
+import { Button } from "@/components/ui/button"
+import ViewSnippetHeader from "@/components/ViewSnippetHeader"
+import ViewSnippetSidebar from "@/components/ViewSnippetSidebar"
+import { useCurrentSnippet } from "@/hooks/use-current-snippet"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
+import { Share } from "lucide-react"
+import { useParams } from "wouter"
+import { PreviewContent } from "@/components/PreviewContent"
+import Footer from "@/components/Footer"
+import { Helmet } from "react-helmet"
+import type { AnyCircuitElement } from "circuit-json"
+import StaticViewSnippetHeader from "../components/StaticViewSnippetHeader"
+import StaticPreviewContent from "../components/StaticPreviewContent"
+import StaticViewSnippetSidebar from "../components/StaticViewSnippetSidebar"
+import { useEffect, useMemo, useState } from "react"
+import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
+
+export const ViewSnippetPage = () => {
+  const { author, snippetName } = useParams()
+  const { snippet, error: snippetError, isLoading } = useCurrentSnippet()
+
+  const [manualEditsFileContent, setManualEditsFileContent] = useState<
+    string | null
+  >(null)
+
+  useEffect(() => {
+    if (snippet?.manual_edits_json_content) {
+      setManualEditsFileContent(snippet.manual_edits_json_content ?? "")
+    }
+  }, [Boolean(snippet?.manual_edits_json_content)])
+
+  const userImports = useMemo(
+    () => ({
+      "./manual-edits.json": parseJsonOrNull(manualEditsFileContent) ?? "",
+    }),
+    [manualEditsFileContent],
+  )
+
+  const {
+    circuitJson: tsxResultCircuitJson,
+    message,
+    triggerRunTsx,
+    isRunningCode,
+    tsxRunTriggerCount,
+    circuitJsonKey: tsxResultCircuitJsonKey,
+  } = useRunTsx({
+    code: snippet?.code ?? "",
+    type: snippet?.snippet_type,
+    userImports,
+    circuitDisplayName: snippet?.name,
+  })
+
+  const circuitJsonForPreview = tsxResultCircuitJson ?? snippet?.circuit_json
+  const circuitJsonKeyForPreview = tsxResultCircuitJson
+    ? tsxResultCircuitJsonKey
+    : snippet?.circuit_json
+      ? "snippet"
+      : ""
+
+  return (
+    <>
+      <Helmet>
+        <title>{`tscircuit - ${author}/${snippetName}`}</title>
+      </Helmet>
+      <div>
+        <Header />
+        {isLoading && (
+          <>
+            <StaticViewSnippetHeader
+              author={author as string}
+              snippetName={snippetName as string}
+            />
+            <div className="flex flex-row min-h-full">
+              <div className="flex-grow overflow-auto">
+                <StaticPreviewContent />
+              </div>
+              <StaticViewSnippetSidebar />
+            </div>
+          </>
+        )}
+        {snippetError && snippetError.status === 404 && (
+          <div className="text-gray-500 flex items-center justify-center h-64">
+            Snippet not found: {author}/{snippetName}
+          </div>
+        )}
+        {snippetError && snippetError.status !== 404 && (
+          <div>Error: {snippetError.toString()}</div>
+        )}
+        {snippet && (
+          <>
+            <ViewSnippetHeader />
+            <div className="flex flex-row min-h-full">
+              <div className="flex-grow overflow-auto">
+                <PreviewContent
+                  className="h-full"
+                  code={snippet?.code ?? ""}
+                  triggerRunTsx={triggerRunTsx}
+                  tsxRunTriggerCount={tsxRunTriggerCount}
+                  errorMessage={message}
+                  circuitJson={circuitJsonForPreview}
+                  circuitJsonKey={circuitJsonKeyForPreview}
+                  isRunningCode={isRunningCode}
+                  showCodeTab={true}
+                  showJsonTab={false}
+                  showImportAndFormatButtons={false}
+                  readOnly
+                  headerClassName="p-4 border-b border-gray-200"
+                  leftHeaderContent={
+                    <>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-6 px-2 text-xs"
+                        onClick={() => {
+                          if (!snippet) return
+                          const url = encodeTextToUrlHash(snippet.code)
+                          navigator.clipboard.writeText(url)
+                          alert("URL copied to clipboard!")
+                        }}
+                      >
+                        <Share className="mr-1 h-3 w-3" />
+                        Copy URL
+                      </Button>
+                      <DownloadButtonAndMenu
+                        snippetUnscopedName={snippet?.unscoped_name}
+                        circuitJson={
+                          circuitJsonForPreview as AnyCircuitElement[]
+                        }
+                        className="hidden md:flex"
+                      />
+                    </>
+                  }
+                  isStreaming={false}
+                  onCodeChange={() => {}}
+                  onDtsChange={() => {}}
+                />
+              </div>
+              <ViewSnippetSidebar />
+            </div>
+          </>
+        )}
+        <Footer />
+      </div>
+    </>
+  )
+}

package/src/prettier.ts

@@ -0,0 +1,9 @@
+// Prettier is injected into the global scope inside index.html
+declare global {
+  interface Window {
+    prettier: {
+      format: (code: string, options: any) => string
+    }
+    prettierPlugins: any
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.js

@@ -0,0 +1,47 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {},
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+        "slide-left": {
+          from: {
+            transform: "translateX(0)",
+          },
+          to: {
+            transform: "translateX(-50%)",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "carousel-left": "slide-left 120s linear infinite",
+      },
+    },
+  },
+  plugins: ["tailwindcss-animate"],
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "bun-tests/*": ["./bun-tests/*"],
+      "fake-snippets-api/*": ["./fake-snippets-api/*"]
+    },
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": false
+  },
+  "include": ["src", "fake-snippets-api", "bun-tests"]
+}

package/vercel.json

@@ -0,0 +1,50 @@
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "X-Robots-Tag",
+          "value": "index, follow"
+        }
+      ]
+    }
+  ],
+  "rewrites": [
+    {
+      "source": "/",
+      "destination": "/landing.html"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/"
+    }
+  ],
+  "redirects": [
+    {
+      "source": "/community/join-redirect",
+      "destination": "https://discord.gg/V7FGE5ZCbA",
+      "permanent": false
+    },
+    {
+      "source": "/join",
+      "destination": "https://discord.gg/V7FGE5ZCbA",
+      "permanent": false
+    },
+    {
+      "source": "/legal/terms-of-service",
+      "destination": "https://registry.tscircuit.com/legal/terms-of-service.html",
+      "permanent": false
+    },
+    {
+      "source": "/legal/privacy-policy",
+      "destination": "https://registry.tscircuit.com/legal/privacy-policy.html",
+      "permanent": false
+    },
+    {
+      "source": "/playground",
+      "destination": "https://tscircuit.com/editor?template=blank-circuit-board",
+      "permanent": false
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,146 @@
+import { createDatabase } from "./fake-snippets-api/lib/db/db-client"
+import { defineConfig, Plugin, UserConfig } from "vite"
+import type { PluginOption } from "vite"
+import path from "path"
+import react from "@vitejs/plugin-react"
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
+import { getNodeHandler } from "winterspec/adapters/node"
+import vercel from "vite-plugin-vercel"
+
+// @ts-ignore
+import winterspecBundle from "./dist/bundle.js"
+
+// Create database instance with seed data for development
+const db = createDatabase({ seed: true })
+
+const fakeHandler = getNodeHandler(winterspecBundle as any, {
+  middleware: [
+    (req, ctx, next) => {
+      ;(ctx as any).db = db
+      return next(req, ctx)
+    },
+  ],
+})
+
+function apiFakePlugin(): Plugin {
+  return {
+    name: "api-fake",
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.url?.startsWith("/api/")) {
+          // simulate slow responses
+          await new Promise((resolve) => setTimeout(resolve, 500))
+          fakeHandler(req, res)
+        } else {
+          next()
+        }
+      })
+    },
+  }
+}
+
+export default defineConfig(async (): Promise<UserConfig> => {
+  let proxyConfig: Record<string, any> | undefined
+
+  const plugins: PluginOption[] = [
+    react(),
+    vercel({
+      prerender: false,
+      buildCommand: "bun run build",
+    }),
+    ViteImageOptimizer({
+      png: {
+        quality: 75,
+        compressionLevel: 9,
+      },
+      jpeg: {
+        quality: 75,
+        progressive: true,
+      },
+      jpg: {
+        quality: 75,
+        progressive: true,
+      },
+      webp: {
+        quality: 75,
+        lossless: false,
+        effort: 6,
+      },
+      avif: {
+        quality: 75,
+        effort: 6,
+      },
+    }),
+  ]
+
+  if (process.env.VITE_BUNDLE_ANALYZE === "true" || 1) {
+    const { visualizer } = await import("rollup-plugin-visualizer")
+    plugins.push(
+      visualizer({
+        filename: "dist/stats.html",
+        open: false,
+        gzipSize: true,
+        brotliSize: true,
+      }),
+    )
+  }
+
+  if (!process.env.SNIPPETS_API_URL && !process.env.VERCEL) {
+    process.env.VITE_USE_FAKE_API = "true"
+    console.log("Using fake snippets API (see ./fake-snippets-api)")
+    plugins.push(apiFakePlugin())
+  } else {
+    console.log(`Using snippets API at "${process.env.SNIPPETS_API_URL}"`)
+    process.env.VITE_SNIPPETS_API_URL =
+      process.env.VITE_SNIPPETS_API_URL || process.env.SNIPPETS_API_URL
+    proxyConfig = {
+      "/api": {
+        target: process.env.SNIPPETS_API_URL as string,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    }
+  }
+
+  return {
+    plugins,
+    define: {
+      global: {},
+    },
+    server: {
+      host: "127.0.0.1",
+      proxy: proxyConfig,
+    },
+    base: "/",
+    build: {
+      minify: "terser",
+      copyPublicDir: true,
+      terserOptions: {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+        },
+        format: {
+          comments: false,
+        },
+      },
+      reportCompressedSize: true, // https://github.com/vitejs/vite/issues/10086
+      rollupOptions: {
+        input: {
+          main: path.resolve(__dirname, "index.html"),
+          landing: path.resolve(__dirname, "landing.html"),
+        },
+      },
+    },
+    ssr: {
+      noExternal: ["react-dom/client"],
+      target: "node",
+    },
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+    logLevel: "info",
+  }
+})

package/winterspec.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "winterspec"
+
+export default defineConfig({
+  routesDirectory: "./fake-snippets-api/routes",
+  platform: "node",
+})