@max-ts/components 0.0.2

package/src/components/DataGrid/Row/useLogic/utils/mergeColumnsOptions/mergeColumnsOptions.ts

@@ -0,0 +1,34 @@
+import type {
+	CellValue,
+	DataGridColumns,
+	DataGridRowOptionColumns,
+} from '../../../../types';
+import { getColumnsMap } from '../getColumnsMap';
+
+export const mergeColumnsOptions = <TData extends Record<string, CellValue>>(
+	columns: DataGridColumns<TData>[],
+	childrenColumns: DataGridRowOptionColumns<TData>[] | undefined,
+) => {
+	if (!childrenColumns) {
+		return columns;
+	}
+
+	const childrenColumnsMap = getColumnsMap(childrenColumns);
+
+	if (!Object.keys(childrenColumnsMap).length) {
+		return columns;
+	}
+
+	return columns.map((column) => {
+		// biome-ignore lint/suspicious/noPrototypeBuiltins: <explanation>
+		if (!column.hasOwnProperty('field')) {
+			return column;
+		}
+
+		return {
+			...column,
+			// @ts-ignore
+			...(childrenColumnsMap[column.field] || {}),
+		};
+	});
+};

package/src/components/DataGrid/Row/utils/checkIsDisabled/checkIsDisabled.ts

@@ -0,0 +1,15 @@
+export const checkIsDisabled = (
+	isDisabled: boolean | undefined,
+	availableCellsByIndex: Array<number> | undefined,
+	index: number,
+) => {
+	if (!isDisabled) {
+		return false;
+	}
+
+	if (!availableCellsByIndex) {
+		return true;
+	}
+
+	return !availableCellsByIndex.includes(index);
+};

package/src/components/DataGrid/Row/utils/checkIsDisabled/index.ts

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

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

@@ -0,0 +1 @@
+export { checkIsDisabled } from './checkIsDisabled';

package/src/components/DataGrid/constants.ts

@@ -0,0 +1,11 @@
+export const MIN_ROW_HEIGHT = 44;
+
+export const ROOT_ACTION_CELL_WIDTH = 32;
+
+export const TREE_LINE_WIDTH = ROOT_ACTION_CELL_WIDTH / 2;
+
+export const MIN_DISPLAY_ROWS_BY_DEFAULT = 10;
+
+export const EXPANDED_LEVEL_BY_DEFAULT = 1;
+
+export const INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT = 2;

package/src/components/DataGrid/enums.ts

@@ -0,0 +1,9 @@
+export enum SortStates {
+	ASC = 'asc',
+	DESC = 'desc',
+}
+
+export enum Variant {
+	Tree = 'tree',
+	Subrows = 'subrows',
+}

package/src/components/DataGrid/faker.ts

