[NEW] New set of rules for client code

.eslintignore

@@ -18,3 +18,5 @@ imports/client/
 !/.storybook/
 ee/server/services/dist/**
 !/.mocharc.js
+!/client/.eslintrc.js
+!/ee/client/.eslintrc.js

.storybook/main.js

@@ -1,3 +1,7 @@
+const path = require('path');
+
+const webpack = require('webpack');
+
 module.exports = {
 	stories: [
 		'../app/**/*.stories.js',
@@ -6,5 +10,70 @@ module.exports = {
 	],
 	addons: [
 		'@storybook/addon-essentials',
+		'@storybook/addon-postcss',
 	],
+	webpackFinal: async (config) => {
+		const cssRule = config.module.rules.find(({ test }) => test.test('index.css'));
+
+		cssRule.use[2].options = {
+			...cssRule.use[2].options,
+			postcssOptions: {
+				plugins: [
+					require('postcss-custom-properties')({ preserve: true }),
+					require('postcss-media-minmax')(),
+					require('postcss-selector-not')(),
+					require('postcss-nested')(),
+					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);
+						return newPath;
+					} }),
+				],
+			},
+		};
+
+		config.module.rules.push({
+			test: /\.info$/,
+			type: 'json',
+		});
+
+		config.module.rules.push({
+			test: /\.html$/,
+			use: '@settlin/spacebars-loader',
+		});
+
+		config.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			use: [
+				{
+					loader: 'ts-loader',
+					options: {
+						compilerOptions: {
+							noEmit: false,
+						},
+					},
+				},
+			],
+		});
+
+		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'),
+			),
+		);
+
+		config.mode = 'development';
+		config.optimization.usedExports = true;
+
+		return config;
+	},
 };

app/authorization/client/index.js

@@ -1,7 +1,6 @@
 import { hasAllPermission, hasAtLeastOnePermission, hasPermission, userHasAllPermission } from './hasPermission';
 import { hasRole } from './hasRole';
 import { AuthorizationUtils } from '../lib/AuthorizationUtils';
-import './usersNameChanged';
 import './requiresPermission.html';
 import './startup';
 

app/channel-settings/client/index.js

@@ -1,5 +1,3 @@
-import './startup/messageTypes';
-import './startup/tabBar';
-import './views/Multiselect';
+import './tabBar';
 
 export { ChannelSettings } from './lib/ChannelSettings';

app/channel-settings/client/startup/tabBar.ts → app/channel-settings/client/tabBar.ts

@@ -1,6 +1,6 @@
 import { FC, lazy, LazyExoticComponent } from 'react';
 
