@max-ts/components 0.0.2

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

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconButton } from '../IconButton';
+
+import { Trash } from 'lucide-react';
+import { ConfirmAction } from './ConfirmAction';
+
+/**
+ * Используется для подтверждения действия пользователя.
+ *
+ * ### [Figma](https://www.figma.com/design/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?node-id=30167-461154&node-type=frame&t=GgA8Lk5RPtTzJk3I-0)
+ * ### [Guide]()
+ */
+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

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

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

package/src/components/ConfirmAction/index.ts

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

package/src/components/ConfirmAction/styles.ts

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

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

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

@@ -0,0 +1,46 @@
+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/Container/Container.tsx

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

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

package/src/components/Container/styles.ts

@@ -0,0 +1,76 @@
+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};
+`;

package/src/components/ContentState/ContentState.stories.tsx

@@ -0,0 +1,243 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	type MouseEventHandler,
+	type PropsWithChildren,
+	useState,
+} from 'react';
+
+import { Button } from '../Button';
+import { ConfigProvider } from '../ConfigProvider';
+import { TextField } from '../TextField';
+
+import { styled } from '@mui/material';
+import { Container } from '../Container';
+import { ContentState } from './ContentState';
+
+const errorIllustration = '../../illustrations/error.svg';
+const certificatesNotFound = '../../illustrations/certificates-not-found.svg';
+const noDataIllustration = '../../illustrations/no-data.svg';
+const outdatedReleaseIllustration = '../../illustrations/outdated-release.svg';
+const techSupIllustration = '../../illustrations/technical-support.svg';
+
+/**
+ * ContentState - это компонент, позволяющий отображать статусы выполнения асинхронных операций (загрузка, успех и ошибка)
+ *
+ * ### [Guide]()
+ */
+const meta: Meta<typeof ContentState> = {
+	title: 'Components/ContentState',
+	component: ContentState,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContentState>;
+
+export const Interaction: Story = {
+	args: {
+		children: (
+			<>
+				<TextField label='Название' />
+				<Button>Отправить</Button>
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const useSimulateLoading = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState('');
+	const [isSuccess, setIsSucces] = useState(false);
+
+	const TIMEOUT = 1000;
+
+	const fetch = () => {
+		setError('');
+		setIsLoading(true);
+		setIsSucces(false);
+
+		setTimeout(() => {
+			setIsLoading(false);
+			setIsSucces(true);
+		}, TIMEOUT);
+	};
+
+	const fetchWithError = () => {
+		setIsLoading(true);
+		setIsSucces(false);
+
+		setTimeout(() => {
+			setIsLoading(false);
+			setError('Сервис недоступен');
+		}, TIMEOUT);
+	};
+
+	return { isLoading, error, fetch, fetchWithError, isSuccess };
+};
+
+const BaseContentContainer = styled(Container)`
+  overflow: hidden;
+  place-content: center center;
+
+  width: 384px;
+  height: 384px;
+`;
+
+const Form = ({
+	onSubmit,
+	children,
+}: PropsWithChildren<{ onSubmit: MouseEventHandler<HTMLButtonElement> }>) => {
+	return (
+		<Container>
+			<TextField label='Название' />
+			<Button onClick={onSubmit}>Отправить</Button>
+			{children}
+		</Container>
+	);
+};
+
+export const Example = () => {
+	const { fetch, fetchWithError, isLoading, error } = useSimulateLoading();
+
+	return (
+		<BaseContentContainer>
+			<ContentState
+				isError={Boolean(error)}
+				isLoading={isLoading}
+				errorState={{
+					imgSrc: errorIllustration,
+					imgAlt: 'Ошибка',
+					onRetry: fetch,
+					errorList: [error],
+				}}
+			>
+				<Form onSubmit={fetch}>
+					<Button onClick={fetchWithError}>Отправить с ошибкой</Button>
+				</Form>
+			</ContentState>
+		</BaseContentContainer>
+	);
+};
+
+export const IsLoading = () => {
+	const { fetch, isLoading } = useSimulateLoading();
+
+	return (
+		<BaseContentContainer>
+			<ContentState isLoading={isLoading}>
+				<Form onSubmit={fetch} />
+			</ContentState>
+		</BaseContentContainer>
+	);
+};
+
+export const LoadingContent = () => {
+	const { fetch, isLoading } = useSimulateLoading();
+
+	return (
+		<BaseContentContainer>
+			<ContentState
+				isLoading={isLoading}
+				loadingContent='Пожалуйста, подождите...'
+			>
+				<Form onSubmit={fetch} />
+			</ContentState>
+		</BaseContentContainer>
+	);
+};
+
+/**
+ * При ошибке по умолчанию отображается ```defaultErrorImgSrc``` из ```ConfigProvider```
+ */
+export const ErrorState = () => {
+	const { fetchWithError, isLoading, error } = useSimulateLoading();
+
+	return (
+		<BaseContentContainer>
+			<ConfigProvider
+				imagesMap={{
+					defaultErrorImgSrc: errorIllustration,
+					noDataImgSrc: noDataIllustration,
+					outdatedReleaseErrorImgSrc: outdatedReleaseIllustration,
+				}}
+			>
+				<ContentState
+					isLoading={isLoading}
+					isError={Boolean(error)}
+					errorState={{
+						imgAlt: 'Ошибка',
+						onRetry: fetchWithError,
+						errorList: [error],
+					}}
+				>
+					<Form onSubmit={fetchWithError} />
+				</ContentState>
+			</ConfigProvider>
+		</BaseContentContainer>
+	);
+};
+
+/**
+ * Переопределение картинки для ошибки
+ *
+ * По умолчанию (без указанного ```errorState.imgSrc```) отображается ```defaultErrorImgSrc``` из ```ConfigProvider```
+ */
+export const ErrorStateWithCustomImg = () => {
+	const { fetchWithError, isLoading, error } = useSimulateLoading();
+
+	return (
+		<BaseContentContainer>
+			<ConfigProvider
+				imagesMap={{
+					defaultErrorImgSrc: errorIllustration,
+					noDataImgSrc: noDataIllustration,
+					outdatedReleaseErrorImgSrc: outdatedReleaseIllustration,
+				}}
+			>
+				<ContentState
+					isLoading={isLoading}
+					isError={Boolean(error)}
+					errorState={{
+						imgSrc: techSupIllustration,
+						imgAlt: 'Ошибка',
+						onRetry: fetchWithError,
+						errorList: [error],
+					}}
+				>
+					<Form onSubmit={fetchWithError} />
+				</ContentState>
+			</ConfigProvider>
+		</BaseContentContainer>
+	);
+};
+
+/**
+ * Prop ```CustomState``` позволяет отобразить кастомное состояние при ```isCustom === true```
+ *
+ * Prop ```CustomState``` принимает объект с props для [Placeholder](/docs/components-placeholder--docs)
+ */
+export const CustomState = () => {
+	const { fetch, isLoading, isSuccess } = useSimulateLoading();
+
+	return (
+		<BaseContentContainer>
+			<ContentState
+				isLoading={isLoading}
+				isCustom={isSuccess}
+				customState={{
+					imgSrc: certificatesNotFound,
+					imgAlt: 'Ваша заявка принята',
+					title: 'Ваша заявка принята',
+					description: 'Мы свяжемся с вами позже',
+				}}
+			>
+				<Form onSubmit={fetch} />
+			</ContentState>
+		</BaseContentContainer>
+	);
+};