@max-ts/components 0.1.1 → 0.2.0

package/src/components/DataGridActionCell/DataGridActionCell.stories.tsx

@@ -1,272 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { useEffect, useMemo, useState } from 'react';
-
-import { DataGrid, type DataGridColumns } from '../DataGrid';
-
-import { Pencil, Save, Trash } from 'lucide-react';
-import React from 'react';
-import {
-	DataGridActionCell,
-	type DataGridActionCellProps,
-	type DataGridActions,
-} from './DataGridActionCell';
-
-const meta: Meta<typeof DataGridActionCell> = {
-	title: 'Components/DataGridActionCell',
-	component: DataGridActionCell,
-};
-
-export default meta;
-
-type DataType = {
-	id: string;
-	documentName: string;
-};
-
-const FAKE_ACTIONS = {
-	main: [
-		{
-			icon: <Pencil />,
-			name: 'Редактировать',
-			onClick: () => {
-				console.log('Редактировать');
-			},
-		},
-		{
-			icon: <Trash />,
-			name: 'Удалить',
-			onClick: () => {
-				console.log('Удалить');
-			},
-		},
-	],
-	secondary: [
-		{
-			name: 'Подписать',
-			onClick: () => {
-				console.log('Подписать');
-			},
-		},
-	],
-};
-
-const FAKE_DATA = [
-	{
-		id: '1',
-		documentName: 'Документ 1',
-	},
-	{
-		id: '2',
-		documentName: 'Документ 2',
-	},
-	{
-		id: '3',
-		documentName: 'Документ 3',
-	},
-];
-
-type Story = StoryObj<typeof DataGridActionCell>;
-
-export const Interaction: Story = {
-	args: {
-		actions: FAKE_ACTIONS,
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-export const Example = () => {
-	type FakeActionCellProps<TRow> = Pick<DataGridActionCellProps<TRow>, 'row'>;
-
-	const FakeActionCell = <TRow,>({ row }: FakeActionCellProps<TRow>) => {
-		const [isEditing, setIsEditing] = useState(false);
-		const [isDeleting, setIsDeleting] = useState(false);
-		const [isSigning, setIsSigning] = useState(false);
-
-		const handleEdit = () => {
-			setIsEditing(true);
-		};
-
-		const handleDelete = () => {
-			setIsDeleting(true);
-		};
-
-		const handleSign = () => {
-			setIsSigning(true);
-		};
-
-		useEffect(() => {
-			if (isEditing) {
-				setTimeout(() => setIsEditing(false), 1500);
-			}
-
-			if (isDeleting) {
-				setTimeout(() => setIsDeleting(false), 1500);
-			}
-
-			if (isSigning) {
-				setTimeout(() => setIsSigning(false), 1500);
-			}
-		}, [isEditing, isDeleting, isSigning]);
-
-		const fakeActions = useMemo(
-			() => ({
-				main: [
-					{
-						icon: <Pencil />,
-						name: 'Редактировать',
-						loading: isEditing,
-						onClick: handleEdit,
-					},
-					{
-						icon: <Trash />,
-						name: 'Удалить',
-						loading: isDeleting,
-						loadingNote: 'Происходит удаление',
-						isBlockingOperation: true,
-						onClick: handleDelete,
-					},
-				],
-				secondary: [
-					{
-						name: 'Подписать',
-						loading: isSigning,
-						loadingNote: 'Происходит подписание',
-						isBlockingOperation: true,
-						onClick: handleSign,
-					},
-				],
-			}),
-			[isEditing, isDeleting, isSigning],
-		);
-
-		return <DataGridActionCell actions={fakeActions} row={row} />;
-	};
-
-	const columns: DataGridColumns<DataType>[] = [
-		{
-			field: 'documentName',
-			label: 'Документ',
-			sortable: false,
-		},
-		{
-			label: 'Действия',
-			sortable: false,
-			width: '120px',
-			align: 'right',
-			renderCell: (row) => <FakeActionCell row={row} />,
-		},
-	];
-
-	return (
-		<DataGrid
-			rows={FAKE_DATA}
-			columns={columns}
-			keyId='id'
-			onRetry={() => {}}
-		/>
-	);
-};
-
-export const LoaderActions = () => {
-	type DataTypeActions = {
-		id: string;
-		actions?: object;
-	};
-
-	const [deleteLoading, setDeleteLoading] = useState(false);
-	const [saveLoading, setSaveLoading] = useState(false);
-
-	useEffect(() => {
-		if (deleteLoading) {
-			setTimeout(() => {
-				setDeleteLoading(false);
-			}, 1500);
-		}
-
-		if (saveLoading) {
-			setTimeout(() => {
-				setSaveLoading(false);
-			}, 1500);
-		}
-	}, [deleteLoading, saveLoading]);
-
-	const fakeActions: DataGridActions<DataTypeActions> = {
-		main: [
-			{
-				icon: <Trash />,
-				name: 'Удалить',
-				onClick: () => setDeleteLoading((prevState) => !prevState),
-				loading: deleteLoading,
-			},
-			{
-				icon: <Save />,
-				name: 'Сохранить',
-				loading: saveLoading,
-				onClick: () => setSaveLoading((prevState) => !prevState),
-			},
-		],
-	};
-
-	const fakeData: DataTypeActions = {
-		id: '123456789',
-	};
-
-	return <DataGridActionCell actions={fakeActions} row={fakeData} />;
-};
-
-export const BlockingOperations = () => {
-	type DataTypeActions = {
-		id: string;
-		actions?: object;
-	};
-
-	const [deleteLoading, setDeleteLoading] = useState(false);
-	const [saveLoading, setSaveLoading] = useState(false);
-
-	useEffect(() => {
-		if (deleteLoading) {
-			setTimeout(() => {
-				setDeleteLoading(false);
-			}, 1500);
-		}
-
-		if (saveLoading) {
-			setTimeout(() => {
-				setSaveLoading(false);
-			}, 1500);
-		}
-	}, [deleteLoading, saveLoading]);
-
-	const fakeActions: DataGridActions<DataTypeActions> = {
-		main: [
-			{
-				icon: <Trash />,
-				name: 'Удалить',
-				onClick: () => setDeleteLoading((prevState) => !prevState),
-				loading: deleteLoading,
-				isBlockingOperation: true,
-			},
-			{
-				icon: <Save />,
-				name: 'Сохранить',
-				needConfirm: true,
-				onClick: () => setSaveLoading((prevState) => !prevState),
-				loading: saveLoading,
-			},
-		],
-		secondary: [
-			{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
-		],
-	};
-
-	const fakeData: DataTypeActions = {
-		id: '123456789',
-	};
-
-	return <DataGridActionCell actions={fakeActions} row={fakeData} />;
-};

package/src/components/DataGridActionCell/DataGridActionCell.tsx

@@ -1,70 +0,0 @@
-import type { TooltipProps } from '../Tooltip';
-
-import { MainAction } from './MainAction';
-import { SecondaryActions } from './SecondaryAction';
-import { Wrapper } from './styles';
-import type { MainActionKind, SecondaryActionKind } from './types';
-import { useLogic } from './useLogic';
-
-export type DataGridActions<TAction> = {
-	/**
-	 * Основные действия
-	 */
-	main: MainActionKind<TAction>[];
-
-	/**
-	 * Вторичные действия
-	 */
-	secondary?: SecondaryActionKind<TAction>[];
-};
-
-export type DataGridActionCellProps<TRow> = {
-	/**
-	 * Действия
-	 */
-	actions: DataGridActions<TRow>;
-
-	/**
-	 * Данные строки
-	 */
-	row: TRow;
-};
-
-const TOOLTIP_PLACEMENT: Record<string, TooltipProps['placement']> = {
-	mainAction: 'top',
-	secondaryAction: 'left',
-};
-
-export const DataGridActionCell = <TRow,>(
-	props: DataGridActionCellProps<TRow>,
-) => {
-	const { isDisabledAction, handleWrapperClick, handleActionClick } =
-		useLogic(props);
-
-	const { actions } = props;
-	const { main, secondary } = actions;
-
-	return (
-		<Wrapper onClick={handleWrapperClick}>
-			{main.map((action) => {
-				return (
-					<MainAction
-						key={action.name}
-						action={action}
-						onActionClick={handleActionClick}
-						isDisabled={isDisabledAction}
-						tooltipPlacement={TOOLTIP_PLACEMENT.mainAction}
-					/>
-				);
-			})}
-			{secondary && (
-				<SecondaryActions
-					actions={secondary}
-					onActionClick={handleActionClick}
-					tooltipPlacement={TOOLTIP_PLACEMENT.secondaryAction}
-					isDisabled={isDisabledAction}
-				/>
-			)}
-		</Wrapper>
-	);
-};

package/src/components/DataGridActionCell/MainAction/MainAction.tsx

@@ -1,76 +0,0 @@
-import { IconDropdownButton } from '../../IconDropdownButton';
-import { MenuItem } from '../../MenuItem';
-import { Tooltip, type TooltipProps } from '../../Tooltip';
-import type { ActionCellHandler, MainActionKind } from '../types';
-
-import { MainIconButton } from './MainIconButton';
-
-type MainActionProps<TAction> = {
-	/**
-	 *  Основные действия
-	 */
-	action: MainActionKind<TAction>;
-
-	/**
-	 *  Обработчик клика на действие
-	 */
-	onActionClick: ActionCellHandler<TAction>;
-
-	/**
-	 *  Если true, action не доступен
-	 */
-	isDisabled?: boolean;
-
-	/**
-	 *  Положение тултипа
-	 */
-	tooltipPlacement?: TooltipProps['placement'];
-};
-
-export const MainAction = <TAction,>({
-	action,
-	onActionClick,
-	isDisabled,
-	tooltipPlacement,
-}: MainActionProps<TAction>) => {
-	if ('actions' in action) {
-		const { disabled, icon, name, disabledReason, actions } = action;
-
-		return (
-			<Tooltip
-				key={name}
-				title={disabledReason || name}
-				withoutContainer={!disabled}
-				placement={tooltipPlacement}
-			>
-				<IconDropdownButton
-					icon={icon}
-					variant='text'
-					disabled={isDisabled || disabled}
-				>
-					{actions.map(
-						// @ts-ignore
-						({ name: nestedActionName, onClick: onClickNested, ...props }) => (
-							<MenuItem
-								{...props}
-								key={nestedActionName}
-								onClick={onActionClick(onClickNested)}
-							>
-								{nestedActionName}
-							</MenuItem>
-						),
-					)}
-				</IconDropdownButton>
-			</Tooltip>
-		);
-	}
-
-	return (
-		<MainIconButton
-			action={action}
-			onActionClick={onActionClick}
-			isDisabled={isDisabled}
-			tooltipPlacement={tooltipPlacement}
-		/>
-	);
-};

package/src/components/DataGridActionCell/MainAction/MainIconButton/MainIconButton.tsx

@@ -1,88 +0,0 @@
-import {
-	type ActionComponentParams,
-	ConfirmAction,
-	type ConfirmActionProps,
-} from '../../../ConfirmAction';
-import { IconButton, type IconButtonProps } from '../../../IconButton';
-import { Tooltip, type TooltipProps } from '../../../Tooltip';
-import type { ActionCellHandler, SingleAction } from '../../types';
-
-import { useLogic } from './useLogic';
-
-export type MainIconButtonProps<TAction> = {
-	action: IconButtonProps<'button'> & SingleAction<TAction>;
-	/**
-	 *  Обработчик клика на действие
-	 */
-	onActionClick: ActionCellHandler<TAction>;
-
-	/**
-	 *  Если true, action не доступен
-	 */
-	isDisabled?: boolean;
-
-	/**
-	 *  Положение тултипа
-	 */
-	tooltipPlacement?: TooltipProps['placement'];
-};
-
-export const MainIconButton = <TAction,>(
-	props: MainIconButtonProps<TAction>,
-) => {
-	const { tooltipProps } = useLogic(props);
-	const { action, onActionClick, isDisabled, tooltipPlacement } = props;
-
-	const {
-		name,
-		icon,
-		needConfirm,
-		confirmText,
-		confirmButtonProps,
-		disabledReason,
-		disabled,
-		loading,
-		isBlockingOperation,
-		loadingNote,
-		onClick,
-		...actions
-	} = action;
-
-	const renderButton = (
-		renderProps: ActionComponentParams | ActionCellHandler<TAction>,
-	) => (
-		<Tooltip
-			key={name}
-			withoutContainer={!disabled}
-			placement={tooltipPlacement}
-			{...tooltipProps}
-		>
-			<IconButton
-				disabled={isDisabled || disabled}
-				loading={loading}
-				{...actions}
-				variant='text'
-				{...renderProps}
-			>
-				{icon}
-			</IconButton>
-		</Tooltip>
-	);
-
-	return (
-		<>
-			{needConfirm ? (
-				<ConfirmAction
-					text={confirmText}
-					confirmButtonProps={confirmButtonProps}
-					actionComponent={(renderProps) => renderButton(renderProps)}
-					onConfirm={onActionClick(onClick) as ConfirmActionProps['onConfirm']}
-				/>
-			) : (
-				renderButton({
-					onClick: onActionClick(onClick) as ConfirmActionProps['onConfirm'],
-				})
-			)}
-		</>
-	);
-};

package/src/components/DataGridActionCell/MainAction/MainIconButton/index.ts

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

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

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

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

@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { MainIconButtonProps } from '../MainIconButton';
-
-type UseLogicParam<TAction> = MainIconButtonProps<TAction>;
-
-export const useLogic = <TAction>({ action }: UseLogicParam<TAction>) => {
-	const { loading, disabledReason, name } = action;
-	const [isVisibleTooltip, setVisibleTooltip] = useState(false);
-
-	const handleOpenTooltip = () => setVisibleTooltip(true);
-
-	const handleCloseTooltip = () => setVisibleTooltip(false);
-
-	useEffect(() => {
-		if (loading) {
-			setVisibleTooltip(false);
-		}
-	}, [loading]);
-
-	const title = disabledReason || name;
-
-	return {
-		tooltipProps: {
-			title,
-			open: isVisibleTooltip,
-			onOpen: handleOpenTooltip,
-			onClose: handleCloseTooltip,
-		},
-	};
-};

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

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

package/src/components/DataGridActionCell/SecondaryAction/SecondaryAction.tsx

@@ -1,54 +0,0 @@
-import { EllipsisVertical } from 'lucide-react';
-import { IconDropdownButton } from '../../IconDropdownButton';
-import { MenuItem } from '../../MenuItem';
-import type { TooltipProps } from '../../Tooltip';
-import type { ActionCellHandler, SecondaryActionKind } from '../types';
-
-type SecondaryActionProps<TAction> = {
-	/**
-	 *  Вторичные действия
-	 */
-	actions: SecondaryActionKind<TAction>[];
-	/**
-	 *  Обработчик нажатия на действие
-	 */
-	onActionClick: ActionCellHandler<TAction>;
-	/**
-	 *  Если true, action не доступен
-	 */
-	isDisabled?: boolean;
-	/**
-	 *  Положение тултипа
-	 */
-	tooltipPlacement?: TooltipProps['placement'];
-};
-
-export const SecondaryActions = <TAction,>({
-	actions,
-	onActionClick,
-	tooltipPlacement,
-	isDisabled,
-}: SecondaryActionProps<TAction>) => {
-	return (
-		<IconDropdownButton
-			icon={<EllipsisVertical />}
-			variant='text'
-			disabled={isDisabled}
-		>
-			{actions.map((action) => {
-				const { onClick, name } = action;
-
-				return (
-					<MenuItem
-						{...action}
-						key={name}
-						tooltipPlacement={tooltipPlacement}
-						onClick={onActionClick(onClick)}
-					>
-						{name}
-					</MenuItem>
-				);
-			})}
-		</IconDropdownButton>
-	);
-};

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

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

package/src/components/DataGridActionCell/index.ts

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

package/src/components/DataGridActionCell/styles.ts

@@ -1,6 +0,0 @@
-import { styled } from '@mui/material';
-
-export const Wrapper = styled('div')`
-  display: inline-flex;
-  align-items: center;
-`;