@max-ts/components 0.0.2

package/src/components/ActionCell/styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const Wrapper = styled('div')`
+  display: inline-flex;
+  align-items: center;
+`;

package/src/components/ActionCell/types.ts

@@ -0,0 +1,89 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+
+import type { IconButtonProps } from '../IconButton';
+import type { MenuItemProps } from '../MenuItem';
+import type { TooltipProps } from '../Tooltip';
+
+export type SecondaryActionKind<T> = MenuItemProps &
+	SingleAction<T> & {
+		/**
+		 * Причина блокировки
+		 */
+		disabledReason?: TooltipProps['title'];
+	};
+
+export type NestedAction<T> = MenuItemProps & {
+	/**
+	 * Обработчик действия
+	 */
+	onClick?: (row: T) => void;
+
+	/**
+	 * Название действия
+	 */
+	name: string;
+};
+
+export type SingleAction<T> = {
+	/**
+	 * Причина блокировки
+	 */
+	disabledReason?: TooltipProps['title'];
+
+	/**
+	 * Иконка действия
+	 */
+	icon?: ReactNode;
+
+	/**
+	 * Обработчик действия
+	 */
+	onClick?: (row: T) => void;
+
+	/**
+	 * Название действия
+	 */
+	name: string;
+
+	/**
+	 * Флаг показа выпадающего списка при клике
+	 */
+	nested?: false;
+
+	/**
+	 * Если true, блокирует взаимодействие с actions
+	 */
+	isBlockingOperation?: boolean;
+};
+
+export type MultipleAction<T> = MenuItemProps & {
+	/**
+	 * Иконка действия
+	 */
+	icon: ReactNode;
+
+	/**
+	 * Список действий для выпадающего списка
+	 */
+	actions: Array<NestedAction<T>>;
+
+	/**
+	 * Флаг показа выпадающего списка при клике
+	 */
+	nested: true;
+
+	/**
+	 * Название действия
+	 */
+	name: string;
+};
+
+export type ActionCellHandler<T> = (
+	onClick: SingleAction<T>['onClick'] | NestedAction<T>['onClick'],
+) =>
+	| MouseEventHandler<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>
+	| undefined;
+
+export type MainActionKind<T> =
+	| (IconButtonProps<'button'> & SingleAction<T>)
+	| MultipleAction<T>;

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

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

package/src/components/ActionCell/useLogic/useLogic.ts

@@ -0,0 +1,46 @@
+import { type MouseEventHandler, useCallback } from 'react';
+
+import type { ActionsCellProps } from '../ActionCell';
+import type { NestedAction, SingleAction } from '../types';
+
+type UseLogicParams<TRowData> = ActionsCellProps<TRowData>;
+
+export const useLogic = <TRowData>({
+	actions,
+	row,
+}: UseLogicParams<TRowData>) => {
+	const { main, secondary } = actions;
+
+	const isDisabledAction = main.some((action) => {
+		if ('actions' in action) {
+			return false;
+		}
+
+		return action?.isBlockingOperation && action?.loading;
+	});
+
+	const handleActionClick = useCallback(
+		(
+			onClick:
+				| SingleAction<TRowData>['onClick']
+				| NestedAction<TRowData>['onClick'],
+		) =>
+			() => {
+				onClick?.(row);
+			},
+		[row],
+	);
+
+	const handleWrapperClick: MouseEventHandler<HTMLDivElement> = (event) => {
+		event.stopPropagation();
+	};
+
+	const isSecondaryActionsAvailable = secondary && secondary.length >= 1;
+
+	return {
+		isSecondaryActionsAvailable,
+		handleActionClick,
+		handleWrapperClick,
+		isDisabledAction,
+	};
+};

package/src/components/AsyncAutocomplete/AsyncAutocomplete.stories.tsx

