Merge branch 'develop' into refactor/ReactionsRowButton

Author: ZacksBot

.eslintrc.cjs

@@ -199,6 +199,7 @@ module.exports = {
             files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}", "playwright/**/*.ts", "*.ts"],
             extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
             rules: {
+                "@typescript-eslint/unbound-method": ["error", { ignoreStatic: true }],
                 "@typescript-eslint/explicit-function-return-type": [
                     "error",
                     {
@@ -238,6 +239,7 @@ module.exports = {
                 "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/explicit-member-accessibility": "off",
                 "@typescript-eslint/no-empty-object-type": "off",
+                "@typescript-eslint/unbound-method": "off",
 
                 // Jest/Playwright specific
 

docs/MVVM.md

@@ -47,7 +47,7 @@ interface FooViewActions {
 
 // ViewModel is an object (usually a class) that implements both the interfaces listed above.
 // https://github.com/element-hq/element-web/blob/develop/packages/shared-components/src/ViewModel.ts
-export type FooViewModel = ViewModel<FooViewSnapshot> & FooViewActions;
+export type FooViewModel = ViewModel<FooViewSnapshot, FooViewActions>;
 
 interface FooViewProps {
     // Ideally the view only depends on the view model i.e you don't expect any other props here.

package.json

@@ -252,7 +252,6 @@
         "prettier": "3.8.1",
         "process": "^0.11.10",
         "raw-loader": "^4.0.2",
-        "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
         "stylelint": "^17.0.0",

packages/shared-components/.eslintrc.cjs

@@ -9,9 +9,10 @@ module.exports = {
     root: true,
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
     extends: [
-        "plugin:matrix-org/babel",
         "plugin:matrix-org/react",
         "plugin:matrix-org/a11y",
+        "plugin:matrix-org/typescript",
+        "plugin:matrix-org/react",
         "plugin:storybook/recommended",
     ],
     parserOptions: {
@@ -42,37 +43,36 @@ module.exports = {
                 ],
             },
         ],
+
+        "@typescript-eslint/unbound-method": ["error", { ignoreStatic: true }],
+        "@typescript-eslint/explicit-function-return-type": [
+            "error",
+            {
+                allowExpressions: true,
+            },
+        ],
+
+        // We're okay being explicit at the moment
+        // "@typescript-eslint/no-empty-interface": "off",
+        // We'd rather not do this but we do
+        // "@typescript-eslint/ban-ts-comment": "off",
+        // We're okay with assertion errors when we ask for them
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-empty-object-type": [
+            "error",
+            {
+                // We do this sometimes to brand interfaces
+                allowInterfaces: "with-single-extends",
+            },
+        ],
+        "storybook/meta-satisfies-type": "error",
     },
     overrides: [
         {
-            files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
-            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
+            files: ["src/**/*.test.{ts,tsx}"],
             rules: {
-                "@typescript-eslint/explicit-function-return-type": [
-                    "error",
-                    {
-                        allowExpressions: true,
-                    },
-                ],
-
-                // Remove Babel things manually due to override limitations
-                "@babel/no-invalid-this": ["off"],
-
-                // We're okay being explicit at the moment
-                "@typescript-eslint/no-empty-interface": "off",
-                // We disable this while we're transitioning
+                "@typescript-eslint/unbound-method": "off",
                 "@typescript-eslint/no-explicit-any": "off",
-                // We'd rather not do this but we do
-                "@typescript-eslint/ban-ts-comment": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-                "@typescript-eslint/no-empty-object-type": [
-                    "error",
-                    {
-                        // We do this sometimes to brand interfaces
-                        allowInterfaces: "with-single-extends",
-                    },
-                ],
             },
         },
     ],

packages/shared-components/.storybook/main.ts

@@ -49,6 +49,12 @@ const config: StorybookConfig = {
     },
     typescript: {
         reactDocgen: "react-docgen-typescript",
+        reactDocgenTypescriptOptions: {
+            // The default exclude is ["**/**.stories.tsx"] which prevents
+            // docgen from extracting snapshot field descriptions from wrapper
+            // components defined in story files.
+            exclude: [],
+        },
     },
     async viteFinal(config) {
         return mergeConfig(config, {

packages/shared-components/.storybook/withViewDocs.ts

@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+/**
+ * Copies the component description and props documentation from a View's
+ * `__docgenInfo` (injected at build time by Storybook's react-docgen-typescript
+ * Vite plugin) onto the story wrapper component.
+ *
+ * This lets Storybook's default `extractComponentDescription` pick up the
+ * View's JSDoc and display per-field descriptions in the ArgTypes table.
+ *
+ * **Important:** the wrapper must be defined as a named variable *before*
+ * being passed here so that react-docgen-typescript can extract its props.
+ *
+ * @example
+ * ```ts
+ * const MyViewWrapperImpl = (props: MyViewProps) => {
+ *     const vm = useMockedViewModel(props, {});
+ *     return <MyView vm={vm} />;
+ * };
+ * const MyViewWrapper = withViewDocs(MyViewWrapperImpl, MyView);
+ * ```
+ */
+export function withViewDocs<T extends (...args: never[]) => unknown>(wrapper: T, view: object): T {
+    const viewInfo = (view as { __docgenInfo?: DocgenInfo }).__docgenInfo;
+    const viewDescription = viewInfo?.description;
+    if (!viewDescription) return wrapper;
+
+    // The wrapper must be defined as a named variable (not inline) so that
+    // react-docgen-typescript can extract its props.  The docgen Vite plugin
+    // appends a `Wrapper.__docgenInfo = { … }` assignment at the *end* of the
+    // module, which runs **after** this function.  We install a setter trap so
+    // that the View's description is merged into the generated info.
+    let stored: DocgenInfo | undefined = (wrapper as { __docgenInfo?: DocgenInfo }).__docgenInfo;
+    Object.defineProperty(wrapper, "__docgenInfo", {
+        get() {
+            return stored;
+        },
+        set(incoming: DocgenInfo) {
+            stored = {
+                ...incoming,
+                description: incoming.description || viewDescription,
+            };
+        },
+        configurable: true,
+        enumerable: true,
+    });
+
+    // Also apply immediately for the current state.
+    stored = { ...stored, description: viewDescription };
+
+    return wrapper;
+}
+
+interface DocgenInfo {
+    description?: string;
+    props?: Record<string, unknown>;
+}

packages/shared-components/README.md

@@ -68,7 +68,7 @@ instance should be provided as a prop.
 
 Here's a basic example:
 
-```jsx
+```tsx
 import { ViewExample } from "@element-hq/web-shared-components";
 
 function MyApp() {
@@ -180,27 +180,32 @@ export const Disabled: Story = {
 
 #### MVVM Component Stories
 
-For MVVM components, create a wrapper component that uses `useMockedViewModel`:
+For MVVM components, create a wrapper component that uses `useMockedViewModel` and `withViewDocs`:
 
 ```tsx
 import React, { type JSX } from "react";
 import { fn } from "storybook/test";
-import type { Meta, StoryFn } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MyComponentView, type MyComponentViewSnapshot, type MyComponentViewActions } from "./MyComponentView";
-import { useMockedViewModel } from "../../useMockedViewModel";
+import { useMockedViewModel } from "../../viewmodel";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
 
 // Combine snapshot and actions for easier typing
 type MyComponentProps = MyComponentViewSnapshot & MyComponentViewActions;
 
-// Wrapper component that creates a mocked ViewModel
-const MyComponentViewWrapper = ({ onAction, ...rest }: MyComponentProps): JSX.Element => {
+// Wrapper component that creates a mocked ViewModel.
+// Must be a named variable (not inline) for docgen to extract its props.
+const MyComponentViewWrapperImpl = ({ onAction, ...rest }: MyComponentProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
         onAction,
     });
     return <MyComponentView vm={vm} />;
 };
+// withViewDocs copies the View's JSDoc description onto the wrapper for Storybook autodocs
+const MyComponentViewWrapper = withViewDocs(MyComponentViewWrapperImpl, MyComponentView);
 
-export default {
+// Must use `satisfies` (not `as` or `: Meta`) to preserve type info for docgen
+const meta = {
     title: "Category/MyComponentView",
     component: MyComponentViewWrapper,
     tags: ["autodocs"],
@@ -211,20 +216,29 @@ export default {
         // Action properties (callbacks)
         onAction: fn(),
     },
-} as Meta<typeof MyComponentViewWrapper>;
+} satisfies Meta<typeof MyComponentViewWrapper>;
 
-const Template: StoryFn<typeof MyComponentViewWrapper> = (args) => <MyComponentViewWrapper {...args} />;
+export default meta;
+type Story = StoryObj<typeof MyComponentViewWrapper>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};
 
-export const Loading = Template.bind({});
-Loading.args = {
-    isLoading: true,
+export const Loading: Story = {
+    args: {
+        isLoading: true,
+    },
 };
 ```
 
 Thanks to this approach, we can directly use primitives in the story arguments instead of a view model object.
 
+> [!IMPORTANT]
+> Three requirements must be met for snapshot field documentation to appear in Storybook's ArgTypes table:
+>
+> 1. **Named wrapper variable** — the wrapper must be assigned to a named `const` (e.g. `MyComponentViewWrapperImpl`) before being passed to `withViewDocs`, so that `react-docgen-typescript` can extract its props.
+> 2. **`withViewDocs` call** — wraps the wrapper component with the original View to copy the View's JSDoc description.
+> 3. **`satisfies Meta`** — the meta object must use `satisfies Meta<...>` (not `as Meta<...>` or `: Meta<...> =`). Type assertions and annotations erase the inferred component type that docgen relies on.
+
 #### Linking Figma Designs
 
 This package uses [@storybook/addon-designs](https://github.com/storybookjs/addon-designs) to embed Figma designs directly in Storybook. This helps developers compare their implementation with the design specs.
@@ -239,7 +253,7 @@ This package uses [@storybook/addon-designs](https://github.com/storybookjs/addo
 Example with Figma integration:
 
 ```tsx
-export default {
+const meta = {
     title: "Room List/RoomListSearchView",
     component: RoomListSearchViewWrapper,
     tags: ["autodocs"],
@@ -252,7 +266,9 @@ export default {
             url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel?node-id=98-1979",
         },
     },
-} as Meta<typeof RoomListSearchViewWrapper>;
+} satisfies Meta<typeof RoomListSearchViewWrapper>;
+
+export default meta;
 ```
 
 The Figma design will appear in the "Design" tab in Storybook.