fix: storybook readme addon is not showing the readme content

.storybook/main.js

@@ -1,5 +1,9 @@
 const remarkGfm = require('remark-gfm').default;
 const tsconfigPaths = require('vite-tsconfig-paths').default;
+
+/**
+ * @type {import('@storybook/web-components-vite').StorybookConfig}
+ */
 module.exports = {
   stories: [
     '../packages/**/*.story.ts',
@@ -13,7 +17,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-a11y',
-    '../storyhelpers/storybook-readme/preset.js',
+    '../storyhelpers/storybook-readme',
     {
       name: '@storybook/addon-docs',
       options: {

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -6,6 +6,8 @@ import '@umbraco-ui/uui-icon-registry-essential/lib';
 
 import { html } from 'lit';
 
+import readme from '../README.md?raw';
+
 export default {
   id: 'uui-action-bar',
   title: 'Buttons/Action Bar',
@@ -28,6 +30,11 @@ export default {
       options: ['default', 'positive', 'warning', 'danger'],
     },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const buttons = ['copy', 'remove', 'delete'];

packages/uui-avatar-group/lib/uui-avatar-group.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Avatar/Avatar Group',
@@ -10,6 +11,11 @@ export default {
   args: {
     limit: 0,
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 export const AAAOverview: Story = props => html`

packages/uui-avatar/lib/uui-avatar.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Avatar/Avatar',
@@ -14,6 +15,11 @@ export default {
   argTypes: {
     slot: { control: { type: 'text' } },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
   // argTypes: {
   //   'img-src': { table: { disable: true } },
   //   'img-srcset': { table: { disable: true } },

packages/uui-badge/lib/uui-badge.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Badge',
@@ -30,6 +31,11 @@ export default {
       control: { type: 'text' },
     },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const Template: Story = props => html` <uui-icon-registry-essential>

packages/uui-box/lib/uui-box.story.ts

@@ -2,11 +2,17 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Layout/Box',
   component: 'uui-box',
   id: 'uui-box',
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const Template: Story = () => html`

packages/uui-breadcrumbs/lib/uui-breadcrumbs.story.ts

@@ -2,11 +2,17 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Buttons/Breadcrumbs',
   id: 'uui-breadcrumbs',
   component: 'uui-breadcrumbs',
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const links = [

packages/uui-button-group/lib/uui-button-group.story.ts

@@ -1,6 +1,7 @@
 import '.';
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Buttons/Button Group',
@@ -24,6 +25,11 @@ export default {
       options: ['default', 'positive', 'warning', 'danger'],
     },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];

packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts

@@ -4,12 +4,16 @@ import { Story } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
 
 import { GetRandomUmbracoWord } from '../../../storyhelpers/UmbracoWordGenerator';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-button-inline-create',
   title: 'Buttons/Button Inline Create',
   component: 'uui-button-inline-create',
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     docs: {
       source: {
         code: `<uui-button-inline-create></uui-button-inline-create>`,

packages/uui-button/lib/uui-button.story.ts

@@ -1,11 +1,14 @@
 import '.';
 import '@umbraco-ui/uui-badge/lib';
 import '@umbraco-ui/uui-icon/lib';
+import '@umbraco-ui/uui-loader-circle/lib';
 
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 import { UUIButtonElement } from './uui-button.element';
 
+import readme from '../README.md?raw';
+
 export default {
   title: 'Buttons/Button',
   component: 'uui-button',
@@ -55,6 +58,11 @@ export default {
     '--uui-button-background-color-disabled': { control: { type: 'color' } },
     '--uui-button-contrast-disabled': { control: { type: 'color' } },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 } as Meta<UUIButtonElement>;
 
 const cssProps = [

packages/uui-card-content-node/lib/uui-card-content-node.story.ts

@@ -3,6 +3,7 @@ import '@umbraco-ui/uui-icon-registry-essential/lib';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Cards/Content Node',
@@ -18,6 +19,11 @@ export default {
   decorators: [
     (Story: any) => html`<div style="width: 300px;">${Story()}</div>`,
   ],
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 /* TODO: we should make some kind of component for this data layout */

packages/uui-card-media/lib/uui-card-media.story.ts

@@ -2,12 +2,16 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-card-media',
   title: 'Displays/Cards/Media',
   component: 'uui-card-media',
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     chromatic: { disableSnapshot: true },
   },
   decorators: [

packages/uui-card-user/lib/uui-card-user.story.ts

@@ -1,6 +1,7 @@
 import { StoryFn } from '@storybook/web-components';
 import { html } from 'lit';
 import '@umbraco-ui/uui-avatar/lib';
+import readme from '../README.md?raw';
 
 import './index';
 
@@ -14,6 +15,11 @@ export default {
   decorators: [
     (Story: any) => html`<div style="width: 200px;">${Story()}</div>`,
   ],
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const cardContent = html`

packages/uui-card/lib/uui-card.story.ts

@@ -1,10 +1,16 @@
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-card',
   title: 'Displays/Cards/Card',
   component: 'uui-card',
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const Template: Story = () => html`

packages/uui-caret/lib/uui-caret.story.ts

@@ -2,12 +2,16 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-caret',
   title: 'Symbols/Caret',
   component: 'uui-caret',
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     docs: {
       source: {
         code: `<uui-caret></uui-caret>`,

packages/uui-checkbox/lib/uui-checkbox.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Inputs/Checkbox',
@@ -21,6 +22,9 @@ export default {
     controls: {
       exclude: ['change'],
     },
+    readme: {
+      markdown: readme,
+    },
     docs: {
       source: {
         code: `<uui-checkbox label="Checkbox"></uui-checkbox>`,

packages/uui-color-area/lib/uui-color-area.story.ts

@@ -3,6 +3,7 @@ import '.';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { UUIColorAreaElement } from './uui-color-area.element';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-color-area',
@@ -12,6 +13,9 @@ export default {
     value: { control: 'color' },
   },
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     docs: {
       source: {
         code: `<uui-color-area></uui-color-area>`,

packages/uui-color-picker/lib/uui-color-picker.story.ts

@@ -13,6 +13,7 @@ import '.';
 import { Meta, StoryFn } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { UUIColorPickerElement } from './uui-color-picker.element';
+import readme from '../README.md?raw';
 
 const defaultSwatches = [
   '#d0021b',
@@ -43,6 +44,9 @@ export default {
     format: 'hex',
   },
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     actions: {
       handles: ['change'],
     },

packages/uui-color-slider/lib/uui-color-slider.story.ts

@@ -3,6 +3,7 @@ import '.';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { UUIColorSliderElement } from './uui-color-slider.element';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-color-slider',
@@ -20,6 +21,9 @@ export default {
     color: '',
   },
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     docs: {
       source: {
         code: `<uui-color-slider></uui-color-slider>`,

packages/uui-color-swatch/lib/uui-color-swatch.story.ts

@@ -2,13 +2,19 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';
+import readme from '../README.md?raw';
 
 const value = '#d0021b';
 
 export default {
   id: 'uui-color-swatch',
   title: 'Inputs/Color/Color Swatch',
   component: 'uui-color-swatch',
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 export const Overview: Story = () =>