chore: upgrade to storybook v7 (#2733)

* chore: upgrade to storybook v7

update dependencies
automigration via npx storybook@latest upgrade
fixed imports
fixed parameter config
updated stories to use .stories.js as standard extension
fixed static dir path for dev loop
using autodocs on tagged stories
removed old jsll code
fixed styling for editor
added css hacks to remove padding inside story on docs page
migtated doc page config to new format
updated default docs story component
adjusting css selectors for new storybook version

* Remove unused selectors from the storybook

Signed-off-by: Musale Martin <[email protected]>

---------

Signed-off-by: Musale Martin <[email protected]>
Co-authored-by: Musale Martin <[email protected]>

Author: gavinbarron

.babelrc.json

@@ -0,0 +1,17 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     es6: true,
     node: true
   },
-  extends: ['@microsoft/eslint-config-msgraph'],
+  extends: ['@microsoft/eslint-config-msgraph', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: [

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -1,4 +1,4 @@
-import addons, { makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator } from '@storybook/preview-api';
 
 import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider';
 import { EditorElement } from './editor';

.storybook/main.js

@@ -1,3 +1,4 @@
+import { dirname, join } from 'path';
 /**
  * -------------------------------------------------------------------------------------------
  * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
@@ -8,26 +9,16 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  presets: [
-    // {
-    //   name: '@storybook/addon-docs/preset',
-    //   options: {
-    //     sourceLoaderOptions: null
-    //   }
-    // }
-  ],
-  stories: ['../stories/overview.stories.mdx', '../stories/**/*.@(js|mdx)'],
+  presets: [],
+
+  stories: ['../stories/overview.stories.mdx', '../stories/**/*.stories.@(js|mdx)'],
+
   addons: [
-    'storybook-version',
-    '@storybook/addon-docs'
-    // '@storybook/addon-a11y/register',
-    // '@storybook/addon-actions/register',
-    // '@storybook/addon-knobs/register',
-    // '@storybook/addon-links/register'
+    getAbsolutePath('storybook-version'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-mdx-gfm')
   ],
+
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -42,5 +33,18 @@ module.exports = {
 
     // Return the altered config
     return config;
+  },
+
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-webpack5'),
+    options: {}
+  },
+
+  docs: {
+    autodocs: 'tag'
   }
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

.storybook/manager-head.html

@@ -13,21 +13,10 @@
 </footer>
 
 <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script>
-<script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
 <script type="module" src="https://unpkg.com/@fluentui/web-components@2"></script>
 <script type="text/javascript">
   const xmlns = "http://www.w3.org/2000/svg";
 
-  var config = {
-    autoCapture: {
-      lineage: true,
-    },
-    coreData: {
-      appId: "JS:GraphToolkit",
-    },
-  };
-  awa.init(config);
-
   window.onload = () => {
     addUsefulLinks();
   }
@@ -159,14 +148,7 @@
 </script>
 
 <style>
-  .css-bt79wf>svg>path,
-  .css-1j9r8vi>svg>path {
-    color: rgba(153, 153, 153, 0.6) !important;
-    fill: rgba(153, 153, 153, 0.6) !important;
-  }
-
   @media (forced-colors: active) and (prefers-color-scheme: dark) {
-
     #root,
     svg,
     svg>path,
@@ -175,33 +157,13 @@
       color: rgb(255, 255, 255) !important;
     }
 
-    .css-bt79wf>svg>path,
-    .css-1j9r8vi>svg>path {
-      color: rgba(255, 255, 255) !important;
-      fill: rgba(255, 255, 255) !important;
-    }
-
-    .css-cwrfva:hover,
-    .css-cwrfva:focus-visible {
-      border: 1px solid rgba(255, 255, 255) !important;
-    }
-
-    .css-128qwy8:hover {
-      /* background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); */
-      background-image: radial-gradient(at center center, rgba(255, 255, 255) 100%, transparent 100%, transparent 100%);
-      background-size: 50px 100%;
-      background-position: 0 50%;
-      background-repeat: no-repeat;
-    }
-
     .os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,
     .os-scrollbar>.os-scrollbar-track {
       border: 1px solid transparent;
     }
   }
 
   @media (forced-colors: active) and (prefers-color-scheme: light) {
-
     #root,
     svg,
     svg>path,
@@ -210,33 +172,12 @@
       color: rgb(0, 0, 0) !important;
     }
 
-    .css-bt79wf>svg>path,
-    .css-1j9r8vi>svg>path {
-      color: rgba(0, 0, 0) !important;
-      fill: rgba(0, 0, 0) !important;
-    }
-
-    .css-cwrfva:hover,
-    .css-cwrfva:focus-visible {
-      border: 1px solid rgba(0, 0, 0) !important;
-    }
-
-    .css-128qwy8:hover {
-      /* background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%); */
-      background-image: radial-gradient(at center center, rgba(0, 0, 0, 0.2) 100%, transparent 100%, transparent 100%);
-      background-size: 50px 100%;
-      background-position: 0 50%;
-      background-repeat: no-repeat;
-    }
-
     .os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,
     .os-scrollbar>.os-scrollbar-track {
       border: 1px solid transparent;
     }
   }
-</style>
 
