Chore: Configure Prettier for @rocket.chat/livechat

packages/livechat/.eslintrc.json

@@ -1,11 +1,12 @@
 {
-	"extends": ["@rocket.chat/eslint-config"],
-	"plugins": ["react", "react-hooks"],
+	"extends": ["@rocket.chat/eslint-config", "prettier"],
+	"plugins": ["react", "react-hooks", "prettier"],
 	"parser": "@babel/eslint-parser",
 	"env": {
 		"jest": true
 	},
 	"rules": {
+		"prettier/prettier": "error",
 		"import/order": ["error", {
 			"newlines-between": "always",
 			"groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
@@ -45,7 +46,8 @@
 		"react/self-closing-comp": "error",
 		"react-hooks/rules-of-hooks": "error",
     	"react-hooks/exhaustive-deps": "warn",
-		"no-sequences": "off"
+		"no-sequences": "off",
+		"no-extra-parens": "off"
 	},
 	"settings": {
 		"import/resolver": {

packages/livechat/package.json

@@ -108,6 +108,9 @@
 		"last 2 versions",
 		"not ie < 11"
 	],
+	"volta": {
+		"extends": "../../package.json"
+	},
 	"houston": {
 		"updateFiles": [
 			"package.json"

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

@@ -5,7 +5,6 @@ import CloseIcon from '../../icons/close.svg';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
-
 class Alert extends Component {
 	static defaultProps = {
 		timeout: 3000,
@@ -34,18 +33,12 @@ class Alert extends Component {
 			className={createClassName(styles, 'alert', { success, warning, error }, [className])}
 			style={{
 				...style,
-				...color && { backgroundColor: color },
+				...(color && { backgroundColor: color }),
 			}}
 		>
-			<div className={createClassName(styles, 'alert__content')}>
-				{children}
-			</div>
+			<div className={createClassName(styles, 'alert__content')}>{children}</div>
 			{!hideCloseButton && (
-				<button
-					onClick={this.handleDismiss}
-					className={createClassName(styles, 'alert__close')}
-					aria-label={t('dismiss_this_alert')}
-				>
+				<button onClick={this.handleDismiss} className={createClassName(styles, 'alert__close')} aria-label={t('dismiss_this_alert')}>
 					<CloseIcon width={20} height={20} />
 				</button>
 			)}

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

@@ -5,7 +5,6 @@ import { storiesOf } from '@storybook/react';
 import Alert from '.';
 import { screenCentered, loremIpsum } from '../../helpers.stories';
 
-
 storiesOf('Components/Alert', module)
 	.addDecorator(withKnobs)
 	.addDecorator(screenCentered)

packages/livechat/src/components/App/App.js

@@ -23,7 +23,7 @@ import { visibility, isActiveSession, setInitCookies } from '../helpers';
 
 function isRTL(s) {
 	const rtlChars = '\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC';
-	const rtlDirCheck = new RegExp(`^[^${ rtlChars }]*?[${ rtlChars }]`);
+	const rtlDirCheck = new RegExp(`^[^${rtlChars}]*?[${rtlChars}]`);
 
 	return rtlDirCheck.test(s);
 }
@@ -47,9 +47,7 @@ export class App extends Component {
 					online,
 					departments = [],
 				},
-				gdpr: {
-					accepted: gdprAccepted,
-				},
+				gdpr: { accepted: gdprAccepted },
 				triggered,
 				user,
 			} = this.props;
@@ -67,20 +65,21 @@ export class App extends Component {
 
 			const showDepartment = departments.filter((dept) => dept.showOnRegistration).length > 0;
 
-			const showRegistrationForm = (
-				registrationForm
-					&& (nameFieldRegistrationForm || emailFieldRegistrationForm || showDepartment)
-			)
-				&& !triggered
-				&& !(user && user.token);
+			const showRegistrationForm =
+				registrationForm &&
+				(nameFieldRegistrationForm || emailFieldRegistrationForm || showDepartment) &&
+				!triggered &&
+				!(user && user.token);
 			if (showRegistrationForm) {
 				return route('/register');
 			}
 		}, 100);
 	};
 
 	handleTriggers() {
-		const { config: { online, enabled } } = this.props;
+		const {
+			config: { online, enabled },
+		} = this.props;
 		if (online && enabled) {
 			Triggers.init();
 		}
@@ -143,7 +142,11 @@ export class App extends Component {
 	dismissNotification = () => !isActiveSession();
 
 	initWidget() {
-		const { minimized, iframe: { visible }, dispatch } = this.props;
+		const {
+			minimized,
+			iframe: { visible },
+			dispatch,
+		} = this.props;
 		parentCall(minimized ? 'minimizeWindow' : 'restoreWindow');
 		parentCall(visible ? 'showWidget' : 'hideWidget');
 
@@ -202,14 +205,7 @@ export class App extends Component {
 		}
 	}
 
-	render = ({
-		sound,
-		undocked,
-		minimized,
-		expanded,
-		alerts,
-		modal,
-	}, { initialized, poppedOut }) => {
+	render = ({ sound, undocked, minimized, expanded, alerts, modal }, { initialized, poppedOut }) => {
 		if (!initialized) {
 			return null;
 		}

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

@@ -1,39 +1,28 @@
 import { Provider as StoreProvider, Consumer as StoreConsumer } from '../../store';
 import App from './App';
 
-const AppConnector = () => <div id='app'>
-	<StoreProvider>
-		<StoreConsumer>
-			{({
-				config,
-				user,
-				triggered,
-				gdpr,
-				sound,
-				undocked,
-				minimized = true,
-				expanded = false,
-				alerts,
-				modal,
-				dispatch,
-				iframe,
-			}) => (
-				<App
-					config={config}
-					gdpr={gdpr}
-					triggered={triggered}
-					user={user}
-					sound={sound}
-					undocked={undocked}
-					minimized={minimized}
-					expanded={expanded}
-					alerts={alerts}
-					modal={modal}
-					dispatch={dispatch}
-					iframe={iframe}
-				/>
-			)}
-		</StoreConsumer>
-	</StoreProvider>
-</div>;
+const AppConnector = () => (
+	<div id='app'>
+		<StoreProvider>
+			<StoreConsumer>
+				{({ config, user, triggered, gdpr, sound, undocked, minimized = true, expanded = false, alerts, modal, dispatch, iframe }) => (
+					<App
+						config={config}
+						gdpr={gdpr}
+						triggered={triggered}
+						user={user}
+						sound={sound}
+						undocked={undocked}
+						minimized={minimized}
+						expanded={expanded}
+						alerts={alerts}
+						modal={modal}
+						dispatch={dispatch}
+						iframe={iframe}
+					/>
+				)}
+			</StoreConsumer>
+		</StoreProvider>
+	</div>
+);
 export default AppConnector;

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

@@ -3,7 +3,6 @@ import { Component } from 'preact';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
-
 export class Avatar extends Component {
 	static getDerivedStateFromProps(props) {
 		if (props.src) {
@@ -27,18 +26,11 @@ export class Avatar extends Component {
 			className={createClassName(styles, 'avatar', { small, large, nobg: src && !errored }, [className])}
 			style={style}
 		>
-			{(src && !errored) && (
-				<img
-					src={src}
-					alt={description}
-					className={createClassName(styles, 'avatar__image')}
-					onError={this.handleError}
-				/>
+			{src && !errored && (
+				<img src={src} alt={description} className={createClassName(styles, 'avatar__image')} onError={this.handleError} />
 			)}
 
-			{status && (
-				<span className={createClassName(styles, 'avatar__status', { small, large, status })} />
-			)}
+			{status && <span className={createClassName(styles, 'avatar__status', { small, large, status })} />}
 		</div>
 	);
 }

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

@@ -4,7 +4,6 @@ import { storiesOf } from '@storybook/react';
 import { Avatar } from '.';
 import { avatarResolver, centered } from '../../helpers.stories';
 
-
 const defaultSrc = avatarResolver('guilherme.gazzo');
 const defaultDescription = 'user description';
 const statuses = [null, 'offline', 'away', 'busy', 'online'];

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

@@ -1,50 +1,60 @@
 import { createClassName, memo } from '../helpers';
 import styles from './styles.scss';
 
-
 const handleMouseUp = ({ target }) => target.blur();
 
-export const Button = memo(({
-	submit,
-	disabled,
-	outline,
-	nude,
-	danger,
-	secondary,
-	stack,
-	small,
-	loading,
-	badge,
-	icon,
-	onClick,
-	className,
-	style = {},
-	children,
-	img,
-}) => (
-	<button
-		type={submit ? 'submit' : 'button'}
-		disabled={disabled}
-		onClick={onClick}
-		onMouseUp={handleMouseUp}
-		aria-label={icon ? children[0] : null}
-		className={createClassName(styles, 'button', {
-			disabled,
-			outline,
-			nude,
-			danger,
-			secondary,
-			stack,
-			small,
-			loading,
-			icon: !!icon,
-			img,
-		}, [className])}
-		style={Object.assign({}, style, img && {
-			backgroundImage: `url(${ img })`,
-		})}
-	>
-		{badge ? (<span className={createClassName(styles, 'button__badge')}>{badge}</span>) : null}
-		{!img && (icon || children)}
-	</button>
-));
+export const Button = memo(
+	({
+		submit,
+		disabled,
+		outline,
+		nude,
+		danger,
+		secondary,
+		stack,
+		small,
+		loading,
+		badge,
+		icon,
+		onClick,
+		className,
+		style = {},
+		children,
+		img,
+	}) => (
+		<button
+			type={submit ? 'submit' : 'button'}
+			disabled={disabled}
+			onClick={onClick}
+			onMouseUp={handleMouseUp}
+			aria-label={icon ? children[0] : null}
+			className={createClassName(
+				styles,
+				'button',
+				{
+					disabled,
+					outline,
+					nude,
+					danger,
+					secondary,
+					stack,
+					small,
+					loading,
+					icon: !!icon,
+					img,
+				},
+				[className],
+			)}
+			style={Object.assign(
+				{},
+				style,
+				img && {
+					backgroundImage: `url(${img})`,
+				},
+			)}
+		>
+			{badge ? <span className={createClassName(styles, 'button__badge')}>{badge}</span> : null}
+			{!img && (icon || children)}
+		</button>
+	),
+);

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

@@ -6,7 +6,6 @@ import { Button } from '.';
 import { avatarResolver, centered } from '../../helpers.stories';
 import ChatIcon from '../../icons/chat.svg';
 
-
 const defaultSrc = avatarResolver('guilherme.gazzo');
 
 const defaultText = 'Powered by Rocket.Chat';

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

@@ -1,10 +1,8 @@
 import { cloneElement, toChildArray } from 'preact';
 
-
 import { createClassName, memo } from '../helpers';
 import styles from './styles.scss';
 
-
 export const ButtonGroup = memo(({ children }) => (
 	<div className={createClassName(styles, 'button-group')}>
 		{toChildArray(children).map((child) => cloneElement(child, { className: createClassName(styles, 'button-group__item') }))}