@max-ts/components 0.0.2

package/src/components/DataGridActionCell/types.ts

@@ -0,0 +1,123 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+
+import type { ConfirmActionProps } from '../ConfirmAction';
+import type { IconButtonProps } from '../IconButton';
+import type { MenuItemProps } from '../MenuItem';
+
+export type NestedAction<TAction> = MenuItemProps & {
+	/**
+	 * Название действия
+	 */
+	name: string;
+
+	/**
+	 * Обработчик действия
+	 */
+	onClick?: (row: TAction) => void;
+};
+
+export type SingleAction<TAction> = {
+	/**
+	 * Название действия
+	 */
+	name: string;
+
+	/**
+	 * Иконка действия
+	 */
+	icon?: ReactNode;
+
+	/**
+	 * Флаг показа выпадающего списка при клике
+	 */
+	nested?: false;
+
+	/**
+	 * Если `true`, при клике на кнопку будет вызываться подтверждение действия
+	 */
+	needConfirm?: boolean;
+
+	/**
+	 * Поясняющий текст для подтверждения действия
+	 */
+	confirmText?: ConfirmActionProps['text'];
+
+	/**
+	 * Параметры кнопки подтверждения действия
+	 */
+	confirmButtonProps?: ConfirmActionProps['confirmButtonProps'];
+
+	/**
+	 * Если true, блокирует взаимодействие с actions
+	 */
+	isBlockingOperation?: boolean;
+
+	/**
+	 * Причина блокировки действия
+	 */
+	disabledReason?: string;
+
+	/**
+	 * Причина блокировки строки во время загрузки
+	 */
+	loadingNote?: string;
+
+	/**
+	 * Обработчик действия
+	 */
+	onClick?: (row: TAction) => void;
+};
+
+export type MultipleAction<TAction> = MenuItemProps & {
+	/**
+	 * Иконка действия
+	 */
+	icon: ReactNode;
+	/**
+	 * Список действий для выпадающего списка
+	 */
+	actions: Array<NestedAction<TAction>>;
+	/**
+	 * Флаг показа выпадающего списка при клике
+	 */
+	nested: true;
+	/**
+	 * Название действия
+	 */
+	name: string;
+	/**
+	 * Причина блокировки строки во время загрузки
+	 */
+	loadingNote?: string;
+	/**
+	 * Если true, блокирует взаимодействие с actions
+	 */
+	isBlockingOperation?: boolean;
+	/**
+	 * Если true, происходит загрузка
+	 */
+	loading?: boolean;
+};
+
+export type ActionCellHandler<TAction> = (
+	onClick: SingleAction<TAction>['onClick'] | NestedAction<TAction>['onClick'],
+) =>
+	| MouseEventHandler<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>
+	| undefined;
+
+export type MainActionKind<TAction> =
+	| (IconButtonProps<'button'> & SingleAction<TAction>)
+	| MultipleAction<TAction>;
+
+export type SecondaryActionKind<TAction> = MenuItemProps &
+	SingleAction<TAction> & {
+		/**
+		 * Причина блокировки действия
+		 */
+		disabledReason?: string;
+
+		/**
+		 * Если true, происходит загрузка
+		 */
+		loading?: boolean;
+	};

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

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

package/src/components/DataGridActionCell/useLogic/useLogic.ts

@@ -0,0 +1,53 @@
+import {
+	type MouseEventHandler,
+	useCallback,
+	useContext,
+	useEffect,
+} from 'react';
+
+import { RowContext } from '../../DataGrid';
+import type { DataGridActionCellProps } from '../DataGridActionCell';
+import type { NestedAction, SingleAction } from '../types';
+
+type UseLogicParams<TRowData> = DataGridActionCellProps<TRowData>;
+
+export const useLogic = <TRowData>({
+	row,
+	actions,
+}: UseLogicParams<TRowData>) => {
+	const { main, secondary } = actions;
+
+	const { addDisabledRow, removeDisabledRow } = useContext(RowContext);
+
+	const blockingAction = [...main, ...(secondary || [])].find(
+		(action) => action.isBlockingOperation && action.loading,
+	);
+
+	const isDisabledAction = Boolean(blockingAction);
+
+	useEffect(() => {
+		if (blockingAction) {
+			return addDisabledRow(blockingAction?.loadingNote);
+		}
+
+		removeDisabledRow();
+	}, [blockingAction]);
+
+	const handleActionClick = useCallback(
+		(
+			onClick:
+				| SingleAction<TRowData>['onClick']
+				| NestedAction<TRowData>['onClick'],
+		) =>
+			() => {
+				onClick?.(row);
+			},
+		[row],
+	);
+
+	const handleWrapperClick: MouseEventHandler<HTMLDivElement> = (event) => {
+		event.stopPropagation();
+	};
+
+	return { isDisabledAction, handleActionClick, handleWrapperClick };
+};

