@max-ts/components 0.0.2

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,237 @@
+import { Stack, SvgIcon, styled } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+
+import { Info, Plus } from 'lucide-react';
+import { Container } from '../Container';
+import { Tooltip } from './Tooltip';
+
+/**
+ * ### [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=13972%3A156442&mode=design&t=LsGtMosbO9B0qzPe-1)
+ * ### [Guide]()
+ */
+const meta: Meta<typeof Tooltip> = {
+	title: 'Components/Data Display/Tooltip',
+	component: Tooltip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Interaction: Story = {
+	args: {
+		title: 'Всплывающая подсказка',
+		children: (
+			<Button color='primary' variant='contained'>
+				<Plus />
+			</Button>
+		),
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const ContentTooltip = () => {
+	return (
+		<Stack flexDirection='row' gap={1}>
+			<Stack>
+				<Typography>Нал. расчет</Typography>
+				<Typography>Безнал. расчет</Typography>
+			</Stack>
+			<Stack alignItems='flex-end'>
+				<Typography color={'warning'}>10 шт.</Typography>
+				<Typography color={'warning'}>99 989 шт.</Typography>
+			</Stack>
+		</Stack>
+	);
+};
+
+export const Example = () => (
+	<Stack gap={5}>
+		<Stack flexDirection='row' gap={1}>
+			<Typography>Укажите свой телефон</Typography>
+			<Tooltip
+				title='Формат данных: +7 (ХХХ) ХХХ-ХХ-ХХ'
+				withoutContainer={false}
+			>
+				<SvgIcon color={'info'}>
+					<Info />
+				</SvgIcon>
+			</Tooltip>
+		</Stack>
+
+		<Stack flexDirection='row' gap={1}>
+			<Typography>Общая выручка</Typography>
+			<Tooltip title={<ContentTooltip />} withoutContainer={false}>
+				<SvgIcon color={'info'}>
+					<Info />
+				</SvgIcon>
+			</Tooltip>
+		</Stack>
+	</Stack>
+);
+
+export const Sizes = () => (
+	<>
+		<Stack gap={4}>
+			<Typography variant='h5'>Small</Typography>
+			<Stack gap={3} direction='row' alignItems='center'>
+				<Tooltip size='small' title='Всплывающая подсказка'>
+					<Button color='primary' variant='contained'>
+						<Plus />
+					</Button>
+				</Tooltip>
+			</Stack>
+		</Stack>
+
+		<Stack gap={4}>
+			<Typography variant='h5'>Medium</Typography>
+			<Stack gap={3} direction='row' alignItems='center'>
+				<Tooltip title='Всплывающая подсказка'>
+					<Button color='primary' variant='contained'>
+						<Plus />
+					</Button>
+				</Tooltip>
+			</Stack>
+		</Stack>
+	</>
+);
+
+const GridContainer = styled(Container)`
+  gap: 10px;
+
+  margin-top: 30px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+    flex-direction: row;
+  }
+`;
+
+export const Location = () => (
+	<GridContainer>
+		<Tooltip title='Всплывающая подсказка' placement='top' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Top
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='top-start' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Top-start
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='top-end' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Top-end
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='bottom' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Bottom
+			</Button>
+		</Tooltip>
+
+		<Tooltip
+			title='Всплывающая подсказка'
+			placement='bottom-start'
+			size='small'
+		>
+			<Button color='primary' variant='contained' size='large'>
+				Bottom-start
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='bottom-end' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Bottom-end
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='left' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Left
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='left-start' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Left-start
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='left-end' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Left-end
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='right' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Right
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='right-start' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Right-start
+			</Button>
+		</Tooltip>
+
+		<Tooltip title='Всплывающая подсказка' placement='right-end' size='small'>
+			<Button color='primary' variant='contained' size='large'>
+				Right-end
+			</Button>
+		</Tooltip>
+	</GridContainer>
+);
+
+/**
+ * Пропс withoutContainer необходим чтобы Tooltip работал на элементе который disabled
+ */
+export const Disabled = () => (
+	<Stack gap={4}>
+		<Tooltip title='Всплывающая подсказка' withoutContainer={false}>
+			<Button color='primary' variant='contained' disabled>
+				Right-end
+			</Button>
+		</Tooltip>
+	</Stack>
+);
+
+/**
+ * При использовании символа \n в пропсе title будет происходить перенос текста на новую строку
+ */
+export const NewLineCharacter = () => {
+	const titleWithNewLineCharacter =
+		'Текущий документ не прошел \n согласование/подписание. \n Загрузите документ повторно';
+	const titleWithoutNewLineCharacter =
+		'Текущий документ не прошел согласование/подписание. Загрузите документ повторно';
+
+	return (
+		<GridContainer>
+			<Tooltip title={titleWithNewLineCharacter} placement='top' size='small'>
+				<Button color='primary' variant='contained' size='large'>
+					С использованием переноса
+				</Button>
+			</Tooltip>
+			<Tooltip
+				title={titleWithoutNewLineCharacter}
+				placement='top'
+				size='small'
+			>
+				<Button color='primary' variant='contained' size='large'>
+					Без использования переноса
+				</Button>
+			</Tooltip>
+		</GridContainer>
+	);
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,48 @@
+import type { TooltipProps as MuiTooltipProps } from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { TooltipSizes } from './constants';
+import { ContentWrapper, StyledTooltip } from './styles';
+import type { TooltipSize } from './types';
+
+export type TooltipProps = WithoutEmotionSpecific<MuiTooltipProps> & {
+	/**
+	 * Размер тултипа
+	 */
+	size?: TooltipSize;
+
+	/**
+	 * При значении false оборачивает компонент в div. По-умолчанию true
+	 * Это позволяет показывать тултипы на задизейбленных компонентах
+	 * @example <Tooltip withoutContainer={false} ...><Button disabled></Tooltip>
+	 */
+	withoutContainer?: boolean;
+};
+
+export const Tooltip = (props: TooltipProps) => {
+	const {
+		title,
+		placement = 'top',
+		size = TooltipSizes.MEDIUM,
+		withoutContainer = true,
+		children,
+		...restProps
+	} = props;
+
+	return (
+		<StyledTooltip
+			title={title}
+			size={size}
+			placement={placement}
+			arrow
+			{...restProps}
+		>
+			{withoutContainer ? (
+				children
+			) : (
+				<ContentWrapper>{children}</ContentWrapper>
+			)}
+		</StyledTooltip>
+	);
+};

package/src/components/Tooltip/constants.ts

@@ -0,0 +1,4 @@
+export enum TooltipSizes {
+	MEDIUM = 'medium',
+	SMALL = 'small',
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,3 @@
+export * from './Tooltip';
+
+export * from './types';

package/src/components/Tooltip/styles.tsx

@@ -0,0 +1,65 @@
+import {
+	type TooltipProps as MuiTooltipProps,
+	Tooltip,
+	styled,
+	tooltipClasses,
+} from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { TooltipSizes } from './constants';
+import type { TooltipSize } from './types';
+
+type StyledTooltipProps = WithoutEmotionSpecific<MuiTooltipProps> & {
+	size?: TooltipSize;
+};
+
+export const StyledTooltip = styled(
+	({ className, ...props }: StyledTooltipProps) => (
+		<Tooltip {...props} classes={{ popper: className }} />
+	),
+)`
+  & .${tooltipClasses.tooltip} {
+    margin: 0;
+
+    font-size: ${({ size, theme }) =>
+			size === TooltipSizes.SMALL
+				? theme.typography.caption.fontSize
+				: theme.typography.body1.fontSize};
+    font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+    line-height: ${({ size, theme }) =>
+			size === TooltipSizes.SMALL
+				? theme.typography.caption.lineHeight
+				: theme.typography.body1.lineHeight};
+    white-space: pre-line;
+
+    background-color: ${({ theme }) => theme.palette.grey[900]};
+    border-radius: ${({ theme }) => theme.shape.small};
+  }
+
+  & .${tooltipClasses.arrow} {
+    font-size: ${({ theme }) => theme.typography.caption.fontSize};
+    color: ${({ theme }) => theme.palette.grey[900]};
+  }
+
+  &&[data-popper-placement*='top'] .${tooltipClasses.tooltip} {
+    margin-bottom: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='bottom'] .${tooltipClasses.tooltip} {
+    margin-top: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='left'] .${tooltipClasses.tooltip} {
+    margin-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='right'] .${tooltipClasses.tooltip} {
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+export const ContentWrapper = styled('div')`
+  display: inherit;
+  flex-direction: inherit;
+`;

package/src/components/Tooltip/types.ts

@@ -0,0 +1,3 @@
+import type { TooltipSizes } from './constants';
+
+export type TooltipSize = `${TooltipSizes}`;

package/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,193 @@
+import { styled } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react/*';
+import { Container } from '../Container';
+import { Paper } from '../Paper';
+import { Typography } from './Typography';
+
+/**
+ * Весь текст должен задаваться через Typography.
+ *
+ * ### [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=1-347&mode=design&t=lMvg1tmjfSIA2lhp-0)
+ * ### [Guide]()
+ */
+const meta: Meta<typeof Typography> = {
+	title: 'Components/Data Display/Typography',
+	component: Typography,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typography>;
+
+export const Interaction: Story = {
+	args: {
+		children: 'Электронная отчетность и документооборот',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const ExamplePaper = styled(Paper)`
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const Example = () => (
+	<ExamplePaper>
+		<Typography variant='h3' component='h2' gutterBottom>
+			Заявка успешно отправлена
+		</Typography>
+		<Typography paragraph>
+			Заявка{' '}
+			<Typography color='info' component='span'>
+				22
+			</Typography>{' '}
+			была отправлена на ваш email
+		</Typography>
+	</ExamplePaper>
+);
+
+export const Variants = () => (
+	<Container>
+		<Typography variant='h1'>
+			h1. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='h2'>
+			h2. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='h3'>
+			h3. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='h4'>
+			h4. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='h5'>
+			h5. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='h6'>
+			h6. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='subtitle1'>
+			subtitle1. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='subtitle2'>
+			subtitle2. Электронная отчетность и документооборот
+		</Typography>
+		<Typography>Default. Электронная отчетность и документооборот</Typography>
+		<Typography variant='body1'>
+			body1. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='button'>
+			button. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='caption'>
+			caption. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='pointer'>
+			pointer. Электронная отчетность и документооборот
+		</Typography>
+		<Typography variant='link'>
+			link. Электронная отчетность и документооборот
+		</Typography>
+	</Container>
+);
+
+/**
+ * При указании inherit будут унаследованы все стили родителя
+ */
+export const VariantInherit = () => (
+	<Container>
+		<Typography variant='h5'>
+			<Typography variant='inherit'>
+				inherit. Электронная отчетность и документооборот
+			</Typography>
+		</Typography>
+	</Container>
+);
+
+export const Colors = () => (
+	<Container>
+		<Typography>default. Электронная отчетность и документооборот</Typography>
+		<Typography color='text'>
+			text. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='primary'>
+			primary. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='secondary'>
+			secondary. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='error'>
+			error. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='warning'>
+			warning. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='info'>
+			info. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='textSecondary'>
+			textSecondary. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='grey'>
+			grey. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='red'>
+			red. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='green'>
+			green. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='yellow'>
+			yellow. Электронная отчетность и документооборот
+		</Typography>
+	</Container>
+);
+
+/**
+ * Prop ```colorIntensity``` позволяет задать интенсивность указанного ```color```.
+ */
+export const ColorIntensity = () => (
+	<Container>
+		<Typography color='info' colorIntensity='300'>
+			text[300]. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='red' colorIntensity='200'>
+			red[200]. Электронная отчетность и документооборот
+		</Typography>
+		<Typography color='grey' colorIntensity='400'>
+			grey[400]. Электронная отчетность и документооборот
+		</Typography>
+	</Container>
+);
+
+/**
+ * Prop ```noWrap``` позволяет добавить ```...```, если текст не помещается в контейнер.
+ *
+ * Если необходимо умное ограничение длинны поля с tooltip, смотрите на [OverflowTypography](/docs/components-overflowtypography--docs).
+ */
+export const Ellipsis = () => (
+	<div style={{ width: '200px' }}>
+		<Typography noWrap>
+			Электронная отчетность и документооборот. Электронная отчетность и
+			документооборот
+		</Typography>
+	</div>
+);
+
+/**
+ * Prop ```isUpperCase``` переводит текст в верхний регистр
+ */
+export const UpperCase = () => (
+	<Container>
+		<Typography isUpperCase>
+			Электронная отчетность и документооборот{' '}
+			<Typography color='info' component='span'>
+				и{' '}
+			</Typography>
+			документооборот
+		</Typography>
+	</Container>
+);

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,107 @@
+import type { TypographyProps as MuiTypographyProps } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+
+import { useTypographyColor } from './hooks';
+import { TypographyWrapper } from './styles';
+import type { Intensity, TypographyColor, TypographyVariant } from './types';
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type ComponentProp = ElementType<any>;
+
+//Добавляем нужные нам пропсы из mui
+type TypographyPropsBase = Pick<
+	MuiTypographyProps,
+	'paragraph' | 'noWrap' | 'align' | 'gutterBottom' | 'children' | 'ref'
+>;
+
+export type TypographyProps = TypographyPropsBase & {
+	/**
+	 * Цвет текста
+	 * @default undefined
+	 */
+	color?: TypographyColor;
+
+	/**
+	 * Применяет стили оформления темы
+	 * @default 'body1'
+	 */
+	variant?: TypographyVariant;
+
+	/**
+	 * Интенсивность цвета, будет применена для цвета, у которого есть градации
+	 * @default '800'
+	 */
+	colorIntensity?: Intensity;
+
+	/**
+	 * Тип HTML - элемента
+	 * @default 'p'
+	 */
+	component?: ComponentProp;
+
+	/**
+	 * Верхний регистр дочерних элементов
+	 * @default false
+	 */
+	isUpperCase?: boolean;
+} & HTMLAttributes<HTMLParagraphElement>;
+
+declare module '@mui/material/Typography' {
+	interface TypographyPropsVariantOverrides {
+		link: true;
+		pointer: true;
+
+		/**
+		 * Устаревшие варианты, будут удалены в мажорном релизе
+		 */
+		h7: true;
+		h8: true;
+		ui: true;
+		small: true;
+		code: true;
+	}
+}
+
+const printDeprecatedWarning = (variant: TypographyVariant | undefined) => {
+	if (!variant) {
+		return;
+	}
+
+	const isDeprecatedVariant = [
+		'h7',
+		'h8',
+		'ui',
+		'small',
+		'code',
+		'body2',
+		'overline',
+	].includes(variant);
+
+	if (isDeprecatedVariant) {
+		console.warn(
+			`[@astral/components]: Deprecated: Вариант "${variant}" в компоненте Typography больше не поддерживается и будет удален в следующем мажорном релизе. Используйте другой подходящий вариант.`,
+		);
+	}
+};
+
+export const Typography = ({
+	children,
+	color,
+	colorIntensity = '800',
+	component,
+	...props
+}: TypographyProps) => {
+	const typographyColor = useTypographyColor({ color, colorIntensity });
+
+	printDeprecatedWarning(props.variant);
+
+	return (
+		<TypographyWrapper
+			{...props}
+			component={component as ComponentProp}
+			color={typographyColor}
+		>
+			{children}
+		</TypographyWrapper>
+	);
+};

package/src/components/Typography/enums.ts

@@ -0,0 +1,14 @@
+export enum TypographyColors {
+	text = 'text',
+	secondary = 'secondary',
+	primary = 'primary',
+	error = 'error',
+	success = 'success',
+	warning = 'warning',
+	info = 'info',
+	textSecondary = 'text.secondary',
+	grey = 'grey',
+	red = 'red',
+	green = 'green',
+	yellow = 'yellow',
+}

package/src/components/Typography/hooks/index.ts

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

package/src/components/Typography/hooks/useTypographyColor/index.ts

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