@max-ts/components 0.1.0 → 0.2.0

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

@@ -1,128 +0,0 @@
-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';
-
-import type React from 'react';
-
-/**
- * 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

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

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

package/src/components/Accordion/styles.ts

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

@@ -1,227 +0,0 @@
-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 React from '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

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

@@ -1,86 +0,0 @@
-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(
-						// @ts-ignore
-						({ 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

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

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

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

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

package/src/components/ActionCell/index.ts

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

package/src/components/ActionCell/styles.ts

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