@max-ts/components 0.1.1 → 0.2.0

package/src/components/TextField/TextField.tsx

@@ -1,117 +0,0 @@
-import {
-	TextField as MuiTextField,
-	type TextFieldProps as MuiTextFieldProps,
-} from '@mui/material';
-import { type FocusEvent, type ReactNode, useMemo } from 'react';
-
-import { FormHelperTextContent } from '../FormHelperText';
-import type { WithoutEmotionSpecific } from '../types';
-
-export type TextFieldProps = Omit<
-	WithoutEmotionSpecific<MuiTextFieldProps>,
-	'variant' | 'color'
-> & {
-	/**
-	 * Флаг отображения успешного состояния
-	 */
-	success?: boolean;
-	/**
-	 * Элемент, который добавляется в начало
-	 */
-	startAdornment?: ReactNode;
-	/**
-	 * Элемент, который добавляется в конец
-	 */
-	endAdornment?: ReactNode;
-	/**
-	 * Максимальная длина ввода
-	 */
-	maxLength?: number;
-	/**
-	 * Параметр для обрезания пробелов в текст филде при вызове onBlur.
-	 * @default true
-	 * @example <TextField trimmed={false} />
-	 */
-	trimmed?: boolean;
-};
-
-export const TextField = ({
-	success,
-	error,
-	helperText: helperTextProp,
-	fullWidth = false,
-	startAdornment,
-	endAdornment,
-	slotProps,
-	maxLength,
-	trimmed = true,
-	onBlur,
-	...props
-}: TextFieldProps) => {
-	const color = useMemo(() => {
-		if (success) {
-			return 'success';
-		}
-
-		return undefined;
-	}, [success]);
-
-	const helperText = useMemo(() => {
-		if (success) {
-			return (
-				<FormHelperTextContent success>{helperTextProp}</FormHelperTextContent>
-			);
-		}
-
-		if (error) {
-			return (
-				<FormHelperTextContent error>{helperTextProp}</FormHelperTextContent>
-			);
-		}
-
-		if (helperTextProp) {
-			return helperTextProp;
-		}
-
-		// helperText из mui/TextField имеет тип ReactNode | undefined;
-		// однако если helperText={null} вспомогательный текст просто перестает
-		// рендериться, поэтому необходимо передавать что-то отличное от null
-		// но при этом не отображающиеся на странице
-		return <></>;
-	}, [helperTextProp, success, error]);
-
-	const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-		if (trimmed) {
-			const newValue = event.target.value?.trim();
-
-			props.onChange?.({
-				...event,
-				target: { ...event.target, value: newValue },
-			});
-		}
-
-		onBlur?.(event);
-	};
-
-	return (
-		<MuiTextField
-			variant='outlined'
-			fullWidth={fullWidth}
-			error={error}
-			color={color}
-			helperText={helperText}
-			slotProps={{
-				htmlInput: {
-					maxLength,
-				},
-				input: {
-					startAdornment,
-					endAdornment,
-				},
-				...slotProps,
-			}}
-			onBlur={handleBlur}
-			{...props}
-		/>
-	);
-};

package/src/components/TextField/index.ts

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

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

@@ -1,234 +0,0 @@
-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 React from 'react';
-import { Container } from '../Container';
-import { Tooltip } from './Tooltip';
-
-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

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

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

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/styles.tsx

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

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

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

@@ -1,191 +0,0 @@
-import { styled } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { Container } from '../Container';
-import { Paper } from '../Paper';
-import { Typography } from './Typography';
-
-/**
- * Весь текст должен задаваться через Typography.
- */
-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>
-);