migrate other components + add docs

.devcontainer.json

@@ -12,7 +12,8 @@
         "EditorConfig.EditorConfig",
         "esbenp.prettier-vscode",
         "runem.lit-plugin",
-        "GitHub.copilot"
+        "GitHub.copilot",
+        "unifiedjs.vscode-mdx"
       ]
     }
   },

.storybook/main.ts

@@ -1,16 +1,14 @@
-import { StorybookConfig } from "@storybook/web-components-vite";
+import { StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
-  stories: [
-    "../src/**/*.stories.ts",
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.ts'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials'
   ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
   framework: {
-    name: "@storybook/web-components-vite",
+    name: '@storybook/web-components-vite',
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  }
 };
 export default config;

.storybook/preview.ts

@@ -1,17 +1,31 @@
 import { Preview } from '@storybook/web-components';
-import { html } from 'lit-html';
-import '../src/components/main';
+import { html as beautifyHtml } from 'js-beautify';
 import '../src';
 
 const preview: Preview = {
-  decorators: [
-    (story) =>
-      html`<main is="bt-main" style="height: 100vh; padding: 1rem;">
-        ${story()}
-      </main>`,
-  ],
   parameters: {
     layout: 'fullscreen',
+    viewMode: 'docs',
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+      source: {
+        transform: (source) => {
+          const sourceWithoutDecorators = source
+            .replace(/<div><\/div>/g, '')
+            .replace(/^\s*\n/gm, '')
+            .match(/^<main data-name="main=decorator"[^>]*?>([\s\S]*?)<\/main>$/);
+          const formattedSource = beautifyHtml(
+            sourceWithoutDecorators ? sourceWithoutDecorators[1] : source,
+            {
+              indent_size: 2,
+            },
+          );
+          return formattedSource;
+        },
+      },
+    },
   },
 };
 

TODO.md

@@ -1,13 +1,3 @@
-- add badge
-- add button
 - add button group
-- add header
 - add header menu
-- add heading
-- add loader
-- add main
-- add notification
-- add notifications
-- add number input
-- add table
 - add text