@max-ts/components 0.0.2

package/rslib.config.ts

@@ -0,0 +1,32 @@
+import { resolve } from 'node:path';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import { pluginDts } from 'rsbuild-plugin-dts';
+
+export default defineConfig({
+	lib: [
+		{
+			format: 'cjs',
+			bundle: true,
+			dts: false,
+		},
+		{
+			format: 'esm',
+			bundle: true,
+			dts: false,
+		},
+	],
+	source: {
+		entry: {
+			index: './src/index.ts',
+		},
+	},
+	output: {
+		cleanDistPath: true,
+		minify: true,
+		externals: ['react', 'react-dom'],
+		target: 'web',
+		injectStyles: true,
+	},
+	plugins: [pluginDts(), pluginReact()],
+});

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,126 @@
+import { Typography } from '../Typography';
+
+import { SvgIcon, styled } from '@mui/material';
+import { CircleCheck, Info } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../Button';
+import { Container } from '../Container';
+import { Accordion } from './Accordion';
+
+/**
+ * Accordion - компонент, позволяющий скрывать контент под заголовком
+ *
+ * ### [Figma]()
+ * ### [Guide]()
+ */
+
+export default {
+	title: 'Example/Accordion',
+	component: Accordion,
+	args: {
+		children: (
+			<>
+				<Typography>Сумма заказа: 1 000 руб</Typography>
+				<Typography>Дата оформления: 15.08.2023</Typography>
+			</>
+		),
+		summary: 'Информация о заказе',
+		startAdorment: (
+			<SvgIcon color='info'>
+				<Info />
+			</SvgIcon>
+		),
+	},
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+		docs: {
+			disable: true,
+		},
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	tags: ['autodocs'],
+	// More on argTypes: https://storybook.js.org/docs/api/argtypes
+	argTypes: {
+		backgroundColor: { control: 'color' },
+	},
+};
+
+const BaseContainer = styled(Container)`
+  width: 300px;
+  min-height: 90px;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const Example = () => (
+	<BaseContainer>
+		<Accordion
+			summary='Информация о заказе'
+			startAdorment={
+				<SvgIcon color='info'>
+					<Info />
+				</SvgIcon>
+			}
+		>
+			<Typography>Сумма заказа: 1 000 руб</Typography>
+			<Typography>Дата оформления: 15.08.2023</Typography>
+		</Accordion>
+	</BaseContainer>
+);
+
+export const Summary = () => (
+	<BaseContainer>
+		<Accordion
+			summary={<Typography variant='subtitle2'>Любой summary</Typography>}
+		>
+			<Typography>Сумма заказа: 1 000 руб</Typography>
+			<Typography>Дата оформления: 15.08.2023</Typography>
+		</Accordion>
+	</BaseContainer>
+);
+
+export const StartAdorment = () => (
+	<BaseContainer>
+		<Accordion
+			summary='Информация о заказе'
+			startAdorment={
+				<SvgIcon color='success'>
+					<CircleCheck />
+				</SvgIcon>
+			}
+		>
+			<Typography>Сумма заказа: 1 000 руб</Typography>
+			<Typography>Дата оформления: 15.08.2023</Typography>
+		</Accordion>
+	</BaseContainer>
+);
+
+export const Controlled = () => {
+	const [isExpanded, setIsExpanded] = useState(true);
+
+	const handleToggleAccordion = () => setIsExpanded((prev) => !prev);
+
+	const handleChangeAccordion = (
+		newIsExpanded: boolean,
+		event: React.MouseEvent<HTMLElement, MouseEvent>,
+	) => {
+		setIsExpanded(newIsExpanded);
+		console.log('Click accordion header event', event);
+	};
+
+	return (
+		<Container>
+			<Button onClick={handleToggleAccordion}>Toggle</Button>
+			<BaseContainer gap={2}>
+				<Accordion
+					summary='123'
+					isExpanded={isExpanded}
+					onChange={handleChangeAccordion}
+				>
+					<Typography>Сумма заказа: 1 000 руб</Typography>
+					<Typography>Дата оформления: 15.08.2023</Typography>
+				</Accordion>
+			</BaseContainer>
+		</Container>
+	);
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,80 @@
+import React, { type PropsWithChildren, forwardRef, useState } from 'react';
+
+import { Chevron } from '../Chevron';
+import { Collapse } from '../Collapse';
+
+import { ChevronWrapper, ContentWrapper, Header, Summary } from './styles';
+
+export type AccordionProps = PropsWithChildren<{
+	/**
+	 *  Заголовок
+	 */
+	summary: React.ReactElement | string;
+	/**
+	 *  Элемент, отображаемый перед заголовком
+	 */
+	startAdorment?: React.ReactNode;
+	/**
+	 *  Управляет состоянием аккордеона
+	 */
+	isExpanded?: boolean;
+
+	/**
+	 *  Обработчик, вызываемый при клике по хедеру
+	 */
+	onChange?: (
+		isExpanded: boolean,
+		event: React.MouseEvent<HTMLElement, MouseEvent>,
+	) => void;
+}>;
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+	(
+		{ summary, startAdorment, isExpanded, onChange, children }: AccordionProps,
+		forwardedRef,
+	) => {
+		const [isUncontrolledExpanded, setIsUncontrolledExpanded] = useState(false);
+
+		const isControlled = typeof isExpanded === 'boolean';
+
+		const actualIsExpanded = isControlled ? isExpanded : isUncontrolledExpanded;
+
+		const hasStartAdorment = Boolean(startAdorment);
+
+		const handleClickHeader = (
+			event: React.MouseEvent<HTMLElement, MouseEvent>,
+		) => {
+			if (isControlled) {
+				onChange?.(!isExpanded, event);
+			} else {
+				const newValue = !isUncontrolledExpanded;
+
+				setIsUncontrolledExpanded(newValue);
+				onChange?.(newValue, event);
+			}
+		};
+
+		const SummaryWrapper =
+			typeof summary === 'string' ? Summary : React.Fragment;
+
+		return (
+			<div ref={forwardedRef}>
+				<Header
+					onClick={handleClickHeader}
+					withStartAdornment={hasStartAdorment}
+				>
+					{startAdorment}
+					<SummaryWrapper>{summary}</SummaryWrapper>
+					<ChevronWrapper>
+						<Chevron isActive={actualIsExpanded} />
+					</ChevronWrapper>
+				</Header>
+				<Collapse in={actualIsExpanded}>
+					<ContentWrapper withStartAdorment={hasStartAdorment}>
+						{children}
+					</ContentWrapper>
+				</Collapse>
+			</div>
+		);
+	},
+);

package/src/components/Accordion/index.ts

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

package/src/components/Accordion/styles.ts

@@ -0,0 +1,30 @@
+import { styled } from '@mui/material';
+import { Typography } from '../Typography';
+
+export const Header = styled('header')<{ withStartAdornment: boolean }>`
+  cursor: pointer;
+
+  display: grid;
+  grid-column-gap: ${({ theme }) => theme.spacing(2)};
+  grid-template-columns: ${({ withStartAdornment }) =>
+		withStartAdornment ? '24px 1fr 24px' : ' 1fr 24px'};
+`;
+
+export const ContentWrapper = styled('div')<{
+	withStartAdorment: boolean;
+}>`
+  margin-left: ${({ theme, withStartAdorment }) =>
+		theme.spacing(withStartAdorment ? 8 : 0)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const Summary = styled(Typography)`
+  align-self: center;
+`;
+
+export const ChevronWrapper = styled('div')`
+  overflow: hidden;
+
+  width: 24px;
+  height: 24px;
+`;

package/src/components/ActionCell/ActionCell.stories.tsx

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
+import { DataGrid, type DataGridColumns } from '../DataGrid';
+
+import { Eye, Save, Send, Trash } from 'lucide-react';
+import { ActionCell, type Actions } from './ActionCell';
+
+/**
+ * ### [Figma]()
+ * ### [Guide]()
+ */
+
+const meta: Meta<typeof ActionCell> = {
+	title: 'Components/ActionCell',
+	component: ActionCell,
+};
+
+export default meta;
+
+type DataType = {
+	id: string;
+	documentName: string;
+};
+
+const MAIN_ACTIONS = [
+	{
+		icon: <Eye />,
+		name: 'Просмотреть нельзя',
+		disabled: true,
+		onClick: () => console.log('main'),
+	},
+	{
+		icon: <Send />,
+		nested: true,
+		name: 'Отправить',
+		actions: [
+			{
+				name: 'Туда',
+				onClick: () => console.log('nested 1'),
+				disabledReason: 'Не работает',
+				disabled: true,
+			},
+			{ name: 'Сюда', onClick: () => console.log('nested 2') },
+		],
+	},
+];
+
+const SECONDARY_ACTIONS = [
+	{
+		name: 'Редактировать',
+		onClick: () => console.log('secondary 1'),
+		disabled: true,
+		disabledReason:
+			'Текущий документ не прошел согласование/подписание. Загрузите документ повторно',
+	},
+	{ name: 'Удалить', onClick: () => console.log('secondary 2') },
+];
+
+const ACTIONS: Actions<DataType> = {
+	main: MAIN_ACTIONS,
+	secondary: SECONDARY_ACTIONS,
+};
+
+const INTERACTION_ACTIONS: Actions<unknown> = {
+	main: MAIN_ACTIONS,
+	secondary: SECONDARY_ACTIONS,
+};
+
+const ACTIONS_WITHOUT_SECONDARY: Actions<DataType> = {
+	main: MAIN_ACTIONS,
+};
+
+const data = [
+	{
+		id: '1',
+		documentName: 'Документ 1',
+		action: () => {},
+	},
+	{
+		id: '2',
+		documentName: 'Документ 2',
+		action: () => {},
+	},
+	{
+		id: '3',
+		documentName: 'Документ 3',
+		action: () => {},
+	},
+];
+
+type Story = StoryObj<typeof ActionCell>;
+
+export const Interaction: Story = {
+	args: {
+		actions: INTERACTION_ACTIONS,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const columns: DataGridColumns<DataType>[] = [
+		{
+			field: 'documentName',
+			label: 'Документ',
+			sortable: false,
+		},
+		{
+			label: 'Действия',
+			sortable: false,
+			width: '120px',
+			align: 'right',
+			renderCell: (row) => <ActionCell actions={ACTIONS} row={row} />,
+		},
+	];
+
+	return (
+		<DataGrid rows={data} columns={columns} keyId='id' onRetry={() => {}} />
+	);
+};
+
+export const OnlyMainActions = () => {
+	return <ActionCell actions={ACTIONS_WITHOUT_SECONDARY} row={data[1]} />;
+};
+
+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 FAKE_ACTIONS: Actions<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 <ActionCell actions={FAKE_ACTIONS} 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 FAKE_ACTIONS: Actions<DataTypeActions> = {
+		main: [
+			{
+				icon: <Trash />,
+				name: 'Удалить',
+				onClick: () => setDeleteLoading((prevState) => !prevState),
+				loading: deleteLoading,
+				isBlockingOperation: true,
+			},
+			{
+				icon: <Save />,
+				name: 'Сохранить',
+				onClick: () => setSaveLoading((prevState) => !prevState),
+				loading: saveLoading,
+			},
+		],
+		secondary: [
+			{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
+		],
+	};
+
+	const fakeData: DataTypeActions = {
+		id: '123456789',
+	};
+
+	return <ActionCell actions={FAKE_ACTIONS} row={fakeData} />;
+};

package/src/components/ActionCell/ActionCell.tsx

@@ -0,0 +1,71 @@
+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 Actions<T> = {
+	/**
+	 * Основные действия
+	 */
+	main: MainActionKind<T>[];
+	/**
+	 * Второстепенные действия
+	 */
+	secondary?: SecondaryActionKind<T>[];
+};
+
+export type ActionsCellProps<T> = {
+	actions: Actions<T>;
+	/**
+	 * Данные строки из DataGrid
+	 */
+	row: T;
+	/**
+	 * @deprecated Положение тултипа инкапсулировано внутри ActionCell
+	 */
+	tooltipPlacement?: TooltipProps['placement'];
+};
+
+const TOOLTIP_PLACEMENT: Record<string, TooltipProps['placement']> = {
+	mainAction: 'top',
+	secondaryAction: 'left',
+};
+
+export const ActionCell = <T,>(props: ActionsCellProps<T>) => {
+	const {
+		isSecondaryActionsAvailable,
+		handleActionClick,
+		handleWrapperClick,
+		isDisabledAction,
+	} = useLogic(props);
+
+	const { actions } = props;
+	const { main = [], secondary = [] } = actions;
+
+	return (
+		<Wrapper onClick={handleWrapperClick}>
+			{main.map((action) => {
+				return (
+					<MainAction
+						key={action.name}
+						tooltipPlacement={TOOLTIP_PLACEMENT.mainAction}
+						onActionClick={handleActionClick}
+						action={action}
+						isDisabled={isDisabledAction}
+					/>
+				);
+			})}
+			{isSecondaryActionsAvailable && (
+				<SecondaryActions
+					isDisabled={isDisabledAction}
+					actions={secondary}
+					tooltipPlacement={TOOLTIP_PLACEMENT.secondaryAction}
+					onActionClick={handleActionClick}
+				/>
+			)}
+		</Wrapper>
+	);
+};

package/src/components/ActionCell/MainAction/MainAction.tsx

@@ -0,0 +1,85 @@
+import { IconButton } from '../../IconButton';
+import { IconDropdownButton } from '../../IconDropdownButton';
+import { MenuItem } from '../../MenuItem';
+import { Tooltip, type TooltipProps } from '../../Tooltip';
+import type { ActionCellHandler, MainActionKind } from '../types';
+
+type MainActionProps<T> = {
+	action: MainActionKind<T>;
+	onActionClick: ActionCellHandler<T>;
+	tooltipPlacement: TooltipProps['placement'];
+	/**
+	 *  Если true, action не доступен
+	 */
+	isDisabled?: boolean;
+};
+
+export const MainAction = <T,>({
+	action,
+	onActionClick,
+	tooltipPlacement,
+	isDisabled,
+}: MainActionProps<T>) => {
+	if ('actions' in action) {
+		const { icon, disabled, disabledReason, name, actions } = action;
+
+		return (
+			<Tooltip
+				key={name}
+				title={disabledReason || name}
+				placement={tooltipPlacement}
+				withoutContainer={!(isDisabled || disabled)}
+			>
+				<IconDropdownButton
+					icon={icon}
+					variant='text'
+					disabled={isDisabled || disabled}
+				>
+					{actions.map(
+						({ name: nestedActionName, onClick: onClickNested, ...props }) => (
+							<MenuItem
+								{...props}
+								key={nestedActionName}
+								tooltipPlacement={tooltipPlacement}
+								onClick={onActionClick(onClickNested)}
+							>
+								{nestedActionName}
+							</MenuItem>
+						),
+					)}
+				</IconDropdownButton>
+			</Tooltip>
+		);
+	}
+
+	const {
+		onClick,
+		name,
+		icon,
+		disabledReason,
+		disabled,
+		loading,
+		isBlockingOperation,
+		...restActionProp
+	} = action;
+
+	const title = !loading && (disabledReason || name);
+
+	return (
+		<Tooltip
+			key={name}
+			title={title}
+			placement={tooltipPlacement}
+			withoutContainer={!(isDisabled || disabled)}
+		>
+			<IconButton
+				disabled={isDisabled || disabled}
+				{...restActionProp}
+				variant='text'
+				onClick={onActionClick(onClick)}
+			>
+				{icon}
+			</IconButton>
+		</Tooltip>
+	);
+};

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

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

package/src/components/ActionCell/SecondaryAction/SecondaryActions.tsx

@@ -0,0 +1,45 @@
+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 SecondaryActionsProps<T> = {
+	actions: SecondaryActionKind<T>[];
+	onActionClick: ActionCellHandler<T>;
+	tooltipPlacement: TooltipProps['placement'];
+	/**
+	 *  Если true, action не доступен
+	 */
+	isDisabled?: boolean;
+};
+
+export const SecondaryActions = <T,>({
+	actions,
+	onActionClick,
+	tooltipPlacement,
+	isDisabled = false,
+}: SecondaryActionsProps<T>) => {
+	return (
+		<IconDropdownButton
+			icon={<EllipsisVertical />}
+			variant='text'
+			disabled={isDisabled}
+		>
+			{actions.map((secondaryAction) => {
+				const { onClick, name } = secondaryAction;
+
+				return (
+					<MenuItem
+						{...secondaryAction}
+						key={name}
+						tooltipPlacement={tooltipPlacement}
+						onClick={onActionClick(onClick)}
+					>
+						{name}
+					</MenuItem>
+				);
+			})}
+		</IconDropdownButton>
+	);
+};

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

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

package/src/components/ActionCell/index.ts

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