Chore: Add Livechat repo into Monorepo packages (#25312)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
Co-authored-by: Martin <martin.schoeler@rocket.chat>

.github/CODEOWNERS

@@ -2,6 +2,7 @@
 /packages/core-typings/ @RocketChat/chat-engine
 /packages/rest-typings/ @RocketChat/chat-engine
 /packages/eslint-config/ @RocketChat/chat-engine
+/packages/livechat/ @RocketChat/frontend @RocketChat/chat-engine
 /.vscode/ @RocketChat/chat-engine
 /.github/ @RocketChat/chat-engine
 /_templates/ @RocketChat/chat-engine

.github/no-js-action-config.json

@@ -1,5 +1,5 @@
 {
 	"added": {
-		"ignore": ["packages/accounts-linkedin/**/*", "packages/linkedin-oauth/**/*", "tests/cypress/integration/08-resolutions.spec.js", "**/.eslintrc.js", "packages/eslint-config/**"]
+		"ignore": ["packages/accounts-linkedin/**/*", "packages/linkedin-oauth/**/*", "tests/cypress/integration/08-resolutions.spec.js", "**/.eslintrc.js", "packages/eslint-config/**", "**/babel.config.js"]
 	}
 }

apps/meteor/package.json

@@ -71,7 +71,7 @@
 		"@babel/register": "^7.14.5",
 		"@playwright/test": "^1.21.0",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/livechat": "1.13.3",
+		"@rocket.chat/livechat": "workspace:^",
 		"@settlin/spacebars-loader": "^1.0.9",
 		"@storybook/addon-essentials": "~6.4.19",
 		"@storybook/addon-interactions": "~6.4.19",

apps/meteor/packages/rocketchat-livechat/plugin/build.sh

@@ -15,7 +15,7 @@ mkdir $LIVECHAT_ASSETS_DIR
 echo "Installing Livechat ${LATEST_LIVECHAT_VERSION}..."
 cd $LIVECHAT_DIR
 
-cp -a $ROOT/node_modules/\@rocket.chat/livechat/build/. ./
+cp -a $ROOT/node_modules/\@rocket.chat/livechat/dist/. ./
 # change to lowercase so all injected junk from rocket.chat is not sent: https://github.com/meteorhacks/meteor-inject-initial/blob/master/lib/inject-core.js#L10
 # this is not harmful since doctype is case-insesitive: https://www.w3.org/TR/html5/syntax.html#the-doctype
 meteor node -e 'fs.writeFileSync("index.html", fs.readFileSync("index.html").toString().replace("<!DOCTYPE", "<!doctype"));'

packages/livechat/.eslintignore

@@ -0,0 +1,4 @@
+/build/*
+!/.storybook
+
+src/i18next.js

packages/livechat/.eslintrc

@@ -0,0 +1,68 @@
+{
+	"extends": [
+		"@rocket.chat/eslint-config"
+	],
+	"plugins": ["react", "react-hooks"],
+	"parser": "babel-eslint",
+	"env": {
+		"jest": true
+	},
+	"rules": {
+		"import/order": ["error", {
+			"newlines-between": "always",
+			"groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
+			"alphabetize": {
+				"order": "asc"
+			}
+		}],
+		"jsx-quotes": ["error", "prefer-single"],
+		"react/display-name": ["warn", {
+			"ignoreTranspilerName": false
+		}],
+		"react/jsx-fragments": ["error", "syntax"],
+		"react/jsx-no-bind": ["warn", {
+			"ignoreRefs": true,
+			"allowFunctions": true,
+			"allowArrowFunctions": true
+		}],
+		"react/jsx-no-comment-textnodes": "error",
+		"react/jsx-no-duplicate-props": "error",
+		"react/jsx-no-target-blank": "error",
+		"react/jsx-no-undef": "error",
+		"react/jsx-tag-spacing": ["error", {
+			"beforeSelfClosing": "always"
+		}],
+		"react/jsx-uses-react": "error",
+		"react/jsx-uses-vars": "error",
+		"react/no-danger": "warn",
+		"react/no-deprecated": "error",
+		"react/no-did-mount-set-state": "error",
+		"react/no-did-update-set-state": "error",
+		"react/no-find-dom-node": "error",
+		"react/no-is-mounted": "error",
+		"react/no-string-refs": "error",
+		"react/prefer-es6-class": "error",
+		"react/prefer-stateless-function": "warn",
+		"react/require-render-return": "error",
+		"react/self-closing-comp": "error",
+		"react-hooks/rules-of-hooks": "error",
+    	"react-hooks/exhaustive-deps": "warn",
+		"no-sequences": "off"
+	},
+	"settings": {
+		"import/resolver": {
+			"node": {
+			  "extensions": [
+				".js",
+				".ts",
+				".tsx"
+			  ]
+			}
+		  },
+		"react": {
+				"pragma": "h",
+				"pragmaFrag": "Fragment",
+				"version": "detect"
+		}
+	}
+}

packages/livechat/.gitignore

@@ -0,0 +1,10 @@
+/node_modules
+/build
+/storybook-static
+/*.log
+/.vscode
+/size-plugin.json
+coverage
+package-lock.json
+build.tar.gz
+.DS_Store

packages/livechat/.storybook/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('../babel.config');

packages/livechat/.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  addons: [
+		{
+			name: '@storybook/addon-essentials',
+			options: {
+				backgrounds: false,
+			}
+		},
+		'@storybook/addon-knobs',
+  ],
+  stories: [
+		'../src/**/stories.js',
+		'../src/**/story.js',
+		'../src/**/*.stories.js',
+		'../src/**/*.story.js',
+  ],
+};

