@max-ts/components 0.0.2

package/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,307 @@
+import { type ReactNode, useCallback, useContext } from 'react';
+
+import { ConfigContext } from '../ConfigProvider';
+
+import { Body } from './Body';
+import { DataGridContextProvider } from './DataGridContext';
+import { Head } from './Head';
+import { Loader } from './Loader';
+import { NoData, type NoDataProps } from './NoData';
+import {
+	EXPANDED_LEVEL_BY_DEFAULT,
+	INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT,
+	MIN_DISPLAY_ROWS_BY_DEFAULT,
+} from './constants';
+import { Variant } from './enums';
+import { Container, DataGridWrapper, DisabledDataGridWrapper } from './styles';
+import type {
+	CellValue,
+	DataGridColumns,
+	DataGridRow,
+	DataGridRowWithOptions,
+	DataGridSort,
+} from './types';
+import { useLogic } from './useLogic';
+
+export type DataGridProps<
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+> = {
+	/**
+	 * Название класса, применяется к корневому компоненту
+	 */
+	className?: string;
+
+	/**
+	 * Массив данных для таблицы
+	 */
+	rows: DataGridRowWithOptions<TData>[];
+
+	/**
+	 * @example <DataGrid columns={[
+	 *   {
+	 *     field: 'test',
+	 *     label: 'Тестовая колонка',
+	 *     sortable: true,
+	 *   }]} />
+	 * Конфигурация колонок для таблицы
+	 */
+	columns: DataGridColumns<TData>[];
+
+	/**
+	 * Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
+	 */
+	activeRowId?: string;
+
+	/**
+	 * Поле, которое будет использоваться в качестве ключа
+	 */
+	keyId: keyof TData;
+
+	/**
+	 * @example <DataGrid selectedRows={[{name: 'test'}]} />
+	 * Массив выбранных строк
+	 */
+	selectedRows?: Array<TData>;
+
+	/**
+	 * @example <DataGrid sorting={{fieldId: 'test', sort: 'asc'}} />
+	 * Параметры сортируемой колонки
+	 */
+	sorting?: DataGridSort<TSortField>;
+
+	/**
+	 * Компонент кастомного футера (например Pagination)
+	 */
+	footer?: ReactNode;
+
+	/**
+	 *  Используется для отображения placeholder при отсутствии данных в таблице
+	 */
+	noDataPlaceholder?: ReactNode;
+
+	/**
+	 * Максимальная высота для таблицы
+	 */
+	maxHeight?: number;
+
+	/**
+	 * Если true, показывается анимация загрузки
+	 */
+	isLoading?: boolean;
+
+	/**
+	 * Если true, таблица будет заблокирована для взаимодействия
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 * Флаг состояния ошибки
+	 */
+	isError?: boolean;
+
+	/**
+	 * Текст ошибки
+	 */
+	errorMsg?: string;
+
+	/**
+	 * Вариант отображения вложенных элементов
+	 * @default 'tree'
+	 */
+	variant?: `${Variant}`;
+
+	/**
+	 * Опции для отображения древовидных списков
+	 * Применяется если variant="tree"
+	 */
+	tree?: {
+		/**
+		 * Если true, то дерево будет раскрыто по умолчанию
+		 * @default 'false'
+		 */
+		isInitialExpanded?: boolean;
+
+		/**
+		 * Уровень раскрытия дерева по умолчанию, при `isInitialExpanded=true`
+		 * @default '1'
+		 */
+		expandedLevel?: number;
+
+		/**
+		 * Количество отображаемых по умолчанию дочерних элементов
+		 * @default '2'
+		 */
+		initialVisibleChildrenCount?: number;
+	};
+
+	/**
+	 * Опции для отображения вложенных списков
+	 * Применяется если variant="subrows"
+	 */
+	subrows?: {
+		/**
+		 * Уровень раскрытия дочерних элементов по умолчанию, при `isInitialExpanded=true`
+		 * @default '1'
+		 */
+		expandedLevel?: number;
+
+		/**
+		 * Количество отображаемых по умолчанию дочерних элементов
+		 * @default '2'
+		 */
+		initialVisibleChildrenCount?: number;
+
+		/**
+		 * Номер колонки, в которой будет расположена кнопка "Показать все"
+		 * @default 1
+		 */
+		moreButtonColumnPosition?: number;
+
+		/**
+		 * Если false, кнопка разворачивания элементов не показывается
+		 * @default true
+		 */
+		isVisibleCollapseButton?: boolean;
+	};
+
+	/**
+	 * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
+	 * @default '—'
+	 */
+	emptyCellValue?: ReactNode;
+
+	/**
+	 * Используется для отображения переданного кол-ва строк при отсутствии данных
+	 * @default 10
+	 */
+	minDisplayRows?: number;
+
+	/**
+	 * Функция обработки нажатия на кнопку "Повторить запрос"
+	 */
+	onRetry: () => void;
+
+	/**
+	 * Обработчик клика строки таблицы
+	 */
+	onRowClick?: (row: TData) => void;
+
+	/**
+	 * Обработчик выбора строки
+	 */
+	onSelectRow?: (row: TData[]) => void;
+
+	/**
+	 * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
+	 * Обработчик сортировки
+	 */
+	onSort?: (sorting: DataGridSort<TSortField> | undefined) => void;
+	/**
+	 * Используется для кастомизации компонента, использующегося в сценарии отсутствия данных
+	 */
+	noDataOptions?: NoDataProps;
+};
+
+export const DataGrid = <
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+>(
+	props: DataGridProps<TData, TSortField>,
+) => {
+	const {
+		isDataGridDisabled,
+		treeRenderConfig,
+		headProps,
+		bodyProps,
+		loaderProps,
+		renderRows,
+	} = useLogic(props);
+
+	const { emptySymbol } = useContext(ConfigContext);
+
+	const {
+		columns,
+		selectedRows = [],
+		sorting,
+		maxHeight,
+		minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT,
+		errorMsg,
+		variant = Variant.Tree,
+		footer,
+		noDataPlaceholder,
+		isLoading,
+		isError,
+		subrows,
+		keyId,
+		activeRowId,
+		emptyCellValue = emptySymbol,
+		className,
+		onRowClick,
+		onSort,
+		noDataOptions,
+		onRetry,
+	} = props;
+
+	const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } =
+		subrows || {};
+
+	const {
+		isInitialExpanded = false,
+		expandedLevel = EXPANDED_LEVEL_BY_DEFAULT,
+		initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT,
+	} = treeRenderConfig || {};
+
+	const TableContainer = isDataGridDisabled
+		? DisabledDataGridWrapper
+		: DataGridWrapper;
+
+	const renderedPlaceholder = useCallback(() => {
+		if (!isLoading) {
+			return noDataPlaceholder || <NoData {...noDataOptions} />;
+		}
+
+		return null;
+	}, [noDataPlaceholder, noDataOptions, isLoading]);
+
+	return (
+		<DataGridContextProvider>
+			<Container $maxHeight={maxHeight} className={className}>
+				<TableContainer {...{ inert: isDataGridDisabled ? true : undefined }}>
+					<Head<TData, TSortField>
+						{...headProps}
+						sorting={sorting}
+						onSort={onSort}
+					/>
+
+					<Body<TData>
+						{...bodyProps}
+						activeRowId={activeRowId}
+						keyId={keyId}
+						selectedRows={selectedRows}
+						minDisplayRows={minDisplayRows}
+						rows={renderRows}
+						columns={columns}
+						variant={variant}
+						emptyCellValue={emptyCellValue}
+						isInitialExpanded={isInitialExpanded}
+						expandedLevel={expandedLevel}
+						initialVisibleChildrenCount={initialVisibleChildrenCount}
+						moreButtonColumnPosition={moreButtonColumnPosition}
+						isVisibleCollapseButton={isVisibleCollapseButton}
+						isLoading={isLoading}
+						isError={isError}
+						errorMsg={errorMsg}
+						noDataPlaceholder={renderedPlaceholder()}
+						onRowClick={onRowClick}
+						onRetry={onRetry}
+					/>
+				</TableContainer>
+
+				<Loader {...loaderProps} />
+
+				{footer && footer}
+			</Container>
+		</DataGridContextProvider>
+	);
+};

