@max-ts/components 0.0.2

package/src/components/Placeholder/Placeholder.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { ConfigProvider } from '../ConfigProvider';
+import { Typography } from '../Typography';
+
+import type { ImageProps } from './Image';
+import { Placeholder } from './Placeholder';
+
+const certificatesNotFound = '../../illustrations/certificates-not-found.svg';
+import { styled } from '@mui/material';
+
+/**
+ * Предназначен для отображения статусов. Используется внутри [ContentState](/story/components-contentstate--docs).
+ * Примеры частных реализаций представлены в [InternalErrorPlaceholder](?path=/docs/components-data-display-placeholders-internalerrorplaceholder--docs) и [OutdatedReleasePlaceholder](?path=/docs/components-data-display-placeholders-outdatedreleaseplaceholder--docs)
+ */
+const meta: Meta<typeof Placeholder> = {
+	title: 'Components/Data Display/Placeholder',
+	component: Placeholder,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Placeholder>;
+
+export const Interaction: Story = {
+	args: {
+		title: 'Заявка успешно отправлена',
+		description: 'Вы успешно отправили заявку',
+		imgSrc: certificatesNotFound,
+		imgAlt: 'alt',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => (
+	<Placeholder
+		title='Заявка успешно отправлена'
+		description={
+			<>
+				Вы успешно отправили заявку{' '}
+				<Typography color='red' component='span'>
+					22
+				</Typography>
+				.
+			</>
+		}
+		imgSrc={certificatesNotFound}
+		imgAlt='альтернативный текст изображения'
+		Actions={
+			<>
+				<Button variant='text'>Вернуться</Button>
+				<Button>ОК</Button>
+			</>
+		}
+	/>
+);
+
+const List = styled('div')`
+  display: flex;
+  flex-direction: column;
+  row-gap: 50px;
+`;
+
+export const Size = () => {
+	return (
+		<List>
+			<Placeholder
+				title='Заголовок страницы'
+				description='Текст для пользователя, разъясняющий принципы работы раздела или подсказки по работе в нем.'
+				imgSrc={certificatesNotFound}
+				imgAlt='альтернативный текст изображения'
+				size='small'
+				Actions={
+					<>
+						<Button variant='text'>Вернуться</Button>
+						<Button>ОК</Button>
+					</>
+				}
+			/>
+
+			<Placeholder
+				title='Заголовок страницы'
+				description='Текст для пользователя, разъясняющий принципы работы раздела или подсказки по работе в нем.'
+				imgSrc={certificatesNotFound}
+				imgAlt='альтернативный текст изображения'
+				size='medium'
+				Actions={
+					<>
+						<Button variant='text'>Вернуться</Button>
+						<Button>ОК</Button>
+					</>
+				}
+			/>
+
+			<Placeholder
+				title='Заголовок страницы'
+				description='Текст для пользователя, разъясняющий принципы работы раздела или подсказки по работе в нем.'
+				imgSrc={certificatesNotFound}
+				imgAlt='альтернативный текст изображения'
+				size='large'
+				Actions={
+					<>
+						<Button variant='text'>Вернуться</Button>
+						<Button>ОК</Button>
+					</>
+				}
+			/>
+		</List>
+	);
+};
+
+/**
+ * `renderImage` позволяет кастомизировать рендер изображения
+ */
+export const RenderImage = () => {
+	const CustomRenderImage = (props: ImageProps) => {
+		return (
+			<svg
+				width={props.width}
+				height={props.height}
+				className={props.className}
+			>
+				<title>{props.alt}</title>
+				<use href={`${props.src}#main`} />
+			</svg>
+		);
+	};
+
+	return (
+		<Placeholder
+			title='Заголовок страницы'
+			description='Текст для пользователя, разъясняющий принципы работы раздела или подсказки по работе в нем.'
+			imgAlt='альтернативный текст изображения'
+			size='large'
+			renderImage={CustomRenderImage}
+			Actions={
+				<>
+					<Button variant='text'>Вернуться</Button>
+					<Button>ОК</Button>
+				</>
+			}
+		/>
+	);
+};
+
+/**
+ * Пропс для конфига предназначенный для установки renderImage сразу во всех возможных Placeholder компонентах
+ */
+export const ConfigRenderImage = () => {
+	const CustomRenderImage = (props: ImageProps) => {
+		return (
+			<svg
+				width={props.width}
+				height={props.height}
+				className={props.className}
+			>
+				<title>{props.alt}</title>
+				<use href={`${props.src}#main`} />
+			</svg>
+		);
+	};
+
+	return (
+		<ConfigProvider
+			components={{
+				placeholder: {
+					defaultProps: { renderImage: CustomRenderImage },
+				},
+			}}
+		>
+			<List>
+				<Placeholder
+					title='Заголовок страницы'
+					description='Текст для пользователя, разъясняющий принципы работы раздела или подсказки по работе в нем.'
+					imgAlt='альтернативный текст изображения'
+					size='large'
+					Actions={
+						<>
+							<Button variant='text'>Вернуться</Button>
+							<Button>ОК</Button>
+						</>
+					}
+				/>
+				<Placeholder
+					title='Заголовок страницы'
+					description='Текст для пользователя, разъясняющий принципы работы раздела или подсказки по работе в нем.'
+					imgAlt='альтернативный текст изображения'
+					size='large'
+					Actions={
+						<>
+							<Button variant='text'>Вернуться</Button>
+							<Button>ОК</Button>
+						</>
+					}
+				/>
+			</List>
+		</ConfigProvider>
+	);
+};

package/src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,108 @@
+import { type ReactNode, useContext, useMemo } from 'react';
+
+import { ConfigContext } from '../ConfigProvider';
+
+import { Image, type ImageProps, setDefaultImageStyles } from './Image';
+import { IMAGE_HEIGHT, IMAGE_WIDTH, TITLE_HEADER_LEVEL } from './constants';
+import { Description, Footer, InnerContainer, Title, Wrapper } from './styles';
+import type { PlaceholderSize } from './types';
+
+export type PlaceholderProps = {
+	/**
+	 * Название класса, применяется к корневому компоненту
+	 */
+	className?: string;
+
+	/**
+	 * Ссылка на изображение
+	 */
+	imgSrc?: string;
+
+	/**
+	 * Описание изображения (атрибут alt)
+	 */
+	imgAlt?: string;
+
+	/**
+	 * @deprecated
+	 * Ширина изображения. Причина отказа от поддержки: ширина теперь высчитывается на основе prop size
+	 */
+	imgWidth?: string;
+
+	/**
+	 * Заголовок
+	 */
+	title: ReactNode | ReactNode[] | string;
+
+	/**
+	 * Описание
+	 */
+	description?: ReactNode | ReactNode[] | string;
+
+	/**
+	 * Действия
+	 */
+	Actions?: ReactNode;
+
+	/**
+	 * Задает общий размер компонента
+	 */
+	size?: PlaceholderSize;
+	/**
+	 * Пропс для кастомизации компонента рендера основного изображения
+	 * По умолчанию рендерится обычный img тег
+	 * @example <Placeholder renderImage={(props) => <img {...props}/>} />
+	 */
+	renderImage?: (props: ImageProps) => ReactNode;
+};
+
+export const Placeholder = ({
+	className,
+	title,
+	imgSrc,
+	imgAlt,
+	description,
+	Actions,
+	size = 'small',
+	imgWidth,
+	renderImage,
+}: PlaceholderProps) => {
+	const config = useContext(ConfigContext);
+	const configRenderImage =
+		config.components?.placeholder?.defaultProps?.renderImage;
+
+	const RenderImage = useMemo(
+		() =>
+			(renderImage && setDefaultImageStyles(renderImage)) ||
+			(configRenderImage && setDefaultImageStyles(configRenderImage)) ||
+			Image,
+		[renderImage, configRenderImage],
+	);
+
+	return (
+		<Wrapper $size={size} className={className}>
+			<InnerContainer $size={size}>
+				{imgSrc && (
+					<RenderImage
+						src={imgSrc}
+						alt={imgAlt}
+						width={imgWidth || IMAGE_WIDTH[size]}
+						height={imgWidth ? 'auto' : IMAGE_HEIGHT[size]}
+						size={size}
+					/>
+				)}
+				<Title $size={size} variant={TITLE_HEADER_LEVEL[size]}>
+					{title}
+				</Title>
+
+				{description && (
+					<Description $size={size} component='div' variant='body1'>
+						{description}
+					</Description>
+				)}
+			</InnerContainer>
+
+			{Actions && <Footer>{Actions}</Footer>}
+		</Wrapper>
+	);
+};

package/src/components/Placeholder/constants.ts

@@ -0,0 +1,31 @@
+import type { PlaceholderSize } from './types';
+
+export const SIZE: Record<Capitalize<PlaceholderSize>, PlaceholderSize> = {
+	Small: 'small',
+	Medium: 'medium',
+	Large: 'large',
+} as const;
+
+export const IMAGE_WIDTH = {
+	[SIZE.Small]: '239px',
+	[SIZE.Medium]: '323px',
+	[SIZE.Large]: '458px',
+};
+
+export const IMAGE_HEIGHT = {
+	[SIZE.Small]: '119px',
+	[SIZE.Medium]: '161px',
+	[SIZE.Large]: '229px',
+};
+
+export const MAX_INNER_WIDTH = {
+	[SIZE.Small]: '384px',
+	[SIZE.Medium]: '400px',
+	[SIZE.Large]: '460px',
+};
+
+export const TITLE_HEADER_LEVEL = {
+	[SIZE.Small]: 'h5',
+	[SIZE.Medium]: 'h4',
+	[SIZE.Large]: 'h3',
+} as const;

package/src/components/Placeholder/index.ts

@@ -0,0 +1,5 @@
+export * from './types';
+
+export * from './Image';
+
+export * from './Placeholder';

package/src/components/Placeholder/styles.ts

@@ -0,0 +1,94 @@
+import { styled } from '@mui/material';
+import { Typography } from '../Typography';
+
+import { MAX_INNER_WIDTH, SIZE } from './constants';
+import type { PlaceholderSize } from './types';
+
+export type WithSize = {
+	$size: PlaceholderSize;
+};
+
+const shouldForwardProp = (propName: string) => {
+	return propName !== '$size';
+};
+
+export const Wrapper = styled('div', {
+	shouldForwardProp,
+})<WithSize>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme, $size }) =>
+		$size === SIZE.Small ? theme.spacing(4) : theme.spacing(6)};
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  background-color: ${({ theme }) => theme.palette.background.paper};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr max-content;
+    gap: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export const InnerContainer = styled('div', {
+	shouldForwardProp,
+})<WithSize>`
+  max-width: ${({ $size }) => MAX_INNER_WIDTH[$size]};
+  margin: 0 auto;
+`;
+
+export const Title = styled(Typography, {
+	shouldForwardProp,
+})<WithSize>`
+  margin-bottom: ${({ theme, $size }) =>
+		$size === SIZE.Small ? theme.spacing(2) : theme.spacing(4)};
+
+  text-align: center;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+
+    font-size: ${({ theme }) => theme.typography.pxToRem(20)};
+    font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;
+
+export const Description = styled(Typography, {
+	shouldForwardProp,
+})<WithSize>`
+  display: block;
+
+  font-size: ${({ $size, theme }) =>
+		$size === SIZE.Large
+			? theme.typography.pxToRem(16)
+			: theme.typography.body1.fontSize};
+  text-align: center;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    font-size: ${({ theme }) => theme.typography.body1.fontSize};
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;
+
+export const Footer = styled('footer')`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+
+  color: ${({ theme }) => theme.palette.grey[900]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-direction: column;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    margin-top: auto;
+  }
+`;