-<style>
   .sidebar-header button {
     display: none !important;
   }
@@ -260,10 +201,6 @@
     color: #323232;
   }
 
-  .sidebar-subheading.css-ulso1l {
-    color: #717171 !important;
-  }
-
   .sidebar-header h1 {
     font-size: 14px;
     font-weight: 700;
@@ -282,45 +219,29 @@
     color: inherit;
   }
 
-  .css-ulso1l,
-  .css-gb1sl5 {
-    color: #717171 !important;
-  }
-
-  .sto-ulso1l,
-  .css-1en6m26 {
+  /* Sets the color of the sidebar section headings */
+  .sidebar-subheading.css-ppqi8s {
     color: #616159 !important;
   }
 
   /* Fix color contrast of left expanded/collapsed chevrons */
-
-  .sto-bt79wf,
-  .sto-1j9r8vi {
+  .css-ct44ui,
+  .css-1necw0m {
     color: unset;
   }
 
   /* Removes Find component feature */
-  .css-8ktt77 {
-    display: none;
-  }
-
-  .css-14o7vtb {
-    border: 2px solid transparent;
-  }
-
-  .css-14o7vtb:focus-visible {
-    outline: auto;
-  }
   .search-field {
     display: none !important;
   }
 
+  /* fix high contrast mode colors on sidebar links */
   @media (forced-colors: active){
-    a[class*="sto-"][data-selected="true"],
-    a[class*="sto-"][data-selected="true"]:focus,
-    a[class*="sto-"][data-selected="false"]:focus,
-    a[class*="sto-"][data-selected="true"]:hover,
-    a[class*="sto-"][data-selected="false"]:hover{
+    a[class*="css-"][data-selected="true"],
+    a[class*="css-"][data-selected="true"]:focus,
+    a[class*="css-"][data-selected="false"]:focus,
+    a[class*="css-"][data-selected="true"]:hover,
+    a[class*="css-"][data-selected="false"]:hover {
       background: Highlight;
       color: LinkText;
     }

.storybook/preview-body.html

@@ -1,7 +1,8 @@
 <style>
   html,
   body,
-  #root {
+  #root,
+  #storybook-root {
     height: 100%;
     width: 100%;
     font-family: var(--default-font-family, 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
@@ -20,6 +21,7 @@
     margin: 0px;
   }
 
+  /* code editor add-on styling */
   .story-mgt-root {
     height: 100%;
     width: 100%;
@@ -77,12 +79,15 @@
     z-index: 10;
   }
 
-  .css-19nbuh3,
+  /* End code editor add-on styling */
+
+  /* fixes link color and attribute value colors in storybook inline code blocks*/
+  .sbdocs-a,
   .css-zj0253 * .token.attr-value {
     color: #0360B9 !important;
   }
 
-  /* fix attributes in html rendering */
+  /* fix attribute names in html rendering */
   .mtk4, .css-zj0253 * .token.attr-name {
     color: #e50000 !important;
   }
@@ -96,7 +101,16 @@
     outline: auto;
   }
 
+  /* changes to eliminate padding/margins inside embedded stories in docs page*/
+  .docs-story > div {
+    padding: 0;
+    margin: 0;
+  }
+  .css-1wjen9k .innerZoomElementWrapper > div {
+    border: 0!important;
+  }
 
+  /* responsive fixes for small screens */
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;

.storybook/preview.js

@@ -7,11 +7,11 @@
 
 /* global window */
 
-import { addParameters, setCustomElements } from '@storybook/web-components';
+import { setCustomElements } from '@storybook/web-components';
 import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 import customElements from '../custom-elements.json';
 import { versionInfo } from './versionInfo';
-import { noArgsDocsPage } from './story-elements/noArgsDocsPage.js';
+import { defaultDocsPage } from './story-elements/defaultDocsPage';
 
 const setCustomElementsManifestWithOptions = (customElements, options) => {
   let { privateFields = true } = options;
@@ -33,7 +33,7 @@ const setCustomElementsManifestWithOptions = (customElements, options) => {
 
 setCustomElementsManifestWithOptions(customElements, { privateFields: false });
 
-addParameters({
+export const parameters = {
   previewTabs: {
     'storybook/docs/panel': {
       hidden: true
@@ -43,17 +43,19 @@ addParameters({
     }
   },
   docs: {
-    iframeHeight: '400px',
-    inlineStories: false,
-    page: noArgsDocsPage
+    page: defaultDocsPage,
+    story: {
+      inline: false,
+      height: '500px'
+    }
   },
   version: versionInfo,
   options: {
     storySort: {
       order: ['stories']
     }
   }
-});
+};
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);
 // configure(req, module);

.storybook/story-elements/defaultDocsPage.js

@@ -1,14 +1,13 @@
 import React from 'react';
 
-import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Title, Subtitle, Description, Primary, PRIMARY_STORY, ArgTypes } from '@storybook/addon-docs';
 
 export const defaultDocsPage = () => (
   <>
     <Title />
     <Subtitle />
     <Description />
     <Primary />
-    <ArgsTable story={PRIMARY_STORY} />
-    <Stories />
+    <ArgTypes story={PRIMARY_STORY} />
   </>
 );