docs: improve DX when using new setup for docs with storybook

.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require('path');
+const fs = require('fs');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
-const previewHead = require('fs').readFileSync(path.resolve(__dirname, 'preview-head.html'), 'utf8');
 
 /**
  *  @callback StorybookWebpackConfig
@@ -34,6 +34,8 @@ const previewHead = require('fs').readFileSync(path.resolve(__dirname, 'preview-
  * @typedef  {{loader: string; options: { [index: string]: any }}} LoaderObjectDef
  */
 
+const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-head-template.html'), 'utf8');
+
 module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
   stories: [],
   addons: [
@@ -77,7 +79,11 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
   core: {
     builder: 'webpack5',
   },
-  previewHead: head => head + previewHead,
+  /**
+   * Programmatically enhance previewHead as inheriting just static file `preview-head.html` doesn't work in monorepo
+   * @see https://storybook.js.org/docs/react/addons/writing-presets#previewmanager-templates
+   */
+  previewHead: head => head + previewHeadTemplate,
 });
 
 /**

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { withFluentProvider, withStrictMode } from '@fluentui/react-storybook';
 import 'cypress-storybook/react';
-import dedent from 'dedent';
+import * as dedent from 'dedent';
 
 /** @type {NonNullable<import('@storybook/react').Story['decorators']>} */
 export const decorators = [withFluentProvider, withStrictMode];

package.json

@@ -114,7 +114,7 @@
     "@testing-library/react-hooks": "5.0.3",
     "@types/babel__helper-plugin-utils": "7.10.0",
     "@types/copy-webpack-plugin": "6.4.0",
-    "@types/dedent": "latest",
+    "@types/dedent": "0.7.0",
     "@types/enhanced-resolve": "3.0.7",
     "@types/eslint": "7.2.13",
     "@types/express": "4.17.2",
@@ -157,6 +157,7 @@
     "cypress-storybook": "0.5.1",
     "danger": "^6.0.5",
     "del": "6.0.0",
+    "dedent": "0.7.0",
     "enhanced-resolve": "5.8.2",
     "enquirer": "2.3.6",
     "eslint": "7.25.0",

tools/generators/migrate-converged-pkg/index.spec.ts

@@ -519,7 +519,6 @@ describe('migrate-converged-pkg generator', () => {
 
         return localConfig;
         },
-        previewHead: rootMain.previewHead,
         });"
       `);
 

tools/generators/migrate-converged-pkg/index.ts

@@ -182,7 +182,6 @@ const templates = {
 
           return localConfig;
         },
-        previewHead: rootMain.previewHead,
       });
     `,
     preview: stripIndents`

typings/storybook__addons/index.d.ts

@@ -4,7 +4,7 @@
 // Definitions: N/A
 // TypeScript Version: 3.1
 
-import { Parameters } from '@storybook/addons';
+import { Parameters, ViewMode } from '@storybook/addons';
 
 declare module '@storybook/addons' {
   // PUBLIC API - extended definitions
@@ -13,6 +13,48 @@ declare module '@storybook/addons' {
   // =====
   interface ParametersExtended {
     controls?: ControlsParameters & DisableControl;
+    /**
+     * control the view mode
+     * @default 'story'
+     * @remarks
+     * Note that this behaviour is rather confusing and will work only after 1st user interaction click
+     * on particular menu item. On initial render canvas will be always rendered.
+     *
+     * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#controlling-a-storys-view-mode
+     */
+    viewMode?: ViewMode;
+    /**
+     * configure Storybook's preview tabs
+     * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#reordering-docs-tab-first
+     */
+    previewTabs?: Record<'storybook/docs/panel' | 'canvas', Partial<{ index: number; hidden: boolean }>>;
+    docs?: Partial<{
+      source: {
+        /**
+         * enable/disable rendering decorators in Docs mode
+         */
+        excludeDecorators: boolean;
+      };
+      /**
+       * https://github.com/storybookjs/storybook/tree/next/addons/docs/react#inline-stories
+       */
+      inlineStories: boolean;
+    }>;
+    /**
+     * @see https://github.com/microsoft/fluentui-storybook-addons
+     */
+    exportToCodeSandbox?: Partial<AddonExportToCodesandboxParameters>;
+  }
+
+  interface AddonExportToCodesandboxParameters {
+    /**
+     * Dependencies that should be included with every story
+     */
+    requiredDependencies: Record<string, string>;
+    /**
+     * Content of index.tsx in CodeSandbox
+     */
+    indexTsx: string;
   }
 
   interface ControlsParameters {

yarn.lock

@@ -4375,7 +4375,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.0.10.tgz#d338c7feac93a98a32aac875d1100f92c7b61f4f"
   integrity sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw==
 
-"@types/dedent@latest":
+"@types/dedent@0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@types/dedent/-/dedent-0.7.0.tgz#155f339ca404e6dd90b9ce46a3f78fd69ca9b050"
   integrity sha512-EGlKlgMhnLt/cM4DbUSafFdrkeJoC9Mvnj0PUCU7tFmTjMjNRT957kXCx0wYm3JuEq4o4ZsS5vG+NlkM2DMd2A==
@@ -9971,7 +9971,7 @@ decompress@^4.2.0:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
-dedent@^0.7.0:
+dedent@0.7.0, dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=