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]>
umbraco · Oct 10, 2024 · 8e7b851 · 8e7b851
1 parent 4d296a4
commit 8e7b851
Show file tree

Hide file tree

Showing 119 changed files with 16,882 additions and 29,434 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,5 @@ out-css
 
 # old source
 /src
+
+*storybook.log
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -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;
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import umbracoTheme from './umbraco-theme';
 
 addons.setConfig({

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
diff --git a/.storybook/preview.js → .storybook/preview.ts b/.storybook/preview.js → .storybook/preview.ts
@@ -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;
diff --git a/.storybook/umbraco-theme.js b/.storybook/umbraco-theme.js
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,3 +38,5 @@ out-css

		# old source
		/src

		*storybook.log