package/src/components/DataGrid/DataGridContext/DataGridContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+export type DataGridContextProps = {
+	checkIsOpened: (key: string) => boolean;
+	checkIsMoreOpened: (key: string) => boolean;
+	toggleOpenItems: (key: string) => void;
+	toggleOpenMoreItems: (key: string) => void;
+};
+
+export const DataGridContext = createContext<DataGridContextProps>({
+	checkIsOpened: () => false,
+	checkIsMoreOpened: () => false,
+	toggleOpenItems: () => {},
+	toggleOpenMoreItems: () => {},
+});

package/src/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.tsx

@@ -0,0 +1,83 @@
+import { type ReactNode, useState } from 'react';
+
+import { DataGridContext } from '../DataGridContext';
+
+type DataGridContextProviderProps = {
+	children: ReactNode;
+};
+
+type KeyType = string;
+
+type RowFlags = {
+	isOpenedItems: true;
+	iOpenedMoreItems: boolean;
+};
+
+const ROW_FLAGS_BY_DEFAULT: RowFlags = {
+	isOpenedItems: true,
+	iOpenedMoreItems: false,
+};
+
+export const DataGridContextProvider = ({
+	children,
+}: DataGridContextProviderProps) => {
+	const [openedItems, setOpenedItems] = useState<Record<KeyType, RowFlags>>({});
+
+	const checkIsOpened = (key: KeyType) => {
+		if (openedItems[key]) {
+			return true;
+		}
+
+		return false;
+	};
+
+	const checkIsMoreOpened = (key: KeyType) => {
+		if (openedItems[key]) {
+			return openedItems[key].iOpenedMoreItems;
+		}
+
+		return false;
+	};
+
+	const toggleOpenItems = (key: KeyType) =>
+		setOpenedItems((currentOpenedItems) => {
+			if (checkIsOpened(key)) {
+				const newOpenedItems = { ...currentOpenedItems };
+
+				delete newOpenedItems[key];
+
+				return newOpenedItems;
+			}
+
+			return { ...currentOpenedItems, [key]: ROW_FLAGS_BY_DEFAULT };
+		});
+
+	const toggleOpenMoreItems = (key: KeyType) =>
+		setOpenedItems((currentOpenedItems) => {
+			if (checkIsMoreOpened(key)) {
+				const newOpenedItems = { ...currentOpenedItems };
+
+				newOpenedItems[key] = ROW_FLAGS_BY_DEFAULT;
+
+				return newOpenedItems;
+			}
+
+			return {
+				...currentOpenedItems,
+				[key]: { ...ROW_FLAGS_BY_DEFAULT, iOpenedMoreItems: true },
+			};
+		});
+
+	return (
+		<DataGridContext.Provider
+			value={{
+				checkIsOpened,
+				checkIsMoreOpened,
+				toggleOpenItems,
+				toggleOpenMoreItems,
+			}}
+		>
+			{children}
+		</DataGridContext.Provider>
+	);
+};

