add pin events, show pins on elements and create small, normal breadboards

.storybook/preview.js

@@ -5,7 +5,5 @@ export const parameters = {
 import { setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 
-import '../src/utils/show-pins-element';
-
 // Configure Storybook Docs Addon for Web Components
 setCustomElements(customElements);

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@wokwi/elements",
-  "version": "1.4.10",
+  "name": "@b.borisov/cu-elements",
+  "version": "1.4.22",
   "main": "dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
-  "repository": "https://github.com/wokwi/wokwi-elements",
-  "author": "Uri Shaked <uri@urishaked.com>",
+  "repository": "https://github.com/Pupe6/wokwi-elements",
+  "author": "Borislav Borisov <borislav1207@gmail.com>",
   "license": "MIT",
   "files": [
     "dist"

src/arduino-mega-element.stories.ts

@@ -5,7 +5,7 @@ import './arduino-mega-element';
 import { action } from '@storybook/addon-actions';
 
 storiesOf('Arduino Mega', module)
-  .addParameters({ component: 'wokwi-arduino-mega' })
+  .addParameters({ component: 'ArduinoMegaElement' })
   .addDecorator(withKnobs)
   .add(
     'Mega',

src/arduino-nano-element.stories.ts

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import './arduino-nano-element';
 
 storiesOf('Arduino Nano', module)
-  .addParameters({ component: 'wokwi-arduino-nano' })
+  .addParameters({ component: 'ArduinoNanoElement' })
   .addDecorator(withKnobs)
   .add(
     'Nano',

src/arduino-uno-element.stories.ts

@@ -5,7 +5,7 @@ import { html } from 'lit';
 import './arduino-uno-element';
 
 storiesOf('Arduino Uno', module)
-  .addParameters({ component: 'wokwi-arduino-uno' })
+  .addParameters({ component: 'ArduinoUnoElement' })
   .addDecorator(withKnobs)
   .add(
     'Uno R3',

src/attiny85-element.stories.ts

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import './attiny85-element';
+
+export default {
+  title: 'Attiny85',
+  component: 'wokwi-attiny85',
+  argTypes: {
+    value: { control: { type: 'number', min: 1, max: 10, step: 1 } },
+  },
+  args: {
+    value: 5,
+  },
+};
+
+const Template = ({ value }) => html`<wokwi-attiny85 value=${value}></wokwi-attiny85>`;
+
+export const Default = Template.bind({});
+Default.args = { value: 5 };
+
+export const Large = Template.bind({});
+Large.args = { value: 10 };

src/breadboard-element.stories.ts

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+import './breadboard-element';
+
+export default {
+  title: 'Breadboard',
+  component: 'BreaboardElement',
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['small', 'normal'],
+      },
+    },
+  },
+  args: {
+    type: 'normal',
+  },
+};
+
+const Template = ({ type }) => html`
+  <wokwi-show-pins pinRadius="5" pinType="circle">
+    <BreadboardElement type=${type}></BreadboardElement>
+  </wokwi-show-pins>
+`;
+
+export const Small = Template.bind({});
+Small.args = { type: 'small' };
+
+export const Normal = Template.bind({});
+Normal.args = { type: 'normal' };

src/index.ts

@@ -51,3 +51,8 @@ export { StepperMotorElement } from './stepper-motor-element';
 export { HX711Element } from './hx711-element';
 export { KS2EMDC5Element } from './ks2e-m-dc5-element';
 export { BiaxialStepperElement } from './biaxial-stepper-element';
+export { BreadboardElement } from './breadboard-element';
+export { ShowPinsElement } from './show-pins-element';
+export { MainBreadboardElement } from './main-breadboard-element';
+export { McuBreadboardElement } from './mcu-breadboard-element';
+export { Attiny85Element } from './attiny85-element';

src/main-breadboard-element.stories.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+import './main-breadboard-element';
+
+export default {
+  title: 'Main Breadboard',
+  component: 'wokwi-main-breadboard',
+  argTypes: {},
+  args: {},
+};
+
+const Template = () => html`<wokwi-main-breadboard></wokwi-main-breadboard>`;
+
+export const Default = Template.bind({});

src/mcu-breadboard-element.stories.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+import './mcu-breadboard-element';
+
+export default {
+  title: 'Mcu Breadboard',
+  component: 'wokwi-mcu-breadboard',
+  argTypes: {},
+  args: {},
+};
+
+const Template = () => html`<wokwi-mcu-breadboard></wokwi-mcu-breadboard>`;
+
+export const Default = Template.bind({});

src/react-types.ts

@@ -50,62 +50,73 @@ import { StepperMotorElement } from './stepper-motor-element';
 import { HX711Element } from './hx711-element';
 import { KS2EMDC5Element } from './ks2e-m-dc5-element';
 import { BiaxialStepperElement } from './biaxial-stepper-element';
+import { BreadboardElement } from './breadboard-element';
+import { ShowPinsElement } from './show-pins-element';
+import { MainBreadboardElement } from './main-breadboard-element';
+import { McuBreadboardElement } from './mcu-breadboard-element';
+
 import type React from 'react';
+import { Attiny85Element } from './attiny85-element';
 
 type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'wokwi-7segment': WokwiElement<SevenSegmentElement>;
-      'wokwi-arduino-uno': WokwiElement<ArduinoUnoElement>;
-      'wokwi-lcd1602': WokwiElement<LCD1602Element>;
-      'wokwi-led': WokwiElement<LEDElement>;
-      'wokwi-neopixel': WokwiElement<NeoPixelElement>;
-      'wokwi-pushbutton': WokwiElement<PushbuttonElement>;
-      'wokwi-resistor': WokwiElement<ResistorElement>;
-      'wokwi-membrane-keypad': WokwiElement<MembraneKeypadElement>;
-      'wokwi-potentiometer': WokwiElement<PotentiometerElement>;
-      'wokwi-neopixel-matrix': WokwiElement<NeopixelMatrixElement>;
-      'wokwi-ssd1306': WokwiElement<SSD1306Element>;
-      'wokwi-buzzer': WokwiElement<BuzzerElement>;
-      'wokwi-rotary-dialer': WokwiElement<RotaryDialerElement>;
-      'wokwi-servo': WokwiElement<ServoElement>;
-      'wokwi-dht22': WokwiElement<DHT22Element>;
-      'wokwi-arduino-mega': WokwiElement<ArduinoMegaElement>;
-      'wokwi-arduino-nano': WokwiElement<ArduinoNanoElement>;
-      'wokwi-ds1307': WokwiElement<Ds1307Element>;
-      'wokwi-neopixel-ring': WokwiElement<LEDRingElement>;
-      'wokwi-slide-switch': WokwiElement<SlideSwitchElement>;
-      'wokwi-hc-sr04': WokwiElement<HCSR04Element>;
-      'wokwi-lcd2004': WokwiElement<LCD2004Element>;
-      'wokwi-analog-joystick': WokwiElement<AnalogJoystickElement>;
-      'wokwi-slide-potentiometer': WokwiElement<SlidePotentiometerElement>;
-      'wokwi-ir-receiver': WokwiElement<IRReceiverElement>;
-      'wokwi-ir-remote': WokwiElement<IRRemoteElement>;
-      'wokwi-pir-motion-sensor': WokwiElement<PIRMotionSensorElement>;
-      'wokwi-ntc-temperature-sensor': WokwiElement<NTCTemperatureSensorElement>;
-      'wokwi-heart-beat-sensor': WokwiElement<HeartBeatSensorElement>;
-      'wokwi-tilt-switch': WokwiElement<TiltSwitchElement>;
-      'wokwi-flame-sensor': WokwiElement<FlameSensorElement>;
-      'wokwi-gas-sensor': WokwiElement<GasSensorElement>;
-      'wokwi-franzininho': WokwiElement<FranzininhoElement>;
-      'wokwi-nano-rp2040-connect': WokwiElement<NanoRP2040ConnectElement>;
-      'wokwi-small-sound-sensor': WokwiElement<SmallSoundSensorElement>;
-      'wokwi-big-sound-sensor': WokwiElement<BigSoundSensorElement>;
-      'wokwi-mpu6050': WokwiElement<MPU6050Element>;
-      'wokwi-esp32-devkit-v1': WokwiElement<ESP32DevkitV1Element>;
-      'wokwi-ky-040': WokwiElement<KY040Element>;
-      'wokwi-photoresistor-sensor': WokwiElement<PhotoresistorSensorElement>;
-      'wokwi-rgb-led': WokwiElement<RGBLedElement>;
-      'wokwi-ili9341': WokwiElement<ILI9341Element>;
-      'wokwi-led-bar-graph': WokwiElement<LedBarGraphElement>;
-      'wokwi-microsd-card': WokwiElement<MicrosdCardElement>;
-      'wokwi-dip-switch-8': WokwiElement<DipSwitch8Element>;
-      'wokwi-stepper-motor': WokwiElement<StepperMotorElement>;
-      'wokwi-hx711': WokwiElement<HX711Element>;
-      'wokwi-ks2e-m-dc5': WokwiElement<KS2EMDC5Element>;
-      'wokwi-biaxial-stepper': WokwiElement<BiaxialStepperElement>;
+      SevenSegment: WokwiElement<SevenSegmentElement>;
+      ArduinoUno: WokwiElement<ArduinoUnoElement>;
+      LCD1602: WokwiElement<LCD1602Element>;
+      LED: WokwiElement<LEDElement>;
+      NeoPixel: WokwiElement<NeoPixelElement>;
+      Pushbutton: WokwiElement<PushbuttonElement>;
+      Resistor: WokwiElement<ResistorElement>;
+      MembraneKeypad: WokwiElement<MembraneKeypadElement>;
+      Potentiometer: WokwiElement<PotentiometerElement>;
+      NeopixelMatrix: WokwiElement<NeopixelMatrixElement>;
+      SSD1306: WokwiElement<SSD1306Element>;
+      Buzzer: WokwiElement<BuzzerElement>;
+      RotaryDialer: WokwiElement<RotaryDialerElement>;
+      Servo: WokwiElement<ServoElement>;
+      DHT22: WokwiElement<DHT22Element>;
+      ArduinoMega: WokwiElement<ArduinoMegaElement>;
+      ArduinoNano: WokwiElement<ArduinoNanoElement>;
+      DS1307: WokwiElement<Ds1307Element>;
+      LEDRing: WokwiElement<LEDRingElement>;
+      SlideSwitch: WokwiElement<SlideSwitchElement>;
+      HCSR04: WokwiElement<HCSR04Element>;
+      LCD2004: WokwiElement<LCD2004Element>;
+      AnalogJoystick: WokwiElement<AnalogJoystickElement>;
+      SlidePotentiometer: WokwiElement<SlidePotentiometerElement>;
+      IRReceiver: WokwiElement<IRReceiverElement>;
+      IRRemote: WokwiElement<IRRemoteElement>;
+      PIRMotionSensor: WokwiElement<PIRMotionSensorElement>;
+      NTCTemperatureSensor: WokwiElement<NTCTemperatureSensorElement>;
+      HeartBeatSensor: WokwiElement<HeartBeatSensorElement>;
+      TiltSwitch: WokwiElement<TiltSwitchElement>;
+      FlameSensor: WokwiElement<FlameSensorElement>;
+      GasSensor: WokwiElement<GasSensorElement>;
+      Franzininho: WokwiElement<FranzininhoElement>;
+      NanoRP2040Connect: WokwiElement<NanoRP2040ConnectElement>;
+      SmallSoundSensor: WokwiElement<SmallSoundSensorElement>;
+      BigSoundSensor: WokwiElement<BigSoundSensorElement>;
+      MPU6050: WokwiElement<MPU6050Element>;
+      ESP32DevkitV1: WokwiElement<ESP32DevkitV1Element>;
+      KY040: WokwiElement<KY040Element>;
+      PhotoresistorSensor: WokwiElement<PhotoresistorSensorElement>;
+      RGBLed: WokwiElement<RGBLedElement>;
+      ILI9341: WokwiElement<ILI9341Element>;
+      LedBarGraph: WokwiElement<LedBarGraphElement>;
+      MicrosdCard: WokwiElement<MicrosdCardElement>;
+      DipSwitch8: WokwiElement<DipSwitch8Element>;
+      StepperMotor: WokwiElement<StepperMotorElement>;
+      HX711: WokwiElement<HX711Element>;
+      KS2EMDC5: WokwiElement<KS2EMDC5Element>;
+      BiaxialStepper: WokwiElement<BiaxialStepperElement>;
+      Breadboard: WokwiElement<BreadboardElement>;
+      ShowPins: WokwiElement<ShowPinsElement>;
+      MainBreadboard: WokwiElement<MainBreadboardElement>;
+      MCUBreadboard: WokwiElement<McuBreadboardElement>;
+      Attiny85: WokwiElement<Attiny85Element>;
     }
   }
 }

src/show-pins-element.stories.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit';
+import './show-pins-element';
+
+export default {
+  title: 'Show Pin',
+  component: 'wokwi-show-pins',
+  argTypes: {
+    pinColor: { control: 'color' },
+    pinType: { control: { type: 'select', options: ['circle', 'rect'] } },
+    pinWidth: { control: 'number' },
+    pinHeight: { control: 'number' },
+    pinRadius: { control: 'number' },
+  },
+  args: {
+    pinColor: 'transparent',
+    pinType: 'circle',
+    pinWidth: 10,
+    pinHeight: 10,
+    pinRadius: 10,
+  },
+};
+
+const Template = ({ pinColor, pinType, pinWidth, pinHeight, pinRadius }) => html`<wokwi-show-pins
+  pinColor=${pinColor}
+  pinType=${pinType}
+  pinWidth=${pinWidth}
+  pinHeight=${pinHeight}
+  pinRadius=${pinRadius}
+>
+</wokwi-show-pins>`;
+
+export const Default = Template.bind({});
+Default.args = { pinColor: 'transparent' };