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
+```

browser/components/storybook/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "browser-storybook",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "concurrently 'start-storybook -p 5703 --no-open' '../../../mach run http://localhost:5703'",
+    "build-storybook": "build-storybook"
+  },
+  "author": "",
+  "license": "MPL-2.0",
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@storybook/addon-actions": "^6.4.8",
+    "@storybook/addon-essentials": "^6.4.8",
+    "@storybook/addon-links": "^6.4.8",
+    "@storybook/builder-webpack5": "^6.4.8",
+    "@storybook/manager-webpack5": "^6.4.8",
+    "@storybook/web-components": "^6.4.8",
+    "babel-loader": "^8.2.3",
+    "concurrently": "^6.5.0",
+    "lit": "^2.2.2"
+  }
+}

browser/components/storybook/stories/button.stories.js

@@ -0,0 +1,56 @@
+/* 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/. */
+
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+
+export default {
+  title: "Design System/Atoms/Button",
+};
+
+const Template = ({ disabled, primary, text, ghostButton, icon }) =>
+  html`
+    <style>
+      .icon-button {
+        background-image: url("${icon}");
+      }
+    </style>
+    <button
+      ?disabled=${disabled}
+      class=${classMap({
+        primary,
+        "ghost-button": ghostButton,
+        "icon-button": icon,
+      })}
+    >
+      ${text}
+    </button>
+  `;
+
+export const RegularButton = Template.bind({});
+RegularButton.args = {
+  text: "Regular",
+  primary: false,
+  disabled: false,
+};
+export const PrimaryButton = Template.bind({});
+PrimaryButton.args = {
+  text: "Primary",
+  primary: true,
+  disabled: false,
+};
+export const DisabledButton = Template.bind({});
+DisabledButton.args = {
+  text: "Disabled",
+  primary: false,
+  disabled: true,
+};
+
+export const GhostIconButton = Template.bind({});
+GhostIconButton.args = {
+  text: "",
+  icon: "chrome://browser/skin/login.svg",
+  disabled: false,
+  ghostButton: true,
+};

browser/components/storybook/stories/message-bar.stories.js

@@ -0,0 +1,47 @@
+/* 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/. */
+
+// TODO(mstriemer): These stubs should be moved somewhere central, or ideally
+// they wouldn't be needed.
+window.MozXULElement = { insertFTLIfNeeded() {} };
+document.l10n = {
+  connectRoot() {},
+  setAttributes() {},
+};
+
+import { html } from "lit";
+
+import "toolkit-widgets/message-bar.js";
+
+const MESSAGE_TYPES = {
+  default: "",
+  success: "success",
+  error: "error",
+  warning: "warning",
+};
+
+export default {
+  title: "Design System/Components/Message Bar",
+  argTypes: {
+    type: {
+      options: Object.keys(MESSAGE_TYPES),
+      mapping: MESSAGE_TYPES,
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = ({ dismissable, type }) =>
+  html`
+    <message-bar type=${type} ?dismissable=${dismissable}>
+      <span>An error occurred.</span>
+      <button>Try again</button>
+    </message-bar>
+  `;
+
+export const Basic = Template.bind({});
+Basic.args = { type: "", dismissable: false };
+
+export const Dismissable = Template.bind({});
+Dismissable.args = { type: "", dismissable: true };

browser/components/storybook/stories/toggle.stories.js

@@ -0,0 +1,45 @@
+/* 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/. */
+
+import { html } from "lit";
+
+export default {
+  title: "Design System/Atoms/Toggle",
+};
+
+const Template = ({ checked, disabled }) =>
+  html`
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://global/skin/in-content/toggle-button.css"
+    />
+    <input
+      type="checkbox"
+      class="toggle-button"
+      ?checked=${checked}
+      ?disabled=${disabled}
+    />
+  `;
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+  disabled: false,
+  checked: false,
+};
+export const Checked = Template.bind({});
+Checked.args = {
+  disabled: false,
+  checked: true,
+};
+export const DisabledUnchecked = Template.bind({});
+DisabledUnchecked.args = {
+  disabled: true,
+  checked: false,
+};
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  disabled: true,
+  checked: true,
+};

toolkit/themes/shared/in-content/common-shared.css

@@ -506,6 +506,17 @@ html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
+html|button.ghost-button.icon-button {
+  height: 16px;
+  width: 16px;
+  min-width: auto;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+  fill: currentColor;
+  -moz-context-properties: fill;
+}
+
 html|input[type="color"] {
   padding: 6px;
   width: 50px;

tools/rewriting/ThirdPartyPaths.txt

@@ -1,5 +1,6 @@
 browser/components/newtab/vendor/
 browser/components/pocket/content/panels/js/vendor/
+browser/components/storybook/node_modules/
 browser/components/translation/cld2/
 browser/extensions/formautofill/content/third-party/
 browser/extensions/formautofill/test/fixtures/third_party/