Bug 1893475 - Update storybook to v7. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D208631

--HG--
rename : mail/components/storybook/.storybook/chrome-uri-utils.js => mail/components/storybook/.storybook/chrome-uri-utils.mjs
rename : mail/components/storybook/.storybook/main.js => mail/components/storybook/.storybook/main.mjs
extra : amend_source : 10d4caadfbca5e72c850218f6cd6794917a9693b

.hgignore

@@ -36,7 +36,7 @@
 # Ignore Storybook generated files
 ^mail/components/storybook/node_modules/
 ^mail/components/storybook/storybook-static/
-^mail/components/storybook/.storybook/chrome-map.js
+^mail/components/storybook/.storybook/chrome-map.mjs
 ^mail/components/storybook/custom-elements.json
 
 # Ignore third_party npm files

docs/storybook/create_story.md

@@ -9,6 +9,8 @@ To make this a story, all that's missing is an object exported as default with a
 
 If the story is for a custom element, make sure to also import the file that declares the custom element. Storybook is set up so you can import files in `mail/` by just starting the import path with `mail/`. The default export object should have a second property `component` containing the tag name of the custom element. This is used to find the related JSDoc documentation.
 
+If storybook should generate an overview docs page, we need to tag the component with the `"autodocs"` tag.
+
 So far we'd end up with this `example-widget.stories.mjs`:
 ```js
 /* This Source Code Form is subject to the terms of the Mozilla Public
@@ -20,6 +22,7 @@ import "mail/base/content/widgets/example-widget.mjs"; //eslint-disable-line imp
 export default {
   title: "Widgets/Example Widget",
   component: "example-widget",
+  tags: ["autodocs"],
 };
 ```
 
@@ -43,6 +46,7 @@ import "mail/base/content/widgets/example-widget.mjs"; //eslint-disable-line imp
 export default {
   title: "Widgets/Example Widget",
   component: "example-widget",
+  tags: ["autodocs"],
 };
 
 const ExampleWidgetTemplate = () => html`
@@ -70,6 +74,7 @@ import "mail/base/content/widgets/example-widget.mjs"; //eslint-disable-line imp
 export default {
   title: "Widgets/Example Widget",
   component: "example-widget",
+  tags: ["autodocs"],
 };
 
 const ExampleWidgetTemplate = ({ title }) => html`
