docs(storybook): add formatter function for web components

This function handles the faulty handling of unnamed slots (default slots) in Storybook by assigning them a name that can then be targeted as a prop in the stories

Author: iOvergaard

.storybook/preview.js

@@ -1,8 +1,10 @@
-import { setCustomElements } from '@storybook/web-components';
-import customElements from '../custom-elements.json';
 import '../packages/uui-css/lib/uui-css.css';
 import 'element-internals-polyfill';
 
+import { setCustomElements } from '@storybook/web-components';
+
+import customElements from '../custom-elements.json';
+
 const sort = (a, b) => {
   if (a[1].name === 'Overview') {
     return 0;
@@ -44,4 +46,24 @@ export const parameters = {
   },
 };
 
+WebComponentFormatter(customElements);
+
 setCustomElements(customElements);
+
+function WebComponentFormatter(customElements) {
+  for (let tag of customElements.tags || []) {
+    for (let slot of tag.slots || []) {
+      // Replace the name of the default slot so Storybook will show it
+      if (typeof slot.name === 'string' && slot.name.length === 0) {
+        slot.name = 'slot';
+      }
+
+      // Set type of slots
+      if (typeof slot.type === 'undefined' || slot.type.length === 0) {
+        slot.type = 'HTMLElement';
+      }
+    }
+  }
+
+  return customElements;
+}