Update shared-components story titles to match component paths (#33157)

* Align shared-components Storybook titles with their current paths. * Rechange the structure for better navigation on storybook * Update Placement of RoomlistToast to correct catagory * Update for easier reading * Adding space for better reading. * Add spacing for Timeline Event * add spacing to timeline meta for better reading * add spacing for better reading for timeline reaction * Fix wrong placement of Imagebody * Final Update of structure of shared components * Update storybook for urlpreviewgroupview
2026-05-04 11:51:36 +02:00 · 2026-04-28 11:55:48 +02:00 · 2026-04-28 11:55:48 +02:00 · 1dd5748d6f
commit 1dd5748d6f
parent d3a395b18b
44 changed files with 48 additions and 46 deletions
--- a/packages/shared-components/README.md
+++ b/packages/shared-components/README.md
@ -127,6 +127,8 @@ components that don't need a view model.

 All components should have accompanying Storybook stories for documentation and visual testing. Stories are written in TypeScript using the [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf).

+Use shallow, browse-oriented story titles such as `RoomList/RoomListSearchView` or `TimelineBody/DecryptionFailureBodyView`. Do not mirror the full source path in the Storybook title.
+
 #### Story File Structure

 Place the story file next to the component with the `.stories.tsx` extension:
@ -254,7 +256,7 @@ Example with Figma integration:

 ```tsx
 const meta = {
-    title: "Room List/RoomListSearchView",
+    title: "RoomList/RoomListSearchView",
    component: RoomListSearchViewWrapper,
    tags: ["autodocs"],
    args: {
@ -277,7 +279,7 @@ The Figma design will appear in the "Design" tab in Storybook.

 For utility functions, helpers, and other non-UI exports, create documentation stories using TSX format with TypeDoc-generated markdown.

-`src/utils/humanize.stories.tsx`
+`src/core/utils/humanize.stories.tsx`

 ```tsx
 import React from "react";
@ -287,7 +289,7 @@ import type { Meta } from "@storybook/react-vite";
 import humanizeTimeDoc from "../../typedoc/functions/humanizeTime.md?raw";

 const meta = {
-    title: "utils/humanize",
+    title: "Core/Humanize",
    parameters: {
        docs: {
            page: () => (
--- a/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.stories.tsx
+++ b/packages/shared-components/src/core/AvatarWithDetails/AvatarWithDetails.stories.tsx
@ -11,7 +11,7 @@ import { type Meta, type StoryObj } from "@storybook/react-vite";
 import { AvatarWithDetails } from "./AvatarWithDetails";

 const meta = {
-    title: "core/AvatarWithDetails",
+    title: "Core/AvatarWithDetails",
    component: AvatarWithDetails,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/core/VirtualizedList/FlatVirtualizedList/FlatVirtualizedList.stories.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/FlatVirtualizedList/FlatVirtualizedList.stories.tsx
@ -14,7 +14,7 @@ import { items, SimpleItemComponent } from "../story-mock";
 import { getContainerAccessibleProps, getItemAccessibleProps } from "../accessbility";

 const meta = {
-    title: "Utils/VirtualizedList/FlatVirtualizedList",
+    title: "Core/FlatVirtualizedList",
    component: FlatVirtualizedList<SimpleItemComponent, undefined>,
    parameters: {
        docs: {
--- a/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.stories.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.stories.tsx
@ -17,7 +17,7 @@ import { getContainerAccessibleProps, getGroupHeaderAccessibleProps, getItemAcce
 const totalRows = groups.reduce((total, group) => total + 1 + group.items.length, 0);

 const meta = {
-    title: "Utils/VirtualizedList/GroupedVirtualizedList",
+    title: "Core/GroupedVirtualizedList",
    component: GroupedVirtualizedList<SimpleGroupHeader, SimpleItemComponent, undefined>,
    parameters: {
        docs: {
--- a/packages/shared-components/src/core/pill-input/Pill/Pill.stories.tsx
+++ b/packages/shared-components/src/core/pill-input/Pill/Pill.stories.tsx
@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Pill } from "./Pill";

 const meta = {
-    title: "PillInput/Pill",
+    title: "Core/Pill",
    component: Pill,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/core/pill-input/PillInput/PillInput.stories.tsx
+++ b/packages/shared-components/src/core/pill-input/PillInput/PillInput.stories.tsx
@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PillInput } from "./PillInput";

 const meta = {
-    title: "PillInput/PillInput",
+    title: "Core/PillInput",
    component: PillInput,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/core/rich-list/RichItem/RichItem.stories.tsx
+++ b/packages/shared-components/src/core/rich-list/RichItem/RichItem.stories.tsx
@ -14,7 +14,7 @@ import { RichItem } from "./RichItem";
 const currentTimestamp = new Date("2025-03-09T12:00:00Z").getTime();

 const meta = {
-    title: "RichList/RichItem",
+    title: "Core/RichItem",
    component: RichItem,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/core/rich-list/RichList/RichList.stories.tsx
+++ b/packages/shared-components/src/core/rich-list/RichList/RichList.stories.tsx
@ -14,7 +14,7 @@ import { RichItem } from "../RichItem";
 const avatar = <div style={{ width: 32, height: 32, backgroundColor: "#ccc", borderRadius: "50%" }} />;

 const meta = {
-    title: "RichList/RichList",
+    title: "Core/RichList",
    component: RichList,
    tags: ["autodocs"],
    decorators: [
--- a/packages/shared-components/src/core/utils/FormattingUtils.stories.tsx
+++ b/packages/shared-components/src/core/utils/FormattingUtils.stories.tsx
@ -13,7 +13,7 @@ import formatBytesDoc from "../../../typedoc/functions/formatBytes.md?raw";
 import formatSecondsDoc from "../../../typedoc/functions/formatSeconds.md?raw";

 const meta = {
-    title: "utils/FormattingUtils",
+    title: "Core/FormattingUtils",
    parameters: {
        docs: {
            page: () => (
--- a/packages/shared-components/src/core/utils/LinkedText/LinkedText.stories.tsx
+++ b/packages/shared-components/src/core/utils/LinkedText/LinkedText.stories.tsx
@ -13,7 +13,7 @@ import { LinkedText } from "./LinkedText";
 import { LinkedTextContext } from "./LinkedTextContext";

 const meta = {
-    title: "Utils/LinkedText",
+    title: "Core/LinkedText",
    component: LinkedText,
    decorators: [
        (Story, { args }) => (
--- a/packages/shared-components/src/core/utils/humanize.stories.tsx
+++ b/packages/shared-components/src/core/utils/humanize.stories.tsx
@ -12,7 +12,7 @@ import type { Meta } from "@storybook/react-vite";
 import humanizeTimeDoc from "../../../typedoc/functions/humanizeTime.md?raw";

 const meta = {
-    title: "utils/humanize",
+    title: "Core/Humanize",
    parameters: {
        docs: {
            page: () => (
--- a/packages/shared-components/src/core/utils/linkify.stories.tsx
+++ b/packages/shared-components/src/core/utils/linkify.stories.tsx
@ -18,7 +18,7 @@ import generateLinkedTextOptions from "../../../typedoc/functions/generateLinked
 import LinkedTextOptions from "../../../typedoc/interfaces/LinkedTextOptions.md?raw";

 const meta = {
-    title: "utils/linkify",
+    title: "Core/Linkify",
    parameters: {
        docs: {
            page: () => (
--- a/packages/shared-components/src/core/utils/numbers.stories.tsx
+++ b/packages/shared-components/src/core/utils/numbers.stories.tsx
@ -16,7 +16,7 @@ import percentageWithinDoc from "../../../typedoc/functions/percentageWithin.md?
 import sumDoc from "../../../typedoc/functions/sum.md?raw";

 const meta = {
-    title: "utils/numbers",
+    title: "Core/Numbers",
    parameters: {
        docs: {
            page: () => (
--- a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { RoomListToast } from "./RoomListToast";

 const meta = {
-    title: "Room List/RoomListView/RoomListToast",
+    title: "Room List/RoomListToast",
    component: RoomListToast,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
@ -13,7 +13,7 @@ import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWra
 import { createMockRoomItemViewModel, renderAvatar } from "../../story-mocks";

 const meta = {
-    title: "Room List/RoomListItemAccessibiltyWrapper",
+    title: "Room List/RoomListItemAccessibilityWrapper",
    component: RoomListItemAccessibilityWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.stories.tsx
+++ b/packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.stories.tsx
@ -37,7 +37,7 @@ const RoomStatusBarViewWrapperImpl = ({
 const RoomStatusBarViewWrapper = withViewDocs(RoomStatusBarViewWrapperImpl, RoomStatusBarView);

 const meta = {
-    title: "room/RoomStatusBarView",
+    title: "Room/RoomStatusBarView",
    component: RoomStatusBarViewWrapper,
    tags: ["autodocs"],
    argTypes: {},
--- a/packages/shared-components/src/room/WidgetPip/WidgetPipView.stories.tsx
+++ b/packages/shared-components/src/room/WidgetPip/WidgetPipView.stories.tsx
@ -38,7 +38,7 @@ const WidgetPipViewWrapperImpl = ({
 const WidgetPipViewWrapper = withViewDocs(WidgetPipViewWrapperImpl, WidgetPipView);

 export default {
-    title: "room/WidgetPipView",
+    title: "Room/WidgetPipView",
    component: WidgetPipViewWrapper,
    tags: ["autodocs"],
    argTypes: {},
--- a/packages/shared-components/src/room/composer/Banner/Banner.stories.tsx
+++ b/packages/shared-components/src/room/composer/Banner/Banner.stories.tsx
@ -14,7 +14,7 @@ import { Banner } from "./Banner";
 import avatarImage from "../../../../static/element.png";

 const meta = {
-    title: "room/Banner",
+    title: "Room/Banner",
    component: Banner,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx
+++ b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/WidgetContextMenuView.stories.tsx
@ -45,7 +45,7 @@ const WidgetContextMenuViewWrapperImpl = ({
 const WidgetContextMenuViewWrapper = withViewDocs(WidgetContextMenuViewWrapperImpl, WidgetContextMenuView);

 const meta = {
-    title: "RightPanel/WidgetContextMenuView",
+    title: "Room/WidgetContextMenuView",
    component: WidgetContextMenuViewWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx
@ -29,7 +29,7 @@ const DateSeparatorViewWrapperImpl = ({
 const DateSeparatorViewWrapper = withViewDocs(DateSeparatorViewWrapperImpl, DateSeparatorView);

 const meta = {
-    title: "Timeline/DateSeparatorView",
+    title: "Timeline/Timeline Meta/DateSeparatorView",
    component: DateSeparatorViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.stories.tsx
+++ b/packages/shared-components/src/room/timeline/ReadMarker/ReadMarker.stories.tsx
@ -32,7 +32,7 @@ const ReadMarkerWrapper = ({
 };

 const meta = {
-    title: "Timeline/ReadMarker",
+    title: "Timeline/Timeline Meta/ReadMarker",
    component: ReadMarkerWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/TimelineSeparator/TimelineSeparator.stories.tsx
+++ b/packages/shared-components/src/room/timeline/TimelineSeparator/TimelineSeparator.stories.tsx
@ -12,7 +12,7 @@ import TimelineSeparator from "./TimelineSeparator";
 import styles from "./TimelineSeparator.module.css";

 const meta = {
-    title: "MessageBody/TimelineSeparator",
+    title: "Timeline/Timeline Meta/TimelineSeparator",
    component: TimelineSeparator,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx
@ -30,7 +30,7 @@ const DisambiguatedProfileViewWrapperImpl = ({
 const DisambiguatedProfileViewWrapper = withViewDocs(DisambiguatedProfileViewWrapperImpl, DisambiguatedProfileView);

 const meta = {
-    title: "Profile/DisambiguatedProfile",
+    title: "Timeline/Timeline Event/DisambiguatedProfile",
    component: DisambiguatedProfileViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/EncryptionEventView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/EncryptionEventView.stories.tsx
@ -25,7 +25,7 @@ const EncryptionEventViewWrapperImpl = ({
 const EncryptionEventViewWrapper = withViewDocs(EncryptionEventViewWrapperImpl, EncryptionEventView);

 const meta = {
-    title: "Event/EncryptionEvent",
+    title: "Timeline/Timeline Event/EncryptionEventView",
    component: EncryptionEventViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileBubble/EventTileBubble.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileBubble/EventTileBubble.stories.tsx
@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EventTileBubble } from "./EventTileBubble";

 const meta = {
-    title: "Event/EventTileBubble",
+    title: "Timeline/Timeline Event/EventTileBubble",
    component: EventTileBubble,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/PinnedMessageBadge.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/PinnedMessageBadge.stories.tsx
@ -9,7 +9,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PinnedMessageBadge } from "./PinnedMessageBadge";

 const meta = {
-    title: "Message body/PinnedMessageBadge",
+    title: "Timeline/Timeline Event/PinnedMessageBadge",
    component: PinnedMessageBadge,
    args: {
        "aria-describedby": "event-tile-description",
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx
@ -11,7 +11,7 @@ import { TextualEventView as TextualEventComponent } from "./TextualEventView";
 import { MockViewModel } from "../../../../../core/viewmodel/MockViewModel";

 const meta = {
-    title: "Event/TextualEvent",
+    title: "Timeline/Timeline Event/TextualEventView",
    component: TextualEventComponent,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx
@ -34,7 +34,7 @@ const TileErrorViewWrapperImpl = ({
 const TileErrorViewWrapper = withViewDocs(TileErrorViewWrapperImpl, TileErrorView);

 const meta = {
-    title: "MessageBody/TileErrorView",
+    title: "Timeline/Timeline Event/TileErrorView",
    component: TileErrorViewWrapper,
    tags: ["autodocs"],
    decorators: [
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
@ -15,7 +15,7 @@ import imageFile from "../../../../../../static/element.png";
 import imageFileWide from "../../../../../../static/wideImage.png";

 export default {
-    title: "Event/UrlPreviewGroupView/LinkPreview",
+    title: "EventTiles/LinkPreview",
    component: LinkPreview,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
@ -43,7 +43,7 @@ const UrlPreviewGroupViewWrapperImpl = ({
 const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);

 export default {
-    title: "Event/UrlPreviewGroupView",
+    title: "Timeline/Timeline Event/UrlPreviewGroupView",
    component: UrlPreviewGroupViewWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.stories.tsx
@ -58,7 +58,7 @@ const ActionBarViewWrapperImpl = ({ ...snapshotAndActions }: ActionBarProps): JS
 const ActionBarViewWrapper = withViewDocs(ActionBarViewWrapperImpl, ActionBarView);

 const meta = {
-    title: "Room/Timeline/EventTile/Actions/ActionBarView",
+    title: "Timeline/Timeline Action/ActionBarView",
    component: ActionBarViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx
@ -30,7 +30,7 @@ const AudioPlayerViewWrapperImpl = ({
 const AudioPlayerViewWrapper = withViewDocs(AudioPlayerViewWrapperImpl, AudioPlayerView);

 const meta = {
-    title: "Audio/AudioPlayerView",
+    title: "Timeline/Timeline Body/AudioPlayerView",
    component: AudioPlayerViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/DecryptionFailureBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/DecryptionFailureBodyView.stories.tsx
@ -29,7 +29,7 @@ const DecryptionFailureBodyViewWrapperImpl = ({
 const DecryptionFailureBodyViewWrapper = withViewDocs(DecryptionFailureBodyViewWrapperImpl, DecryptionFailureBodyView);

 const meta = {
-    title: "MessageBody/DecryptionFailureBodyView",
+    title: "Timeline/Timeline Body/DecryptionFailureBodyView",
    component: DecryptionFailureBodyViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/EventContentBody.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/EventContentBody.stories.tsx
@ -24,7 +24,7 @@ const EventContentBodyWrapperImpl = ({ as, ...snapshot }: EventContentBodyStoryP
 const EventContentBodyWrapper = withViewDocs(EventContentBodyWrapperImpl, EventContentBodyView);

 const meta = {
-    title: "MessageBody/EventContentBody",
+    title: "Timeline/Timeline Body/EventContentBody",
    component: EventContentBodyWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx
@ -42,7 +42,7 @@ const FileBodyViewWrapperImpl = ({
 const FileBodyViewWrapper = withViewDocs(FileBodyViewWrapperImpl, FileBodyView);

 const meta = {
-    title: "MessageBody/FileBodyView",
+    title: "Timeline/Timeline Body/FileBodyView",
    component: FileBodyViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
@ -61,7 +61,7 @@ const ImageBodyViewWrapperImpl = ({
 const ImageBodyViewWrapper = withViewDocs(ImageBodyViewWrapperImpl, ImageBodyView);

 const meta = {
-    title: "MessageBody/ImageBodyView",
+    title: "Timeline/Timeline Body/ImageBodyView",
    component: ImageBodyViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx
@ -44,7 +44,7 @@ const VideoBodyViewWrapperImpl = ({
 const VideoBodyViewWrapper = withViewDocs(VideoBodyViewWrapperImpl, VideoBodyView);

 const meta = {
-    title: "MessageBody/VideoBodyView",
+    title: "Timeline/Timeline Body/VideoBodyView",
    component: VideoBodyViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/MediaBody.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/MediaBody.stories.tsx
@ -9,7 +9,7 @@ import { MediaBody } from "./MediaBody";
 import type { Meta, StoryObj } from "@storybook/react-vite";

 const meta = {
-    title: "MessageBody/MediaBody",
+    title: "Timeline/Timeline Body/MediaBody",
    component: MediaBody,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/RedactedBodyView.stories.tsx
@ -27,7 +27,7 @@ const RedactedBodyViewWrapperImpl = ({
 const RedactedBodyViewWrapper = withViewDocs(RedactedBodyViewWrapperImpl, RedactedBodyView);

 const meta = {
-    title: "MessageBody/RedactedBodyView",
+    title: "Timeline/Timeline Body/RedactedBodyView",
    component: RedactedBodyViewWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.stories.tsx
@ -76,7 +76,7 @@ const TEXTUAL_BODY_VIEW_BODY_WRAPPER_KIND_OPTIONS = [
 ];

 const meta = {
-    title: "MessageBody/TextualBody",
+    title: "Timeline/Timeline Body/TextualBody",
    component: TextualBodyViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- 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
@ -81,7 +81,7 @@ const ReactionsRowViewWrapperImpl = ({
 const ReactionsRowViewWrapper = withViewDocs(ReactionsRowViewWrapperImpl, ReactionsRowView);

 const meta = {
-    title: "MessageBody/ReactionsRow",
+    title: "Timeline/Timeline Reaction/ReactionsRow",
    component: ReactionsRowViewWrapper,
    tags: ["autodocs"],
    args: {
--- 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
@ -58,7 +58,7 @@ const ReactionsRowButtonViewWrapperImpl = ({
 const ReactionsRowButtonViewWrapper = withViewDocs(ReactionsRowButtonViewWrapperImpl, ReactionsRowButtonView);

 const meta = {
-    title: "MessageBody/ReactionsRowButton",
+    title: "Timeline/Timeline Reaction/ReactionsRowButton",
    component: ReactionsRowButtonViewWrapper,
    tags: ["autodocs"],
    args: {
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/ReactionsRowButtonTooltip.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/ReactionsRowButtonTooltip.stories.tsx
@ -27,7 +27,7 @@ const ReactionsRowButtonTooltipViewWrapper = withViewDocs(
 );

 const meta = {
-    title: "MessageBody/ReactionsRowButtonTooltip",
+    title: "Timeline/Timeline Reaction/ReactionsRowButtonTooltip",
    component: ReactionsRowButtonTooltipViewWrapper,
    tags: ["autodocs"],
    argTypes: {
--- a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx
@ -33,7 +33,7 @@ const MessageTimestampWrapperImpl = ({
 const MessageTimestampWrapper = withViewDocs(MessageTimestampWrapperImpl, MessageTimestampView);

 const meta = {
-    title: "MessageBody/MessageTimestamp",
+    title: "Timeline/Timeline Meta/MessageTimestampView",
    component: MessageTimestampWrapper,
    tags: ["autodocs"],
    args: {