@max-ts/components 0.0.2

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { MenuItem } from '../MenuItem';
+import { OverflowTypography } from '../OverflowTypography';
+import { Tag } from '../Tag';
+import { Tooltip } from '../Tooltip';
+
+import { styled } from '@mui/material';
+import { Autocomplete } from './Autocomplete';
+
+const meta: Meta<typeof Autocomplete> = {
+	title: 'Components/Inputs/Autocomplete',
+	component: Autocomplete,
+};
+
+export default meta;
+
+type Option = {
+	value: string;
+	title: string;
+};
+
+const OPTIONS: Option[] = [
+	{ value: '1', title: 'Value 1' },
+	{ value: '2', title: 'Value 2' },
+	{ value: '3', title: 'Value 3' },
+	{ value: '4', title: 'Value 4' },
+	{ value: '5', title: 'Value 5' },
+	{ value: '6', title: 'Value 6' },
+	{ value: '7', title: 'Value 7' },
+	{ value: '8', title: 'Value 8' },
+	{
+		value: '9',
+		title:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab adipisci, aliquam aliquid delectus ipsam laboriosam magni molestias possimus ullam voluptatibus!',
+	},
+	{
+		value: '10',
+		title:
+			'12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, vero?',
+	},
+];
+
+const Wrapper = styled('div')`
+  min-width: 300px;
+`;
+
+type Story = StoryObj<typeof Autocomplete<Option, false, false, false>>;
+
+export const Interaction: Story = {
+	args: {
+		options: OPTIONS,
+		label: 'Выберите вариант',
+		getOptionLabel: (params: Option) => params.title,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [value, setValue] = useState<Option | null>(null);
+
+	return (
+		<Wrapper>
+			<Autocomplete<Option, false, false, false>
+				options={OPTIONS}
+				label='Выберите вариант'
+				value={value}
+				getOptionLabel={(params) => params.title}
+				onChange={(_, newVal) => setValue(newVal)}
+			/>
+		</Wrapper>
+	);
+};
+
+export const Multiple = () => {
+	const [value, setValue] = useState<Option[]>([]);
+
+	return (
+		<Wrapper>
+			<Autocomplete<Option, true, false, false>
+				multiple
+				options={OPTIONS}
+				label='Multiple'
+				value={value}
+				onChange={(_, newVal) => setValue(newVal)}
+				getOptionLabel={(params) => params.title}
+			/>
+		</Wrapper>
+	);
+};
+
+export const FreeSolo = () => {
+	const [value, setValue] = useState<Option | string | null | undefined>();
+
+	return (
+		<Wrapper>
+			<Autocomplete<Option, false, false, true>
+				options={OPTIONS}
+				label='FreeSolo'
+				freeSolo
+				value={value}
+				onChange={(_, newVal) => setValue(newVal)}
+				getOptionLabel={(params) =>
+					typeof params === 'string' ? params : params.title
+				}
+			/>
+		</Wrapper>
+	);
+};
+
+export const MultipleCustomTags = () => {
+	const [value, setValue] = useState<Option[]>([]);
+
+	return (
+		<Wrapper>
+			<Autocomplete<Option, true, false, false>
+				multiple
+				options={OPTIONS}
+				label='Multiple custom tags'
+				value={value}
+				onChange={(_, newVal) => setValue(newVal)}
+				getOptionLabel={(params) => params.title}
+				renderTags={(tags, getTagProps) => {
+					return tags.map((tag, index) => {
+						const { title } = tag;
+						const { onDelete, ...tagProps } = getTagProps({ index });
+						const isCustom = index === 0;
+
+						return (
+							<Tooltip key={title} title={isCustom && 'Custom tag'}>
+								<Tag
+									{...tagProps}
+									onDelete={isCustom ? undefined : onDelete}
+									color='warning'
+									size='small'
+									label={title}
+									variant='light'
+								/>
+							</Tooltip>
+						);
+					});
+				}}
+			/>
+		</Wrapper>
+	);
+};
+
+export const LoadedDataError = () => (
+	<Wrapper>
+		<Autocomplete<Option, false, false, false>
+			label='Loaded data error'
+			options={[]}
+			isLoadedDataError
+			loadedDataError='Ошибка загрузки данных'
+			getOptionLabel={(params) => params.title}
+			error
+		/>
+	</Wrapper>
+);
+
+export const ErrorExample = () => (
+	<Wrapper>
+		<Autocomplete<Option, false, false, false>
+			label='Error'
+			options={OPTIONS}
+			helperText='Ошибка'
+			getOptionLabel={(params) => params.title}
+			error
+		/>
+	</Wrapper>
+);
+
+export const Loading = () => {
+	return (
+		<Wrapper>
+			<Autocomplete<Option, false, false, false>
+				label='Loading'
+				loading
+				options={[]}
+				getOptionLabel={(params) => params.title}
+			/>
+		</Wrapper>
+	);
+};
+
+export const Success = () => (
+	<Wrapper>
+		<Autocomplete<Option, false, false, false>
+			label='Success'
+			options={OPTIONS}
+			helperText='Успех'
+			getOptionLabel={(params) => params.title}
+			success
+		/>
+	</Wrapper>
+);
+
+export const Small = () => (
+	<Wrapper>
+		<Autocomplete<Option, false, false, false>
+			label='Small'
+			size='small'
+			options={OPTIONS}
+			getOptionLabel={(params) => params.title}
+		/>
+	</Wrapper>
+);
+
+export const NoData = () => {
+	return (
+		<Wrapper>
+			<Autocomplete<Option, true, false, false>
+				label='No data'
+				size='small'
+				multiple
+				options={[]}
+				getOptionLabel={(params) => params.title}
+				required
+			/>
+		</Wrapper>
+	);
+};
+
+export const CustomRenderOption = () => (
+	<Wrapper>
+		<Autocomplete<Option, false, false, false>
+			label='Custom render option'
+			size='small'
+			options={OPTIONS}
+			getOptionLabel={(params) => params.title}
+			renderOption={(props, option) => (
+				<MenuItem {...props} key={props.id}>
+					<OverflowTypography rowsCount={2}>
+						{`Custom render option - ${option.title}`}
+					</OverflowTypography>
+				</MenuItem>
+			)}
+		/>
+	</Wrapper>
+);
+
+export const CustomRenderInput = () => (
+	<Wrapper>
+		<Autocomplete<Option, true, false, false>
+			label='Custom render input'
+			size='small'
+			options={OPTIONS}
+			getOptionLabel={(params) => params.title}
+			renderOption={(props, option) => (
+				<MenuItem {...props} key={props.id}>
+					<OverflowTypography rowsCount={2}>
+						{`Custom render option - ${option.title}`}
+					</OverflowTypography>
+				</MenuItem>
+			)}
+			renderInput={(params) => (
+				<div ref={params.InputProps.ref}>
+					<label htmlFor={params.inputProps.id}>{params.label}</label>
+					<input
+						type='text'
+						ref={params.inputProps.ref}
+						value={params.inputProps.value}
+						onMouseDown={params.inputProps.onMouseDown}
+						placeholder={params.placeholder}
+					/>
+				</div>
+			)}
+		/>
+	</Wrapper>
+);

package/src/components/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,301 @@
+import {
+	type AutocompleteOwnerState,
+	type AutocompleteRenderGetTagProps,
+	type AutocompleteRenderInputParams,
+	type AutocompleteRenderOptionState,
+	ListItemIcon,
+	Autocomplete as MuiAutocomplete,
+	type AutocompleteProps as MuiAutocompleteProps,
+	Popper as MuiPopper,
+	type PopperProps,
+} from '@mui/material';
+import { type HTMLAttributes, type ReactNode, useCallback } from 'react';
+import { Checkbox } from '../Checkbox';
+import { CircularProgress } from '../CircularProgress';
+import {
+	OverflowTypography,
+	type OverflowedElementProps,
+} from '../OverflowTypography';
+import { Tag } from '../Tag';
+import { TextField, type TextFieldProps } from '../TextField';
+import type { WithoutEmotionSpecific } from '../types';
+
+import { ChevronDown, X } from 'lucide-react';
+import {
+	DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT,
+	DEFAULT_PLACEHOLDER,
+} from './constants';
+import type { AutocompleteSizes } from './enums';
+import { StyledMenuItem } from './styles';
+import { useLogic } from './useLogic';
+
+export type AutocompleteSize = `${AutocompleteSizes}`;
+
+export type AutocompleteProps<
+	AutocompleteValueProps,
+	Multiple extends boolean,
+	DisableClearable extends boolean,
+	FreeSolo extends boolean,
+> = Omit<
+	WithoutEmotionSpecific<
+		MuiAutocompleteProps<
+			AutocompleteValueProps,
+			Multiple,
+			DisableClearable,
+			FreeSolo
+		>
+	>,
+	| 'size'
+	| 'renderInput'
+	| 'noOptionsText'
+	| 'closeText'
+	| 'openText'
+	| 'clearText'
+> &
+	Pick<
+		TextFieldProps,
+		| 'error'
+		| 'success'
+		| 'helperText'
+		| 'label'
+		| 'required'
+		| 'inputRef'
+		| 'placeholder'
+	> & {
+		renderInput?: (
+			props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>,
+		) => ReactNode;
+
+		size?: AutocompleteSize;
+
+		/**
+		 * Опции для OverflowTypography, который оборачивает содержимое item
+		 */
+		overflowOption?: OverflowedElementProps;
+
+		/**
+		 * Текст ошибки, который будет отображаться в меню автокомплита
+		 * Пример использования: информирование пользователя о том, что АПИ
+		 * используемого сервиса в текущий момент недоступно
+		 */
+		loadedDataError?: string;
+
+		/**
+		 * Если true, будет отображено сообщение об ошибке при загрузке данных
+		 * в меню автокомплита
+		 */
+		isLoadedDataError?: boolean;
+
+		/**
+		 * Текст для отображения, когда нет данных
+		 * @default Нет данных
+		 */
+		noOptionsText?: ReactNode;
+
+		/**
+		 * Переопределяет текст для кнопки закрытия всплывающего окна
+		 * @default Закрыть
+		 */
+		closeText?: string;
+
+		/**
+		 * Переопределяет текст для кнопки открытия всплывающего окна
+		 * @default Открыть
+		 */
+		openText?: string;
+
+		/**
+		 * Переопределяет текст для кнопки отчистки поля
+		 * @default Очистить
+		 */
+		clearText?: string;
+	};
+
+export const Autocomplete = <
+	AutocompleteValueProps,
+	Multiple extends boolean,
+	DisableClearable extends boolean,
+	FreeSolo extends boolean,
+>(
+	props: AutocompleteProps<
+		AutocompleteValueProps,
+		Multiple,
+		DisableClearable,
+		FreeSolo
+	>,
+) => {
+	const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
+
+	const {
+		required,
+		success,
+		error,
+		label,
+		getOptionLabel,
+		helperText,
+		inputRef,
+		multiple,
+		size = 'medium',
+		placeholder = DEFAULT_PLACEHOLDER,
+		overflowOption,
+		closeText = 'Закрыть',
+		openText = 'Открыть',
+		clearText = 'Очистить',
+		loadingText = <CircularProgress color='primary' />,
+		isLoadedDataError,
+		loadedDataError,
+		noOptionsText,
+		autoHighlight,
+		renderInput: externalRenderInput,
+		renderTags: externalRenderTags,
+		renderOption: externalRenderOption,
+		...restProps
+	} = props;
+
+	const renderInput = useCallback(
+		(inputParams: AutocompleteRenderInputParams) => {
+			const generalInputParams = {
+				...inputParams,
+				inputRef,
+				required,
+				placeholder: isValueEmpty ? placeholder : '',
+				label,
+				success,
+				error,
+				helperText,
+				size,
+			};
+
+			if (externalRenderInput) {
+				return externalRenderInput(generalInputParams);
+			}
+
+			return <TextField {...generalInputParams} />;
+		},
+		[
+			isValueEmpty,
+			externalRenderInput,
+			inputRef,
+			required,
+			placeholder,
+			label,
+			success,
+			error,
+			helperText,
+			size,
+		],
+	);
+
+	const renderOption = useCallback(
+		(
+			optionProps: HTMLAttributes<HTMLLIElement> & { key: string },
+			option: AutocompleteValueProps,
+			optionState: AutocompleteRenderOptionState,
+			ownerSate: AutocompleteOwnerState<
+				AutocompleteValueProps,
+				Multiple,
+				DisableClearable,
+				FreeSolo,
+				'div'
+			>,
+		) => {
+			if (externalRenderOption) {
+				return externalRenderOption(
+					optionProps,
+					option,
+					optionState,
+					ownerSate,
+				);
+			}
+
+			const isSelected = Boolean(optionProps['aria-selected']);
+
+			return (
+				<StyledMenuItem {...optionProps} key={optionProps.id}>
+					{multiple && (
+						<ListItemIcon>
+							<Checkbox role='menuitemcheckbox' checked={isSelected} />
+						</ListItemIcon>
+					)}
+					<OverflowTypography
+						rowsCount={DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT}
+						{...overflowOption}
+					>
+						{optionProps.key}
+					</OverflowTypography>
+				</StyledMenuItem>
+			);
+		},
+		[multiple, overflowOption, externalRenderOption],
+	);
+
+	const renderTags = useCallback(
+		(
+			tags: AutocompleteValueProps[],
+			getTagProps: AutocompleteRenderGetTagProps,
+			ownerSate: AutocompleteOwnerState<
+				AutocompleteValueProps,
+				Multiple,
+				DisableClearable,
+				FreeSolo
+			>,
+		) => {
+			if (externalRenderTags) {
+				return externalRenderTags(tags, getTagProps, ownerSate);
+			}
+
+			return tags.map((tag: AutocompleteValueProps, index: number) => {
+				const title = getOptionLabel?.(tag) || '';
+
+				return (
+					<Tag
+						deleteIcon={<X />}
+						color='grey'
+						label={title}
+						{...getTagProps({ index })}
+						key={title}
+					/>
+				);
+			});
+		},
+		[getOptionLabel, externalRenderTags],
+	);
+
+	const renderPopper = useCallback(
+		(popperProps: PopperProps) => {
+			if (!isPopperVisible) {
+				return null;
+			}
+
+			return <MuiPopper {...popperProps} />;
+		},
+		[isPopperVisible],
+	);
+
+	return (
+		<MuiAutocomplete
+			{...restProps}
+			size={size}
+			clearText={clearText}
+			closeText={closeText}
+			openText={openText}
+			loadingText={loadingText}
+			multiple={multiple}
+			disableCloseOnSelect={multiple}
+			clearIcon={<X />}
+			popupIcon={<ChevronDown />}
+			forcePopupIcon
+			slotProps={{
+				clearIndicator: { disableRipple: true },
+				popper: {
+					component: renderPopper,
+				},
+			}}
+			getOptionLabel={getOptionLabel}
+			renderInput={renderInput}
+			renderTags={renderTags}
+			renderOption={renderOption}
+			{...autocompleteProps}
+		/>
+	);
+};

package/src/components/Autocomplete/constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+
+export const DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';

package/src/components/Autocomplete/enums.ts

@@ -0,0 +1,4 @@
+export enum AutocompleteSizes {
+	medium = 'medium',
+	small = 'small',
+}

package/src/components/Autocomplete/index.ts

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

package/src/components/Autocomplete/styles.ts

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material';
+import { MenuItem } from '../MenuItem';
+
+export const StyledMenuItem = styled(MenuItem)`
+  max-height: ${({ theme }) => theme.spacing(13)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    max-height: unset;
+  }
+`;

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

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

package/src/components/Autocomplete/useLogic/useLogic.ts

@@ -0,0 +1,88 @@
+import type { AutocompleteInputChangeReason } from '@mui/material';
+import { type SyntheticEvent, useCallback, useState } from 'react';
+
+import type { AutocompleteProps } from '../Autocomplete';
+
+import { checkIsInputEmpty } from './utils';
+
+type UseLogicParams<
+	AutocompleteValueProps,
+	Multiple extends boolean,
+	DisableClearable extends boolean,
+	FreeSolo extends boolean,
+> = AutocompleteProps<
+	AutocompleteValueProps,
+	Multiple,
+	DisableClearable,
+	FreeSolo
+>;
+
+export const useLogic = <
+	AutocompleteValueProps,
+	Multiple extends boolean,
+	DisableClearable extends boolean,
+	FreeSolo extends boolean,
+>({
+	value,
+	isOptionEqualToValue: externalOptionEqualToValue,
+	autoHighlight = true,
+	freeSolo,
+	options,
+	loading,
+	isLoadedDataError,
+	loadedDataError = 'Ошибка загрузки данных',
+	noOptionsText = 'Нет данных',
+	onInputChange,
+}: UseLogicParams<
+	AutocompleteValueProps,
+	Multiple,
+	DisableClearable,
+	FreeSolo
+>) => {
+	const [innerInputValue, setInnerInputValue] = useState('');
+
+	const isValueEmpty = checkIsInputEmpty(value);
+
+	const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
+	const isOptionsAvailable = options.length > 0;
+
+	const isPopperVisible =
+		isInnerInputValueNotEmpty ||
+		isOptionsAvailable ||
+		loading ||
+		isLoadedDataError;
+
+	const isOptionEqualToValue = useCallback(
+		(option: AutocompleteValueProps, currentValue: AutocompleteValueProps) => {
+			if (externalOptionEqualToValue) {
+				return externalOptionEqualToValue(option, currentValue);
+			}
+
+			return JSON.stringify(option) === JSON.stringify(currentValue);
+		},
+		[externalOptionEqualToValue],
+	);
+
+	const handleInputChange = (
+		event: SyntheticEvent,
+		currentValue: string,
+		reason: AutocompleteInputChangeReason,
+	) => {
+		onInputChange?.(event, currentValue, reason);
+
+		if (!loading) {
+			setInnerInputValue(currentValue);
+		}
+	};
+
+	return {
+		isValueEmpty,
+		isPopperVisible,
+		autocompleteProps: {
+			isOptionEqualToValue,
+			autoHighlight: freeSolo ? false : autoHighlight,
+			noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,
+			onInputChange: handleInputChange,
+		},
+	};
+};

package/src/components/Autocomplete/useLogic/utils/checkIsInputEmpty/checkIsInputEmpty.ts

@@ -0,0 +1,8 @@
+export const checkIsInputEmpty = (value: unknown): boolean => {
+	// мульти ввод
+	if (Array.isArray(value)) {
+		return value.length === 0;
+	}
+
+	return !value;
+};

package/src/components/Autocomplete/useLogic/utils/checkIsInputEmpty/index.ts

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

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

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