-import { addAction } from '../../../../client/views/room/lib/Toolbox';
+import { addAction } from '../../../client/views/room/lib/Toolbox';
 
 addAction('channel-settings', {
 	groups: ['channel', 'group'],
@@ -9,6 +9,6 @@ addAction('channel-settings', {
 	full: true,
 	title: 'Room_Info',
 	icon: 'info-circled',
-	template: lazy(() => import('../../../../client/views/room/contextualBar/Info')) as LazyExoticComponent<FC>,
+	template: lazy(() => import('../../../client/views/room/contextualBar/Info')) as LazyExoticComponent<FC>,
 	order: 7,
 });

app/chatpal-search/client/route.js

@@ -1,5 +1,4 @@
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
-
+import * as BlazeLayout from '../../../client/lib/portals/blazeLayout';
 import { registerAdminRoute } from '../../../client/views/admin';
 import { t } from '../../utils';
 

app/livechat/client/tabBar.ts

@@ -7,7 +7,7 @@ addAction('room-info', {
 	id: 'room-info',
 	title: 'Room_Info',
 	icon: 'info-circled',
-	template: lazy(() => import('../../../client/omnichannel/chats/contextualBar')),
+	template: lazy(() => import('../../../client/views/omnichannel/directory/chats/contextualBar/ChatsContextualBar')),
 	order: 0,
 });
 

app/livestream/client/tabBar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { Option, Badge } from '@rocket.chat/fuselage';
 
 import { useSetting } from '../../../client/contexts/SettingsContext';
@@ -19,10 +19,10 @@ addAction('livestream', ({ room }) => {
 		icon: 'podcast',
 		template: 'liveStreamTab',
 		order: isLive ? -1 : 15,
-		renderAction: (props): React.ReactNode => <Header.ToolBoxAction {...props}>
+		renderAction: (props): ReactNode => <Header.ToolBoxAction {...props}>
 			{isLive ? <Header.Badge title={t('Livestream_live_now')} variant='danger'>!</Header.Badge> : null}
 		</Header.ToolBoxAction>,
-		renderOption: ({ label: { title, icon }, ...props }: any): React.ReactNode => <Option label={title} title={title} icon={icon} {...props}>
+		renderOption: ({ label: { title, icon }, ...props }: any): ReactNode => <Option label={title} title={title} icon={icon} {...props}>
 			{isLive ? <Badge title={t('Livestream_live_now')} variant='danger'>!</Badge> : null }
 		</Option>,
 	} : null), [enabled, isLive, t]);

app/mail-messages/client/router.js

@@ -1,6 +1,7 @@
 import { Meteor } from 'meteor/meteor';
 import { FlowRouter } from 'meteor/kadira:flow-router';
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
+
+import * as BlazeLayout from '../../../client/lib/portals/blazeLayout';
 
 FlowRouter.route('/mailer/unsubscribe/:_id/:createdAt', {
 	name: 'mailer-unsubscribe',

app/message-snippet/client/router.js

@@ -1,5 +1,6 @@
 import { FlowRouter } from 'meteor/kadira:flow-router';
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
+
+import * as BlazeLayout from '../../../client/lib/portals/blazeLayout';
 
 FlowRouter.route('/snippet/:snippetId/:snippetName', {
 	name: 'snippetView',

app/oauth2-server-config/client/oauth/oauth2-client.js

@@ -1,10 +1,10 @@
 import { Meteor } from 'meteor/meteor';
 import { FlowRouter } from 'meteor/kadira:flow-router';
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 import { Template } from 'meteor/templating';
 import { Accounts } from 'meteor/accounts-base';
 import { ReactiveVar } from 'meteor/reactive-var';
 
+import * as BlazeLayout from '../../../../client/lib/portals/blazeLayout';
 import { APIClient } from '../../../utils/client';
 
 FlowRouter.route('/oauth/authorize', {

app/otr/client/rocketchat.otr.room.js

@@ -3,7 +3,6 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Random } from 'meteor/random';
 import { EJSON } from 'meteor/ejson';
 import { Tracker } from 'meteor/tracker';
-import { FlowRouter } from 'meteor/kadira:flow-router';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
 import { TimeSync } from 'meteor/mizzao:timesync';
 import _ from 'underscore';
@@ -14,6 +13,7 @@ import { Notifications } from '../../notifications';
 import { modal } from '../../ui-utils';
 import { getUidDirectMessage } from '../../ui-utils/client/lib/getUidDirectMessage';
 import { Presence } from '../../../client/lib/presence';
+import { goToRoomById } from '../../../client/lib/goToRoomById';
 
 OTR.Room = class {
 	constructor(userId, roomId) {
@@ -189,7 +189,7 @@ OTR.Room = class {
 					this.generateKeyPair().then(() => {
 						this.importPublicKey(data.publicKey).then(() => {
 							this.firstPeer = false;
-							FlowRouter.goToRoomById(data.roomId);
+							goToRoomById(data.roomId);
 							Meteor.defer(() => {
 								this.established.set(true);
 								this.acknowledge();

app/search/client/provider/result.js

@@ -11,6 +11,7 @@ import { MessageAction, RoomHistoryManager } from '../../../ui-utils';
 import { messageArgs } from '../../../ui-utils/client/lib/messageArgs';
 import { Rooms } from '../../../models/client';
 import { getCommonRoomEvents } from '../../../ui/client/views/app/lib/getCommonRoomEvents';
+import { goToRoomById } from '../../../../client/lib/goToRoomById';
 
 Meteor.startup(function() {
 	MessageAction.addButton({
@@ -35,7 +36,7 @@ Meteor.startup(function() {
 				return RoomHistoryManager.getSurroundingMessages(message, 50);
 			}
 
-			FlowRouter.goToRoomById(message.rid);
+			goToRoomById(message.rid);
 			// RocketChat.MessageAction.hideDropDown();
 
 			if (window.matchMedia('(max-width: 500px)').matches) {