@max-ts/components 0.1.1 → 0.2.1

package/src/components/ConfirmAction/ConfirmAction.stories.tsx

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { IconButton } from '../IconButton';
-
-import { Trash } from 'lucide-react';
-import React from 'react';
-import { ConfirmAction } from './ConfirmAction';
-
-/**
- * Используется для подтверждения действия пользователя.
- */
-const meta: Meta<typeof ConfirmAction> = {
-	title: 'Components/ConfirmAction',
-	component: ConfirmAction,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ConfirmAction>;
-
-export const Interaction: Story = {
-	args: {
-		text: 'Уверены, что хотите отменить запрос на подписание?',
-		confirmButtonProps: {
-			text: 'Да, отменить запрос',
-		},
-		actionComponent: (props) => (
-			<IconButton variant='light' {...props}>
-				<Trash />
-			</IconButton>
-		),
-		onConfirm: () => {},
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-export const Example = () => {
-	return (
-		<ConfirmAction
-			actionComponent={(props) => (
-				<IconButton variant='light' {...props}>
-					<Trash />
-				</IconButton>
-			)}
-			onConfirm={() => alert('Delete')}
-		/>
-	);
-};
-
-/**
- * Пропс `text` позволяет добавить поясняющий текст
- */
-export const WithText = () => {
-	return (
-		<ConfirmAction
-			text='Уверены, что хотите отменить запрос на подписание?'
-			confirmButtonProps={{
-				text: 'Да, отменить запрос',
-			}}
-			actionComponent={(props) => (
-				<IconButton variant='light' {...props}>
-					<Trash />
-				</IconButton>
-			)}
-			onConfirm={() => alert('Delete')}
-		/>
-	);
-};
-
-/**
- * При осуществлении важных действий, например при удалении, можно добавить акцент кнопке подтверждения
- */
-export const AccentedConfirmationButton = () => {
-	return (
-		<ConfirmAction
-			text='Если вы удалите черновик, то черновик с такими же данными нужно будет создать заново. Удалить черновик из списка?'
-			confirmButtonProps={{
-				text: 'Да, удалить',
-				isAccented: true,
-			}}
-			actionComponent={(props) => (
-				<IconButton variant='light' {...props}>
-					<Trash />
-				</IconButton>
-			)}
-			onConfirm={() => alert('Delete')}
-		/>
-	);
-};
-
-export const PopoverProps = () => {
-	return (
-		<ConfirmAction
-			actionComponent={(props) => (
-				<IconButton variant='light' {...props}>
-					<Trash />
-				</IconButton>
-			)}
-			popoverProps={{
-				anchorOrigin: {
-					vertical: 'bottom',
-					horizontal: 'center',
-				},
-				transformOrigin: {
-					vertical: 'top',
-					horizontal: 'center',
-				},
-			}}
-			onConfirm={() => alert('Delete')}
-		/>
-	);
-};

package/src/components/ConfirmAction/ConfirmAction.tsx

@@ -1,97 +0,0 @@
-import type { ReactNode, SyntheticEvent } from 'react';
-
-import { Button } from '../Button';
-import { Popover, type PopoverProps } from '../Popover';
-
-import { DEFAULT_ANCHOR_ORIGIN, DEFAULT_TRANSFORM_ORIGIN } from './constants';
-import { Actions, StyledTypography, Wrapper } from './styles';
-import { useLogic } from './useLogic';
-
-export type ActionComponentParams = {
-	onClick: (event: SyntheticEvent) => void;
-};
-
-export type ConfirmActionProps = {
-	/**
-	 * Поясняющий текст
-	 */
-	text?: string;
-
-	/**
-	 * Параметры кнопки подтверждения действия
-	 */
-	confirmButtonProps?: {
-		/**
-		 * Текст кнопки
-		 */
-		text?: string;
-
-		/**
-		 * Если `true`, кнопка будет иметь акцент на критичность действия. Стоит использовать для важных действий, например при удалении.
-		 * @default 'false'
-		 */
-		isAccented?: boolean;
-	};
-
-	/**
-	 * Параметры всплывающего окна
-	 */
-	popoverProps?: Pick<PopoverProps, 'anchorOrigin' | 'transformOrigin'>;
-
-	/**
-	 * Кнопка, действие которой необходимо подтвердить
-	 */
-	actionComponent: (params: ActionComponentParams) => ReactNode;
-
-	/**
-	 * Целевое действие, которое должно произойти после подтверждения
-	 */
-	onConfirm: () => void;
-};
-
-export const ConfirmAction = (props: ConfirmActionProps) => {
-	const {
-		actionComponentProps,
-		popoverProps,
-		cancelButtonProps,
-		confirmButtonProps,
-	} = useLogic(props);
-
-	const {
-		text,
-		confirmButtonProps: externalConfirmButtonProps,
-		popoverProps: externalPopoverProps,
-		actionComponent,
-	} = props;
-	const { text: confirmButtonText = 'Подтвердить' } =
-		externalConfirmButtonProps || {};
-
-	const {
-		anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
-		transformOrigin = DEFAULT_TRANSFORM_ORIGIN,
-	} = externalPopoverProps || {};
-
-	return (
-		<>
-			{actionComponent(actionComponentProps)}
-
-			<Popover
-				anchorOrigin={anchorOrigin as PopoverProps['anchorOrigin']}
-				transformOrigin={transformOrigin as PopoverProps['transformOrigin']}
-				{...popoverProps}
-			>
-				<Wrapper>
-					{text && <StyledTypography>{text}</StyledTypography>}
-
-					<Actions>
-						<Button variant='text' {...cancelButtonProps}>
-							Отмена
-						</Button>
-
-						<Button {...confirmButtonProps}>{confirmButtonText}</Button>
-					</Actions>
-				</Wrapper>
-			</Popover>
-		</>
-	);
-};

package/src/components/ConfirmAction/constants.ts

@@ -1,9 +0,0 @@
-export const DEFAULT_ANCHOR_ORIGIN = {
-	vertical: 'bottom',
-	horizontal: 'right',
-};
-
-export const DEFAULT_TRANSFORM_ORIGIN = {
-	vertical: 'top',
-	horizontal: 'right',
-};

package/src/components/ConfirmAction/index.ts

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

package/src/components/ConfirmAction/styles.ts

@@ -1,17 +0,0 @@
-import { styled } from '@mui/material';
-import { Typography } from '../Typography';
-
-export const Wrapper = styled('div')`
-  max-width: 380px;
-  padding: ${({ theme }) => theme.spacing(4)};
-`;
-
-export const StyledTypography = styled(Typography)`
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-`;
-
-export const Actions = styled('div')`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(3)};
-  justify-content: end;
-`;

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

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

package/src/components/ConfirmAction/useLogic/useLogic.ts

@@ -1,46 +0,0 @@
-import { usePopover } from '../../../hooks';
-import { ButtonColors, ButtonVariants } from '../../Button';
-import type { ConfirmActionProps } from '../ConfirmAction';
-
-type UseLogicParams = ConfirmActionProps;
-
-export const useLogic = ({
-	confirmButtonProps: externalConfirmButtonProps,
-	onConfirm,
-}: UseLogicParams) => {
-	const { isOpen, anchor, actions } = usePopover();
-
-	const { isAccented } = externalConfirmButtonProps || {};
-
-	const confirmButtonVariant = isAccented
-		? ButtonVariants.Light
-		: ButtonVariants.Contained;
-
-	const confirmButtonColor = isAccented
-		? ButtonColors.Error
-		: ButtonColors.Primary;
-
-	const handleConfirm = () => {
-		onConfirm();
-		actions.close();
-	};
-
-	return {
-		actionComponentProps: {
-			onClick: actions.open,
-		},
-		popoverProps: {
-			open: isOpen,
-			anchorEl: anchor,
-			onClose: actions.close,
-		},
-		cancelButtonProps: {
-			onClick: actions.close,
-		},
-		confirmButtonProps: {
-			variant: confirmButtonVariant,
-			color: confirmButtonColor,
-			onClick: handleConfirm,
-		},
-	};
-};

package/src/components/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Button } from '../Button';
-
-import { useToggle } from '../../hooks';
-import { ConfirmDialog } from './ConfirmDialog';
-
-/**
- * Необходим для подтверждения действия пользователем.
- */
-const meta: Meta<typeof ConfirmDialog> = {
-	title: 'Components/ConfirmDialog',
-	component: ConfirmDialog,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ConfirmDialog>;
-
-export const Interaction: Story = {
-	args: {
-		open: true,
-		title: 'Подверждение',
-		onClose: () => {},
-		actions: {
-			confirm: {
-				text: 'Да',
-			},
-		},
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-export const Example = () => {
-	const [isActive, handleOpen, handleClose] = useToggle();
-	const [loading, setLoading] = React.useState(false);
-
-	const handleConfirm = () => {
-		setLoading(true);
-
-		return setTimeout(() => {
-			setLoading(false);
-			handleClose();
-		}, 1000);
-	};
-
-	return (
-		<div>
-			<Button variant='contained' onClick={handleOpen}>
-				ConfirmDialog
-			</Button>
-			<ConfirmDialog
-				open={isActive}
-				title='Подверждение'
-				description='Вы подтверждаете действие?'
-				onClose={handleClose}
-				actions={{
-					confirm: { text: 'Да', onClick: handleConfirm, loading },
-					cancel: { text: 'Нет' },
-				}}
-			/>
-		</div>
-	);
-};

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,83 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { Button, type ButtonProps } from '../Button';
-import { Dialog, type DialogProps } from '../Dialog';
-import { DialogActions } from '../DialogActions';
-import { DialogContent } from '../DialogContent';
-import { DialogContentText } from '../DialogContentText';
-
-import { CancelButton } from './styles';
-import { useLogic } from './useLogic';
-
-export type ConfirmDialogProps = {
-	/**
-	 * Заголовок диалога
-	 */
-	title: string;
-	/**
-	 * Вспомогательный текст
-	 */
-	description?: ReactNode;
-	/**
-	 * Функция для закрытия диалога
-	 */
-	onClose: () => void;
-	/**
-	 * Параметры кнопок действий
-	 */
-	actions: {
-		/**
-		 * Параметры кнопки подтверждения
-		 * @example <ConfirmDialog actions={{ confirm: { text: 'Название кнопки' }}}
-		 */
-		confirm: ButtonProps<'button'> & { text: string };
-		/**
-		 * Параметры кнопки отмены. В качестве действия onClick по-умолчанию используется пропс onClose
-		 * @example <ConfirmDialog actions={{ cancel: { text: 'Название кнопки' }}}
-		 */
-		cancel?: ButtonProps<'button'> & { text: string };
-	};
-} & Pick<
-	DialogProps,
-	| 'aria-labelledby'
-	| 'aria-describedby'
-	| 'disableBackdropClick'
-	| 'disablePortal'
-	| 'disableScrollLock'
-	| 'hideBackdrop'
-	| 'keepMounted'
-	| 'open'
->;
-
-export const ConfirmDialog = (props: ConfirmDialogProps) => {
-	const { isShowCancelButton, cancelButtonProps } = useLogic(props);
-
-	const { open, title, description, actions, onClose, ...restProps } = props;
-
-	const { text: confirmText, ...confirmButtonProps } = actions.confirm;
-
-	const {
-		text: cancelText,
-		variant,
-		onClick,
-		...restCancelProps
-	} = actions.cancel || {};
-
-	return (
-		<Dialog title={title} open={open} onClose={onClose} {...restProps}>
-			{description && (
-				<DialogContent>
-					<DialogContentText>{description}</DialogContentText>
-				</DialogContent>
-			)}
-			<DialogActions>
-				{isShowCancelButton && (
-					<CancelButton {...restCancelProps} {...cancelButtonProps}>
-						{cancelText}
-					</CancelButton>
-				)}
-				<Button {...confirmButtonProps}>{confirmText}</Button>
-			</DialogActions>
-		</Dialog>
-	);
-};

package/src/components/ConfirmDialog/index.ts

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

package/src/components/ConfirmDialog/styles.ts

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material';
-import { Button } from '../Button';
-
-export const CancelButton = styled(Button)`
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    order: 1;
-  }
-`;

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

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

package/src/components/ConfirmDialog/useLogic/useLogic.ts

@@ -1,23 +0,0 @@
-import { useViewportType } from '../../../hooks';
-import type { ConfirmDialogProps } from '../ConfirmDialog';
-
-type UseLogicParams = ConfirmDialogProps;
-
-export const useLogic = ({ actions, onClose }: UseLogicParams) => {
-	const { isMobile } = useViewportType();
-	const { cancel } = actions;
-
-	const isShowCancelButton = Boolean(cancel);
-
-	const cancelVariant = isMobile ? 'light' : 'text';
-	const handleCancelClick = cancel?.onClick || onClose;
-
-	const { variant = cancelVariant } = cancel || {};
-
-	const cancelButtonProps = {
-		variant,
-		onClick: handleCancelClick,
-	};
-
-	return { isShowCancelButton, cancelButtonProps };
-};

package/src/components/Container/Container.tsx

@@ -1,15 +0,0 @@
-import type { CSSProperties } from 'react';
-
-import { ContainerRoot, type ContainerRootProps } from './styles';
-
-export type ContainerProps = ContainerRootProps;
-
-export const Container = (
-	props: ContainerRootProps & {
-		style?: CSSProperties;
-		id?: string;
-		ref?: React.Ref<HTMLDivElement>;
-	},
-) => {
-	return <ContainerRoot {...props} />;
-};

package/src/components/Container/index.ts

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

package/src/components/Container/styles.ts

@@ -1,76 +0,0 @@
-import { type Theme, styled } from '@mui/material';
-import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-
-export type ContainerRootProps = {
-	variant?: 'flex' | 'grid';
-	direction?: 'row' | 'column';
-	gap?: number;
-	width?: number | string;
-	height?: number | string;
-	justifyContent?: CSSProperties['justifyContent'];
-	alignItems?: CSSProperties['alignItems'];
-	templateAreas?: CSSProperties['gridTemplateAreas'];
-	templateColumns?: CSSProperties['gridTemplateColumns'];
-	templateRows?: CSSProperties['gridTemplateRows'];
-	children?: ReactNode;
-	padding?: string | number;
-	margin?: string | number;
-	elevation?: number;
-	gridArea?: string;
-	isPaper?: boolean;
-	role?: HTMLAttributes<HTMLDivElement>['role'];
-	hidden?: HTMLAttributes<HTMLDivElement>['hidden'];
-	borderRadius?: number;
-};
-
-export const ContainerRoot = styled('div', {
-	shouldForwardProp: (prop) =>
-		![
-			'variant',
-			'direction',
-			'gap',
-			'width',
-			'height',
-			'justifyContent',
-			'alignItems',
-			'padding',
-			'margin',
-			'gridArea',
-			'templateAreas',
-			'templateColumns',
-			'templateRows',
-			'isPaper',
-			'elevation',
-			'borderRadius',
-		].includes(prop.toString()),
-	label: 'Container',
-})<ContainerRootProps>`
-  display: ${({
-		variant = 'flex',
-		templateAreas,
-		templateColumns,
-		templateRows,
-	}) => (templateRows || templateColumns || templateAreas ? 'grid' : variant)};
-  flex-direction: ${({ direction = 'row' }) => direction};
-  flex-wrap: ${({ direction = 'row' }) =>
-		direction === 'row' ? 'nowrap' : 'wrap'};
-  gap: ${({ gap = 2, theme }) => theme.spacing(gap)};
-  width: ${({ width }) => (typeof width === 'number' ? `${width}px` : width)};
-  height: ${({ height }) =>
-		typeof height === 'number' ? `${height}px` : height};
-  justify-content: ${({ justifyContent = 'flex-start' }) => justifyContent};
-  align-items: ${({ alignItems }) => alignItems};
-  grid-area: ${({ gridArea }) => gridArea};
-  grid-template-areas: ${({ templateAreas }) => templateAreas};
-  grid-template-columns: ${({ templateColumns }) => templateColumns};
-  grid-template-rows: ${({ templateRows }) => templateRows};
-  box-shadow: ${({ theme, elevation = 0 }) => theme.shadows[elevation]};
-  border-radius: ${({ theme, borderRadius = 4 }) =>
-		theme.spacing(borderRadius)}px;
-  background-color: ${({ theme, isPaper }) =>
-		isPaper ? theme.palette.background.paper : 'transparent'};
-  padding: ${({ padding, theme }) =>
-		typeof padding === 'number' ? theme.spacing(padding) : padding};
-  margin: ${({ margin, theme }) =>
-		typeof margin === 'number' ? theme.spacing(margin) : margin};
-`;