@max-ts/components 0.1.1 → 0.2.0

package/src/components/DataGridActionCell/types.ts

@@ -1,123 +0,0 @@
-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

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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

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

package/src/components/DataGridOld/index.ts

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

package/src/components/DataGridOld/styles.ts

@@ -1,24 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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';