@max-ts/components 0.0.2

package/src/components/TagsList/Tag/Tag.tsx

@@ -0,0 +1,49 @@
+import type { MouseEvent } from 'react';
+
+import type { TagProps as BaseTagProps } from '../../Tag';
+
+import { StyledTag } from './styles';
+import { useLogic } from './useLogic';
+
+export type TagProps = {
+	/**
+	 * Текст тега
+	 */
+	label: BaseTagProps['label'];
+
+	/**
+	 * Если `true`, то тег будет недоступен для взаимодействия
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 * Если `true`, то текст может сокращаться путем обрезания части символов
+	 */
+	shrinks?: boolean;
+
+	/**
+	 * Хендлер удаления тега
+	 */
+	onDelete?: () => void;
+
+	/**
+	 * Хендлер клика по тегу
+	 */
+	onClick: (value: MouseEvent<HTMLDivElement>) => void;
+};
+
+export const Tag = (props: TagProps) => {
+	const { onMouseDown } = useLogic();
+
+	const { shrinks, isDisabled, ...restProps } = props;
+
+	return (
+		<StyledTag
+			$shrinks={shrinks}
+			color='grey'
+			disabled={isDisabled}
+			{...restProps}
+			onMouseDown={onMouseDown}
+		/>
+	);
+};

package/src/components/TagsList/Tag/index.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/src/components/TagsList/Tag/styles.ts

@@ -0,0 +1,19 @@
+import { styled } from '@mui/material';
+import { Tag, type TagProps } from '../../Tag';
+
+type StyledTagProps = TagProps & {
+	$shrinks?: boolean;
+};
+
+export const StyledTag = styled(Tag, {
+	shouldForwardProp: (prop) => prop !== '$shrinks',
+})<StyledTagProps>`
+  min-width: ${({ $shrinks }) => ($shrinks ? '30px' : 'unset')};
+  max-width: 246px;
+
+  & {
+    .MuiBox-root {
+      display: inline;
+    }
+  }
+`;

package/src/components/TagsList/Tag/useLogic/index.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/src/components/TagsList/Tag/useLogic/useLogic.ts

@@ -0,0 +1,11 @@
+import type { MouseEvent } from 'react';
+
+export const useLogic = () => {
+	const onMouseDown = (event: MouseEvent<HTMLDivElement>) => {
+		event.stopPropagation();
+	};
+
+	return {
+		onMouseDown,
+	};
+};

package/src/components/TagsList/TagsList.tsx

@@ -0,0 +1,80 @@
+import type { MouseEvent } from 'react';
+
+import { Tag } from './Tag';
+import { Wrapper } from './styles';
+import type { TagValue } from './types';
+import { useLogic } from './useLogic';
+import { getKey } from './utils';
+
+export type TagsListProps<TData extends TagValue = TagValue> = {
+	/**
+	 * Название класса, применяется к корневому компоненту
+	 */
+	className?: string;
+
+	/**
+	 * Список к отображению
+	 */
+	data?: Array<TData> | undefined;
+
+	/**
+	 * Если `true`, то тег будет недоступен для взаимодействия
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 * Поле, используемое в качестве ключа списка
+	 */
+	keyId: TData extends string ? never : keyof TData;
+
+	/**
+	 * Используется для определения строкового значения опции
+	 */
+	getOptionLabel: (value: TData) => string | number;
+
+	onChange: (value: Array<TData> | undefined) => void;
+
+	/**
+	 * Функция, вызываемая при клике не тэг
+	 */
+	onClick: (value: MouseEvent<HTMLDivElement>) => void;
+};
+
+/**
+ * Предназначен для отображения списка тегов в таких компонентах как: Select, Autocomplete, TreeLikeAutocomplete
+ * Не предназначен для использования в продуктах, не экспортируется из пакета
+ */
+export const TagsList = <TData extends TagValue>(
+	props: TagsListProps<TData>,
+) => {
+	const { maxItems, tagsContainerRef, visibleOptions, getTagProps } =
+		useLogic(props);
+
+	const { className, data, keyId, isDisabled, onClick } = props;
+
+	return (
+		<Wrapper className={className} ref={tagsContainerRef}>
+			{visibleOptions?.map((option, index) => {
+				const tagProps = getTagProps(option, index);
+
+				return (
+					<Tag
+						key={getKey(option, keyId)}
+						isDisabled={isDisabled}
+						onClick={onClick}
+						{...tagProps}
+					/>
+				);
+			})}
+
+			{data && maxItems < data.length && (
+				<Tag
+					key='more'
+					isDisabled={isDisabled}
+					label={`+${data.length - maxItems}`}
+					onClick={onClick}
+				/>
+			)}
+		</Wrapper>
+	);
+};

