diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx index 9a07b08098..60aa443176 100644 --- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx +++ b/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, diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx index 8adc982f91..8dae7298aa 100644 --- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx +++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.tsx @@ -37,7 +37,10 @@ export interface UrlPreviewGroupViewActions { export type UrlPreviewGroupViewModel = ViewModel; /** - * 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(); diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx index 7984d70ab9..f22c0e5edd 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx @@ -17,6 +17,12 @@ export interface Props { vm: ViewModel; } +/** + * 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
{snapshot.content}
; diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx index 44011704bd..8b1fc95164 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx +++ b/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, diff --git a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx index 7d4b7b0f64..82e391bec7 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.tsx @@ -42,6 +42,12 @@ interface RedactedBodyViewProps { ref?: Ref; } +/** + * 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): JSX.Element { const { text, tooltip } = useViewModel(vm); diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx index aabde86295..340bed6bd8 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx +++ b/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, diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx index f7a4c615b7..ac89e8de0e 100644 --- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRow.stories.tsx +++ b/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; -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, diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx index db7efb8ecd..6268de3024 100644 --- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/ReactionsRowView.tsx +++ b/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): JSX.Element { const { ariaLabel, diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx index 907228a173..6001d1bf52 100644 --- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButton.stories.tsx +++ b/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 & tooltipOpen?: ReactionsRowButtonTooltipViewSnapshot["tooltipOpen"]; }; -const ReactionsRowButtonViewWrapper = ({ +const ReactionsRowButtonViewWrapperImpl = ({ tooltipFormattedSenders, tooltipCaption, tooltipOpen, @@ -54,6 +55,8 @@ const ReactionsRowButtonViewWrapper = ({ return ; }; +const ReactionsRowButtonViewWrapper = withViewDocs(ReactionsRowButtonViewWrapperImpl, ReactionsRowButtonView); + const meta = { title: "MessageBody/ReactionsRowButton", component: ReactionsRowButtonViewWrapper, diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx index 3d57c96d42..2e6e346130 100644 --- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/ReactionsRowButtonView.tsx +++ b/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): JSX.Element { const snapshot = useViewModel(vm) as ReactionsRowButtonViewSnapshot & { ariaLabel?: string };