Fix missing Storybook autodocs descriptions for shared components (#33135)

packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx

@@ -18,10 +18,11 @@ import {
 } from "./UrlPreviewGroupView";
 import { useMockedViewModel } from "../../core/viewmodel";
 import { LinkedTextContext } from "../../core/utils/LinkedText";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
 
 type UrlPreviewGroupViewProps = UrlPreviewGroupViewSnapshot & UrlPreviewGroupViewActions;
 
-const UrlPreviewGroupViewWrapper = ({
+const UrlPreviewGroupViewWrapperImpl = ({
     onHideClick,
     onImageClick,
     onTogglePreviewLimit,
@@ -39,6 +40,8 @@ const UrlPreviewGroupViewWrapper = ({
     );
 };
 
+const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);
+
 export default {
     title: "Event/UrlPreviewGroupView",
     component: UrlPreviewGroupViewWrapper,

packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx

@@ -37,7 +37,10 @@ export interface UrlPreviewGroupViewActions {
 export type UrlPreviewGroupViewModel = ViewModel<UrlPreviewGroupViewSnapshot, UrlPreviewGroupViewActions>;
 
 /**
- * UrlPreviewGroupView renders a list of URL previews for a single event.
+ * Renders the URL preview group attached to a single event.
+ *
+ * The view lays out one or more link previews, can collapse or expand
+ * overflowed previews, and exposes a control to hide the group.
  */
 export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Element | null {
     const { translate: _t } = useI18n();

packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx

@@ -17,6 +17,12 @@ export interface Props {
     vm: ViewModel<TextualEventViewSnapshot>;
 }
 
+/**
+ * Renders a plain textual timeline event without message-body decorations.
+ *
+ * This view is used for simple informational timeline entries where the
+ * content is already prepared by the view model.
+ */
 export function TextualEventView({ vm }: Props): JSX.Element {
     const snapshot = useViewModel(vm);
     return <div className="mx_TextualEvent">{snapshot.content}</div>;

packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx

@@ -127,6 +127,12 @@ interface VideoBodyViewProps {
     children?: PropsWithChildren["children"];
 }
 
+/**
+ * Renders the body of a video message with ready, hidden, loading, and error states.
+ *
+ * The media frame preserves layout while loading and can render
+ * supplemental content such as a file body row after the video.
+ */
 export function VideoBodyView({
     vm,
     className,

packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx

@@ -42,6 +42,12 @@ interface RedactedBodyViewProps {
     ref?: Ref<HTMLSpanElement>;
 }
 
+/**
+ * Renders the body for a redacted event.
+ *
+ * The view shows the delete icon with localized redaction text and can
+ * optionally wrap the content in a tooltip for extra context.
+ */
 export function RedactedBodyView({ vm, className, ref }: Readonly<RedactedBodyViewProps>): JSX.Element {
     const { text, tooltip } = useViewModel(vm);
 

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx

@@ -143,6 +143,13 @@ function attachBodyRef(body: ReactElement, bodyRef?: TextualBodyContentRef): Rea
     return cloneElement(body as ReactElement<{ ref?: TextualBodyContentRef }>, { ref: bodyRef });
 }
 
+/**
+ * Renders a textual message body for timeline events.
+ *
+ * The view supports text, notice, emote, and caption layouts, optional
+ * link or action wrappers, edited and moderation markers, and appended
+ * URL previews.
+ */
 export function TextualBodyView({
     vm,
     body,

packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx

@@ -11,6 +11,7 @@ import { fn } from "storybook/test";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ReactionsRowButtonView } from "../ReactionsRowButton";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
 import { ReactionsRowView, type ReactionsRowViewActions, type ReactionsRowViewSnapshot } from "./ReactionsRowView";
 
 interface MockReactionButtonProps {
@@ -56,7 +57,7 @@ const DefaultReactionButtons = (): JSX.Element => (
 
 type WrapperProps = ReactionsRowViewSnapshot & Partial<ReactionsRowViewActions>;
 
-const ReactionsRowViewWrapper = ({
+const ReactionsRowViewWrapperImpl = ({
     onShowAllClick,
     onAddReactionClick,
     onAddReactionContextMenu,
@@ -77,6 +78,8 @@ const ReactionsRowViewWrapper = ({
     );
 };
 
+const ReactionsRowViewWrapper = withViewDocs(ReactionsRowViewWrapperImpl, ReactionsRowView);
+
 const meta = {
     title: "MessageBody/ReactionsRow",
     component: ReactionsRowViewWrapper,

packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx

@@ -81,6 +81,12 @@ interface ReactionsRowViewProps {
     children?: PropsWithChildren["children"];
 }
 
+/**
+ * Renders the reactions toolbar for an event tile.
+ *
+ * The row can show individual reaction buttons, an optional "show all"
+ * control, and the add-reaction affordance.
+ */
 export function ReactionsRowView({ vm, className, children }: Readonly<ReactionsRowViewProps>): JSX.Element {
     const {
         ariaLabel,

packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx

@@ -10,6 +10,7 @@ import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
 import { type ReactionsRowButtonTooltipViewSnapshot } from "../ReactionsRowButtonTooltip";
 import {
     ReactionsRowButtonView,
@@ -25,7 +26,7 @@ type WrapperProps = Omit<ReactionsRowButtonViewSnapshot, "tooltipVm"> &
         tooltipOpen?: ReactionsRowButtonTooltipViewSnapshot["tooltipOpen"];
     };
 
-const ReactionsRowButtonViewWrapper = ({
+const ReactionsRowButtonViewWrapperImpl = ({
     tooltipFormattedSenders,
     tooltipCaption,
     tooltipOpen,
@@ -54,6 +55,8 @@ const ReactionsRowButtonViewWrapper = ({
     return <ReactionsRowButtonView vm={vm} />;
 };
 
+const ReactionsRowButtonViewWrapper = withViewDocs(ReactionsRowButtonViewWrapperImpl, ReactionsRowButtonView);
+
 const meta = {
     title: "MessageBody/ReactionsRowButton",
     component: ReactionsRowButtonViewWrapper,

packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx

@@ -64,7 +64,10 @@ interface ReactionsRowButtonViewProps {
 }
 
 /**
- * Renders the reaction button in a reactions row.
+ * Renders a single reaction button within a reactions row.
+ *
+ * The button supports text or image reactions, selected and disabled
+ * styling, and wraps its content in the reactions tooltip view.
  */
 export function ReactionsRowButtonView({ vm }: Readonly<ReactionsRowButtonViewProps>): JSX.Element {
     const snapshot = useViewModel(vm) as ReactionsRowButtonViewSnapshot & { ariaLabel?: string };