@tscircuit/schematic-viewer 1.2.14 → 1.3.0

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.2.14",
+  "version": "1.3.0",
   "main": "dist/index.js",
   "license": "MIT",
-  "repository": "tscircuit/schematic-viewer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tscircuit/schematic-viewer.git"
+  },
   "scripts": {
     "start": "storybook dev -p 6006",
     "typecheck": "tsc --noEmit",
     "build": "tsup",
     "yalc": "npm run build && yalc push",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_d88a6beb0734bbe"
   },
   "peerDependencies": {
     "@tscircuit/builder": "*",
@@ -34,12 +38,13 @@
     "@tscircuit/builder": "^1.5.126",
     "@tscircuit/react-fiber": "^1.1.29",
     "@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",
+    "chromatic": "^11.5.5",
+    "circuit-json": "^0.0.82",
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "next": "^14.2.3",
@@ -54,7 +59,7 @@
     "transformation-matrix": "^2.12.0",
     "tsup": "^6.7.0",
     "type-fest": "^2.17.0",
-    "typescript": "^5.4.3",
+    "typescript": "^5.5.3",
     "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2",
     "zod": "^3.23.8",
@@ -62,11 +67,16 @@
   },
   "dependencies": {
     "@storybook/react-vite": "^8.1.3",
-    "@tscircuit/layout": "^0.0.17",
-    "@tscircuit/props": "^0.0.15",
+    "@tscircuit/layout": "^0.0.25",
+    "@tscircuit/props": "^0.0.23",
+    "@tscircuit/soup-util": "^0.0.13",
     "convert-units": "^2.3.4",
     "react-error-boundary": "^4.0.4",
     "react-supergrid": "^1.0.10",
     "use-mouse-matrix-transform": "^1.1.12"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/tscircuit/schematic-viewer/issues"
+  },
+  "homepage": "https://github.com/tscircuit/schematic-viewer#readme"
 }

package/renovate.json

@@ -1,6 +1,17 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
-    "config:recommended"
+    "config:base"
+  ],
+  "packageRules": [
+    {
+      "packagePatterns": ["*"],
+      "excludePackagePatterns": ["@tscircuit/*"],
+      "enabled": false
+    },
+    {
+      "matchUpdateTypes": ["major", "minor", "patch"],
+      "automerge": true
+    }
   ]
 }

package/src/Schematic.tsx

@@ -1,24 +1,21 @@
-import { useCallback, useEffect, useState } from "react"
-import { ContextProviders, ProjectComponent } from "schematic-components"
-import { SuperGrid, toMMSI } from "react-supergrid"
 import {
   AnyElement,
   createProjectBuilder,
   createProjectFromElements,
   findBoundsAndCenter,
-  transformSchematicElement,
 } from "@tscircuit/builder"
-import * as builder1 from "@tscircuit/builder"
 import TscReactFiber, { createRoot } from "@tscircuit/react-fiber"
-import { SchematicElement } from "schematic-components/SchematicElement"
-import { collectElementRefs } from "lib/utils/collect-element-refs"
-import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
-import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
-import { identity, compose, scale, translate } from "transformation-matrix"
+import { AnyCircuitElement } from "circuit-json"
 import { useGlobalStore } from "lib/render-context"
+import { useCallback, useEffect, useState } from "react"
+import { ErrorBoundary as TypedErrorBoundary } from "react-error-boundary"
+import { SuperGrid, toMMSI } from "react-supergrid"
 import useMeasure from "react-use-measure"
+import { ContextProviders } from "schematic-components"
+import { SchematicElement } from "schematic-components/SchematicElement"
+import { compose, scale, translate } from "transformation-matrix"
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { TableViewer } from "./schematic-components/TableViewer"
-import { AnySoupElement } from "@tscircuit/soup"
 
 const ErrorBoundary = TypedErrorBoundary as any
 
