@max-ts/components 0.1.1 → 0.2.1

package/src/components/DescriptionList/types.ts

@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { DescriptionProps } from '../Description';
-import type { ValueProps } from '../Description/Value';
-
-export type DescriptionOptions = Pick<
-	ValueProps,
-	'canCopy' | 'copyPosition' | 'color' | 'copyText'
-> & {
-	nameMaxWidth?: string;
-	/**
-	 *  Вариант отображения Value в списке
-	 */
-	variant?: 'tag' | 'default' | 'guid';
-	renderValue?: (
-		value: ReactNode,
-		optionProps: Omit<DescriptionOptions, 'nameMaxWidth'>,
-	) => ReactNode;
-};
-
-export type DescriptionListItem = {
-	name: ReactNode;
-	value: ReactNode;
-	options?: DescriptionOptions;
-};
-
-export type DescriptionListVariant = 'contained' | 'default';
-
-export type DescriptionListProps = Pick<
-	DescriptionProps,
-	'justifyContent' | 'leader' | 'separator' | 'direction'
-> & {
-	/**
-	 * Список отображаемых "name: value"
-	 */
-	items: DescriptionListItem[];
-	/**
-	 * Вариант отображения списка
-	 * @default default
-	 */
-	variant?: DescriptionListVariant;
-	/**
-	 * Заголовок блока
-	 */
-	title?: ReactNode;
-};

package/src/components/DescriptionList/utils/getTooltipProps/getTooltipProps.ts

@@ -1,3 +0,0 @@
-export const getTooltipProps = (canCopy?: boolean) => {
-	return canCopy ? { title: undefined } : undefined;
-};

package/src/components/DescriptionList/utils/getTooltipProps/index.ts

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

package/src/components/DescriptionList/utils/index.ts

