Publish shared components storybook (#31907)

* doc: add typedoc generation for shared component

* ci: add SC doc publish

* ci: push doc on changes on develop

* ci: fix working directory

* doc: add typedoc generation into storybook

* doc: build i18n files for storybook static sites

* ci: change workflow to deploy storybook

* chore: exclude non-ui tests from vitest visual tests

* chore: try to fix error in CI

* doc: fix broken link in README

* doc: add typedoc missing export plugin

Add https://github.com/Gerrit0/typedoc-plugin-missing-exports to avoid
to have to explicit export all the types which are not used outside SC

* doc: add mapping to external docs

* fix: remove shebang

packages/shared-components/src/@types/global.d.ts

@@ -6,3 +6,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 declare module "*.css";
+
+// For importing markdown files into storybook stories
+declare module "*.md?raw" {
+    const content: string;
+    export default content;
+}

packages/shared-components/src/utils/FormattingUtils.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { Markdown } from "@storybook/addon-docs/blocks";
+
+import type { Meta } from "@storybook/react-vite";
+import formatBytesDoc from "../../typedoc/functions/formatBytes.md?raw";
+import formatSecondsDoc from "../../typedoc/functions/formatSeconds.md?raw";
+
+const meta = {
+    title: "utils/FormattingUtils",
+    parameters: {
+        docs: {
+            page: () => (
+                <>
+                    <h1>Formatting Utilities</h1>
+                    <p>A collection of utility functions for formatting data into human-readable strings.</p>
+
+                    <hr />
+                    <h2>formatBytes</h2>
+                    <Markdown>{formatBytesDoc}</Markdown>
+
+                    <hr />
+                    <h2>formatSeconds</h2>
+                    <Markdown>{formatSecondsDoc}</Markdown>
+                </>
+            ),
+        },
+    },
+    tags: ["autodocs", "skip-test"],
+} satisfies Meta;
+
+export default meta;
+
+// Docs-only story - renders nothing but triggers autodocs
+export const Docs = {
+    render: () => null,
+};

packages/shared-components/src/utils/humanize.stories.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { Markdown } from "@storybook/addon-docs/blocks";
+
+import type { Meta } from "@storybook/react-vite";
+import humanizeTimeDoc from "../../typedoc/functions/humanizeTime.md?raw";
+
+const meta = {
+    title: "utils/humanize",
+    parameters: {
+        docs: {
+            page: () => (
+                <>
+                    <h1>humanize</h1>
+                    <Markdown>{humanizeTimeDoc}</Markdown>
+                </>
+            ),
+        },
+    },
+    tags: ["autodocs", "skip-test"],
+} satisfies Meta;
+
+export default meta;
+
+// Docs-only story - renders nothing but triggers autodocs
+export const Docs = {
+    render: () => null,
+};

packages/shared-components/src/utils/numbers.stories.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { Markdown } from "@storybook/addon-docs/blocks";
+
+import type { Meta } from "@storybook/react-vite";
+import clampDoc from "../../typedoc/functions/clamp.md?raw";
+import defaultNumberDoc from "../../typedoc/functions/defaultNumber.md?raw";
+import percentageOfDoc from "../../typedoc/functions/percentageOf.md?raw";
+import percentageWithinDoc from "../../typedoc/functions/percentageWithin.md?raw";
+import sumDoc from "../../typedoc/functions/sum.md?raw";
+
+const meta = {
+    title: "utils/numbers",
+    parameters: {
+        docs: {
+            page: () => (
+                <>
+                    <h1>Number Utilities</h1>
+                    <p>
+                        A collection of utility functions for working with numbers, including validation, clamping, and
+                        percentage calculations.
+                    </p>
+
+                    <hr />
+                    <h2>defaultNumber</h2>
+                    <Markdown>{defaultNumberDoc}</Markdown>
+
+                    <hr />
+                    <h2>clamp</h2>
+                    <Markdown>{clampDoc}</Markdown>
+
+                    <hr />
+                    <h2>sum</h2>
+                    <Markdown>{sumDoc}</Markdown>
+
+                    <hr />
+                    <h2>percentageWithin</h2>
+                    <Markdown>{percentageWithinDoc}</Markdown>
+
+                    <hr />
+                    <h2>percentageOf</h2>
+                    <Markdown>{percentageOfDoc}</Markdown>
+                </>
+            ),
+        },
+    },
+    tags: ["autodocs", "skip-test"],
+} satisfies Meta;
+
+export default meta;
+
+// Docs-only story - renders nothing but triggers autodocs
+export const Docs = {
+    render: () => null,
+};