feat: reorganize repo

package.json

@@ -15,21 +15,19 @@
 	},
 	"license": "Apache-2.0",
 	"author": "Neovici Development <dev@neovici.se>",
-	"main": "cosmoz-tabs.js",
+	"main": "src/index.js",
 	"directories": {
 		"test": "test"
 	},
 	"files": [
-		"cosmoz-*.js",
-		"lib/**/*.js"
+		"src/**/*.js"
 	],
 	"scripts": {
 		"lint": "eslint --cache --ext .js .",
 		"lint-tsc": "tsc",
-		"start": "npm run storybook",
+		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"storybook": "start-storybook --node-resolve --watch --open",
 		"storybook:build": "build-storybook",
 		"storybook:deploy": "storybook-to-ghpages",
 		"prepare": "husky install"
@@ -63,19 +61,19 @@
 		"lit-html": "^1.4.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^16.0.0",
-		"@commitlint/config-conventional": "^16.0.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
 		"@neovici/cfg": "^1.11.0",
-		"@open-wc/demoing-storybook": "^2.4.0",
 		"@open-wc/testing": "^2.5.0",
 		"@polymer/iron-list": "^3.1.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.0",
+		"@web/dev-server-storybook": "^0.5.0",
 		"@web/test-runner": "^0.13.18",
-		"husky": "^7.0.0",
+		"husky": "^8.0.0",
 		"semantic-release": "^19.0.0",
-		"sinon": "^13.0.0",
+		"sinon": "^14.0.0",
 		"typescript": "^4.4.0"
 	}
 }

cosmoz-tab.js → src/cosmoz-tab.js

@@ -4,7 +4,7 @@ import {
 	html,
 	component
 } from 'haunted';
-import { useTab } from './lib/use-tab';
+import { useTab } from './use-tab';
 
 /**
 

cosmoz-tabs.js → src/cosmoz-tabs.js

@@ -1,7 +1,7 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
 import { html, component } from 'haunted';
-import { useTabs } from './lib/use-tabs';
-import { style, renderTab } from './lib/render';
+import { useTabs } from './use-tabs';
+import { style, renderTab } from './render';
 import './cosmoz-tab.js';
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';

src/index.js

@@ -0,0 +1 @@
+import './cosmoz-tabs';

stories/cosmoz-tab-card.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'haunted';
 
-import '../cosmoz-tabs';
+import '../src/cosmoz-tabs';
 
 export default {
 	title: 'Card',

stories/cosmoz-tab.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'haunted';
 
-import '../cosmoz-tabs';
+import '../src/cosmoz-tabs';
 
 export default {
 	title: 'Tab',

stories/cosmoz-tabs.stories.js

@@ -1,7 +1,7 @@
 import { html } from 'haunted';
 import { until } from 'lit-html/directives/until.js';
 
-import '../cosmoz-tabs';
+import '../src/cosmoz-tabs';
 import '@polymer/iron-list';
 
 export default {

test/cosmoz-tabs-basic.test.js

@@ -3,7 +3,7 @@ import {
 } from '@open-wc/testing';
 import { spy } from 'sinon';
 
-import '../cosmoz-tabs.js';
+import '../src/cosmoz-tabs.js';
 
 suite('cosmoz-tabs', () => {
 	let tabs;

test/cosmoz-tabs-events.test.js

@@ -9,7 +9,7 @@ import {
 	spy
 } from 'sinon';
 
-import '../cosmoz-tabs.js';
+import '../src/cosmoz-tabs.js';
 
 suite('cosmoz-tabs', () => {
 	let tabs;

test/cosmoz-tabs-hash.test.js

@@ -2,7 +2,7 @@ import {
 	assert, html, fixture, nextFrame
 } from '@open-wc/testing';
 
-import '../cosmoz-tabs.js';
+import '../src/cosmoz-tabs.js';
 
 teardown(() => {
 	window.location.hash = '';

test/cosmoz-tabs-sizing.test.js

@@ -2,7 +2,7 @@ import {
 	assert, html, fixture, nextFrame
 } from '@open-wc/testing';
 import '@polymer/iron-list';
-import '../cosmoz-tabs.js';
+import '../src/cosmoz-tabs.js';
 
 suite('cosmoz-tabs sizing', () => {
 	test('sizes non explicitly sized tabs and list without flex renders max items', async () => {

test/cosmoz-tabs-slot.test.js

@@ -1,35 +1,41 @@
-import {
-	assert, html, fixture, nextFrame
-} from '@open-wc/testing';
-
-import '../cosmoz-tabs.js';
+import { assert, html, fixture, nextFrame } from '@open-wc/testing';
 import { component } from 'haunted';
 
+import '../src/cosmoz-tabs.js';
+
 suiteSetup(() => {
 	if (customElements.get('slot-test')) {
 		return;
 	}
-	customElements.define('slot-test', component(() => html`
-	<cosmoz-tabs>
-		<cosmoz-tab name="tab0" heading="Tab0">1</cosmoz-tab>
-		<slot></slot>
-	</cosmoz-tabs>
-`));
+	customElements.define(
+		'slot-test',
+		component(
+			() => html`
+				<cosmoz-tabs>
+					<cosmoz-tab name="tab0" heading="Tab0">1</cosmoz-tab>
+					<slot></slot>
+				</cosmoz-tabs>
+			`
+		)
+	);
 });
 
 suite('cosmoz-tabs slot', () => {
 	test('collects cosmoz-tabs from slot', async () => {
 		const el = await fixture(html`
-			<slot-test>
-				<cosmoz-tab name="tab1">2</cosmoz-tab>
-				<span name="notatab2">3</span>
-			</slot-test>
-		`),
+				<slot-test>
+					<cosmoz-tab name="tab1">2</cosmoz-tab>
+					<span name="notatab2">3</span>
+				</slot-test>
+			`),
 			tabs = el.shadowRoot.querySelector('cosmoz-tabs');
 		await nextFrame();
 		await nextFrame();
 		tabs.selected = 'tab1';
 		await nextFrame();
-		assert.equal(el.querySelector('cosmoz-tab').getAttribute('is-selected'), '');
+		assert.equal(
+			el.querySelector('cosmoz-tab').getAttribute('is-selected'),
+			''
+		);
 	});
 });

web-dev-server.config.mjs

@@ -0,0 +1,6 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+
+export default {
+	plugins: [storybookPlugin({ type: 'web-components' })],
+	nodeResolve: true
+};