@max-ts/components 0.0.2 → 0.1.1

package/src/components/DropdownButton/DropdownButton.stories.tsx

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Container, MenuItem, Typography } from '..';
+
+import { MessageCircleMore } from 'lucide-react';
+import React from 'react';
+import { DropdownButton } from './DropdownButton';
+
+/**
+ * DropdownButton - позволяет компактно разместить несколько вариантов действия в одном элементе.
+ *
+ * В большинстве случаев в качестве такого элемента выступает кнопка или пункт меню. Вызывается по клику или наведению на элемент.
+
+ */
+const meta: Meta<typeof DropdownButton> = {
+	title: 'Components/Buttons/DropdownButton',
+	component: DropdownButton,
+};
+
+export default meta;
+
+const dropdownContent = (
+	<>
+		<MenuItem onClick={() => console.log('v1')}>Вариант выбора 1</MenuItem>
+		<MenuItem onClick={() => console.log('v2')}>Вариант выбора 2</MenuItem>
+		<MenuItem onClick={() => console.log('v3')}>Вариант выбора 3</MenuItem>
+	</>
+);
+
+type Story = StoryObj<typeof DropdownButton>;
+
+export const Interaction: Story = {
+	args: {
+		children: dropdownContent,
+		name: 'Действие',
+		variant: 'contained',
+		color: 'primary',
+		size: 'large',
+		fullWidth: false,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => (
+	<Container gap={4}>
+		<DropdownButton name='Default'>{dropdownContent}</DropdownButton>
+		<DropdownButton disabled name='Disabled'>
+			{dropdownContent}
+		</DropdownButton>
+		<DropdownButton loading name='Loading'>
+			{dropdownContent}
+		</DropdownButton>
+	</Container>
+);
+
+export const StartIcon = () => {
+	return (
+		<DropdownButton
+			startIcon={<MessageCircleMore />}
+			variant='light'
+			name='With icon'
+		>
+			{dropdownContent}
+		</DropdownButton>
+	);
+};
+
+export const Note = () => {
+	const dropdownItems = (
+		<>
+			<MenuItem note='Перейти в профиль' onClick={() => console.log('v1')}>
+				Профиль
+			</MenuItem>
+			<MenuItem onClick={() => console.log('v3')}>Выход</MenuItem>
+		</>
+	);
+
+	return (
+		<DropdownButton
+			startIcon={<MessageCircleMore />}
+			variant='light'
+			name='With icon'
+		>
+			{dropdownItems}
+		</DropdownButton>
+	);
+};
+
+export const DisableReason = () => {
+	const dropdownItems = (
+		<>
+			<MenuItem
+				disabledReason='Заблокировано'
+				disabled
+				onClick={() => console.log('v1')}
+			>
+				Профиль
+			</MenuItem>
+			<MenuItem onClick={() => console.log('v3')}>Выход</MenuItem>
+		</>
+	);
+
+	return (
+		<DropdownButton
+			startIcon={<MessageCircleMore />}
+			variant='light'
+			name='With icon'
+		>
+			{dropdownItems}
+		</DropdownButton>
+	);
+};
+
+/** Для стилизации основной кнопки доступны ButtonProps */
+export const ButtonProps = () => (
+	<Container gap={5}>
+		<Typography variant='h6'>Variant</Typography>
+
+		<Container gap={4}>
+			<DropdownButton name='Default'>{dropdownContent}</DropdownButton>
+			<DropdownButton variant='light' name='Light'>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton variant='text' name='Text'>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton variant='link' name='Link'>
+				{dropdownContent}
+			</DropdownButton>
+		</Container>
+
+		<Typography variant='h6'>Color</Typography>
+
+		<Container gap={4}>
+			<DropdownButton color='primary' name='Primary'>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton color='error' name='Error'>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton color='success' name='Success'>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton color='warning' name='Warning'>
+				{dropdownContent}
+			</DropdownButton>
+		</Container>
+
+		<Typography variant='h6'>Size</Typography>
+
+		<Container gap={6}>
+			<DropdownButton size='medium' name='Medium'>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton size='large' name='Large'>
+				{dropdownContent}
+			</DropdownButton>
+		</Container>
+	</Container>
+);
+
+/** Для управления параметрами popover доступны PopoverProps */
+export const PopoverProps = () => {
+	return (
+		<>
+			<DropdownButton
+				name='Default'
+				variant='light'
+				popoverProps={{
+					anchorOrigin: { vertical: 'center', horizontal: 'right' },
+				}}
+			>
+				{dropdownContent}
+			</DropdownButton>
+			<DropdownButton
+				name='Default'
+				variant='light'
+				popoverProps={{
+					anchorOrigin: { vertical: 'center', horizontal: 'right' },
+					transformOrigin: { vertical: 100, horizontal: 'right' },
+				}}
+			>
+				{dropdownContent}
+			</DropdownButton>
+		</>
+	);
+};

package/src/components/DropdownButton/DropdownButton.tsx

@@ -0,0 +1,46 @@
+import { ClickAwayListener, type PopoverProps } from '@mui/material';
+
+import { useMenu } from '../../hooks';
+import { Button, type ButtonProps } from '../Button';
+import { Chevron } from '../Chevron';
+import { Menu } from '../Menu';
+
+export type DropdownButtonProps<RootComponent extends React.ElementType> = Omit<
+	ButtonProps<RootComponent>,
+	'endIcon' | 'selected' | 'onClick'
+> & {
+	/** Название кнопки */
+	name: string;
+	/** Пропсы Popover компонента */
+	popoverProps?: Omit<PopoverProps, 'open'>;
+};
+
+export const DropdownButton = <
+	TComponent extends React.ElementType = 'button',
+>({
+	children,
+	name,
+	popoverProps,
+	...props
+}: DropdownButtonProps<TComponent>) => {
+	const { open, anchorRef, handleOpenMenu, handleCloseMenu } = useMenu();
+
+	return (
+		<>
+			<ClickAwayListener onClickAway={handleCloseMenu}>
+				<Button
+					{...(props as ButtonProps<'button'>)}
+					ref={anchorRef}
+					selected={open}
+					onClick={handleOpenMenu}
+					endIcon={<Chevron isActive={open} />}
+				>
+					{name}
+				</Button>
+			</ClickAwayListener>
+			<Menu open={open} anchorEl={anchorRef.current} {...popoverProps}>
+				{children}
+			</Menu>
+		</>
+	);
+};

package/src/components/DropdownButton/index.ts

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

package/src/components/ErrorBoundary/ErrorBoundary.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react';
 
 import { ConfigProvider } from '../ConfigProvider';
 
+import React from 'react';
 import { ErrorBoundary } from './ErrorBoundary';
 import { BuggyButton, ChunkLoadErrorButton } from './ErrorBoundary.stubs';
 

package/src/components/Filename/Filename.stories.tsx

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type JSX, useEffect, useState } from 'react';
+
+import { ActionCell, type Actions } from '../ActionCell';
+import {
+	DataGrid,
+	type DataGridColumns,
+	type DataGridRowOptions,
+} from '../DataGrid';
+
+import { styled } from '@mui/material';
+import { Eye, Send } from 'lucide-react';
+import React from 'react';
+import { Filename } from './Filename';
+
+/**
+ * Filename применяется для отображения названий файлов, с автоматической проверкой текстового переполнения
+ *
+ * ### [Figma]()
+ * ### [Guide]()
+ */
+const meta: Meta<typeof Filename> = {
+	title: 'Components/Filename',
+	component: Filename,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Filename>;
+
+export const Interaction: Story = {
+	args: {
+		children:
+			'Версия 1.0Приложение No 10к Договору подряда No КрФ/15331/24 от\n' +
+			'25.04.2024.pdf',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const Wrapper = styled('div')`
+  max-width: 400px;
+  min-width: 200px;
+  margin: 0 auto 10px;
+`;
+
+type DataType = {
+	id: string;
+	documentName: JSX.Element;
+	direction: string;
+	createDate: string;
+};
+
+type SortField = 'documentName' | 'direction' | 'createDate';
+
+const FAKE_DATA_OBJECT_TEMPLATE = {
+	id: '1',
+	documentName: <Filename>OS_FINAL_BDW_FW24_MeA_21022024.pdf</Filename>,
+	direction: 'ФНС',
+	createDate: '2022-03-24T17:50:40.206Z',
+};
+
+const FAKE_ACTIONS: Actions<DataType> = {
+	main: [
+		{
+			icon: <Eye />,
+			name: 'Просмотреть',
+			onClick: () => console.log('main'),
+		},
+		{
+			icon: <Send />,
+			nested: true,
+			name: 'Отправить',
+			actions: [
+				{ name: 'Туда', onClick: () => console.log('nested 1') },
+				{ name: 'Сюда', onClick: () => console.log('nested 2') },
+			],
+		},
+	],
+	secondary: [
+		{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
+		{ name: 'Удалить', onClick: () => console.log('secondary 2') },
+	],
+};
+
+const generateRandomDate = () => {
+	const start = new Date(2022, 0, 1);
+	const end = new Date();
+	const randomTimestamp =
+		start.getTime() + Math.random() * (end.getTime() - start.getTime());
+	const randomDate = new Date(randomTimestamp);
+
+	return randomDate.toISOString();
+};
+
+const generateData = (
+	dataObjTemplate: DataType,
+	options?: DataGridRowOptions<DataType>,
+): DataType[] => {
+	const DIRECTIONS = ['ФНС', 'ФСС', 'ПФР', 'РПН'];
+	const DATA_ARRAY_LENGTH = 16;
+	const DOCUMENT_NAMES = [
+		<Filename key='1'>api-единая.-спецификация-api.docs</Filename>,
+		<Filename key='2'>OS_FINAL_BDW_FW24_MeA_21022024.pdf</Filename>,
+		<Filename key='3'>OS_FINAL_BDW_FW24_MeA.pdf</Filename>,
+		<Filename key='4'>OS_FINAL.pdf</Filename>,
+	];
+
+	return Array.from({ length: DATA_ARRAY_LENGTH })
+		.fill(dataObjTemplate)
+		.map((_, i) => ({
+			id: String(i + 1),
+			documentName:
+				DOCUMENT_NAMES[Math.floor(Math.random() * DOCUMENT_NAMES.length)],
+			direction: DIRECTIONS[Math.floor(Math.random() * DIRECTIONS.length)],
+			createDate: generateRandomDate(),
+			options: Math.random() < 0.5 ? options : undefined,
+		}));
+};
+
+export const Example = () => {
+	const fakeData = generateData(FAKE_DATA_OBJECT_TEMPLATE);
+
+	const columns: DataGridColumns<DataType>[] = [
+		{
+			field: 'documentName',
+			label: 'Наименование документа',
+			sortable: true,
+		},
+		{
+			field: 'direction',
+			label: 'Направление',
+			sortable: true,
+		},
+		{
+			field: 'createDate',
+			label: 'Дата создания',
+			sortable: true,
+			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+		},
+		{
+			label: 'Действия',
+			sortable: false,
+			align: 'center',
+			width: '120px',
+			renderCell: (row) => {
+				return <ActionCell actions={FAKE_ACTIONS} row={row} />;
+			},
+		},
+	];
+
+	const [isLoading, setLoading] = useState(true);
+	const [slicedData, setSlicedData] = useState<DataType[]>([]);
+	const [selected, setSelected] = useState<DataType[]>([]);
+	const handleSelect = (rows: DataType[]) => setSelected(rows);
+
+	useEffect(() => {
+		setTimeout(() => {
+			setSlicedData(fakeData.slice(0, 10));
+			setLoading(false);
+		}, 1500);
+	}, []);
+
+	const handleRowClick = (row: DataType) => console.log('row clicked', row);
+
+	return (
+		<DataGrid<DataType, SortField>
+			keyId='id'
+			rows={slicedData}
+			columns={columns}
+			isLoading={isLoading}
+			selectedRows={selected}
+			onRowClick={handleRowClick}
+			onSelectRow={handleSelect}
+			onRetry={() => {}}
+		/>
+	);
+};
+
+export const LongFileName = () => {
+	return (
+		<Wrapper>
+			<Filename>
+				Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
+				25.04.2024.pdf
+			</Filename>
+		</Wrapper>
+	);
+};
+
+export const ShortFileName = () => {
+	return (
+		<Wrapper>
+			<Filename>Приложение №10.pdf</Filename>
+		</Wrapper>
+	);
+};
+
+/**
+ * prop ```align``` позволяет позиционировать текст
+ */
+export const Align = () => {
+	return (
+		<div>
+			<Wrapper>
+				<Filename>Приложение №10.pdf</Filename>
+			</Wrapper>
+			<Wrapper>
+				<Filename align='center'>Приложение №10.pdf</Filename>
+			</Wrapper>
+			<Wrapper>
+				<Filename align='right'>Приложение №10.pdf</Filename>
+			</Wrapper>
+		</div>
+	);
+};
+
+export const ComplexFileExtension = () => {
+	return (
+		<div>
+			<Wrapper>
+				<Filename>
+					Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
+					25.04.2024.xml.dist
+				</Filename>
+			</Wrapper>
+			<Wrapper>
+				<Filename>
+					Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
+					25.04.2024.tar.xz
+				</Filename>
+			</Wrapper>
+			<Wrapper>
+				<Filename>
+					Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
+					25.04.2024.xml.orig
+				</Filename>
+			</Wrapper>
+		</div>
+	);
+};

package/src/components/Filename/Filename.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from 'react';
+
+import { type TooltipProps as BasicTooltipProps, Tooltip } from '../Tooltip';
+import type { TypographyProps, TypographyVariant } from '../Typography';
+
+import { FileBaseName, StyledTypography } from './styles';
+import { useLogic } from './useLogic';
+
+type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
+
+export type FileNameProps = Omit<TypographyProps, 'variant'> & {
+	/**
+	 * Название файла
+	 */
+	children: string;
+	/**
+	 * Cпособ кастомизировать тултип при необходимости
+	 * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
+	 */
+	tooltipProps?: Omit<TooltipProps, 'children'>;
+
+	/**
+	 * Применяет стили оформления темы
+	 * @default inherit
+	 */
+	variant?: TypographyVariant | 'inherit';
+};
+
+export const Filename = forwardRef<HTMLElement, FileNameProps>(
+	(props, forwardedRef) => {
+		const { isOverflowed, suffixWithExtension, baseNameProps } = useLogic({
+			...props,
+			ref: forwardedRef,
+		});
+
+		const {
+			tooltipProps,
+			variant = 'inherit',
+			children,
+			align = 'left',
+			...restProps
+		} = props;
+
+		return (
+			<Tooltip
+				title={isOverflowed && children}
+				disableInteractive
+				{...tooltipProps}
+			>
+				<StyledTypography $align={align} variant={variant} {...restProps}>
+					<FileBaseName {...baseNameProps} />
+					<span>{suffixWithExtension}</span>
+				</StyledTypography>
+			</Tooltip>
+		);
+	},
+);

package/src/components/Filename/index.ts

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

package/src/components/Filename/styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material';
+import { Typography } from '../Typography';
+
+export const FileBaseName = styled('span')`
+  overflow: hidden;
+
+  max-width: 100%;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const StyledTypography = styled(Typography, {
+	shouldForwardProp: (prop) => !['$align'].includes(prop.toString()),
+})<{ $align: string }>`
+  display: flex;
+  justify-content: ${({ $align }) => $align};
+`;

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

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

package/src/components/Filename/useLogic/useLogic.ts

@@ -0,0 +1,36 @@
+import type { Ref } from 'react';
+
+import { useOverflowed } from '../../OverflowTypography/hooks';
+import type { FileNameProps } from '../Filename';
+
+import { truncateString } from './utils';
+
+type SpanProps = {
+	children: string;
+	ref?: Ref<HTMLElement>;
+};
+
+type UseLogicParams = FileNameProps & {
+	ref: Ref<HTMLElement>;
+};
+
+type UseLogicResult = {
+	isOverflowed: boolean;
+	baseNameProps: SpanProps;
+	suffixWithExtension: string;
+};
+
+export const useLogic = ({
+	ref: forwardedRef,
+	children,
+}: UseLogicParams): UseLogicResult => {
+	const { ref, isOverflowed } = useOverflowed(forwardedRef);
+
+	const { baseName, suffixWithExtension } = truncateString(children);
+
+	return {
+		baseNameProps: { ref, children: baseName },
+		isOverflowed,
+		suffixWithExtension,
+	};
+};

package/src/components/Filename/useLogic/utils/findExtension/constants.ts

@@ -0,0 +1,16 @@
+export const COMPLEX_EXTENSIONS: string[] = [
+	'.xml.dist',
+	'.xml.tpl',
+	'.xml.gz',
+	'.xml.bz2',
+	'.xml.zip',
+	'.xml.enc',
+	'.xml.sig',
+	'.xml.metadata',
+	'.xml.backup',
+	'.xml.orig',
+	'.tar.gz',
+	'.tar.bz2',
+	'.tar.xz',
+	'.tar.lz',
+];

package/src/components/Filename/useLogic/utils/findExtension/findExtension.ts

@@ -0,0 +1,17 @@
+import { COMPLEX_EXTENSIONS } from './constants';
+
+export const findExtension = (filename: string) => {
+	for (const fileExtension of COMPLEX_EXTENSIONS) {
+		if (filename.endsWith(fileExtension)) {
+			return fileExtension;
+		}
+	}
+
+	const extensionIndex = filename.lastIndexOf('.');
+
+	if (extensionIndex !== -1) {
+		return filename.slice(extensionIndex);
+	}
+
+	return undefined;
+};

package/src/components/Filename/useLogic/utils/findExtension/index.ts

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

package/src/components/Filename/useLogic/utils/index.ts

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

package/src/components/Filename/useLogic/utils/truncateString/constants.ts

@@ -0,0 +1 @@
+export const SUFFIX_LENGTH = 2;

package/src/components/Filename/useLogic/utils/truncateString/index.ts

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

package/src/components/Filename/useLogic/utils/truncateString/truncateString.ts

@@ -0,0 +1,24 @@
+import { findExtension } from '../findExtension';
+
+import { SUFFIX_LENGTH } from './constants';
+
+export const truncateString = (fileName: string) => {
+	const fileExtension = findExtension(fileName);
+
+	if (fileExtension && fileName.endsWith(fileExtension)) {
+		const baseName = fileName.slice(
+			0,
+			fileName.length - fileExtension.length - SUFFIX_LENGTH,
+		);
+		const suffixWithExtension = fileName.slice(
+			-fileExtension.length - SUFFIX_LENGTH,
+		);
+
+		return { baseName, suffixWithExtension };
+	}
+
+	const baseName = fileName.slice(0, -SUFFIX_LENGTH);
+	const suffixWithExtension = fileName.slice(-SUFFIX_LENGTH);
+
+	return { baseName, suffixWithExtension };
+};

package/src/components/FormLabel/FormLabel.tsx

@@ -0,0 +1,11 @@
+import type { FormLabelProps as MuiFormLabelProps } from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { StyledFormLabel } from './styles';
+
+export type FormLabelProps = WithoutEmotionSpecific<MuiFormLabelProps>;
+
+export const FormLabel = (props: FormLabelProps) => {
+	return <StyledFormLabel {...props} />;
+};