package/src/components/DataGrid/DataGridContext/DataGridProvider/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './DataGridContext';
+
+export * from './DataGridProvider';

package/src/components/DataGrid/Head/Head.tsx

@@ -0,0 +1,110 @@
+import { type ChangeEvent, useMemo } from 'react';
+
+import { Checkbox } from '../../Checkbox';
+import { HeadCell } from '../HeadCell';
+import type {
+	CellValue,
+	DataGridColumns,
+	DataGridRow,
+	DataGridSort,
+} from '../types';
+
+import { CheckboxCell, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type HeadProps<
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+> = {
+	/**
+	 * Конфигурация колонок для таблицы
+	 */
+	columns: DataGridColumns<TData>[];
+
+	/**
+	 * Конфигурация ширины колонок
+	 */
+	gridColumns: string;
+
+	/**
+	 * Если true, то будет отображаться чекбокс для выбора элемента
+	 */
+	isSelectable: boolean;
+
+	/**
+	 * Параметры сортируемой колонки
+	 */
+	sorting?: DataGridSort<TSortField>;
+
+	/**
+	 * Общее количество строк, доступных для выбора
+	 */
+	rowsCount: number;
+
+	/**
+	 * Количество строк, которые не выбраны
+	 */
+	uncheckedRowsCount: number;
+
+	/**
+	 * Обработчик выбора всех строк
+	 */
+	onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
+
+	/**
+	 * Обработчик сортировки
+	 */
+	onSort?: (sorting: DataGridSort<TSortField> | undefined) => void;
+};
+
+export const Head = <
+	TData extends Record<string, CellValue>,
+	TSortField extends keyof TData,
+>(
+	props: HeadProps<TData, TSortField>,
+) => {
+	const { checkboxProps, handleSort } = useLogic(props);
+
+	const { columns, gridColumns, isSelectable, sorting, onSelectAllRows } =
+		props;
+
+	const renderColumns = useMemo(() => {
+		return columns.map(({ field, label, sortable, align }, index) => {
+			const isFirstCell = !index;
+
+			const startAdornmentRender = () => {
+				if (!isFirstCell || !isSelectable) {
+					return null;
+				}
+
+				return (
+					<CheckboxCell>
+						<Checkbox {...checkboxProps} onChange={onSelectAllRows} />
+					</CheckboxCell>
+				);
+			};
+
+			return (
+				<HeadCell<TData, TSortField>
+					key={label}
+					sorting={sorting}
+					field={field}
+					label={label}
+					isSortable={sortable}
+					align={align}
+					startAdornment={startAdornmentRender()}
+					onSort={handleSort}
+				/>
+			);
+		});
+	}, [
+		columns,
+		sorting,
+		isSelectable,
+		checkboxProps,
+		onSelectAllRows,
+		handleSort,
+	]);
+
+	return <Wrapper $gridColumns={gridColumns}>{renderColumns}</Wrapper>;
+};

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

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

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

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import { ROOT_ACTION_CELL_WIDTH } from '../constants';
+
+export const Wrapper = styled('header', {
+	shouldForwardProp: (prop) => !['$gridColumns'].includes(prop.toString()),
+})<{
+	$gridColumns: string;
+}>`
+  display: grid;
+  grid-template-columns: ${({ $gridColumns }) => $gridColumns};
+
+  border-bottom: 2px solid ${({ theme }) => theme.palette.divider};
+`;
+
+export const CheckboxCell = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${ROOT_ACTION_CELL_WIDTH}px;
+`;

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

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

package/src/components/DataGrid/Head/useLogic/useLogic.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useMemo } from 'react';
+
+import { SortStates } from '../../enums';
+import type { CellValue, DataGridRow } from '../../types';
+import type { HeadProps } from '../Head';
+
+type UseLogicParams<
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+> = HeadProps<TData, TSortField>;
+
+export const useLogic = <
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+>({
+	rowsCount,
+	sorting,
+	uncheckedRowsCount,
+	onSort,
+}: UseLogicParams<TData, TSortField>) => {
+	const isChecked = useMemo(
+		() => !uncheckedRowsCount && rowsCount > 0,
+		[uncheckedRowsCount, rowsCount],
+	);
+
+	const isIndeterminate = useMemo(
+		() => uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount,
+		[uncheckedRowsCount, rowsCount],
+	);
+
+	const isDisabled = !rowsCount;
+
+	const handleSort = useCallback(
+		(field: TSortField) => {
+			if (!onSort) {
+				return;
+			}
+
+			const isCurrentField = sorting?.fieldId === field;
+
+			// если для выбранного столбца текущая сортировка ASC - меняем на DESC
+			if (isCurrentField && sorting?.sort === SortStates.ASC) {
+				return onSort({ fieldId: field, sort: SortStates.DESC });
+			}
+
+			// если для выбранного столбца текущая сортировка DESC - убираем сортировку
+			if (isCurrentField && sorting?.sort === SortStates.DESC) {
+				return onSort(undefined);
+			}
+
+			// если для выбранного столбца нет сортировки - добавляем сортировку ASC
+			onSort({ fieldId: field, sort: SortStates.ASC });
+		},
+		[sorting, onSort],
+	);
+
+	return {
+		handleSort,
+		checkboxProps: {
+			checked: isChecked,
+			disabled: isDisabled,
+			indeterminate: isIndeterminate,
+		},
+	};
+};

package/src/components/DataGrid/HeadCell/HeadCell.tsx

@@ -0,0 +1,68 @@
+import { type ReactNode, useMemo } from 'react';
+
+import { SortStates } from '../enums';
+import type { AlignVariant, DataGridRow, DataGridSort } from '../types';
+
+import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
+import { StyledTypography, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type HeadCellProps<
+	TData = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+> = {
+	onSort: (field: TSortField) => void;
+	sorting?: DataGridSort<TSortField>;
+	label?: string;
+
+	isSortable?: boolean;
+
+	/**
+	 * Выравнивание содержимого ячейки по горизонтали
+	 */
+	align?: AlignVariant;
+
+	field?: keyof TData;
+
+	/**
+	 * Дополнительное содержимое ячейки, которое будет распложено справа
+	 */
+	startAdornment?: ReactNode;
+};
+
+export const HeadCell = <TData, TSortField extends keyof TData>(
+	props: HeadCellProps<TData, TSortField>,
+) => {
+	const { wrapperProps } = useLogic(props);
+
+	const { startAdornment, field, isSortable, align, label, sorting } = props;
+
+	const sortIcon = useMemo(() => {
+		if (!isSortable) {
+			return null;
+		}
+
+		if (sorting?.fieldId !== field) {
+			return <ChevronsUpDown />;
+		}
+
+		switch (sorting?.sort) {
+			case SortStates.ASC:
+				return <ChevronUp color='primary' />;
+			case SortStates.DESC:
+				return <ChevronDown color='primary' />;
+			default:
+				return <ChevronsUpDown />;
+		}
+	}, [sorting, isSortable, field]);
+
+	return (
+		<Wrapper $align={align} $isSortable={isSortable} {...wrapperProps}>
+			{startAdornment && startAdornment}
+			<StyledTypography variant='pointer'>
+				{label}
+				{sortIcon}
+			</StyledTypography>
+		</Wrapper>
+	);
+};

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

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