@@ -0,0 +1,116 @@
+import { faker } from '@faker-js/faker';
+
+import type {
+	CellValue,
+	DataGridColumns,
+	DataGridRowOptionColumns,
+	DataGridRowOptions,
+	DataGridRowWithOptions,
+} from './types';
+
+type DataType = {
+	id: string;
+	documentName?: string;
+	recipient?: string;
+	createDate: string;
+	actions?: object;
+};
+
+type TreeDataType = {
+	id: string;
+	documentName: string;
+	recipient: string;
+	createDate: string;
+	actions?: object;
+};
+
+const RECIPIENTS = [
+	'ИП Иванов О.В.',
+	'ООО "Новая организация"',
+	'ООО "Волшебные документы"',
+];
+
+export const makeRandomDate = () => {
+	const randomDate = faker.date.recent();
+
+	return randomDate.toISOString();
+};
+
+export const makeColumns = <T extends DataType>(
+	columnsTemplate: DataGridColumns<T>[],
+	mergedColumns: DataGridColumns<T>[] = [],
+): DataGridColumns<T>[] => {
+	const mergedColumnsMap = mergedColumns.reduce(
+		(acc, { field, ...columnsOptions }) => {
+			if (field) {
+				return {
+					// biome-ignore lint/performance/noAccumulatingSpread: <explanation>
+					...acc,
+					[field]: columnsOptions,
+				};
+			}
+
+			return acc;
+		},
+		{},
+	);
+
+	return columnsTemplate.map((column) => ({
+		...column,
+		// @ts-ignore
+		...(mergedColumnsMap[column?.field] || {}),
+	}));
+};
+
+export const makeDataList = <TData extends Record<string, CellValue>>(
+	dataObjTemplate: TData,
+	options?: DataGridRowOptions<TData>,
+): DataGridRowWithOptions<TData>[] => {
+	const DATA_ARRAY_LENGTH = 16;
+
+	return Array.from({ length: DATA_ARRAY_LENGTH })
+		.fill(dataObjTemplate)
+		.map((_, i) => ({
+			id: String(i + 1),
+			documentName: `Договор №${i + 1}`,
+			recipient: RECIPIENTS[Math.floor(Math.random() * RECIPIENTS.length)],
+			createDate: makeRandomDate(),
+			options: Math.random() < 0.5 ? options : {},
+		})) as unknown as DataGridRowWithOptions<TData>[];
+};
+
+export const makeDataListWithTree = (
+	length = 10,
+	options?: {
+		isNotSelectable?: boolean;
+		childrenCount?: number;
+		childrenColumns?: DataGridRowOptionColumns<TreeDataType>[];
+	},
+): TreeDataType[] => {
+	const { isNotSelectable, childrenCount = 3, childrenColumns } = options || {};
+
+	return Array.from({ length }).map((_, i) => {
+		const recipient = RECIPIENTS[Math.floor(Math.random() * RECIPIENTS.length)];
+		const createDate = makeRandomDate();
+		const isTree = Math.random() > 0.5;
+
+		return {
+			id: faker.string.uuid(),
+			documentName: isTree ? 'Пакет документов' : `Договор №${i + 1}`,
+			recipient,
+			createDate,
+			options: {
+				isNotSelectable,
+				childrenColumns,
+			},
+			children: isTree
+				? Array.from({ length: childrenCount }).map((__, childrenIndex) => ({
+						id: faker.string.uuid(),
+						documentName: `Договор №${i + Number(`1${childrenIndex}0`)}`,
+						recipient,
+						createDate,
+					}))
+				: undefined,
+		};
+	});
+};

package/src/components/DataGrid/index.ts

@@ -0,0 +1,11 @@
+export * from './DataGrid';
+
+export * from './Head';
+
+export * from './Row';
+
+export * from './constants';
+
+export * from './enums';
+
+export * from './types';

package/src/components/DataGrid/styles.ts

@@ -0,0 +1,31 @@
+import { styled } from '@mui/material';
+
+export const Container = styled('div', {
+	shouldForwardProp: (prop) => prop !== '$maxHeight',
+})<{ $maxHeight?: number }>`
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+  max-height: ${({ $maxHeight }) =>
+		$maxHeight ? `${$maxHeight}px` : 'initial'};
+`;
+
+export const DataGridWrapper = styled('div')`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+`;
+
+export const DisabledDataGridWrapper = styled(DataGridWrapper)`
+  pointer-events: none;
+
+  background: ${({ theme }) => theme.palette.background.element};
+  mix-blend-mode: luminosity;
+`;

package/src/components/DataGrid/types.ts

