Bug 1765634 - Simple Storybook for local development r=mconley,hjones

This provides a basic Storybook set up for us to develop with
Storybook locally.

Quick start (MacOS, Linux, WSL):
  ./mach npm --prefix=browser/components/storybook ci
  ./mach npm --prefix=browser/components/storybook run storybook

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

.hgignore

@@ -157,6 +157,7 @@ _OPT\.OBJ/
 ^tools/browsertime/node_modules/
 ^tools/lint/eslint/eslint-plugin-mozilla/node_modules/
 ^browser/components/newtab/node_modules/
+^browser/components/storybook/node_modules/
 
 # Ignore talos virtualenv and tp5n files.
 # The tp5n set is supposed to be decompressed at

browser/components/storybook/.eslintrc.js

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+module.exports = {
+  parserOptions: {
+    sourceType: "module",
+  },
+};

browser/components/storybook/.storybook/main.js

@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const path = require('path');
+
+// ./mach environment --format json
+// topobjdir should be the build location
+
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/web-components",
+  "webpackFinal": async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    const projectRoot = path.resolve(__dirname, "../../../../");
+    config.resolve.alias["browser"] = `${projectRoot}/browser`;
+    config.resolve.alias["toolkit"] = `${projectRoot}/toolkit`;
+    config.resolve.alias["toolkit-widgets"] = `${projectRoot}/toolkit/content/widgets/`;
+
+    config.optimization = {
+      splitChunks: false,
+      runtimeChunk: false,
+      sideEffects: false,
+      usedExports: false,
+      concatenateModules: false,
+      minimizer: [],
+    };
+
+    // Return the altered config
+    return config;
+  },
+  "core": {
+    "builder": "webpack5"
+  }
+}

browser/components/storybook/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   - You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">

browser/components/storybook/README.md

@@ -0,0 +1,62 @@
+= Storybook for Firefox
+
+Storybook is a component library to document our design system, reusable
+components and any specific components you might want to test with dummy data.
+
+== Background
+
+The storybook will list components that can be reused, and will help document
+what common elements we have. It can also list implementation specific
+components, but they should not be added to the "Design System" section.
+
+Changes to files directly referenced from the storybook (so basically
+non-chrome:// paths) should automatically reflect changes in the opened browser.
+If you make a change to a chrome:// referenced file then you'll need to do a
+hard refresh (Cmd+Shift+R/Ctrl+Shift+R) to notice the changes.
+
+Currently Windows is only supported through WSL/Linux VM.
+
+== Running Storybook
+
+Installing the npm dependencies and running the `storybook` npm script should be
+enough to get storybook running. This can be done with your personal npm/node
+that happens to be compatible or using `./mach npm`.
+
+=== Running with mach based npm
+
+If you do this a lot, you might want to add an alias like this to your shell's
+startup config:
+
+```
+alias npm-storybook="./mach npm --prefix=browser/components/storybook"
+```
+
+Then running `npm-storybook` from the repo's root directory will work with the
+storybook directory.
+
+To start storybook the first time (or if it's been a while since you last
+installed):
+
+```
+# Install the package-lock.json exactly so lockfileVersion won't change.
+# Using the `install` command may affect package-lock.json.
+./mach npm --prefix=browser/components/storybook ci
+./mach npm --prefix=browser/components/storybook run storybook
+# or
+npm-storybook install
+npm-storybook run storybook
+```
+
+If the storybook dependencies haven't changed since your last install, then you
+can skip the install step.
+
+=== Personal npm
+
+You can use your own `npm` to install and run storyboook. Compatibility is up
+to you to sort out.
+
+```
+cd browser/components/storybook
+npm ci # Install the package-lock.json exactly so lockfileVersion won't change
+npm run storybook
+```