@max-ts/components 0.0.2

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

@@ -0,0 +1,39 @@
+import { styled } from '@mui/material';
+import { Typography } from '../../Typography';
+
+import type { AlignVariant } from '../types';
+import { alignToJustifyContent } from '../utils';
+
+type HeadCellProps = {
+	$align?: AlignVariant;
+	$isSortable?: boolean;
+	$hasStartAdornment?: boolean;
+};
+
+export const Wrapper = styled('div', {
+	shouldForwardProp: (prop) =>
+		!['$align', '$isSortable', '$hasStartAdornment'].includes(prop.toString()),
+})<HeadCellProps>`
+  cursor: ${({ $isSortable }) => ($isSortable ? 'pointer' : 'initial')};
+  user-select: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $align }) => alignToJustifyContent($align)};
+
+  height: 40px;
+  padding: ${({ theme, $hasStartAdornment }) =>
+		$hasStartAdornment ? theme.spacing(1, 2, 1, 0) : theme.spacing(1, 2)};
+
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+
+export const StyledTypography = styled(Typography)`
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;

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

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

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

@@ -0,0 +1,29 @@
+import type { DataGridRow } from '../../types';
+import type { HeadCellProps } from '../HeadCell';
+
+type UseLogicParams<
+	TData = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+> = HeadCellProps<TData, TSortField>;
+
+export const useLogic = <TData, TSortField extends keyof TData>({
+	field,
+	isSortable,
+	startAdornment,
+	onSort,
+}: UseLogicParams<TData, TSortField>) => {
+	const hasStartAdornment = Boolean(startAdornment);
+
+	const handleSortClick = () => {
+		if (field && isSortable) {
+			onSort(field as TSortField);
+		}
+	};
+
+	return {
+		wrapperProps: {
+			$hasStartAdornment: hasStartAdornment,
+			onClick: handleSortClick,
+		},
+	};
+};

package/src/components/DataGrid/Loader/Loader.tsx

@@ -0,0 +1,26 @@
+import {
+	Backdrop,
+	LoaderWrapper,
+	StyledDivider,
+	StyledLinearProgress,
+} from './styles';
+
+export type LoaderProps = {
+	isLoading?: boolean;
+	isDisabled?: boolean;
+	isVisibleDivider?: boolean;
+};
+
+export const Loader = ({
+	isLoading = false,
+	isDisabled = false,
+	isVisibleDivider = true,
+}: LoaderProps) => {
+	return (
+		<LoaderWrapper>
+			{(isLoading || isDisabled) && <Backdrop />}
+			{isLoading && <StyledLinearProgress />}
+			{!isLoading && isVisibleDivider && <StyledDivider />}
+		</LoaderWrapper>
+	);
+};

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

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

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

@@ -0,0 +1,26 @@
+import { LinearProgress, styled } from '@mui/material';
+
+import { Divider } from '../../Divider';
+
+export const Backdrop = styled('div')`
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: 0.3;
+  background-color: ${({ theme }) => theme.palette.background.element};
+`;
+
+export const StyledDivider = styled(Divider)`
+  border-width: 1px;
+`;
+
+export const LoaderWrapper = styled('div')`
+  height: 2px;
+`;
+
+export const StyledLinearProgress = styled(LinearProgress)`
+  height: 2px;
+`;

package/src/components/DataGrid/NoData/NoData.tsx

@@ -0,0 +1,65 @@
+import { useContext } from 'react';
+
+import { Button } from '../../Button';
+import { ConfigContext, type ConfigContextProps } from '../../ConfigProvider';
+import { Placeholder, type PlaceholderSize } from '../../Placeholder';
+
+export type NoDataProps = {
+	/**
+	 * Заголовок
+	 * @default 'Нет\u00a0данных'
+	 * Добавлен неразрывный пробел `\u00a0`,
+	 * так как без изображения текст форматируется в 2 строки
+	 */
+	title?: string;
+	/**
+	 * альтернативный текст в случае, если изображение по какой-то причине не загрузилось
+	 * @default эквивалентно title
+	 */
+	imgAlt?: string;
+	/**
+	 * Ширина иллюстрации в px (высота рассчитывается пропорционально ширине)
+	 * @default '250'
+	 * @deprecated
+	 */
+	noDataIconWidth?: number;
+	/**
+	 * Текст и обработчик для кнопки действия
+	 */
+	action?: {
+		text: string;
+		onClick: () => void;
+	};
+	/**
+	 * Задает общий размер компонента
+	 * @default 'small'
+	 */
+	size?: PlaceholderSize;
+};
+
+export const NoData = ({
+	title = 'Нет\u00a0данных',
+	imgAlt = title,
+	action,
+	size = 'small',
+}: NoDataProps) => {
+	const {
+		imagesMap: { noDataImgSrc },
+	} = useContext<ConfigContextProps>(ConfigContext);
+
+	return (
+		<Placeholder
+			title={title}
+			imgSrc={noDataImgSrc}
+			size={size}
+			Actions={
+				action ? (
+					<Button onClick={action.onClick} aria-label={action.text}>
+						{action.text}
+					</Button>
+				) : undefined
+			}
+			imgAlt={imgAlt}
+		/>
+	);
+};

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

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

