@tscircuit/fake-snippets 0.0.4 → 0.0.6

package/fake-snippets-api/lib/db/db-client.ts

@@ -17,6 +17,7 @@ import {
   packageReleaseSchema,
   packageSchema,
   Package,
+  PackageRelease,
 } from "./schema.ts"
 import { combine } from "zustand/middleware"
 import { seed as seedFn } from "./seed"
@@ -387,4 +388,33 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       ...pkg,
     }
   },
+  getPackageReleaseById: (
+    package_release_id: string,
+  ): PackageRelease | undefined => {
+    const state = get()
+    return state.packageReleases.find(
+      (pr) => pr.package_release_id === package_release_id,
+    )
+  },
+  addPackageRelease: (
+    packageRelease: Omit<PackageRelease, "package_release_id">,
+  ): PackageRelease => {
+    const newPackageRelease = {
+      package_release_id: `package_release_${Date.now()}`,
+      ...packageRelease,
+    }
+    set((state) => ({
+      packageReleases: [...state.packageReleases, newPackageRelease],
+    }))
+    return newPackageRelease
+  },
+  updatePackageRelease: (packageRelease: PackageRelease): void => {
+    set((state) => ({
+      packageReleases: state.packageReleases.map((pr) =>
+        pr.package_release_id === packageRelease.package_release_id
+          ? packageRelease
+          : pr,
+      ),
+    }))
+  },
 }))

package/fake-snippets-api/lib/db/schema.ts

@@ -107,6 +107,8 @@ export const packageReleaseSchema = z.object({
   is_locked: z.boolean(),
   is_latest: z.boolean(),
   created_at: z.string().datetime(),
+  commit_sha: z.string().nullable().optional(),
+  license: z.string().nullable().optional(),
 })
 export type PackageRelease = z.infer<typeof packageReleaseSchema>
 

package/fake-snippets-api/lib/public-mapping/public-map-package-release.ts

@@ -0,0 +1,10 @@
+import * as ZT from "fake-snippets-api/lib/db/schema"
+
+export const publicMapPackageRelease = (
+  internal_package_release: ZT.PackageRelease,
+): ZT.PackageRelease => {
+  return {
+    ...internal_package_release,
+    created_at: internal_package_release.created_at,
+  }
+}

package/fake-snippets-api/routes/api/package_releases/create.ts

@@ -0,0 +1,83 @@
+import { packageReleaseSchema } from "fake-snippets-api/lib/db/schema"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { publicMapPackageRelease } from "fake-snippets-api/lib/public-mapping/public-map-package-release"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "none",
+  jsonBody: z.object({
+    package_id: z.string().optional(),
+    version: z.string().optional(),
+    is_latest: z.boolean().optional(),
+    commit_sha: z.string().optional(),
+    package_name_with_version: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    package_release: packageReleaseSchema,
+  }),
+})(async (req, ctx) => {
+  let {
+    package_id,
+    is_latest = true,
+    version,
+    commit_sha,
+    package_name_with_version,
+  } = req.jsonBody
+
+  if (package_name_with_version && !version && !package_id) {
+    const [packageName, parsedVersion] = package_name_with_version.split("@")
+    const pkg = ctx.db.packages.find((p) => p.name === packageName)
+
+    if (!pkg) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: `Package not found: ${packageName}`,
+      })
+    }
+
+    package_id = pkg.package_id
+    version = parsedVersion
+  }
+
+  if (!package_id || !version) {
+    return ctx.error(400, {
+      error_code: "missing_options",
+      message: "package_id and version are required",
+    })
+  }
+
+  // Check if version already exists
+  const existingRelease = ctx.db.packageReleases.find(
+    (pr) => pr.package_id === package_id && pr.version === version,
+  )
+
+  if (existingRelease) {
+    return ctx.error(400, {
+      error_code: "version_already_exists",
+      message: `Version ${version} already exists for this package`,
+    })
+  }
+
+  // Update previous latest if needed
+  if (is_latest) {
+    ctx.db.packageReleases
+      .filter((pr) => pr.package_id === package_id && pr.is_latest)
+      .forEach((pr) => (pr.is_latest = false))
+  }
+
+  const newPackageRelease = ctx.db.addPackageRelease({
+    package_id,
+    is_latest,
+    version,
+    is_locked: false,
+    created_at: new Date().toISOString(),
+    commit_sha: commit_sha ?? null,
+  })
+
+  return ctx.json({
+    ok: true,
+    package_release: publicMapPackageRelease(newPackageRelease),
+  })
+})

package/fake-snippets-api/routes/api/package_releases/get.ts