@@ -41,13 +38,13 @@ export interface SchematicProps {
   /** @deprecated use soup */
   elements?: any
 
-  soup?: AnySoupElement[]
+  soup?: AnyCircuitElement[]
 
   style?: any
 
   showTable?: boolean
 
-  _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[]
+  _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[]
 }
 
 export const Schematic = (props: SchematicProps) => {
@@ -84,17 +81,17 @@ export const SchematicWithoutContext = ({
       const elmBounds = (ref.current as HTMLDivElement).getBoundingClientRect()
 
       const { center, width, height } = elements.some((e) =>
-        e.type.startsWith("schematic_")
+        e.type.startsWith("schematic_"),
       )
         ? findBoundsAndCenter(
-            elements.filter((e) => e.type.startsWith("schematic_"))
+            elements.filter((e) => e.type.startsWith("schematic_")),
           )
         : { center: { x: 0, y: 0 }, width: 0.001, height: 0.001 }
 
       const scaleFactor = Math.min(
         (elmBounds.width ?? 0) / width,
         (elmBounds.height ?? 0) / height,
-        100
+        100,
       )
       setElements(elements)
       setProject(createProjectFromElements(elements))
@@ -102,11 +99,11 @@ export const SchematicWithoutContext = ({
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
           scale(scaleFactor, -scaleFactor, 0, 0),
-          translate(-center.x, -center.y)
-        )
+          translate(-center.x, -center.y),
+        ),
       )
     },
-    [setElements, setTransform]
+    [setElements, setTransform],
   )
 
   useEffect(() => {

package/src/lib/types/source-component.ts

@@ -35,6 +35,7 @@ export type LightEmittingDiode = SimpleDiode & {
 }
 
 export interface SimpleBug extends SourceComponentBase {
+  manufacturerPartNumber: any
   ftype: "simple_bug"
 }
 

package/src/lib/utils/collect-element-refs.ts

@@ -1,8 +1,8 @@
-import { AnySoupElement, SourcePort } from "@tscircuit/soup"
+import { AnyCircuitElement, SourcePort } from "circuit-json"
 
 export const collectElementRefs = (
-  elm: AnySoupElement,
-  allElms: AnySoupElement[]
+  elm: AnyCircuitElement,
+  allElms: AnyCircuitElement[]
 ) => {
   const source_port = allElms.find(
     (e) =>

package/src/schematic-components/SchematicBug.tsx

@@ -1,13 +1,13 @@
-import * as Type from "lib/types"
-import SVGPathComponent from "./SVGPathComponent"
-import range from "lodash/range"
 import {
-  getPortPosition,
   getPortArrangementSize,
   getPortIndices,
+  getPortPosition,
 } from "@tscircuit/builder"
 import type { SchematicComponent } from "@tscircuit/soup"
+import * as Type from "lib/types"
 import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
+import SVGPathComponent from "./SVGPathComponent"
+import SchematicText from "./SchematicText"
 
 interface Props {
   component: {
@@ -17,11 +17,13 @@ interface Props {
 }
 
 export const SchematicBug = ({ component: { source, schematic } }: Props) => {
+  const location = schematic.center
   const port_arrangement = {
     top_size: 0,
     bottom_size: 0,
     ...schematic.port_arrangement,
   }
+  const manufacturerPartNumber = source.manufacturerPartNumber
   // const port_labels = schematic.port_labels!
   let bugw = schematic.size.width // bug width
   let bugh = schematic.size.height
@@ -78,12 +80,27 @@ export const SchematicBug = ({ component: { source, schematic } }: Props) => {
   }
 
   return (
-    <SVGPathComponent
-      rotation={schematic.rotation}
-      center={actualCenter}
-      size={actualSize}
-      paths={paths}
-    />
+    <>
+      <SVGPathComponent
+        rotation={schematic.rotation}
+        center={actualCenter}
+        size={actualSize}
+        paths={paths}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "bottom",
+          position: {
+            x: location.x + actualSize.minX / 1.5,
+            y: location.y + actualSize.minY,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: manufacturerPartNumber,
+          type: "schematic_text",
+        }}
+      />
+    </>
   )
 }
 

package/src/schematic-components/SchematicElement.tsx

@@ -1,14 +1,13 @@
-import { AnySoupElement } from "@tscircuit/soup"
+import { AnyCircuitElement } from "circuit-json"
 import { collectElementRefs } from "lib/utils/collect-element-refs"
+import SchematicBox from "./SchematicBox"
 import SchematicComponent from "./SchematicComponent"
+import SchematicLine from "./SchematicLine"
+import { SchematicNetLabel } from "./SchematicNetLabel"
+import SchematicPath from "./SchematicPath"
 import SchematicPort from "./SchematicPort"
 import SchematicText from "./SchematicText"
-import SchematicBox from "./SchematicBox"
 import SchematicTrace from "./SchematicTrace"
-import SchematicLine from "./SchematicLine"
-import RenderError from "./RenderError"
-import SchematicPath from "./SchematicPath"
-import { SchematicNetLabel } from "./SchematicNetLabel"
 
 /**
  * Render any @tsbuilder/builder AnyElement that can be put on a schematic.
@@ -17,8 +16,8 @@ export const SchematicElement = ({
   element,
   allElements,
 }: {
-  element: AnySoupElement
-  allElements: AnySoupElement[]
+  element: AnyCircuitElement
+  allElements: AnyCircuitElement[]
 }) => {
   // A lot of the split logic for element types into a project is here:
   // https://github.com/tscircuit/builder/blob/7e7bef9c0aadd11999795003b8986f0d244c111f/src/lib/project/create-project-from-elements.ts#L13
@@ -68,10 +67,5 @@ export const SchematicElement = ({
     return <SchematicNetLabel net_label={element} />
   }
 
-  if (element.type === "source_error") {
-    // TODO use the ids on the source error to put this in the right place
-    return <RenderError text={element.message} />
-  }
-
   return null
 }

package/src/stories/basics/schematic-net-label.stories.tsx

@@ -4,182 +4,128 @@ export const SchematicNetLabel = () => {
   return (
     <Schematic
       style={{ height: 500 }}
-      soup={
+      soup={[
         {
-          elements: [
-            {
-              type: "source_component",
-              source_component_id: "simple_resistor_0",
-              name: "R1",
-              supplier_part_numbers: {},
-              ftype: "simple_resistor",
-              resistance: 100,
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "schematic_component",
-              source_component_id: "simple_resistor_0",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              rotation: 0,
-              size: {
-                width: 1,
-                height: 0.3,
-              },
-              center: {
-                x: 0,
-                y: 0,
-              },
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "source_port",
-              name: "left",
-              source_port_id: "source_port_0",
-              source_component_id: "simple_resistor_0",
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
-            {
-              type: "schematic_port",
-              schematic_port_id: "schematic_port_0",
-              source_port_id: "source_port_0",
-              center: {
-                x: -0.5,
-                y: 0,
-              },
-              facing_direction: "left",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              source: {
-                type: "source_port",
-                name: "left",
-                source_port_id: "source_port_0",
-                source_component_id: "simple_resistor_0",
-              },
-            },
-            {
-              type: "source_port",
-              name: "right",
-              source_port_id: "source_port_1",
-              source_component_id: "simple_resistor_0",
-              source: {
-                type: "source_component",
-                source_component_id: "simple_resistor_0",
-                name: "R1",
-                supplier_part_numbers: {},
-                ftype: "simple_resistor",
-                resistance: 100,
-              },
-            },
+          type: "source_component",
+          source_component_id: "simple_resistor_0",
+          name: "R1",
+          supplier_part_numbers: {},
+          ftype: "simple_resistor",
+          resistance: 100,
+        },
+        {
+          type: "schematic_component",
+          source_component_id: "simple_resistor_0",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          rotation: 0,
+          size: {
+            width: 1,
+            height: 0.3,
+          },
+          center: {
+            x: 0,
+            y: 0,
+          },
+        },
+        {
+          type: "source_port",
+          name: "left",
+          source_port_id: "source_port_0",
+          source_component_id: "simple_resistor_0",
+        },
+        {
+          type: "schematic_port",
+          schematic_port_id: "schematic_port_0",
+          source_port_id: "source_port_0",
+          center: {
+            x: -0.5,
+            y: 0,
+          },
+          facing_direction: "left",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+        },
+        {
+          type: "source_port",
+          name: "right",
+          source_port_id: "source_port_1",
+          source_component_id: "simple_resistor_0",
+        },
+        {
+          type: "schematic_port",
+          schematic_port_id: "schematic_port_1",
+          source_port_id: "source_port_1",
+          center: {
+            x: 0.5,
+            y: 0,
+          },
+          facing_direction: "right",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+        },
+        {
+          type: "schematic_text",
+          text: "R1",
+          schematic_text_id: "schematic_text_0",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          anchor: "left",
+          position: {
+            x: -0.2,
+            y: -0.5,
+          },
+          rotation: 0,
+        },
+        {
+          type: "schematic_text",
+          text: "100",
+          schematic_text_id: "schematic_text_1",
+          schematic_component_id: "schematic_component_simple_resistor_0",
+          anchor: "left",
+          position: {
+            x: -0.2,
+            y: -0.3,
+          },
+          rotation: 0,
+        },
+        {
+          type: "source_net",
+          member_source_group_ids: [],
+          source_net_id: "net_0",
+          name: "N1",
+        },
+        {
+          type: "source_trace",
+          connected_source_port_ids: ["source_port_1"],
+          connected_source_net_ids: ["net_0"],
+          source_trace_id: "source_trace_0",
+        },
+        {
+          type: "schematic_net_label",
+          source_net_id: "net_0",
+          text: "N1",
+          anchor_side: "left",
+          center: {
+            x: 1.5,
+            y: 0,
+          },
+        },
+        {
+          type: "schematic_trace",
+          schematic_trace_id: "schematic_trace_0",
+          source_trace_id: "source_trace_0",
+          edges: [
             {
-              type: "schematic_port",
-              schematic_port_id: "schematic_port_1",
-              source_port_id: "source_port_1",
-              center: {
+              from: {
                 x: 0.5,
                 y: 0,
               },
-              facing_direction: "right",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              source: {
-                type: "source_port",
-                name: "right",
-                source_port_id: "source_port_1",
-                source_component_id: "simple_resistor_0",
-              },
-            },
-            {
-              type: "schematic_text",
-              text: "R1",
-              schematic_text_id: "schematic_text_0",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              anchor: "left",
-              position: {
-                x: -0.2,
-                y: -0.5,
-              },
-              rotation: 0,
-              source: null,
-            },
-            {
-              type: "schematic_text",
-              text: 100,
-              schematic_text_id: "schematic_text_1",
-              schematic_component_id: "schematic_component_simple_resistor_0",
-              anchor: "left",
-              position: {
-                x: -0.2,
-                y: -0.3,
-              },
-              rotation: 0,
-              source: null,
-            },
-            {
-              type: "source_net",
-              member_source_group_ids: [],
-              source_net_id: "net_0",
-              name: "N1",
-              source: null,
-            },
-            {
-              type: "source_trace",
-              connected_source_port_ids: ["source_port_1"],
-              connected_source_net_ids: ["net_0"],
-              source_trace_id: "source_trace_0",
-              source: null,
-            },
-            {
-              type: "schematic_net_label",
-              source_net_id: "net_0",
-              text: "N1",
-              anchor_side: "left",
-              center: {
+              to: {
                 x: 1.5,
                 y: 0,
               },
-              source: null,
-            },
-            {
-              type: "schematic_trace",
-              schematic_trace_id: "schematic_trace_0",
-              source_trace_id: "source_trace_0",
-              edges: [
-                {
-                  from: {
-                    x: 0.5,
-                    y: 0,
-                  },
-                  to: {
-                    x: 1.5,
-                    y: 0,
-                  },
-                  from_schematic_port_id: "schematic_port_1",
-                },
-              ],
-              source: null,
+              from_schematic_port_id: "schematic_port_1",
             },
           ],
-        }.elements
-      }
+        },
+      ]}
     />
   )
 }

package/src/stories/bug-connections.stories.tsx

@@ -5,13 +5,13 @@ export const BugConnections = () => {
     <Schematic style={{ height: 600 }}>
       <bug
         name="B1"
-        port_arrangement={{
-          left_size: 3,
-          right_size: 2,
+        schPortArrangement={{
+          leftSize: 3,
+          rightSize: 2,
         }}
-        sch_cx={8}
-        sch_cy={3}
-        port_labels={{
+        schX={8}
+        schY={3}
+        pinLabels={{
           "1": "D0",
           "2": "D1",
         }}