Chore: Enforce TypeScript on Storybook

.github/workflows/build_and_test.yml

@@ -128,8 +128,6 @@ jobs:
 
     - name: Build Storybook to sanity check components
       run: npm run build-storybook ; rm -rf ./storybook-static
-      env:
-        NODE_OPTIONS: --max_old_space_size=8192
 
 
     # To reduce memory need during actual build, build the packages solely first

.storybook/decorators.js → .storybook/decorators.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { MeteorProviderMock } from './mocks/providers';
 
-export const rocketChatDecorator = (fn) => {
+export const rocketChatDecorator = (storyFn: () => ReactElement): ReactElement => {
 	const linkElement = document.getElementById('theme-styles') || document.createElement('link');
 	if (linkElement.id !== 'theme-styles') {
 		require('../app/theme/client/main.css');
@@ -14,7 +14,8 @@ export const rocketChatDecorator = (fn) => {
 		document.head.appendChild(linkElement);
 	}
 
-	// eslint-disable-next-line import/no-unresolved
+	/* eslint-disable @typescript-eslint/no-var-requires */
+	/* eslint-disable-next-line */
 	const { default: icons } = require('!!raw-loader!../private/public/icons.svg');
 
 	return <MeteorProviderMock>
@@ -25,12 +26,12 @@ export const rocketChatDecorator = (fn) => {
 		`}</style>
 		<div dangerouslySetInnerHTML={{ __html: icons }} />
 		<div className='color-primary-font-color'>
-			{fn()}
+			{storyFn()}
 		</div>
 	</MeteorProviderMock>;
 };
 
-export const fullHeightDecorator = (storyFn) =>
+export const fullHeightDecorator = (storyFn: () => ReactElement): ReactElement =>
 	<div style={{
 		display: 'flex',
 		flexDirection: 'column',
@@ -39,7 +40,7 @@ export const fullHeightDecorator = (storyFn) =>
 		{storyFn()}
 	</div>;
 
-export const centeredDecorator = (storyFn) =>
+export const centeredDecorator = (storyFn: () => ReactElement): ReactElement =>
 	<div style={{
 		display: 'flex',
 		alignItems: 'center',

.storybook/hooks.js → .storybook/hooks.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 
-export const useAutoToggle = (initialValue = false, ms = 1000) => {
+export const useAutoToggle = (initialValue = false, ms = 1000): boolean => {
 	const [value, setValue] = useState(initialValue);
 
 	useEffect(() => {
 		const timer = setInterval(() => setValue((value) => !value), ms);
 
-		return () => {
+		return (): void => {
 			clearInterval(timer);
 		};
 	}, [ms]);

.storybook/logo.svg.d.ts

@@ -0,0 +1,2 @@
+declare const path: string;
+export = path;

.storybook/main.js

@@ -1,12 +1,12 @@
-const path = require('path');
+const { resolve, relative, join } = require('path');
 
 const webpack = require('webpack');
 
 module.exports = {
 	stories: [
-		'../app/**/*.stories.js',
-		'../client/**/*.stories.js',
-		'../ee/**/*.stories.js',
+		'../app/**/*.stories.{js,tsx}',
+		'../client/**/*.stories.{js,tsx}',
+		'../ee/**/*.stories.{js,tsx}',
 	],
 	addons: [
 		'@storybook/addon-essentials',
@@ -26,8 +26,8 @@ module.exports = {
 					require('autoprefixer')(),
 					require('postcss-url')({ url: ({ absolutePath, relativePath, url }) => {
 						const absoluteDir = absolutePath.slice(0, -relativePath.length);
-						const relativeDir = path.relative(absoluteDir, path.resolve(__dirname, '../public'));
-						const newPath = path.join(relativeDir, url);
+						const relativeDir = relative(absoluteDir, resolve(__dirname, '../public'));
+						const newPath = join(relativeDir, url);
 						return newPath;
 					} }),
 				],
@@ -50,24 +50,20 @@ module.exports = {
 				{
 					loader: 'ts-loader',
 					options: {
-						compilerOptions: {
-							noEmit: false,
-						},
+						configFile: join(__dirname, '../tsconfig.webpack.json'),
 					},
 				},
 			],
 		});
 
-		config.resolve.extensions.push('.ts', '.tsx');
-
 		config.plugins.push(
 			new webpack.NormalModuleReplacementPlugin(
 				/^meteor/,
 				require.resolve('./mocks/meteor.js'),
 			),
 			new webpack.NormalModuleReplacementPlugin(
 				/(app)\/*.*\/(server)\/*/,
-				require.resolve('./mocks/empty.js'),
+				require.resolve('./mocks/empty.ts'),
 			),
 		);
 

.storybook/manager.js → .storybook/manager.ts

@@ -1,6 +1,6 @@
-import colorTokens from '@rocket.chat/fuselage-tokens/colors';
+import colorTokens from '@rocket.chat/fuselage-tokens/colors.json';
 import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming/create';
+import { create } from '@storybook/theming';
 
 import manifest from '../package.json';
 import logo from './logo.svg';
@@ -10,7 +10,7 @@ addons.setConfig({
 		base: 'light',
 		brandTitle: manifest.name,
 		brandImage: logo,
-		brandUrl: manifest.homepage,
+		brandUrl: manifest.author.url,
 		colorPrimary: colorTokens.n500,
 		colorSecondary: colorTokens.b500,
 	}),

.storybook/mocks/meteor.js

@@ -5,7 +5,9 @@ export const Meteor = {
 	isClient: true,
 	isServer: false,
 	_localStorage: window.localStorage,
-	absoluteUrl: () => {},
+	absoluteUrl: Object.assign(() => {}, {
+		defaultOptions: {},
+	}),
 	userId: () => {},
 	Streamer: () => ({
 		on: () => {},
@@ -16,8 +18,6 @@ export const Meteor = {
 	call: () => {},
 };
 
-Meteor.absoluteUrl.defaultOptions = {};
-
 export const Tracker = {
 	autorun: () => ({
 		stop: () => {},
@@ -51,17 +51,17 @@ export const ReactiveDict = () => ({
 	all: () => {},
 });
 
-export const Template = () => ({
+export const Template = Object.assign(() => ({
 	onCreated: () => {},
 	onRendered: () => {},
 	onDestroyed: () => {},
 	helpers: () => {},
 	events: () => {},
+}), {
+	registerHelper: () => {},
+	__checkName: () => {},
 });
 
-Template.registerHelper = () => {};
-Template.__checkName = () => {};
-
 export const Blaze = {
 	Template,
 	registerHelper: () => {},

.storybook/mocks/providers.js → .storybook/mocks/providers.tsx

@@ -1,12 +1,12 @@
 import i18next from 'i18next';
-import React from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
 
-import { TranslationContext } from '../../client/contexts/TranslationContext';
+import { TranslationContext, TranslationContextValue } from '../../client/contexts/TranslationContext';
 import ServerProvider from '../../client/providers/ServerProvider';
 
-let contextValue;
+let contextValue: TranslationContextValue;
 
-const getContextValue = () => {
+const getContextValue = (): TranslationContextValue => {
 	if (contextValue) {
 		return contextValue;
 	}
@@ -26,8 +26,8 @@ const getContextValue = () => {
 		initImmediate: false,
 	});
 
-	const translate = (key, ...replaces) => {
-		if (typeof replaces[0] === 'object') {
+	const translate = (key: string, ...replaces: unknown[]): string => {
+		if (typeof replaces[0] === 'object' && replaces[0] !== null) {
 			const [options] = replaces;
 			return i18next.t(key, options);
 		}
@@ -42,7 +42,7 @@ const getContextValue = () => {
 		});
 	};
 
-	translate.has = (key) => key && i18next.exists(key);
+	translate.has = (key: string): boolean => !!key && i18next.exists(key);
 
 	contextValue = {
 		languages: [{
@@ -52,16 +52,17 @@ const getContextValue = () => {
 		}],
 		language: 'en',
 		translate,
+		loadLanguage: async (): Promise<void> => undefined,
 	};
 
 	return contextValue;
 };
 
-function TranslationProviderMock({ children }) {
+function TranslationProviderMock({ children }: PropsWithChildren<{}>): ReactElement {
 	return <TranslationContext.Provider children={children} value={getContextValue()} />;
 }
 
-export function MeteorProviderMock({ children }) {
+export function MeteorProviderMock({ children }: PropsWithChildren<{}>): ReactElement {
 	return <ServerProvider>
 		<TranslationProviderMock>
 			{children}

.storybook/preview.js → .storybook/preview.ts

@@ -18,7 +18,7 @@ addParameters({
 		page: DocsPage,
 	},
 	options: {
-		storySort: ([, a], [, b]) =>
+		storySort: ([, a], [, b]): number =>
 			a.kind.localeCompare(b.kind),
 	},
 });

client/components/Card/Body.tsx

@@ -1,10 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC, CSSProperties } from 'react';
 
-const Body: FC<{ flexDirection: CSSProperties['flexDirection'] }> = ({
-	children,
-	flexDirection = 'row',
-}) => (
+type BodyProps = {
+	flexDirection?: CSSProperties['flexDirection'];
+};
+
+const Body: FC<BodyProps> = ({ children, flexDirection = 'row' }) => (
 	<Box mb='x8' display='flex' flexDirection={flexDirection} flexGrow={1}>
 		{children}
 	</Box>

client/components/Card/Card.stories.js → client/components/Card/Card.stories.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { Story } from '@storybook/react';
 import React from 'react';
 
 import Card from '.';
@@ -8,7 +9,7 @@ export default {
 	component: Card,
 };
 
-export const Single = () => (
+export const Single: Story = () => (
 	<Box p='x40'>
 		<Card>
 			<Card.Title>A card</Card.Title>
@@ -39,7 +40,7 @@ export const Single = () => (
 	</Box>
 );
 
-export const Double = () => (
+export const Double: Story = () => (
 	<Box p='x40'>
 		<Card>
 			<Card.Title>A card</Card.Title>

client/components/DotLeader.stories.js → client/components/DotLeader.stories.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
+import { Story } from '@storybook/react';
 import React from 'react';
 
 import DotLeader from './DotLeader';
@@ -8,7 +9,7 @@ export default {
 	component: DotLeader,
 };
 
-export const Default = () => (
+export const Default: Story = () => (
 	<Box display='flex' flexDirection='row'>
 		Label
 		<DotLeader />

client/components/DotLeader.tsx

@@ -2,8 +2,8 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { FC, CSSProperties } from 'react';
 
 type DotLeaderProps = {
-	color: CSSProperties['borderColor'];
-	dotSize: CSSProperties['borderBlockEndWidth'];
+	color?: CSSProperties['borderColor'];
+	dotSize?: CSSProperties['borderBlockEndWidth'];
 };
 
 const DotLeader: FC<DotLeaderProps> = ({ color = 'neutral-300', dotSize = 'x2' }) => (

client/components/GenericModal.stories.tsx

@@ -0,0 +1,20 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+
+import GenericModal, { GenericModalDoNotAskAgain } from './GenericModal';
+
+export default {
+	title: 'components/GenericModal',
+	component: GenericModal,
+};
+
+const func = (): void => undefined;
+const defaultProps = { onClose: func, onConfirm: func, onCancel: func };
+
+export const _default: Story = () => <GenericModal {...defaultProps} />;
+export const Danger: Story = () => <GenericModal {...defaultProps} variant='danger' />;
+export const Warning: Story = () => <GenericModal {...defaultProps} variant='warning' />;
+export const Success: Story = () => <GenericModal {...defaultProps} variant='success' />;
+export const WithDontAskAgain: Story = () => (
+	<GenericModalDoNotAskAgain dontAskAgain={{ action: '', label: '' }} {...defaultProps} />
+);

client/components/GenericTable.stories.js → client/components/GenericTable.stories.tsx

@@ -1,16 +1,19 @@
 import { TextInput, Box, Icon } from '@rocket.chat/fuselage';
-import React from 'react';
+import { Story } from '@storybook/react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import GenericTable from './GenericTable';
 
 export default {
 	title: 'components/GenericTable',
 	component: GenericTable,
-	decorators: [(fn) => <div children={fn()} style={{ height: '100vh' }} />],
+	decorators: [
+		(fn: () => ReactNode): ReactElement => <div children={fn()} style={{ height: '100vh' }} />,
+	],
 };
 
-export const _default = () => {
-	const Search = () => (
+export const _default: Story = () => {
+	const Search = (): ReactElement => (
 		<Box mb='x16' is='form' display='flex' flexDirection='column'>
 			<TextInput
 				flexShrink={0}
@@ -26,5 +29,5 @@ export const _default = () => {
 		<GenericTable.HeaderCell>Data</GenericTable.HeaderCell>,
 		<GenericTable.HeaderCell>Info</GenericTable.HeaderCell>,
 	];
-	return <GenericTable header={header} renderFilter={(props) => <Search {...props} />} />;
+	return <GenericTable header={header} renderFilter={(): ReactElement => <Search />} />;
 };