docs: migrate to storybook version 8.x (#181)

Author: droshev

apps/documentation/.storybook/main.ts

@@ -1,15 +1,21 @@
-import {StorybookConfig} from '@storybook/angular';
+import { StorybookConfig } from '@storybook/angular';
+
 const config: StorybookConfig = {
-  staticDirs: [{
-    from: '../src/assets',
-    to: 'assets'
-  }],
-  stories: ['../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
-  framework: '@storybook/angular',
+  staticDirs: [
+    {
+      from: '../src/assets',
+      to: 'assets',
+    },
+  ],
+  stories: ['../src/app/**/*.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
   docs: {
-    autodocs: true,
-    defaultName: 'Docs'
-  }
+    defaultName: 'Docs',
+  },
 };
-module.exports = config;
+
+export default config;

apps/documentation/.storybook/preview.ts

@@ -1,21 +1,21 @@
 import '@ui5/webcomponents-icons/dist/AllIcons';
 import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js';
-import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
-import {getTheme, setTheme} from '@ui5/webcomponents-base/dist/config/Theme';
+import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
+import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 
 type Themes = {
   [name: string]: string;
 };
 
 const themes: Themes = {
-  "Morning Horizon": "sap_horizon",
-  "Evening Horizon": "sap_horizon_dark",
-  "Horizon High Contrast Black": "sap_horizon_hcb",
-  "Horizon High Contrast White": "sap_horizon_hcw",
-  "Quartz Light": "sap_fiori_3",
-  "Quartz Dark": "sap_fiori_3_dark",
-  "Quartz High Contrast Black": "sap_fiori_3_hcb",
-  "Quartz High Contrast White": "sap_fiori_3_hcw",
+  'Morning Horizon': 'sap_horizon',
+  'Evening Horizon': 'sap_horizon_dark',
+  'Horizon High Contrast Black': 'sap_horizon_hcb',
+  'Horizon High Contrast White': 'sap_horizon_hcw',
+  'Quartz Light': 'sap_fiori_3',
+  'Quartz Dark': 'sap_fiori_3_dark',
+  'Quartz High Contrast Black': 'sap_fiori_3_hcb',
+  'Quartz High Contrast White': 'sap_fiori_3_hcw',
 };
 
 export const parameters = {
@@ -24,69 +24,66 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: [
-        "Introduction",
-        "Maintainers",
-        "*"
-      ],
+      order: ['Introduction', 'Maintainers', '*'],
     },
   },
 };
 
 const setDirection = (direction) => {
-  document.body.setAttribute("dir", direction);
+  document.body.setAttribute('dir', direction);
   applyDirection();
-}
-
+};
 
 const withThemeProvider = (Story, storyContext) => {
-  const {theme, rtl, density} = storyContext.globals;
+  const { theme, rtl, density } = storyContext.globals;
   setTheme(themes[theme]);
 
-  setDirection(rtl === "RTL" ? "rtl" : "ltr");
+  setDirection(rtl === 'RTL' ? 'rtl' : 'ltr');
 
-  document.body.classList.remove("sapUiSizeCozy");
-  document.body.classList.remove("sapUiSizeCompact");
-  document.body.classList.add("sapUiSize" + density);
+  document.body.classList.remove('sapUiSizeCozy');
+  document.body.classList.remove('sapUiSizeCompact');
+  document.body.classList.add('sapUiSize' + density);
   return Story();
-}
+};
 
 export const decorators = [withThemeProvider];
 
-const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = '--_ui5_content_density';
 
-const getEffectiveContentDensity = (el: HTMLElement) => getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
+const getEffectiveContentDensity = (el: HTMLElement) =>
+  getComputedStyle(el).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR);
 
 export const globalTypes = {
   theme: {
-    description: "Global theme for components",
+    description: 'Global theme for components',
     defaultValue: Object.keys(themes).find((key) => themes[key] === getTheme()),
     toolbar: {
-      title: "Toggle theme",
-      icon: "",
+      title: 'Toggle theme',
+      icon: '',
       items: Object.keys(themes),
       dynamicTitle: true,
     },
   },
   rtl: {
-    description: "Global rtl mode for components",
-    defaultValue: "LTR",
+    description: 'Global rtl mode for components',
+    defaultValue: 'LTR',
     toolbar: {
-      title: "Direction",
-      icon: "",
-      items: ["LTR", "RTL"],
+      title: 'Direction',
+      icon: '',
+      items: ['LTR', 'RTL'],
       dynamicTitle: true,
     },
   },
   density: {
-    description: "Global content density mode for components",
+    description: 'Global content density mode for components',
     defaultValue:
-      getEffectiveContentDensity(document.body) === "cozy" ? "Cozy" : "Compact",
+      getEffectiveContentDensity(document.body) === 'cozy' ? 'Cozy' : 'Compact',
     toolbar: {
-      title: "Content Density",
-      icon: "",
-      items: ["Cozy", "Compact"],
+      title: 'Content Density',
+      icon: '',
+      items: ['Cozy', 'Compact'],
       dynamicTitle: true,
     },
   },
 };
+export const tags = ['autodocs', 'autodocs', 'autodocs'];

apps/documentation/src/app/stories/docs/differences.stories.mdx renamed to apps/documentation/src/app/stories/docs/differences.mdx

@@ -1,4 +1,4 @@
-import {Meta} from "@storybook/addon-docs";
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Difference from underlying library" />
 
@@ -19,7 +19,6 @@ Every event name will be transformed to the schema `ui5${pascalCase(originalEven
 the event name will be `ui5SelectedDatesChange`. In most cases, you will not have to think about it, since all the properties and outputs are typed for Angular users and your IDE will give you autocompletion
 for all of them.
 
-
 ### Component imports
 
 In `@ui5/webcomponents` in order to use the component, you should import it as needed, but in `@ui5/webcomponents-ngx` you can import components as a module, as well as standalone components.
@@ -28,11 +27,13 @@ The standalone components are exported from their respective directories, so you
 ```typescript
 import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button';
 ```
+
 These components can be used as standard standalone components, or if you want to import all the components that are in for example `main` package, you can do it like this:
 
 ```typescript
 import { Ui5MainModule } from '@ui5/webcomponents-ngx/main';
 ```
+
 And then you should use them in your `NgModule` just like any other Angular module.
 
 Besides `Ui5MainModule`, there are also `Ui5FioriModule` and `Ui5WebcomponentsModule`, which contains all available components.
@@ -50,7 +51,9 @@ import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button';
   selector: 'some-component',
   standalone: true,
   imports: [CompactDirective, ButtonComponent],
-  template: `<ui5-button (click)="compact = !compact" [ui5Compact]="compact">Toggle compact</ui5-button>`,
+  template: `<ui5-button (click)="compact = !compact" [ui5Compact]="compact"
+    >Toggle compact</ui5-button
+  >`,
 })
 export class SomeComponent {
   compact = false;