Upgrade to Storybook 8 in FAST Foundation (#6929)

* add eslint rules for type imports

* add vite client types for SVG imports

* upgrade to Storybook 8

* migrate Storybook config for v8

* remove storybook manager script

* migrate Storybook preview script for v8

* separate type-only imports

* eslintrc change

* update tests to work with Storybook 8

* restore sideEffects config by using vite glob imports in storybook preview

- use globalThis for html function in tests

* remove unused dev dependencies

- Update csf
- Fix storybook helper types
- update docs

* fix parse5 type imports

* update api-report

* resolve lockfile

* Change files

Author: radium-v

change/@microsoft-fast-foundation-a9be4fed-9aa5-45ad-b8a9-cd48d8e8c0e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "upgrade to Storybook 8",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-ssr-6209575d-e41b-4f42-b3f6-676f27fe85e2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix parse5 type imports",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -32,9 +32,7 @@
       "**/react-dom",
       "**/react-syntax-highlighter",
       "**/typescript",
-      "**/webpack",
-      "**/@storybook/builder-webpack5",
-      "**/@storybook/builder-webpack5/**"
+      "**/webpack"
     ]
   },
   "engines": {

packages/web-components/fast-foundation/.eslintignore

@@ -3,3 +3,4 @@ dist
 node_modules
 *.spec.ts
 !*.pw.spec.ts
+.eslintrc.*

packages/web-components/fast-foundation/.eslintrc.cjs

@@ -0,0 +1,67 @@
+const path = require("path");
+
+module.exports = {
+    extends: [
+        "@microsoft/eslint-config-fast-dna",
+        "prettier",
+        "plugin:storybook/recommended",
+    ],
+    rules: {
+        "@typescript-eslint/naming-convention": [
+            "error",
+            {
+                selector: "typeLike",
+                format: ["UPPER_CASE", "camelCase", "PascalCase"],
+                leadingUnderscore: "allow",
+            },
+        ],
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                types: {
+                    "{}": false,
+                    Function: false,
+                    Object: false,
+                },
+                extendDefaults: true,
+            },
+        ],
+    },
+    overrides: [
+        {
+            files: ["**/*.cjs"],
+            env: {
+                commonjs: true,
+                node: true,
+            },
+            rules: {
+                "@typescript-eslint/no-var-requires": "off",
+            },
+        },
+        {
+            files: ["**/*.ts"],
+            excludedFiles: ["playwright.config.ts"],
+            parserOptions: {
+                parser: "@typescript-eslint/parser",
+                project: path.resolve(__dirname, "./tsconfig.json"),
+            },
+            rules: {
+                "@typescript-eslint/consistent-type-imports": "error",
+                "@typescript-eslint/consistent-type-exports": [
+                    "error",
+                    { fixMixedExportsWithInlineTypeSpecifier: false },
+                ],
+            },
+        },
+        {
+            files: ["**/*.ts"],
+            excludedFiles: ["**/*.stories.ts"],
+            rules: {
+                "no-restricted-imports": [
+                    "error",
+                    { patterns: ["**/stories/**", "**/*.pw.spec.ts"] },
+                ],
+            },
+        },
+    ],
+};

packages/web-components/fast-foundation/.eslintrc.json

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/html-vite";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/stories/*.stories.ts", "debug.stories.ts"],
+    framework: "@storybook/html-vite",
+    addons: ["@storybook/addon-essentials"],
+    core: {
+        disableTelemetry: true,
+        disableWhatsNewNotifications: true,
+    },
+    async viteFinal(config) {
+        const { mergeConfig } = await import("vite");
+
+        return mergeConfig(config, {
+            build: { chunkSizeWarningLimit: 1000 },
+            resolve: {
+                alias: [{ find: /^(.*\.svg)$/, replacement: "$1?raw" }],
+            },
+        });
+    },
+};
+
+export default config;

packages/web-components/fast-foundation/.storybook/main.cjs

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+// Import all component definitions. This is a vite-specific feature:
+// https://vitejs.dev/guide/features.html#glob-import
+const modules = import.meta.glob("../src/**/*.register.ts");
+
+for (const path in modules) {
+    modules[path]();
+}
+
+// Provide the `html` tag function as a global. This is needed for some tests.
+(async () => {
+    const { html } = await import("@microsoft/fast-element");
+
+    Object.defineProperty(globalThis, "html", {
+        value: html,
+        writable: false,
+    });
+})();

packages/web-components/fast-foundation/.storybook/main.ts

@@ -4,21 +4,21 @@
 
 ```ts
 
-import { CaptureType } from '@microsoft/fast-element';
-import { Constructable } from '@microsoft/fast-element';
-import { CSSDirective } from '@microsoft/fast-element';
+import type { CaptureType } from '@microsoft/fast-element';
+import type { Constructable } from '@microsoft/fast-element';
+import type { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import type { ElementsFilter } from '@microsoft/fast-element';
-import { ElementStyles } from '@microsoft/fast-element';
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { ElementStyles } from '@microsoft/fast-element';
+import type { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
-import { HostBehavior } from '@microsoft/fast-element';
-import { HostController } from '@microsoft/fast-element';
-import { HTMLDirective } from '@microsoft/fast-element';
+import type { HostBehavior } from '@microsoft/fast-element';
+import type { HostController } from '@microsoft/fast-element';
+import type { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
-import { ViewTemplate } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
 
 // @public
 export const AccordionExpandMode: {
@@ -2895,9 +2895,9 @@ export type YearFormat = ValuesOf<typeof YearFormat>;
 
 // Warnings were encountered during analysis:
 //
-// dist/dts/calendar/calendar.d.ts:51:5 - (ae-incompatible-release-tags) The symbol "dataGridCell" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
-// dist/dts/calendar/calendar.d.ts:52:5 - (ae-incompatible-release-tags) The symbol "dataGridRow" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
-// dist/dts/calendar/calendar.d.ts:53:5 - (ae-incompatible-release-tags) The symbol "dataGrid" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
+// dist/dts/calendar/calendar.d.ts:52:5 - (ae-incompatible-release-tags) The symbol "dataGridCell" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
+// dist/dts/calendar/calendar.d.ts:53:5 - (ae-incompatible-release-tags) The symbol "dataGridRow" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
+// dist/dts/calendar/calendar.d.ts:54:5 - (ae-incompatible-release-tags) The symbol "dataGrid" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/data-grid/data-grid-row.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "dataGridCell" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/data-grid/data-grid.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "dataGridRow" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta
 // dist/dts/picker/picker.template.d.ts:9:5 - (ae-incompatible-release-tags) The symbol "anchoredRegion" is marked as @public, but its signature references "TemplateElementDependency" which is marked as @beta