deps(Storybook): Storybook 8 Upgrade (#889)

* remove storybook

* install storybook 8

* add umbraco text styling

* Fix form control mixin

* add new web component analyzer

* add custom elements

* add autodocs

* cleanup button

* button stories

* fix preview

* css classes

* add spread directive

* more button stories

* add size story

* more button stories

* button story

* action bar stories

* add folder

* avatar stories

* simple import

* avatar group

* exclude decorators from source

* badge wip

* fix icon registry setup

* fix badge attention type

* remove unused import

* badge stories

* formcontrolmixin mdx

* add id

* uui box wip

* fix web component formatter

* uui box

* breadcrumbs

* button group

* button group

* inline button create

* uui card wip

* go back to old component analyzer

* remove events from spread directive

* uui card

* card block type

* renderSlots helper

* content node card

* card media

* card user

* caret

* filter out slots

* js docs

* add slot to slot names

* add rendering slots from args in renderSlots

* cleanup and update render slots to add newlines in the start and after slots

* checkbox init

* checkbox

* Prevent false positives in renderSlots

* Prevent false positives in spread

* color area

* color picker

* color slider

* add event to all event names to prevent them from overriding properties with same name

* color swatch

* color swatches

* fix jsdocs types

* fix ts configs

* combobox init

* combobox wip

* auto format source

* combobox

* combobox list

* dialog and dialog layout

* file dropzone

* file preview

* revert pristine changes in formcontrolmixin

* form

* form layout

* add missing import

* form validation message

* icon

* icon registry mdx

* icon registry essential

* icon registry essential

* input

* input file

* input lock

* input password

* render slots

* shortcuts

* label

* loaders

* menu item

* modal

* pagination

* popover

* popover container

* progress bar

* radio

* range slider

* ref

* ref

* ref list

* ref node

* ref node data type

* ref node document type

* ref node form

* ref node member

* ref node package

* ref node user

* scroll container

* select

* slider

* symbol expand

* symbol file dropzone

* symbol file thumbnail

* symbol file

* symbol folder

* symbol lock

* symbol more

* symbol sort

* table

* table row

* table cell

* clean

* tabs

* tag

* textarea

* toast notification

* toast notification container

* toast notification layout

* toggle

* visually hidden

* css

* css stuff

* add readme

* add readme

* use old package lock

* fix package.json

* cleanup

* fix lint for storybook

* add theme

* combine new and old mdx (remove new part of name)

* add stories from stories folder

* include the stories

* fix padding

* update to storybook 8.3.5

* add missing readonly story

* add missing import

* add a11y addon

* fix: override lit version

* fix uui icon build

* chore: npm dedupe

* update button stories

* chore: mark property as readonly

* build(deps-dev): update chromatic to 11.12.5

* chore: remove old story files

* chore: rename stories to .story

* chore: use .story.ts files

* chore: correct imports to .story.ts

* feat: update theme

* docs: include 'images' in storybook output

* chore: remove uncommented code

* update packageManager field

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: JesmoDev

.gitignore

@@ -38,3 +38,5 @@ out-css
 
 # old source
 /src
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: [
+    '../packages/**/*.mdx',
+    '../packages/**/*.story.@(js|jsx|mjs|ts|tsx)',
+    '../stories/**/*.story.@(js|jsx|mjs|ts|tsx)',
+  ],
+  staticDirs: ['./images'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    '../storyhelpers/storybook-readme',
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+};
+export default config;

.storybook/main.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import umbracoTheme from './umbraco-theme';
 
 addons.setConfig({

.storybook/manager.js

@@ -1,40 +1,41 @@
+import {
+  setCustomElementsManifest,
+  type Preview,
+} from '@storybook/web-components';
 import '../packages/uui-css/lib/uui-css.css';
-import 'element-internals-polyfill';
-
-import { setCustomElements } from '@storybook/web-components';
-
 import customElements from '../custom-elements.json';
+import { html } from 'lit';
 
-export const parameters = {
-  layout: 'padded',
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)/i,
-      date: /Date$/,
+import '@umbraco-ui/uui-icon-registry-essential/lib';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
     },
-  },
-  docs: {
-    source: { state: 'open' },
-  },
-  options: {
-    method: 'alphabetical',
-    storySort: (a, b) => {
-      //NOTE: This has to be an inline function for some reason
-      if (a.title === 'Overview') {
-        return 0;
-      }
-      if (b.title === 'Overview') {
-        return 1;
-      }
-      return a.title > b.title;
+    docs: {
+      source: {
+        excludeDecorators: true,
+        format: 'html', // see storybook docs for more info on this format https://storybook.js.org/docs/api/doc-blocks/doc-block-source#format
+      },
     },
   },
+  tags: ['autodocs'],
+
+  decorators: [
+    story => {
+      return html`<uui-icon-registry-essential class="uui-font uui-text"
+        >${story()}</uui-icon-registry-essential
+      >`;
+    },
+  ],
 };
 
 WebComponentFormatter(customElements);
-
-setCustomElements(customElements);
+setCustomElementsManifest(customElements);
 
 function WebComponentFormatter(customElements) {
   for (let tag of customElements.tags || []) {
@@ -59,19 +60,19 @@ function WebComponentFormatter(customElements) {
       }
     }
 
-    // Find all names of properties
-    const propertyNames = (tag.properties || []).map(p => p.name);
+    // add 'Event' to the name of all events
+    for (let event of tag.events || []) {
+      event.name = `${event.name} event`;
+    }
 
     // Run through all slots to clean them up a bit
     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';
-      }
-
-      // If the slot has the same name as a property, then add the word 'slot' to the name
-      // Bug reported to Storybook here: https://github.com/storybookjs/storybook/issues/17733
-      if (propertyNames.includes(slot.name)) {
+      } else {
+        // Add slot to the name. This will allow us to filter out slots in various situations. Example the spread directive.
+        // Bug reported to Storybook here: https://github.com/storybookjs/storybook/issues/17733
         slot.name = `${slot.name} slot`;
       }
 
@@ -84,3 +85,5 @@ function WebComponentFormatter(customElements) {
 
   return customElements;
 }
+
+export default preview;

.storybook/preview-body.html

@@ -26,7 +26,12 @@ export default [
   // Global ignores
   includeIgnoreFile(gitignorePath),
   {
-    ignores: ['**/*.{cjs,mjs,js}', 'vite.config.ts', 'stories/'],
+    ignores: [
+      '**/*.{cjs,mjs,js}',
+      'vite.config.ts',
+      'stories/',
+      '**/.storybook/**',
+    ],
   },
 
   // Global config