@max-ts/components 0.0.2

package/src/components/ContentState/ContentState.tsx

@@ -0,0 +1,90 @@
+import { type ReactNode, useContext } from 'react';
+
+import { Button } from '../Button';
+import { CircularProgress } from '../CircularProgress';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { Placeholder, type PlaceholderProps } from '../Placeholder';
+import { Typography } from '../Typography';
+
+import { ConfigContext } from '../ConfigProvider';
+import { LoadingContainer } from './styles';
+import type { ContentStateErrorProps } from './types';
+
+export type ContentStateProps = {
+	/**
+	 * Флаг состояния загрузки
+	 */
+	isLoading?: boolean;
+	/**
+	 * Элемент для отображения состояния загрузки
+	 */
+	loadingContent?: ReactNode | string;
+	/**
+	 * Флаг состояния ошибки
+	 */
+	isError?: boolean;
+	/**
+	 * Параметры для отображения состояния ошибки
+	 */
+	errorState?: Omit<ContentStateErrorProps, 'imgAlt'> & { imgAlt?: string };
+	/**
+	 * Флаг для отображения custom состояния ошибки
+	 */
+	isCustom?: boolean;
+	/**
+	 * Параметры для отображения custom состояния ошибки
+	 */
+	customState?: PlaceholderProps;
+	/**
+	 * Элементы для отображения состояния "Успех"
+	 */
+	children: ReactNode;
+};
+
+export const ContentState = ({
+	isLoading,
+	isError,
+	isCustom,
+	errorState,
+	customState,
+	children,
+	loadingContent: LoadingContent = <CircularProgress color='primary' />,
+}: ContentStateProps) => {
+	const { imagesMap } = useContext(ConfigContext);
+	if (isLoading) {
+		return <LoadingContainer>{LoadingContent}</LoadingContainer>;
+	}
+
+	if (isCustom && customState) {
+		return <Placeholder {...customState} />;
+	}
+
+	if (isError && errorState) {
+		const {
+			title = 'Произошла ошибка',
+			imgAlt,
+			imgSrc = imagesMap.defaultErrorImgSrc,
+			errorList,
+			onRetry,
+			actions = <Button onClick={onRetry}>Попробовать снова</Button>,
+		} = errorState;
+
+		const description = errorList.map((errorMessage) => (
+			<Typography key={errorMessage} component='p'>
+				{errorMessage}
+			</Typography>
+		));
+
+		return (
+			<Placeholder
+				title={title}
+				description={description}
+				imgAlt={imgAlt}
+				imgSrc={imgSrc}
+				Actions={actions}
+			/>
+		);
+	}
+
+	return <ErrorBoundary>{children}</ErrorBoundary>;
+};

package/src/components/ContentState/index.ts

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

package/src/components/ContentState/styles.ts

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material';
+
+export const LoadingContainer = styled('div')`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+`;

package/src/components/ContentState/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+export type ContentStateErrorProps = {
+	/**
+	 * Название ошибки
+	 */
+	title?: string;
+	/**
+	 * Изображение ошибки
+	 * @default '' присваивается в ConfigProvider imagesMap.defaultErrorImgSrc
+	 * @example <ConfigProvider imagesMap={{ defaultErrorImgSrc: '<img-path>' }} />
+	 */
+	imgSrc?: string;
+	/**
+	 * Alt атрибут для изображения
+	 */
+	imgAlt: string;
+	/**
+	 * Список ошибок для отображения
+	 */
+	errorList: string[];
+	/**
+	 * Элементы кнопок для дальнейших действий
+	 */
+	actions?: ReactNode;
+	/**
+	 * Функция для повторного действия
+	 */
+	onRetry: () => void;
+};

