Merge pull request #214 from tscircuit/more-use-components

useResistor, useChip and useCapacitor

lib/hooks/create-use-component.tsx

@@ -2,6 +2,11 @@ import React, { Component, type ComponentProps } from "react"
 import { z } from "zod"
 import { resistorProps, resistorPins } from "@tscircuit/props"
 
+export type PinLabelSpec<PinLabel extends string> =
+  | readonly PinLabel[]
+  | readonly (readonly PinLabel[])[]
+  | { [key: string]: readonly PinLabel[] }
+
 export type ComponentWithPins<
   Props,
   PinLabel extends string | never = never,
@@ -21,10 +26,7 @@ export const createUseComponent = <
   PinLabel extends string | never = never,
 >(
   Component: React.ComponentType<Props>,
-  pins:
-    | readonly PinLabel[]
-    | readonly (readonly PinLabel[])[]
-    | { [key: string]: readonly PinLabel[] },
+  pins: PinLabelSpec<PinLabel>,
 ): (<PropsFromHook extends Omit<Props, "name"> | undefined = undefined>(
   name: string,
   props?: PropsFromHook,

lib/hooks/use-capacitor.tsx

@@ -0,0 +1,7 @@
+import { capacitorPins, type CapacitorProps } from "@tscircuit/props"
+import { createUseComponent } from "./create-use-component"
+
+export const useCapacitor = createUseComponent(
+  (props: CapacitorProps) => <capacitor {...props} />,
+  capacitorPins,
+)

lib/hooks/use-chip.tsx

@@ -0,0 +1,10 @@
+import type { ChipProps } from "@tscircuit/props"
+import { createUseComponent, type PinLabelSpec } from "./create-use-component"
+
+export const useChip = <PinLabel extends string>(
+  pinLabels: Record<string, PinLabel[]>,
+) =>
+  createUseComponent(
+    (props: ChipProps) => <chip pinLabels={pinLabels} {...props} />,
+    pinLabels,
+  )

lib/hooks/use-resistor.tsx

@@ -0,0 +1,7 @@
+import { resistorPins, type ResistorProps } from "@tscircuit/props"
+import { createUseComponent } from "./create-use-component"
+
+export const useResistor = createUseComponent(
+  (props: ResistorProps) => <resistor {...props} />,
+  resistorPins,
+)

tests/hooks/use-capacitor.test.tsx

@@ -0,0 +1,31 @@
+import { test, expect } from "bun:test"
+import { useCapacitor } from "lib/hooks/use-capacitor"
+import { Circuit } from "lib/Circuit"
+
+test("useCapacitor hook creates component with correct props and traces", () => {
+  const circuit = new Circuit()
+
+  const C1 = useCapacitor("C1", { capacitance: "10uF", footprint: "0805" })
+  const C2 = useCapacitor("C2", { capacitance: "100nF", footprint: "0603" })
+
+  circuit.add(
+    <board width="10mm" height="10mm">
+      <C1 anode="net.VCC" cathode="net.GND" />
+      <C2 pos={C1.anode} neg="net.GND" />
+    </board>,
+  )
+
+  circuit.render()
+
+  // Check if capacitor components were created correctly
+  const capacitors = circuit.selectAll("capacitor")
+  expect(capacitors.length).toBe(2)
+  expect(capacitors[0].props.name).toBe("C1")
+  expect(capacitors[0].props.capacitance).toBe("10uF")
+  expect(capacitors[1].props.name).toBe("C2")
+  expect(capacitors[1].props.capacitance).toBe("100nF")
+
+  // Check if traces were created correctly
+  const traces = circuit.selectAll("trace")
+  expect(traces.length).toBe(4)
+})

tests/hooks/use-chip.test.tsx

@@ -0,0 +1,51 @@
+import { test, expect } from "bun:test"
+import { useChip } from "lib/hooks/use-chip"
+import { Circuit } from "lib/Circuit"
+
+test("useChip hook creates component with correct props and traces", () => {
+  const circuit = new Circuit()
+
+  const useAtmega = useChip({
+    pin1: ["VCC"],
+    pin2: ["GND"],
+    pin3: ["TX"],
+    pin4: ["RX"],
+  } as const)
+
+  const U1 = useAtmega("U1", {
+    footprint: "soic8",
+    manufacturerPartNumber: "ATMEGA328P",
+  })
+
+  circuit.add(
+    <board width="10mm" height="10mm">
+      <U1 VCC="net.VCC" GND="net.GND" TX="net.TX" RX={U1.TX} />
+    </board>,
+  )
+
+  circuit.render()
+
+  // Check if chip component was created correctly
+  const chip = circuit.selectOne("chip")
+  expect(chip).not.toBeNull()
+  expect(chip!.props.name).toBe("U1")
+  expect(chip!.props.footprint).toBe("soic8")
+  expect(chip!.props.manufacturerPartNumber).toBe("ATMEGA328P")
+
+  // Check if traces were created correctly
+  const traces = circuit.selectAll("trace")
+  expect(traces.length).toBe(4)
+
+  // Verify trace connections
+  const traceConnections = traces.map((t) => ({
+    from: t.props.from,
+    to: t.props.to,
+  }))
+  expect(traceConnections).toContainEqual({ from: ".U1 > .VCC", to: "net.VCC" })
+  expect(traceConnections).toContainEqual({ from: ".U1 > .GND", to: "net.GND" })
+  expect(traceConnections).toContainEqual({ from: ".U1 > .TX", to: "net.TX" })
+  expect(traceConnections).toContainEqual({
+    from: ".U1 > .RX",
+    to: ".U1 > .TX",
+  })
+})

tests/hooks/use-resistor.test.tsx

@@ -0,0 +1,31 @@
+import { test, expect } from "bun:test"
+import { useResistor } from "lib/hooks/use-resistor"
+import { Circuit } from "lib/Circuit"
+
+test("useResistor hook creates component with correct props and traces", () => {
+  const circuit = new Circuit()
+
+  const R1 = useResistor("R1", { resistance: "10k", footprint: "0402" })
+  const R2 = useResistor("R2", { resistance: "20k", footprint: "0603" })
+
+  circuit.add(
+    <board width="10mm" height="10mm">
+      <R1 pin1="net.VCC" pin2="net.GND" />
+      <R2 pin1={R1.pin2} pin2="net.GND" />
+    </board>,
+  )
+
+  circuit.render()
+
+  // Check if resistor components were created correctly
+  const resistors = circuit.selectAll("resistor")
+  expect(resistors.length).toBe(2)
+  expect(resistors[0].props.name).toBe("R1")
+  expect(resistors[0].props.resistance).toBe("10k")
+  expect(resistors[1].props.name).toBe("R2")
+  expect(resistors[1].props.resistance).toBe("20k")
+
+  // Check if traces were created correctly
+  const traces = circuit.selectAll("trace")
+  expect(traces.length).toBe(4)
+})