@@ -103,6 +108,7 @@ import "mail/base/content/widgets/example-widget.mjs"; //eslint-disable-line imp
 export default {
   title: "Widgets/Example Widget",
   component: "example-widget",
+  tags: ["autodocs"],
 };
 
 const ExampleWidgetTemplate = ({ title }) => html`

mail/components/storybook/.storybook/chrome-uri-utils.mjs

@@ -3,9 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* eslint-env node */
 
-const [prefixMap, aliasMap, sourceMap] = require("./chrome-map.js");
+import chromeMap from "./chrome-map.mjs";
+// Storybook somehow loads us in a cursed semi-mjs land where default exports
+// work more like the old commonJS workaround.
+const [ prefixMap, aliasMap, sourceMap ] = chromeMap.default;
 
-function rewriteChromeUri(uri) {
+export function rewriteChromeUri(uri) {
   if (uri in aliasMap) {
     return rewriteChromeUri(aliasMap[uri]);
   }
@@ -26,5 +29,3 @@ function rewriteChromeUri(uri) {
   }
   return "";
 }
-
-module.exports = rewriteChromeUri;

mail/components/storybook/.storybook/main.mjs

@@ -3,14 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* eslint-env node */
 
-const path = require("path");
-const webpack = require("webpack");
-const rewriteChromeUri = require("./chrome-uri-utils.js");
+import path from "path";
+import webpack from "webpack";
+import { rewriteChromeUri } from "./chrome-uri-utils.mjs";
 
 // ./mach environment --format json
 // topobjdir should be the build location
 
-module.exports = {
+export default {
   stories: [
     "../stories/**/*.stories.mdx",
     "../stories/**/*.stories.@(mjs|jsx|ts|tsx)",
@@ -20,7 +20,10 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-a11y"
   ],
-  framework: "@storybook/web-components",
+  framework: {
+    name: "@storybook/web-components-webpack5",
+    options: {},
+  },
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -28,8 +31,10 @@ module.exports = {
 
     // Make whatever fine-grained changes you need
     const projectRoot = path.resolve(__dirname, "../../../../");
-    config.resolve.alias.mail = `${projectRoot}/mail`;
-    config.resolve.alias.comm = projectRoot;
+    config.resolve.alias = {
+      mail: `${projectRoot}/mail`,
+      comm: projectRoot,
+    };
 
     config.plugins.push(
       // Rewrite chrome:// URI imports to file system paths.
@@ -55,7 +60,4 @@ module.exports = {
     // Return the altered config
     return config;
   },
-  core: {
-    builder: "webpack5",
-  },
 };

mail/components/storybook/mach_commands.py

@@ -79,11 +79,11 @@ def build_storybook_manifest(command_context):
     print("Build ChromeMap backend")
     run_mach(command_context, "build-backend", backend=["ChromeMap"])
     config_environment = command_context.config_environment
-    storybook_chrome_map_path = "mail/components/storybook/.storybook/chrome-map.js"
+    storybook_chrome_map_path = "mail/components/storybook/.storybook/chrome-map.mjs"
     chrome_map_path = mozpath.join(config_environment.topobjdir, "chrome-map.json")
     with open(chrome_map_path, "r") as chrome_map_f:
         with open(storybook_chrome_map_path, "w") as storybook_chrome_map_f:
-            storybook_chrome_map_f.write("module.exports = ")
+            storybook_chrome_map_f.write("export default ")
             storybook_chrome_map_f.write(chrome_map_f.read())
             storybook_chrome_map_f.write(";")
 

mail/components/storybook/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "analyze": "cem analyze",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-storybook": "npm run analyze && build-storybook",
-    "storybook": "npm run analyze && start-storybook -p 5703 --no-open"
+    "build-storybook": "npm run analyze && storybook build",
+    "storybook": "npm run analyze && storybook dev -p 5703 --no-open"
   },
   "author": "",
   "license": "MPL-2.0",
@@ -17,14 +17,16 @@
     "@custom-elements-manifest/analyzer": "^0.8.4",
     "@fluent/bundle": "^0.17.1",
     "@fluent/dom": "^0.8.1",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/addon-a11y": "^7.6.4",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
     "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/web-components": "^6.5.12",
+    "@storybook/web-components": "^7.6.4",
+    "@storybook/web-components-webpack5": "^7.6.4",
     "babel-loader": "^8.2.5",
-    "lit": "^2.3.1"
-  }
+    "lit": "^2.3.1",
+    "storybook": "^7.6.4"
+  },
+  "type": "module"
 }

mail/components/storybook/stories/layout.stories.mjs

@@ -7,6 +7,7 @@ import "mail/themes/shared/mail/layout.css"; //eslint-disable-line import/no-una
 
 export default {
   title: "Design System/Layout Colors",
+  tags: ["autodocs"],
 };
 
 function createColor(colorName) {

mail/components/storybook/stories/orderable-tree-listbox.stories.mjs

@@ -9,6 +9,7 @@ import "mail/base/content/widgets/listbox/orderable-tree-listbox.mjs"; //eslint-
 export default {
   title: "Widgets/Tree/Orderable Tree Listbox",
   component: "orderable-tree-listbox",
+  tags: ["autodocs"],
 };
 
 export const Tree = () => html`

mail/components/storybook/stories/pane-splitter.stories.mjs

@@ -8,6 +8,7 @@ import "mail/base/content/widgets/pane-splitter.js"; //eslint-disable-line impor
 export default {
   title: "Widgets/Pane Splitter",
   component: "pane-splitter",
+  tags: ["autodocs"],
   argTypes: {
     resizeDirection: {
       options: ["", "vertical", "horizontal"],

mail/components/storybook/stories/search-bar.stories.mjs

@@ -14,6 +14,7 @@ import "mail/themes/shared/mail/widgets.css";
 export default {
   title: "Widgets/Search Bar",
   component: "search-bar",
+  tags: ["autodocs"],
   argTypes: {
     disabled: {
       control: "boolean",

mail/components/storybook/stories/tree-listbox.stories.mjs

@@ -9,6 +9,7 @@ import "mail/base/content/widgets/listbox/tree-listbox.mjs"; //eslint-disable-li
 export default {
   title: "Widgets/Tree/Tree Listbox",
   component: "tree-listbox",
+  tags: ["autodocs"],
 };
 
 export const Tree = () => html`

mail/components/storybook/stories/widgets.stories.mjs

@@ -9,6 +9,7 @@ import "mail/themes/shared/mail/icons.css"; //eslint-disable-line import/no-unas
 
 export default {
   title: "Design System/Widgets",
+  tags: ["autodocs"],
 };
 
 export const Widgets = () => html`