@@ -1 +0,0 @@
-export { getTooltipProps } from './getTooltipProps';

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,430 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { Button } from '../Button';
-import { DialogActions as DialogActionComponent } from '../DialogActions';
-import { DialogContent } from '../DialogContent';
-import { DialogContentText } from '../DialogContentText';
-import { DialogHeader } from '../DialogHeader';
-import { Typography } from '../Typography';
-
-import React from 'react';
-import { Container } from '../Container';
-import { DescriptionList, type DescriptionListItem } from '../DescriptionList';
-import { Tag } from '../Tag';
-import { Dialog } from './Dialog';
-
-type Story = StoryObj<typeof Dialog>;
-
-/**
- * Когда требуется, чтобы пользователи взаимодействовали с приложением, но без перехода на новую страницу и прерывания рабочего процесса пользователя, нужно использовать Dialog.
- * Может содержать:
- *  - [DialogHeader](/story/components-dialog-dialogheader--docs)
- *  - [DialogActions](/story/components-dialog-dialogactions--docs)
- *  - [DialogContent](/story/components-dialog-dialogcontent--docs)
- *  - [DialogContentText](/story/components-dialog-dialogcontenttext--docs)
- *
- * ### [Figma](https://www.figma.com/file/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?type=design&node-id=95-159&mode=design&t=5c0oZ9TMtlkNyOeB-0)
- * ### [Guide]()
- */
-const meta: Meta<typeof Dialog> = {
-	title: 'Components/Dialog',
-	component: Dialog,
-};
-
-export default meta;
-
-export const Interaction: Story = {
-	args: {
-		title: 'Заголовок диалога',
-		open: false,
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-const FAKE_ITEMS: DescriptionListItem[] = [
-	{
-		name: 'Дата поступления',
-		value: '12.06.2024 в 11:11',
-	},
-	{
-		name: 'Тип заявки',
-		value: 'Создание',
-	},
-	{
-		name: 'ID учетной записи',
-		value: '4d1f0594-bc22-4660-8e7d-83a024126ef3',
-	},
-	{
-		name: 'ID док-оборота',
-		value: '222a1343-rf12-6660-1e3q-88a911143yr1',
-	},
-	{
-		name: 'ИНН',
-		value: '77724528768',
-	},
-	{
-		name: 'КПП',
-		value: '772401001',
-	},
-	{
-		name: 'Конфигурация',
-		value: 'Значение показателя',
-	},
-	{
-		name: 'Удостоверенный центр',
-		value: 'УЦ «Калуга Астрал»',
-	},
-];
-
-export const Example = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const handleClickOpen = () => {
-		setIsOpen(true);
-	};
-
-	const handleClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<>
-			<Button onClick={handleClickOpen}>Default dialog</Button>
-			<Dialog open={isOpen} onClose={handleClose} title='Заголовок'>
-				<DialogContent>
-					<DialogContentText>
-						Заглушка примера текста страницы, который несет очень важный смысл
-						для пользователя и предлагает ему варианты выбора действий с
-						контентом и в рамках работы приложения.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActionComponent>
-					<Button variant='text' onClick={handleClose}>
-						Отмена
-					</Button>
-					<Button autoFocus onClick={handleClose}>
-						Готово
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-		</>
-	);
-};
-
-export const CustomTitle = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const handleClickOpen = () => {
-		setIsOpen(true);
-	};
-
-	const handleClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<>
-			<Button onClick={handleClickOpen}>Custom title</Button>
-			<Dialog
-				open={isOpen}
-				onClose={handleClose}
-				title={
-					<>
-						Заголовок
-						<Typography color='grey' colorIntensity='500'>
-							| Подзаголовок
-						</Typography>
-					</>
-				}
-			>
-				<DialogContent>
-					<DialogContentText>
-						Заглушка примера текста страницы, который несет очень важный смысл
-						для пользователя и предлагает ему варианты выбора действий с
-						контентом и в рамках работы приложения.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActionComponent>
-					<Button variant='text' onClick={handleClose}>
-						Отмена
-					</Button>
-					<Button autoFocus onClick={handleClose}>
-						Готово
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-		</>
-	);
-};
-
-/**
- * [DialogHeader](/story/components-dialog-dialogheader--docs)
- * */
-export const CustomHeader = () => {
-	const [isOpenHeaderLeft, setIsOpenHeaderLeft] = useState(false);
-	const [isOpenHeaderRight, setIsOpenHeaderRight] = useState(false);
-
-	const handleOpenHeaderLeft = () => {
-		setIsOpenHeaderLeft(true);
-	};
-
-	const handleCloseHeaderLeft = () => {
-		setIsOpenHeaderLeft(false);
-	};
-
-	const handleOpenHeaderRight = () => {
-		setIsOpenHeaderRight(true);
-	};
-
-	const handleCloseHeaderRight = () => {
-		setIsOpenHeaderRight(false);
-	};
-
-	return (
-		<>
-			<Container gap={2}>
-				<Button onClick={handleOpenHeaderLeft}>Dialog header left</Button>
-				<Button onClick={handleOpenHeaderRight}>Dialog header left</Button>
-			</Container>
-			<Dialog open={isOpenHeaderLeft} onClose={handleCloseHeaderLeft}>
-				<DialogHeader title='Заголовок' onClose={handleCloseHeaderLeft}>
-					<Tag variant='light' label='Light Tag' color='primary' />
-				</DialogHeader>
-				<DialogContent>
-					<DialogContentText id='alert-dialog-description'>
-						Заглушка примера текста страницы, который несет очень важный смысл
-						для пользователя и предлагает ему варианты выбора действий с
-						контентом и в рамках работы приложения.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActionComponent>
-					<Button variant='text' onClick={handleCloseHeaderLeft}>
-						Отмена
-					</Button>
-					<Button autoFocus onClick={handleCloseHeaderLeft}>
-						Готово
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-			<Dialog open={isOpenHeaderRight} onClose={handleCloseHeaderRight}>
-				<DialogHeader
-					title='Заголовок'
-					onClose={handleCloseHeaderRight}
-					justifyContent='flex-end'
-				>
-					<Tag variant='contained' label='Light Tag' color='primary' />
-				</DialogHeader>
-				<DialogContent>
-					<DialogContentText id='alert-dialog-description'>
-						Заглушка примера текста страницы, который несет очень важный смысл
-						для пользователя и предлагает ему варианты выбора действий с
-						контентом и в рамках работы приложения.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActionComponent>
-					<Button variant='text' onClick={handleCloseHeaderRight}>
-						Отмена
-					</Button>
-					<Button autoFocus onClick={handleCloseHeaderRight}>
-						Готово
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-		</>
-	);
-};
-
-/**
- * [DialogActions](/story/components-dialog-dialogactions--docs)
- * */
-export const DialogActions = () => {
-	const [isOpenDefault, setIsOpenDefault] = useState(false);
-	const [isOpenMoreActions, setIsOpenMoreActions] = useState(false);
-
-	const handleOpenDefault = () => {
-		setIsOpenDefault(true);
-	};
-
-	const handleCloseDefault = () => {
-		setIsOpenDefault(false);
-	};
-
-	const handleOpenMoreActions = () => {
-		setIsOpenMoreActions(true);
-	};
-
-	const handleCloseMoreActions = () => {
-		setIsOpenMoreActions(false);
-	};
-
-	return (
-		<>
-			<Container gap={2}>
-				<Button onClick={handleOpenDefault}>Dialog actions</Button>
-				<Button onClick={handleOpenMoreActions}>Dialog more actions</Button>
-			</Container>
-			<Dialog
-				open={isOpenDefault}
-				onClose={handleCloseDefault}
-				title='Заголовок'
-			>
-				<DialogContent>
-					<DialogContentText>
-						Заглушка примера текста страницы, который несет очень важный смысл
-						для пользователя и предлагает ему варианты выбора действий с
-						контентом и в рамках работы приложения.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActionComponent>
-					<Button variant='text' onClick={handleCloseDefault}>
-						Отмена
-					</Button>
-					<Button autoFocus onClick={handleCloseDefault}>
-						Готово
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-			<Dialog
-				open={isOpenMoreActions}
-				onClose={handleCloseMoreActions}
-				title='Заголовок'
-			>
-				<DialogContent>
-					<DialogContentText id='alert-dialog-description'>
-						Заглушка примера текста страницы, который несет очень важный смысл
-						для пользователя и предлагает ему варианты выбора действий с
-						контентом и в рамках работы приложения.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActionComponent>
-					<Button variant='text' onClick={handleCloseMoreActions}>
-						Вернуться позже
-					</Button>
-					<Button variant='text' onClick={handleCloseMoreActions}>
-						Отмена
-					</Button>
-					<Button autoFocus onClick={handleCloseMoreActions}>
-						Готово
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-		</>
-	);
-};
-
-export const Size = () => {
-	const [openXs, setOpenXs] = useState(false);
-	const [openSm, setOpenSm] = useState(false);
-	const [openMd, setOpenMd] = useState(false);
-	const [openLg, setOpenLg] = useState(false);
-	const [openXl, setOpenXl] = useState(false);
-
-	const handleCloseXs = () => {
-		setOpenXs(false);
-	};
-	const handleCloseSm = () => {
-		setOpenSm(false);
-	};
-	const handleCloseMd = () => {
-		setOpenMd(false);
-	};
-	const handleCloseLg = () => {
-		setOpenLg(false);
-	};
-
-	const handleCloseXl = () => {
-		setOpenXl(false);
-	};
-
-	return (
-		<>
-			<Container gap={2}>
-				<Button onClick={() => setOpenXs((prevState) => !prevState)}>
-					Dialog xs size
-				</Button>
-				<Button onClick={() => setOpenSm((prevState) => !prevState)}>
-					Dialog sm size
-				</Button>
-				<Button onClick={() => setOpenMd((prevState) => !prevState)}>
-					Dialog md size
-				</Button>
-				<Button onClick={() => setOpenLg((prevState) => !prevState)}>
-					Dialog lg size
-				</Button>
-				<Button onClick={() => setOpenXl((prevState) => !prevState)}>
-					Dialog xl size
-				</Button>
-			</Container>
-			<Dialog open={openXs} onClose={handleCloseXs} title='Заявка' size='xs'>
-				<DialogContent>
-					<DescriptionList items={FAKE_ITEMS} leader />
-				</DialogContent>
-				<DialogActionComponent>
-					<Button onClick={handleCloseXs} variant='light' color='error'>
-						Отклонить
-					</Button>
-					<Button onClick={handleCloseXs} variant='light' color='success'>
-						Принять
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-			<Dialog open={openSm} onClose={handleCloseSm} title='Заявка' size='sm'>
-				<DialogContent>
-					<DescriptionList items={FAKE_ITEMS} leader />
-				</DialogContent>
-				<DialogActionComponent>
-					<Button onClick={handleCloseSm} variant='light' color='error'>
-						Отклонить
-					</Button>
-					<Button onClick={handleCloseSm} variant='light' color='success'>
-						Принять
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-			<Dialog open={openMd} onClose={handleCloseMd} title='Заявка' size='md'>
-				<DialogContent>
-					<DescriptionList items={FAKE_ITEMS} leader />
-				</DialogContent>
-				<DialogActionComponent>
-					<Button onClick={handleCloseMd} variant='light' color='error'>
-						Отклонить
-					</Button>
-					<Button onClick={handleCloseMd} variant='light' color='success'>
-						Принять
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-			<Dialog open={openLg} onClose={handleCloseLg} title='Заявка' size='lg'>
-				<DialogContent>
-					<DescriptionList items={FAKE_ITEMS} leader />
-				</DialogContent>
-				<DialogActionComponent>
-					<Button onClick={handleCloseLg} variant='light' color='error'>
-						Отклонить
-					</Button>
-					<Button onClick={handleCloseLg} variant='light' color='success'>
-						Принять
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-			<Dialog open={openXl} onClose={handleCloseXl} title='Заявка' size='xl'>
-				<DialogContent>
-					<DescriptionList items={FAKE_ITEMS} leader />
-				</DialogContent>
-				<DialogActionComponent>
-					<Button onClick={handleCloseXl} variant='light' color='error'>
-						Отклонить
-					</Button>
-					<Button onClick={handleCloseXl} variant='light' color='success'>
-						Принять
-					</Button>
-				</DialogActionComponent>
-			</Dialog>
-		</>
-	);
-};

