Chore: Broken Storybook

apps/meteor/.storybook/main.js

@@ -3,8 +3,24 @@ const { resolve, relative, join } = require('path');
 const webpack = require('webpack');
 
 module.exports = {
-	stories: ['../app/**/*.stories.{js,tsx}', '../client/**/*.stories.{js,tsx}', '../ee/**/*.stories.{js,tsx}'],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-postcss'],
+	stories: [
+		'../client/**/*.stories.{js,tsx}',
+		'../app/**/*.stories.{js,tsx}',
+		'../ee/app/**/*.stories.{js,tsx}',
+		'../ee/client/**/*.stories.{js,tsx}',
+	],
+	addons: [
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		{
+			name: '@storybook/addon-postcss',
+			options: {
+				postcssLoaderOptions: {
+					implementation: require('postcss'),
+				},
+			},
+		},
+	],
 	webpackFinal: async (config) => {
 		const cssRule = config.module.rules.find(({ test }) => test.test('index.css'));
 

apps/meteor/client/definitions/css.d.ts

@@ -0,0 +1,3 @@
+declare module '*.css' {
+	export = undefined;
+}

apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx

@@ -1,4 +1,5 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import type { Editor, EditorFromTextArea } from 'codemirror';
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 
 const defaultGutters = ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'];
@@ -44,7 +45,7 @@ function CodeMirror({
 	const [value, setValue] = useState(valueProp || defaultValue);
 
 	const textAreaRef = useRef<HTMLTextAreaElement>(null);
-	const editorRef = useRef<HTMLFormElement | null>(null);
+	const editorRef = useRef<EditorFromTextArea | null>(null);
 	const handleChange = useMutableCallback(onChange);
 
 	useEffect(() => {
@@ -53,11 +54,16 @@ function CodeMirror({
 		}
 
 		const setupCodeMirror = async (): Promise<void> => {
-			const jsPath = 'codemirror/lib/codemirror.js';
-			const CodeMirror = await import(jsPath);
-			await import('../../../../../app/ui/client/lib/codeMirror/codeMirror');
-			const cssPath = 'codemirror/lib/codemirror.css';
-			await import(cssPath);
+			const CodeMirror = await import('codemirror');
+			await Promise.all([
+				import('../../../../../app/ui/client/lib/codeMirror/codeMirror'),
+				import('codemirror/addon/edit/matchbrackets'),
+				import('codemirror/addon/edit/closebrackets'),
+				import('codemirror/addon/edit/matchtags'),
+				import('codemirror/addon/edit/trailingspace'),
+				import('codemirror/addon/search/match-highlighter'),
+				import('codemirror/lib/codemirror.css'),
+			]);
 
 			if (!textAreaRef.current) {
 				return;
@@ -77,7 +83,7 @@ function CodeMirror({
 				readOnly,
 			});
 
-			editorRef?.current?.on('change', (doc: HTMLFormElement) => {
+			editorRef.current.on('change', (doc: Editor) => {
 				const value = doc.getValue();
 				setValue(value);
 				handleChange(value);
@@ -119,7 +125,7 @@ function CodeMirror({
 		}
 
 		if (value !== editorRef.current.getValue()) {
-			editorRef.current.setValue(value);
+			editorRef.current.setValue(value ?? '');
 		}
 	}, [textAreaRef, value]);
 

apps/meteor/package.json

@@ -71,11 +71,11 @@
 		"@rocket.chat/eslint-config": "workspace:^",
 		"@rocket.chat/livechat": "workspace:^",
 		"@settlin/spacebars-loader": "^1.0.9",
-		"@storybook/addon-essentials": "~6.4.22",
-		"@storybook/addon-interactions": "~6.4.22",
+		"@storybook/addon-essentials": "~6.5.8",
+		"@storybook/addon-interactions": "~6.5.8",
 		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/addons": "~6.4.22",
-		"@storybook/react": "~6.4.22",
+		"@storybook/addons": "~6.5.8",
+		"@storybook/react": "~6.5.8",
 		"@storybook/testing-library": "0.0.11",
 		"@testing-library/react": "~12.1.5",
 		"@testing-library/user-event": "^13.5.0",
@@ -89,6 +89,7 @@
 		"@types/chai-dom": "0.0.12",
 		"@types/chai-spies": "^1.0.3",
 		"@types/clipboard": "^2.0.7",
+		"@types/codemirror": "^5",
 		"@types/cookie-parser": "^1.4.2",
 		"@types/dompurify": "^2.2.2",
 		"@types/ejson": "^2.2.0",
@@ -318,6 +319,7 @@
 		"prometheus-gc-stats": "^0.6.3",
 		"proxy-from-env": "^1.1.0",
 		"psl": "^1.8.0",
+		"query-string": "^7.1.1",
 		"queue-fifo": "^0.2.6",
 		"rc-scrollbars": "^1.1.3",
 		"react": "~17.0.2",

packages/livechat/.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
 			}
 		},
 		'@storybook/addon-knobs',
+		'@storybook/addon-postcss'
   ],
   stories: [
 		'../src/**/stories.js',

packages/livechat/.storybook/preview.js

@@ -1,5 +1,4 @@
 import { addDecorator, addParameters } from '@storybook/react';
-import 'loki/configure-react';
 import 'emoji-mart/css/emoji-mart.css';
 import '../src/styles/index.scss';
 

packages/livechat/.storybook/webpack.config.js

@@ -1,8 +1,10 @@
 module.exports = ({ config }) => {
 	config.resolve.alias = {
 		...config.resolve.alias,
-		react: require.resolve('preact/compat'),
-		'react-dom': require.resolve('preact/compat'),
+		"react": "preact/compat",
+		"react-dom/test-utils": "preact/test-utils",
+		"react-dom": "preact/compat",
+		"react/jsx-runtime": "preact/jsx-runtime",
 		[require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit'),
 	};
 

packages/livechat/package.json

@@ -8,7 +8,8 @@
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/RocketChat/Rocket.Chat.Livechat"
+		"url": "https://github.com/RocketChat/Rocket.Chat",
+		"directory": "packages/livechat"
 	},
 	"scripts": {
 		"clean": "rimraf dist",
@@ -18,25 +19,20 @@
 		"eslint": "eslint src",
 		"stylelint": "stylelint 'src/**/*.scss'",
 		"storybook": "start-storybook -p 9001 -c .storybook",
-		"loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-		"loki:test-ci": "loki test --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-		"loki:update": "loki update --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-		"build-storybook": "build-storybook",
-		"build-storybook:loki": "cross-env NODE_ENV=loki build-storybook",
-		"update-storybook": "cross-env NODE_ENV=loki run-s build-storybook loki:update"
+		"build-storybook": "build-storybook"
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.11.5",
 		"@rocket.chat/eslint-config": "^0.4.0",
-		"@storybook/addon-actions": "^6.0.12",
-		"@storybook/addon-backgrounds": "^6.0.12",
-		"@storybook/addon-essentials": "^6.0.16",
-		"@storybook/addon-knobs": "^6.0.12",
-		"@storybook/addon-viewport": "^6.0.12",
-		"@storybook/react": "^6.0.12",
-		"@storybook/storybook-deployer": "^2.8.6",
-		"@storybook/theming": "^6.0.12",
-		"@types/react-dom": "^18",
+		"@storybook/addon-actions": "^6.5.8",
+		"@storybook/addon-backgrounds": "^6.5.8",
+		"@storybook/addon-essentials": "^6.5.8",
+		"@storybook/addon-knobs": "^6.4.0",
+		"@storybook/addon-postcss": "^2.0.0",
+		"@storybook/addon-viewport": "^6.5.8",
+		"@storybook/react": "^6.5.8",
+		"@storybook/theming": "^6.5.8",
+		"@types/react-dom": "^17",
 		"autoprefixer": "^9.8.6",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
@@ -55,7 +51,6 @@
 		"husky": "^4.2.5",
 		"if-env": "^1.0.4",
 		"image-webpack-loader": "^6.0.0",
-		"loki": "^0.24.0",
 		"lorem-ipsum": "^2.0.3",
 		"mini-css-extract-plugin": "^0.11.0",
 		"npm-run-all": "^4.1.5",
@@ -66,7 +61,7 @@
 		"postcss-loader": "^3.0.0",
 		"postcss-logical": "^4.0.2",
 		"postcss-selector-not": "^4.0.0",
-		"react-dom": "^18.1.0",
+		"react-dom": "~17",
 		"rimraf": "^3.0.2",
 		"sass": "^1.49.10",
 		"sass-loader": "^9.0.2",
@@ -113,14 +108,5 @@
 		"updateFiles": [
 			"package.json"
 		]
-	},
-	"loki": {
-		"configurations": {
-			"chrome": {
-				"target": "chrome.docker",
-				"width": 365,
-				"height": 500
-			}
-		}
 	}
 }

packages/livechat/src/components/Footer/index.js

@@ -5,7 +5,6 @@ import { PopoverMenu } from '../Menu';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
-
 export const Footer = ({ children, className, ...props }) => (
 	<footer className={createClassName(styles, 'footer', {}, [className])} {...props}>
 		{children}

packages/livechat/src/components/Messages/AudioAttachment/stories.js

@@ -13,4 +13,4 @@ storiesOf('Messages/AudioAttachment', module)
 		<AudioAttachment
 			url={text('url', sampleAudio)}
 		/>
-	), { loki: { skip: true } });
+	));

packages/livechat/src/components/Messages/Message/stories.js

@@ -239,9 +239,6 @@ WithAudioAttachment.args = {
 		audio_url: sampleAudio,
 	}],
 };
-WithAudioAttachment.parameters = {
-	loki: { skip: true },
-};
 
 export const WithVideoAttachment = (args) => (
 	<Message
@@ -263,9 +260,6 @@ WithVideoAttachment.args = {
 		video_url: sampleVideo,
 	}],
 };
-WithVideoAttachment.parameters = {
-	loki: { skip: true },
-};
 
 export const WithImageAttachment = (args) => (
 	<Message
@@ -343,9 +337,6 @@ WithMultipleAttachments.args = {
 		},
 	],
 };
-WithMultipleAttachments.parameters = {
-	loki: { skip: true },
-};
 
 export const WithUiKitBlocks = (args) => (
 	<Message

packages/livechat/src/components/Messages/VideoAttachment/stories.js

@@ -13,4 +13,4 @@ storiesOf('Messages/VideoAttachment', module)
 		<VideoAttachment
 			url={text('url', sampleVideo)}
 		/>
-	), { loki: { skip: true } });
+	));

