@max-ts/components 0.1.0 → 0.2.0

package/src/components/OverflowTypography/OverflowTypography.tsx

@@ -1,106 +0,0 @@
-import type { ReactNode } from 'react';
-import type { PropsWithChildren } from 'react';
-
-import { Tooltip } from '../Tooltip';
-import type { TooltipProps as BasicTooltipProps } from '../Tooltip';
-import { Typography, type TypographyProps } from '../Typography';
-
-import { StyledTypography, Wrapper } from './styles';
-import { useLogic } from './useLogic';
-
-type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
-
-export type OverflowedProps = {
-	/**
-	 * Максимальное количество отображаемых строк
-	 * @example <OverflowTypography rowsCount={2} />
-	 * @default 1
-	 */
-	rowsCount?: number;
-};
-
-type TooltipCustomizable = {
-	/**
-	 * Пропс для кастомизации тултипа
-	 * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
-	 */
-	tooltipProps?: Omit<TooltipProps, 'children' | 'title'> & {
-		/**
-		 * Кастомный контент внутри tooltip. Данный props перекрывает дефолтный текст,
-		 * когда строка не вмещается в контейнер
-		 */
-		title?: ReactNode;
-	};
-	/**
-	 * Количество отображаемых после сокращения в конце символов
-	 */
-	visibleLastSymbolsCount?: number;
-};
-
-export type OverflowedElementProps = OverflowedProps &
-	TooltipCustomizable &
-	TypographyProps;
-
-export type OverflowedTypographyProps =
-	PropsWithChildren<OverflowedElementProps>;
-
-export const DEFAULT_ROWS_COUNT = 1;
-
-export const OverflowTypography = (props: OverflowedTypographyProps) => {
-	const {
-		ref,
-		isOverflowed,
-		secondPartLabel,
-		firstPartLabel,
-		isTruncatedStringVisible,
-	} = useLogic(props);
-
-	const {
-		tooltipProps,
-		children,
-		rowsCount = DEFAULT_ROWS_COUNT,
-		visibleLastSymbolsCount,
-		align = 'left',
-		...restProps
-	} = props;
-
-	const typographyProps = {
-		...restProps,
-		ref,
-		align,
-		children,
-		rowsCount,
-		hasMultipleRows: rowsCount > DEFAULT_ROWS_COUNT,
-	};
-
-	if (isTruncatedStringVisible) {
-		return (
-			<Tooltip title={children} disableInteractive {...tooltipProps}>
-				<Wrapper $align={align}>
-					<StyledTypography
-						component='span'
-						ref={ref}
-						hasMultipleRows={false}
-						rowsCount={1}
-						{...restProps}
-					>
-						{firstPartLabel}
-					</StyledTypography>
-					<Typography {...restProps} component='span'>
-						{secondPartLabel}
-					</Typography>
-				</Wrapper>
-			</Tooltip>
-		);
-	}
-
-	if (children && isOverflowed) {
-		return (
-			<Tooltip title={children} disableInteractive {...tooltipProps}>
-				<StyledTypography {...typographyProps} />
-			</Tooltip>
-		);
-	}
-
-	return <StyledTypography {...typographyProps} />;
-};

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

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

package/src/components/OverflowTypography/hooks/useOverflowed/index.ts

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

package/src/components/OverflowTypography/hooks/useOverflowed/useOverflowed.ts

@@ -1,58 +0,0 @@
-import { debounce } from '@mui/material';
-import { type Ref, useLayoutEffect, useRef, useState } from 'react';
-import { useFirstMountState } from 'react-use';
-
-type ResizeObserverDataOptions = Pick<
-	ResizeObserverEntry,
-	'target' | 'contentRect'
->;
-
-export const useOverflowed = (forwardedRef?: Ref<HTMLElement>) => {
-	const localRef = useRef<HTMLElement>(null);
-	const ref =
-		forwardedRef && typeof forwardedRef !== 'function'
-			? forwardedRef
-			: localRef;
-
-	const [isOverflowed, setOverflow] = useState(false);
-	const isFirstMount = useFirstMountState();
-
-	const checkOverflow = ([
-		{ target, contentRect },
-	]: ResizeObserverDataOptions[]) => {
-		// сверка высоты дом ноды и высоты скролл контейнера, если скролл больше, то значит компонент переполнен контентом
-		const isScrollHeightBigger =
-			Math.round(contentRect.height) < target.scrollHeight;
-
-		// сверка ширины дом ноды и ширины скролл контейнера, если скролл больше, то значит компонент переполнен контентом
-		const isScrollWidthBigger =
-			target.scrollWidth > Math.round(contentRect.width);
-
-		setOverflow(isScrollHeightBigger || isScrollWidthBigger);
-	};
-
-	useLayoutEffect(() => {
-		if (ref?.current) {
-			const node = ref.current;
-
-			const resizeEntry: ResizeObserverDataOptions = {
-				target: node,
-				contentRect: node.getBoundingClientRect(),
-			};
-
-			if (!isFirstMount) {
-				const resizeObserver = new ResizeObserver(debounce(checkOverflow, 500));
-
-				resizeObserver.observe(node);
-
-				return () => resizeObserver.unobserve(node);
-			}
-
-			checkOverflow([resizeEntry]);
-		}
-
-		return;
-	}, [ref.current]);
-
-	return { isOverflowed, ref };
-};