package/src/components/Dialog/Dialog.tsx

@@ -1,68 +0,0 @@
-import type { DialogProps as MuiDialogProps } from '@mui/material';
-import type { MouseEvent } from 'react';
-
-import { BottomDrawer } from '../BottomDrawer';
-import { DialogTitle } from '../DialogTitle';
-import type { WithoutEmotionSpecific } from '../types';
-
-import { useViewportType } from '../../hooks';
-import { StyledDialog } from './styles';
-
-type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type DialogProps = WithoutEmotionSpecific<
-	Omit<MuiDialogProps, 'title' | 'maxWidth'>
-> & {
-	/**
-	 * Заголовок
-	 */
-	title?: React.ReactNode | React.ReactNode[] | string;
-	/**
-	 * Отключить кликабельность фонового компонента
-	 */
-	disableBackdropClick?: boolean;
-	/**
-	 * Размер Dialog
-	 * @default md
-	 */
-	size?: DialogSize;
-};
-
-export const Dialog = ({
-	children,
-	title,
-	disableBackdropClick,
-	onClose,
-	size = 'md',
-	...props
-}: DialogProps) => {
-	const handleClose =
-		onClose &&
-		((
-			event: MouseEvent<HTMLButtonElement>,
-			reason: 'backdropClick' | 'escapeKeyDown',
-		) => {
-			if (disableBackdropClick && reason === 'backdropClick') {
-				return;
-			}
-
-			onClose(event, reason);
-		});
-
-	const { isMobile } = useViewportType();
-
-	if (isMobile) {
-		return (
-			<BottomDrawer onClose={handleClose} title={title}>
-				{children}
-			</BottomDrawer>
-		);
-	}
-
-	return (
-		<StyledDialog $size={size} onClose={handleClose} {...props}>
-			{title && <DialogTitle onClose={onClose}>{title}</DialogTitle>}
-			{children}
-		</StyledDialog>
-	);
-};

