diff options
Diffstat (limited to 'comm/mail/components/storybook/.storybook')
-rw-r--r-- | comm/mail/components/storybook/.storybook/main.js | 47 | ||||
-rw-r--r-- | comm/mail/components/storybook/.storybook/preview-head.html | 5 | ||||
-rw-r--r-- | comm/mail/components/storybook/.storybook/preview.mjs | 43 |
3 files changed, 95 insertions, 0 deletions
diff --git a/comm/mail/components/storybook/.storybook/main.js b/comm/mail/components/storybook/.storybook/main.js new file mode 100644 index 0000000000..743243b4a0 --- /dev/null +++ b/comm/mail/components/storybook/.storybook/main.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/. */ +/* eslint-env node */ + +const path = require("path"); + +// ./mach environment --format json +// topobjdir should be the build location + +module.exports = { + stories: [ + "../stories/**/*.stories.mdx", + "../stories/**/*.stories.@(mjs|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.mail = `${projectRoot}/mail`; + + config.module.rules.push({ + test: /\.ftl$/, + type: "asset/source", + }); + + config.optimization = { + splitChunks: false, + runtimeChunk: false, + sideEffects: false, + usedExports: false, + concatenateModules: false, + minimizer: [], + }; + + // Return the altered config + return config; + }, + core: { + builder: "webpack5", + }, +}; diff --git a/comm/mail/components/storybook/.storybook/preview-head.html b/comm/mail/components/storybook/.storybook/preview-head.html new file mode 100644 index 0000000000..90b30870b9 --- /dev/null +++ b/comm/mail/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/global.css"> diff --git a/comm/mail/components/storybook/.storybook/preview.mjs b/comm/mail/components/storybook/.storybook/preview.mjs new file mode 100644 index 0000000000..6b654c6049 --- /dev/null +++ b/comm/mail/components/storybook/.storybook/preview.mjs @@ -0,0 +1,43 @@ +/* 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 { DOMLocalization } from "@fluent/dom"; +import { FluentBundle, FluentResource } from "@fluent/bundle"; + +// Base Fluent set up. +let storybookBundle = new FluentBundle("en-US"); +let loadedResources = new Set(); +function* generateBundles() { + yield* [storybookBundle]; +} +document.l10n = new DOMLocalization([], generateBundles); +document.l10n.connectRoot(document.documentElement); + +// Any fluent imports should go through MozXULElement.insertFTLIfNeeded. +window.MozXULElement = { + async insertFTLIfNeeded(name) { + if (loadedResources.has(name)) { + return; + } + //TODO might have to dynamically change this depending on where a component + // lives in the tree (for example for calendar or mailnews). + // eslint-disable-next-line no-unsanitized/method + let imported = await import( + /* webpackInclude: /.*[\/\\].*\.ftl/ */ + `mail/locales/en-US/${name}` + ); + let ftlContents = imported.default; + + if (loadedResources.has(name)) { + // Seems possible we've attempted to load this twice before the first call + // resolves, so once the first load is complete we can abandon the others. + return; + } + + let ftlResource = new FluentResource(ftlContents); + storybookBundle.addResource(ftlResource); + loadedResources.add(name); + document.l10n.translateRoots(); + }, +}; |