@@ -0,0 +1,118 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import type { MainActionKind, SecondaryActionKind } from '../ActionCell/types';
+
+import type { SortStates } from './enums';
+
+export type AlignVariant = 'left' | 'center' | 'right';
+
+export type SortState = `${SortStates}`;
+
+export type RenderCell<Data> = (params: Data) => ReactNode;
+
+export type CellValue = unknown;
+
+export type DataGridSort<TSortField> = {
+	/**
+	 * @example {fieldId: 'test'}
+	 * Значение поля сортируемой колонки
+	 */
+	fieldId: TSortField;
+
+	/**
+	 * @example {sort: 'asc'}
+	 * Значение возрастающий или убывающий сортировки (asc | desc)
+	 */
+	sort: SortState;
+};
+
+export type DataGridColumns<TData extends Record<string, CellValue>> = {
+	/**
+	 * @example {field: 'test'}
+	 * Значение ключа поля данных для колонки
+	 */
+	field?: keyof TData;
+
+	/**
+	 * Название колонки таблицы
+	 */
+	label?: string;
+
+	/**
+	 * Если true, будет включена сортировка колонки
+	 */
+	sortable?: boolean;
+
+	pointer?: boolean;
+
+	/**
+	 * @example {renderCell: (row) => <div>Hello Cell</div>'}
+	 * Кастомное отображение ячеек для колонки
+	 */
+	renderCell?: RenderCell<TData>;
+
+	/**
+	 * @example {format: (row) => new Date(row.createDate).toLocaleDateString()}
+	 * Функция для кастомного форматирования данных ячеек для колонки
+	 */
+	format?: (data: TData) => CellValue;
+
+	/**
+	 * CSS свойство размещения контента в ячейке
+	 */
+	align?: AlignVariant;
+
+	/**
+	 * @example {width: '100%'}
+	 * Ширина ячейка. Допустимые единицы: px, %, fr
+	 */
+	width?: CSSProperties['width'];
+};
+
+export type DataGridRowOptionColumns<TData extends Record<string, CellValue>> =
+	{
+		/**
+		 * Значение ключа поля данных для колонки
+		 */
+		field: keyof TData;
+
+		/**
+		 * Кастомное отображение ячеек для колонки
+		 */
+		renderCell?: RenderCell<TData>;
+	};
+
+export type DataGridRowOptions<TData extends Record<string, CellValue>> = {
+	/**
+	 * Если true, строка будет недоступна для взаимодействия
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 * Если true, последняя ячейка не будет блокироваться при `isDisabled=true`
+	 * @default 'true'
+	 */
+	isDisabledLastCell?: boolean;
+
+	/**
+	 * Если true, строка не будет доступна для выбора
+	 */
+	isNotSelectable?: boolean;
+
+	/**
+	 * Причина блокировки строки
+	 */
+	disabledReason?: string;
+
+	/**
+	 * Настройка отображения колонок дочерних элементов
+	 */
+	childrenColumns?: DataGridRowOptionColumns<TData>[];
+};
+
+export type DataGridRow = Record<string, CellValue>;
+
+export type DataGridRowWithOptions<TData extends DataGridRow> = TData & {
+	options?: DataGridRowOptions<TData>;
+	children?: DataGridRowWithOptions<TData>[];
+};

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

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

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

