@tscircuit/schematic-viewer 1.4.3 → 2.0.1

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

@@ -0,0 +1,24 @@
+# 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: pver release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/{npm-typecheck.yml → bun-typecheck.yml}

@@ -14,13 +14,13 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Use Node.js
-        uses: actions/setup-node@v3
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: "20"
+          bun-version: latest
 
       - name: Install dependencies
-        run: npm ci
+        run: bun i
 
-      - name: Run typecheck
-        run: npx tsc --noEmit
+      - name: Run type check
+        run: bunx tsc --noEmit

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 tscircuit Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,32 +1,22 @@
-# Schematic Viewer for TSCircuit
+# @tscircuit/schematic-viewer
 
-[![npm version](https://badge.fury.io/js/@tscircuit%2Fschematic-viewer.svg)](https://badge.fury.io/js/@tscircuit%2Fschematic-viewer)
+React component for viewing Circuit JSON or tscircuit as a schematic
 
-[Examples](https://schematic-viewer.vercel.app/) · [TSCircuit](https://tscircuit.com) · [Open in CodeSandbox](https://codesandbox.io/s/github/tscircuit/schematic-viewer) · [discord](https://tscircuit.com/join)
-
-View schematics from [tscircuit jsx](https://tscircuit.com).
-
-## Usage
+> [!WARNING]
+> This is the 2.X.X schematic viewer, you may want to use the [old 1.X.X version](https://github.com/tscircuit/schematic-viewer/tree/v1)
 
 ```tsx
-import { Schematic } from "@tscircuit/schematic-viewer"
-
-// To get styles for debug table
-import "react-data-grid/lib/styles.css"
-
-export const MyReactApp = () => (
-  return (
-    <Schematic>
-      <resistor name="R1" />
-      <capacitor name="C1" />
-      <trace from=".R1 > .1" to=".C1 > .plus">
-    </Schematic>
-  )
+import { SchematicViewer } from "@tscircuit/schematic-viewer"
+
+export default () => (
+  <SchematicViewer
+    circuitJson={renderToCircuitJson(
+      <board width="10mm" height="10mm">
+        <resistor name="R1" resistance={1000} schX={-2} />
+        <capacitor name="C1" capacitance="1uF" schX={2} />
+        <trace from=".R1 .pin2" to=".C1 .pin1" />
+      </board>
+    )}
+  />
 )
-
 ```
-
-## References
-
-- [SVG Path Tool](https://yqnn.github.io/svg-path-editor/)
-- [SVG of Electrical Symbols Wikipedia](https://commons.wikimedia.org/wiki/File:Electrical_symbols_library.svg)

package/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -28,7 +28,14 @@
       "suspicious": {
         "noExplicitAny": "off"
       },
+      "complexity": {
+        "noForEach": "info"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
       "style": {
+        "noUselessElse": "off",
         "noNonNullAssertion": "off",
         "useNumberNamespace": "off",
         "useFilenamingConvention": {

package/cosmos.config.json

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

package/cosmos.decorator.tsx

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

package/examples/resistor-and-capacitor.fixture.tsx

@@ -0,0 +1,14 @@
+import { SchematicViewer } from "lib/components/SchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => (
+  <SchematicViewer
+    circuitJson={renderToCircuitJson(
+      <board width="10mm" height="10mm">
+        <resistor name="R1" resistance={1000} schX={-2} />
+        <capacitor name="C1" capacitance="1uF" schX={2} />
+        <trace from=".R1 .pin2" to=".C1 .pin1" />
+      </board>,
+    )}
+  />
+)

package/index.html

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

package/lib/components/SchematicViewer.tsx

@@ -0,0 +1,79 @@
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { toString as transformToString } from "transformation-matrix"
+
+interface Props {
+  circuitJson: Array<{ type: string }>
+  containerStyle?: React.CSSProperties
+}
+
+export const SchematicViewer = ({ circuitJson, containerStyle }: Props) => {
+  const svgDivRef = useRef<HTMLDivElement>(null)
+  const { ref: containerRef } = useMouseMatrixTransform({
+    onSetTransform(transform) {
+      if (!svgDivRef.current) return
+      svgDivRef.current.style.transform = transformToString(transform)
+    },
+  })
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState(0)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const updateDimensions = () => {
+      const rect = containerRef.current?.getBoundingClientRect()
+
+      setContainerWidth(rect?.width || 0)
+      setContainerHeight(rect?.height || 0)
+    }
+
+    // Set initial dimensions
+    updateDimensions()
+
+    // Add resize listener
+    const resizeObserver = new ResizeObserver(updateDimensions)
+    resizeObserver.observe(containerRef.current)
+
+    // Fallback to window resize
+    window.addEventListener("resize", updateDimensions)
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener("resize", updateDimensions)
+    }
+  }, [])
+
+  const svg = useMemo(() => {
+    if (!containerWidth || !containerHeight) return ""
+
+    return convertCircuitJsonToSchematicSvg(circuitJson as any, {
+      width: containerWidth,
+      height: containerHeight || 720,
+    })
+  }, [circuitJson, containerWidth, containerHeight])
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        backgroundColor: "#F5F1ED",
+        overflow: "hidden",
+        cursor: "grab",
+        minHeight: "300px",
+        ...containerStyle,
+      }}
+    >
+      <div
+        ref={svgDivRef}
+        style={{
+          pointerEvents: "auto",
+          transformOrigin: "0 0",
+        }}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    </div>
+  )
+}

package/lib/dev/render-to-circuit-json.ts

@@ -0,0 +1,7 @@
+import * as Core from "@tscircuit/core"
+
+export const renderToCircuitJson = (board: React.ReactElement) => {
+  const circuit = new Core.Circuit()
+  circuit.add(board)
+  return circuit.getCircuitJson()
+}

package/lib/index.ts

@@ -0,0 +1 @@
+export { SchematicViewer } from "./components/SchematicViewer"

package/package.json

@@ -1,83 +1,36 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.4.3",
+  "version": "2.0.1",
   "main": "dist/index.js",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tscircuit/schematic-viewer.git"
-  },
+  "type": "module",
   "scripts": {
-    "start": "storybook dev -p 6006",
-    "format": "biome format . --write",
-    "typecheck": "tsc --noEmit",
-    "build": "tsup",
-    "yalc": "npm run build && yalc push",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_d88a6beb0734bbe"
-  },
-  "peerDependencies": {
-    "@tscircuit/table-viewer": "*",
-    "react": "*"
+    "start": "cosmos",
+    "build": "tsup-node ./lib/index.ts --dts --format esm --sourcemap",
+    "build:site": "cosmos-export"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@biomejs/biome": "^1.8.3",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^10.0.1",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.0.3",
-    "@semantic-release/npm": "^10.0.4",
-    "@semantic-release/release-notes-generator": "^11.0.4",
-    "@storybook/nextjs": "^8.1.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/routing": "^1.3.0",
-    "@tscircuit/table-viewer": "^0.0.6",
-    "@types/node": "^18.6.0",
-    "@types/react": "^18.0.15",
-    "@vitejs/plugin-react": "^4.3.0",
-    "ava": "^4.3.1",
-    "chromatic": "^11.5.5",
-    "circuit-json": "^0.0.92",
-    "esbuild": "^0.20.2",
-    "esbuild-register": "^3.5.0",
-    "next": "^14.2.3",
-    "parse-svg-path": "^0.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-use-measure": "^2.1.1",
-    "semantic-release": "^21.0.6",
-    "storybook": "^8.1.3",
-    "svg-path-bounds": "^1.0.2",
-    "svg-path-generator": "^1.1.0",
-    "transformation-matrix": "^2.12.0",
-    "tsup": "^6.7.0",
-    "type-fest": "^2.17.0",
-    "typescript": "^5.5.3",
-    "vite": "^5.2.11",
-    "vite-tsconfig-paths": "^4.3.2",
-    "zod": "^3.23.8",
-    "zustand": "^4.0.0"
+    "@biomejs/biome": "^1.9.4",
+    "@tscircuit/core": "^0.0.222",
+    "@types/bun": "latest",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "circuit-json": "^0.0.111",
+    "react": "18",
+    "react-cosmos": "^6.2.1",
+    "react-cosmos-plugin-vite": "^6.2.0",
+    "react-dom": "18",
+    "tsup": "^8.3.5",
+    "vite": "^6.0.3",
+    "react-reconciler": "^0.31.0"
   },
-  "dependencies": {
-    "@storybook/react-vite": "^8.1.3",
-    "@tscircuit/core": "^0.0.132",
-    "@tscircuit/layout": "^0.0.25",
-    "@tscircuit/props": "^0.0.23",
-    "@tscircuit/soup-util": "^0.0.38",
-    "circuit-to-svg": "^0.0.54",
-    "convert-units": "^2.3.4",
-    "react-error-boundary": "^4.0.4",
-    "react-supergrid": "^1.0.10",
-    "schematic-symbols": "^0.0.78",
-    "use-mouse-matrix-transform": "^1.1.12"
-  },
-  "bugs": {
-    "url": "https://github.com/tscircuit/schematic-viewer/issues"
+  "peerDependencies": {
+    "typescript": "^5.0.0"
   },
-  "homepage": "https://github.com/tscircuit/schematic-viewer#readme"
+  "dependencies": {
+    "circuit-to-svg": "^0.0.90",
+    "debug": "^4.4.0",
+    "performance-now": "^2.1.0",
+    "use-mouse-matrix-transform": "^1.1.13"
+  }
 }

package/src/main.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+import { SchematicViewer } from "lib/components/SchematicViewer"
+
+const root = createRoot(document.getElementById("root")!)
+
+root.render(
+  <React.StrictMode>
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <SchematicViewer
+        circuitJson={renderToCircuitJson(
+          <board width="10mm" height="10mm">
+            <resistor name="R1" resistance={1000} />
+          </board>,
+        )}
+      />
+    </div>
+  </React.StrictMode>,
+)

package/tsconfig.json

@@ -1,30 +1,33 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
     "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "lib/*": ["lib/*"]
+    },
     "esModuleInterop": true,
-    "moduleResolution": "Bundler",
-    "module": "esnext",
-    "baseUrl": "./src",
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": false
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
 }

package/vite.config.js

@@ -1,7 +1,15 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
-import tsconfigPaths from "vite-tsconfig-paths"
+import { resolve } from "node:path"
 
-export default {
-  plugins: [react(), tsconfigPaths()]
-}
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      lib: resolve(__dirname, "./lib"),
+    },
+  },
+  define: {
+    global: {},
+  },
+})

package/.codesandbox/tasks.json

@@ -1,36 +0,0 @@
-{
-  // These tasks will run in order when initializing your CodeSandbox project.
-  "setupTasks": [
-    {
-      "name": "Install Dependencies",
-      "command": "npm install"
-    }
-  ],
-
-  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
-  "tasks": {
-    "start": {
-      "name": "start",
-      "command": "npm run start",
-      "runAtStart": true,
-      "preview": {
-        "port": 6006
-      }
-    },
-    "typecheck": {
-      "name": "typecheck",
-      "command": "npm run typecheck",
-      "runAtStart": false
-    },
-    "build": {
-      "name": "build",
-      "command": "npm run build",
-      "runAtStart": false
-    },
-    "storybook": {
-      "name": "storybook",
-      "command": "npm run storybook",
-      "runAtStart": false
-    }
-  }
-}

package/.github/workflows/chromatic.yml

@@ -1,30 +0,0 @@
-name: "Chromatic"
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  chromatic:
-    name: Run Chromatic
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
-        run: npm ci
-      - name: Run Chromatic
-        uses: chromaui/action@latest
-        with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-          projectToken: chpt_d88a6beb0734bbe

package/.github/workflows/npm-build.yml

@@ -1,26 +0,0 @@
-# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
-name: Build
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "20"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run build
-        run: npm run build

package/.github/workflows/release.yml

@@ -1,29 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18
-
-      - name: Install dependencies
-        run: npm install
-      - name: Build
-        run: npm run build
-
-      - name: Semantic Release
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release

package/.prettierrc

@@ -1 +0,0 @@
-{ "semi": false }

package/.storybook/main.ts

@@ -1,12 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite"
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {},
-}
-export default config

package/.storybook/preview.ts

@@ -1,17 +0,0 @@
-import type { Preview } from "@storybook/react"
-
-import "react-data-grid/lib/styles.css"
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-}
-
-export default preview

package/ava.config.js

@@ -1,7 +0,0 @@
-// Generated by seam-plop
-module.exports = {
-  files: ["src/tests/**/*.test.ts"],
-  extensions: ["ts"],
-  require: ["esbuild-register"],
-  ignoredByWatcher: [".next", ".nsm"],
-}