storybook setup and styling

src/Umbraco.Web.UI.Client/.storybook/preview-body.html

@@ -0,0 +1,4 @@
+<script>
+	document.body.classList.add('uui-font');
+	document.body.classList.add('uui-text');
+</script>

src/Umbraco.Web.UI.Client/.storybook/preview-head.html

@@ -0,0 +1,22 @@
+<style>
+	body {
+		padding: 0px !important;
+	}
+</style>
+
+<script>
+	(function () {
+		window.addEventListener('load', () => {
+			var body = document.querySelector('body');
+			window.addEventListener('keydown', (e) => {
+				if (e.ctrlKey === true && e.key === 'g') {
+					if (body.hasAttribute('baseline-grid')) {
+						body.removeAttribute('baseline-grid');
+					} else {
+						body.setAttribute('baseline-grid', '');
+					}
+				}
+			});
+		});
+	})();
+</script>

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -1,9 +1,12 @@
+import '@umbraco-ui/uui-css/dist/uui-css.css';
+import '@umbraco-ui/uui';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+};

src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts

@@ -1,9 +1,11 @@
 import { Story, Meta } from '@storybook/web-components';
-import { html } from 'lit';
+import { html } from 'lit-html';
 import './installer.element';
 
 export default {
 	title: 'Installer/Installer',
+	component: 'umb-installer',
+	id: 'installer',
 } as Meta;
 
 const Template: Story = () => html`<umb-installer></umb-installer>`;

src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts

@@ -1,5 +1,5 @@
 import { Story, Meta } from '@storybook/web-components';
-import { html } from 'lit';
+import { html } from 'lit-html';
 import './upgrader.element';
 
 export default {