[IMPROVE] Administration UI - React and Fuselage components

.storybook/.babelrc

@@ -5,9 +5,14 @@
       {
         "shippedProposals": true,
         "useBuiltIns": "usage",
-        "corejs": "3"
+        "corejs": "3",
+        "modules": "commonjs",
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
   ]
-}
+}

.storybook/addons.js

@@ -1,2 +1,4 @@
 import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -1,3 +1,49 @@
-import { configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs }from '@storybook/addon-knobs';
+import { MINIMAL_VIEWPORTS, INITIAL_VIEWPORTS } from '@storybook/addon-viewport/dist/defaults';
+import { addDecorator, addParameters, configure } from '@storybook/react';
+import React from 'react';
+
+import { ConnectionStatusProvider } from '../client/components/providers/ConnectionStatusProvider.mock';
+import { TranslationProvider } from '../client/components/providers/TranslationProvider.mock';
+
+addParameters({
+	viewport: {
+		viewports: {
+			...MINIMAL_VIEWPORTS,
+			...INITIAL_VIEWPORTS,
+		},
+		defaultViewport: 'responsive',
+	},
+})
+
+addDecorator(function RocketChatDecorator(fn) {
+	const linkElement = document.getElementById('theme-styles') || document.createElement('link');
+	if (linkElement.id !== 'theme-styles') {
+		require('../app/theme/client/main.css');
+		require('../app/theme/client/vendor/fontello/css/fontello.css');
+		require('../client/RocketChat.font.css');
+		linkElement.setAttribute('id', 'theme-styles');
+		linkElement.setAttribute('rel', 'stylesheet');
+		linkElement.setAttribute('href', 'https://open.rocket.chat/theme.css');
+		document.head.appendChild(linkElement);
+	}
+
+	return <ConnectionStatusProvider connected status='connected' reconnect={action('reconnect')}>
+		<TranslationProvider>
+			<style>{`
+				body {
+					background-color: white;
+				}
+			`}</style>
+			<div dangerouslySetInnerHTML={{ __html: require('!!raw-loader!../private/public/icons.svg').default }} />
+			<div className='global-font-family color-primary-font-color'>
+				{fn()}
+			</div>
+		</TranslationProvider>
+	</ConnectionStatusProvider>;
+});
+
+addDecorator(withKnobs);
 
 configure(require.context('../client', true, /\.stories\.js$/), module);

.storybook/empty.js

@@ -0,0 +1 @@
+export default {};

.storybook/helpers.js

@@ -1,44 +1 @@
-import { action } from '@storybook/addon-actions';
-import '@rocket.chat/icons/dist/font/RocketChat.minimal.css';
-import React from 'react';
-
-import '../app/theme/client/main.css';
-import { ConnectionStatusProvider } from '../client/components/providers/ConnectionStatusProvider.mock';
-import { TranslationProvider } from '../client/components/providers/TranslationProvider.mock';
-
-export const rocketChatWrapper = (fn) =>
-	<ConnectionStatusProvider connected status='connected' reconnect={action('reconnect')}>
-		<TranslationProvider>
-			<style>{`
-				body {
-					background-color: white;
-				}
-
-				.global-font-family {
-					font-family:
-						-apple-system,
-						BlinkMacSystemFont,
-						'Segoe UI',
-						Roboto,
-						Oxygen,
-						Ubuntu,
-						Cantarell,
-						'Helvetica Neue',
-						'Apple Color Emoji',
-						'Segoe UI Emoji',
-						'Segoe UI Symbol',
-						'Meiryo UI',
-						Arial,
-						sans-serif;
-				}
-
-				.color-primary-font-color {
-					color: #444;
-				}
-			`}</style>
-			<div dangerouslySetInnerHTML={{__html: require('!!raw-loader!../private/public/icons.svg').default}} />
-			<div className='global-font-family color-primary-font-color'>
-				{fn()}
-			</div>
-		</TranslationProvider>
-</ConnectionStatusProvider>;
+export const dummyDate = new Date(2015, 4, 19);

.storybook/meteor.js

