chore: auto import show-pins-element

useful for debugging pinInfo

Author: urish

.storybook/preview.js

@@ -6,6 +6,8 @@ export const parameters = {
 import { configure, 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);
 

CONTRIBUTING.md

@@ -69,20 +69,15 @@ When working on the `pinInfo` property, it is often useful to visually see the
 pins that you define. To see the pin locations, add the `<wokwi-show-pins>`
 utility element to your story:
 
-1. Import the element definition into your story, by adding this line at the top
-   of the story file:
-   ```
-   import './utils/show-pins-element';
-   ```
-2. Wrap your element with the <wokwi-show-pins> element, e.g.
+1. Wrap your element with the <wokwi-show-pins> element, e.g.
    ```
    export const HCSR04 = () => html`
      <wokwi-show-pins>
        <wokwi-hc-sr04></wokwi-hc-sr04>
      </wokwi-show-pins>
    `;
    ```
-3. When you are happy with the pin definition, please remove the `<wokwi-show-pins>`
+2. When you are happy with the pin definition, please remove the `<wokwi-show-pins>`
    from your story. It is only a debugging tool, and shouldn't be present in the final story.
 
 ## Video Tutorial and Blog Post