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-04-28 09:55:48 +00:00
parent d3a395b18b
commit 1dd5748d6f
44 changed files with 48 additions and 46 deletions
@@ -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: () => (
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: [
@@ -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: () => (
@@ -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 }) => (
@@ -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: () => (
@@ -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: () => (
@@ -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: () => (
@@ -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: {
@@ -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: {
@@ -37,7 +37,7 @@ const RoomStatusBarViewWrapperImpl = ({
 const RoomStatusBarViewWrapper = withViewDocs(RoomStatusBarViewWrapperImpl, RoomStatusBarView);
 const meta = {
-    title: "room/RoomStatusBarView",
+    title: "Room/RoomStatusBarView",
    component: RoomStatusBarViewWrapper,
    tags: ["autodocs"],
    argTypes: {},
@@ -38,7 +38,7 @@ const WidgetPipViewWrapperImpl = ({
 const WidgetPipViewWrapper = withViewDocs(WidgetPipViewWrapperImpl, WidgetPipView);
 export default {
-    title: "room/WidgetPipView",
+    title: "Room/WidgetPipView",
    component: WidgetPipViewWrapper,
    tags: ["autodocs"],
    argTypes: {},
@@ -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: {
@@ -45,7 +45,7 @@ const WidgetContextMenuViewWrapperImpl = ({
 const WidgetContextMenuViewWrapper = withViewDocs(WidgetContextMenuViewWrapperImpl, WidgetContextMenuView);
 const meta = {
-    title: "RightPanel/WidgetContextMenuView",
+    title: "Room/WidgetContextMenuView",
    component: WidgetContextMenuViewWrapper,
    tags: ["autodocs"],
    args: {
@@ -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: {
@@ -32,7 +32,7 @@ const ReadMarkerWrapper = ({
 };
 const meta = {
-    title: "Timeline/ReadMarker",
+    title: "Timeline/Timeline Meta/ReadMarker",
    component: ReadMarkerWrapper,
    tags: ["autodocs"],
    args: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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",
@@ -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: {
@@ -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: [
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -27,7 +27,7 @@ const ReactionsRowButtonTooltipViewWrapper = withViewDocs(
 );
 const meta = {
-    title: "MessageBody/ReactionsRowButtonTooltip",
+    title: "Timeline/Timeline Reaction/ReactionsRowButtonTooltip",
    component: ReactionsRowButtonTooltipViewWrapper,
    tags: ["autodocs"],
    argTypes: {
@@ -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: {