feat(Avatar): Add toc and autodocs to preview somponent

.storybook/main.ts

@@ -12,7 +12,11 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: '@storybook/html-vite',
-    options: {},
+    options: { },
+  },
+  async viteFinal(config, options) {
+    config.assetsInclude =  ['**/*.md']
+    return config;
   },
   docs: {
     autodocs: true,

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script type="module" src="./didroom-components/didroom-components.esm.js"></script>

.storybook/preview.ts

@@ -11,8 +11,12 @@ const preview: Preview = {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
+        select: /size/i,
       },
     },
+    docs: {
+      toc: true,
+    }
   },
   decorators: [
   withThemeByClassName<HtmlRenderer>({

package.json

@@ -25,21 +25,24 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "storybook dev -p 6006 -s dist",
+    "build-storybook": "storybook build --docs -s dist"
   },
   "dependencies": {
     "@stencil/core": "^4.7.0",
+    "storybook": "^7.6.10",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
     "@ionic/core": "^7.6.5",
     "@stencil/sass": "^3.0.8",
     "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-docs": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-notes": "^5.3.21",
     "@storybook/addon-themes": "^7.6.10",
     "@storybook/blocks": "^7.6.10",
     "@storybook/html": "^7.6.10",
@@ -53,7 +56,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "stencil-tailwind-plugin": "^1.8.0",
-    "storybook": "^7.6.10",
     "tailwindcss": "^3.4.1"
   },
   "license": "MIT"