Chore: Enforce TypeScript on Storybook (#22317)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

.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

-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/helpers.js

-export const dummyDate = new Date(2015, 4, 19);

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

 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

+declare const path: string;
+export = path;

.storybook/main.js

-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,16 +50,12 @@ 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/,
@@ -67,7 +63,7 @@ module.exports = {
 			),
 			new webpack.NormalModuleReplacementPlugin(
 				/(app)\/*.*\/(server)\/*/,
-				require.resolve('./mocks/empty.js'),
+				require.resolve('./mocks/empty.ts'),
 			),
 		);
 

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

-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

 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

 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

 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

 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.js → client/components/GenericModal.stories.tsx

+import { Story } from '@storybook/react';
 import React from 'react';
 
 import GenericModal, { GenericModalDoNotAskAgain } from './GenericModal';
@@ -7,13 +8,13 @@ export default {
 	component: GenericModal,
 };
 
-const func = () => null;
+const func = (): void => undefined;
 const defaultProps = { onClose: func, onConfirm: func, onCancel: func };
 
-export const _default = () => <GenericModal {...defaultProps} />;
-export const Danger = () => <GenericModal {...defaultProps} variant='danger' />;
-export const Warning = () => <GenericModal {...defaultProps} variant='warning' />;
-export const Success = () => <GenericModal {...defaultProps} variant='success' />;
-export const WithDontAskAgain = () => (
+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

 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 />} />;
 };

client/components/Logo.js