package/src/components/DataGrid/Row/NestedChildren/NestedChildren.tsx

@@ -0,0 +1,158 @@
+import { type ReactElement, memo } from 'react';
+
+import { Collapse } from '../../../Collapse';
+import type { Variant } from '../../enums';
+import type { CellValue, DataGridRowOptions } from '../../types';
+import { HIDDEN_CHILDREN_ROW_CLASSNAME } from '../constants';
+
+import { MoreButton, MoreButtonRow, NestedRows } from './styles';
+import { useLogic } from './useLogic';
+
+export type NestedChildrenProps<TData extends Record<string, CellValue>> = {
+	/**
+	 * Если true, список дочерних элементов раскрыт
+	 */
+	isOpen: boolean;
+
+	/**
+	 * Данные для отображения
+	 */
+	data: Array<TData & { options?: DataGridRowOptions<TData> }>;
+
+	/**
+	 * Поле, которое будет использоваться в качестве ключа
+	 */
+	keyId: keyof TData;
+
+	/**
+	 * Идентификатор строки
+	 */
+	rowId: string;
+
+	/**
+	 * Вариант отображения вложенных элементов
+	 */
+	variant: `${Variant}`;
+
+	/**
+	 * Конфигурация ширины колонок
+	 */
+	gridColumns: string;
+
+	/**
+	 * Уровень вложенности в дереве
+	 */
+	level: number;
+
+	/**
+	 * Количество отображаемых по умолчанию дочерних элементов
+	 */
+	initialVisibleChildrenCount: number;
+
+	/**
+	 * Номер колонки, в которой будет расположена кнопка "Показать все"
+	 * Работает только для `variant="subrows"`
+	 */
+	moreButtonColumnPosition: number;
+
+	renderRow: ({
+		key,
+		level,
+		row,
+		nestedChildren,
+		options,
+		className,
+	}: {
+		key: string;
+		row: TData;
+		level: number;
+		nestedChildren: Array<TData & { options?: DataGridRowOptions<TData> }>;
+		options?: DataGridRowOptions<TData>;
+		className?: string;
+	}) => ReactElement;
+};
+
+export const NestedChildren = memo(
+	<TData extends Record<string, CellValue>>(
+		props: NestedChildrenProps<TData>,
+	) => {
+		const {
+			isShowAllChildren,
+			isShowMoreButton,
+			isShowConnector,
+			nextLevel,
+			initialVisibleChildren,
+			otherChildren,
+			handleToggleShowAllChildren,
+		} = useLogic(props);
+
+		const {
+			isOpen,
+			data,
+			keyId,
+			level,
+			gridColumns,
+			moreButtonColumnPosition,
+			renderRow,
+		} = props;
+
+		if (!data || !data.length) {
+			return null;
+		}
+
+		return (
+			<Collapse in={isOpen} unmountOnExit>
+				<NestedRows $level={level} $isShowConnector={isShowConnector}>
+					{initialVisibleChildren.map(({ children, options, ...nestedRow }) => {
+						const nestedRowId = (nestedRow as TData)[keyId] as string;
+
+						return renderRow({
+							key: nestedRowId,
+							row: nestedRow as TData,
+							options,
+							nestedChildren: children as Array<TData>,
+							level: nextLevel,
+						});
+					})}
+
+					{isOpen && (
+						<>
+							<Collapse in={isShowAllChildren} component='li' unmountOnExit>
+								<NestedRows $level={level} $isShowConnector={isShowConnector}>
+									{otherChildren.map(({ children, options, ...nestedRow }) => {
+										const nestedRowId = (nestedRow as TData)[keyId] as string;
+
+										return renderRow({
+											key: nestedRowId,
+											row: nestedRow as TData,
+											options,
+											nestedChildren: children as Array<TData>,
+											level: nextLevel,
+											className: HIDDEN_CHILDREN_ROW_CLASSNAME,
+										});
+									})}
+								</NestedRows>
+							</Collapse>
+
+							{isShowMoreButton && (
+								<MoreButtonRow
+									$level={nextLevel}
+									$isShowConnector={isShowConnector}
+									$gridColumns={gridColumns}
+								>
+									<MoreButton
+										$moreButtonColumnPosition={moreButtonColumnPosition}
+										variant='link'
+										onClick={handleToggleShowAllChildren}
+									>
+										{isShowAllChildren ? 'Скрыть' : 'Показать все'}
+									</MoreButton>
+								</MoreButtonRow>
+							)}
+						</>
+					)}
+				</NestedRows>
+			</Collapse>
+		);
+	},
+);

