commit 80229758748e19aa8f4dd1061de3eac8c1f2d3f3
parent fecfd7478674c857206af109d6402afe625906ec
Author: Sandra Qu <squiles@mozilla.com>
Date: Mon, 6 Oct 2025 19:46:03 +0000
Bug 1854696 Adding a Storybook Component Status Page to /docs r=desktop-theme-reviewers,hjones,kpatenio
Differential Revision: https://phabricator.services.mozilla.com/D264673
Diffstat:
7 files changed, 953 insertions(+), 3 deletions(-)
diff --git a/browser/components/storybook/.storybook/main.js b/browser/components/storybook/.storybook/main.js
@@ -15,7 +15,9 @@ module.exports = {
stories: [
// Show the Storybook document first in the list
// so that navigating to firefoxux.github.io/firefox-desktop-components/
- // lands on the Storybook.stories.md file
+ // lands on the ComponentStatus.stories.md file
+ `../**/component-status.stories.mjs`,
+ // and lands on the Storybook.stories.md file
"../**/README.storybook.stories.md",
// Docs section
"../**/README.*.stories.md",
diff --git a/browser/components/storybook/component-status/build-components-status.mjs b/browser/components/storybook/component-status/build-components-status.mjs
@@ -0,0 +1,221 @@
+/* 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 fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/* -------- paths -------- */
+
+// Root of the `component-status` directory
+const STATUS_ROOT = path.resolve(__dirname, "..");
+// Root of the `firefox` repository
+const REPO_ROOT = path.resolve(STATUS_ROOT, "../../..");
+
+const STORIES_DIR = path.join(REPO_ROOT, "toolkit", "content", "widgets");
+const BUGS_IDS_JSON = path.join(
+ STATUS_ROOT,
+ "component-status",
+ "data",
+ "bug-ids.json"
+);
+const OUT_JSON = path.join(STATUS_ROOT, "component-status", "components.json");
+
+const PROD_STORYBOOK_URL =
+ globalThis?.process?.env?.PROD_STORYBOOK_URL ||
+ "https://firefoxux.github.io/firefox-desktop-components/";
+
+/* -------- data bug-ids -------- */
+
+function readJsonIfExists(filePath) {
+ try {
+ if (fs.existsSync(filePath)) {
+ const txt = fs.readFileSync(filePath, "utf8");
+ return JSON.parse(txt);
+ }
+ } catch (e) {
+ console.error(`Error reading or parsing ${filePath}:`, e);
+ }
+ return {};
+}
+
+const BUG_IDS = readJsonIfExists(BUGS_IDS_JSON);
+
+/* -------- helpers -------- */
+
+function slugify(str) {
+ if (!str) {
+ return "";
+ }
+ let s = String(str).trim().toLowerCase();
+ s = s.replace(/[^a-z0-9]+/g, "-");
+ s = s.replace(/^-+|-+$/g, "");
+ s = s.replace(/--+/g, "-");
+ return s;
+}
+
+function getBugzillaUrl(bugId) {
+ return bugId && bugId > 0
+ ? `https://bugzilla.mozilla.org/show_bug.cgi?id=${bugId}`
+ : "";
+}
+
+function readFileSafe(file) {
+ try {
+ return fs.readFileSync(file, "utf8");
+ } catch (_e) {
+ return "";
+ }
+}
+
+function findStoriesFiles(dir) {
+ try {
+ return fs.readdirSync(dir, { withFileTypes: true }).flatMap(ent => {
+ const p = path.join(dir, ent.name);
+ if (ent.isDirectory()) {
+ return findStoriesFiles(p);
+ }
+ return ent.isFile() && /\.stories\.mjs$/i.test(ent.name) ? [p] : [];
+ });
+ } catch (e) {
+ console.error(`Error finding files in ${dir}:`, e);
+ return [];
+ }
+}
+
+// Parses `export default { title: "...", parameters: { status: "..." } }` from the file content
+// Parses `export default { title: "...", parameters: { status: "..." } }`
+function parseMeta(src) {
+ const meta = { title: "", status: "unknown" };
+
+ // First, find and capture the story's title
+ const titleMatch = src.match(
+ /export\s+default\s*\{\s*[\s\S]*?title\s*:\s*(['"`])([\s\S]*?)\1/
+ );
+ if (titleMatch && titleMatch[2]) {
+ meta.title = titleMatch[2].trim();
+ }
+
+ // Use the final "};" of the export as a definitive anchor to find the correct closing brace.
+ const paramsBlockMatch = src.match(
+ /parameters\s*:\s*(\{[\s\S]*?\})\s*,\s*};/
+ );
+
+ if (!paramsBlockMatch) {
+ return meta;
+ }
+ const paramsContent = paramsBlockMatch[1];
+
+ // Look for `status: "some-string"`
+ const stringStatusMatch = paramsContent.match(
+ /status\s*:\s*(['"`])([\s\S]*?)\1/
+ );
+ if (stringStatusMatch && stringStatusMatch[2]) {
+ meta.status = stringStatusMatch[2].trim().toLowerCase();
+ return meta;
+ }
+
+ // If a simple string wasn't found, look for `status: { type: "some-string" }`
+ const objectStatusMatch = paramsContent.match(
+ /status\s*:\s*\{\s*type\s*:\s*(['"`])([\s\S]*?)\1/
+ );
+ if (objectStatusMatch && objectStatusMatch[2]) {
+ meta.status = objectStatusMatch[2].trim().toLowerCase();
+ return meta;
+ }
+
+ return meta;
+}
+
+// Finds the main story export name (e.g., "Default" or the first export const)
+function pickExportName(src) {
+ const names = [];
+ const re = /export\s+const\s+([A-Za-z0-9_]+)\s*=/g;
+ let m;
+ while ((m = re.exec(src))) {
+ names.push(m[1]);
+ }
+ if (names.length === 0) {
+ return "default";
+ }
+ for (const n of names) {
+ if (n.toLowerCase() === "default") {
+ return "default";
+ }
+ }
+ return names[0].toLowerCase();
+}
+
+function componentSlug(filePath, title) {
+ const rel = path.relative(STORIES_DIR, filePath);
+ const root = rel.split(path.sep)[0] || "";
+ if (root) {
+ return root;
+ }
+ const parts = title.split("/");
+ const last = parts[parts.length - 1].trim();
+ return slugify(last || "unknown");
+}
+
+/* -------- build items -------- */
+function buildItems() {
+ const files = findStoriesFiles(STORIES_DIR);
+ const items = [];
+
+ for (const file of files) {
+ const src = readFileSafe(file);
+ if (!src) {
+ continue;
+ }
+
+ const meta = parseMeta(src);
+ if (!meta.title) {
+ continue;
+ }
+
+ const exportKey = pickExportName(src);
+ const titleSlug = slugify(meta.title);
+ const exportSlug = slugify(exportKey || "default");
+ if (!titleSlug || !exportSlug) {
+ continue;
+ }
+
+ const storyId = `${titleSlug}--${exportSlug}`;
+ const componentName = componentSlug(file, meta.title);
+
+ const storyUrl = `${PROD_STORYBOOK_URL}?path=/story/${storyId}`;
+ const sourceUrl = `https://searchfox.org/firefox-main/source/toolkit/content/widgets/${encodeURIComponent(componentName)}`;
+
+ const bugId = BUG_IDS[componentName] || 0;
+ const bugUrl = getBugzillaUrl(bugId);
+
+ items.push({
+ component: componentName,
+ title: meta.title,
+ status: meta.status,
+ storyId,
+ storyUrl,
+ sourceUrl,
+ bugUrl,
+ });
+ }
+
+ items.sort((a, b) => a.component.localeCompare(b.component));
+ return items;
+}
+
+/* -------- write JSON -------- */
+
+const items = buildItems();
+const data = {
+ generatedAt: new Date().toISOString(),
+ count: items.length,
+ items,
+};
+
+fs.writeFileSync(OUT_JSON, JSON.stringify(data, null, 2) + "\n");
+console.warn(`wrote ${OUT_JSON} (${items.length} components)`);
diff --git a/browser/components/storybook/component-status/component-status.stories.mjs b/browser/components/storybook/component-status/component-status.stories.mjs
@@ -0,0 +1,180 @@
+/* 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 https://mozilla.org/MPL/2.0/. */
+
+import {
+ LitElement,
+ html,
+ css,
+} from "chrome://global/content/vendor/lit.all.mjs";
+import componentsData from "./components.json";
+
+/* DS styles */
+import dsTokensTable from "toolkit/themes/shared/design-system/tokens-table.css";
+
+export default {
+ title: "Docs/Component Statuses",
+ parameters: {
+ options: { showPanel: false },
+ docs: { source: { state: "closed" } },
+ },
+};
+
+/**
+ * A component that displays the UI Widget Reusable Library components.
+ *
+ * Features:
+ * - Lists all reusable UI components from toolkit/content/widgets
+ * - Provides direct links to:
+ * - Individual component
+ * - Component source code in SearchFox
+ * - Related Bugzilla ticket
+ * - Shows implementation progress status for each component
+ *
+ * @see {@link https://bugzilla.mozilla.org/show_bug.cgi?id=1795301} Main tracking bug
+ */
+class ComponentStatusList extends LitElement {
+ static properties = {
+ _components: { state: true },
+ };
+
+ static styles = css`
+ tr td:first-of-type {
+ color-scheme: unset;
+ }
+
+ tr td {
+ border-bottom-color: var(--border-color);
+ }
+
+ /* the button look */
+ a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xsmall) var(--space-small);
+ border: var(--border-width) solid var(--border-color);
+ border-radius: var(--border-radius-small);
+ background: var(--button-background-color);
+ color: var(--link-color); /* prevent visited purple */
+ text-decoration: none;
+ line-height: 1;
+ min-inline-size: 0;
+ cursor: pointer;
+ }
+
+ /* hover/active */
+ a:hover {
+ background: var(--button-background-color-hover);
+ }
+
+ /* arrow only on external buttons */
+ a[target="_blank"]::after {
+ content: "↗" !important; /* wins over any earlier content:none */
+ margin-inline-start: var(--space-small);
+ font-size: var(--font-size-small);
+ line-height: 1;
+ opacity: 0.8;
+ }
+ `;
+
+ constructor() {
+ super();
+
+ this._components = Array.isArray(componentsData?.items)
+ ? componentsData.items
+ : [];
+ }
+
+ render() {
+ return html`
+ <link rel="stylesheet" href=${dsTokensTable} />
+ <header>
+ <h1>Component Statuses</h1>
+ <p>
+ Tracking
+ <a
+ href="https://bugzilla.mozilla.org/show_bug.cgi?id=1795301"
+ target="_blank"
+ rel="noreferrer"
+ >reusable components</a
+ >
+ from
+ <code>toolkit/content/widgets</code>.
+ </p>
+ </header>
+ <div class="table-wrapper">${this._renderTable()}</div>
+ `;
+ }
+
+ /******** Helpers *********/
+ // Get story Id href
+ _storyHrefFromId(storyId) {
+ return storyId ? `/?path=/story/${storyId}` : "#";
+ }
+
+ _renderLinkGroup(it) {
+ const storyHref = this._storyHrefFromId(it.storyId);
+ const links = [["Story", storyHref, { top: true }]];
+ if (it.sourceUrl) {
+ links.push(["Source", it.sourceUrl, { top: false }]);
+ }
+ const bugUrl = it.bugUrl;
+ if (bugUrl && /bugzilla\.mozilla\.org/.test(bugUrl)) {
+ links.push(["Bugzilla", bugUrl, { top: false }]);
+ }
+
+ return html`
+ ${links.map(
+ ([label, href, opts = {}]) => html`
+ <a
+ href=${href}
+ rel="noreferrer"
+ target=${opts.top ? "_top" : "_blank"}
+ >
+ ${label}
+ </a>
+ `
+ )}
+ `;
+ }
+
+ _renderTable() {
+ return html`
+ <table class="token-table">
+ <thead>
+ <tr>
+ <th>Component</th>
+ <th>Status</th>
+ <th>Links</th>
+ </tr>
+ </thead>
+ <tbody>
+ ${this._components.map(
+ it => html`
+ <tr>
+ <td>
+ <a
+ href=${this._storyHrefFromId(it.storyId)}
+ target="_top"
+ rel="noreferrer"
+ >
+ ${it.component}
+ </a>
+ </td>
+ <td>${it.status ?? "unknown"}</td>
+ <td>${this._renderLinkGroup(it)}</td>
+ </tr>
+ `
+ )}
+ </tbody>
+ </table>
+ `;
+ }
+}
+
+customElements.define("component-status-list", ComponentStatusList);
+
+export const Default = () => {
+ return html`<component-status-list></component-status-list>`;
+};
diff --git a/browser/components/storybook/component-status/components.json b/browser/components/storybook/component-status/components.json
@@ -0,0 +1,258 @@
+{
+ "generatedAt": "2025-09-23T22:31:46.034Z",
+ "count": 28,
+ "items": [
+ {
+ "component": "moz-badge",
+ "title": "UI Widgets/Badge",
+ "status": "in-development",
+ "storyId": "ui-widgets-badge--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-badge--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-badge",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1987750"
+ },
+ {
+ "component": "moz-box-button",
+ "title": "UI Widgets/Box Button",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-button--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-button--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-button",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1855803"
+ },
+ {
+ "component": "moz-box-group",
+ "title": "UI Widgets/Box Group",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941000"
+ },
+ {
+ "component": "moz-box-item",
+ "title": "UI Widgets/Box Item",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-item--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-item--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-item",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1956560"
+ },
+ {
+ "component": "moz-box-link",
+ "title": "UI Widgets/Box Link",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-link--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-link--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-link",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941939"
+ },
+ {
+ "component": "moz-breadcrumb-group",
+ "title": "UI Widgets/Breadcrumb Group",
+ "status": "in-development",
+ "storyId": "ui-widgets-breadcrumb-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-breadcrumb-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-breadcrumb-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1948410"
+ },
+ {
+ "component": "moz-button",
+ "title": "UI Widgets/Button",
+ "status": "stable",
+ "storyId": "ui-widgets-button--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-button--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-button",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1855803"
+ },
+ {
+ "component": "moz-button-group",
+ "title": "UI Widgets/Button Group",
+ "status": "stable",
+ "storyId": "ui-widgets-button-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-button-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-button-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1801325"
+ },
+ {
+ "component": "moz-card",
+ "title": "UI Widgets/Card",
+ "status": "stable",
+ "storyId": "ui-widgets-card--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-card--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-card",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1846844"
+ },
+ {
+ "component": "moz-checkbox",
+ "title": "UI Widgets/Checkbox",
+ "status": "in-development",
+ "storyId": "ui-widgets-checkbox--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-checkbox--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-checkbox",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1894485"
+ },
+ {
+ "component": "moz-fieldset",
+ "title": "UI Widgets/Fieldset",
+ "status": "in-development",
+ "storyId": "ui-widgets-fieldset--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-fieldset--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-fieldset",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1980498"
+ },
+ {
+ "component": "moz-five-star",
+ "title": "UI Widgets/Five Star",
+ "status": "in-development",
+ "storyId": "ui-widgets-five-star--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-five-star--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-five-star",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1856385"
+ },
+ {
+ "component": "moz-input-color",
+ "title": "UI Widgets/Input Color",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-color--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-color--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-color",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1889950"
+ },
+ {
+ "component": "moz-input-folder",
+ "title": "UI Widgets/Input Folder",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-folder--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-folder--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-folder",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941432"
+ },
+ {
+ "component": "moz-input-password",
+ "title": "UI Widgets/Input Password",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-password--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-password--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-password",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941060"
+ },
+ {
+ "component": "moz-input-search",
+ "title": "UI Widgets/Input Search",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-search--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-search--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-search",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1801329"
+ },
+ {
+ "component": "moz-input-text",
+ "title": "UI Widgets/Input Text",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-text--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-text--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-text",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1912089"
+ },
+ {
+ "component": "moz-label",
+ "title": "UI Widgets/Label",
+ "status": "stable",
+ "storyId": "ui-widgets-label--accesskey",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-label--accesskey",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-label",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1878744"
+ },
+ {
+ "component": "moz-message-bar",
+ "title": "UI Widgets/Message Bar",
+ "status": "stable",
+ "storyId": "ui-widgets-message-bar--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-message-bar--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-message-bar",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1837469"
+ },
+ {
+ "component": "moz-page-nav",
+ "title": "UI Widgets/Page Nav",
+ "status": "in-development",
+ "storyId": "ui-widgets-page-nav--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-page-nav--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-page-nav",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1878042"
+ },
+ {
+ "component": "moz-promo",
+ "title": "UI Widgets/Promo",
+ "status": "in-development",
+ "storyId": "ui-widgets-promo--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-promo--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-promo",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1966422"
+ },
+ {
+ "component": "moz-radio-group",
+ "title": "UI Widgets/Radio Group",
+ "status": "in-development",
+ "storyId": "ui-widgets-radio-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-radio-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-radio-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1894497"
+ },
+ {
+ "component": "moz-reorderable-list",
+ "title": "UI Widgets/Reorderable List",
+ "status": "in-development",
+ "storyId": "ui-widgets-reorderable-list--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-reorderable-list--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-reorderable-list",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1828933"
+ },
+ {
+ "component": "moz-select",
+ "title": "UI Widgets/Select",
+ "status": "in-development",
+ "storyId": "ui-widgets-select--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-select--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-select",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1931441"
+ },
+ {
+ "component": "moz-support-link",
+ "title": "UI Widgets/Support Link",
+ "status": "stable",
+ "storyId": "ui-widgets-support-link--withamourl",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-support-link--withamourl",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-support-link",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1801924"
+ },
+ {
+ "component": "moz-toggle",
+ "title": "UI Widgets/Toggle",
+ "status": "stable",
+ "storyId": "ui-widgets-toggle--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-toggle--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-toggle",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1799466"
+ },
+ {
+ "component": "moz-visual-picker",
+ "title": "UI Widgets/Visual Picker",
+ "status": "in-development",
+ "storyId": "ui-widgets-visual-picker--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-visual-picker--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-visual-picker",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941063"
+ },
+ {
+ "component": "panel-list",
+ "title": "UI Widgets/Panel List",
+ "status": "stable",
+ "storyId": "ui-widgets-panel-list--simple",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-panel-list--simple",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/panel-list",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1811282"
+ }
+ ]
+}
diff --git a/browser/components/storybook/component-status/data/bug-ids.json b/browser/components/storybook/component-status/data/bug-ids.json
@@ -0,0 +1,30 @@
+{
+ "moz-badge": 1987750,
+ "moz-box-button": 1855803,
+ "moz-box-group": 1941000,
+ "moz-box-item": 1956560,
+ "moz-box-link": 1941939,
+ "moz-breadcrumb-group": 1948410,
+ "moz-button": 1855803,
+ "moz-button-group": 1801325,
+ "moz-card": 1846844,
+ "moz-checkbox": 1894485,
+ "moz-fieldset": 1980498,
+ "moz-five-star": 1856385,
+ "moz-input-color": 1889950,
+ "moz-input-folder": 1941432,
+ "moz-input-password": 1941060,
+ "moz-input-search": 1801329,
+ "moz-input-text": 1912089,
+ "moz-label": 1878744,
+ "moz-message-bar": 1837469,
+ "moz-page-nav": 1878042,
+ "moz-promo": 1966422,
+ "moz-radio-group": 1894497,
+ "moz-reorderable-list": 1828933,
+ "moz-select": 1931441,
+ "moz-support-link": 1801924,
+ "moz-toggle": 1799466,
+ "moz-visual-picker": 1941063,
+ "panel-list": 1811282
+}
diff --git a/browser/components/storybook/components.json b/browser/components/storybook/components.json
@@ -0,0 +1,258 @@
+{
+ "generatedAt": "2025-09-23T22:28:27.469Z",
+ "count": 28,
+ "items": [
+ {
+ "component": "moz-badge",
+ "title": "UI Widgets/Badge",
+ "status": "in-development",
+ "storyId": "ui-widgets-badge--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-badge--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-badge",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1987750"
+ },
+ {
+ "component": "moz-box-button",
+ "title": "UI Widgets/Box Button",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-button--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-button--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-button",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1855803"
+ },
+ {
+ "component": "moz-box-group",
+ "title": "UI Widgets/Box Group",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941000"
+ },
+ {
+ "component": "moz-box-item",
+ "title": "UI Widgets/Box Item",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-item--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-item--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-item",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1956560"
+ },
+ {
+ "component": "moz-box-link",
+ "title": "UI Widgets/Box Link",
+ "status": "in-development",
+ "storyId": "ui-widgets-box-link--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-box-link--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-box-link",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941939"
+ },
+ {
+ "component": "moz-breadcrumb-group",
+ "title": "UI Widgets/Breadcrumb Group",
+ "status": "in-development",
+ "storyId": "ui-widgets-breadcrumb-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-breadcrumb-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-breadcrumb-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1948410"
+ },
+ {
+ "component": "moz-button",
+ "title": "UI Widgets/Button",
+ "status": "stable",
+ "storyId": "ui-widgets-button--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-button--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-button",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1855803"
+ },
+ {
+ "component": "moz-button-group",
+ "title": "UI Widgets/Button Group",
+ "status": "stable",
+ "storyId": "ui-widgets-button-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-button-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-button-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1801325"
+ },
+ {
+ "component": "moz-card",
+ "title": "UI Widgets/Card",
+ "status": "stable",
+ "storyId": "ui-widgets-card--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-card--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-card",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1846844"
+ },
+ {
+ "component": "moz-checkbox",
+ "title": "UI Widgets/Checkbox",
+ "status": "in-development",
+ "storyId": "ui-widgets-checkbox--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-checkbox--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-checkbox",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1894485"
+ },
+ {
+ "component": "moz-fieldset",
+ "title": "UI Widgets/Fieldset",
+ "status": "in-development",
+ "storyId": "ui-widgets-fieldset--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-fieldset--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-fieldset",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1980498"
+ },
+ {
+ "component": "moz-five-star",
+ "title": "UI Widgets/Five Star",
+ "status": "in-development",
+ "storyId": "ui-widgets-five-star--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-five-star--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-five-star",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1856385"
+ },
+ {
+ "component": "moz-input-color",
+ "title": "UI Widgets/Input Color",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-color--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-color--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-color",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1889950"
+ },
+ {
+ "component": "moz-input-folder",
+ "title": "UI Widgets/Input Folder",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-folder--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-folder--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-folder",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941432"
+ },
+ {
+ "component": "moz-input-password",
+ "title": "UI Widgets/Input Password",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-password--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-password--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-password",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941060"
+ },
+ {
+ "component": "moz-input-search",
+ "title": "UI Widgets/Input Search",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-search--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-search--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-search",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1801329"
+ },
+ {
+ "component": "moz-input-text",
+ "title": "UI Widgets/Input Text",
+ "status": "in-development",
+ "storyId": "ui-widgets-input-text--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-input-text--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-text",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1912089"
+ },
+ {
+ "component": "moz-label",
+ "title": "UI Widgets/Label",
+ "status": "stable",
+ "storyId": "ui-widgets-label--accesskey",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-label--accesskey",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-label",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1878744"
+ },
+ {
+ "component": "moz-message-bar",
+ "title": "UI Widgets/Message Bar",
+ "status": "stable",
+ "storyId": "ui-widgets-message-bar--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-message-bar--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-message-bar",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1837469"
+ },
+ {
+ "component": "moz-page-nav",
+ "title": "UI Widgets/Page Nav",
+ "status": "in-development",
+ "storyId": "ui-widgets-page-nav--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-page-nav--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-page-nav",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1878042"
+ },
+ {
+ "component": "moz-promo",
+ "title": "UI Widgets/Promo",
+ "status": "in-development",
+ "storyId": "ui-widgets-promo--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-promo--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-promo",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1966422"
+ },
+ {
+ "component": "moz-radio-group",
+ "title": "UI Widgets/Radio Group",
+ "status": "in-development",
+ "storyId": "ui-widgets-radio-group--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-radio-group--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-radio-group",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1894497"
+ },
+ {
+ "component": "moz-reorderable-list",
+ "title": "UI Widgets/Reorderable List",
+ "status": "in-development",
+ "storyId": "ui-widgets-reorderable-list--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-reorderable-list--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-reorderable-list",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1828933"
+ },
+ {
+ "component": "moz-select",
+ "title": "UI Widgets/Select",
+ "status": "in-development",
+ "storyId": "ui-widgets-select--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-select--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-select",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1931441"
+ },
+ {
+ "component": "moz-support-link",
+ "title": "UI Widgets/Support Link",
+ "status": "stable",
+ "storyId": "ui-widgets-support-link--withamourl",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-support-link--withamourl",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-support-link",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1801924"
+ },
+ {
+ "component": "moz-toggle",
+ "title": "UI Widgets/Toggle",
+ "status": "stable",
+ "storyId": "ui-widgets-toggle--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-toggle--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-toggle",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1799466"
+ },
+ {
+ "component": "moz-visual-picker",
+ "title": "UI Widgets/Visual Picker",
+ "status": "in-development",
+ "storyId": "ui-widgets-visual-picker--default",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-visual-picker--default",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-visual-picker",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1941063"
+ },
+ {
+ "component": "panel-list",
+ "title": "UI Widgets/Panel List",
+ "status": "stable",
+ "storyId": "ui-widgets-panel-list--simple",
+ "storyUrl": "https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-panel-list--simple",
+ "sourceUrl": "https://searchfox.org/firefox-main/source/toolkit/content/widgets/panel-list",
+ "bugUrl": "https://bugzilla.mozilla.org/show_bug.cgi?id=1811282"
+ }
+ ]
+}
diff --git a/browser/components/storybook/package.json b/browser/components/storybook/package.json
@@ -2,10 +2,11 @@
"description": "",
"main": "index.js",
"scripts": {
+ "status:json": "node ./component-status/build-components-status.mjs",
"analyze": "cem analyze",
"test": "echo \"Error: no test specified\" && exit 1",
- "build-storybook": "npm run analyze && storybook build",
- "storybook": "npm run analyze && storybook dev -p 5703 --no-open"
+ "build-storybook": "npm run status:json && npm run analyze && storybook build",
+ "storybook": "npm run status:json && npm run analyze && storybook dev -p 5703 --no-open"
},
"author": "",
"license": "MPL-2.0",