package/src/components/Placeholder/types.ts

@@ -0,0 +1 @@
+export type PlaceholderSize = 'small' | 'medium' | 'large';

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,210 @@
+import { type PopoverOrigin, styled } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type MouseEvent, useState } from 'react';
+
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+
+import { Container } from '../Container';
+import { Popover } from './Popover';
+
+/**
+ * ### [Figma](https://www.figma.com/file/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(АКТУАЛЬНО)?type=design&node-id=8444-83809&mode=design)
+ * ### [Guide]()
+ */
+
+const meta: Meta<typeof Popover> = {
+	title: 'Components/Popover',
+	component: Popover,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+const PopoverContainer = styled('div')`
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const Interaction: Story = {
+	args: {
+		open: true,
+		children: 'контент popover',
+		anchorPosition: { top: 50, left: 50 },
+		anchorReference: 'anchorPosition',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<Button variant='contained' onClick={handleClick}>
+				Открыть Popover
+			</Button>
+			<Popover
+				title='Заголовок'
+				open={Boolean(anchorEl)}
+				anchorEl={anchorEl}
+				onClose={handleClose}
+				anchorOrigin={{
+					vertical: 'bottom',
+					horizontal: 'left',
+				}}
+			>
+				<PopoverContainer>
+					<Typography>Контент Popover</Typography>
+				</PopoverContainer>
+			</Popover>
+		</>
+	);
+};
+
+const GridContainer = styled(Container)`
+  flex-direction: row;
+  gap: 10px;
+
+  margin-top: 30px;
+
+  ${({ theme }) => theme.spacing(2)};
+`;
+
+export const TransformOrigin = () => {
+	const transformOriginVariants = [
+		{ vertical: 'top', horizontal: 'left' },
+		{ vertical: 'top', horizontal: 'center' },
+		{ vertical: 'top', horizontal: 'right' },
+		{ vertical: 'center', horizontal: 'left' },
+		{ vertical: 'center', horizontal: 'center' },
+		{ vertical: 'center', horizontal: 'right' },
+		{ vertical: 'bottom', horizontal: 'left' },
+		{ vertical: 'bottom', horizontal: 'center' },
+		{ vertical: 'bottom', horizontal: 'right' },
+	];
+	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+	const [selectedPosition, setSelectedPosition] = useState<PopoverOrigin>({
+		vertical: 'top',
+		horizontal: 'right',
+	});
+
+	const handleOpen = (
+		position: { vertical: string; horizontal: string },
+		event: MouseEvent<HTMLButtonElement>,
+	) => {
+		setSelectedPosition({
+			vertical: position.vertical as PopoverOrigin['vertical'],
+			horizontal: position.horizontal as PopoverOrigin['horizontal'],
+		});
+
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<GridContainer>
+				{transformOriginVariants.map(({ vertical, horizontal }) => (
+					<Button
+						key={`${vertical}-${horizontal}`}
+						onClick={(event: MouseEvent<HTMLButtonElement>) =>
+							handleOpen({ vertical, horizontal }, event)
+						}
+					>
+						Open {vertical}-{horizontal}
+					</Button>
+				))}
+
+				<Popover
+					open={Boolean(anchorEl)}
+					anchorEl={anchorEl}
+					onClose={handleClose}
+					transformOrigin={selectedPosition}
+				>
+					<PopoverContainer>
+						<Typography>Контент Popover</Typography>
+					</PopoverContainer>
+				</Popover>
+			</GridContainer>
+		</>
+	);
+};
+
+export const AnchorOrigin = () => {
+	const anchorOriginVariants = [
+		{ vertical: 'top', horizontal: 'left' },
+		{ vertical: 'top', horizontal: 'center' },
+		{ vertical: 'top', horizontal: 'right' },
+		{ vertical: 'center', horizontal: 'left' },
+		{ vertical: 'center', horizontal: 'center' },
+		{ vertical: 'center', horizontal: 'right' },
+		{ vertical: 'bottom', horizontal: 'left' },
+		{ vertical: 'bottom', horizontal: 'center' },
+		{ vertical: 'bottom', horizontal: 'right' },
+	];
+	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+	const [selectedPosition, setSelectedPosition] = useState<PopoverOrigin>({
+		vertical: 'top',
+		horizontal: 'right',
+	});
+
+	const handleOpen = (
+		position: { vertical: string; horizontal: string },
+		event: MouseEvent<HTMLButtonElement>,
+	) => {
+		setSelectedPosition({
+			vertical: position.vertical as PopoverOrigin['vertical'],
+			horizontal: position.horizontal as PopoverOrigin['horizontal'],
+		});
+
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<>
+			<GridContainer>
+				{anchorOriginVariants.map(({ vertical, horizontal }) => (
+					<Button
+						key={`${vertical}-${horizontal}`}
+						onClick={(event: MouseEvent<HTMLButtonElement>) =>
+							handleOpen({ vertical, horizontal }, event)
+						}
+					>
+						Open {vertical}-{horizontal}
+					</Button>
+				))}
+
+				<Popover
+					open={Boolean(anchorEl)}
+					anchorEl={anchorEl}
+					onClose={handleClose}
+					anchorOrigin={selectedPosition}
+				>
+					<PopoverContainer>
+						<Typography>Контент Popover</Typography>
+					</PopoverContainer>
+				</Popover>
+			</GridContainer>
+		</>
+	);
+};

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,39 @@
+import {
+	Popover as MuiPopover,
+	type PopoverProps as MuiPopoverProps,
+} from '@mui/material';
+
+import { useViewportType } from '../../hooks';
+import { BottomDrawer } from '../BottomDrawer';
+import type { WithoutEmotionSpecific } from '../types';
+
+export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
+	/**
+	 * Заголовок для отображения в мобильной версии
+	 */
+	title?: string;
+};
+
+export const Popover = ({
+	children,
+	onClose,
+	open,
+	title,
+	...restProps
+}: PopoverProps) => {
+	const { isMobile } = useViewportType();
+
+	if (isMobile) {
+		return (
+			<BottomDrawer title={title} onClose={onClose} open={open}>
+				{children}
+			</BottomDrawer>
+		);
+	}
+
+	return (
+		<MuiPopover open={open} onClose={onClose} {...restProps}>
+			{children}
+		</MuiPopover>
+	);
+};

package/src/components/Popover/index.ts

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