package/src/components/CopyTypography/CopyTypography.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '../Typography';
+
+import { OverflowTypography } from '../OverflowTypography';
+
+import { styled } from '@mui/material';
+import { CopyTypography } from './CopyTypography';
+
+/**
+ * ### [Figma]()
+ * ### [Guide]()
+ * Компонент позволяет скопировать содержимое в буфер обмена
+ */
+
+const meta: Meta<typeof CopyTypography> = {
+	title: 'Components/Data Display/CopyTypography',
+	component: CopyTypography,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CopyTypography>;
+
+export const Interaction: Story = {
+	args: {
+		children: <Typography>Швецова М. Д.</Typography>,
+		copyText: 'Швецова М. Д.',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const Wrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+const OverflowWrapper = styled('div')`
+  width: 150px;
+`;
+
+export const Example = () => {
+	return <CopyTypography>Швецова М. Д.</CopyTypography>;
+};
+
+/**
+ * prop `copyPosition` определяет расположение иконки(справа/слева от текста). По умолчанию справа
+ */
+export const CopyPosition = () => {
+	return (
+		<Wrapper>
+			<CopyTypography>Швецова М. Д.</CopyTypography>
+			<CopyTypography copyPosition='left'>Швецова М. Д.</CopyTypography>
+		</Wrapper>
+	);
+};
+
+/**
+ * prop `copyText` указывает какой текст необходимо скопировать в буфер обмена.
+ * Необходим для копирования текста вложенных компонентов или когда копируемое содержимое
+ * должно отличаться от представления.
+ */
+export const CopyText = () => {
+	return (
+		<Wrapper>
+			<CopyTypography copyText='Швецова Мария Дмитриевна'>
+				Швецова М. Д.
+			</CopyTypography>
+			<CopyTypography copyText='Швецова М. Д.'>
+				<Typography>Швецова М. Д.</Typography>
+			</CopyTypography>
+		</Wrapper>
+	);
+};
+
+/**
+ * prop `isShowCopyText` показывает в тултипе текст, который будет скопирован.
+ * Необходимо отключать тултип у вложенных компонентов, при их наличии, для избежания их наложения
+ */
+export const IsShowCopyText = () => {
+	return (
+		<OverflowWrapper>
+			<CopyTypography copyText='Швецова Мария Дмитриевна' isShowCopyText>
+				<OverflowTypography tooltipProps={{ title: undefined }}>
+					Швецова Мария Дмитриевна
+				</OverflowTypography>
+			</CopyTypography>
+		</OverflowWrapper>
+	);
+};

package/src/components/CopyTypography/CopyTypography.tsx

@@ -0,0 +1,55 @@
+import { Tooltip } from '../Tooltip';
+import type { TypographyProps } from '../Typography';
+
+import { StyledCopyIcon, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type CopyTypographyProps = TypographyProps & {
+	/**
+	 * Текст, который будет скопирован. Перекрывает обычное копирование если children является строкой
+	 */
+	copyText?: string;
+	/**
+	 * Отображает иконку слева или справа от текста
+	 * @default right
+	 */
+	copyPosition?: 'right' | 'left';
+	/**
+	 * Если `true`, в тултипе будет отображаться текст, который будет скопирован при нажатии
+	 */
+	isShowCopyText?: boolean;
+};
+
+export const CopyTypography = (props: CopyTypographyProps) => {
+	const {
+		children,
+		copyPosition = 'right',
+		copyText,
+		isShowCopyText,
+		color,
+		...restProps
+	} = props;
+
+	const renderIcon = () => (
+		<StyledCopyIcon $copyPosition={copyPosition} color={color as 'secondary'} />
+	);
+
+	const { handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft } =
+		useLogic(props);
+
+	return (
+		<Tooltip title={tooltipTitle} disableInteractive placement='bottom'>
+			<Wrapper
+				onMouseLeave={handleMouseLeave}
+				onClick={handleClick}
+				component='div'
+				color={color}
+				{...restProps}
+			>
+				{isIconOnLeft && renderIcon()}
+				{children}
+				{!isIconOnLeft && renderIcon()}
+			</Wrapper>
+		</Tooltip>
+	);
+};

package/src/components/CopyTypography/enums.ts

@@ -0,0 +1,5 @@
+export enum CopyStatus {
+	Copied = 'Скопировано',
+	Error = 'Ошибка копирования',
+	CanCopy = 'Скопировать',
+}

package/src/components/CopyTypography/index.ts

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

package/src/components/CopyTypography/styles.ts

@@ -0,0 +1,28 @@
+import { styled } from '@mui/material';
+import { Copy } from 'lucide-react';
+import { Typography } from '../Typography';
+
+export const Wrapper = styled(Typography)`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const StyledCopyIcon = styled(Copy, {
+	shouldForwardProp: (prop) => !['$copyPosition'].includes(prop.toString()),
+})<{ $copyPosition: 'left' | 'right' }>`
+  margin-right: ${({ $copyPosition, theme }) =>
+		$copyPosition === 'left' ? theme.spacing(1) : ''};
+  margin-left: ${({ $copyPosition, theme }) =>
+		$copyPosition === 'right' ? theme.spacing(1) : ''};
+
+  /* Задаем размер иконки */
+  font-size: 16px;
+
+  fill: ${({ color }) => color};
+`;

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

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

package/src/components/CopyTypography/useLogic/useLogic.ts

@@ -0,0 +1,38 @@
+import { type SyntheticEvent, useState } from 'react';
+
+import type { CopyTypographyProps } from '../CopyTypography';
+import { CopyStatus } from '../enums';
+
+type UseLogicParams = CopyTypographyProps;
+
+export const useLogic = ({
+	children,
+	copyText,
+	isShowCopyText,
+	copyPosition,
+}: UseLogicParams) => {
+	const [status, setStatus] = useState<CopyStatus>(CopyStatus.CanCopy);
+
+	const handleMouseLeave = () => {
+		if (status !== CopyStatus.CanCopy) {
+			setTimeout(() => {
+				setStatus(CopyStatus.CanCopy);
+			}, 100);
+		}
+	};
+
+	const handleClick = (event: SyntheticEvent<HTMLElement>) => {
+		event.stopPropagation();
+
+		navigator.clipboard
+			.writeText(copyText || (typeof children === 'string' ? children : ''))
+			.then(() => setStatus(CopyStatus.Copied))
+			.catch(() => setStatus(CopyStatus.Error));
+	};
+
+	const tooltipTitle = isShowCopyText ? `${status}: ${copyText}` : status;
+
+	const isIconOnLeft = copyPosition === 'left';
+
+	return { handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft };
+};

package/src/components/DataGrid/Body/Body.tsx

@@ -0,0 +1,185 @@
+import { type ChangeEvent, type ReactNode, useContext, useMemo } from 'react';
+
+import { ConfigContext } from '../../ConfigProvider';
+import { ContentState } from '../../ContentState';
+import { Row } from '../Row';
+import { RowContextProvider } from '../Row/RowContext';
+import type { Variant } from '../enums';
+import type { CellValue, DataGridColumns, DataGridRowOptions } from '../types';
+
+import { Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type BodyProps<TData extends Record<string, CellValue>> = {
+	/**
+	 * Конфигурация колонок для таблицы
+	 */
+	columns: DataGridColumns<TData>[];
+
+	/**
+	 * Поле, которое будет использоваться в качестве ключа
+	 */
+	keyId: keyof TData;
+
+	/**
+	 * Конфигурация ширины колонок
+	 */
+	gridColumns: string;
+
+	/**
+	 * Если true, показывается анимация загрузки
+	 */
+	isLoading?: boolean;
+
+	/**
+	 * Флаг состояния ошибки
+	 */
+	isError?: boolean;
+
+	/**
+	 * Текст ошибки
+	 */
+	errorMsg?: string;
+
+	/**
+	 * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+	 */
+	activeRowId?: string;
+
+	/**
+	 * Если true, то дерево будет раскрыто по умолчанию
+	 * @default 'false'
+	 */
+	isInitialExpanded: boolean;
+
+	/**
+	 * Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
+	 */
+	expandedLevel: number;
+
+	/**
+	 * Количество отображаемых по умолчанию дочерних элементов
+	 */
+	initialVisibleChildrenCount: number;
+
+	/**
+	 * Номер колонки, в которой будет расположена кнопка "Показать все"
+	 * Работает только для `variant="subrows"`
+	 */
+	moreButtonColumnPosition: number;
+
+	/**
+	 * Если false, кнопка разворачивания элементов не показывается
+	 * Работает только для `variant="subrows"`
+	 */
+	isVisibleCollapseButton: boolean;
+
+	/**
+	 * Если true, то будет отображаться чекбокс для выбора элемента
+	 */
+	isSelectable?: boolean;
+
+	/**
+	 * Массив выбранных строк
+	 */
+	selectedRows?: Array<TData>;
+
+	/**
+	 * Массив данных для отображения
+	 */
+	rows: Array<TData & { options?: DataGridRowOptions<TData> }>;
+
+	/**
+	 * Вариант отображения вложенных элементов
+	 */
+	variant: `${Variant}`;
+
+	/**
+	 * Используется для отображения переданного кол-ва строк при отсутствии данных
+	 */
+	minDisplayRows: number;
+
+	/**
+	 * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+	 */
+	emptyCellValue?: ReactNode;
+
+	/**
+	 *  Используется для отображения placeholder при отсутствии данных в таблице
+	 */
+	noDataPlaceholder?: ReactNode;
+
+	/**
+	 * Обработчик выбора строки
+	 */
+	onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
+
+	/**
+	 * Функция обработки нажатия на кнопку "Повторить запрос"
+	 */
+	onRetry: () => void;
+
+	/**
+	 * Обработчик клика строки таблицы
+	 */
+	onRowClick?: (row: TData) => void;
+};
+
+const INITIAL_LEVEL = 0;
+
+export const Body = <TData extends Record<string, CellValue>>(
+	props: BodyProps<TData>,
+) => {
+	const { imagesMap } = useContext(ConfigContext);
+
+	const { isNoData, contentStateProps } = useLogic(props);
+
+	const {
+		rows,
+		selectedRows = [],
+		isLoading,
+		isError,
+		errorMsg,
+		minDisplayRows,
+		keyId,
+		noDataPlaceholder,
+		onRetry,
+		...rowProps
+	} = props;
+
+	const renderedRows = useMemo(() => {
+		return rows.map(({ children, options, ...row }) => {
+			const rowId = (row as TData)[keyId] as string;
+
+			return (
+				<RowContextProvider key={rowId}>
+					<Row
+						row={row as TData}
+						selectedRows={selectedRows}
+						options={options}
+						keyId={keyId}
+						level={INITIAL_LEVEL}
+						nestedChildren={children as Array<TData>}
+						{...rowProps}
+					/>
+				</RowContextProvider>
+			);
+		});
+	}, [rows, keyId, selectedRows, rowProps]);
+
+	return (
+		<Wrapper $isEmpty={isNoData} $minDisplayRows={minDisplayRows}>
+			<ContentState
+				{...contentStateProps}
+				errorState={{
+					imgAlt: 'Что-то пошло не так',
+					errorList: [errorMsg || ''],
+					imgSrc: imagesMap.defaultErrorImgSrc,
+					onRetry,
+				}}
+			>
+				{rows.length ? renderedRows : noDataPlaceholder}
+			</ContentState>
+		</Wrapper>
+	);
+};

package/src/components/DataGrid/Body/index.ts

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

package/src/components/DataGrid/Body/styles.tsx

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material';
+import { MIN_ROW_HEIGHT } from '../constants';
+
+export const Wrapper = styled('ul', {
+	shouldForwardProp: (prop) =>
+		!['$isEmpty', '$minDisplayRows'].includes(prop.toString()),
+})<{ $isEmpty: boolean; $minDisplayRows: number }>`
+  overflow-y: auto;
+
+  height: ${({ $isEmpty, $minDisplayRows }) =>
+		$isEmpty ? `${MIN_ROW_HEIGHT * $minDisplayRows}px` : '100%'};
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+`;

package/src/components/DataGrid/Body/useLogic/index.ts

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

package/src/components/DataGrid/Body/useLogic/useLogic.ts

@@ -0,0 +1,20 @@
+import type { CellValue } from '../../types';
+import type { BodyProps } from '../Body';
+
+type UseLogicParams<TData extends Record<string, CellValue>> = BodyProps<TData>;
+
+export const useLogic = <TData extends Record<string, CellValue>>({
+	isLoading,
+	isError,
+	rows,
+}: UseLogicParams<TData>) => {
+	const isNoData = !rows.length;
+
+	return {
+		isNoData,
+		contentStateProps: {
+			isLoading: isLoading && isNoData,
+			isError: isError && isNoData,
+		},
+	};
+};

package/src/components/DataGrid/Cell/Cell.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+
+import { OverflowTypography } from '../../OverflowTypography';
+import type { CellValue, DataGridColumns } from '../types';
+
+import { Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type CellProps<TData extends Record<string, CellValue>> = {
+	/**
+	 * Название класса, применяется к корневому компоненту
+	 */
+	className?: string;
+
+	/**
+	 * Данные строки для отображения
+	 */
+	row: TData;
+
+	cell: DataGridColumns<TData>;
+
+	/**
+	 * Дополнительное содержимое ячейки, которое будет распложено справа
+	 */
+	startAdornment?: ReactNode;
+
+	/**
+	 * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+	 */
+	emptyCellValue?: ReactNode;
+
+	/**
+	 * Если true, ячейка будет недоступна для взаимодействия
+	 */
+	isDisabled?: boolean;
+};
+
+export const Cell = <TData extends Record<string, CellValue>>(
+	props: CellProps<TData>,
+) => {
+	const { formattedValue, hasStartAdornment } = useLogic(props);
+
+	const { className, startAdornment, row, cell, isDisabled } = props;
+	const { renderCell, align = 'left' } = cell;
+
+	return (
+		<Wrapper
+			$isDisabled={isDisabled}
+			$align={align}
+			$hasStartAdornment={hasStartAdornment}
+			className={className}
+			{...{ inert: isDisabled ? true : undefined }}
+		>
+			{startAdornment && startAdornment}
+			{renderCell?.(row)}
+			{!renderCell && (
+				<OverflowTypography rowsCount={2}>
+					{formattedValue as ReactNode}
+				</OverflowTypography>
+			)}
+		</Wrapper>
+	);
+};

package/src/components/DataGrid/Cell/index.ts

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

package/src/components/DataGrid/Cell/styles.ts

@@ -0,0 +1,26 @@
+import { styled } from '@mui/material';
+import { MIN_ROW_HEIGHT } from '../constants';
+import type { AlignVariant } from '../types';
+import { alignToJustifyContent } from '../utils';
+
+type HeadCellProps = {
+	$align?: AlignVariant;
+	$isDisabled?: boolean;
+	$hasStartAdornment?: boolean;
+};
+
+export const Wrapper = styled('div', {
+	shouldForwardProp: (prop) =>
+		!['$align', '$isDisabled', '$hasStartAdornment'].includes(prop.toString()),
+})<HeadCellProps>`
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $align }) => alignToJustifyContent($align)};
+
+  min-height: ${MIN_ROW_HEIGHT}px;
+  padding: ${({ theme, $hasStartAdornment }) =>
+		$hasStartAdornment ? theme.spacing(1, 2, 1, 0) : theme.spacing(1, 2)};
+
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
+`;