@tscircuit/schematic-viewer 1.2.12 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "main": "dist/index.js",
   "license": "MIT",
   "repository": "tscircuit/schematic-viewer",
@@ -28,37 +28,42 @@
     "@semantic-release/github": "^9.0.3",
     "@semantic-release/npm": "^10.0.4",
     "@semantic-release/release-notes-generator": "^11.0.4",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/nextjs": "^7.4.0",
-    "@storybook/react": "^7.4.0",
+    "@storybook/nextjs": "^8.1.3",
+    "@storybook/react": "^8.1.3",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@tscircuit/builder": "^1.5.100",
-    "@tscircuit/react-fiber": "^1.1.8",
+    "@tscircuit/builder": "^1.5.124",
+    "@tscircuit/react-fiber": "^1.1.28",
     "@tscircuit/routing": "^1.3.0",
+    "@tscircuit/soup": "^0.0.34",
     "@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",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
-    "next": "^12.2.3",
+    "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",
-    "rectilinear-router": "^1.0.1",
     "semantic-release": "^21.0.6",
-    "storybook": "^7.4.0",
+    "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.4.3",
+    "vite": "^5.2.11",
+    "vite-tsconfig-paths": "^4.3.2",
+    "zod": "^3.23.8",
     "zustand": "^4.0.0"
   },
   "dependencies": {
-    "@tscircuit/soup": "^0.0.16",
+    "@storybook/react-vite": "^8.1.3",
+    "@tscircuit/layout": "^0.0.17",
+    "@tscircuit/props": "^0.0.15",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",

package/src/Schematic.tsx

@@ -18,6 +18,7 @@ import { identity, compose, scale, translate } from "transformation-matrix"
 import { useGlobalStore } from "lib/render-context"
 import useMeasure from "react-use-measure"
 import { TableViewer } from "./schematic-components/TableViewer"
+import { AnySoupElement } from "@tscircuit/soup"
 
 const ErrorBoundary = TypedErrorBoundary as any
 
@@ -40,11 +41,13 @@ export interface SchematicProps {
   /** @deprecated use soup */
   elements?: any
 
-  soup?: any
+  soup?: AnySoupElement[]
 
   style?: any
 
   showTable?: boolean
+
+  _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[]
 }
 
 export const Schematic = (props: SchematicProps) => {
@@ -61,6 +64,7 @@ export const SchematicWithoutContext = ({
   soup: initialSoup,
   style,
   showTable = false,
+  _soupPostProcessor,
 }: SchematicProps) => {
   initialSoup = initialSoup ?? initialElements ?? []
 
@@ -107,13 +111,16 @@ export const SchematicWithoutContext = ({
 
   useEffect(() => {
     if (initialSoup.length > 0) {
-      setElementsAndCamera(initialSoup)
+      setElementsAndCamera(initialSoup as any)
       return
     }
     const projectBuilder = createProjectBuilder()
     ;((createRoot ?? TscReactFiber.createRoot) as any)()
       .render(children, projectBuilder as any)
       .then(async (elements) => {
+        if (_soupPostProcessor) {
+          elements = _soupPostProcessor(elements)
+        }
         setElementsAndCamera(elements)
       })
       .catch((e) => {

package/src/schematic-components/SchematicBug.tsx

@@ -6,12 +6,13 @@ import {
   getPortArrangementSize,
   getPortIndices,
 } from "@tscircuit/builder"
+import type { SchematicComponent } from "@tscircuit/soup"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
 
 interface Props {
   component: {
     source: Type.SimpleBug
-    schematic: Type.SchematicComponent
+    schematic: SchematicComponent
   }
 }
 
@@ -24,6 +25,7 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
   // const port_labels = schematic.port_labels!
   let bugw = schematic.size.width // bug width
   let bugh = schematic.size.height
+
   const { total_ports, width, height } =
     getPortArrangementSize(port_arrangement)
   const port_indices = getPortIndices(port_arrangement)
@@ -42,20 +44,24 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
       } ${bugh / 2} L ${-bugw / 2} ${bugh / 2}Z`,
     },
     ...port_indices.map((portNum) => {
-      const pos = getPortPosition(port_arrangement, portNum)
+      // TODO get the ports passed to the components and use those positions
+      const pos = getPortPosition(
+        { ...port_arrangement, pin_spacing: schematic.pin_spacing },
+        portNum,
+      )
 
       const x2 =
         pos.side === "left"
           ? -bugw / 2
           : pos.side === "right"
-          ? bugw / 2
-          : pos.x
+            ? bugw / 2
+            : pos.x
       const y2 =
         pos.side === "top"
           ? bugh / 2
           : pos.side === "bottom"
-          ? -bugh / 2
-          : pos.y
+            ? -bugh / 2
+            : pos.y
 
       return {
         stroke: "red",

package/src/stories/bug-one-sided.stories.tsx

@@ -3,12 +3,13 @@ import { Schematic } from "Schematic"
 const OneSidedBugExample = () => (
   <bug
     name="U2"
-    port_arrangement={{
-      left_size: 0,
-      right_size: 4,
+    schPortArrangement={{
+      leftSize: 0,
+      rightSize: 4,
     }}
-    center={[-10, 0]}
-    port_labels={{
+    schX={-10}
+    schY={0}
+    pinLabels={{
       "1": "GND",
       "2": "VBUS",
       "3": "D-",

package/src/stories/bug-pin-spacing.stories.tsx

@@ -0,0 +1,49 @@
+import { Schematic } from "Schematic"
+
+const BugPinSpacingExample = () => (
+  <bug
+    name="U2"
+    schPortArrangement={{
+      leftSize: 2,
+      rightSize: 2,
+    }}
+    schX={-10}
+    schY={0}
+    schPinSpacing="1.5mm"
+    pinLabels={{
+      "1": "GND",
+      "2": "VBUS",
+      "3": "D-",
+      "4": "D+",
+    }}
+  />
+)
+
+export const BugPinSpacing = () => {
+  return (
+    <Schematic
+      style={{ height: 600 }}
+      _soupPostProcessor={(soup) => {
+        return soup.map((elm) => {
+          if (elm.type === "schematic_component") {
+            // return {
+            //   ...elm,
+            //   size: { width: 3, height: 3 },
+            //   pin_spacing: 1.5,
+            // }
+            console.log(elm)
+            return elm
+          }
+          return elm
+        })
+      }}
+    >
+      <BugPinSpacingExample />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "BugPinSpacing",
+  component: BugPinSpacing,
+}

package/src/stories/bugs/bug8-autolayout.stories.tsx

@@ -0,0 +1,52 @@
+import { Schematic } from "../../Schematic"
+import { layout } from "@tscircuit/layout"
+import { useBug, useResistor, useCapacitor } from "@tscircuit/react-fiber"
+
+export const Bug8Autolayout = () => {
+  const U1 = useBug("U1", {
+    pinLabels: {
+      1: "VCC",
+      2: "D0",
+      3: "D1",
+      4: "GND",
+      5: "INP",
+      6: "THR",
+    },
+    schPortArrangement: {
+      leftSize: 3,
+      topSize: 0,
+      bottomSize: 0,
+      rightSize: 3,
+    },
+  })
+
+  const R1 = useResistor("R1", { resistance: "10k" })
+  const R2 = useResistor("R2", { resistance: "1k" })
+  const R3 = useResistor("R3", { resistance: "5k" })
+  const C1 = useCapacitor("C1", { capacitance: "1uF" })
+
+  return (
+    <div>
+      <Schematic style={{ height: 500 }}>
+        <board
+          layout={layout().autoLayoutSchematic()}
+          pcbCenterX={0}
+          pcbCenterY={0}
+          width={"10mm"}
+          height={"10mm"}
+        >
+          <U1 />
+          <R1 left={U1.D1} right={U1.VCC} />
+          <R2 left={U1.D0} right={U1.GND} />
+          <R3 left={U1.INP} right={U1.THR} />
+          <C1 left={U1.INP} right={U1.THR} />
+        </board>
+      </Schematic>
+    </div>
+  )
+}
+
+export default {
+  title: "Bugs/Bug8Autolayout",
+  component: Bug8Autolayout,
+}

package/src/stories/circuit-components/netalias.stories.tsx

@@ -0,0 +1,14 @@
+import { Schematic } from "../../Schematic"
+
+export const NetAlias = () => {
+  return (
+    <Schematic style={{ height: 500 }}>
+      <netalias net="GND" />
+    </Schematic>
+  )
+}
+
+export default {
+  title: "Circuit Components/NetAlias",
+  component: NetAlias,
+}

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default {
+  plugins: [react(), tsconfigPaths()]
+}