@tscircuit/runframe 0.0.11 → 0.0.12

package/README.md

@@ -12,7 +12,7 @@ Schematic, 3D and other previews.
 ## Usage
 
 ```tsx
-import { RunFrame } from "@tscircuit/runframe"
+import { RunFrame } from "@tscircuit/runframe/runner"
 
 const App = () => (
   <RunFrame
@@ -34,6 +34,36 @@ circuit.add(
 )
 ```
 
+### Using CircuitJsonPreview Directly
+
+If you already have circuit JSON and just want to display it:
+
+```tsx
+import { CircuitJsonPreview } from "@tscircuit/runframe/preview"
+
+const App = () => (
+  <CircuitJsonPreview
+    circuitJson={myCircuitJson}
+    // Optional props
+    showCodeTab={false}      // Show/hide the code editor tab
+    showJsonTab={true}       // Show/hide the raw JSON viewer tab
+    className="h-screen"     // Container className
+    headerClassName="px-4"   // Header className
+    isFullScreen={false}     // Toggle fullscreen mode
+    onToggleFullScreen={() => void}  // Fullscreen toggle callback
+  />
+)
+```
+
+The CircuitJsonPreview component provides:
+
+- PCB view with interactive component placement
+- Schematic view
+- 3D view
+- Bill of Materials (BOM) table
+- Circuit JSON viewer
+- Error display
+
 > Note: You should have tailwind installed in the parent project, this library
 > works without installing tailwind but without the "css reset" things will look
 > a bit off (e.g. you might see serif fonts), create an issue if that's

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@tscircuit/runframe",
-  "main": "dist/index.js",
+  "main": "dist/preview.js",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.12",
+  "exports": {
+    ".": "./dist/preview.js",
+    "./preview": "./dist/preview.js",
+    "./runner": "./dist/runner.js"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "start": "cosmos",
     "build": "bun run build:css && bun run build:standalone && bun run build:lib",

package/.github/workflows/bun-formatcheck.yml

@@ -1,26 +0,0 @@
-# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
-name: Format Check
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  format-check:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Run format check
-        run: bun run format:check

package/.github/workflows/bun-pver-release.yml

@@ -1,25 +0,0 @@
-# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
-name: Publish to npm
-on:
-  push:
-    branches:
-      - main
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-      - run: npm install -g pver
-      - run: bun install --frozen-lockfile
-      - run: bun run build
-      - run: pver release
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/bun-typecheck.yml

@@ -1,26 +0,0 @@
-# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
-name: Type Check
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  type-check:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
-
-      - name: Install dependencies
-        run: bun i
-
-      - name: Run type check
-        run: bunx tsc --noEmit

package/biome.json

@@ -1,57 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space"
-  },
-  "files": {
-    "ignore": ["cosmos-export", "dist", "package.json"]
-  },
-  "javascript": {
-    "formatter": {
-      "jsxQuoteStyle": "double",
-      "quoteProperties": "asNeeded",
-      "trailingCommas": "all",
-      "semicolons": "asNeeded",
-      "arrowParentheses": "always",
-      "bracketSpacing": true,
-      "bracketSameLine": false
-    }
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "suspicious": {
-        "noExplicitAny": "off",
-        "noArrayIndexKey": "off"
-      },
-      "complexity": {
-        "noForEach": "info"
-      },
-      "correctness": {
-        "useExhaustiveDependencies": "off"
-      },
-      "a11y": {
-        "useKeyWithClickEvents": "off"
-      },
-      "style": {
-        "noUselessElse": "off",
-        "noNonNullAssertion": "off",
-        "useNumberNamespace": "off",
-        "noUnusedTemplateLiteral": "off",
-        "useFilenamingConvention": {
-          "level": "error",
-          "options": {
-            "strictCase": true,
-            "requireAscii": true,
-            "filenameCases": ["kebab-case", "export"]
-          }
-        }
-      }
-    }
-  }
-}

package/cosmos.config.json

@@ -1,3 +0,0 @@
-{
-  "plugins": ["react-cosmos-plugin-vite"]
-}

package/cosmos.decorator.tsx

@@ -1,3 +0,0 @@
-export default ({ children }: { children: React.ReactNode }) => {
-  return <div style={{ width: "100vw", height: "100vh" }}>{children}</div>
-}

package/examples/resistor.fixture.tsx

@@ -1,12 +0,0 @@
-import { CircuitJsonPreview } from "lib/components/CircuitJsonPreview"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-export default () => (
-  <CircuitJsonPreview
-    circuitJson={renderToCircuitJson(
-      <board width="10mm" height="10mm">
-        <resistor name="R1" resistance="1k" footprint="0402" />
-      </board>,
-    )}
-  />
-)

package/examples/runframe-with-api-1.fixture.tsx

@@ -1,41 +0,0 @@
-import { RunFrameWithApi } from "lib/components/RunFrameWithApi"
-import { useState, useEffect } from "react"
-
-export default () => {
-  useEffect(() => {
-    setTimeout(async () => {
-      fetch("/api/files/upsert", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          file_path: "main.tsx",
-          text_content: `
-circuit.add(
-<board width="10mm" height="10mm">
-  <resistor name="R1" resistance="1k" footprint="0402" />
-  <capacitor name="C1" capacitance="1uF" footprint="0603" pcbX={4} />
-  <trace from=".R1 .pin1" to=".C1 .pin1" />
-</board>
-)`,
-        }),
-      })
-    }, 500)
-  }, [])
-
-  if (
-    typeof window !== "undefined" &&
-    window.location.origin.includes("vercel.app")
-  ) {
-    return (
-      <div>
-        <h1>RunFrame with API</h1>
-        <p>
-          We don't currently deploy the API to vercel, try locally! The vite
-          plugin will automatically load it.
-        </p>
-      </div>
-    )
-  }
-
-  return <RunFrameWithApi />
-}

package/examples/runframe1-basic.fixture.tsx

@@ -1,19 +0,0 @@
-import { RunFrame } from "lib/components/RunFrame"
-import React from "react"
-
-export default () => (
-  <RunFrame
-    fsMap={{
-      "main.tsx": `
-circuit.add(
-<board width="10mm" height="10mm">
-  <resistor name="R1" resistance="1k" footprint="0402" />
-  <capacitor name="C1" capacitance="1uF" footprint="0603" pcbX={4} />
-  <trace from=".R1 .pin1" to=".C1 .pin1" />
-</board>
-)
-`,
-    }}
-    entrypoint="main.tsx"
-  />
-)

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@tscircuit/runframe</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/lib/components/BomTable.tsx

@@ -1,69 +0,0 @@
-import type { SupplierName } from "@tscircuit/props"
-import type { AnyCircuitElement } from "circuit-json"
-
-interface BomTableProps {
-  circuitJson: AnyCircuitElement[]
-}
-
-export const linkify = (supplier: string, partNumber: string) => {
-  if (supplier === "jlcpcb") {
-    return (
-      <a
-        className="underline text-blue-500"
-        target="_blank"
-        rel="noreferrer"
-        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>()
-  for (const comp of sourceComponents) {
-    if (comp.supplier_part_numbers) {
-      for (const supplier of Object.keys(comp.supplier_part_numbers)) {
-        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>
-  )
-}