@@ -0,0 +1,54 @@
+import * as zt from "fake-snippets-api/lib/db/schema"
+import { publicMapPackageRelease } from "fake-snippets-api/lib/public-mapping/public-map-package-release"
+import { withRouteSpec } from "fake-snippets-api/lib/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "none",
+  jsonBody: z.object({
+    package_release_id: z.string().optional(),
+    package_name_with_version: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    package_release: zt.packageReleaseSchema,
+  }),
+})(async (req, ctx) => {
+  const { package_release_id, package_name_with_version } = req.jsonBody
+
+  if (package_name_with_version && !package_release_id) {
+    const [packageName, parsedVersion] = package_name_with_version.split("@")
+    const pkg = ctx.db.packages.find((x) => x.name === packageName)
+    const pkgRelease = ctx.db.packageReleases.find((x) => {
+      return x.version == parsedVersion && x.package_id == pkg?.package_id
+    })
+
+    if (!pkgRelease) {
+      return ctx.error(404, {
+        error_code: "package_release_not_found",
+        message: "Package release not found",
+      })
+    }
+
+    return ctx.json({
+      ok: true,
+      package_release: publicMapPackageRelease(pkgRelease),
+    })
+  }
+
+  const foundRelease =
+    package_release_id && ctx.db.getPackageReleaseById(package_release_id)
+
+  if (!foundRelease) {
+    return ctx.error(404, {
+      error_code: "package_release_not_found",
+      message: "Package release not found",
+    })
+  }
+
+  return ctx.json({
+    ok: true,
+    package_release: publicMapPackageRelease(foundRelease),
+  })
+})

package/fake-snippets-api/routes/api/package_releases/list.ts

@@ -0,0 +1,77 @@
+import { packageReleaseSchema } from "fake-snippets-api/lib/db/schema"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { publicMapPackageRelease } from "fake-snippets-api/lib/public-mapping/public-map-package-release"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "none",
+  jsonBody: z
+    .object({
+      package_id: z.string().optional(),
+      package_name: z.string().optional(),
+      is_latest: z.boolean().optional(),
+      version: z.string().optional(),
+      commit_sha: z.string().optional(),
+    })
+    .refine(({ package_id, package_name }) => {
+      if (package_id && package_name) {
+        return false
+      }
+      return true
+    }, "package_id and package_name are mutually exclusive")
+    .refine(({ package_id, package_name }) => {
+      if (!package_id && !package_name) {
+        return false
+      }
+      return true
+    }, "package_id or package_name is required"),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    package_releases: z.array(packageReleaseSchema),
+  }),
+})(async (req, ctx) => {
+  const { package_id, package_name, is_latest, version, commit_sha } =
+    req.jsonBody
+
+  if (!package_id && !package_name && !is_latest && !version && !commit_sha) {
+    return ctx.error(400, {
+      error_code: "invalid_query",
+      message:
+        "At least one of package_id, package_name, is_latest, version or commit_sha is required",
+    })
+  }
+
+  let releases = ctx.db.packageReleases
+
+  // Apply filters
+  if (package_id) {
+    releases = releases.filter((pr) => pr.package_id === package_id)
+  }
+
+  if (package_name) {
+    const pkg = ctx.db.packages.find((p) => p.name === package_name)
+    if (pkg) {
+      releases = releases.filter((pr) => pr.package_id === pkg.package_id)
+    } else {
+      releases = []
+    }
+  }
+
+  if (is_latest !== undefined) {
+    releases = releases.filter((pr) => pr.is_latest === is_latest)
+  }
+
+  if (version) {
+    releases = releases.filter((pr) => pr.version === version)
+  }
+
+  if (commit_sha) {
+    releases = releases.filter((pr) => pr.commit_sha === commit_sha)
+  }
+
+  return ctx.json({
+    ok: true,
+    package_releases: releases.map((pr) => publicMapPackageRelease(pr)),
+  })
+})

package/fake-snippets-api/routes/api/package_releases/update.ts