@@ -16,36 +16,73 @@ function Logo({ src = 'images/logo/logo.svg', ...props }) {
 	return (
 		<>
 			{isPlaceholderVisible && (
-				<Box {...props} is='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 182'>
-					<g fill='none' fillRule='evenodd'>
-						<g fill='#9ea2a8' fillRule='nonzero' transform='translate(245.154709 29.581775)'>
-							<path d='m62.5717573 58.8485839c0 10.1578288-3.791296 16.8288535-11.0711519 20.01071l10.4656798 39.7212001c.4541041 1.822594-.454104 2.727981-2.1238826 2.727981h-15.7753863c-1.5160454 0-2.2728855-.756459-2.5779867-2.122813l-10.1629438-38.5061381h-10.4656799v38.2059181c0 1.517646-.9082081 2.423033-2.4266186 2.423033h-15.77538636c-1.51604538 0-2.42661865-.910115-2.42661865-2.423033v-116.43561996c0-1.51528236.91057327-2.42539734 2.42661865-2.42539734h38.07142346c14.2569758 0 21.8419329 7.58113963 21.8419329 21.83094zm-26.6951702 1.817866c3.942664 0 6.0665466-2.1228136 6.0665466-6.0634933v-28.5019646c0-3.9406797-2.1238826-6.0611294-6.0665466-6.0611294h-15.0161812v40.6289513z' />
-							<path d='m74.6977552 21.8553647c0-14.24980037 7.582592-21.83094 21.841933-21.83094h16.9886958c14.256976 0 21.841933 7.58113963 21.841933 21.83094v77.6221705c0 14.2474368-7.584957 21.8285758-21.841933 21.8285758h-16.9886958c-14.259341 0-21.841933-7.581139-21.841933-21.8285758zm35.0369678 79.8939123c3.942664 0 6.066546-1.9715221 6.066546-6.0634936v-70.0386669c0-3.9406797-2.123882-6.0634934-6.066546-6.0634934h-8.795902c-3.9426636 0-6.0665462 2.1228137-6.0665462 6.0634934v70.0410309c0 4.0896075 2.1238826 6.0611296 6.0665462 6.0611296z' />
-							<path d='m211.352335 38.2279787c0 1.5176462-.910573 2.4253973-2.424253 2.4253973h-15.167549c-1.669779 0-2.426619-.9077511-2.426619-2.4253973v-12.1269867c0-3.9406797-2.121518-6.0611294-6.064182-6.0611294h-7.887693c-4.094032 0-6.066546 2.1204497-6.066546 6.0611294v69.1356438c0 4.0919715 2.121517 6.0587652 6.066546 6.0587652h7.887693c3.942664 0 6.064182-1.9691576 6.064182-6.0587652v-12.1317146c0-1.5176463.75684-2.4253973 2.426619-2.4253973h15.167549c1.520775 0 2.424253.907751 2.424253 2.4253973v16.3749779c0 14.2474369-7.736325 21.8285759-21.839568 21.8285759h-16.988695c-14.256976 0-21.993301-7.581139-21.993301-21.8285759v-77.6245344c0-14.24980037 7.736325-21.83094 21.993301-21.83094h16.988695c14.105608 0 21.839568 7.58113963 21.839568 21.83094z' />
-							<path d='m275.352628 121.308475c-1.823511 0-2.880723-.756459-3.490925-2.271741l-19.107848-45.0282348-5.614808 10.7653601v33.5016877c0 1.971521-1.059576 3.032928-3.03209 3.032928h-14.562077c-1.972515 0-3.034456-1.061407-3.034456-3.032928v-115.21819366c0-1.96915788 1.061941-3.03292864 3.034456-3.03292864h14.562077c1.970149 0 3.03209 1.06140683 3.03209 3.03292864v46.99739226l23.357979-47.75621541c.759205-1.51528235 1.823511-2.27410549 3.490925-2.27410549h15.924389c2.275251 0 3.185824 1.51764629 2.121518 3.638096l-25.782232 52.9095938 27.449645 61.2495565c1.061941 1.971522.151368 3.486804-2.272885 3.486804z' />
-							<path d='m365.293617 17.6121013c0 1.5152823-.607838 2.5766892-2.426619 2.5766892h-37.920055v30.3198306h28.97042c1.520776 0 2.426619.910115 2.426619 2.5766892v15.0086235c0 1.6689381-.910573 2.5790531-2.426619 2.5790531h-28.97042v30.6224141h37.920055c1.823512 0 2.426619.758823 2.426619 2.425398v15.162279c0 1.515282-.607838 2.420669-2.426619 2.420669h-55.816959c-1.367043 0-2.277616-.910115-2.277616-2.420669v-116.43325596c0-1.51528236.910573-2.42539734 2.277616-2.42539734h55.816959c1.823512 0 2.426619.91011498 2.426619 2.42539734z' />
-							<path d='m435.665557.0244247c1.667414 0 2.426619.91011498 2.426619 2.42539734v15.16227926c0 1.5152823-.759205 2.4253973-2.426619 2.4253973h-17.594167v98.8455794c0 1.666574-.75684 2.420669-2.424254 2.420669h-15.775386c-1.520776 0-2.426619-.754095-2.426619-2.420669v-98.8455794h-17.591803c-1.520775 0-2.426618-.910115-2.426618-2.4253973v-15.16227926c0-1.51528236.910573-2.42539734 2.426618-2.42539734z' />
-							<path d='m436.586195 104.356644c0-1.971522 1.061941-3.030564 3.034456-3.030564h13.802872c1.972514 0 3.032091 1.059042 3.032091 3.030564v13.944853c0 1.973886-1.059577 3.032929-3.032091 3.032929h-13.802872c-1.972515 0-3.034456-1.059043-3.034456-3.032929z' />
-							<path d='m532.422837 38.2279787c0 1.5176462-.912938 2.4253973-2.426618 2.4253973h-15.16755c-1.667413 0-2.424253-.9077511-2.424253-2.4253973v-12.1269867c0-3.9406797-2.121518-6.0611294-6.064182-6.0611294h-7.887693c-4.096397 0-6.066546 2.1204497-6.066546 6.0611294v69.1356438c0 4.0919715 2.121517 6.0587652 6.066546 6.0587652h7.887693c3.942664 0 6.064182-1.9691576 6.064182-6.0587652v-12.1317146c0-1.5176463.75684-2.4253973 2.424253-2.4253973h15.16755c1.520775 0 2.426618.907751 2.426618 2.4253973v16.3749779c0 14.2474369-7.736325 21.8285759-21.841933 21.8285759h-16.988695c-14.256976 0-21.993301-7.581139-21.993301-21.8285759v-77.6245344c0-14.24980037 7.736325-21.83094 21.993301-21.83094h16.988695c14.107973 0 21.841933 7.58113963 21.841933 21.83094z' />
-							<path d='m587.627229 2.44982204c0-1.51528236.908208-2.42539734 2.424253-2.42539734h15.621654c1.821146 0 2.575621.91011498 2.575621 2.42539734v116.43325596c0 1.515282-.75684 2.420669-2.575621 2.420669h-15.621654c-1.520775 0-2.424253-.910115-2.424253-2.420669v-48.2100911h-19.415314v48.2124551c0 1.517646-.910574 2.423033-2.426619 2.423033h-15.619288c-1.823512 0-2.580352-.910115-2.580352-2.423033v-116.43561996c0-1.51528236.75684-2.42539734 2.580352-2.42539734h15.619288c1.520776 0 2.426619.91011498 2.426619 2.42539734v48.21009096h19.415314z' />
-							<path d='m677.416849 121.308475c-1.364677 0-2.121517-.756459-2.426618-2.122813l-4.2454-22.1311602h-27.000272l-4.091667 22.1311602c-.305101 1.366354-1.061941 2.122813-2.426619 2.122813h-16.227125c-1.667413 0-2.426618-.910115-1.97488-2.576689l25.179125-116.58454765c.305102-1.51528235 1.21331-2.12281365 2.577987-2.12281365h21.085093c1.364677 0 2.275251.6075313 2.577987 2.12281365l25.179125 116.58454765c.305101 1.666574-.302737 2.576689-2.121518 2.576689zm-20.174519-94.7536075-9.706475 52.9095938h19.415314z' />
-							<path d='m752.339291.0244247c1.667414 0 2.426619.91011498 2.426619 2.42539734v15.16227926c0 1.5152823-.759205 2.4253973-2.426619 2.4253973h-17.591802v98.8455794c0 1.666574-.759206 2.420669-2.426619 2.420669h-15.775386c-1.516046 0-2.424254-.754095-2.424254-2.420669v-98.8455794h-17.591802c-1.518411 0-2.424254-.910115-2.424254-2.4253973v-15.16227926c0-1.51528236.910573-2.42539734 2.424254-2.42539734z' />
-						</g>
-						<path
-							d='m180.330283 70.2108641.003609.0056432c-.000601-.0009405-.001203-.0018809-.001805-.0028213-.000601-.0009406-.001203-.0018813-.001804-.0028219zm-118.376131-62.56650083c6.3387401 3.52053473 12.3304614 7.97478583 17.4474489 12.92560413 8.2483703-1.493946 16.7534113-2.2472853 25.3816541-2.2472853 25.829288 0 50.317728 6.7758093 68.949969 19.0753991 9.648766 6.3726136 17.318087 13.9335933 22.79236 22.4749752 6.096443 9.5175397 9.186759 19.7523434 9.186759 30.7192654 0 10.6719522-3.090316 20.9110002-9.186759 30.4264182-5.474273 8.545626-13.143594 16.104484-22.79236 22.477097-18.632241 12.29959-43.118627 19.071155-68.949969 19.071155-8.6282428 0-17.1312305-.753339-25.3816541-2.245163-5.1190409 4.948696-11.1087088 9.405069-17.4474489 12.925604-33.868215 16.961805-61.954152.398952-61.954152.398952s26.1126525-22.169396 21.8662921-41.603427c-11.6836513-11.974911-18.01417792-26.417804-18.01417792-41.7413615 0-15.0349541 6.33258002-29.4778472 18.01417792-41.4548805 4.2456572-19.4286913-21.85764516-41.59396243-21.86628995-41.60130241.00835221-.00492837 28.09097195-16.5624544 61.95414985.39894968z'
-							fill='#db2323'
-							fillRule='nonzero'
-						/>
-						<path
-							d='m41.6969487 124.026456c-11.6079642-9.147807-18.5755614-20.853906-18.5755614-33.6127751 0-29.2774081 36.6879889-53.0114368 81.9449167-53.0114368 45.256928 0 81.944917 23.7340287 81.944917 53.0114368s-36.687989 53.0114371-81.944917 53.0114371c-11.153988 0-21.7874802-1.441656-31.4795213-4.052646l-7.0858271 6.833734c-3.8501553 3.713177-8.3628437 7.073426-13.0666687 9.72133-6.2348704 3.061887-12.3916858 4.732411-18.4830125 5.242134.3436223-.624722.6600359-1.257578.9997137-1.883283 7.099975-13.078552 9.0152952-24.831862 5.7459606-35.259931z'
-							fill='#fff'
-						/>
-						<path
-							d='m65.7703624 103.026182c-6.6534511 0-12.047139-5.4803639-12.047139-12.2407349 0-6.7603709 5.3936879-12.2407344 12.047139-12.2407344 6.6534512 0 12.047139 5.4803635 12.047139 12.2407344 0 6.760371-5.3936878 12.2407349-12.047139 12.2407349zm38.7859106 0c-6.6534508 0-12.0471386-5.4803639-12.0471386-12.2407349 0-6.7603709 5.3936878-12.2407344 12.0471386-12.2407344 6.653452 0 12.047139 5.4803635 12.047139 12.2407344 0 6.760371-5.393687 12.2407349-12.047139 12.2407349zm38.785911 0c-6.653451 0-12.047139-5.4803639-12.047139-12.2407349 0-6.7603709 5.393688-12.2407344 12.047139-12.2407344 6.653452 0 12.047139 5.4803635 12.047139 12.2407344 0 6.760371-5.393687 12.2407349-12.047139 12.2407349z'
-							fill='#db2323'
-							fillRule='nonzero'
-						/>
-					</g>
+				<Box
+					{...props}
+					is='svg'
+					viewBox='0 0 768 221'
+					fill='none'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<path
+						d='M687.178 68.3765H699.452V85.2808H710.808V96.4023H699.452V126.607H710.193V137.528C708.453 137.935 706.305 138.141 703.849 138.141C692.7 138.141 687.174 132.326 687.174 120.692V68.3765H687.178Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M663.995 92.7303V85.2809H676.268V136.708H663.995V129.259C662.255 134.259 656.017 137.83 647.526 137.83C640.265 137.83 634.123 135.28 629.111 130.179C624.2 124.973 621.744 118.65 621.744 110.994C621.744 103.339 624.2 97.0159 629.111 91.9107C634.123 86.7048 640.26 84.1545 647.526 84.1545C656.013 84.1591 662.255 87.7305 663.995 92.7303ZM660.309 122.221C663.38 119.263 664.913 115.486 664.913 110.999C664.913 106.512 663.38 102.735 660.309 99.7722C657.344 96.8145 653.557 95.2806 649.16 95.2806C644.763 95.2806 641.183 96.8099 638.213 99.7722C635.349 102.73 633.917 106.507 633.917 110.999C633.917 115.491 635.349 119.263 638.213 122.221C641.178 125.179 644.758 126.713 649.16 126.713C653.562 126.713 657.344 125.179 660.309 122.221Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M209.724 136.708V85.2808H221.896V92.9317C224.352 87.5243 229.979 84.2598 237.24 84.2598C238.672 84.2598 239.903 84.3605 240.922 84.5665V96.4023C239.388 96.0955 237.649 95.8941 235.808 95.8941C227.317 95.8941 221.896 101.201 221.896 109.671V136.713H209.724V136.708Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M243.992 110.995C243.992 103.339 246.755 96.8099 252.176 91.604C257.597 86.3981 264.248 83.7471 272.124 83.7471C280 83.7471 286.651 86.3981 292.072 91.604C297.493 96.8099 300.256 103.339 300.256 110.995C300.256 118.645 297.493 125.179 292.072 130.38C286.651 135.586 280 138.237 272.124 138.237C264.248 138.237 257.597 135.586 252.176 130.38C246.755 125.179 243.992 118.645 243.992 110.995ZM283.479 122.524C286.55 119.36 288.083 115.582 288.083 110.995C288.083 106.402 286.55 102.625 283.479 99.5662C280.409 96.4024 276.627 94.8731 272.124 94.8731C267.52 94.8731 263.738 96.4024 260.667 99.5662C257.702 102.629 256.165 106.402 256.165 110.995C256.165 115.587 257.698 119.36 260.667 122.524C263.738 125.587 267.52 127.116 272.124 127.116C276.627 127.116 280.409 125.587 283.479 122.524Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M351.3 88.852V101.095C346.903 96.9104 341.583 94.7676 335.446 94.7676C330.641 94.7676 326.647 96.2969 323.48 99.36C320.309 102.423 318.776 106.301 318.776 110.889C318.776 115.481 320.309 119.359 323.48 122.418C326.652 125.481 330.641 127.01 335.446 127.01C341.689 127.01 347.004 124.868 351.3 120.683V132.926C347.004 136.397 341.482 138.132 334.73 138.132C326.753 138.132 320.102 135.582 314.682 130.376C309.261 125.17 306.599 118.741 306.599 110.884C306.599 103.027 309.256 96.5991 314.682 91.3932C320.102 86.1873 326.753 83.637 334.73 83.637C341.377 83.6461 346.903 85.3814 351.3 88.852Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M360.407 136.708V68.3765H372.58V107.217L389.971 85.2762H403.883L384.344 109.868L405.517 136.703H391.197L372.58 112.927V136.703H360.407V136.708Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M405.824 110.994C405.824 102.931 408.28 96.4023 413.292 91.5031C418.304 86.5033 424.749 84.0537 432.524 84.0537C439.992 84.0537 446.028 86.5033 450.631 91.5031C455.336 96.4023 457.691 102.524 457.691 109.767C457.691 111.297 457.59 112.83 457.484 114.154H417.997C418.405 122.317 424.441 127.523 433.548 127.523C441.63 127.523 447.767 125.586 452.063 121.603V133.031C447.051 136.502 440.708 138.237 433.038 138.237C424.955 138.237 418.309 135.788 413.297 130.994C408.284 126.095 405.829 119.566 405.829 111.503V110.994H405.824ZM445.206 105.486C445.206 102.528 443.98 99.8729 441.525 97.7301C439.069 95.5873 436.104 94.4655 432.524 94.4655C428.737 94.4655 425.465 95.5873 422.706 97.7301C419.943 99.8729 418.511 102.423 418.309 105.486H445.206Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M466.944 68.3765H479.218V85.2808H490.573V96.4023H479.218V126.607H489.958V137.528C488.218 137.935 486.07 138.141 483.615 138.141C472.466 138.141 466.939 132.326 466.939 120.692V68.3765H466.944Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M502.713 123.215C498.642 123.215 495.342 126.493 495.342 130.536C495.342 134.579 498.642 137.857 502.713 137.857C506.785 137.857 510.085 134.579 510.085 130.536C510.085 126.493 506.785 123.215 502.713 123.215Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M558.22 88.852V101.095C553.823 96.9104 548.503 94.7676 542.366 94.7676C537.561 94.7676 533.567 96.2969 530.4 99.36C527.229 102.423 525.696 106.301 525.696 110.889C525.696 115.481 527.229 119.359 530.4 122.418C533.572 125.481 537.561 127.01 542.366 127.01C548.604 127.01 553.924 124.868 558.22 120.683V132.926C553.924 136.397 548.402 138.132 541.65 138.132C533.673 138.132 527.022 135.582 521.601 130.376C516.181 125.17 513.519 118.741 513.519 110.884C513.519 103.027 516.176 96.5991 521.601 91.3932C527.022 86.1873 533.673 83.637 541.65 83.637C548.297 83.6461 553.823 85.3814 558.22 88.852Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M567.326 136.708V68.3765H579.499V92.4234C581.853 87.5243 587.476 84.2597 594.535 84.2597C606.4 84.2597 613.359 92.1167 613.359 104.873V136.708H601.186V106.603C601.186 99.5615 597.399 95.1752 590.854 95.1752C584.203 95.1752 579.499 100.074 579.499 107.112V136.703H567.326V136.708Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M174.643 91.8055C171.307 86.6179 166.629 82.0255 160.75 78.152C149.39 70.6796 134.463 66.5635 118.72 66.5635C113.46 66.5635 108.277 67.0213 103.247 67.9279C100.126 64.9197 96.4767 62.2138 92.612 60.0755C78.273 52.9191 65.6323 55.5885 59.2477 57.8824C57.1501 58.6378 56.5029 61.298 58.0543 62.896C62.557 67.5479 70.0065 76.7418 68.1751 85.1023C61.0515 92.3824 57.1914 101.155 57.1914 110.289C57.1914 119.598 61.0515 128.37 68.1705 135.646C70.0019 144.006 62.5525 153.205 58.0497 157.857C56.5029 159.455 57.1455 162.11 59.2431 162.866C65.6277 165.164 78.2638 167.834 92.6074 160.677C96.4721 158.539 100.121 155.833 103.242 152.825C108.273 153.731 113.455 154.189 118.715 154.189C134.463 154.189 149.39 150.078 160.745 142.605C166.625 138.732 171.302 134.144 174.639 128.952C178.357 123.174 180.239 116.951 180.239 110.468C180.243 103.801 178.357 97.5883 174.643 91.8055ZM118.077 143.397C111.27 143.397 104.78 142.518 98.8635 140.93L94.5398 145.092C92.1897 147.353 89.4358 149.4 86.5625 151.012C82.7574 152.875 78.9982 153.896 75.2804 154.203C75.4915 153.823 75.6843 153.438 75.8908 153.054C80.2237 145.087 81.3942 137.926 79.3975 131.575C72.3107 126.003 68.0604 118.87 68.0604 111.1C68.0604 93.266 90.4547 78.8067 118.077 78.8067C145.699 78.8067 168.098 93.266 168.098 111.1C168.094 128.943 145.699 143.397 118.077 143.397Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M94.1449 103.678C90.0736 103.678 86.7734 106.956 86.7734 110.999C86.7734 115.042 90.0736 118.32 94.1449 118.32C98.2162 118.32 101.516 115.042 101.516 110.999C101.516 106.956 98.2162 103.678 94.1449 103.678Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M117.875 103.678C113.804 103.678 110.504 106.956 110.504 110.999C110.504 115.042 113.804 118.32 117.875 118.32C121.947 118.32 125.247 115.042 125.247 110.999C125.247 106.956 121.947 103.678 117.875 103.678Z'
+						fill='#F5455C'
+					/>
+					<path
+						d='M141.605 103.678C137.534 103.678 134.233 106.956 134.233 110.999C134.233 115.042 137.534 118.32 141.605 118.32C145.676 118.32 148.976 115.042 148.976 110.999C148.976 106.956 145.672 103.678 141.605 103.678Z'
+						fill='#F5455C'
+					/>
 				</Box>
 			)}
 			{src && (

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

+import { Story } from '@storybook/react';
 import React from 'react';
 
 import Logo from './Logo';
@@ -7,4 +8,4 @@ export default {
 	component: Logo,
 };
 
-export const AsPlaceholder = () => <Logo />;
+export const AsPlaceholder: Story = () => <Logo />;

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

+import { Story } from '@storybook/react';
 import React from 'react';
 
 import MarkdownText from './MarkdownText';
@@ -7,7 +8,7 @@ export default {
 	component: MarkdownText,
 };
 
-export const Example = () => (
+export const Example: Story = () => (
 	<MarkdownText
 		content={`
 # h1 Heading