@@ -0,0 +1,74 @@
+export const Meteor = {
+	isClient: true,
+	isServer: false,
+	_localStorage: window.localStorage,
+	absoluteUrl: () => {},
+	userId: () => {},
+	Streamer: () => {},
+	startup: () => {},
+	methods: () => {},
+	call: () => {},
+};
+
+Meteor.absoluteUrl.defaultOptions = {};
+
+export const Tracker = {
+	autorun: () => ({
+		stop: () => {},
+	}),
+	nonreactive: (fn) => fn(),
+	Dependency: () => {},
+};
+
+export const Accounts = {};
+
+export const Mongo = {
+	Collection: () => ({
+		find: () => ({
+			observe: () => {},
+			fetch: () => [],
+		})
+	}),
+};
+
+export const ReactiveVar = () => ({
+	get: () => {},
+	set: () => {},
+});
+
+export const ReactiveDict = () => ({
+	get: () => {},
+	set: () => {},
+	all: () => {},
+});
+
+export const Template = () => ({
+	onCreated: () => {},
+	onRendered: () => {},
+	onDestroyed: () => {},
+	helpers: () => {},
+	events: () => {},
+});
+
+Template.registerHelper = () => {};
+Template.__checkName = () => {};
+
+export const Blaze = {
+	Template,
+	registerHelper: () => {},
+};
+
+window.Blaze = Blaze;
+
+export const check = () => {};
+
+export const FlowRouter = {
+	route: () => {}
+};
+
+export const BlazeLayout = {};
+
+export const Session = {
+	get: () => {},
+	set: () => {},
+};

.storybook/webpack.config.js

@@ -1,22 +1,48 @@
 'use strict';
 
-module.exports = async ({ config, mode }) => {
-	const cssRule = config.module.rules.find(({ test }) => test.test('index.css'));
-  cssRule.use[1].options.url = (url, resourcePath) => {
-		if (/^(\.\/)?images\//.test(url)) {
-			return false;
-		}
+const path = require('path');
+
+const webpack = require('webpack');
 
-		return true;
-	};
+module.exports = async ({ config }) => {
+	const cssRule = config.module.rules.find(({ test }) => test.test('index.css'));
 
 	cssRule.use[2].options.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;
+		} }),
 	];
 
-  return config;
+	config.module.rules.push({
+		test: /\.info$/,
+		type: 'json',
+	});
+
+	config.module.rules.push({
+		test: /\.html$/,
+		use: '@settlin/spacebars-loader',
+	});
+
+	config.plugins.push(new webpack.NormalModuleReplacementPlugin(
+		/^meteor/,
+		require.resolve('./meteor.js'),
+	));
+
+	config.plugins.push(new webpack.NormalModuleReplacementPlugin(
+		/\.\/server\/index.js/,
+		require.resolve('./empty.js'),
+	));
+
+	config.mode = 'development';
+	config.optimization.usedExports = true;
+
+	return config;
 };

app/apps/client/admin/views.js

@@ -0,0 +1,11 @@
+import './modalTemplates/iframeModal.html';
+import './modalTemplates/iframeModal';
+import './marketplace';
+import './apps';
+import './appInstall.html';
+import './appInstall';
+import './appLogs.html';
+import './appLogs';
+import './appManage';
+import './appWhatIsIt.html';
+import './appWhatIsIt';

app/apps/client/index.js

@@ -1,14 +1,3 @@
-import './admin/modalTemplates/iframeModal.html';
-import './admin/modalTemplates/iframeModal';
-import './admin/marketplace';
-import './admin/apps';
-import './admin/appInstall.html';
-import './admin/appInstall';
-import './admin/appLogs.html';
-import './admin/appLogs';
-import './admin/appManage';
-import './admin/appWhatIsIt.html';
-import './admin/appWhatIsIt';
 import './routes';
 
 export { Apps } from './orchestrator';

app/apps/client/routes.js