@@ -0,0 +1,96 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "none",
+  jsonBody: z.object({
+    package_release_id: z.string().optional(),
+    package_name_with_version: z.string().optional(),
+    is_locked: z.boolean().optional(),
+    is_latest: z.boolean().optional(),
+    license: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+  }),
+})(async (req, ctx) => {
+  const {
+    package_release_id,
+    package_name_with_version,
+    is_locked,
+    is_latest,
+    license,
+  } = req.jsonBody
+  let releaseId = package_release_id
+
+  // Handle package_name_with_version lookup
+  if (!releaseId && package_name_with_version) {
+    const [packageName, version] = package_name_with_version.split("@")
+    const pkg = ctx.db.packages.find((p) => p.name === packageName)
+    if (pkg) {
+      const release = ctx.db.packageReleases.find(
+        (pr) => pr.package_id === pkg.package_id && pr.version === version,
+      )
+      if (release) {
+        releaseId = release.package_release_id
+      }
+    }
+  }
+
+  if (!releaseId) {
+    return ctx.error(404, {
+      error_code: "package_release_not_found",
+      message: "Package release not found",
+    })
+  }
+
+  const delta = { is_locked, is_latest, license }
+  if (
+    Object.keys(delta).filter(
+      (k) => delta[k as keyof typeof delta] !== undefined,
+    ).length === 0
+  ) {
+    return ctx.error(400, {
+      error_code: "no_fields_provided",
+      message: "No fields provided to update",
+    })
+  }
+
+  const release = ctx.db.packageReleases.find(
+    (pr) => pr.package_release_id === releaseId,
+  )
+  if (!release) {
+    return ctx.error(404, {
+      error_code: "package_release_not_found",
+      message: "Package release not found",
+    })
+  }
+
+  // Handle is_latest updates
+  if (is_latest !== undefined && is_latest) {
+    ctx.db.packageReleases
+      .filter(
+        (pr) =>
+          pr.package_id === release.package_id &&
+          pr.package_release_id !== releaseId &&
+          pr.is_latest,
+      )
+      .forEach((pr) => {
+        pr.is_latest = false
+      })
+  }
+
+  // Update the release
+  Object.assign(release, {
+    ...(is_locked !== undefined && { is_locked }),
+    ...(is_latest !== undefined && { is_latest }),
+    ...(license !== undefined && { license }),
+  })
+
+  ctx.db.updatePackageRelease(release)
+
+  return ctx.json({
+    ok: true,
+  })
+})

package/index.html

