diff --git a/packages/shared-components/.eslintrc.cjs b/packages/shared-components/.eslintrc.cjs index 19a66cf54c..4d77d48313 100644 --- a/packages/shared-components/.eslintrc.cjs +++ b/packages/shared-components/.eslintrc.cjs @@ -65,6 +65,7 @@ module.exports = { allowInterfaces: "with-single-extends", }, ], + "storybook/meta-satisfies-type": "error", }, overrides: [ { diff --git a/packages/shared-components/src/audio/Clock/Clock.stories.tsx b/packages/shared-components/src/audio/Clock/Clock.stories.tsx index e05ee086d9..df2fab9ffc 100644 --- a/packages/shared-components/src/audio/Clock/Clock.stories.tsx +++ b/packages/shared-components/src/audio/Clock/Clock.stories.tsx @@ -5,25 +5,25 @@ * Please see LICENSE files in the repository root for full details. */ -import React from "react"; - -import type { Meta, StoryFn } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react-vite"; import { Clock } from "./Clock"; -export default { +const meta = { title: "Audio/Clock", component: Clock, tags: ["autodocs"], args: { seconds: 20, }, -} as Meta; +} satisfies Meta; -const Template: StoryFn = (args) => ; +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = {}; -export const LotOfSeconds = Template.bind({}); -LotOfSeconds.args = { - seconds: 99999999999999, +export const LotOfSeconds: Story = { + args: { + seconds: 99999999999999, + }, }; diff --git a/packages/shared-components/src/audio/SeekBar/SeekBar.stories.tsx b/packages/shared-components/src/audio/SeekBar/SeekBar.stories.tsx index 6a3ec48666..b8a0e63569 100644 --- a/packages/shared-components/src/audio/SeekBar/SeekBar.stories.tsx +++ b/packages/shared-components/src/audio/SeekBar/SeekBar.stories.tsx @@ -9,9 +9,9 @@ import React from "react"; import { useArgs } from "storybook/preview-api"; import { SeekBar } from "./SeekBar"; -import type { Meta, StoryFn } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react-vite"; -export default { +const meta = { title: "Audio/SeekBar", component: SeekBar, tags: ["autodocs"], @@ -23,16 +23,19 @@ export default { args: { value: 50, }, -} as Meta; + render: function Render(args) { + const [, updateArgs] = useArgs(); + return updateArgs({ value: parseInt(evt.target.value, 10) })} {...args} />; + }, +} satisfies Meta; -const Template: StoryFn = (args) => { - const [, updateArgs] = useArgs(); - return updateArgs({ value: parseInt(evt.target.value, 10) })} {...args} />; -}; - -export const Default = Template.bind({}); - -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Disabled: Story = { + args: { + disabled: true, + }, }; diff --git a/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx index 9ad126da3c..08d8fd9b73 100644 --- a/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx +++ b/packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx @@ -8,10 +8,10 @@ import React from "react"; import { LockSolidIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import type { Meta, StoryFn } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react-vite"; import { EventTileBubble } from "./EventTileBubble"; -export default { +const meta = { title: "Event/EventTileBubble", component: EventTileBubble, tags: ["autodocs"], @@ -21,29 +21,33 @@ export default { subtitle: "Subtitle goes here", className: "custom-class", }, -} as Meta; +} satisfies Meta; -const Template: StoryFn = (args) => ; +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = {}; -export const HasLockSolidIcon = Template.bind({}); -HasLockSolidIcon.args = { - className: undefined, - icon: , - children: undefined, +export const HasLockSolidIcon: Story = { + args: { + className: undefined, + icon: , + children: undefined, + }, }; -export const HasChildren = Template.bind({}); -HasChildren.args = { - className: undefined, - children:
children
, +export const HasChildren: Story = { + args: { + className: undefined, + children:
children
, + }, }; -export const IsCryptoEventBubble = Template.bind({}); -IsCryptoEventBubble.args = { - className: undefined, - icon: , - title: "Encryption enabled", - subtitle: "Messages here are end-to-end encrypted. Verify XYZ in their profile - tap on their profile picture.", +export const IsCryptoEventBubble: Story = { + args: { + className: undefined, + icon: , + title: "Encryption enabled", + subtitle: "Messages here are end-to-end encrypted. Verify XYZ in their profile - tap on their profile picture.", + }, }; diff --git a/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx b/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx index 0c89ce24d6..501da92dc6 100644 --- a/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx +++ b/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx @@ -5,21 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ -import React from "react"; -import { type Meta, type StoryFn } from "@storybook/react-vite"; +import { type Meta, type StoryObj } from "@storybook/react-vite"; import { TextualEventView as TextualEventComponent } from "./TextualEventView"; import { MockViewModel } from "../../viewmodel/MockViewModel"; -export default { +const meta = { title: "Event/TextualEvent", component: TextualEventComponent, tags: ["autodocs"], args: { vm: new MockViewModel({ content: "Dummy textual event text" }), }, -} as Meta; +} satisfies Meta; -const Template: StoryFn = (args) => ; +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = {}; diff --git a/packages/shared-components/src/message-body/MediaBody/MediaBody.stories.tsx b/packages/shared-components/src/message-body/MediaBody/MediaBody.stories.tsx index ee90a37943..bc41f88754 100644 --- a/packages/shared-components/src/message-body/MediaBody/MediaBody.stories.tsx +++ b/packages/shared-components/src/message-body/MediaBody/MediaBody.stories.tsx @@ -5,20 +5,19 @@ * Please see LICENSE files in the repository root for full details. */ -import React from "react"; - import { MediaBody } from "./MediaBody"; -import type { Meta, StoryFn } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react-vite"; -export default { +const meta = { title: "MessageBody/MediaBody", component: MediaBody, tags: ["autodocs"], args: { children: "Media content goes here", }, -} as Meta; +} satisfies Meta; -const Template: StoryFn = (args) => ; +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = {}; diff --git a/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.stories.tsx b/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.stories.tsx index cf067f4ecd..c103b96028 100644 --- a/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.stories.tsx +++ b/packages/shared-components/src/message-body/TimelineSeparator/TimelineSeparator.stories.tsx @@ -7,11 +7,11 @@ import React from "react"; -import type { Meta, StoryFn } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react-vite"; import TimelineSeparator from "./TimelineSeparator"; import styles from "./TimelineSeparator.module.css"; -export default { +const meta = { title: "MessageBody/TimelineSeparator", component: TimelineSeparator, tags: ["autodocs"], @@ -19,36 +19,41 @@ export default { label: "Label Separator", children: "Timeline Separator", }, -} as Meta; +} satisfies Meta; -const Template: StoryFn = (args) => ; +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = {}; -export const WithHtmlChild = Template.bind({}); -WithHtmlChild.args = { - label: "Custom Label", - children: ( - - ), +export const WithHtmlChild: Story = { + args: { + label: "Custom Label", + children: ( + + ), + }, }; -export const WithDateEvent = Template.bind({}); -WithDateEvent.args = { - label: "Date Event Separator", - children: "Wednesday", +export const WithDateEvent: Story = { + args: { + label: "Date Event Separator", + children: "Wednesday", + }, }; -export const WithLateEvent = Template.bind({}); -WithLateEvent.args = { - label: "Late Event Separator", - children: "Fri, Jan 9, 2026", +export const WithLateEvent: Story = { + args: { + label: "Late Event Separator", + children: "Fri, Jan 9, 2026", + }, }; -export const WithoutChildren = Template.bind({}); -WithoutChildren.args = { - children: undefined, - label: "Separator without children", +export const WithoutChildren: Story = { + args: { + children: undefined, + label: "Separator without children", + }, }; diff --git a/packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx b/packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx index 11834bf6c4..ffa63a1903 100644 --- a/packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx +++ b/packages/shared-components/src/rich-list/RichItem/RichItem.stories.tsx @@ -8,12 +8,12 @@ import React from "react"; import { fn } from "storybook/test"; -import type { Meta, StoryFn } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react-vite"; import { RichItem } from "./RichItem"; const currentTimestamp = new Date("2025-03-09T12:00:00Z").getTime(); -export default { +const meta = { title: "RichList/RichItem", component: RichItem, tags: ["autodocs"], @@ -32,33 +32,39 @@ export default { context: "button", }, }, -} as Meta; + render: (args) => ( +
    + +
+ ), +} satisfies Meta; -const Template: StoryFn = (args) => ( -
    - -
-); +export default meta; +type Story = StoryObj; -export const Default = Template.bind({}); +export const Default: Story = {}; -export const Selected = Template.bind({}); -Selected.args = { - selected: true, +export const Selected: Story = { + args: { + selected: true, + }, }; -export const WithoutTimestamp = Template.bind({}); -WithoutTimestamp.args = { - timestamp: undefined, +export const WithoutTimestamp: Story = { + args: { + timestamp: undefined, + }, }; -export const Hover = Template.bind({}); -Hover.parameters = { pseudo: { hover: true } }; +export const Hover: Story = { + parameters: { pseudo: { hover: true } }, +}; -const TemplateSeparator: StoryFn = (args) => ( -
    - - -
-); -export const Separator = TemplateSeparator.bind({}); +export const Separator: Story = { + render: (args) => ( +
    + + +
+ ), +}; diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx index a1a80334b9..cba4514419 100644 --- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx +++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx @@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters"; import type { FilterId } from "./useVisibleFilters"; -const meta: Meta = { +const meta = { title: "Room List/RoomListPrimaryFilters", component: RoomListPrimaryFilters, tags: ["autodocs"], @@ -25,10 +25,10 @@ const meta: Meta = { url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel-2025?node-id=98-1979&t=vafb4zoYMNLRuAbh-4", }, }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; // All available filter IDs const allFilterIds: FilterId[] = ["unread", "people", "rooms", "favourite", "mentions", "invites", "low_priority"];