From c3925f507f902a7512f1358729e33ee9c5ea0b1b Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Mon, 14 Oct 2024 17:43:42 -0300
Subject: [PATCH] Recover storybooks from `@rocket.chat/ui-video-conf` and
 `@rocket.chat/ui-voip`

---
 packages/ui-video-conf/.babelrc.json          |   9 +
 packages/ui-video-conf/.eslintrc.json         |   2 +-
 packages/ui-video-conf/.storybook/main.js     |  12 --
 packages/ui-video-conf/.storybook/main.ts     |  38 ++++
 .../.storybook/preview.tsx}                   |   9 +-
 packages/ui-video-conf/jest.config.ts         |   7 +-
 packages/ui-video-conf/package.json           |  27 +--
 .../VideoConfButton/VideoConfButton.spec.tsx  |   6 +-
 .../VideoConfButton.stories.tsx               |   7 +-
 .../VideoConfController.spec.tsx              |   6 +-
 .../VideoConfController.stories.tsx           |   6 +-
 .../VideoConfMessage.spec.tsx                 |   6 +-
 .../VideoConfMessage.stories.tsx              |  14 +-
 .../src/VideoConfMessage/VideoConfMessage.tsx |   1 +
 .../VideoConfMessageUserStack.tsx             |   2 +-
 .../VideoConfPopup/VideoConfPopup.spec.tsx    |   6 +-
 .../VideoConfPopup/VideoConfPopup.stories.tsx |  29 ++-
 .../src/VideoConfPopup/VideoConfPopup.tsx     |   8 +-
 packages/ui-video-conf/tsconfig.json          |   4 +-
 packages/ui-voip/.babelrc.json                |   9 +
 packages/ui-voip/.storybook/main.js           |  12 --
 packages/ui-voip/.storybook/main.ts           |  37 ++++
 .../.storybook/preview.tsx}                   |   9 +-
 packages/ui-voip/package.json                 |  26 +--
 .../VoipActionButton.stories.tsx              |  12 +-
 .../VoipActionButton/VoipActionButton.tsx     |   4 +-
 .../VoipActions/VoipActions.stories.tsx       |  12 +-
 .../VoipContactId/VoipContactId.stories.tsx   |  14 +-
 .../VoipDialPad/VoipDialPad.stories.tsx       |   8 +-
 .../components/VoipPopup/VoipPopup.spec.tsx   |   2 +-
 .../VoipPopup/VoipPopup.stories.tsx           |  12 +-
 .../hooks/useVoipDeviceSettings.tsx           |   2 +-
 packages/ui-voip/src/tests/mocks/index.ts     |   4 +-
 packages/ui-voip/tsconfig.json                |   2 +-
 yarn.lock                                     | 166 ++++++++++++------
 35 files changed, 340 insertions(+), 190 deletions(-)
 create mode 100644 packages/ui-video-conf/.babelrc.json
 delete mode 100644 packages/ui-video-conf/.storybook/main.js
 create mode 100644 packages/ui-video-conf/.storybook/main.ts
 rename packages/{ui-voip/.storybook/preview.js => ui-video-conf/.storybook/preview.tsx} (66%)
 create mode 100644 packages/ui-voip/.babelrc.json
 delete mode 100644 packages/ui-voip/.storybook/main.js
 create mode 100644 packages/ui-voip/.storybook/main.ts
 rename packages/{ui-video-conf/.storybook/preview.js => ui-voip/.storybook/preview.tsx} (68%)

diff --git a/packages/ui-video-conf/.babelrc.json b/packages/ui-video-conf/.babelrc.json
new file mode 100644
index 0000000000000..f474986efbca9
--- /dev/null
+++ b/packages/ui-video-conf/.babelrc.json
@@ -0,0 +1,9 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		["@babel/preset-react", {
+			"runtime": "automatic"
+		}],
+		"@babel/preset-typescript"
+	]
+}
diff --git a/packages/ui-video-conf/.eslintrc.json b/packages/ui-video-conf/.eslintrc.json
index cbaa27e73b96c..b05b092e98ade 100644
--- a/packages/ui-video-conf/.eslintrc.json
+++ b/packages/ui-video-conf/.eslintrc.json
@@ -49,7 +49,7 @@
 			"files": ["*.ts", "*.tsx"],
 			"rules": {
 				"@typescript-eslint/ban-ts-ignore": "off",
-				"@typescript-eslint/explicit-function-return-type": "warn",
+				"@typescript-eslint/explicit-function-return-type": "off",
 				"@typescript-eslint/indent": "off",
 				"@typescript-eslint/no-extra-parens": "off",
 				"@typescript-eslint/no-explicit-any": "off",
diff --git a/packages/ui-video-conf/.storybook/main.js b/packages/ui-video-conf/.storybook/main.js
deleted file mode 100644
index dc95f3584a3f9..0000000000000
--- a/packages/ui-video-conf/.storybook/main.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @type {import('@storybook/react/types').StorybookConfig} */
-module.exports = {
-	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
-	framework: '@storybook/react',
-	features: {
-		postcss: false,
-	},
-	typescript: {
-		reactDocgen: 'react-docgen-typescript-plugin',
-	},
-};
diff --git a/packages/ui-video-conf/.storybook/main.ts b/packages/ui-video-conf/.storybook/main.ts
new file mode 100644
index 0000000000000..e3f4381d1ddb8
--- /dev/null
+++ b/packages/ui-video-conf/.storybook/main.ts
@@ -0,0 +1,38 @@
+import { dirname, join, resolve } from 'path';
+
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-a11y'),
+		getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+		getAbsolutePath('@storybook/addon-styling-webpack'),
+	],
+
+	framework: {
+		name: getAbsolutePath('@storybook/react-webpack5'),
+		options: {},
+	},
+
+	typescript: {
+		reactDocgen: 'react-docgen',
+	},
+
+	docs: {},
+
+	webpackFinal: (config) => {
+		// This is only needed because of Fontello
+		config.resolve = {
+			...config.resolve,
+			roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')],
+		};
+
+		return config;
+	},
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value: any): string {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
diff --git a/packages/ui-voip/.storybook/preview.js b/packages/ui-video-conf/.storybook/preview.tsx
similarity index 66%
rename from packages/ui-voip/.storybook/preview.js
rename to packages/ui-video-conf/.storybook/preview.tsx
index d1e44f0c2b8c0..20914d6a3d22c 100644
--- a/packages/ui-voip/.storybook/preview.js
+++ b/packages/ui-video-conf/.storybook/preview.tsx
@@ -1,9 +1,11 @@
+import type { Decorator } from '@storybook/react';
+import type { ReactElement } from 'react';
+
 import '../../../apps/meteor/app/theme/client/main.css';
 import 'highlight.js/styles/github.css';
 import '@rocket.chat/icons/dist/rocketchat.css';
 
 export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
@@ -12,8 +14,8 @@ export const parameters = {
 	},
 };
 
