@max-ts/components 0.1.1 → 0.2.0

package/src/components/GuidTypography/GuidTypography.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { CopyTypography } from '../CopyTypography';
-
-import { styled } from '@mui/material';
-import React from 'react';
-import { GuidTypography } from './GuidTypography';
-
-const meta: Meta<typeof GuidTypography> = {
-	title: 'Components/Data Display/GuidTypography',
-	component: GuidTypography,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof GuidTypography>;
-
-export const Interaction: Story = {
-	args: {
-		children: 'e2f54c10-2ac9-4872-b2ce-1f86eb1c6d2d',
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-const Wrapper = styled('div')`
-  width: 100px;
-`;
-
-export const Example = () => {
-	return (
-		<Wrapper>
-			<GuidTypography>e2f54c10-2ac9-4872-b2ce-1f86eb1c6d2d</GuidTypography>
-		</Wrapper>
-	);
-};
-
-/**
- * Для возможности копирования `guid` необходимо использовать CopyTypography и пропс `copyText`.
- * Необходимо отключать тултип через `tooltipProps` для избежания их наложения.
- */
-
-export const CopyGuid = () => {
-	const guid = 'e2f54c10-2ac9-4872-b2ce-1f86eb1c6d2d';
-
-	return (
-		<Wrapper>
-			<CopyTypography copyText={guid} isShowCopyText>
-				<GuidTypography tooltipProps={{ title: undefined }}>
-					{guid}
-				</GuidTypography>
-			</CopyTypography>
-		</Wrapper>
-	);
-};

package/src/components/GuidTypography/GuidTypography.tsx

@@ -1,10 +0,0 @@
-import {
-	OverflowTypography,
-	type OverflowedTypographyProps,
-} from '../OverflowTypography';
-
-export type GuidTypographyProps = OverflowedTypographyProps;
-
-export const GuidTypography = (props: GuidTypographyProps) => {
-	return <OverflowTypography visibleLastSymbolsCount={4} {...props} />;
-};

package/src/components/GuidTypography/index.ts

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

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,236 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ActionCell, type Actions } from '../ActionCell';
-import { DataGrid, type DataGridColumns } from '../DataGrid';
-
-import { Download, Eye, Filter, Printer, Send } from 'lucide-react';
-import React from 'react';
-import { Container } from '../Container';
-import { IconButton } from './IconButton';
-
-const meta: Meta<typeof IconButton> = {
-	title: 'Components/Buttons/IconButton',
-	component: IconButton,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof IconButton>;
-
-export const Interaction: Story = {
-	render: (args) => {
-		return (
-			<IconButton {...args}>
-				<Printer />
-			</IconButton>
-		);
-	},
-	args: {},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-type Columns = { id: string; name: string; code: string; ref: string };
-
-export const Example = () => {
-	const ACTIONS: Actions<Columns> = {
-		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') },
-				],
-			},
-		],
-	};
-
-	const COLUMNS: DataGridColumns<Columns>[] = [
-		{ field: 'name', label: 'Наименование' },
-		{ field: 'code', label: 'Код партнера' },
-		{ field: 'ref', label: 'Реф. ссылка' },
-		{
-			renderCell: (row) => <ActionCell actions={ACTIONS} row={row} />,
-			width: '1%',
-		},
-	];
-
-	const DATA: Columns[] = [
-		{
-			id: '1',
-			name: 'Офис на ул. Куйбышева 128, к. №1',
-			code: '456-875',
-			ref: 'http://referal.lk',
-		},
-		{
-			id: '2',
-			name: 'Офис на Огарева',
-			code: '456-875',
-			ref: 'http://referal.lk.',
-		},
-		{
-			id: '3',
-			name: 'Офис на Маяковской, оф 245',
-			code: '456-875',
-			ref: 'http://referal.lk',
-		},
-	];
-
-	return (
-		<DataGrid rows={DATA} columns={COLUMNS} keyId={'id'} onRetry={() => {}} />
-	);
-};
-
-/**
- * Используется, когда необходимо обозначить ключевое или стартовое действие на странице. Например, начать заполнение формы или завершить работу с ней.
- *
- * На одной странице не может находиться свыше одной акцентной кнопки. Исключение — акцентные кнопки с одинаковым действием в ряду однородных, равнозначных элементов.
- */
-
-export const Contained = () => {
-	return (
-		<Container>
-			<IconButton variant='contained'>
-				<Printer />
-			</IconButton>
-			<IconButton selected variant='contained'>
-				<Printer />
-			</IconButton>
-			<IconButton disabled variant='contained'>
-				<Printer />
-			</IconButton>
-			<IconButton loading variant='contained'>
-				<Printer />
-			</IconButton>
-		</Container>
-	);
-};
-
-/**
- * Кнопка может помещаться на одной строке с другими компонентами и не предполагает привлечения обязательного внимания всех пользователей. При взаимодействии со страницей часть пользователей не воспользуется кнопкой, но она может быть нужна определенной группе пользователей.
- */
-
-export const Light = () => {
-	return (
-		<Container>
-			<IconButton variant='light'>
-				<Eye />
-			</IconButton>
-			<IconButton selected variant='light'>
-				<Eye />
-			</IconButton>
-			<IconButton disabled variant='light'>
-				<Eye />
-			</IconButton>
-			<IconButton loading variant='light'>
-				<Eye />
-			</IconButton>
-		</Container>
-	);
-};
-
-/**
- * Кнопка для перехода по ссылке на новую страницу. В некоторых случаях открывает окно браузера.
- */
-
-export const Link = () => {
-	return (
-		<Container>
-			<IconButton variant='link'>
-				<Filter />
-			</IconButton>
-			<IconButton selected variant='link'>
-				<Filter />
-			</IconButton>
-			<IconButton disabled variant='link'>
-				<Filter />
-			</IconButton>
-			<IconButton loading variant='link'>
-				<Filter />
-			</IconButton>
-		</Container>
-	);
-};
-
-/**
- * Кнопка требующая наименьшего внимания.
- */
-
-export const Text = () => {
-	return (
-		<Container>
-			<IconButton variant='text'>
-				<Filter />
-			</IconButton>
-			<IconButton selected variant='text'>
-				<Filter />
-			</IconButton>
-			<IconButton disabled variant='text'>
-				<Filter />
-			</IconButton>
-			<IconButton loading variant='text'>
-				<Filter />
-			</IconButton>
-		</Container>
-	);
-};
-
-/**
- * Существует 2 стандартных размера кноки: большой и стандартный. Большая используется для промостраниц и сайтов, стандартная в интерфейсах.
- */
-
-export const ButtonSize = () => {
-	return (
-		<Container>
-			<IconButton size='medium' variant='light'>
-				<Download />
-			</IconButton>
-			<IconButton size='large' variant='light'>
-				<Download />
-			</IconButton>
-		</Container>
-	);
-};
-
-/**
- * К любой кнопке может быть добавлен эмоциональный оттенок.
- */
-
-export const EmotionalTone = () => {
-	return (
-		<Container gap={3}>
-			<Container>
-				<IconButton variant='contained' color='error'>
-					<Download />
-				</IconButton>
-				<IconButton variant='contained' color='success'>
-					<Download />
-				</IconButton>
-				<IconButton variant='contained' color='warning'>
-					<Download />
-				</IconButton>
-			</Container>
-			<Container>
-				<IconButton variant='light' color='error'>
-					<Download />
-				</IconButton>
-				<IconButton variant='light' color='success'>
-					<Download />
-				</IconButton>
-				<IconButton variant='light' color='warning'>
-					<Download />
-				</IconButton>
-			</Container>
-		</Container>
-	);
-};

package/src/components/IconButton/IconButton.tsx

@@ -1,52 +0,0 @@
-import { useMemo } from 'react';
-
-import { type ButtonProps, ButtonVariants } from '../Button';
-import {
-	CircularProgress,
-	type CircularProgressProps,
-} from '../CircularProgress';
-
-import { StyledButton } from './styles';
-
-export type IconButtonProps<RootComponent extends React.ElementType> =
-	ButtonProps<RootComponent> & {
-		/**
-		 * Флаг отображения индикатора загрузки
-		 * @example <IconButton loading />
-		 */
-		loading?: boolean;
-	};
-
-export const IconButton = <RootComponent extends React.ElementType = 'button'>(
-	props: IconButtonProps<RootComponent>,
-) => {
-	const {
-		variant = ButtonVariants.Contained,
-		loading,
-		children,
-		...restProps
-	} = props;
-
-	const progressColor = useMemo((): CircularProgressProps['color'] => {
-		if (variant === ButtonVariants.Contained) {
-			return 'inverted';
-		}
-
-		return 'primary';
-	}, [variant]);
-
-	return (
-		<StyledButton
-			loading={loading}
-			variant={variant}
-			tabIndex={loading ? -1 : 0}
-			{...restProps}
-		>
-			{loading ? (
-				<CircularProgress size='small' color={progressColor} />
-			) : (
-				children
-			)}
-		</StyledButton>
-	);
-};

package/src/components/IconButton/index.ts

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

package/src/components/IconButton/styles.ts

@@ -1,52 +0,0 @@
-import { styled } from '@mui/material';
-import { Button, type ButtonProps, ButtonSizes } from '../Button';
-
-type GetValueOptions = {
-	type?: string | undefined;
-	values: Record<string, string>;
-	defaultValue: string;
-};
-
-const getValue = ({ type, values, defaultValue }: GetValueOptions) => {
-	if (!type) {
-		return defaultValue;
-	}
-
-	return values[type] || defaultValue;
-};
-
-/**
- * Получить значения для высоты кнопки в зависимости от size параметра
- */
-export const getButtonHeight = (options: ButtonProps<'button'>): string =>
-	getValue({
-		type: options.size,
-		values: {
-			[ButtonSizes.Large]: '40px',
-		},
-		defaultValue: '32px',
-	});
-
-export const getButtonHeightMobile = (options: ButtonProps<'button'>): string =>
-	getValue({
-		type: options.size,
-		values: {
-			[ButtonSizes.Small]: '36px',
-		},
-		defaultValue: '48px',
-	});
-
-export const StyledButton = styled(Button, {
-	shouldForwardProp: (prop) =>
-		prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading',
-})`
-  pointer-events: ${({ loading }) => loading && 'none'};
-
-  width: ${getButtonHeight};
-  height: ${getButtonHeight};
-  padding: ${({ theme }) => theme.spacing(1)};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: ${getButtonHeightMobile};
-  }
-`;

package/src/components/IconDropdownButton/IconDropdownButton.stories.tsx

@@ -1,197 +0,0 @@
-import { Stack } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { DataGrid, type DataGridColumns } from '../DataGrid';
-import { IconButton } from '../IconButton';
-import { MenuItem } from '../MenuItem';
-
-import { EllipsisVertical, Pencil } from 'lucide-react';
-import React from 'react';
-import { IconDropdownButton } from './IconDropdownButton';
-
-const meta: Meta<typeof IconDropdownButton> = {
-	title: 'Components/Buttons/IconDropdownButton',
-	component: IconDropdownButton,
-};
-
-export default meta;
-
-type DataType = {
-	id: string;
-	name: string;
-	code: string;
-	ref: string;
-};
-
-const slicedData: DataType[] = [
-	{
-		id: '1',
-		name: 'Офис на ул. Куйбышева 128, к. №1',
-		code: '456-875',
-		ref: 'http://referal.lk',
-	},
-	{
-		id: '2',
-		name: 'Офис на Огарева',
-		code: '456-875',
-		ref: 'http://referal.lk',
-	},
-	{
-		id: '3',
-		name: 'Офис на Маяковской, оф 245',
-		code: '456-875',
-		ref: 'http://referal.lk',
-	},
-];
-
-const handleClick = () => console.log('clicked');
-
-const children = [
-	<MenuItem key={1} onClick={() => console.log('v1')}>
-		Вариант выбора 1
-	</MenuItem>,
-	<MenuItem key={2} onClick={() => console.log('v2')}>
-		Вариант выбора 2
-	</MenuItem>,
-	<MenuItem key={3} onClick={() => console.log('v3')}>
-		Вариант выбора 3
-	</MenuItem>,
-];
-
-const columns: DataGridColumns<DataType>[] = [
-	{
-		field: 'name',
-		label: 'Наименование',
-	},
-	{
-		field: 'code',
-		label: 'Код партнёра',
-	},
-	{
-		field: 'ref',
-		label: 'Реф. ссылка',
-	},
-	{
-		label: '',
-		align: 'center',
-		width: '1%',
-		renderCell: () => (
-			<Stack gap={1} direction='row' justifyContent='center'>
-				<IconButton variant='light' onClick={handleClick}>
-					<Pencil />
-				</IconButton>
-				<IconDropdownButton
-					variant='light'
-					icon={<EllipsisVertical />}
-					aria-label='Меню'
-				>
-					{children}
-				</IconDropdownButton>
-			</Stack>
-		),
-	},
-];
-
-type Story = StoryObj<typeof IconDropdownButton>;
-
-export const Interaction: Story = {
-	args: {
-		icon: <EllipsisVertical />,
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-export const Example = () => (
-	<DataGrid keyId='id' rows={slicedData} columns={columns} onRetry={() => {}} />
-);
-
-/**
- * Кнопка может помещаться на одной строке с другими компонентами и не предполагает привлечения обязательного внимания всех пользователей. При взаимодействии со страницей часть пользователей не воспользуется кнопкой, но она может быть нужна определенной группе пользователей.
- */
-export const Default = () => (
-	<>
-		<IconDropdownButton
-			variant='light'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-		<IconDropdownButton
-			variant='text'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-	</>
-);
-
-export const Disabled = () => (
-	<>
-		<IconDropdownButton
-			disabled
-			variant='light'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-		<IconDropdownButton
-			disabled
-			variant='text'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-	</>
-);
-
-export const Loading = () => (
-	<>
-		<IconDropdownButton
-			loading
-			variant='light'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-		<IconDropdownButton
-			loading
-			variant='text'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-	</>
-);
-
-/**
- * Существует 2 стандартных размера кноки: большой и стандартный. Большая используется для промостраниц и сайтов, стандартная в интерфейсах.
- */
-export const ButtonSize = () => (
-	<>
-		<IconDropdownButton
-			variant='light'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-		<IconDropdownButton
-			size='large'
-			variant='light'
-			icon={<EllipsisVertical />}
-			aria-label='Меню'
-		>
-			{children}
-		</IconDropdownButton>
-	</>
-);

package/src/components/IconDropdownButton/IconDropdownButton.tsx

@@ -1,38 +0,0 @@
-import { ClickAwayListener } from '@mui/material';
-import { type ReactNode, forwardRef } from 'react';
-
-import { useMenu } from '../../hooks';
-import { IconButton, type IconButtonProps } from '../IconButton';
-import { Menu } from '../Menu';
-
-export type IconDropdownButtonProps = IconButtonProps<'button'> & {
-	/**
-	 * Иконка кнопки
-	 */
-	icon: ReactNode;
-};
-
-export const IconDropdownButton = forwardRef<
-	HTMLButtonElement,
-	IconDropdownButtonProps
->(({ children, icon, ...props }, ref) => {
-	const { open, anchorRef, handleOpenMenu, handleCloseMenu } = useMenu(ref);
-
-	return (
-		<>
-			<ClickAwayListener onClickAway={handleCloseMenu} mouseEvent='onMouseUp'>
-				<IconButton
-					{...props}
-					ref={anchorRef}
-					onClick={handleOpenMenu}
-					selected={open}
-				>
-					{icon}
-				</IconButton>
-			</ClickAwayListener>
-			<Menu open={open} anchorEl={anchorRef.current}>
-				{children}
-			</Menu>
-		</>
-	);
-});

package/src/components/IconDropdownButton/index.ts

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

package/src/components/InternalErrorPlaceholder/InternalErrorPlaceholder.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { ConfigProvider } from '../ConfigProvider';
-
-import React from 'react';
-import { InternalErrorPlaceholder } from './InternalErrorPlaceholder';
-
-const errorIllustration = '../../illustrations/error.svg';
-
-/**
- * ```InternalErrorPlaceholder``` - это внутренний компонент, позволяющий отображать ошибки во время исполнения кода
- *
- */
-const meta: Meta<typeof InternalErrorPlaceholder> = {
-	title: 'Components/Data Display/Placeholders/InternalErrorPlaceholder',
-	component: InternalErrorPlaceholder,
-};
-
-export default meta;
-
-export const Example = () => {
-	return (
-		<ConfigProvider
-			imagesMap={{
-				defaultErrorImgSrc: errorIllustration,
-				noDataImgSrc: errorIllustration,
-				outdatedReleaseErrorImgSrc: errorIllustration,
-			}}
-			techSup={{ email: 'test@example.com', phone: '79999999999' }}
-		>
-			<InternalErrorPlaceholder />
-		</ConfigProvider>
-	);
-};