package/src/components/Dialog/constants.ts

@@ -1,7 +0,0 @@
-export const SIZES = {
-	xs: { minWidth: '300px', maxWidth: '399px' },
-	sm: { minWidth: '400px', maxWidth: '499px' },
-	md: { minWidth: '500px', maxWidth: '599px' },
-	lg: { minWidth: '600px', maxWidth: '699px' },
-	xl: { minWidth: '700px', maxWidth: '980px' },
-};

package/src/components/Dialog/index.ts

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

package/src/components/Dialog/styles.ts

@@ -1,26 +0,0 @@
-import {
-	Dialog as MuiDialog,
-	backdropClasses,
-	dialogClasses,
-	styled,
-} from '@mui/material';
-
-import { SIZES } from './constants';
-
-type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-const getSize = (size: DialogSize) => {
-	return SIZES[size] || SIZES.md;
-};
-
-export const StyledDialog = styled(MuiDialog, {
-	shouldForwardProp: (prop) => !['$size'].includes(prop.toString()),
-})<{ $size: DialogSize }>`
-  &.${dialogClasses.root} .${backdropClasses.root} {
-    background-color: ${({ theme }) => theme.palette.background.modalShadow};
-  }
-  .${dialogClasses.paper} {
-    min-width: ${({ $size }) => getSize($size).minWidth};
-    max-width: ${({ $size }) => getSize($size).maxWidth};
-  }
-`;