chore(storybook): Upgrade Storybook

apps/meteor/.storybook/decorators.tsx

@@ -8,33 +8,18 @@ import TranslationContextMock from '../client/stories/contexts/TranslationContex
 
 const MockedAppRoot = mockAppRoot().build();
 
-export const rocketChatDecorator: Decorator = (fn, { parameters }) => {
-	const linkElement = document.getElementById('theme-styles') || document.createElement('link');
-	if (linkElement.id !== 'theme-styles') {
-		require('../app/theme/client/main.css');
-		require('../app/theme/client/rocketchat.font.css');
-		linkElement.setAttribute('id', 'theme-styles');
-		linkElement.setAttribute('rel', 'stylesheet');
-		linkElement.setAttribute('href', 'https://open.rocket.chat/theme.css');
-		document.head.appendChild(linkElement);
-	}
-
-	return (
-		<MockedAppRoot>
-			<ServerContextMock {...parameters.serverContext}>
-				<TranslationContextMock {...parameters.translationContext}>
-					<ModalContextMock {...parameters.modalContext}>
-						<RouterContextMock {...parameters.routerContext}>
-							<style>{`
-								body {
-									background-color: white;
-								}
-							`}</style>
-							<div className='color-primary-font-color'>{fn()}</div>
-						</RouterContextMock>
-					</ModalContextMock>
-				</TranslationContextMock>
-			</ServerContextMock>
-		</MockedAppRoot>
-	);
-};
+export const RocketChatDecorator: Decorator = (Story, { parameters }) => (
+	<MockedAppRoot>
+		<ServerContextMock {...parameters.serverContext}>
+			<TranslationContextMock {...parameters.translationContext}>
+				<ModalContextMock {...parameters.modalContext}>
+					<RouterContextMock {...parameters.routerContext}>
+						<div className='color-primary-font-color rcx-content--main'>
+							<Story />
+						</div>
+					</RouterContextMock>
+				</ModalContextMock>
+			</TranslationContextMock>
+		</ServerContextMock>
+	</MockedAppRoot>
+);

apps/meteor/.storybook/main.ts

@@ -1,26 +1,15 @@
 import { dirname, join, resolve } from 'path';
 
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import baseConfig from '@rocket.chat/storybook-config/main';
 import webpack from 'webpack';
 
