diff --git a/ROADMAP.md b/ROADMAP.md
index 2f1ffa0..4fc7838 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -6,6 +6,8 @@
- StoryBook
- Lit
+- Midway Hooks
+- Midway Serverless
## Hydration(Stage 4)
diff --git a/packages/lit-app/.editorconfig b/packages/lit-app/.editorconfig
new file mode 100644
index 0000000..c8c2d2a
--- /dev/null
+++ b/packages/lit-app/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/packages/lit-app/.gitignore b/packages/lit-app/.gitignore
new file mode 100644
index 0000000..5c4d921
--- /dev/null
+++ b/packages/lit-app/.gitignore
@@ -0,0 +1,24 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+
+storybook-static
+custom-elements.json
diff --git a/packages/lit-app/.storybook/main.js b/packages/lit-app/.storybook/main.js
new file mode 100644
index 0000000..93ff33d
--- /dev/null
+++ b/packages/lit-app/.storybook/main.js
@@ -0,0 +1,3 @@
+module.exports = {
+ stories: ['../**/out-tsc/stories/*.stories.{js,md,mdx}'],
+};
diff --git a/packages/lit-app/.storybook/server.mjs b/packages/lit-app/.storybook/server.mjs
new file mode 100644
index 0000000..9e91906
--- /dev/null
+++ b/packages/lit-app/.storybook/server.mjs
@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+ ...baseConfig,
+ open: '/',
+ plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});
diff --git a/packages/lit-app/LICENSE b/packages/lit-app/LICENSE
new file mode 100644
index 0000000..232d946
--- /dev/null
+++ b/packages/lit-app/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 lit-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/lit-app/README.md b/packages/lit-app/README.md
new file mode 100644
index 0000000..df8ad47
--- /dev/null
+++ b/packages/lit-app/README.md
@@ -0,0 +1,30 @@
+
+
+
+## Open-wc Starter App
+
+[](https://github.com/open-wc)
+
+## Quickstart
+
+To get started:
+
+```sh
+npm init @open-wc
+# requires node 10 & npm 6 or higher
+```
+
+## Scripts
+
+- `start` runs your app for development, reloading on file changes
+- `start:build` runs your app after it has been built using the build command
+- `build` builds your app and outputs it in your `dist` directory
+- `test` runs your test suite with Web Test Runner
+- `lint` runs the linter for your project
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
\ No newline at end of file
diff --git a/packages/lit-app/assets/open-wc-logo.svg b/packages/lit-app/assets/open-wc-logo.svg
new file mode 100644
index 0000000..c3ec9a5
--- /dev/null
+++ b/packages/lit-app/assets/open-wc-logo.svg
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
diff --git a/packages/lit-app/index.html b/packages/lit-app/index.html
new file mode 100644
index 0000000..fb0f346
--- /dev/null
+++ b/packages/lit-app/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ lit-app
+
+
+
+
+
+ LinbuduLab Lit Component Starter
+ ${this.title}
+
+ Edit src/LitApp.ts and save to reload.
+
+ Code examples
+
+
+
+
+ `;
+ }
+}
diff --git a/packages/lit-app/src/lit-app.ts b/packages/lit-app/src/lit-app.ts
new file mode 100644
index 0000000..b0d4e64
--- /dev/null
+++ b/packages/lit-app/src/lit-app.ts
@@ -0,0 +1,3 @@
+import { LitApp } from './LitApp.js';
+
+customElements.define('lit-app', LitApp);
diff --git a/packages/lit-app/stories/lit-app.stories.ts b/packages/lit-app/stories/lit-app.stories.ts
new file mode 100644
index 0000000..e33949f
--- /dev/null
+++ b/packages/lit-app/stories/lit-app.stories.ts
@@ -0,0 +1,30 @@
+import { html, TemplateResult } from 'lit';
+import '../src/lit-app.js';
+
+export default {
+ title: 'LitApp',
+ component: 'lit-app',
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+};
+
+interface Story {
+ (args: T): TemplateResult;
+ args?: Partial;
+ argTypes?: Record;
+}
+
+interface ArgTypes {
+ title?: string;
+ backgroundColor?: string;
+}
+
+const Template: Story = ({ title, backgroundColor = 'white' }: ArgTypes) => html`
+
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i lit-component
+```
+
+## Usage
+
+```html
+
+
+
+
+
+
+
diff --git a/packages/lit-component/package.json b/packages/lit-component/package.json
new file mode 100644
index 0000000..4fd67f9
--- /dev/null
+++ b/packages/lit-component/package.json
@@ -0,0 +1,86 @@
+{
+ "name": "lit-component",
+ "description": "Webcomponent lit-component following open-wc recommendations",
+ "license": "MIT",
+ "author": "lit-component",
+ "version": "0.0.0",
+ "main": "dist/src/index.js",
+ "module": "dist/src/index.js",
+ "exports": {
+ ".": "./dist/src/index.js",
+ "./lit-component.js": "./dist/src/lit-component.js"
+ },
+ "scripts": {
+ "analyze": "cem analyze --litelement",
+ "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+ "build": "tsc && npm run analyze -- --exclude dist",
+ "prepublish": "tsc && npm run analyze -- --exclude dist",
+ "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+ "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+ "test": "tsc && wtr --coverage",
+ "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+ "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+ "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+ },
+ "dependencies": {
+ "lit": "^2.0.2"
+ },
+ "devDependencies": {
+ "@custom-elements-manifest/analyzer": "^0.4.17",
+ "@open-wc/eslint-config": "^4.3.0",
+ "@open-wc/testing": "next",
+ "@typescript-eslint/eslint-plugin": "^4.33.0",
+ "@typescript-eslint/parser": "^4.33.0",
+ "@web/dev-server": "^0.1.28",
+ "@web/dev-server-storybook": "next",
+ "@web/test-runner": "next",
+ "concurrently": "^5.3.0",
+ "eslint": "^7.32.0",
+ "eslint-config-prettier": "^8.3.0",
+ "husky": "^4.3.8",
+ "lint-staged": "^10.5.4",
+ "prettier": "^2.4.1",
+ "tslib": "^2.3.1",
+ "typescript": "^4.5.2"
+ },
+ "customElements": "custom-elements.json",
+ "eslintConfig": {
+ "parser": "@typescript-eslint/parser",
+ "extends": [
+ "@open-wc",
+ "prettier"
+ ],
+ "plugins": [
+ "@typescript-eslint"
+ ],
+ "rules": {
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "error"
+ ],
+ "import/no-unresolved": "off",
+ "import/extensions": [
+ "error",
+ "always",
+ {
+ "ignorePackages": true
+ }
+ ]
+ }
+ },
+ "prettier": {
+ "singleQuote": true,
+ "arrowParens": "avoid"
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.ts": [
+ "eslint --fix",
+ "prettier --write"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/packages/lit-component/src/LitComponent.ts b/packages/lit-component/src/LitComponent.ts
new file mode 100644
index 0000000..62bc085
--- /dev/null
+++ b/packages/lit-component/src/LitComponent.ts
@@ -0,0 +1,28 @@
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class LitComponent extends LitElement {
+ static styles = css`
+ :host {
+ display: block;
+ padding: 25px;
+ color: var(--lit-component-text-color, #000);
+ }
+ `;
+
+ @property({ type: String }) title = 'Hey there';
+
+ @property({ type: Number }) counter = 5;
+
+ __increment() {
+ this.counter += 1;
+ }
+
+ render() {
+ return html`
+ LinbuduLab Lit Component Starter
+ ${this.title} Nr. ${this.counter}!
+ increment
+ `;
+ }
+}
diff --git a/packages/lit-component/src/index.ts b/packages/lit-component/src/index.ts
new file mode 100644
index 0000000..7d1d59c
--- /dev/null
+++ b/packages/lit-component/src/index.ts
@@ -0,0 +1 @@
+export { LitComponent } from './LitComponent.js';
diff --git a/packages/lit-component/src/lit-component.ts b/packages/lit-component/src/lit-component.ts
new file mode 100644
index 0000000..0677a57
--- /dev/null
+++ b/packages/lit-component/src/lit-component.ts
@@ -0,0 +1,3 @@
+import { LitComponent } from './LitComponent.js';
+
+window.customElements.define('lit-component', LitComponent);
diff --git a/packages/lit-component/stories/index.stories.ts b/packages/lit-component/stories/index.stories.ts
new file mode 100644
index 0000000..c0f125c
--- /dev/null
+++ b/packages/lit-component/stories/index.stories.ts
@@ -0,0 +1,60 @@
+import { html, TemplateResult } from 'lit';
+import '../src/lit-component.js';
+
+export default {
+ title: 'LitComponent',
+ component: 'lit-component',
+ argTypes: {
+ title: { control: 'text' },
+ counter: { control: 'number' },
+ textColor: { control: 'color' },
+ },
+};
+
+interface Story {
+ (args: T): TemplateResult;
+ args?: Partial;
+ argTypes?: Record;
+}
+
+interface ArgTypes {
+ title?: string;
+ counter?: number;
+ textColor?: string;
+ slot?: TemplateResult;
+}
+
+const Template: Story = ({
+ title = 'Hello world',
+ counter = 5,
+ textColor,
+ slot,
+}: ArgTypes) => html`
+
+ ${slot}
+
+`;
+
+export const Regular = Template.bind({});
+
+export const CustomTitle = Template.bind({});
+CustomTitle.args = {
+ title: 'My title',
+};
+
+export const CustomCounter = Template.bind({});
+CustomCounter.args = {
+ counter: 123456,
+};
+
+export const SlottedContent = Template.bind({});
+SlottedContent.args = {
+ slot: html`Slotted content
`,
+};
+SlottedContent.argTypes = {
+ slot: { table: { disable: true } },
+};
diff --git a/packages/lit-component/test/lit-component.test.ts b/packages/lit-component/test/lit-component.test.ts
new file mode 100644
index 0000000..4cf1c1d
--- /dev/null
+++ b/packages/lit-component/test/lit-component.test.ts
@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { LitComponent } from '../src/LitComponent.js';
+import '../src/lit-component.js';
+
+describe('LitComponent', () => {
+ it('has a default title "Hey there" and counter 5', async () => {
+ const el = await fixture(html`(html`(html`(html` 
+