package/src/components/OverflowTypography/index.ts

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

package/src/components/OverflowTypography/styles.ts

@@ -1,39 +0,0 @@
-import { styled } from '@mui/material';
-import { Typography } from '../Typography';
-
-type OverflowTypographyWrapperProps = {
-	hasMultipleRows: boolean;
-	rowsCount: number;
-};
-
-// проверки на rowsCount в стилях нужны для того, чтобы элементы в одну строку обрезались бы по буквенно
-// но если нужно обрезание по нескольким строчкам, тогда элементы будут обрезаться по словам
-export const StyledTypography = styled(Typography, {
-	shouldForwardProp: (name) =>
-		name !== 'rowsCount' && name !== 'hasMultipleRows',
-})<OverflowTypographyWrapperProps>`
-  /* stylelint-disable-next-line */
-  overflow: hidden;
-  /* stylelint-disable-next-line */
-  display: ${({ hasMultipleRows }) => (hasMultipleRows ? '-webkit-box' : '')};
-
-  max-width: 100%;
-
-  text-overflow: ellipsis;
-  white-space: ${({ hasMultipleRows }) =>
-		hasMultipleRows ? 'initial' : 'nowrap'};
-  -webkit-box-orient: ${({ hasMultipleRows }) =>
-		hasMultipleRows ? 'vertical' : ''};
-  -webkit-line-clamp: ${({ rowsCount }) => rowsCount};
-`;
-
-export const Wrapper = styled(Typography, {
-	shouldForwardProp: (prop) => !['$align'].includes(prop.toString()),
-})<{ $align: string }>`
-  display: flex;
-  justify-content: ${({ $align }) => $align};
-
-  width: 100%;
-
-  white-space: nowrap;
-`;

package/src/components/OverflowTypography/useLogic/index.ts

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

package/src/components/OverflowTypography/useLogic/useLogic.ts

@@ -1,29 +0,0 @@
-import type { OverflowedTypographyProps } from '../OverflowTypography';
-import { useOverflowed } from '../hooks';
-import { truncateString } from '../utils';
-
-export const useLogic = ({
-	children,
-	visibleLastSymbolsCount,
-	ref: forwardedRef,
-}: OverflowedTypographyProps) => {
-	const { ref, isOverflowed } = useOverflowed(forwardedRef);
-
-	const canSlice = children && typeof children === 'string';
-
-	const { firstPartLabel, secondPartLabel } =
-		canSlice && isOverflowed && visibleLastSymbolsCount
-			? truncateString(visibleLastSymbolsCount, children)
-			: { firstPartLabel: '', secondPartLabel: '' };
-
-	const isTruncatedStringVisible =
-		canSlice && isOverflowed && Boolean(visibleLastSymbolsCount);
-
-	return {
-		isTruncatedStringVisible,
-		isOverflowed,
-		ref,
-		firstPartLabel,
-		secondPartLabel,
-	};
-};

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

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

package/src/components/OverflowTypography/utils/truncateString/index.ts

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

package/src/components/OverflowTypography/utils/truncateString/truncateString.ts