-export default {
-	stories: ['../client/**/*.stories.{js,tsx}', '../app/**/*.stories.{js,tsx}', '../ee/app/**/*.stories.{js,tsx}'],
-
-	addons: [
-		getAbsolutePath('@storybook/addon-essentials'),
-		getAbsolutePath('@storybook/addon-interactions'),
-		getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
-		getAbsolutePath('@storybook/addon-styling-webpack'),
-		getAbsolutePath('@storybook/addon-a11y'),
-	],
-
-	typescript: {
-		reactDocgen: 'react-docgen',
-	},
+export default baseConfig({
+	stories: ['../client/**/*.stories.{js,tsx}'],
 
 	webpackFinal: async (config) => {
 		// Those aliases are needed because dependencies in the monorepo use another
 		// dependencies that are not hoisted on this workspace
+		const swiperRoot = dirname(require.resolve('swiper/package.json'));
 		config.resolve = {
 			...config.resolve,
 			alias: {
@@ -29,8 +18,16 @@ export default {
 				// 'react/jsx-runtime': require.resolve('../../../node_modules/react/jsx-runtime'),
 				'@tanstack/react-query': require.resolve('../../../node_modules/@tanstack/react-query'),
 				'@rocket.chat/fuselage$': require.resolve('../../../node_modules/@rocket.chat/fuselage'),
+				// Meteor's bundler ignores the `exports` field, so source code reaches
+				// into swiper's internals via deep file paths. Webpack honors `exports`
+				// and rejects them, so map each subpath to the actual file.
+				'swiper/swiper-react.mjs$': join(swiperRoot, 'swiper-react.mjs'),
+				'swiper/swiper-react$': join(swiperRoot, 'swiper-react.d.ts'),
+				'swiper/modules/index.mjs$': join(swiperRoot, 'modules/index.mjs'),
+				'swiper/swiper.css$': join(swiperRoot, 'swiper.css'),
+				'swiper/modules/zoom.css$': join(swiperRoot, 'modules/zoom.css'),
 			},
-			// This is only needed because of Fontello
+			// This is only needed because of Rocket.Chat's icon font.
 			roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')],
 		};
 
@@ -54,15 +51,4 @@ export default {
 
 		return config;
 	},
-
-	framework: {
-		name: getAbsolutePath('@storybook/react-webpack5'),
-		options: {},
-	},
-
-	docs: {},
-} satisfies StorybookConfig;
-
-function getAbsolutePath(value: any): string {
-	return dirname(require.resolve(join(value, 'package.json')));
-}
+});

apps/meteor/.storybook/preview.ts

@@ -1,22 +1,17 @@
-import type { Decorator, Parameters } from '@storybook/react';
+import { parameters, decorators } from '@rocket.chat/storybook-config/preview';
+import type { Preview } from '@storybook/react';
 
-import { rocketChatDecorator } from './decorators';
+import { RocketChatDecorator } from './decorators';
 
-export const decorators: Decorator[] = [rocketChatDecorator];
+import '../app/theme/client/main.css';
+import 'highlight.js/styles/github.css';
 
-export const parameters: Parameters = {
-	backgrounds: {
-		grid: {
-			cellSize: 4,
-			cellAmount: 4,
-			opacity: 0.5,
-		},
-	},
-	options: {
-		storySort: {
-			method: 'alphabetical',
-			order: ['Components', '*', 'Enterprise'],
-		},
+const preview: Preview = {
+	parameters: {
+		...parameters,
 	},
+	decorators: [...decorators, RocketChatDecorator],
+	tags: ['autodocs'],
 };
-export const tags = ['autodocs'];
+
+export default preview;

apps/meteor/client/components/ABAC/ABACUpsellModal/ABACUpsellModal.stories.tsx

@@ -1,6 +1,6 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import ABACUpsellModal from './ABACUpsellModal';
 

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 
 import CreateDiscussion from './CreateDiscussion';
 
@@ -13,4 +13,4 @@ export default {
 	},
 } satisfies Meta<typeof CreateDiscussion>;
 
-export const Default: StoryFn<typeof CreateDiscussion> = (args) => <CreateDiscussion {...args} />;
+export const Default: StoryObj<typeof CreateDiscussion> = {};

apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import GenericUpsellModal from '.';
 

apps/meteor/client/components/ListItem.stories.tsx

@@ -1,5 +1,5 @@
 import { Tile, OptionTitle, Box } from '@rocket.chat/fuselage';
-import type { Meta, StoryFn } from '@storybook/react';
+import type { StoryObj, Meta, StoryFn } from '@storybook/react';
 
 import ListItem from './Sidebar/ListItem';
 
@@ -27,6 +27,7 @@ export const ListWithIcon: StoryFn<typeof Tile> = () => {
 		</Tile>
 	);
 };
+
 export const NoIcon: StoryFn<typeof Tile> = () => {
 	return (
 		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
@@ -41,44 +42,51 @@ export const NoIcon: StoryFn<typeof Tile> = () => {
 	);
 };
 
-export const MixedWithGap: StoryFn<typeof Tile> = () => {
-	return (
-		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-			<Box flexShrink={1} pb={12}>
-				<OptionTitle>Title</OptionTitle>
-				<ListItem text='Item 1' icon='hashtag' />
-				<ListItem text='Item 2' icon='team' />
-				<ListItem text='Item 3' gap />
-				<ListItem text='Item 4' icon='airplane' />
-			</Box>
-		</Tile>
-	);
-};
-MixedWithGap.parameters = {
-	docs: {
-		description: {
-			story:
-				" When using `ListItem`, you can also use the `gap` prop to add spacing to the left. If the list is mixed with items **with and without** icons, it's recommended to add the gap.",
+export const MixedWithGap: StoryObj<typeof Tile> = {
+	render: () => {
+		return (
+			<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
+				<Box flexShrink={1} pb={12}>
+					<OptionTitle>Title</OptionTitle>
+					<ListItem text='Item 1' icon='hashtag' />
+					<ListItem text='Item 2' icon='team' />
+					<ListItem text='Item 3' gap />
+					<ListItem text='Item 4' icon='airplane' />
+				</Box>
+			</Tile>
+		);
+	},
+
+	parameters: {
+		docs: {
+			description: {
+				story:
+					" When using `ListItem`, you can also use the `gap` prop to add spacing to the left. If the list is mixed with items **with and without** icons, it's recommended to add the gap.",
+			},
 		},
 	},
 };
-export const MixedWithoutGap: StoryFn<typeof Tile> = () => {
-	return (
-		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-			<Box flexShrink={1} pb={12}>
-				<OptionTitle>Title</OptionTitle>
-				<ListItem text='Item 1' icon='hashtag' />
-				<ListItem text='Item 2' icon='team' />
-				<ListItem text='Item 3' />
-				<ListItem text='Item 4' icon='airplane' />
-			</Box>
-		</Tile>
-	);
-};
-MixedWithoutGap.parameters = {
-	docs: {
-		description: {
-			story: 'Not recommended. Prefer adding the `gap` prop to the items without icons.',
+
+export const MixedWithoutGap: StoryObj<typeof Tile> = {
+	render: () => {
+		return (
+			<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
+				<Box flexShrink={1} pb={12}>
+					<OptionTitle>Title</OptionTitle>
+					<ListItem text='Item 1' icon='hashtag' />
+					<ListItem text='Item 2' icon='team' />
+					<ListItem text='Item 3' />
+					<ListItem text='Item 4' icon='airplane' />
+				</Box>
+			</Tile>
+		);
+	},
+
+	parameters: {
+		docs: {
+			description: {
+				story: 'Not recommended. Prefer adding the `gap` prop to the items without icons.',
+			},
 		},
 	},
 };

apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.stories.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
 import type { Meta, StoryFn } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import SidebarTogglerButton from './SidebarTogglerButton';
 
@@ -13,11 +13,10 @@ export default {
 } satisfies Meta<typeof SidebarTogglerButton>;
 
 export const Example: StoryFn<typeof SidebarTogglerButton> = () => <SidebarTogglerButton onClick={action('onClick')} />;
+export const Default = {};
 
-const Template: StoryFn<typeof SidebarTogglerButton> = (args) => <SidebarTogglerButton {...args} />;
-
-export const Default = Template.bind({});
-export const WithBadge = Template.bind({});
-WithBadge.args = {
-	badge: 99,
+export const WithBadge = {
+	args: {
+		badge: 99,
+	},
 };

apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.stories.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import UserAvatarChip from './UserAvatarChip';