refactor(livechat): disable multiple components per module

Author: tassoevan

eslint.config.mjs

@@ -394,9 +394,6 @@ export default [
 				pragmaFrag: 'Fragment',
 			},
 		},
-		rules: {
-			'react/no-multi-comp': 'warn',
-		},
 	},
 	{
 		ignores: ['packages/node-poplib/**', 'packages/storybook-config/*.@(d.ts|js)', 'scripts/**', '.github/**', '.houston/**'],

…vechat/src/components/Avatar/stories.tsx …src/components/Avatar/Avatar.stories.tsxpackages/livechat/src/components/Avatar/stories.tsx renamed to packages/livechat/src/components/Avatar/Avatar.stories.tsx packages/livechat/src/components/Avatar/stories.tsx renamed to packages/livechat/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'preact/compat';
+
+import styles from './styles.scss';
+import { createClassName } from '../../helpers/createClassName';
+
+export type CharCounterProps = {
+	className?: string;
+	style?: CSSProperties;
+	textLength: number;
+	limitTextLength: number;
+};
+
+const CharCounter = ({ className, style = {}, textLength, limitTextLength }: CharCounterProps) => (
+	<span className={createClassName(styles, 'footer__remainder', { highlight: textLength === limitTextLength }, [className])} style={style}>
+		{textLength} / {limitTextLength}
+	</span>
+);
+
+export default CharCounter;

…t/src/components/ButtonGroup/stories.tsx …ents/ButtonGroup/ButtonGroup.stories.tsxpackages/livechat/src/components/ButtonGroup/stories.tsx renamed to packages/livechat/src/components/ButtonGroup/ButtonGroup.stories.tsx packages/livechat/src/components/ButtonGroup/stories.tsx renamed to packages/livechat/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -2,14 +2,16 @@ import { action } from '@storybook/addon-actions';
 import type { Meta, StoryFn } from '@storybook/preact';
 import type { ComponentProps } from 'preact';
 
-import { Footer, FooterContent, FooterOptions, PoweredBy } from '.';
 import ChangeIcon from '../../icons/change.svg';
 import FinishIcon from '../../icons/finish.svg';
 import RemoveIcon from '../../icons/remove.svg';
 import { Composer } from '../Composer';
-import Menu from '../Menu';
+import { MenuGroup, MenuItem } from '../Menu';
 import { PopoverContainer } from '../Popover';
-
+import Footer from './Footer';
+import FooterContent from './FooterContent';
+import FooterOptions from './FooterOptions';
+import PoweredBy from './PoweredBy';
 import '../../i18next';
 
 export default {
@@ -46,17 +48,17 @@ export const WithComposerAndOptions: StoryFn<ComponentProps<typeof Footer>> = (a
 		</FooterContent>
 		<FooterContent>
 			<FooterOptions>
-				<Menu.Group>
-					<Menu.Item onClick={action('change-department')} icon={ChangeIcon}>
+				<MenuGroup>
+					<MenuItem onClick={action('change-department')} icon={ChangeIcon}>
 						Change department
-					</Menu.Item>
-					<Menu.Item onClick={action('remove-user-data')} icon={RemoveIcon}>
+					</MenuItem>
+					<MenuItem onClick={action('remove-user-data')} icon={RemoveIcon}>
 						Forget/Remove my personal data
-					</Menu.Item>
-					<Menu.Item danger onClick={action('finish-chat')} icon={FinishIcon}>
+					</MenuItem>
+					<MenuItem danger onClick={action('finish-chat')} icon={FinishIcon}>
 						Finish this chat
-					</Menu.Item>
-				</Menu.Group>
+					</MenuItem>
+				</MenuGroup>
 			</FooterOptions>
 			<PoweredBy />
 		</FooterContent>

…c/components/FilesDropTarget/stories.tsx …esDropTarget/FilesDropTarget.stories.tsxpackages/livechat/src/components/FilesDropTarget/stories.tsx renamed to packages/livechat/src/components/FilesDropTarget/FilesDropTarget.stories.tsx packages/livechat/src/components/FilesDropTarget/stories.tsx renamed to packages/livechat/src/components/FilesDropTarget/FilesDropTarget.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentChildren } from 'preact';
+
+import styles from './styles.scss';
+import { createClassName } from '../../helpers/createClassName';
+
+export type FooterProps = {
+	children: ComponentChildren;
+	className?: string;
+};
+
+const Footer = ({ children, className, ...props }: FooterProps) => (
+	<footer className={createClassName(styles, 'footer', {}, [className])} {...props}>
+		{children}
+	</footer>
+);
+
+export default Footer;

packages/livechat/src/components/Footer/CharCounter.tsx

@@ -0,0 +1,17 @@
+import type { ComponentChildren } from 'preact';
+
+import styles from './styles.scss';
+import { createClassName } from '../../helpers/createClassName';
+
+export type FooterContentProps = {
+	children: ComponentChildren;
+	className?: string;
+};
+
+const FooterContent = ({ children, className, ...props }: FooterContentProps) => (
+	<div className={createClassName(styles, 'footer__content', {}, [className])} {...props}>
+		{children}
+	</div>
+);
+
+export default FooterContent;

…vechat/src/components/Footer/stories.tsx …src/components/Footer/Footer.stories.tsxpackages/livechat/src/components/Footer/stories.tsx renamed to packages/livechat/src/components/Footer/Footer.stories.tsx packages/livechat/src/components/Footer/stories.tsx renamed to packages/livechat/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentChildren } from 'preact';
+
+import { MenuPopover } from '../Menu';
+import OptionsTrigger from './OptionsTrigger';
+
+export type FooterOptionsProps = {
+	children: ComponentChildren;
+};
+
+const FooterOptions = ({ children }: FooterOptionsProps) => (
+	<MenuPopover trigger={OptionsTrigger} overlayed>
+		{children}
+	</MenuPopover>
+);
+
+export default FooterOptions;

packages/livechat/src/components/Footer/Footer.tsx

@@ -0,0 +1,23 @@
+import { type MouseEventHandler } from 'preact/compat';
+import { useTranslation } from 'react-i18next';
+
+import styles from './styles.scss';
+import { createClassName } from '../../helpers/createClassName';
+
+const handleMouseUp: MouseEventHandler<HTMLButtonElement> = ({ target }) => (target as HTMLButtonElement | null)?.blur();
+
+type OptionsTriggerProps = {
+	pop: () => void;
+};
+
+const OptionsTrigger = ({ pop }: OptionsTriggerProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<button className={createClassName(styles, 'footer__options')} onClick={pop} onMouseUp={handleMouseUp}>
+			{t('options')}
+		</button>
+	);
+};
+
+export default OptionsTrigger;