chore: update storybook and tests

.storybook/main.js

@@ -1,4 +1,3 @@
 module.exports = {
-  addons: ['storybook-prebuilt/addon-knobs/register.js'],
   stories: ['../stories/**/*.stories.{js,mdx}'],
 };

stories/cosmoz-image-viewer.stories.js

@@ -1,57 +1,48 @@
+/* eslint-disable import/group-exports */
 import { html } from 'lit-html';
-import {
-	withKnobs, withWebComponentsKnobs, button
-} from '@open-wc/demoing-storybook';
 import '../cosmoz-image-viewer.js';
 import { images } from './data.js';
 
-const story = {
-		title: 'Cosmoz Image Viewer',
-		component: 'cosmoz-image-viewer',
-		decorators: [withKnobs, withWebComponentsKnobs]
-	},
-	basic = () => html`
+export default {
+	title: 'Cosmoz Image Viewer',
+	component: 'cosmoz-image-viewer',
+};
+
+export const Basic = () => html`
+	<cosmoz-image-viewer
+		show-detach
+		show-fullscreen
+		show-page-number
+		show-nav
+		loop
+		.images=${images}
+	></cosmoz-image-viewer>
+`;
+
+export const Issue21 = () => {
+	const images1 = [
+			'stories/images/stockholm.jpg',
+			'stories/images/strasbourg.jpg',
+		],
+		images2 = ['stories/images/cosmos1.jpg', 'stories/images/cosmos2.jpg'];
+	return html`
 		<cosmoz-image-viewer
-			.images="${ images }"
 			show-detach
 			show-fullscreen
 			show-page-number
 			show-nav
 			loop
-		></cosmoz-image-viewer>	
-	`,
-	issue21 = () => {
-		const
-			images1 = [
-				'stories/images/stockholm.jpg',
-				'stories/images/strasbourg.jpg'
-			],
-			images2 = [
-				'stories/images/cosmos1.jpg',
-				'stories/images/cosmos2.jpg'
-			];
-
-		button('Switch images', () => {
-			const ciw = document.querySelector(story.component),
-				newImages = ciw.images === images1 ? images2 : images1;
-			ciw.images = newImages;
-			return false;
-		});
-
-		return html`
-			<cosmoz-image-viewer
-				.images=${ images1 }
-				show-detach
-				show-fullscreen
-				show-page-number
-				show-nav
-				loop 
-			></cosmoz-image-viewer>
-		`;
-	};
-
-export {
-	story as default,
-	basic,
-	issue21
+			.images=${images1}
+		></cosmoz-image-viewer>
+		<button
+			@click=${(e) => {
+				const ciw = e.target.previousElementSibling,
+					newImages = ciw.images === images1 ? images2 : images1;
+				ciw.images = newImages;
+				return false;
+			}}
+		>
+			Switch images
+		</button>
+	`;
 };

stories/haunted-pan-zoom.stories.js

@@ -1,30 +1,25 @@
 import { html } from 'lit-html';
-import {
-	withKnobs, boolean, number
-} from '@open-wc/demoing-storybook';
 import '../cosmoz-image-viewer.js';
 
-const story = {
-		title: 'Cosmoz Image Viewer',
-		component: 'haunted-pan-zoom',
-		decorators: [withKnobs]
-	},
-	haunted = () => {
-		const disabled = boolean('Disabled', false),
-			height = number('Height', 400),
-			zoomStiffness = number('Zoom stiffness', 0.3),
-			panStiffness = number('Pan stiffness', 1.0);
-		return html`
-            <haunted-pan-zoom src="stories/images/a_size.png"
-                .disabled=${ disabled }
-                style="height: ${ height }px;"
-                .zoomStiffness=${ zoomStiffness }
-                .panStiffness=${ panStiffness }>
-            </haunted-pan-zoom>
-        `;
-	};
+export default {
+	title: 'Pan Zoom',
+	component: 'haunted-pan-zoom',
+};
+const Template = ({ disabled, height, zoomStiffness, panStiffness }) => html`
+	<haunted-pan-zoom
+		src="stories/images/a_size.png"
+		style="height: ${height}px;"
+		?disabled=${disabled}
+		.zoomStiffness=${zoomStiffness}
+		.panStiffness=${panStiffness}
+	>
+	</haunted-pan-zoom>
+`;
 
-export {
-	story as default,
-	haunted
+export const PanZoom = Template.bind({});
+PanZoom.args = {
+	disabled: false,
+	height: 400,
+	zoomStiffness: 0.3,
+	panStiffness: 1,
 };