@@ -0,0 +1,244 @@
+import type { Meta } from '@storybook/react';
+import { type SyntheticEvent, useState } from 'react';
+
+import { styled } from '@mui/material';
+import {
+	AsyncAutocomplete,
+	type AsyncAutocompleteProps,
+} from './AsyncAutocomplete';
+
+const meta: Meta<typeof AsyncAutocomplete> = {
+	title: 'Components/Inputs/AsyncAutocomplete',
+	component: AsyncAutocomplete,
+};
+
+export default meta;
+
+type User = {
+	id: string;
+	name: string;
+};
+
+const getFakeUsers = async (
+	search: string,
+	{
+		signal: abortSignal,
+	}: {
+		signal?: AbortSignal;
+	},
+): Promise<User[]> => {
+	await new Promise((resolve) => setTimeout(resolve, 1000));
+
+	return [
+		{ id: '1', name: 'John Doe' },
+		{ id: '2', name: 'Jane Doe' },
+		{ id: '3', name: 'Bob Doe' },
+	].filter((user) => user.name.toLowerCase().includes(search.toLowerCase()));
+};
+
+const fetchUsers = async (
+	search: string,
+	abortSignal?: AbortSignal,
+): Promise<User[]> => {
+	return getFakeUsers(search, { signal: abortSignal });
+};
+
+const Wrapper = styled('div')`
+  min-width: 300px;
+`;
+
+export const Example = () => {
+	const [value, setValue] = useState<User | null>(null);
+
+	const handleChange = (_: SyntheticEvent, newValue: User | null) => {
+		setValue(newValue);
+	};
+
+	const handleFetch: AsyncAutocompleteProps<User>['fetchOptions'] = (
+		search: string,
+		abortSignal?: AbortSignal,
+	) => {
+		return fetchUsers(search, abortSignal);
+	};
+
+	return (
+		<Wrapper>
+			<AsyncAutocomplete<User>
+				fetchOptions={handleFetch}
+				getOptionLabel={(option) => option.name}
+				placeholder='Введите имя'
+				isRequired
+				label='Сотрудник'
+				value={value}
+				onChange={handleChange}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ *  `freeSolo` позволяет ввести собственное значение в инпут
+ */
+export const FreeSolo = () => {
+	const [value, setValue] = useState<User | string | null | undefined>(null);
+
+	const handleChange = (
+		_: SyntheticEvent,
+		newValue: User | string | null | undefined,
+	) => {
+		setValue(newValue);
+	};
+
+	const handleFetch: AsyncAutocompleteProps<User>['fetchOptions'] = (
+		search: string,
+		abortSignal?: AbortSignal,
+	) => {
+		return fetchUsers(search, abortSignal);
+	};
+
+	return (
+		<Wrapper>
+			<AsyncAutocomplete<User, false, false, true>
+				fetchOptions={handleFetch}
+				getOptionLabel={(option) =>
+					typeof option === 'string' ? option : option.name
+				}
+				placeholder='Введите имя'
+				freeSolo
+				value={value}
+				onChange={handleChange}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ *  `multiple` позволяет выбрать несколько значений в autocomplete
+ */
+export const Multiple = () => {
+	const [value, setValue] = useState<User[]>([]);
+
+	const handleChange = (_: SyntheticEvent, newValue: User[]) => {
+		setValue(newValue);
+	};
+
+	const handleFetch: AsyncAutocompleteProps<User>['fetchOptions'] = (
+		search: string,
+	) => {
+		return fetchUsers(search);
+	};
+
+	return (
+		<Wrapper>
+			<AsyncAutocomplete<User, true>
+				fetchOptions={handleFetch}
+				getOptionLabel={(option) => option.name}
+				placeholder='Введите имя'
+				multiple
+				value={value}
+				onChange={handleChange}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ *  Параметр `minSymbolsToFetch` указывает сколько символов необходимо ввести для
+ * выполнения запроса. Если не указан, запрос происходит во время клика на
+ * autocomplete.
+ */
+export const MinSymbolsToFetch = () => {
+	const [value, setValue] = useState<User | null>(null);
+
+	const handleChange = (_: SyntheticEvent, newValue: User | null) => {
+		setValue(newValue);
+	};
+
+	const handleFetch: AsyncAutocompleteProps<User>['fetchOptions'] = (
+		search: string,
+		abortSignal?: AbortSignal,
+	) => {
+		return fetchUsers(search, abortSignal);
+	};
+
+	return (
+		<Wrapper>
+			<AsyncAutocomplete<User>
+				fetchOptions={handleFetch}
+				getOptionLabel={(option) => option.name}
+				placeholder='Введите имя'
+				isRequired
+				label='Сотрудник'
+				value={value}
+				minSymbolsToFetch={4}
+				onChange={handleChange}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ *  Параметр `fetchDelayMs` указывает задержку debounce
+ */
+export const FetchDelayMs = () => {
+	const [value, setValue] = useState<User | null>(null);
+
+	const handleChange = (_: SyntheticEvent, newValue: User | null) => {
+		setValue(newValue);
+	};
+
+	const handleFetch: AsyncAutocompleteProps<User>['fetchOptions'] = (
+		search: string,
+	) => {
+		return fetchUsers(search);
+	};
+
+	return (
+		<Wrapper>
+			<AsyncAutocomplete<User>
+				fetchOptions={handleFetch}
+				getOptionLabel={(option) => option.name}
+				placeholder='Введите имя'
+				isRequired
+				label='Сотрудник'
+				value={value}
+				fetchDelayMs={1000}
+				onChange={handleChange}
+			/>
+		</Wrapper>
+	);
+};
+
+/**
+ * AbortController позволяет отменять устаревшие запросы.
+ * Для его использование необходимо передавать AbortSignal
+ */
+export const AbortController = () => {
+	const [value, setValue] = useState<User | null>(null);
+
+	const handleChange = (_: SyntheticEvent, newValue: User | null) => {
+		setValue(newValue);
+	};
+
+	const handleFetch: AsyncAutocompleteProps<User>['fetchOptions'] = (
+		search: string,
+		abortSignal?: AbortSignal,
+	) => {
+		return fetchUsers(search, abortSignal);
+	};
+
+	return (
+		<Wrapper>
+			<AsyncAutocomplete<User>
+				fetchOptions={handleFetch}
+				getOptionLabel={(option) => option.name}
+				placeholder='Введите имя'
+				isRequired
+				label='Сотрудник'
+				value={value}
+				onChange={handleChange}
+				fetchDelayMs={500}
+			/>
+		</Wrapper>
+	);
+};

package/src/components/AsyncAutocomplete/AsyncAutocomplete.tsx

@@ -0,0 +1,139 @@
+import type { ForwardedRef } from 'react';
+
+import { Autocomplete, type AutocompleteProps } from '../Autocomplete';
+
+import { useLogic } from './useLogic';
+
+/* cSpell:ignore Промис */
+
+export type AsyncAutocompleteProps<
+	TOptions,
+	Multiple extends boolean = false,
+	DisableClearable extends boolean = false,
+	FreeSolo extends boolean = false,
+> = Omit<
+	AutocompleteProps<TOptions, Multiple, DisableClearable, FreeSolo>,
+	| 'inputValue'
+	| 'loading'
+	| 'disabled'
+	| 'fullWidth'
+	| 'error'
+	| 'required'
+	| 'success'
+	| 'options'
+> & {
+	/**
+	 * Если `true`, будет показан индикатор загрузки
+	 */
+	isLoading?: boolean;
+
+	/**
+	 * Если `true`, компонент будет не доступен для взаимодействия
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 * Если `true`, компонент растянется на всю ширину
+	 */
+	isFullWidth?: boolean;
+
+	/**
+	 * Если `true`, компонент будет отображаться в состоянии ошибки
+	 */
+	isError?: boolean;
+
+	/**
+	 * Если `true`, компонент будет помечен как обязательный
+	 */
+	isRequired?: boolean;
+
+	/**
+	 * Если `true`, компонент будет отображаться в состоянии успеха
+	 */
+	isSuccess?: boolean;
+
+	/**
+	 * Задержка для fetchOptions
+	 * @default 300
+	 */
+	fetchDelayMs?: number;
+
+	/**
+	 * Функция для асинхронной загрузки опций на основе поискового запроса
+	 *
+	 * @param search - Строка поиска, введенная пользователем. На основе этой
+	 *   строки функция должна вернуть подходящие опции.
+	 * @param signal - Объект `AbortSignal`, который позволяет отменить запрос,
+	 *   если пользователь изменил поисковый запрос или закрыл компонент.
+	 *
+	 * @returns Promise<TOptions[]> Промис, который разрешается массивом опций
+	 *   (`TOptions[]`). Эти опции будут отображены в выпадающем списке.
+	 *
+	 * @example
+	 * ```typescript
+	 * const fetchOptions = async (search: string, signal: AbortSignal) => {
+	 *   const response = await fetch(`/api/search?query=${search}`, { signal });
+	 *   const data = await response.json();
+	 *   return data.results;
+	 * };
+	 *
+	 * <AsyncAutocomplete fetchOptions={fetchOptions} />
+	 * ```
+	 */
+	fetchOptions: (search: string, signal?: AbortSignal) => Promise<TOptions[]>;
+
+	/**
+	 * Минимальное количество символов для выполнения запроса
+	 * @default 0
+	 */
+	minSymbolsToFetch?: number;
+};
+
+export const AsyncAutocomplete = <
+	TOptions,
+	Multiple extends boolean = false,
+	DisableClearable extends boolean = false,
+	FreeSolo extends boolean = false,
+>(
+	props: AsyncAutocompleteProps<TOptions, Multiple, DisableClearable, FreeSolo>,
+) => {
+	const {
+		options,
+		isLoadingData,
+		handleOpen,
+		handleInputChange,
+		emptyOptionsText,
+	} = useLogic(props);
+
+	const {
+		fetchOptions,
+		fetchDelayMs,
+		minSymbolsToFetch,
+		isDisabled,
+		isRequired,
+		isSuccess,
+		isError,
+		isLoading,
+		isFullWidth,
+		onOpen,
+		noOptionsText,
+		onInputChange,
+		...restProps
+	} = props;
+
+	return (
+		<Autocomplete
+			options={options}
+			disabled={isDisabled}
+			fullWidth={isFullWidth}
+			loading={isLoading || isLoadingData}
+			onOpen={handleOpen}
+			error={isError}
+			required={isRequired}
+			success={isSuccess}
+			noOptionsText={emptyOptionsText}
+			onInputChange={handleInputChange}
+			{...restProps}
+		/>
+	);
+};

package/src/components/AsyncAutocomplete/constants.ts

@@ -0,0 +1,7 @@
+export const DEFAULT_MIN_SEARCH_CHARACTERS = 0;
+
+export const DEFAULT_DELAY_MS = 300;
+
+export const DEFAULT_EMPTY_OPTIONS_TEXT = 'Продолжайте вводить для поиска';
+
+export const DEFAULT_NO_OPTIONS_TEXT = 'Нет данных';

package/src/components/AsyncAutocomplete/index.ts

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

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

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

package/src/components/AsyncAutocomplete/useLogic/useLogic.ts

@@ -0,0 +1,117 @@
+import { type SyntheticEvent, useCallback, useRef, useState } from 'react';
+
+import { type AutocompleteInputChangeReason, debounce } from '@mui/material';
+
+import type { AsyncAutocompleteProps } from '../AsyncAutocomplete';
+import {
+	DEFAULT_DELAY_MS,
+	DEFAULT_EMPTY_OPTIONS_TEXT,
+	DEFAULT_MIN_SEARCH_CHARACTERS,
+	DEFAULT_NO_OPTIONS_TEXT,
+} from '../constants';
+
+type UseLogicParams<
+	TOptions,
+	Multiple extends boolean,
+	DisableClearable extends boolean,
+	FreeSolo extends boolean,
+> = AsyncAutocompleteProps<TOptions, Multiple, DisableClearable, FreeSolo>;
+
+export const useLogic = <
+	TOptions,
+	Multiple extends boolean,
+	DisableClearable extends boolean,
+	FreeSolo extends boolean,
+>({
+	fetchOptions,
+	fetchDelayMs = DEFAULT_DELAY_MS,
+	minSymbolsToFetch = DEFAULT_MIN_SEARCH_CHARACTERS,
+	defaultValue,
+	getOptionLabel,
+	noOptionsText = DEFAULT_NO_OPTIONS_TEXT,
+	onOpen,
+	onInputChange,
+}: UseLogicParams<TOptions, Multiple, DisableClearable, FreeSolo>) => {
+	const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
+	const [isFirstOpen, setIsFirstOpen] = useState<boolean>(true);
+	const [isEmptyOptions, setIsEmptyOptions] = useState<boolean>(true);
+	const abortControllerRef = useRef<AbortController | null>(null);
+
+	const [options, setOptions] = useState<TOptions[]>([]);
+
+	const debouncedFetchOptions = useCallback(
+		debounce((search: string) => {
+			abortControllerRef.current?.abort();
+
+			const controller = new AbortController();
+
+			abortControllerRef.current = controller;
+
+			fetchOptions(search, controller?.signal)
+				.then((response) => {
+					setOptions(response);
+					setIsEmptyOptions(response.length === 0);
+				})
+				.finally(() => {
+					setIsLoadingData(false);
+					abortControllerRef.current = null;
+				});
+		}, fetchDelayMs),
+		[fetchOptions, fetchDelayMs, noOptionsText],
+	);
+
+	const handleInputChange = (
+		event: SyntheticEvent,
+		search: string,
+		reason: AutocompleteInputChangeReason,
+	) => {
+		if (!search || search.length < minSymbolsToFetch) {
+			if (debouncedFetchOptions) {
+				debouncedFetchOptions.clear();
+			}
+
+			setIsEmptyOptions(false);
+			setIsLoadingData(false);
+
+			return setOptions([]);
+		}
+
+		setIsLoadingData(true);
+
+		if (!isFirstOpen) {
+			debouncedFetchOptions(search);
+		}
+
+		onInputChange?.(event, search, reason);
+	};
+
+	const handleOpen = (event: SyntheticEvent) => {
+		if (isFirstOpen) {
+			setIsFirstOpen(false);
+
+			const defaultSearch =
+				defaultValue && getOptionLabel
+					? getOptionLabel(defaultValue as TOptions)
+					: '';
+
+			if (defaultValue || minSymbolsToFetch === 0) {
+				setIsLoadingData(true);
+				debouncedFetchOptions(defaultSearch);
+			}
+		}
+
+		onOpen?.(event);
+	};
+
+	const emptyOptionsText = isEmptyOptions
+		? noOptionsText
+		: DEFAULT_EMPTY_OPTIONS_TEXT;
+
+	return {
+		handleOpen,
+		handleInputChange,
+		options,
+		isLoadingData,
+		emptyOptionsText,
+	};
+};