@tscircuit/schematic-viewer 1.4.3 → 2.0.0

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/dist/index.d.ts

@@ -1,15 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AnyCircuitElement } from 'circuit-json';
-import React from 'react';
 
-interface SchematicProps {
-    children?: any;
-    soup?: AnyCircuitElement[];
-    style?: React.CSSProperties;
-    showTable?: boolean;
-    _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[];
+interface Props {
+    circuitJson: Array<{
+        type: string;
+    }>;
 }
-declare const Schematic: (props: SchematicProps) => react_jsx_runtime.JSX.Element;
-declare const SchematicWithoutContext: ({ children, soup, style, showTable, _soupPostProcessor, }: SchematicProps) => react_jsx_runtime.JSX.Element;
+declare const SchematicViewer: ({ circuitJson }: Props) => react_jsx_runtime.JSX.Element;
 
-export { Schematic, SchematicProps, SchematicWithoutContext };
+export { SchematicViewer };