@@ -0,0 +1,139 @@
+import {
+	type ChangeEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+} from 'react';
+
+import type { DataGridProps } from '../DataGrid';
+import { Variant } from '../enums';
+import type { CellValue, DataGridRow } from '../types';
+
+import { prop, uniqueBy } from 'remeda';
+import { getGridTemplateColumns } from './utils';
+
+type UseLogicParams<
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+> = DataGridProps<TData, TSortField>;
+
+export const useLogic = <
+	TData extends Record<string, CellValue> = DataGridRow,
+	TSortField extends keyof TData = keyof TData,
+>({
+	keyId,
+	columns,
+	rows = [],
+	variant,
+	tree,
+	subrows,
+	selectedRows = [],
+	isLoading,
+	isDisabled,
+	onSelectRow,
+}: UseLogicParams<TData, TSortField>) => {
+	const isNoData = Boolean(rows?.length);
+	const isSelectable = Boolean(onSelectRow);
+	const isDataGridDisabled = isLoading || isDisabled;
+
+	const treeRenderConfig = Object.is(variant, Variant.Subrows)
+		? { ...subrows, isInitialExpanded: true }
+		: tree;
+
+	const availableRows = rows.filter(
+		(row) => !(row.options?.isDisabled || row.options?.isNotSelectable),
+	);
+
+	const prevRowsRef = useRef<TData[]>([]);
+
+	useEffect(() => {
+		if (!isLoading) {
+			prevRowsRef.current = rows;
+		}
+	}, [rows, isLoading]);
+
+	const gridColumns = getGridTemplateColumns(columns);
+
+	const uncheckedRowsCount = useMemo(() => {
+		return availableRows.filter(
+			(row) =>
+				!selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId]),
+		).length;
+	}, [availableRows, selectedRows, keyId]);
+
+	const processedColumns = useCallback(() => {
+		if (rows.length <= 1) {
+			return columns.map((column) => ({ ...column, sortable: false }));
+		}
+
+		return columns;
+	}, [columns, rows]);
+
+	const renderRows = isLoading ? prevRowsRef.current : rows;
+
+	const handleSelectAllRows = (event: ChangeEvent<HTMLInputElement>): void => {
+		if (!onSelectRow) {
+			return;
+		}
+
+		if (event.target.checked) {
+			const mergedSelectedRows = uniqueBy(
+				[...selectedRows, ...availableRows],
+				prop(keyId),
+			);
+
+			return onSelectRow(mergedSelectedRows);
+		}
+
+		const filteredRows = selectedRows.filter(
+			(selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]),
+		);
+
+		onSelectRow(filteredRows);
+	};
+
+	const handleSelectRow = useCallback(
+		(row: TData) =>
+			(event: ChangeEvent<HTMLInputElement>): void => {
+				if (!onSelectRow) {
+					return;
+				}
+
+				if (event.target.checked) {
+					return onSelectRow([...selectedRows, row]);
+				}
+
+				onSelectRow(
+					selectedRows.filter(
+						(selectedRow) => selectedRow[keyId] !== row[keyId],
+					),
+				);
+			},
+		[selectedRows, onSelectRow, keyId],
+	);
+
+	return {
+		isDataGridDisabled,
+		treeRenderConfig,
+		renderRows,
+		headProps: {
+			rowsCount: availableRows.length,
+			uncheckedRowsCount,
+			gridColumns,
+			isSelectable,
+			columns: processedColumns(),
+			onSelectAllRows: handleSelectAllRows,
+		},
+		bodyProps: {
+			gridColumns,
+			isSelectable,
+			onSelectRow: handleSelectRow,
+		},
+		loaderProps: {
+			isLoading: isNoData && isLoading,
+			isVisibleDivider: Boolean(rows.length),
+			isDisabled,
+		},
+	};
+};

package/src/components/DataGrid/useLogic/utils/getGridTemplateColumns/getGridTemplateColumns.ts

@@ -0,0 +1,7 @@
+export const getGridTemplateColumns = (
+	columns: Array<{ width?: string | number }>,
+) => {
+	const columnsWidth = columns.map(({ width }) => width || '1fr');
+
+	return columnsWidth.join(' ');
+};

package/src/components/DataGrid/useLogic/utils/getGridTemplateColumns/index.ts

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

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

@@ -0,0 +1 @@
+export { getGridTemplateColumns } from './getGridTemplateColumns';

package/src/components/DataGrid/utils/alignToJustifyContent/alignToJustifyContent.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+
+import type { AlignVariant } from '../../types';
+
+import {
+	ALIGN_TO_JUSTIFY_CONTENT_MAP,
+	DEFAULT_JUSTIFY_CONTENT,
+} from './constants';
+
+type JustifyContentVariant = CSSProperties['justifyContent'];
+
+export const alignToJustifyContent = (
+	align: AlignVariant | undefined,
+): JustifyContentVariant => {
+	if (!align) {
+		return DEFAULT_JUSTIFY_CONTENT;
+	}
+
+	return ALIGN_TO_JUSTIFY_CONTENT_MAP[align] || DEFAULT_JUSTIFY_CONTENT;
+};

package/src/components/DataGrid/utils/alignToJustifyContent/constants.ts

@@ -0,0 +1,7 @@
+export const DEFAULT_JUSTIFY_CONTENT = 'start';
+
+export const ALIGN_TO_JUSTIFY_CONTENT_MAP = {
+	left: 'start',
+	center: 'center',
+	right: 'end',
+} as const;

package/src/components/DataGrid/utils/alignToJustifyContent/index.ts

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

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

@@ -0,0 +1 @@
+export { alignToJustifyContent } from './alignToJustifyContent';