package/src/components/DataGrid/Row/NestedChildren/index.ts

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

package/src/components/DataGrid/Row/NestedChildren/styles.ts

@@ -0,0 +1,80 @@
+import { styled } from '@mui/material';
+import { Button } from '../../../Button';
+
+import { ROOT_ACTION_CELL_WIDTH, TREE_LINE_WIDTH } from '../../constants';
+
+export const NestedRows = styled('ul', {
+	shouldForwardProp: (prop) =>
+		!['$level', '$isShowConnector'].includes(prop.toString()),
+})<{
+	$level: number;
+	$isShowConnector: boolean;
+}>`
+  position: relative;
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    transform: ${({ $level }) =>
+			`translateX(calc(${ROOT_ACTION_CELL_WIDTH}px * ${$level} - ${TREE_LINE_WIDTH}px))`};
+
+    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+
+    width: 0;
+    height: 100%;
+
+    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+  }
+`;
+
+export const MoreButtonRow = styled('li', {
+	shouldForwardProp: (prop) =>
+		!['$level', '$isShowConnector', '$gridColumns'].includes(prop.toString()),
+})<{
+	$level: number;
+	$isShowConnector: boolean;
+	$gridColumns: string;
+}>`
+  position: relative;
+
+  display: grid;
+  grid-template-columns: ${({ $gridColumns }) => $gridColumns};
+
+  height: 36px;
+  margin-left: ${({ $level }) => `${$level * ROOT_ACTION_CELL_WIDTH}px`};
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: -${TREE_LINE_WIDTH}px;
+
+    display: ${({ $isShowConnector }) => ($isShowConnector ? 'block' : 'none')};
+
+    width: ${TREE_LINE_WIDTH}px;
+    height: 50%;
+
+    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-left: 1px solid ${({ theme }) => theme.palette.grey[400]};
+    border-radius: 0 0 0 ${({ theme }) => theme.shape.small};
+  }
+`;
+
+export const MoreButton = styled(Button, {
+	shouldForwardProp: (prop) =>
+		!['$moreButtonColumnPosition'].includes(prop.toString()),
+})<{ $moreButtonColumnPosition: number }>`
+  grid-column: ${({ $moreButtonColumnPosition }) => $moreButtonColumnPosition};
+  justify-self: start;
+
+  margin: ${({ theme }) => theme.spacing(0, 2)};
+`;

package/src/components/DataGrid/Row/NestedChildren/useLogic/index.ts

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

package/src/components/DataGrid/Row/NestedChildren/useLogic/useLogic.ts

@@ -0,0 +1,44 @@
+import { type MouseEvent, useContext } from 'react';
+
+import { DataGridContext } from '../../../DataGridContext';
+import { Variant } from '../../../enums';
+import type { CellValue } from '../../../types';
+import type { NestedChildrenProps } from '../NestedChildren';
+
+type UseLogicParams<TData extends Record<string, CellValue>> =
+	NestedChildrenProps<TData>;
+
+export const useLogic = <TData extends Record<string, CellValue>>({
+	rowId,
+	data,
+	level,
+	variant,
+	initialVisibleChildrenCount,
+}: UseLogicParams<TData>) => {
+	const { checkIsMoreOpened, toggleOpenMoreItems } =
+		useContext(DataGridContext);
+
+	const isTreeVariant = Object.is(variant, Variant.Tree);
+	const nextLevel = isTreeVariant ? level + 1 : 0;
+
+	const initialVisibleChildren = data?.slice(0, initialVisibleChildrenCount);
+	const otherChildren = data?.slice(initialVisibleChildrenCount);
+
+	const isShowAllChildren = checkIsMoreOpened(rowId);
+	const isShowMoreButton = Boolean(otherChildren?.length);
+
+	const handleToggleShowAllChildren = (event: MouseEvent<HTMLElement>) => {
+		event.stopPropagation();
+		toggleOpenMoreItems(rowId);
+	};
+
+	return {
+		isShowAllChildren,
+		isShowMoreButton,
+		isShowConnector: isTreeVariant,
+		initialVisibleChildren,
+		otherChildren,
+		nextLevel,
+		handleToggleShowAllChildren,
+	};
+};