package/src/components/DataGridOld/Body/Body.tsx

@@ -0,0 +1,56 @@
+import { Row } from '../Row';
+import { State } from '../State';
+import type { DataGridColumn } from '../types';
+import { StyledBody } from './styles';
+
+export type BodyProps<TRow> = {
+	noDataText?: string;
+	noDataImgSrc?: string;
+	isLoading?: boolean;
+	isEmpty?: boolean;
+	columns: DataGridColumn<TRow>[];
+	rows: TRow[];
+	rowHeight: number;
+	keyId: keyof TRow;
+	onRowClick?: (row: TRow) => void;
+};
+
+export function Body<TRow>({
+	isEmpty,
+	isLoading,
+	noDataText,
+	noDataImgSrc,
+	columns,
+	rows,
+	rowHeight,
+	keyId,
+	onRowClick,
+}: BodyProps<TRow>) {
+	return isEmpty || isLoading ? (
+		<StyledBody>
+			<State
+				noDataText={noDataText}
+				isEmpty={isEmpty}
+				isLoading={isLoading}
+				noDataImgSrc={noDataImgSrc}
+			/>
+		</StyledBody>
+	) : (
+		<StyledBody>
+			{rows.map((row, index) => {
+				const rowId = String(row[keyId]);
+				return (
+					<Row
+						key={row[keyId] as string}
+						row={row}
+						rowId={rowId}
+						rowHeight={rowHeight}
+						columns={columns}
+						onRowClick={onRowClick}
+						rowIndex={index}
+					/>
+				);
+			})}
+		</StyledBody>
+	);
+}

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

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

package/src/components/DataGridOld/Body/styles.ts

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material';
+
+export const StyledBody = styled('ul', {
+	label: 'Body',
+})`
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  list-style-type: none;
+`;

package/src/components/DataGridOld/Cell/Cell.tsx

@@ -0,0 +1,41 @@
+import type { DataGridColumn } from '../types';
+
+import { StyledCell } from './styles';
+
+export type CellProps<TRow> = {
+	row: TRow;
+	column: DataGridColumn<TRow>;
+	rowIndex: number;
+};
+
+export function Cell<TRow>({ row, column, rowIndex }: CellProps<TRow>) {
+	const { align, cellColor, isDisabled } = column;
+	const Content = () => {
+		if (column.component) {
+			return column.component(row, rowIndex);
+		}
+		if (column.getCellValue) {
+			return column.getCellValue(row) || '—';
+		}
+		if (column.key) {
+			return `${row[column.key] || '—'}`;
+		}
+		return '—';
+	};
+
+	const isComponent = Boolean(column.component);
+	return (
+		<StyledCell
+			onClick={(e) => isComponent && e.stopPropagation()}
+			onKeyDown={(e) => isComponent && e.stopPropagation()}
+			style={{
+				backgroundColor: cellColor?.(row),
+			}}
+			$align={align}
+			$disabled={isDisabled}
+			className={column.cellClassName?.(row)}
+		>
+			<Content />
+		</StyledCell>
+	);
+}

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

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

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