package/src/components/TagsList/index.ts

@@ -0,0 +1,3 @@
+export * from './TagsList';
+
+export * from './types';

package/src/components/TagsList/styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const Wrapper = styled('div')`
+  display: flex;
+  column-gap: ${({ theme }) => theme.spacing(1)};
+`;

package/src/components/TagsList/types.ts

@@ -0,0 +1 @@
+export type TagValue = string | Record<string, unknown>;

package/src/components/TagsList/useLogic/index.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/src/components/TagsList/useLogic/useLogic.ts

@@ -0,0 +1,184 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import type { TagsListProps } from '../TagsList';
+import type { TagValue } from '../types';
+import { getElementByText } from '../utils';
+
+type UseLogicParams<TData extends TagValue> = TagsListProps<TData>;
+
+export const useLogic = <TData extends TagValue>({
+	data = [],
+	keyId,
+	getOptionLabel,
+	onChange,
+}: UseLogicParams<TData>) => {
+	// Сколько тегов можно отобразить в инпуте
+	const [maxItems, setMaxItems] = useState(1);
+
+	const ignoreResizeRef = useRef(false);
+	const tagsContainerRef = useRef<HTMLDivElement>(null);
+
+	/**
+	 * Рассчитывает сколько тегов можно добавить в контейнер
+	 */
+	const getTagsCountToAdd = (
+		containerClone: HTMLDivElement,
+		availableWidth: number,
+		gap: number,
+	): number => {
+		// Получаем текст первого тега, чтобы по нему найти текстовый узел
+		const firstTagText = getOptionLabel(data[0]) as string;
+
+		// Маунтим клон в body, чтобы узнать ширину дочерних элементов
+		document.body.appendChild(containerClone);
+
+		// Пытаемся показать больше тегов
+		let addedWidth = 0;
+		let addedItems = 0;
+
+		// Добавляем теги, пока не закончится место
+		// Начинаем со второго элемента, так как первый уже есть
+		for (let i = 1; i < data.length; i += 1) {
+			// Клонируем последний тег
+			const childClone = containerClone.firstChild?.cloneNode(
+				true,
+			) as HTMLSpanElement;
+
+			// Получаем текст следующего тега
+			const newTagText = getOptionLabel(data[i]) as string;
+
+			// Ищем текстовый узел внутри тега
+			const textNode = getElementByText(childClone, firstTagText);
+
+			if (!textNode) {
+				throw new Error('Could not find text node');
+			}
+
+			// Заменяем текст в теге
+			textNode.textContent = newTagText;
+			// Считаем ширину с учетом добавленного тега
+			containerClone.appendChild(childClone);
+
+			const newTagWidth = childClone.getBoundingClientRect().width;
+
+			const deltaWidth = newTagWidth + gap;
+			const newAddedWidth = addedWidth + deltaWidth;
+
+			// Переполнение, стопаемся
+			if (newAddedWidth > availableWidth) {
+				break;
+			}
+
+			// Место есть, добавляем еще один тег
+			addedItems += 1;
+			addedWidth += deltaWidth;
+		}
+
+		// Удаляем клон из body
+		document.body.removeChild(containerClone);
+
+		return addedItems;
+	};
+
+	const recomputeMaxItems = () => {
+		const containerEl = tagsContainerRef.current;
+
+		if (!containerEl) {
+			throw new Error('Tags container ref is not set');
+		}
+
+		// Вычисляем отступы между тегами
+		const containerStyles = window.getComputedStyle(containerEl);
+		const gap = Number.parseInt(containerStyles.columnGap);
+
+		// Вычисляем ширину первого тега
+		const firstChildWidth =
+			containerEl.firstElementChild?.getBoundingClientRect().width || 0;
+
+		// Вычисляем доступную ширину для новых тегов
+		const availableWidth =
+			containerEl.getBoundingClientRect().width - firstChildWidth;
+
+		// Клонируем контейнер для тегов
+		const clone = containerEl.cloneNode(true) as HTMLDivElement;
+
+		// Убираем все элементы кроме первого
+		while (clone.lastElementChild && clone.children.length > 1) {
+			clone.removeChild(clone.lastElementChild);
+		}
+
+		// Маунтим невидимый клон в body, чтобы узнать ширину дочерних элементов
+		clone.style.visibility = 'hidden';
+
+		const addedItems = getTagsCountToAdd(clone, availableWidth, gap);
+
+		setMaxItems(1 + addedItems);
+	};
+
+	useLayoutEffect(() => {
+		if (typeof window === 'undefined' || !data || !data.length) {
+			return;
+		}
+
+		recomputeMaxItems();
+		// Не пересчитываем ширину контейнера, так как сами ее модифицировали
+		ignoreResizeRef.current = true;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data]);
+
+	useEffect(() => {
+		if (typeof window === 'undefined' || !data || !data.length) {
+			return;
+		}
+
+		if (!tagsContainerRef.current) {
+			throw new Error('Tags container ref is not set');
+		}
+
+		// Пересчитываем maxItems при ресайзе контейнера
+		const observer = new ResizeObserver(() => {
+			if (ignoreResizeRef.current) {
+				ignoreResizeRef.current = false;
+
+				return;
+			}
+
+			recomputeMaxItems();
+		});
+
+		observer.observe(tagsContainerRef.current);
+
+		return () => observer.disconnect();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [data]);
+
+	const getTagProps = (option: TData, index: number) => {
+		const label = getOptionLabel(option);
+
+		const shrinks =
+			index === maxItems - 1 && maxItems <= (data as TData[]).length;
+
+		const onDelete = () => {
+			const newValue = data?.filter((value) => {
+				if (typeof value === 'string') {
+					return value !== option;
+				}
+
+				return value[keyId] !== option[keyId];
+			});
+
+			onChange(newValue?.length ? newValue : []);
+		};
+
+		return { label, shrinks, onDelete };
+	};
+
+	const visibleOptions = data?.slice(0, maxItems);
+
+	return {
+		maxItems,
+		visibleOptions,
+		tagsContainerRef,
+		getTagProps,
+	};
+};

package/src/components/TagsList/utils/getElementByText/getElementByText.ts

@@ -0,0 +1,21 @@
+/**
+ * Ищет элемент по тексту внутри него
+ */
+export const getElementByText = (
+	parent: Element,
+	text: string,
+): Element | null => {
+	if (parent.innerHTML === text) {
+		return parent;
+	}
+
+	for (let i = 0; i < parent.children.length; i += 1) {
+		const found = getElementByText(parent.children[i], text);
+
+		if (found) {
+			return found;
+		}
+	}
+
+	return null;
+};

package/src/components/TagsList/utils/getElementByText/index.ts

@@ -0,0 +1 @@
+export * from './getElementByText';

package/src/components/TagsList/utils/getKey/getKey.ts

@@ -0,0 +1,11 @@
+import type { TagValue } from '../../types';
+
+export const getKey = (option: TagValue, keyId: string): string => {
+	if (typeof option === 'string') {
+		return option;
+	}
+
+	const key = option[keyId];
+
+	return typeof key === 'number' ? key.toString() : (key as string);
+};

package/src/components/TagsList/utils/getKey/index.ts

@@ -0,0 +1 @@
+export * from './getKey';

package/src/components/TagsList/utils/index.ts

@@ -0,0 +1,3 @@
+export { getElementByText } from './getElementByText';
+
+export { getKey } from './getKey';

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { type ChangeEvent, useState } from 'react';
+
+import { Eye, Search } from 'lucide-react';
+import { TextField } from './TextField';
+
+/**
+ * ### [Figma](https://www.figma.com/file/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?type=design&node-id=3211-52609&mode=design&t=lMvg1tmjfSIA2lhp-0)
+ * ### [Guide]()
+ */
+const meta: Meta<typeof TextField> = {
+	title: 'Components/Inputs/TextField',
+	component: TextField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const Interaction: Story = {
+	args: {
+		label: 'Имя',
+		helperText: 'Смотрите имя в паспорте',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => (
+	<>
+		<TextField label='Basic' />
+		<TextField label='Disabled' disabled />
+	</>
+);
+
+export const MaxLength = () => <TextField maxLength={3} label='Имя' />;
+
+export const Controlled = () => {
+	const [value, setValue] = useState('');
+
+	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+		setValue(event.target.value);
+	};
+
+	return <TextField label='Имя' value={value} onChange={handleChange} />;
+};
+
+export const Statuses = () => (
+	<>
+		<TextField required error helperText='Обязательно' label='Имя' />
+		<TextField
+			success
+			helperText='Удачно завершился процесс проверки'
+			label='Email'
+		/>
+	</>
+);
+
+export const Required = () => <TextField required label='Имя' />;
+
+export const Sizes = () => (
+	<>
+		<TextField label='Medium' />
+		<TextField label='Small' size='small' />
+	</>
+);
+
+export const FullWidth = () => <TextField fullWidth label='Длинное поле' />;
+
+export const HelperText = () => (
+	<>
+		<TextField helperText='Поясняю поле' label='Имя' />
+		<TextField error helperText='Поясняю ошибку поля' label='Имя' />
+		<TextField success helperText='Поясняю success статус' label='Имя' />
+	</>
+);
+
+export const Disabled = () => (
+	<>
+		<TextField disabled helperText='Поясняю поле' label='Имя' />
+	</>
+);
+
+export const Adornment = () => (
+	<>
+		<TextField startAdornment='₽' label='Цена' />
+		<TextField endAdornment='₽' label='Цена' />
+		<TextField endAdornment={<Eye />} label='Пароль' />
+		<TextField startAdornment={<Search />} label='Имя' />
+		<TextField error startAdornment='₽' label='Цена' />
+		<TextField error startAdornment={<Search />} label='Имя' />
+	</>
+);

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,117 @@
+import {
+	TextField as MuiTextField,
+	type TextFieldProps as MuiTextFieldProps,
+} from '@mui/material';
+import { type FocusEvent, type ReactNode, useMemo } from 'react';
+
+import { FormHelperTextContent } from '../FormHelperText';
+import type { WithoutEmotionSpecific } from '../types';
+
+export type TextFieldProps = Omit<
+	WithoutEmotionSpecific<MuiTextFieldProps>,
+	'variant' | 'color'
+> & {
+	/**
+	 * Флаг отображения успешного состояния
+	 */
+	success?: boolean;
+	/**
+	 * Элемент, который добавляется в начало
+	 */
+	startAdornment?: ReactNode;
+	/**
+	 * Элемент, который добавляется в конец
+	 */
+	endAdornment?: ReactNode;
+	/**
+	 * Максимальная длина ввода
+	 */
+	maxLength?: number;
+	/**
+	 * Параметр для обрезания пробелов в текст филде при вызове onBlur.
+	 * @default true
+	 * @example <TextField trimmed={false} />
+	 */
+	trimmed?: boolean;
+};
+
+export const TextField = ({
+	success,
+	error,
+	helperText: helperTextProp,
+	fullWidth = false,
+	startAdornment,
+	endAdornment,
+	slotProps,
+	maxLength,
+	trimmed = true,
+	onBlur,
+	...props
+}: TextFieldProps) => {
+	const color = useMemo(() => {
+		if (success) {
+			return 'success';
+		}
+
+		return undefined;
+	}, [success]);
+
+	const helperText = useMemo(() => {
+		if (success) {
+			return (
+				<FormHelperTextContent success>{helperTextProp}</FormHelperTextContent>
+			);
+		}
+
+		if (error) {
+			return (
+				<FormHelperTextContent error>{helperTextProp}</FormHelperTextContent>
+			);
+		}
+
+		if (helperTextProp) {
+			return helperTextProp;
+		}
+
+		// helperText из mui/TextField имеет тип ReactNode | undefined;
+		// однако если helperText={null} вспомогательный текст просто перестает
+		// рендериться, поэтому необходимо передавать что-то отличное от null
+		// но при этом не отображающиеся на странице
+		return <></>;
+	}, [helperTextProp, success, error]);
+
+	const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+		if (trimmed) {
+			const newValue = event.target.value?.trim();
+
+			props.onChange?.({
+				...event,
+				target: { ...event.target, value: newValue },
+			});
+		}
+
+		onBlur?.(event);
+	};
+
+	return (
+		<MuiTextField
+			variant='outlined'
+			fullWidth={fullWidth}
+			error={error}
+			color={color}
+			helperText={helperText}
+			slotProps={{
+				htmlInput: {
+					maxLength,
+				},
+				input: {
+					startAdornment,
+					endAdornment,
+				},
+				...slotProps,
+			}}
+			onBlur={handleBlur}
+			{...props}
+		/>
+	);
+};

package/src/components/TextField/index.ts

@@ -0,0 +1 @@
+export * from './TextField';