Chore: Storybook mocking and examples improved (RocketChat#24969)

* Upgrade Storybook * Replace `ts-loader` with `babel-loader` * Rearrange some stories * Rearrange some stories * Move `NotAuthorizedPage` * Rearrange some stories * Rearrange some stories * Rearrange some stories * Rearrange some stories * Rearrange some stories * Squashed commit of the following: commit f0cda61 Author: Tiago Evangelista Pinto <[email protected]> Date: Fri Mar 25 15:45:59 2022 -0300 fix review commit 4113ffb Author: Tiago Evangelista Pinto <[email protected]> Date: Thu Mar 24 17:34:48 2022 -0300 fix commit 82e14b6 Author: Tiago Evangelista Pinto <[email protected]> Date: Thu Mar 24 17:18:57 2022 -0300 fix * Rearrange some stories * Rearrange some stories * Improve `ServerProviderMock` with parameters * Expand story mocking capabilities * Move mocks * Fix lint issues
miladsoft · Mar 30, 2022 · 2c0061e · 2c0061e
1 parent fc17f0b
commit 2c0061e
Show file tree

Hide file tree

Showing 286 changed files with 8,328 additions and 5,533 deletions.
diff --git a/.storybook/.prettierrc b/.storybook/.prettierrc
diff --git a/.storybook/babel.config.js b/.storybook/babel.config.js
@@ -11,6 +11,7 @@ module.exports = {
 		],
 		'@babel/preset-react',
 		'@babel/preset-flow',
+		'@babel/preset-typescript',
 	],
 	plugins: [
 		'@babel/plugin-proposal-class-properties',

diff --git a/.storybook/decorators.tsx b/.storybook/decorators.tsx
@@ -1,10 +1,13 @@
+import { DecoratorFunction } from '@storybook/addons';
 import React, { ReactElement } from 'react';
 
-import { MeteorProviderMock } from './mocks/providers';
-import QueryClientProviderMock from './mocks/providers/QueryClientProviderMock';
-import ServerProviderMock from './mocks/providers/ServerProviderMock';
+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';
 
-export const rocketChatDecorator = (storyFn: () => ReactElement): ReactElement => {
+export const rocketChatDecorator: DecoratorFunction<ReactElement<unknown>> = (fn, { parameters }) => {
 	const linkElement = document.getElementById('theme-styles') || document.createElement('link');
 	if (linkElement.id !== 'theme-styles') {
 		require('../app/theme/client/main.css');
@@ -22,42 +25,21 @@ export const rocketChatDecorator = (storyFn: () => ReactElement): ReactElement =
 
 	return (
 		<QueryClientProviderMock>
-			<ServerProviderMock>
-				<MeteorProviderMock>
-					<style>{`
-					body {
-						background-color: white;
-					}
-				`}</style>
-					<div dangerouslySetInnerHTML={{ __html: icons }} />
-					<div className='color-primary-font-color'>{storyFn()}</div>
-				</MeteorProviderMock>
-			</ServerProviderMock>
+			<ServerContextMock {...parameters.serverContext}>
+				<TranslationContextMock {...parameters.translationContext}>
+					<ModalContextMock {...parameters.modalContext}>
+						<RouterContextMock {...parameters.routerContext}>
+							<style>{`
+								body {
+									background-color: white;
+								}
+							`}</style>
+							<div dangerouslySetInnerHTML={{ __html: icons }} />
+							<div className='color-primary-font-color'>{fn()}</div>
+						</RouterContextMock>
+					</ModalContextMock>
+				</TranslationContextMock>
+			</ServerContextMock>
 		</QueryClientProviderMock>
 	);
 };
-
-export const fullHeightDecorator = (storyFn: () => ReactElement): ReactElement => (
-	<div
-		style={{
-			display: 'flex',
-			flexDirection: 'column',
-			maxHeight: '100vh',
-		}}
-	>
-		{storyFn()}
-	</div>
-);
-
-export const centeredDecorator = (storyFn: () => ReactElement): ReactElement => (
-	<div
-		style={{
-			display: 'flex',
-			alignItems: 'center',
-			justifyContent: 'center',
-			minHeight: '100vh',
-		}}
-	>
-		{storyFn()}
-	</div>
-);
diff --git a/.storybook/hooks/index.ts b/.storybook/hooks/index.ts
diff --git a/.storybook/hooks/useAutoToggle.ts b/.storybook/hooks/useAutoToggle.ts
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,15 +3,8 @@ const { resolve, relative, join } = require('path');
 const webpack = require('webpack');
 
 module.exports = {
-	stories: [
-		'../app/**/*.stories.{js,tsx}',
-		'../client/**/*.stories.{js,tsx}',
-		...(process.env.EE === 'true' ? ['../ee/**/*.stories.{js,tsx}'] : []),
-	],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-postcss'],
-	typescript: {
-		reactDocgen: 'none',
-	},
+	stories: ['../app/**/*.stories.{js,tsx}', '../client/**/*.stories.{js,tsx}', '../ee/**/*.stories.{js,tsx}'],
+	addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-postcss'],
 	webpackFinal: async (config) => {
 		const cssRule = config.module.rules.find(({ test }) => test.test('index.css'));
 
@@ -48,18 +41,6 @@ module.exports = {
 			use: '@settlin/spacebars-loader',
 		});
 
-		config.module.rules.push({
-			test: /\.(ts|tsx)$/,
-			use: [
-				{
-					loader: 'ts-loader',
-					options: {
-						configFile: join(__dirname, '../tsconfig.webpack.json'),
-					},
-				},
-			],
-		});
-
 		config.plugins.push(
 			new webpack.NormalModuleReplacementPlugin(/^meteor/, require.resolve('./mocks/meteor.js')),
 			new webpack.NormalModuleReplacementPlugin(/(app)\/*.*\/(server)\/*/, require.resolve('./mocks/empty.ts')),

diff --git a/.storybook/mocks/meteor.js b/.storybook/mocks/meteor.js
@@ -74,6 +74,7 @@ export const Template = Object.assign(
 export const Blaze = {
 	Template,
 	registerHelper: () => {},
+	renderWithData: () => {},
 };
 
 window.Blaze = Blaze;

diff --git a/.storybook/mocks/providers/ServerProviderMock.tsx b/.storybook/mocks/providers/ServerProviderMock.tsx
diff --git a/.storybook/mocks/providers/index.tsx b/.storybook/mocks/providers/index.tsx
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -18,6 +18,9 @@ addParameters({
 		page: DocsPage,
 	},
 	options: {
-		storySort: ([, a], [, b]): number => a.kind.localeCompare(b.kind),
+		storySort: {
+			method: 'alphabetical',
+			order: ['Components', '*', 'Enterprise'],
+		},
 	},
 });
diff --git a/client/components/BurgerMenu/BurgerBadge.stories.tsx b/client/components/BurgerMenu/BurgerBadge.stories.tsx
@@ -1,21 +1,26 @@
 import { Box } from '@rocket.chat/fuselage';
-import { Story } from '@storybook/react';
-import React, { ReactNode, ReactElement } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React, { ReactElement } from 'react';
 
-import { centeredDecorator } from '../../../.storybook/decorators';
 import BurgerBadge from './BurgerBadge';
 
 export default {
-	title: 'components/burger/BurgerBadge',
+	title: 'Components/Burger Menu/BurgerBadge',
 	component: BurgerBadge,
+	parameters: {
+		layout: 'centered',
+	},
 	decorators: [
-		(storyFn: () => ReactNode): ReactElement => (
-			<Box size={24} borderWidth='x1' borderStyle='dashed' position='relative'>
-				{storyFn()}
+		(fn): ReactElement => (
+			<Box size={24} backgroundColor='neutral-500' position='relative'>
+				{fn()}
 			</Box>
 		),
-		centeredDecorator,
 	],
-};
+} as ComponentMeta<typeof BurgerBadge>;
 
-export const Basic: Story = () => <BurgerBadge>99</BurgerBadge>;
+export const Default: ComponentStory<typeof BurgerBadge> = (args) => <BurgerBadge {...args} />;
+Default.storyName = 'BurgerBadge';
+Default.args = {
+	children: 99,
+};
diff --git a/client/components/BurgerMenu/BurgerIcon.stories.tsx b/client/components/BurgerMenu/BurgerIcon.stories.tsx
@@ -1,18 +1,32 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { centeredDecorator } from '../../../.storybook/decorators';
-import { useAutoToggle } from '../../../.storybook/hooks';
+import { useAutoSequence } from '../../stories/hooks/useAutoSequence';
 import BurgerIcon from './BurgerIcon';
 
 export default {
-	title: 'components/burger/BurgerIcon',
+	title: 'Components/Burger Menu/BurgerIcon',
 	component: BurgerIcon,
-	decorators: [centeredDecorator],
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+	},
+} as ComponentMeta<typeof BurgerIcon>;
+
+export const Example: ComponentStory<typeof BurgerIcon> = () => {
+	const open = useAutoSequence([false, true]);
+
+	return <BurgerIcon open={open} />;
 };
 
-export const Normal: Story = () => <BurgerIcon />;
+const Template: ComponentStory<typeof BurgerIcon> = (args) => <BurgerIcon {...args} />;
 
-export const Open: Story = () => <BurgerIcon open />;
+export const Closed = Template.bind({});
+Closed.args = {
+	open: false,
+};
 
-export const Transitioning: Story = () => <BurgerIcon open={useAutoToggle()} />;
+export const Open = Template.bind({});
+Open.args = {
+	open: true,
+};