@@ -0,0 +1,25 @@
+import { styled } from '@mui/material';
+
+export const StyledCell = styled('div', {
+	label: 'Cell',
+})<{ $align?: 'left' | 'center' | 'right' | 'justify'; $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 4px 8px;
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+  justify-content: ${({ $align }) => {
+		switch ($align) {
+			case 'left':
+				return 'flex-start';
+			case 'center':
+				return 'center';
+			case 'right':
+				return 'flex-end';
+			case 'justify':
+				return 'space-between';
+			default:
+				return 'flex-start';
+		}
+	}};
+`;

package/src/components/DataGridOld/DataGridOld.tsx

@@ -0,0 +1,65 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Body } from './Body';
+import { Head } from './Head';
+import { ROW_HEIGHT } from './constants';
+import { Container, Wrapper } from './styles';
+import type { DataGridColumn } from './types';
+
+export type DataGridProps<TRow> = {
+	rows: TRow[];
+	columns: DataGridColumn<TRow>[];
+	className?: string;
+	height?: CSSProperties['height'];
+	noDataText?: string;
+	noDataImgSrc?: string;
+	rowHeight?: number;
+	keyId: keyof TRow;
+	isLoading?: boolean;
+	isDisabled?: boolean;
+	isEmpty?: boolean;
+	onSelectRow?: (row: TRow[]) => void;
+	onRowClick?: (row: TRow) => void;
+	minDisplayRows?: number;
+	footer?: ReactNode;
+};
+
+export function DataGrid<TRow>({
+	rows,
+	columns,
+	height = '100%',
+	className,
+	noDataText,
+	rowHeight = ROW_HEIGHT,
+	keyId,
+	onRowClick,
+	isLoading,
+	isDisabled,
+	isEmpty,
+	noDataImgSrc = '/img/empty.png',
+	footer,
+}: DataGridProps<TRow>) {
+	const isEmptyState = isEmpty ?? rows.length === 0;
+	const isDataGridDisabled = isLoading || isDisabled;
+	return (
+		<Container $height={height} className={className}>
+			<Wrapper
+				style={{ gridTemplateRows: `${rowHeight}px 1fr` }}
+				$disabled={isDataGridDisabled}
+			>
+				<Head columns={columns} height={rowHeight} />
+				<Body
+					rows={rows}
+					columns={columns}
+					rowHeight={rowHeight}
+					keyId={keyId}
+					onRowClick={onRowClick}
+					noDataText={noDataText}
+					noDataImgSrc={noDataImgSrc}
+					isEmpty={isEmptyState}
+					isLoading={isLoading}
+				/>
+			</Wrapper>
+			{footer}
+		</Container>
+	);
+}

package/src/components/DataGridOld/Head/Head.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { HeadCell } from '../HeadCell';
+import type { DataGridColumn } from '../types';
+import { StyledHead } from './styles';
+
+type DataGridHeaderProps<TRow> = {
+	columns: DataGridColumn<TRow>[];
+	height: number;
+};
+
+export function Head<TRow>({ columns, height }: DataGridHeaderProps<TRow>) {
+	const gridTemplateColumns = useMemo(
+		() =>
+			columns
+				.map((column) => {
+					if (typeof column.width === 'number') {
+						return `${column.width}px`;
+					}
+					return column.width || '1fr';
+				})
+				.join(' '),
+		[columns],
+	);
+	return (
+		<StyledHead $height={height} $gridTemplateColumns={gridTemplateColumns}>
+			{columns.map((col) => (
+				<HeadCell key={col.title} column={col} />
+			))}
+		</StyledHead>
+	);
+}

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

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

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

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material';
+
+export const StyledHead = styled('header', {
+	label: 'Head',
+})<{ $height: number; $gridTemplateColumns: string }>`
+  display: grid;
+  height: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  grid-template-columns: ${({ $gridTemplateColumns }) => $gridTemplateColumns};
+  height: ${({ $height }) => $height}px;
+`;

package/src/components/DataGridOld/HeadCell/HeadCell.tsx

@@ -0,0 +1,14 @@
+import type { DataGridColumn } from '../types';
+import { StyledHeadCell } from './styles';
+
+export type HeadCellProps<T> = {
+	column: DataGridColumn<T>;
+};
+
+export function HeadCell<TData>({ column }: HeadCellProps<TData>) {
+	return (
+		<StyledHeadCell $align={column.align}>
+			{column.headComponent ? column.headComponent : <p>{column.title}</p>}
+		</StyledHeadCell>
+	);
+}

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

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

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

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material';
+
+export const StyledHeadCell = styled('div', {
+	label: 'HeadCell',
+})<{ $align?: 'left' | 'center' | 'right' | 'justify' }>`
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.palette.grey[700]};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  p {
+    margin: 0;
+  }
+  justify-content: ${({ $align }) => {
+		switch ($align) {
+			case 'left':
+				return 'flex-start';
+			case 'center':
+				return 'center';
+			case 'right':
+				return 'flex-end';
+			case 'justify':
+				return 'space-between';
+			default:
+				return 'flex-start';
+		}
+	}};
+`;

package/src/components/DataGridOld/Row/Row.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useMemo } from 'react';
+import { Cell } from '../Cell';
+import type { DataGridColumn } from '../types';
+import { StyledRow } from './styles';
+
+type RowProps<TRow> = {
+	row: TRow;
+	columns: DataGridColumn<TRow>[];
+	rowIndex: number;
+	rowId: string;
+	rowHeight: number;
+	onRowClick?: (row: TRow) => void;
+};
+export function Row<TRow>({
+	row,
+	rowHeight,
+	onRowClick,
+	columns,
+	rowIndex,
+	rowId,
+}: RowProps<TRow>) {
+	const handleSelect = useCallback(() => {
+		onRowClick?.(row);
+	}, [onRowClick, row]);
+
+	const gridTemplateColumns = useMemo(() => {
+		const columnWidths = columns.map((column) => {
+			if (typeof column.width === 'number') {
+				return `${column.width}px`;
+			}
+			return column.width || '1fr';
+		});
+
+		return columnWidths.join(' ');
+	}, [columns]);
+
+	return (
+		<StyledRow
+			onClick={handleSelect}
+			onKeyDown={handleSelect}
+			$gridTemplateColumns={gridTemplateColumns}
+			$height={rowHeight}
+			$selectable={Boolean(onRowClick)}
+		>
+			{columns.map((column, index) => {
+				const cellId = `${rowId}-${index}`;
+				return (
+					<Cell row={row} rowIndex={rowIndex} column={column} key={cellId} />
+				);
+			})}
+		</StyledRow>
+	);
+}

package/src/components/DataGridOld/Row/index.ts

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

package/src/components/DataGridOld/Row/styles.ts

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material';
+
+export const StyledRow = styled('li', {
+	label: 'Row',
+})<{ $height: number; $gridTemplateColumns: string; $selectable: boolean }>`
+  display: grid;
+  background-color: transparent;
+  transition: ${({ theme }) =>
+		theme.transitions.create('background-color', {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.short,
+		})};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  cursor: ${({ $selectable }) => ($selectable ? 'pointer' : 'default')};
+  grid-template-columns: ${({ $gridTemplateColumns }) => $gridTemplateColumns};
+  height: ${({ $height }) => $height}px;
+  :hover {
+    background-color: ${({ theme, $selectable }) =>
+			$selectable ? theme.palette.action.hover : 'transparent'};
+  }
+  :last-child {
+    border-bottom: none;
+  }
+`;

package/src/components/DataGridOld/State/State.tsx

@@ -0,0 +1,32 @@
+import { Container } from './styles';
+
+export function State({
+	noDataText = 'Нет данных',
+	noDataImgSrc,
+	isLoading,
+	isEmpty,
+}: {
+	noDataText?: string;
+	isLoading?: boolean;
+	isEmpty?: boolean;
+	noDataImgSrc?: string;
+}) {
+	if (isLoading) {
+		return (
+			<Container>
+				<p>Загрузка...</p>
+			</Container>
+		);
+	}
+
+	if (isEmpty) {
+		return (
+			<Container>
+				{noDataImgSrc && <img src={noDataImgSrc} alt='' />}
+				<p>{noDataText}</p>
+			</Container>
+		);
+	}
+
+	return null;
+}

package/src/components/DataGridOld/State/index.ts

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

package/src/components/DataGridOld/State/styles.ts

@@ -0,0 +1,25 @@
+import { styled } from '@mui/material';
+
+export const Container = styled('div')`
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  height: 90%;
+  min-width: 300px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 20px;
+  padding: 20px;
+  img {
+    height: 250px;
+    max-height: 50%;
+    max-width: 100%;
+  }
+  span {
+    width: clamp(30px, 3vw, 50px);
+  }
+  p {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;

package/src/components/DataGridOld/constants.ts

@@ -0,0 +1 @@
+export const ROW_HEIGHT = 40;

package/src/components/DataGridOld/index.ts

@@ -0,0 +1,2 @@
+export * from './DataGridOld';
+export * from './types';

package/src/components/DataGridOld/styles.ts

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material';
+import type { CSSProperties } from 'react';
+
+export const Container = styled('div')<{ $height: CSSProperties['height'] }>`
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme }) => theme.palette.background.default};
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.small};
+  height: ${({ $height }) => $height};
+`;
+
+export const Wrapper = styled('div')<{ $disabled?: boolean }>`
+  height: 100%;
+  display: grid;
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+  background: ${({ theme, $disabled }) =>
+		$disabled && theme.palette.background.default};
+  mix-blend-mode: ${({ $disabled }) => ($disabled ? 'luminosity' : 'normal')};
+`;

package/src/components/DataGridOld/types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export type DataGridColumn<TRow> = {
+	title: string;
+	key?: keyof TRow;
+	width?: number | string;
+	align?: 'left' | 'center' | 'right' | 'justify';
+	isDisabled?: boolean;
+	headComponent?: ReactNode;
+	component?: (row: TRow, index: number) => ReactNode;
+	getCellValue?: (row: TRow) => string | number | null | undefined;
+	cellClassName?: (row: TRow) => string;
+	cellColor?: (row: TRow) => string;
+};
+
+export type DataGridColumns<TRow> = DataGridColumn<TRow>[];
+
+export type AlignVariant = 'left' | 'center' | 'right' | 'justify';