more types, options etc

.github/workflows/publish.yml

@@ -45,3 +45,9 @@ jobs:
         run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Deploy Github Page
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/*.mdx",
+    "../src/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": {
+    "name": "@storybook/web-components-vite",
+    "options": {}
+  },
+  "docs": {
+    autodocs: true,
+    defaultName: 'Documentation'
+  }
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: false,
+})

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,28 @@
+import { createLitRenderer, createArgsExtractor } from 'cem-plugin-better-lit-types/storybook'
+import { setCustomElementsManifest } from '@storybook/web-components'
+import customElements from '../custom-elements.json'
+
+setCustomElementsManifest(customElements);
+
+export const parameters = {
+  docs: {
+    isFullscreen: true,
+    showNav: false,
+    extractArgTypes: createArgsExtractor(customElements),
+  },
+  backgrounds: {
+    default: 'light',
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const render = createLitRenderer({
+  wrapSlots: true,
+  joinArrays: true
+})

custom-elements-manifest.config.mjs

@@ -0,0 +1,7 @@
+import { betterLitTypes } from 'cem-plugin-better-lit-types'
+
+export default {
+  globs: ['src/monaco-component.ts'],
+  plugins: [betterLitTypes],
+  litelement: true,
+}