@max-ts/components 0.0.2

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

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ActionCell, type Actions } from '../ActionCell';
+import { DataGrid, type DataGridColumns } from '../DataGrid';
+
+import { styled } from '@mui/material';
+import { Download, Eye, Filter, Printer, Send } from 'lucide-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

@@ -0,0 +1,57 @@
+import { type ElementType, type ForwardedRef, 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,
+	AdditionalProps = object,
+> = ButtonProps<RootComponent, AdditionalProps> & {
+	/**
+	 * Флаг отображения индикатора загрузки
+	 * @example <IconButton loading />
+	 */
+	loading?: boolean;
+};
+
+export const IconButton = <
+	RootComponent extends React.ElementType,
+	AdditionalProps = object,
+>(
+	props: IconButtonProps<RootComponent, AdditionalProps>,
+) => {
+	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

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

package/src/components/IconButton/styles.ts

@@ -0,0 +1,52 @@
+import { styled } from '@mui/material';
+import { Button, ButtonSizes, type ButtonProps } 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

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

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

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

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

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

package/src/components/InternalErrorPlaceholder/InternalErrorPlaceholder.tsx

@@ -0,0 +1,39 @@
+import { Link } from '@mui/material';
+import { useContext } from 'react';
+
+import { Button } from '../Button';
+import { ConfigContext } from '../ConfigProvider';
+import { Placeholder } from '../Placeholder';
+import { Typography } from '../Typography';
+
+export const InternalErrorPlaceholder = () => {
+	const { imagesMap, techSup } = useContext(ConfigContext);
+
+	const handleClickRefresh = () => {
+		location.reload();
+	};
+
+	return (
+		<Placeholder
+			title='Произошла непредвиденная ошибка'
+			description={
+				<div>
+					<Typography>
+						Пожалуйста, попробуйте обновить страницу или обратитесь в
+						техническую поддержку:
+					</Typography>
+					<Typography>
+						email&nbsp;
+						<Link href={`mailto:${techSup.email}`}>{techSup.email}</Link>,
+						телефон&nbsp;
+						<Link href={`tel:${techSup.phone}`}>{techSup.phone}</Link>
+					</Typography>
+				</div>
+			}
+			imgAlt='Непредвиденная ошибка'
+			imgSrc={imagesMap.defaultErrorImgSrc}
+			imgWidth='324px'
+			Actions={<Button onClick={handleClickRefresh}>Обновить страницу</Button>}
+		/>
+	);
+};

package/src/components/InternalErrorPlaceholder/index.ts

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