packages/livechat/.storybook/manager.js

@@ -0,0 +1,15 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+import manifest from '../package.json';
+import logo from './logo.svg';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: manifest.name,
+    brandImage: logo,
+    brandUrl: manifest.homepage,
+    colorPrimary: '#cbced1',
+    colorSecondary: '#1d74f5',
+  }),
+});

packages/livechat/.storybook/mocks/uiKit.js

@@ -0,0 +1,24 @@
+import { action } from '@storybook/addon-actions';
+
+export const UIKitInteractionType = {
+	MODAL_OPEN: 'modal.open',
+	MODAL_CLOSE: 'modal.close',
+	MODAL_UPDATE: 'modal.update',
+	ERRORS: 'errors',
+};
+
+export const UIKitIncomingInteractionType = {
+	BLOCK: 'blockAction',
+	VIEW_SUBMIT: 'viewSubmit',
+	VIEW_CLOSED: 'viewClosed',
+};
+
+export const UIKitIncomingInteractionContainerType = {
+	MESSAGE: 'message',
+	VIEW: 'view',
+};
+
+export const triggerAction = async (payload) => {
+	await new Promise((resolve) => setTimeout(resolve, 1000));
+	action('dispatchAction')(payload);
+};

packages/livechat/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+body {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+</style>

packages/livechat/.storybook/preview.js

@@ -0,0 +1,15 @@
+import { addDecorator, addParameters } from '@storybook/react';
+import 'loki/configure-react';
+import 'emoji-mart/css/emoji-mart.css';
+import '../src/styles/index.scss';
+
+addParameters({
+  grid: {
+    cellSize: 4,
+  },
+  options: {
+    storySort: ([, a], [, b]) => {
+      return a.kind.localeCompare(b.kind);
+    },
+  },
+});

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

@@ -0,0 +1,45 @@
+module.exports = ({ config }) => {
+	config.resolve.alias = {
+		...config.resolve.alias,
+		react: require.resolve('preact/compat'),
+		'react-dom': require.resolve('preact/compat'),
+		[require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit'),
+	};
+
+	config.module.rules = config.module.rules.filter(({ loader }) => !/json-loader/.test(loader));
+
+	const fileLoader = config.module.rules.find(({ loader }) => /file-loader/.test(loader));
+	fileLoader.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf|mp3|mp4)(\?.*)?$/;
+
+	const urlLoader = config.module.rules.find(({ loader }) => /url-loader/.test(loader));
+	urlLoader.test = /\.(webm|wav|m4a|aac|oga)(\?.*)?$/;
+
+	config.module.rules.push({
+		test: /\.scss$/,
+		use: [
+			'style-loader',
+			{
+				loader: 'css-loader',
+				options: {
+					sourceMap: true,
+					modules: true,
+					importLoaders: 1,
+				},
+			},
+			'sass-loader',
+		],
+	});
+
+	config.module.rules.push({
+		test: /\.svg$/,
+		exclude: [
+			__dirname,
+		],
+		use: [
+			'desvg-loader/preact',
+			'svg-loader',
+		],
+	});
+
+	return config;
+};