@tscircuit/schematic-viewer 1.4.2 → 2.0.0

package/package.json

@@ -1,83 +1,36 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "1.4.2",
+  "version": "2.0.0",
   "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/npm-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: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "20"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run typecheck
-        run: npx tsc --noEmit

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"],
-}

package/dist/index.css

@@ -1,7 +0,0 @@
-@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap";
-
-/* src/pages/style.css */
-.schematic-text {
-  font-family: "IBM Plex Mono", monospace;
-}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pages/style.css"],"sourcesContent":["@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap\");\n\n.schematic-text {\n  font-family: \"IBM Plex Mono\", monospace;\n}\n"],"mappings":";;;AAEA;AACE;AAAA;","names":[]}

package/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package/parsel.d.ts

@@ -1,81 +0,0 @@
-declare module "parsel-js" {
-  export interface Tokens {
-    type:
-      | "class"
-      | "attribute"
-      | "id"
-      | "type"
-      | "pseudo-element"
-      | "pseudo-class"
-      | "comma"
-      | "combinator"
-    content: string
-    name: string
-    namespace?: string
-    value?: string
-    pos: [number, number]
-    operator?: string
-    argument?: string
-    subtree?: AST
-    caseSensitive?: "i"
-  }
-
-  export interface Complex {
-    type: "complex"
-    combinator: string
-    right: AST
-    left: AST
-  }
-
-  export interface Compound {
-    type: "compound"
-    list: Tokens[]
-  }
-
-  export interface List {
-    type: "list"
-    list: AST[]
-  }
-
-  export interface ParserOptions {
-    recursive?: boolean
-    list?: boolean
-  }
-
-  export interface SpecificityOptions {
-    format?: string
-  }
-
-  export type AST = Complex | Compound | List | Tokens
-
-  /**
-   * Get AST:
-   */
-  export function parse(selector: string, options?: ParserOptions): AST
-
-  /**
-   * Get list of tokens as a flat array:
-   */
-  export function tokenize(selector: string): Tokens[]
-
-  /**
-   * Traverse all tokens of a (sub)tree:
-   */
-  export function walk(node: AST, cb: (node: AST, parentNode: AST) => {}): void
-
-  /**
-   * Calculate specificity (returns an array of 3 numbers):
-   */
-  export function specificity(
-    selector: string | AST,
-    options?: SpecificityOptions
-  ): number[]
-
-  /**
-   *  To convert the specificity array to a number
-   */
-  export function specificityToNumber(
-    specificity: number[],
-    base?: number
-  ): number
-}

package/release.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  branches: ["main"], // change this to your default branch if not `main`
-  plugins: [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
-    ["@semantic-release/npm", { npmPublish: true }],
-    [
-      "@semantic-release/git",
-      {
-        assets: ["package.json"],
-        message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-      }
-    ]
-  ],
-}

package/renovate.json

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