@max-ts/components 0.1.1 → 0.2.0

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

@@ -1,49 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-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

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

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

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

package/src/components/TagsList/TagsList.tsx

@@ -1,80 +0,0 @@
-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

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

package/src/components/TagsList/styles.ts

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

package/src/components/TagsList/types.ts

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

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

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

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

@@ -1,184 +0,0 @@
-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

@@ -1,21 +0,0 @@
-/**
- * Ищет элемент по тексту внутри него
- */
-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

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

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

@@ -1,11 +0,0 @@
-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

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

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

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

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { type ChangeEvent, useState } from 'react';
-
-import React from 'react';
-import { TextArea } from './TextArea';
-
-const meta: Meta<typeof TextArea> = {
-	title: 'Components/Inputs/TextArea',
-	component: TextArea,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TextArea>;
-
-export const Interaction: Story = {
-	args: {
-		label: 'Комментарии',
-		helperText: 'Укажите любую доп. информацию',
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-export const Example = () => (
-	<>
-		<TextArea label='Basic' />
-		<TextArea label='Disabled' disabled />
-	</>
-);
-
-export const Controlled = () => {
-	const [value, setValue] = useState('');
-
-	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-		setValue(event.target.value);
-	};
-
-	return (
-		<TextArea label='Доп. информация' value={value} onChange={handleChange} />
-	);
-};
-
-export const Statuses = () => (
-	<>
-		<TextArea
-			required
-			error
-			helperText='Обязательно'
-			label='Информация об абоненте'
-		/>
-		<TextArea
-			success
-			helperText='Удачно завершился процесс проверки ключа'
-			label='Электронный ключ'
-		/>
-	</>
-);
-
-export const Required = () => <TextArea required label='Доп. информация' />;
-
-export const FullWidth = () => <TextArea fullWidth label='Длинное поле' />;
-
-export const HelperText = () => (
-	<>
-		<TextArea helperText='Описание поле' label='Доп. информация' />
-		<TextArea error helperText='Описание ошибки поля' label='Доп. информация' />
-		<TextArea
-			success
-			helperText='Отображение success статуса'
-			label='Доп. информация'
-		/>
-	</>
-);
-
-export const Disabled = () => (
-	<TextArea disabled helperText='Поле не доступно' label='Доп. информация' />
-);

package/src/components/TextArea/TextArea.tsx

@@ -1,8 +0,0 @@
-import { TextField } from '../TextField';
-import type { TextFieldProps } from '../TextField';
-
-export type TextAreaProps = Omit<TextFieldProps, 'multiline'>;
-
-export const TextArea = ({ rows = 7, ...props }: TextAreaProps) => {
-  return <TextField multiline rows={rows} {...props} />;
-};

package/src/components/TextArea/index.ts

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

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

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { type ChangeEvent, useState } from 'react';
-
-import { Eye, Search } from 'lucide-react';
-import React from 'react';
-import { TextField } from './TextField';
-
-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='Имя' />
-	</>
-);