@@ -7,6 +7,7 @@ FlowRouter.route('/admin/apps/what-is-it', {
 	name: 'apps-what-is-it',
 	action: async () => {
 		// TODO: render loading indicator
+		await import('./admin/views');
 		if (await Apps.isEnabled()) {
 			FlowRouter.go('apps');
 		} else {
@@ -18,6 +19,7 @@ FlowRouter.route('/admin/apps/what-is-it', {
 const createAppsRouteAction = (centerTemplate) => async () => {
 	// TODO: render loading indicator
 	if (await Apps.isEnabled()) {
+		await import('./admin/views');
 		BlazeLayout.render('main', { center: centerTemplate, old: true }); // TODO remove old
 	} else {
 		FlowRouter.go('apps-what-is-it');

app/authorization/client/index.js

@@ -4,10 +4,6 @@ import './usersNameChanged';
 import './requiresPermission.html';
 import './route';
 import './startup';
-import './views/permissions.html';
-import './views/permissions';
-import './views/permissionsRole.html';
-import './views/permissionsRole';
 
 export {
 	hasAllPermission,

app/authorization/client/route.js

@@ -5,7 +5,8 @@ import { t } from '../../utils/client';
 
 FlowRouter.route('/admin/permissions', {
 	name: 'admin-permissions',
-	action(/* params*/) {
+	async action(/* params*/) {
+		await import('./views');
 		return BlazeLayout.render('main', {
 			center: 'permissions',
 			pageTitle: t('Permissions'),
@@ -15,7 +16,8 @@ FlowRouter.route('/admin/permissions', {
 
 FlowRouter.route('/admin/permissions/:name?/edit', {
 	name: 'admin-permissions-edit',
-	action(/* params*/) {
+	async action(/* params*/) {
+		await import('./views');
 		return BlazeLayout.render('main', {
 			center: 'pageContainer',
 			pageTitle: t('Role_Editing'),
@@ -26,7 +28,8 @@ FlowRouter.route('/admin/permissions/:name?/edit', {
 
 FlowRouter.route('/admin/permissions/new', {
 	name: 'admin-permissions-new',
-	action(/* params*/) {
+	async action(/* params*/) {
+		await import('./views');
 		return BlazeLayout.render('main', {
 			center: 'pageContainer',
 			pageTitle: t('Role_Editing'),

app/authorization/client/views/index.js

@@ -0,0 +1,4 @@
+import './permissions.html';
+import './permissions';
+import './permissionsRole.html';
+import './permissionsRole';

app/callbacks/lib/callbacks.js

@@ -56,7 +56,7 @@ const createCallbackTimed = (hook, callbacks) =>
 const create = (hook, cbs) =>
 	(timed ? createCallbackTimed(hook, cbs) : createCallback(hook, cbs));
 const combinedCallbacks = new Map();
-this.combinedCallbacks = combinedCallbacks;
+
 /*
 * Callback priorities
 */

app/cloud/client/admin/index.js

@@ -0,0 +1,2 @@
+import './cloud';
+import './callback';

app/cloud/client/index.js

@@ -1,6 +1,3 @@
-import './admin/callback';
-import './admin/cloud';
-
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 
@@ -9,14 +6,16 @@ import { hasAtLeastOnePermission } from '../../authorization';
 
 FlowRouter.route('/admin/cloud', {
 	name: 'cloud-config',
-	action() {
+	async action() {
+		await import('./admin');
 		BlazeLayout.render('main', { center: 'cloud', old: true });
 	},
 });
 
 FlowRouter.route('/admin/cloud/oauth-callback', {
 	name: 'cloud-oauth-callback',
-	action() {
+	async action() {
+		await import('./admin');
 		BlazeLayout.render('main', { center: 'cloudCallback', old: true });
 	},
 });

app/custom-sounds/client/admin/route.js

@@ -7,7 +7,8 @@ FlowRouter.route('/admin/custom-sounds', {
 	subscriptions(/* params, queryParams*/) {
 		this.register('customSounds', Meteor.subscribe('customSounds'));
 	},
-	action(/* params*/) {
+	async action(/* params*/) {
+		await import('./views');
 		BlazeLayout.render('main', { center: 'adminSounds' });
 	},
 });