packages/livechat/src/components/Sound/stories.js

@@ -18,12 +18,12 @@ storiesOf('Components/Sound', module)
 			onStart={action('start')}
 			onStop={action('stop')}
 		/>
-	), { loki: { skip: true } })
+	))
 	.add('long', () => (
 		<Sound
 			src={text('src', sampleAudio)}
 			play={boolean('play', false)}
 			onStart={action('start')}
 			onStop={action('stop')}
 		/>
-	), { loki: { skip: true } });
+	));

packages/livechat/src/components/uiKit/message/actions.stories.js

@@ -110,7 +110,6 @@ export const FilteredConversationsSelect = () =>
 		},
 	]);
 FilteredConversationsSelect.storyName = 'filtered conversations select';
-FilteredConversationsSelect.parameters = { loki: { skip: true } };
 
 export const SelectsWithInitialOptions = () =>
 	renderMessageBlocks([
@@ -148,7 +147,6 @@ export const SelectsWithInitialOptions = () =>
 		},
 	]);
 SelectsWithInitialOptions.storyName = 'selects with initial options';
-SelectsWithInitialOptions.parameters = { loki: { skip: true } };
 
 export const Button = () =>
 	renderMessageBlocks([

packages/livechat/tsconfig.json

@@ -6,7 +6,6 @@
 		"outDir": "./dist",
 		"allowJs": true,
 		"checkJs": false,
-
 		"noImplicitAny": true,
 	},
 	"exclude": [

packages/livechat/webpack.config.js

@@ -12,7 +12,7 @@ module.exports = (env, argv) => [
 		resolve: {
 			extensions: ['.js', '.jsx', '.ts', '.tsx'],
 			alias: {
-				'react': 'preact/compat',
+				react: 'preact/compat',
 				'react-dom': 'preact/compat',
 			},
 		},
@@ -189,7 +189,7 @@ module.exports = (env, argv) => [
 		resolve: {
 			extensions: ['.js', '.jsx', '.ts', '.tsx'],
 			alias: {
-				'react': 'preact/compat',
+				react: 'preact/compat',
 				'react-dom': 'preact/compat',
 			},
 		},