@@ -1,9 +0,0 @@
-export const truncateString = (
-	visibleLastSymbolsCount: number,
-	label: string,
-) => {
-	const firstPartLabel = label.slice(0, -visibleLastSymbolsCount);
-	const secondPartLabel = label.slice(-visibleLastSymbolsCount);
-
-	return { firstPartLabel, secondPartLabel };
-};

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { type ChangeEvent, useState } from 'react';
-
-import { Typography } from '../Typography';
-
-import { Container } from '../Container';
-import { Pagination } from './Pagination';
-
-const meta: Meta<typeof Pagination> = {
-	title: 'Components/Navigation/Pagination',
-	component: Pagination,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Pagination>;
-
-export const Interaction: Story = {
-	args: {
-		count: 10,
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-export const Example = () => (
-	<>
-		<Pagination count={10} />
-	</>
-);
-
-export const PaginationRanges = () => (
-	<Container gap={3}>
-		<Pagination count={10} defaultPage={6} siblingCount={0} />
-		<Pagination count={10} defaultPage={6} />
-	</Container>
-);
-
-export const Controlled = () => {
-	const [page, setPage] = useState(1);
-
-	const handleChange = (_event: ChangeEvent<unknown>, value: number) => {
-		setPage(value);
-	};
-
-	return (
-		<Container gap={3}>
-			<Typography>Страница: {page}</Typography>
-			<Pagination count={10} page={page} onChange={handleChange} />
-		</Container>
-	);
-};

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +0,0 @@
-import { Pagination as MuiPagination } from '@mui/material';
-
-import type { PaginationProps } from './types';
-
-export const Pagination = ({ ...props }: PaginationProps) => {
-	return <MuiPagination shape='rounded' {...props} />;
-};

package/src/components/Pagination/index.ts

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

package/src/components/Pagination/types.ts

@@ -1,13 +0,0 @@
-import type { PaginationProps as MuiPaginationProps } from '@mui/material';
-
-import type { WithoutEmotionSpecific } from '../types';
-
-export type PaginationProps = Omit<
-	WithoutEmotionSpecific<MuiPaginationProps>,
-	| 'shape'
-	| 'showLastButton'
-	| 'showFirstButton'
-	| 'boundaryCount'
-	| 'hidePrevButton'
-	| 'hideNextButton'
->;

package/src/components/Paper/Paper.tsx

@@ -1,25 +0,0 @@
-import {
-	Paper as MuiPaper,
-	type PaperProps as MuiPaperProps,
-} from '@mui/material';
-
-import type { WithoutEmotionSpecific } from '../types';
-
-export type PaperProps = Omit<
-	WithoutEmotionSpecific<MuiPaperProps>,
-	'elevation'
-> & {
-	/**
-	 * Определяет, на какой высоте над поверхностью находится элемент. Чем больше значение, тем дальше элемент визуально.
-	 * @default elevation={1} 'Тень [200]'
-	 * @example
-	 * <Paper elevation={0}> = Нет тени
-	 * <Paper> | <Paper elevation={1}> = Тень [200]
-	 * <Paper elevation={2}> = Тень [300]
-	 */
-	elevation?: 0 | 1 | 2;
-};
-
-export const Paper = (props: PaperProps) => {
-	return <MuiPaper {...props} />;
-};

package/src/components/Paper/index.ts

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

package/src/components/Placeholder/Image/Image.tsx

@@ -1,16 +0,0 @@
-import type { AllHTMLAttributes } from 'react';
-
-import type { PlaceholderSize } from '../types';
-
-import { Wrapper } from './styles';
-
-export type ImageProps = Pick<
-	AllHTMLAttributes<HTMLImageElement>,
-	'src' | 'alt' | 'width' | 'height' | 'className'
-> & {
-	size?: PlaceholderSize;
-};
-
-export const Image = Wrapper;
-
-export const setDefaultImageStyles = Wrapper.withComponent;

package/src/components/Placeholder/Image/index.ts

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

package/src/components/Placeholder/Image/styles.ts

@@ -1,24 +0,0 @@
-import { styled } from '@mui/material';
-import { SIZE } from '../constants';
-import type { PlaceholderSize } from '../types';
-
-export const Wrapper = styled('img', {
-	shouldForwardProp: (prop) => prop !== 'size',
-})<{ size?: PlaceholderSize }>`
-  display: block;
-
-  width: ${({ width }) => width || 'auto'};
-  max-width: 100%;
-  height: ${({ height }) => height || 'auto'};
-  margin: auto auto
-    ${({ theme, size }) =>
-			size === SIZE.Small ? theme.spacing(4) : theme.spacing(6)};
-
-  color: ${({ theme }) => theme.palette.grey[900]};
-
-  object-fit: contain;
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin: auto auto ${({ theme }) => theme.spacing(8)};
-  }
-`;

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

@@ -1,205 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from '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>
-	);
-};