@@ -1,23 +1,105 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="robots" content="index, follow, NOODP" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
-    <title>tscircuit - Code Electronics with React</title>
-    <meta name="description" content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
-    <meta name="keywords" content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
-    <meta property="og:title" content="tscircuit - Design Electronics with React Components" />
-    <meta property="og:description" content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
-    <meta property="og:type" content="website" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
-    <meta name="twitter:description" content="Create electronic circuits using React components. Free open-source electronics design tool." />
-    <link rel="canonical" href="https://tscircuit.com" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="robots" content="index, follow, NOODP" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
+  <title>tscircuit - Code Electronics with React</title>
+  <meta name="description"
+    content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
+  <meta name="keywords"
+    content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
+  <meta property="og:title" content="tscircuit - Design Electronics with React Components" />
+  <meta property="og:description"
+    content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
+  <meta name="twitter:description"
+    content="Create electronic circuits using React components. Free open-source electronics design tool." />
+  <link rel="canonical" href="https://tscircuit.com" />
+
+  <style>
+    /* Loader Styles */
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.7);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+    }
+
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1em;
+    }
+
+    .loading {
+      background-color: lightgrey;
+      height: 2px;
+      overflow: hidden;
+      position: relative;
+      width: 12em;
+      border-radius: 2px;
+    }
+
+    .loading-bar {
+      animation: side2side 2s ease-in-out infinite;
+      background-color: dodgerblue;
+      height: 100%;
+      position: absolute;
+      width: 45%;
+    }
+
+    @keyframes side2side {
+      0%, 100% {
+        transform: translateX(-50%);
+      }
+      50% {
+        transform: translateX(150%);
+      }
+    }
+  </style>
+
+  <script>
+    window.onload = function() {
+      const loader = document.getElementById("loader");
+      const root = document.getElementById("root");
+
+      // Hide the loader and show the root when the page has fully loaded
+      loader.style.transition = "opacity 0.3s ease";
+      loader.style.opacity = "0"; // Fade out the loader
+      setTimeout(function() {
+        loader.style.display = "none"; // Hide loader completely
+        root.style.visibility = "visible"; // Show the root content
+      }, 300); // Match the opacity transition duration
+    };
+  </script>
+</head>
+
+<body>
+  <div class="loaderanimation">
+    <div id="loader" class="loading-overlay">
+      <div class="loading-container">
+        <div class="loading">
+          <div class="loading-bar"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="root" class="loaderanimation" style="visibility: hidden;"></div> <!-- Initially hidden -->
+
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "repository": {
     "type": "git",
@@ -80,6 +80,7 @@
     "circuit-json-to-bom-csv": "^0.0.6",
     "circuit-json-to-gerber": "^0.0.16",
     "circuit-json-to-pnp-csv": "^0.0.6",
+    "circuit-json-to-tscircuit": "^0.0.4",
     "circuit-json-to-readable-netlist": "^0.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -135,6 +136,7 @@
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",
+    "@types/node": "^22.13.0",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",

package/playwright-tests/circuit-json-import.spec.ts

@@ -0,0 +1,133 @@
+import { test, expect } from "@playwright/test"
+import { exampleCircuitJson } from "./exampleCircuitJson"
+
+async function loginToSite(page) {
+  const loginButton = page.getByRole("button", { name: "Log in" })
+  if (await loginButton.isVisible()) {
+    await loginButton.click()
+    await page.waitForLoadState("networkidle")
+  }
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://127.0.0.1:5177/quickstart")
+  await page.waitForTimeout(3000)
+  await loginToSite(page).catch(() => {})
+})
+
+test("should open and close the Circuit Json Import Dialog", async ({
+  page,
+}) => {
+  const importButton = page.locator('button:has-text("Import Circuit JSON")')
+  await importButton.click()
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+
+  const closeButton = dialog.getByRole("button", { name: "Close" })
+  await closeButton.click()
+
+  await expect(dialog).not.toBeVisible()
+})
+
+test("should handle valid Circuit JSON input", async ({ page }) => {
+  const importButton = page.getByRole("button", { name: "Import Circuit JSON" })
+  await importButton.click()
+  const textarea = page.locator(
+    'textarea[placeholder="Paste the Circuit JSON."]',
+  )
+  await textarea.fill(JSON.stringify(exampleCircuitJson))
+
+  const importDialogButton = page.getByRole("button", { name: "Import" })
+  await importDialogButton.click()
+
+  const successToast = page.locator(
+    'div.text-sm.font-semibold:has-text("Import Successful")',
+  )
+  await successToast.waitFor({ state: "visible", timeout: 5000 })
+  await expect(successToast).toBeVisible()
+})
+
+test("should handle valid Circuit JSON file upload", async ({ page }) => {
+  const importButton = page.locator('button:has-text("Import Circuit JSON")')
+  await importButton.click()
+
+  const fileInput = page.locator('input[type="file"]')
+
+  await fileInput.setInputFiles({
+    name: "circuit.json",
+    mimeType: "application/json",
+    // @ts-expect-error didnt add node types to tsconfig
+    buffer: Buffer.from(JSON.stringify(exampleCircuitJson)),
+  })
+
+  const importDialogButton = page.getByRole("button", { name: "Import" })
+  await importDialogButton.click()
+  const successToast = page.locator(
+    'div.text-sm.font-semibold:has-text("Import Successful")',
+  )
+  await successToast.waitFor({ state: "visible", timeout: 5000 })
+  await expect(successToast).toBeVisible()
+})
+
+test("should handle invalid Circuit JSON input", async ({ page }) => {
+  const importButton = page.locator('button:has-text("Import Circuit JSON")')
+  await importButton.click()
+
+  const textarea = page.locator(
+    'textarea[placeholder="Paste the Circuit JSON."]',
+  )
+  await textarea.fill("invalid json content")
+
+  const importDialogButton = page.getByRole("button", { name: "Import" })
+  await importDialogButton.click()
+
+  const errorToast = page.locator(
+    'div.text-sm.font-semibold:has-text("Invalid Input")',
+  )
+  await errorToast.waitFor({ state: "visible", timeout: 5000 })
+  await expect(errorToast).toBeVisible()
+})
+
+test("should handle invalid Circuit JSON file upload", async ({ page }) => {
+  const importButton = page.locator('button:has-text("Import Circuit JSON")')
+  await importButton.click()
+
+  const fileInput = page.locator('input[type="file"]')
+  await fileInput.setInputFiles({
+    name: "circuit.json",
+    mimeType: "application/json",
+    // @ts-expect-error didnt add node types to tsconfig
+    buffer: Buffer.from(JSON.stringify({})),
+  })
+
+  const importDialogButton = page.getByRole("button", { name: "Import" })
+  await importDialogButton.click()
+
+  const errorToast = page.locator(
+    'div.text-sm.font-semibold:has-text("Import Failed")',
+  )
+  await errorToast.waitFor({ state: "visible", timeout: 5000 })
+  await expect(errorToast).toBeVisible()
+})
+
+test("should handle non-JSON file upload", async ({ page }) => {
+  const importButton = page.locator('button:has-text("Import Circuit JSON")')
+  await importButton.click()
+
+  const fileInput = page.locator('input[type="file"]')
+  await fileInput.setInputFiles({
+    name: "circuit.txt",
+    mimeType: "application/text",
+    // @ts-expect-error didnt add node types to tsconfig
+    buffer: Buffer.from(""),
+  })
+
+  const importDialogButton = page.getByRole("button", { name: "Import" })
+  await importDialogButton.click()
+
+  const errorToast = page.locator(
+    'div.pb-4 > p:has-text("Please select a valid JSON file.")',
+  )
+  await expect(errorToast).toBeVisible()
+})