@max-ts/components 0.0.2

package/src/components/OverflowTypography/OverflowTypography.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { styled } from '@mui/material';
+import { OverflowTypography } from './OverflowTypography';
+
+/**
+ * ##Мотивация
+ * Вариация [Typography](/story/components-data-display-typography--docs) элемента, с автоматической проверкой на переполнение текстового контента, и если есть переполнение, то тогда добавляется кастомизируемая обертка ```Tooltip```.
+ *
+ * ### [Figma]()
+ * ### [Guide]()
+ */
+
+const meta: Meta<typeof OverflowTypography> = {
+	title: 'Components/Data Display/OverflowTypography',
+	component: OverflowTypography,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OverflowTypography>;
+
+export const Interaction: Story = {
+	args: {
+		children:
+			'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut delectus dolorem ea, explicabo illo minus nostrum quae quod veniam.',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const Wrapper = styled('div')`
+  max-width: 500px;
+`;
+
+export const Example = () => {
+	return (
+		<Wrapper>
+			<OverflowTypography>
+				Not enough long text for special behavior.
+			</OverflowTypography>
+			<br />
+			<OverflowTypography>
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut
+				delectus dolorem ea, explicabo illo minus nostrum quae quod veniam.
+			</OverflowTypography>
+		</Wrapper>
+	);
+};
+
+/**
+ * Prop ```rowsCount``` задает число строк, после которого текст будет обрезаться, и добавляться многоточие. По умолчанию равен '1'.
+ * *
+ * Так же важно учитывать, что элементы с 'rowsCount' больше 1 будут обрезаться по словам, в одну строку будут обрезаться по буквенно
+ */
+export const RowsCount = () => {
+	return (
+		<Wrapper>
+			<OverflowTypography>
+				default props, Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+				Atque aut delectus dolorem ea, explicabo illo minus nostrum quae quod
+				veniam.
+			</OverflowTypography>
+			<br />
+			<OverflowTypography rowsCount={2}>
+				rowsCount = 2, like in default Autocomplite component. Lorem ipsum dolor
+				sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui,
+				tempore.
+			</OverflowTypography>
+		</Wrapper>
+	);
+};
+
+/**
+ * Prop ```tooltipProps``` позволяет задавать кастомизируемые настройки для тултипа
+ */
+export const TooltipProps = () => {
+	return (
+		<Wrapper>
+			<OverflowTypography
+				tooltipProps={{
+					title: 'custom tooltip, with separate settings',
+					placement: 'top-start',
+				}}
+			>
+				With custom tooltip settings. Lorem ipsum dolor sit amet, consecrate
+				adipisicing elit. Assumenda autem debitis eligendi inventore magni nobis
+				perspiciatis quisquam ratione, unde vel?
+			</OverflowTypography>
+		</Wrapper>
+	);
+};
+
+/**
+ * Prop `visibleLastSymbolsCount` позволяет задавать число отображаемых символов после сокращения.
+ * При использовании `visibleLastSymbolsCount` не работает props `rowsCount`
+ */
+export const VisibleLastSymbols = () => {
+	return (
+		<Wrapper>
+			<OverflowTypography visibleLastSymbolsCount={10}>
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi
+				consectetur corporis dolores eos, esse eum expedita hic minima
+				molestias, nobis odio qui quisquam rem saepe ut, velit voluptate
+				voluptates!
+			</OverflowTypography>
+		</Wrapper>
+	);
+};

package/src/components/OverflowTypography/OverflowTypography.tsx

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

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

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

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

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

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

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

package/src/components/OverflowTypography/styles.ts

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/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

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

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

package/src/components/Pagination/types.ts

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+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)};
+  }
+`;