Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/shared-components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -254,7 +256,7 @@ Example with Figma integration:

```tsx
const meta = {
title: "Room List/RoomListSearchView",
title: "RoomList/RoomListSearchView",
component: RoomListSearchViewWrapper,
tags: ["autodocs"],
args: {
Expand All @@ -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";
Expand All @@ -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: () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { LinkPreview } from "./LinkPreview";
import { LinkedTextContext } from "../../../core/utils/LinkedText";

export default {
title: "Event/UrlPreviewGroupView/LinkPreview",
title: "EventTiles/LinkPreview",
component: LinkPreview,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const UrlPreviewGroupViewWrapperImpl = ({
const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);

export default {
title: "Event/UrlPreviewGroupView",
title: "EventTiles/UrlPreviewGroupView",
component: UrlPreviewGroupViewWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const RoomListHeaderViewWrapperImpl = ({
const RoomListHeaderViewWrapper = withViewDocs(RoomListHeaderViewWrapperImpl, RoomListHeaderView);

const meta = {
title: "Room List/RoomListHeaderView",
title: "RoomList/RoomListHeaderView",
component: RoomListHeaderViewWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
import type { FilterId } from "./useVisibleFilters";

const meta = {
title: "Room List/RoomListPrimaryFilters",
title: "RoomList/RoomListPrimaryFilters",
component: RoomListPrimaryFilters,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const RoomListSearchViewWrapperImpl = ({
const RoomListSearchViewWrapper = withViewDocs(RoomListSearchViewWrapperImpl, RoomListSearchView);

const meta = {
title: "Room List/RoomListSearchView",
title: "RoomList/RoomListSearchView",
component: RoomListSearchViewWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const RoomListViewWrapperImpl = ({
const RoomListViewWrapper = withViewDocs(RoomListViewWrapperImpl, RoomListView);

const meta = {
title: "Room List/RoomListView",
title: "RoomList/RoomListView",
component: RoomListViewWrapper,
tags: ["autodocs"],
decorators: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWra
import { createMockRoomItemViewModel, renderAvatar } from "../../story-mocks";

const meta = {
title: "Room List/RoomListItemAccessibiltyWrapper",
title: "RoomList/RoomListItemAccessibilityWrapper",
component: RoomListItemAccessibilityWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const defaultProps: NotificationDecorationProps = {
};

const meta = {
title: "Room List/NotificationDecoration",
title: "RoomList/NotificationDecoration",
component: NotificationDecoration,
tags: ["autodocs"],
decorators: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const RoomListItemWrapperImpl = ({
const RoomListItemWrapper = withViewDocs(RoomListItemWrapperImpl, RoomListItemView);

const meta = {
title: "Room List/RoomListItemView",
title: "RoomList/RoomListItemView",
component: RoomListItemWrapper,
tags: ["autodocs"],
decorators: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const RoomListSectionHeaderViewWrapperImpl = ({
const RoomListSectionHeaderViewWrapper = withViewDocs(RoomListSectionHeaderViewWrapperImpl, RoomListSectionHeaderView);

const meta = {
title: "Room List/RoomListSectionHeaderView",
title: "RoomList/RoomListSectionHeaderView",
component: RoomListSectionHeaderViewWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const defaultRoomListState: RoomListViewState = {
};

const meta = {
title: "Room List/VirtualizedRoomListView",
title: "RoomList/VirtualizedRoomListView",
component: RoomListWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const RoomStatusBarViewWrapperImpl = ({
const RoomStatusBarViewWrapper = withViewDocs(RoomStatusBarViewWrapperImpl, RoomStatusBarView);

const meta = {
title: "room/RoomStatusBarView",
title: "Room/RoomStatusBarView",
component: RoomStatusBarViewWrapper,
tags: ["autodocs"],
argTypes: {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const WidgetPipViewWrapperImpl = ({
const WidgetPipViewWrapper = withViewDocs(WidgetPipViewWrapperImpl, WidgetPipView);

export default {
title: "room/WidgetPipView",
title: "Room/WidgetPipView",
component: WidgetPipViewWrapper,
tags: ["autodocs"],
argTypes: {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Button } from "@vector-im/compound-web";
import { Banner } from "./Banner";

const meta = {
title: "room/Banner",
title: "Room/Banner",
component: Banner,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const WidgetContextMenuViewWrapperImpl = ({
const WidgetContextMenuViewWrapper = withViewDocs(WidgetContextMenuViewWrapperImpl, WidgetContextMenuView);

const meta = {
title: "RightPanel/WidgetContextMenuView",
title: "Room/WidgetContextMenuView",
component: WidgetContextMenuViewWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const DateSeparatorViewWrapperImpl = ({
const DateSeparatorViewWrapper = withViewDocs(DateSeparatorViewWrapperImpl, DateSeparatorView);

const meta = {
title: "Timeline/DateSeparatorView",
title: "TimelineMeta/DateSeparatorView",
component: DateSeparatorViewWrapper,
tags: ["autodocs"],
argTypes: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ReadMarkerWrapper = ({
};

const meta = {
title: "Timeline/ReadMarker",
title: "TimelineMeta/ReadMarker",
component: ReadMarkerWrapper,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import TimelineSeparator from "./TimelineSeparator";
import styles from "./TimelineSeparator.module.css";

const meta = {
title: "MessageBody/TimelineSeparator",
title: "TimelineMeta/TimelineSeparator",
component: TimelineSeparator,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const DisambiguatedProfileViewWrapperImpl = ({
const DisambiguatedProfileViewWrapper = withViewDocs(DisambiguatedProfileViewWrapperImpl, DisambiguatedProfileView);

const meta = {
title: "Profile/DisambiguatedProfile",
title: "TimelineEvent/DisambiguatedProfile",
component: DisambiguatedProfileViewWrapper,
tags: ["autodocs"],
argTypes: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const EncryptionEventViewWrapperImpl = ({
const EncryptionEventViewWrapper = withViewDocs(EncryptionEventViewWrapperImpl, EncryptionEventView);

const meta = {
title: "Event/EncryptionEvent",
title: "TimelineEvent/EncryptionEventView",
component: EncryptionEventViewWrapper,
tags: ["autodocs"],
argTypes: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import { EventTileBubble } from "./EventTileBubble";

const meta = {
title: "Event/EventTileBubble",
title: "TimelineEvent/EventTileBubble",
component: EventTileBubble,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import { PinnedMessageBadge } from "./PinnedMessageBadge";

const meta = {
title: "Message body/PinnedMessageBadge",
title: "TimelineEvent/PinnedMessageBadge",
component: PinnedMessageBadge,
args: {
"aria-describedby": "event-tile-description",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { TextualEventView as TextualEventComponent } from "./TextualEventView";
import { MockViewModel } from "../../../../../core/viewmodel/MockViewModel";

const meta = {
title: "Event/TextualEvent",
title: "TimelineEvent/TextualEventView",
component: TextualEventComponent,
tags: ["autodocs"],
args: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const TileErrorViewWrapperImpl = ({
const TileErrorViewWrapper = withViewDocs(TileErrorViewWrapperImpl, TileErrorView);

const meta = {
title: "MessageBody/TileErrorView",
title: "TimelineEvent/TileErrorView",
component: TileErrorViewWrapper,
tags: ["autodocs"],
decorators: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const ActionBarViewWrapperImpl = ({ ...snapshotAndActions }: ActionBarProps): JS
const ActionBarViewWrapper = withViewDocs(ActionBarViewWrapperImpl, ActionBarView);

const meta = {
title: "Room/Timeline/EventTile/Actions/ActionBarView",
title: "TimelineAction/ActionBarView",
component: ActionBarViewWrapper,
tags: ["autodocs"],
argTypes: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const AudioPlayerViewWrapperImpl = ({
const AudioPlayerViewWrapper = withViewDocs(AudioPlayerViewWrapperImpl, AudioPlayerView);

const meta = {
title: "Audio/AudioPlayerView",
title: "TimelineBody/AudioPlayerView",
component: AudioPlayerViewWrapper,
tags: ["autodocs"],
argTypes: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const DecryptionFailureBodyViewWrapperImpl = ({
const DecryptionFailureBodyViewWrapper = withViewDocs(DecryptionFailureBodyViewWrapperImpl, DecryptionFailureBodyView);

const meta = {
title: "MessageBody/DecryptionFailureBodyView",
title: "TimelineBody/DecryptionFailureBodyView",
component: DecryptionFailureBodyViewWrapper,
tags: ["autodocs"],
argTypes: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const EventContentBodyWrapperImpl = ({ as, ...snapshot }: EventContentBodyStoryP
const EventContentBodyWrapper = withViewDocs(EventContentBodyWrapperImpl, EventContentBodyView);

const meta = {
title: "MessageBody/EventContentBody",
title: "TimelineBody/EventContentBody",
component: EventContentBodyWrapper,
tags: ["autodocs"],
args: {
Expand Down
Loading
Loading