chore: Recover storybooks (#33565)

.vscode/client.code-snippets

@@ -3,17 +3,17 @@
     "scope": "typescriptreact",
     "prefix": "sbmodule",
     "body": [
-      "import type { ComponentMeta, ComponentStory } from '@storybook/react';",
+      "import type { Meta, StoryFn } from '@storybook/react';",
       "import React from 'react';",
       "",
       "import $1 from './$1';",
       "",
       "export default {",
       "\ttitle: '$2',",
       "\tcomponent: $1,",
-      "} as ComponentMeta<typeof $1>;",
+      "} satisfies Meta<typeof $1>;",
       "",
-      "export const Example: ComponentStory<typeof $1> = (args) => <$1 {...args} />;",
+      "export const Example: StoryFn<typeof $1> = (args) => <$1 {...args} />;",
     ]
   },
   "Storybook meta": {
@@ -23,14 +23,14 @@
       "export default {",
       "\ttitle: '$1',",
       "\tcomponent: $2,",
-      "} as ComponentMeta<typeof $2>;"
+      "} satisfies Meta<typeof $2>;"
     ]
   },
   "Storybook story": {
     "scope": "typescriptreact",
     "prefix": "sbstory",
     "body": [
-      "export const $1: ComponentStory<typeof $2> = (args) => <$2 {...args} />;"
+      "export const $1: StoryFn<typeof $2> = (args) => <$2 {...args} />;"
     ]
   }
 }

apps/meteor/.babelrc

@@ -1,5 +1,14 @@
 {
-	"presets": ["@babel/preset-env", "@babel/preset-react"],
+	"presets": [
+		"@babel/preset-env",
+		"@babel/preset-react",
+		[
+			"@babel/preset-typescript",
+			{
+				"allowDeclareFields": true
+			}
+		]
+	],
 	"env": {
 		"coverage": {
 			"plugins": [

apps/meteor/.eslintignore

@@ -9,6 +9,6 @@
 !/.mocharc.js
 !/.mocharc.*.js
 !/.scripts/
-#!/.storybook/
+!/.storybook/
 !/client/.eslintrc.js
 !/ee/client/.eslintrc.js

apps/meteor/.scripts/translation-check.ts

@@ -32,7 +32,7 @@ const parseFile = async (path: PathLike) => {
 				throw new SyntaxError(`Invalid JSON on file ${path}:${line}:${column}`);
 			}
 		}
-		throw new SyntaxError(`Invalid JSON on file ${path}: ${e.message}`);
+		throw new SyntaxError(`Invalid JSON on file ${path}: ${(e as Error).message}`);
 	}
 
 	if (hasDuplicatedKeys(content, json)) {

apps/meteor/.scripts/translation-diff.ts

@@ -9,7 +9,7 @@ async function translationDiff(source: string, target: string) {
 	console.debug('loading translations from', translationDir);
 
 	function diffKeys(a: Record<string, string>, b: Record<string, string>) {
-		const diff = {};
+		const diff: Record<string, string> = {};
 		Object.keys(a).forEach((key) => {
 			if (!b[key]) {
 				diff[key] = a[key];

apps/meteor/.storybook/decorators.tsx

@@ -1,17 +1,15 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
-import type { DecoratorFunction } from '@storybook/addons';
-import type { ReactElement } from 'react';
+import type { Decorator } from '@storybook/react';
 import React from 'react';
 
 import ModalContextMock from '../client/stories/contexts/ModalContextMock';
-import QueryClientProviderMock from '../client/stories/contexts/QueryClientProviderMock';
 import RouterContextMock from '../client/stories/contexts/RouterContextMock';
 import ServerContextMock from '../client/stories/contexts/ServerContextMock';
 import TranslationContextMock from '../client/stories/contexts/TranslationContextMock';
 
 const MockedAppRoot = mockAppRoot().build();
 
-export const rocketChatDecorator: DecoratorFunction<ReactElement<unknown>> = (fn, { parameters }) => {
+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');