-export const decorators = [
-	(Story) => (
+export const decorators: Decorator[] = [
+	(Story): ReactElement => (
 		<div className='rc-old'>
 			<style>{`
 				body {
@@ -24,3 +26,4 @@ export const decorators = [
 		</div>
 	),
 ];
+export const tags = ['autodocs'];
diff --git a/packages/ui-video-conf/jest.config.ts b/packages/ui-video-conf/jest.config.ts
index 14379928638fc..e1525e14dff0b 100644
--- a/packages/ui-video-conf/jest.config.ts
+++ b/packages/ui-video-conf/jest.config.ts
@@ -4,5 +4,10 @@ import type { Config } from 'jest';
 export default {
 	preset: client.preset,
 	setupFilesAfterEnv: [...client.setupFilesAfterEnv],
-	testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
+	moduleNameMapper: {
+		'^react($|/.+)': '<rootDir>/../../node_modules/react$1',
+		'^react-dom/client$': '<rootDir>/../../node_modules/react-dom$1',
+		'^react-dom($|/.+)': '<rootDir>/../../node_modules/react-dom$1',
+		'^react-i18next($|/.+)': '<rootDir>/../../node_modules/react-i18next$1',
+	},
 } satisfies Config;
diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
index 692d01ec94b6e..ad0f4630c951f 100644
--- a/packages/ui-video-conf/package.json
+++ b/packages/ui-video-conf/package.json
@@ -13,24 +13,25 @@
 		"@rocket.chat/styled": "~0.31.25",
 		"@rocket.chat/ui-avatar": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
-		"@storybook/addon-a11y": "^6.5.16",
-		"@storybook/addon-actions": "~6.5.16",
-		"@storybook/addon-docs": "~6.5.16",
-		"@storybook/addon-essentials": "~6.5.16",
-		"@storybook/builder-webpack4": "~6.5.16",
-		"@storybook/manager-webpack4": "~6.5.16",
-		"@storybook/react": "~6.5.16",
-		"@storybook/testing-library": "~0.0.13",
-		"@storybook/testing-react": "~1.3.0",
+		"@storybook/addon-a11y": "^8.3.5",
+		"@storybook/addon-actions": "^8.3.5",
+		"@storybook/addon-docs": "^8.3.5",
+		"@storybook/addon-essentials": "^8.3.5",
+		"@storybook/addon-styling-webpack": "^1.0.0",
+		"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+		"@storybook/react": "^8.3.5",
+		"@storybook/react-webpack5": "^8.3.5",
 		"@types/jest": "~29.5.13",
 		"@types/jest-axe": "~3.5.9",
+		"@types/react": "~17.0.80",
 		"eslint": "~8.45.0",
 		"eslint-plugin-react": "~7.32.2",
 		"eslint-plugin-react-hooks": "~4.6.2",
 		"eslint-plugin-storybook": "~0.6.15",
 		"jest": "~29.7.0",
 		"jest-axe": "~9.0.0",
-		"react-docgen-typescript-plugin": "~1.0.8",
+		"react": "~17.0.2",
+		"storybook": "^8.3.5",
 		"typescript": "~5.5.4"
 	},
 	"peerDependencies": {
@@ -41,15 +42,17 @@
 		"@rocket.chat/styled": "*",
 		"@rocket.chat/ui-avatar": "7.0.0",
 		"@rocket.chat/ui-contexts": "11.0.0",
-		"react": "^17.0.2",
+		"react": "~17.0.2",
 		"react-dom": "^17.0.2"
 	},
 	"scripts": {
 		"eslint": "eslint --ext .js,.jsx,.ts,.tsx .",
 		"eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
+		"typecheck": "tsc --noEmit",
 		"test": "jest",
+		"testunit": "jest",
 		"build": "tsc -p tsconfig.build.json",
-		"storybook": "start-storybook -p 6006",
+		"storybook": "storybook dev -p 6006",
 		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput"
 	},
 	"main": "./dist/index.js",
diff --git a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx
index a55b22c4a8654..ad8637aed08da 100644
--- a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx
+++ b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
@@ -7,12 +7,12 @@ import * as stories from './VideoConfButton.stories';
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
 
 test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
-	const tree = render(<Story />);
+	const tree = render(<Story />, { legacyRoot: true });
 	expect(tree.baseElement).toMatchSnapshot();
 });
 
 test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
-	const { container } = render(<Story />);
+	const { container } = render(<Story />, { legacyRoot: true });
 
 	const results = await axe(container);
 	expect(results).toHaveNoViolations();
diff --git a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx
index 769f98563d6ed..73a66f0e1172a 100644
--- a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx
+++ b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx
@@ -1,10 +1,11 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 import VideoConfButton from './VideoConfButton';
 
 export default {
 	title: 'Components/VideoConfButton',
 	component: VideoConfButton,
-} satisfies ComponentMeta<typeof VideoConfButton>;
+	decorators: [],
+} satisfies Meta<typeof VideoConfButton>;
 
-export const Default: ComponentStory<typeof VideoConfButton> = () => <VideoConfButton>Button</VideoConfButton>;
+export const Default: StoryFn<typeof VideoConfButton> = (args) => <VideoConfButton {...args}>Button</VideoConfButton>;
diff --git a/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx b/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx
index 96f5b50af1e36..8c1d762b90fe6 100644
--- a/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx
+++ b/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
@@ -7,12 +7,12 @@ import * as stories from './VideoConfController.stories';
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
 
 test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
-	const tree = render(<Story />);
+	const tree = render(<Story />, { legacyRoot: true });
 	expect(tree.baseElement).toMatchSnapshot();
 });
 
 test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
-	const { container } = render(<Story />);
+	const { container } = render(<Story />, { legacyRoot: true });
 
 	const results = await axe(container);
 	expect(results).toHaveNoViolations();
diff --git a/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx b/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx
index dcce6da237ae8..be3e6f30edf7d 100644
--- a/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx
+++ b/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx
@@ -1,13 +1,13 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 import VideoConfController from './VideoConfController';
 
 export default {
 	title: 'Components/VideoConfController',
 	component: VideoConfController,
-} satisfies ComponentMeta<typeof VideoConfController>;
+} satisfies Meta<typeof VideoConfController>;
 
-export const Default: ComponentStory<typeof VideoConfController> = (args) => <VideoConfController {...args} />;
+export const Default: StoryFn<typeof VideoConfController> = (args) => <VideoConfController {...args} />;
 Default.args = {
 	'icon': 'info',
 	'aria-label': 'info',
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx
index 6b0db6b13b336..d8cd3f8203c19 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
@@ -7,12 +7,12 @@ import * as stories from './VideoConfMessage.stories';
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
 
 test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
-	const tree = render(<Story />);
+	const tree = render(<Story />, { legacyRoot: true });
 	expect(tree.baseElement).toMatchSnapshot();
 });
 
 test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
-	const { container } = render(<Story />);
+	const { container } = render(<Story />, { legacyRoot: true });
 
 	const results = await axe(container);
 	expect(results).toHaveNoViolations();
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
index 81a42d8b458fb..091305d18dfcc 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
@@ -1,5 +1,5 @@
 import { MessageDivider, Message, Avatar, Box } from '@rocket.chat/fuselage';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactElement } from 'react';
 
 import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
@@ -40,12 +40,12 @@ export default {
 			</Box>
 		),
 	],
-} satisfies ComponentMeta<typeof VideoConfMessage>;
+} satisfies Meta<typeof VideoConfMessage>;
 
 const avatarUrl =
 	'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
 
-export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
+export const CallingDM: StoryFn<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
 			<VideoConfMessageContent>
@@ -63,7 +63,7 @@ export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
 	</VideoConfMessage>
 );
 
-export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
+export const CallEndedDM: StoryFn<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
 			<VideoConfMessageContent>
@@ -81,7 +81,7 @@ export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
 	</VideoConfMessage>
 );
 
-export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
+export const CallOngoing: StoryFn<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
 			<VideoConfMessageContent>
@@ -100,7 +100,7 @@ export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
 	</VideoConfMessage>
 );
 
-export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
+export const CallEnded: StoryFn<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
 			<VideoConfMessageContent>
@@ -118,4 +118,4 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 	</VideoConfMessage>
 );
 
-export const Loading: ComponentStory<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;
+export const Loading: StoryFn<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
index d873da1413d0c..26f24c9bc992d 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
@@ -2,6 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes, ReactElement } from 'react';
 
 type VideoConfMessageProps = Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>;
+
 const VideoConfMessage = (props: VideoConfMessageProps): ReactElement => (
 	<Box
 		mbs={4}
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
index 5bd1553d79682..735fe3958709e 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
@@ -1,7 +1,7 @@
 import type { IVideoConferenceUser, Serialized } from '@rocket.chat/core-typings';
 import { Avatar, Box } from '@rocket.chat/fuselage';
 import { useUserAvatarPath } from '@rocket.chat/ui-contexts';
-import { ReactElement, memo } from 'react';
+import { memo, type ReactElement } from 'react';
 
 const MAX_USERS = 3;
 
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx
index d51db2e964d84..94b4f0e46f47f 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx
@@ -1,4 +1,4 @@
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
@@ -7,12 +7,12 @@ import * as stories from './VideoConfPopup.stories';
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
 
 test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
-	const tree = render(<Story />);
+	const tree = render(<Story />, { legacyRoot: true });
 	expect(tree.baseElement).toMatchSnapshot();
 });
 
 test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
-	const { container } = render(<Story />);
+	const { container } = render(<Story />, { legacyRoot: true });
 
 	const results = await axe(container);
 	expect(results).toHaveNoViolations();
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx
index c32590af8a14f..5e4c1afe7ec11 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx
@@ -1,20 +1,19 @@
 import { Avatar, Icon } from '@rocket.chat/fuselage';
 import { action } from '@storybook/addon-actions';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactElement } from 'react';
 
-import {
-	VideoConfPopup,
-	VideoConfPopupHeader,
-	VideoConfPopupTitle,
-	VideoConfPopupControllers,
-	VideoConfPopupContent,
-	VideoConfPopupFooter,
-	VideoConfPopupFooterButtons,
-	VideoConfPopupInfo,
-	VideoConfPopupBackdrop,
-} from '.';
-import { VideoConfController, VideoConfButton } from '..';
+import VideoConfButton from '../VideoConfButton';
+import VideoConfController from '../VideoConfController';
+import VideoConfPopup from './VideoConfPopup';
+import VideoConfPopupBackdrop from './VideoConfPopupBackdrop';
+import VideoConfPopupContent from './VideoConfPopupContent';
+import VideoConfPopupControllers from './VideoConfPopupControllers';
+import VideoConfPopupFooter from './VideoConfPopupFooter';
+import VideoConfPopupFooterButtons from './VideoConfPopupFooterButtons';
+import VideoConfPopupHeader from './VideoConfPopupHeader';
+import VideoConfPopupInfo from './VideoConfPopupInfo';
+import VideoConfPopupTitle from './VideoConfPopupTitle';
 
 export default {
 	title: 'Components/VideoConfPopup',
@@ -26,12 +25,12 @@ export default {
 			</VideoConfPopupBackdrop>
 		),
 	],
-} satisfies ComponentMeta<typeof VideoConfPopup>;
+} satisfies Meta<typeof VideoConfPopup>;
 
 const avatarUrl =
 	'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
 
-export const StartCall: ComponentStory<typeof VideoConfPopup> = () => (
+export const StartCall: StoryFn<typeof VideoConfPopup> = () => (
 	<VideoConfPopup aria-label='Start Call'>
 		<VideoConfPopupHeader>
 			<VideoConfPopupTitle text='Start Call' />
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
index c4fd17385acf9..218d1302a1f25 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
@@ -1,7 +1,7 @@
 import { Box, Palette } from '@rocket.chat/fuselage';
 import styled from '@rocket.chat/styled';
 import { forwardRef } from 'react';
-import type { ReactNode, ReactElement, HTMLAttributes, Ref } from 'react';
+import type { ReactNode, ReactElement, HTMLAttributes } from 'react';
 
 export const VideoConfPopupContainer = styled('div', ({ position: _position, ...props }: { position?: number }) => props)`
 	width: 100%;
@@ -20,9 +20,9 @@ type VideoConfPopupProps = {
 	position?: number;
 } & HTMLAttributes<HTMLElement>;
 
-const VideoConfPopup = forwardRef(function VideoConfPopup(
-	{ children, position, ...props }: VideoConfPopupProps,
-	ref: Ref<HTMLDivElement>,
+const VideoConfPopup = forwardRef<HTMLDivElement, VideoConfPopupProps>(function VideoConfPopup(
+	{ children, position, ...props },
+	ref,
 ): ReactElement {
 	return (
 		<VideoConfPopupContainer role='dialog' ref={ref} position={position} {...props}>
diff --git a/packages/ui-video-conf/tsconfig.json b/packages/ui-video-conf/tsconfig.json
index aa282e17ea6cd..d6c4cb19ee07e 100644
--- a/packages/ui-video-conf/tsconfig.json
+++ b/packages/ui-video-conf/tsconfig.json
@@ -2,7 +2,7 @@
 	"extends": "../../tsconfig.base.client.json",
 	"compilerOptions": {
 		"rootDirs": ["./src", "./"],
-		"outDir": "./dist"
+		"outDir": "./dist",
 	},
-	"include": ["./src/**/*", "./jest.config.ts"],
+	"include": ["./src/**/*", "./jest.config.ts", "./.storybook/**/*"],
 }
diff --git a/packages/ui-voip/.babelrc.json b/packages/ui-voip/.babelrc.json
new file mode 100644
index 0000000000000..f474986efbca9
--- /dev/null
+++ b/packages/ui-voip/.babelrc.json
@@ -0,0 +1,9 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		["@babel/preset-react", {
+			"runtime": "automatic"
+		}],
+		"@babel/preset-typescript"
+	]
+}
diff --git a/packages/ui-voip/.storybook/main.js b/packages/ui-voip/.storybook/main.js
deleted file mode 100644
index dc95f3584a3f9..0000000000000
--- a/packages/ui-voip/.storybook/main.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @type {import('@storybook/react/types').StorybookConfig} */
-module.exports = {
-	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
-	framework: '@storybook/react',
-	features: {
-		postcss: false,
-	},
-	typescript: {
-		reactDocgen: 'react-docgen-typescript-plugin',
-	},
-};
diff --git a/packages/ui-voip/.storybook/main.ts b/packages/ui-voip/.storybook/main.ts
new file mode 100644
index 0000000000000..49512a97334fc
--- /dev/null
+++ b/packages/ui-voip/.storybook/main.ts
@@ -0,0 +1,37 @@
+import { dirname, join, resolve } from 'path';
+
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-a11y'),
+		getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+	],
+
+	framework: {
+		name: getAbsolutePath('@storybook/react-webpack5'),
+		options: {},
+	},
+
+	typescript: {
+		reactDocgen: 'react-docgen',
+	},
+
+	docs: {},
+
+	webpackFinal: (config) => {
+		// This is only needed because of Fontello
+		config.resolve = {
+			...config.resolve,
+			roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')],
+		};
+
+		return config;
+	},
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value: any): string {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
diff --git a/packages/ui-video-conf/.storybook/preview.js b/packages/ui-voip/.storybook/preview.tsx
similarity index 68%
rename from packages/ui-video-conf/.storybook/preview.js
rename to packages/ui-voip/.storybook/preview.tsx
index d1e44f0c2b8c0..8da5cffa9ce2b 100644
--- a/packages/ui-video-conf/.storybook/preview.js
+++ b/packages/ui-voip/.storybook/preview.tsx
@@ -1,9 +1,10 @@
+import type { Decorator, Parameters } from '@storybook/react';
+
 import '../../../apps/meteor/app/theme/client/main.css';
 import 'highlight.js/styles/github.css';
 import '@rocket.chat/icons/dist/rocketchat.css';
 
-export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
+export const parameters: Parameters = {
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
@@ -12,7 +13,7 @@ export const parameters = {
 	},
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
 	(Story) => (
 		<div className='rc-old'>
 			<style>{`
@@ -24,3 +25,5 @@ export const decorators = [
 		</div>
 	),
 ];
+
+export const tags = ['autodocs'];
diff --git a/packages/ui-voip/package.json b/packages/ui-voip/package.json
index da19a96db3a2b..751e704e4724a 100644
--- a/packages/ui-voip/package.json
+++ b/packages/ui-voip/package.json
@@ -8,7 +8,7 @@
 		"test": "jest",
 		"testunit": "jest",
 		"build": "tsc -p tsconfig.build.json",
-		"storybook": "start-storybook -p 6006",
+		"storybook": "storybook dev -p 6006",
 		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
 		"typecheck": "tsc --noEmit --skipLibCheck -p tsconfig.json"
 	},
@@ -32,26 +32,26 @@
 		"@rocket.chat/ui-avatar": "workspace:^",
 		"@rocket.chat/ui-client": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
-		"@storybook/addon-a11y": "^6.5.16",
-		"@storybook/addon-actions": "~6.5.16",
-		"@storybook/addon-docs": "~6.5.16",
-		"@storybook/addon-essentials": "~6.5.16",
-		"@storybook/builder-webpack4": "~6.5.16",
-		"@storybook/manager-webpack4": "~6.5.16",
-		"@storybook/react": "~6.5.16",
-		"@storybook/testing-library": "~0.0.13",
-		"@storybook/testing-react": "~1.3.0",
+		"@storybook/addon-a11y": "^8.3.5",
+		"@storybook/addon-actions": "^8.3.5",
+		"@storybook/addon-docs": "^8.3.5",
+		"@storybook/addon-essentials": "^8.3.5",
+		"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+		"@storybook/react": "^8.3.5",
+		"@storybook/react-webpack5": "^8.3.5",
 		"@testing-library/react": "~16.0.1",
 		"@testing-library/user-event": "~14.5.2",
 		"@types/jest": "~29.5.12",
 		"@types/jest-axe": "~3.5.9",
+		"@types/react": "~17.0.80",
 		"eslint": "~8.45.0",
 		"eslint-plugin-react": "~7.32.2",
 		"eslint-plugin-react-hooks": "~4.6.2",
-		"eslint-plugin-storybook": "~0.6.15",
+		"eslint-plugin-storybook": "^0.9.0",
 		"jest": "~29.7.0",
 		"jest-axe": "~9.0.0",
-		"react-docgen-typescript-plugin": "~1.0.8",
+		"react": "~17.0.2",
+		"storybook": "^8.3.5",
 		"typescript": "~5.5.4"
 	},
 	"peerDependencies": {
@@ -63,7 +63,7 @@
 		"@rocket.chat/ui-avatar": "*",
 		"@rocket.chat/ui-client": "*",
 		"@rocket.chat/ui-contexts": "*",
-		"react": "^17.0.2",
+		"react": "~17.0.2",
 		"react-aria": "~3.23.1",
 		"react-dom": "^17.0.2"
 	},
diff --git a/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.stories.tsx b/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.stories.tsx
index a19e55cf3a7c2..dce92a5132431 100644
--- a/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.stories.tsx
+++ b/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ReactElement } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ReactElement } from 'react';
 
 import VoipActionButton from './VoipActionButton';
 
@@ -7,16 +7,16 @@ export default {
 	title: 'Components/VoipActionButton',
 	component: VoipActionButton,
 	decorators: [(Story): ReactElement => <Story />],
-} satisfies ComponentMeta<typeof VoipActionButton>;
+} satisfies Meta<typeof VoipActionButton>;
 
-export const SuccessButton: ComponentStory<typeof VoipActionButton> = () => {
+export const SuccessButton: StoryFn<typeof VoipActionButton> = () => {
 	return <VoipActionButton success icon='phone' label='Success Button' />;
 };
 
-export const DangerButton: ComponentStory<typeof VoipActionButton> = () => {
+export const DangerButton: StoryFn<typeof VoipActionButton> = () => {
 	return <VoipActionButton danger icon='phone' label='Danger Button' />;
 };
 
-export const NeutralButton: ComponentStory<typeof VoipActionButton> = () => {
+export const NeutralButton: StoryFn<typeof VoipActionButton> = () => {
 	return <VoipActionButton icon='phone' label='Neutral Button' />;
 };
diff --git a/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.tsx b/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.tsx
index 17f3e847322c3..a10084934cd43 100644
--- a/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.tsx
+++ b/packages/ui-voip/src/components/VoipActionButton/VoipActionButton.tsx
@@ -1,8 +1,8 @@
 import { Icon, IconButton } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-type ActionButtonProps = Pick<ComponentProps<typeof IconButton>, 'className' | 'disabled' | 'pressed' | 'danger' | 'success'> & {
+type ActionButtonProps = Pick<ComponentPropsWithoutRef<typeof IconButton>, 'className' | 'disabled' | 'pressed' | 'danger' | 'success'> & {
 	label: string;
 	icon: Keys;
 	onClick?: () => void;
diff --git a/packages/ui-voip/src/components/VoipActions/VoipActions.stories.tsx b/packages/ui-voip/src/components/VoipActions/VoipActions.stories.tsx
index 0a1b4a48324e7..ec077cc1dc812 100644
--- a/packages/ui-voip/src/components/VoipActions/VoipActions.stories.tsx
+++ b/packages/ui-voip/src/components/VoipActions/VoipActions.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ReactElement } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ReactElement } from 'react';
 
 import VoipActions from './VoipActions';
 
@@ -9,16 +9,16 @@ export default {
 	title: 'Components/VoipActions',
 	component: VoipActions,
 	decorators: [(Story): ReactElement => <Story />],
-} satisfies ComponentMeta<typeof VoipActions>;
+} satisfies Meta<typeof VoipActions>;
 
-export const IncomingActions: ComponentStory<typeof VoipActions> = () => {
+export const IncomingActions: StoryFn<typeof VoipActions> = () => {
 	return <VoipActions onDecline={noop} onAccept={noop} />;
 };
 
-export const OngoingActions: ComponentStory<typeof VoipActions> = () => {
+export const OngoingActions: StoryFn<typeof VoipActions> = () => {
 	return <VoipActions onEndCall={noop} onDTMF={noop} onHold={noop} onMute={noop} onTransfer={noop} />;
 };
 
-export const OutgoingActions: ComponentStory<typeof VoipActions> = () => {
+export const OutgoingActions: StoryFn<typeof VoipActions> = () => {
 	return <VoipActions onEndCall={noop} />;
 };
diff --git a/packages/ui-voip/src/components/VoipContactId/VoipContactId.stories.tsx b/packages/ui-voip/src/components/VoipContactId/VoipContactId.stories.tsx
index 2706a5381bd66..9c1659bc0f080 100644
--- a/packages/ui-voip/src/components/VoipContactId/VoipContactId.stories.tsx
+++ b/packages/ui-voip/src/components/VoipContactId/VoipContactId.stories.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 import VoipContactId from './VoipContactId';
 
@@ -17,20 +17,20 @@ export default {
 			</QueryClientProvider>
 		),
 	],
-} satisfies ComponentMeta<typeof VoipContactId>;
+} satisfies Meta<typeof VoipContactId>;
 
-export const Loading: ComponentStory<typeof VoipContactId> = () => {
+export const Loading: StoryFn<typeof VoipContactId> = () => {
 	return <VoipContactId name='1000' isLoading />;
 };
 
-export const WithUsername: ComponentStory<typeof VoipContactId> = () => {
+export const WithUsername: StoryFn<typeof VoipContactId> = () => {
 	return <VoipContactId username='john.doe' name='John Doe' />;
 };
 
-export const WithTransfer: ComponentStory<typeof VoipContactId> = () => {
+export const WithTransfer: StoryFn<typeof VoipContactId> = () => {
 	return <VoipContactId username='john.doe' transferedBy='Jane Doe' name='John Doe' />;
 };
 
-export const WithPhoneNumber: ComponentStory<typeof VoipContactId> = () => {
+export const WithPhoneNumber: StoryFn<typeof VoipContactId> = () => {
 	return <VoipContactId name='+554788765522' />;
 };
diff --git a/packages/ui-voip/src/components/VoipDialPad/VoipDialPad.stories.tsx b/packages/ui-voip/src/components/VoipDialPad/VoipDialPad.stories.tsx
index 4b2371bb05161..eb3935d8e40b9 100644
--- a/packages/ui-voip/src/components/VoipDialPad/VoipDialPad.stories.tsx
+++ b/packages/ui-voip/src/components/VoipDialPad/VoipDialPad.stories.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ReactElement } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ReactElement } from 'react';
 
 import VoipDialPad from './VoipDialPad';
 
@@ -14,8 +14,8 @@ export default {
 			</Box>
 		),
 	],
-} satisfies ComponentMeta<typeof VoipDialPad>;
+} satisfies Meta<typeof VoipDialPad>;
 
-export const DialPad: ComponentStory<typeof VoipDialPad> = () => {
+export const DialPad: StoryFn<typeof VoipDialPad> = () => {
 	return <VoipDialPad value='' onChange={() => undefined} />;
 };
diff --git a/packages/ui-voip/src/components/VoipPopup/VoipPopup.spec.tsx b/packages/ui-voip/src/components/VoipPopup/VoipPopup.spec.tsx
index 644b8aba47200..6ebf1e6fb0384 100644
--- a/packages/ui-voip/src/components/VoipPopup/VoipPopup.spec.tsx
+++ b/packages/ui-voip/src/components/VoipPopup/VoipPopup.spec.tsx
@@ -1,5 +1,5 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { composeStories } from '@storybook/testing-react';
+import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
diff --git a/packages/ui-voip/src/components/VoipPopup/VoipPopup.stories.tsx b/packages/ui-voip/src/components/VoipPopup/VoipPopup.stories.tsx
index b3bc0bda38a43..d994c99a19b17 100644
--- a/packages/ui-voip/src/components/VoipPopup/VoipPopup.stories.tsx
+++ b/packages/ui-voip/src/components/VoipPopup/VoipPopup.stories.tsx
@@ -1,6 +1,6 @@
 import { Emitter } from '@rocket.chat/emitter';
 import { MockedModalContext } from '@rocket.chat/mock-providers';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 
@@ -64,24 +64,24 @@ export default {
 			</QueryClientProvider>
 		),
 	],
-} satisfies ComponentMeta<typeof VoipPopup>;
+} satisfies Meta<typeof VoipPopup>;
 
-export const IncomingCall: ComponentStory<typeof VoipPopup> = () => {
+export const IncomingCall: StoryFn<typeof VoipPopup> = () => {
 	client.setSessionType('INCOMING');
 	return <VoipPopup />;
 };
 
-export const OngoingCall: ComponentStory<typeof VoipPopup> = () => {
+export const OngoingCall: StoryFn<typeof VoipPopup> = () => {
 	client.setSessionType('ONGOING');
 	return <VoipPopup />;
 };
 
-export const OutgoingCall: ComponentStory<typeof VoipPopup> = () => {
+export const OutgoingCall: StoryFn<typeof VoipPopup> = () => {
 	client.setSessionType('OUTGOING');
 	return <VoipPopup />;
 };
 
-export const ErrorCall: ComponentStory<typeof VoipPopup> = () => {
+export const ErrorCall: StoryFn<typeof VoipPopup> = () => {
 	client.setSessionType('ERROR');
 	return <VoipPopup />;
 };
diff --git a/packages/ui-voip/src/components/VoipSettingsButton/hooks/useVoipDeviceSettings.tsx b/packages/ui-voip/src/components/VoipSettingsButton/hooks/useVoipDeviceSettings.tsx
index 2ac43f66fe88b..2846adc97bd4e 100644
--- a/packages/ui-voip/src/components/VoipSettingsButton/hooks/useVoipDeviceSettings.tsx
+++ b/packages/ui-voip/src/components/VoipSettingsButton/hooks/useVoipDeviceSettings.tsx
@@ -1,5 +1,5 @@
 import { Box, RadioButton } from '@rocket.chat/fuselage';
-import { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useAvailableDevices, useSelectedDevices, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { MouseEvent } from 'react';
diff --git a/packages/ui-voip/src/tests/mocks/index.ts b/packages/ui-voip/src/tests/mocks/index.ts
index 926b5408174e1..aade0ab6337be 100644
--- a/packages/ui-voip/src/tests/mocks/index.ts
+++ b/packages/ui-voip/src/tests/mocks/index.ts
@@ -1,6 +1,6 @@
-import { OperationParams } from '@rocket.chat/rest-typings';
+import type { OperationParams } from '@rocket.chat/rest-typings';
 
-import { VoipErrorSession, VoipIncomingSession, VoipOngoingSession, VoipOutgoingSession, VoipSession } from '../../definitions';
+import type { VoipErrorSession, VoipIncomingSession, VoipOngoingSession, VoipOutgoingSession, VoipSession } from '../../definitions';
 
 export const createMockFreeSwitchExtensionDetails = (
 	overwrite?: Partial<OperationParams<'GET', '/v1/voip-freeswitch.extension.getDetails'>>,
diff --git a/packages/ui-voip/tsconfig.json b/packages/ui-voip/tsconfig.json
index aa282e17ea6cd..b5431443f88f6 100644
--- a/packages/ui-voip/tsconfig.json
+++ b/packages/ui-voip/tsconfig.json
@@ -4,5 +4,5 @@
 		"rootDirs": ["./src", "./"],
 		"outDir": "./dist"
 	},
-	"include": ["./src/**/*", "./jest.config.ts"],
+	"include": ["./src/**/*", "./jest.config.ts", "./.storybook/**/*"],
 }
diff --git a/yarn.lock b/yarn.lock
index 8b4fb514a85a1..e253ba61ac4d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10349,24 +10349,25 @@ __metadata:
     "@rocket.chat/styled": "npm:~0.31.25"
     "@rocket.chat/ui-avatar": "workspace:^"
     "@rocket.chat/ui-contexts": "workspace:^"
-    "@storybook/addon-a11y": "npm:^6.5.16"
-    "@storybook/addon-actions": "npm:~6.5.16"
-    "@storybook/addon-docs": "npm:~6.5.16"
-    "@storybook/addon-essentials": "npm:~6.5.16"
-    "@storybook/builder-webpack4": "npm:~6.5.16"
-    "@storybook/manager-webpack4": "npm:~6.5.16"
-    "@storybook/react": "npm:~6.5.16"
-    "@storybook/testing-library": "npm:~0.0.13"
-    "@storybook/testing-react": "npm:~1.3.0"
+    "@storybook/addon-a11y": "npm:^8.3.5"
+    "@storybook/addon-actions": "npm:^8.3.5"
+    "@storybook/addon-docs": "npm:^8.3.5"
+    "@storybook/addon-essentials": "npm:^8.3.5"
+    "@storybook/addon-styling-webpack": "npm:^1.0.0"
+    "@storybook/addon-webpack5-compiler-babel": "npm:^3.0.3"
+    "@storybook/react": "npm:^8.3.5"
+    "@storybook/react-webpack5": "npm:^8.3.5"
     "@types/jest": "npm:~29.5.13"
     "@types/jest-axe": "npm:~3.5.9"
+    "@types/react": "npm:~17.0.80"
     eslint: "npm:~8.45.0"
     eslint-plugin-react: "npm:~7.32.2"
     eslint-plugin-react-hooks: "npm:~4.6.2"
     eslint-plugin-storybook: "npm:~0.6.15"
     jest: "npm:~29.7.0"
     jest-axe: "npm:~9.0.0"
-    react-docgen-typescript-plugin: "npm:~1.0.8"
+    react: "npm:~17.0.2"
+    storybook: "npm:^8.3.5"
     typescript: "npm:~5.5.4"
   peerDependencies:
     "@rocket.chat/css-in-js": "*"
@@ -10376,7 +10377,7 @@ __metadata:
     "@rocket.chat/styled": "*"
     "@rocket.chat/ui-avatar": 7.0.0
     "@rocket.chat/ui-contexts": 11.0.0
-    react: ^17.0.2
+    react: ~17.0.2
     react-dom: ^17.0.2
   languageName: unknown
   linkType: soft
@@ -10399,29 +10400,29 @@ __metadata:
     "@rocket.chat/ui-avatar": "workspace:^"
     "@rocket.chat/ui-client": "workspace:^"
     "@rocket.chat/ui-contexts": "workspace:^"
-    "@storybook/addon-a11y": "npm:^6.5.16"
-    "@storybook/addon-actions": "npm:~6.5.16"
-    "@storybook/addon-docs": "npm:~6.5.16"
-    "@storybook/addon-essentials": "npm:~6.5.16"
-    "@storybook/builder-webpack4": "npm:~6.5.16"
-    "@storybook/manager-webpack4": "npm:~6.5.16"
-    "@storybook/react": "npm:~6.5.16"
-    "@storybook/testing-library": "npm:~0.0.13"
-    "@storybook/testing-react": "npm:~1.3.0"
+    "@storybook/addon-a11y": "npm:^8.3.5"
+    "@storybook/addon-actions": "npm:^8.3.5"
+    "@storybook/addon-docs": "npm:^8.3.5"
+    "@storybook/addon-essentials": "npm:^8.3.5"
+    "@storybook/addon-webpack5-compiler-babel": "npm:^3.0.3"
+    "@storybook/react": "npm:^8.3.5"
+    "@storybook/react-webpack5": "npm:^8.3.5"
     "@tanstack/react-query": "npm:^4.16.1"
     "@testing-library/react": "npm:~16.0.1"
     "@testing-library/user-event": "npm:~14.5.2"
     "@types/jest": "npm:~29.5.12"
     "@types/jest-axe": "npm:~3.5.9"
+    "@types/react": "npm:~17.0.80"
     eslint: "npm:~8.45.0"
     eslint-plugin-react: "npm:~7.32.2"
     eslint-plugin-react-hooks: "npm:~4.6.2"
-    eslint-plugin-storybook: "npm:~0.6.15"
+    eslint-plugin-storybook: "npm:^0.9.0"
     jest: "npm:~29.7.0"
     jest-axe: "npm:~9.0.0"
-    react-docgen-typescript-plugin: "npm:~1.0.8"
+    react: "npm:~17.0.2"
     react-i18next: "npm:~13.2.2"
     sip.js: "npm:^0.20.1"
+    storybook: "npm:^8.3.5"
     typescript: "npm:~5.5.4"
   peerDependencies:
     "@rocket.chat/css-in-js": "*"
@@ -10432,7 +10433,7 @@ __metadata:
     "@rocket.chat/ui-avatar": "*"
     "@rocket.chat/ui-client": "*"
     "@rocket.chat/ui-contexts": "*"
-    react: ^17.0.2
+    react: ~17.0.2
     react-aria: ~3.23.1
     react-dom: ^17.0.2
   languageName: unknown
@@ -10781,7 +10782,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:6.5.16, @storybook/addon-a11y@npm:^6.5.16":
+"@storybook/addon-a11y@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-a11y@npm:6.5.16"
   dependencies:
@@ -10813,6 +10814,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-a11y@npm:^8.3.5":
+  version: 8.3.5
+  resolution: "@storybook/addon-a11y@npm:8.3.5"
+  dependencies:
+    "@storybook/addon-highlight": "npm:8.3.5"
+    axe-core: "npm:^4.2.0"
+  peerDependencies:
+    storybook: ^8.3.5
+  checksum: 10/331fd13048a4781039f4a25de3a38967499495a4144bd72c2cf9058a37fbfc476d6f351d123066025778cd490ef3136ced8646553ccc0a717e7b3ad3b2010e7e
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-actions@npm:6.5.16, @storybook/addon-actions@npm:~6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-actions@npm:6.5.16"
@@ -11253,7 +11266,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-styling-webpack@npm:~1.0.0":
+"@storybook/addon-styling-webpack@npm:^1.0.0, @storybook/addon-styling-webpack@npm:~1.0.0":
   version: 1.0.0
   resolution: "@storybook/addon-styling-webpack@npm:1.0.0"
   dependencies:
@@ -11915,15 +11928,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:0.0.2--canary.87bc651.0":
-  version: 0.0.2--canary.87bc651.0
-  resolution: "@storybook/csf@npm:0.0.2--canary.87bc651.0"
-  dependencies:
-    lodash: "npm:^4.17.15"
-  checksum: 10/fe1b9591a492c5d2e357d120f566a8d5939a79417ee746ab688174e79ede36fe1f55ae899518e4ac5ab803c70b0def9b020d959326d6bdab1eeaa38f3f713637
-  languageName: node
-  linkType: hard
-
 "@storybook/csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/csf@npm:0.0.1"
@@ -12515,21 +12519,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/testing-react@npm:~1.3.0":
-  version: 1.3.0
-  resolution: "@storybook/testing-react@npm:1.3.0"
-  dependencies:
-    "@storybook/csf": "npm:0.0.2--canary.87bc651.0"
-  peerDependencies:
-    "@storybook/addons": ">=6.4.0"
-    "@storybook/client-api": ">=6.4.0"
-    "@storybook/preview-web": ">=6.4.0"
-    "@storybook/react": ">=6.4.0"
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/3a4e05aacd37e87082d95894cbbf40edcbf0f1012faf2c29f00a3be82954f8c65e000f3df9ef07e6b46ef05b8438a5a8f8c00f371b837db14687d798157b651b
-  languageName: node
-  linkType: hard
-
 "@storybook/theming@npm:6.5.16, @storybook/theming@npm:^6.5.14, @storybook/theming@npm:~6.5.16":
   version: 6.5.16
   resolution: "@storybook/theming@npm:6.5.16"
@@ -15134,6 +15123,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.62.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/visitor-keys": "npm:5.62.0"
+  checksum: 10/e827770baa202223bc0387e2fd24f630690809e460435b7dc9af336c77322290a770d62bd5284260fa881c86074d6a9fd6c97b07382520b115f6786b8ed499da
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/type-utils@npm:5.60.1":
   version: 5.60.1
   resolution: "@typescript-eslint/type-utils@npm:5.60.1"
@@ -15165,6 +15164,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/types@npm:5.62.0"
+  checksum: 10/24e8443177be84823242d6729d56af2c4b47bfc664dd411a1d730506abf2150d6c31bdefbbc6d97c8f91043e3a50e0c698239dcb145b79bb6b0c34469aaf6c45
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:5.58.0":
   version: 5.58.0
   resolution: "@typescript-eslint/typescript-estree@npm:5.58.0"
@@ -15201,6 +15207,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/visitor-keys": "npm:5.62.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    semver: "npm:^7.3.7"
+    tsutils: "npm:^3.21.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/06c975eb5f44b43bd19fadc2e1023c50cf87038fe4c0dd989d4331c67b3ff509b17fa60a3251896668ab4d7322bdc56162a9926971218d2e1a1874d2bef9a52e
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:5.60.1, @typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.45.0, @typescript-eslint/utils@npm:^5.58.0":
   version: 5.60.1
   resolution: "@typescript-eslint/utils@npm:5.60.1"
@@ -15219,6 +15243,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/utils@npm:^5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/utils@npm:5.62.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.2.0"
+    "@types/json-schema": "npm:^7.0.9"
+    "@types/semver": "npm:^7.3.12"
+    "@typescript-eslint/scope-manager": "npm:5.62.0"
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/typescript-estree": "npm:5.62.0"
+    eslint-scope: "npm:^5.1.1"
+    semver: "npm:^7.3.7"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10/15ef13e43998a082b15f85db979f8d3ceb1f9ce4467b8016c267b1738d5e7cdb12aa90faf4b4e6dd6486c236cf9d33c463200465cf25ff997dbc0f12358550a1
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:5.58.0":
   version: 5.58.0
   resolution: "@typescript-eslint/visitor-keys@npm:5.58.0"
@@ -15239,6 +15281,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.62.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:5.62.0"
+    eslint-visitor-keys: "npm:^3.3.0"
+  checksum: 10/dc613ab7569df9bbe0b2ca677635eb91839dfb2ca2c6fa47870a5da4f160db0b436f7ec0764362e756d4164e9445d49d5eb1ff0b87f4c058946ae9d8c92eb388
+  languageName: node
+  linkType: hard
+
 "@ungap/promise-all-settled@npm:1.1.2":
   version: 1.1.2
   resolution: "@ungap/promise-all-settled@npm:1.1.2"
@@ -23281,6 +23333,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-storybook@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "eslint-plugin-storybook@npm:0.9.0"
+  dependencies:
+    "@storybook/csf": "npm:^0.0.1"
+    "@typescript-eslint/utils": "npm:^5.62.0"
+    requireindex: "npm:^1.2.0"
+    ts-dedent: "npm:^2.2.0"
+  peerDependencies:
+    eslint: ">=6"
+  checksum: 10/5207e016cca6e095ddce911acfa12e973092fdc1ec716dfb54be70b859ac9be7ebde9ba6baa04a0e2fc4e34c772c4e9261d36a78c2cd5a873eeebf6087073b9f
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-storybook@npm:~0.6.15":
   version: 0.6.15
   resolution: "eslint-plugin-storybook@npm:0.6.15"
@@ -37416,7 +37482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"requireindex@npm:1.2.0, requireindex@npm:^1.1.0":
+"requireindex@npm:1.2.0, requireindex@npm:^1.1.0, requireindex@npm:^1.2.0":
   version: 1.2.0
   resolution: "requireindex@npm:1.2.0"
   checksum: 10/266d1cb31f6cbc4b6cf2e898f5bbc45581f7919bcf61bba5c45d0adb69b722b9ff5a13727be3350cde4520d7cd37f39df45d58a29854baaa4552cd6b05ae4a1a