Include widgets in README, setup storybook

2026-04-15 04:12:32 +02:00
parent 8b1f22d573
commit 299036eced
12 changed files with 4079 additions and 1 deletions
@@ -0,0 +1,11 @@
+export default {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
@@ -0,0 +1,66 @@
+import { html } from 'lit';
+
+import '../stories/preview.css';
+
+if (!window.customElements.get('loading-element')) {
+  class LoadingElement extends HTMLElement {
+    connectedCallback() {
+      if (this.shadowRoot) return;
+
+      const root = this.attachShadow({ mode: 'open' });
+      root.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .spinner {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            border: 2px solid rgba(34, 211, 238, 0.25);
+            border-top-color: rgba(34, 211, 238, 1);
+            animation: spin 0.8s linear infinite;
+          }
+
+          @keyframes spin {
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        </style>
+        <div class="spinner" aria-hidden="true"></div>
+      `;
+    }
+  }
+
+  window.customElements.define('loading-element', LoadingElement);
+}
+
+export const parameters = {
+  layout: 'centered',
+  controls: {
+    expanded: true,
+  },
+  backgrounds: {
+    default: 'slate',
+    values: [
+      { name: 'slate', value: '#0f1720' },
+      { name: 'paper', value: '#f5efe4' },
+    ],
+  },
+};
+
+export const decorators = [
+  (story) => {
+    return html`
+      <div class="story-shell">
+        <div class="story-surface">${story()}</div>
+      </div>
+    `;
+  },
+];