@max-ts/components 0.0.2

package/src/components/SearchField/SearchField.tsx

@@ -0,0 +1,93 @@
+import { type ChangeEvent, forwardRef, useRef, useState } from 'react';
+
+import type { TextFieldProps } from '../TextField';
+
+import {
+	StyledCloseFillSm,
+	StyledIconButton,
+	StyledSearchIcon,
+	StyledTextField,
+} from './styles';
+
+export type SearchFieldProps = Omit<
+	TextFieldProps,
+	'startAdornment' | 'endAdornment'
+>;
+
+export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
+	(
+		{
+			margin = 'none',
+			placeholder = 'Поиск',
+			onChange,
+			disabled,
+			value: propsValue,
+			defaultValue,
+			...props
+		}: SearchFieldProps,
+		ref,
+	) => {
+		const [value, setValue] = useState(`${defaultValue || propsValue || ''}`);
+
+		const inputRef = useRef<HTMLInputElement | null>(null);
+
+		const handleChangeValue = (
+			event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+		) => {
+			setValue(event.target.value);
+			onChange?.(event);
+		};
+
+		const handleClickClearValue = () => {
+			setValue('');
+			if (inputRef.current) {
+				inputRef.current.value = '';
+			}
+
+			const inputEvent = new InputEvent('input', {
+				bubbles: true,
+				cancelable: true,
+			});
+
+			Object.defineProperty(inputEvent, 'target', {
+				writable: true,
+				value: inputRef.current,
+			});
+
+			onChange?.(inputEvent as unknown as ChangeEvent<HTMLInputElement>);
+			inputRef.current?.focus();
+		};
+
+		const handleClickStartAdornment = () => {
+			inputRef.current?.focus();
+		};
+
+		const isClearButtonActive = Boolean(value.length);
+
+		return (
+			<StyledTextField
+				margin={margin}
+				placeholder={placeholder}
+				startAdornment={
+					<StyledSearchIcon onClick={handleClickStartAdornment} />
+				}
+				disabled={disabled}
+				endAdornment={
+					<StyledIconButton
+						variant='text'
+						onClick={handleClickClearValue}
+						disabled={disabled || !isClearButtonActive}
+						$isActive={isClearButtonActive}
+					>
+						<StyledCloseFillSm />
+					</StyledIconButton>
+				}
+				onChange={handleChangeValue}
+				value={value}
+				ref={ref}
+				inputRef={inputRef}
+				{...props}
+			/>
+		);
+	},
+);

package/src/components/SearchField/index.ts

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

package/src/components/SearchField/styles.ts

@@ -0,0 +1,38 @@
+import { styled } from '@mui/material';
+import { CircleX, Search } from 'lucide-react';
+import { IconButton } from '../IconButton';
+import { TextField } from '../TextField';
+
+export const StyledSearchIcon = styled(Search)`
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;
+
+export const StyledIconButton = styled(IconButton, {
+	shouldForwardProp: (prop) => !['$isActive'].includes(prop.toString()),
+})<{
+	$isActive: boolean;
+}>`
+  opacity: ${({ $isActive }) => ($isActive ? 1 : 0)};
+
+  &:hover {
+    background-color: transparent;
+
+    svg {
+      fill: ${({ theme }) => theme.palette.grey['700']};
+    }
+  }
+`;
+
+export const StyledTextField = styled(TextField)`
+  & .MuiFormHelperText-root {
+    /* TODO Убрать после реализации https://track.astral.ru/soft/browse/UIKIT-1333 */
+    display: none;
+  }
+`;
+
+export const StyledCloseFillSm = styled(CircleX)`
+  width: 16px;
+  height: 16px;
+
+  fill: ${({ theme }) => theme.palette.grey['500']};
+`;

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,324 @@
+import {
+	ListItemIcon,
+	ListSubheader,
+	type SelectChangeEvent,
+	Stack,
+} from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Checkbox } from '../Checkbox';
+import { MenuItem } from '../MenuItem';
+
+import { Select, type SelectProps } from './Select';
+
+/**
+ * ### [Figma](https://www.figma.com/file/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?node-id=8756%3A125130)
+ * ### [Guide]()
+ */
+const meta: Meta<typeof Select> = {
+	title: 'Components/Inputs/Select',
+	component: Select,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+const FIX_WIDTH_SELECT = 360;
+
+const OPTIONS: string[] = [
+	'Value 1',
+	'Value 2',
+	'Value 3',
+	'Value 4',
+	'Value 5',
+	'Value 6',
+	'Value 7',
+	'Value 8',
+];
+
+const MULTIPLE_OPTIONS: Array<{ value: string; name: string }> = [
+	{ value: '1', name: 'Валерий 1' },
+	{ value: '2', name: 'Валерий 2' },
+	{ value: '3', name: 'Валерий 3' },
+	{ value: '4', name: 'Длинное название' },
+	{ value: '5', name: 'Куда более длинное название' },
+	{ value: '6', name: 'Реально куда более длинное название, очень большое' },
+];
+
+export const Interaction: Story = {
+	render: (args) => {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const [singleValue, setSingleValue] = useState('');
+		const handleSingleChange = (event: SelectChangeEvent<unknown>) => {
+			setSingleValue(event.target.value as string);
+		};
+
+		return (
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select onChange={handleSingleChange} value={singleValue} {...args}>
+					{OPTIONS.map((option) => (
+						<MenuItem value={option} key={option}>
+							{option}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+		);
+	},
+	args: {
+		label: 'Select',
+		placeholder: 'Выберите вариант',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [singleValue, setSingleValue] = useState('');
+	const handleSingleChange = (event: SelectChangeEvent<typeof singleValue>) => {
+		setSingleValue(event.target.value);
+	};
+
+	return (
+		<>
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select
+					label='Basic'
+					onChange={handleSingleChange}
+					value={singleValue}
+					placeholder='Выберите вариант'
+					fullWidth
+				>
+					{OPTIONS.map((option) => (
+						<MenuItem value={option} key={option}>
+							{option}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select
+					label='Disabled'
+					onChange={handleSingleChange}
+					value={singleValue}
+					placeholder='Выберите вариант'
+					fullWidth
+					disabled
+				>
+					{OPTIONS.map((option) => (
+						<MenuItem value={option} key={option}>
+							{option}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+		</>
+	);
+};
+
+export const Disabled = () => {
+	const [singleValue, setSingleValue] = useState('');
+	const handleSingleChange = (event: SelectChangeEvent<typeof singleValue>) => {
+		setSingleValue(event.target.value);
+	};
+
+	return (
+		<>
+			<Select
+				label='Standard'
+				onChange={handleSingleChange}
+				value={singleValue}
+				placeholder='Выберите вариант'
+				disabled
+			>
+				{OPTIONS.map((option) => (
+					<MenuItem value={option} key={option}>
+						{option}
+					</MenuItem>
+				))}
+			</Select>
+		</>
+	);
+};
+
+export const Loading = () => {
+	const [singleValue, setSingleValue] = useState('');
+	const [loading, setLoading] = React.useState(false);
+
+	const handleFetchOptions = () => {
+		setLoading(true);
+		setTimeout(() => setLoading(false), 2000);
+	};
+
+	const handleSingleChange = (event: SelectChangeEvent<typeof singleValue>) => {
+		setSingleValue(event.target.value);
+	};
+
+	return (
+		<>
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select
+					placeholder='Выберите вариант'
+					value={singleValue}
+					onChange={handleSingleChange}
+					label='Loading'
+					onOpen={handleFetchOptions}
+					loading={loading}
+				>
+					{OPTIONS.map((option) => (
+						<MenuItem value={option} key={option}>
+							{option}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+		</>
+	);
+};
+
+export const Validation = () => {
+	const [singleValue, setSingleValue] = React.useState('');
+
+	const handleSingleChange = (event: SelectChangeEvent<typeof singleValue>) =>
+		setSingleValue(event.target.value);
+
+	return (
+		<>
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select
+					error
+					helperText='Ошибка валидации'
+					placeholder='Выберите вариант'
+					value={singleValue}
+					label='Error'
+					onChange={handleSingleChange}
+				>
+					{OPTIONS.map((option) => (
+						<MenuItem value={option} key={option}>
+							{option}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select
+					success
+					helperText='Проверка пройдена'
+					placeholder='Выберите вариант'
+					value={singleValue}
+					label='Success'
+					onChange={handleSingleChange}
+				>
+					{OPTIONS.map((option) => (
+						<MenuItem value={option} key={option}>
+							{option}
+						</MenuItem>
+					))}
+				</Select>
+			</Stack>
+		</>
+	);
+};
+
+export const Multiple = () => {
+	const [multipleValue, setMultipleValue] = React.useState<string[]>([]);
+
+	const handleMultipleChange = (
+		event: SelectChangeEvent<typeof multipleValue>,
+	) => {
+		setMultipleValue(event.target.value as string[]);
+	};
+
+	const renderMultipleOptions = () => {
+		return MULTIPLE_OPTIONS.map(({ value, name }) => {
+			const checked = multipleValue.includes(value);
+
+			return (
+				<MenuItem value={value} key={value}>
+					<ListItemIcon>
+						<Checkbox checked={checked} />
+					</ListItemIcon>
+					{name}
+				</MenuItem>
+			);
+		});
+	};
+
+	const getOptionLabel = (value: string | number) => {
+		const optionLabel = MULTIPLE_OPTIONS.find(
+			(option) => option.value === value,
+		);
+
+		return optionLabel?.name || value;
+	};
+
+	return (
+		<Stack width='100%' maxWidth={FIX_WIDTH_SELECT}>
+			<Select
+				placeholder='Выберите вариант'
+				value={multipleValue}
+				label='Multiple'
+				onChange={handleMultipleChange}
+				getOptionLabel={getOptionLabel}
+				multiple
+			>
+				{renderMultipleOptions()}
+			</Select>
+		</Stack>
+	);
+};
+
+export const Grouping = () => {
+	const [singleValue, setSingleValue] = React.useState('');
+
+	const handleSingleChange = (event: SelectChangeEvent<typeof singleValue>) =>
+		setSingleValue(event.target.value);
+
+	return (
+		<>
+			<Stack width={FIX_WIDTH_SELECT}>
+				<Select
+					placeholder='Выберите вариант'
+					value={singleValue}
+					label='Grouping'
+					onChange={handleSingleChange}
+				>
+					<ListSubheader>Group 1</ListSubheader>
+					<MenuItem value={1}>Option 1</MenuItem>
+					<MenuItem value={2}>Option 2</MenuItem>
+					<ListSubheader>Group 2</ListSubheader>
+					<MenuItem value={3}>Option 3</MenuItem>
+					<MenuItem value={4}>Option 4</MenuItem>
+				</Select>
+			</Stack>
+		</>
+	);
+};
+
+export const NoData = () => {
+	const [singleValue, setSingleValue] = useState('');
+	const handleSingleChange = (event: SelectChangeEvent<typeof singleValue>) => {
+		setSingleValue(event.target.value);
+	};
+
+	return (
+		<>
+			<Select
+				label='No data'
+				onChange={handleSingleChange}
+				value={singleValue}
+				placeholder='Выберите вариант'
+				fullWidth
+			>
+				{[]}
+			</Select>
+		</>
+	);
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,204 @@
+import {
+	FormControl,
+	InputLabel,
+	type SelectProps as MuiSelectProps,
+	type SelectChangeEvent,
+} from '@mui/material';
+import type { ReactNode, Ref } from 'react';
+
+import { CircularProgress } from '../CircularProgress';
+import { FormHelperText } from '../FormHelperText';
+import { MenuItem } from '../MenuItem';
+import { TagsList } from '../TagsList';
+import type { WithoutEmotionSpecific } from '../types';
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { CLEAR_TEXT } from './constants';
+import {
+	EndAdornmentWrapper,
+	Placeholder,
+	ProgressWrapper,
+	StyledCloseFillSm,
+	StyledIconButton,
+	StyledSelect,
+} from './styles';
+import { useLogic } from './useLogic';
+
+export type SelectProps<Value> = WithoutEmotionSpecific<
+	Omit<MuiSelectProps<Value>, 'variant'>
+> & {
+	loading?: boolean;
+	placeholder?: string;
+	getOptionLabel?: (value: string | number) => string | number;
+	/**
+	 * Добавляет вспомогательный текст под селектом
+	 */
+	helperText?: ReactNode;
+	/**
+	 * Скрывает вспомогательный текст под селектом
+	 */
+	hideHelperText?: boolean;
+	/**
+	 * Если `false`, кнопка сброса не отобразится
+	 * @default true
+	 */
+	isShowClearButton?: boolean;
+	success?: boolean;
+	error?: boolean;
+	label?: string;
+};
+
+type ClearButtonProps = {
+	onClick: () => void;
+	disabled?: boolean;
+	ref: Ref<HTMLButtonElement>;
+};
+
+const ClearButton = ({ onClick, disabled, ref }: ClearButtonProps) => (
+	<StyledIconButton
+		disabled={disabled}
+		ref={ref}
+		onClick={onClick}
+		variant='text'
+		title={CLEAR_TEXT}
+		aria-label={CLEAR_TEXT}
+	>
+		<StyledCloseFillSm />
+	</StyledIconButton>
+);
+
+export const Select = <Value,>({
+	required,
+	getOptionLabel = (value) => value,
+	placeholder,
+	helperText,
+	hideHelperText = false,
+	loading,
+	success,
+	children,
+	disabled,
+	error,
+	label,
+	fullWidth,
+	onChange: externalOnChange,
+	isShowClearButton,
+	...props
+}: SelectProps<Value>) => {
+	const {
+		isOpened,
+		isShowingClearButton,
+		isNoData,
+		onClearAll,
+		openSelect,
+		closeSelect,
+		resetButtonRef,
+	} = useLogic({
+		...props,
+		children,
+		onChange: externalOnChange,
+		isShowClearButton,
+	});
+
+	const renderValue = (selectedOptions: Value): ReactNode => {
+		// Массив с выбранными опциями
+		if (Array.isArray(selectedOptions) && selectedOptions.length) {
+			const handleChange = (value: Array<Value> | undefined) => {
+				if (!value) {
+					const event = {
+						target: {
+							value: [],
+						},
+					} as SelectChangeEvent<Value>;
+
+					return externalOnChange?.(event, undefined);
+				}
+
+				// Создание искусственного события для передачи в onChange
+				const event = {
+					target: {
+						value,
+					},
+				} as SelectChangeEvent<Value>;
+
+				// Вызов исходной функции с созданным событием
+				return externalOnChange?.(event, undefined);
+			};
+
+			return (
+				<TagsList
+					data={selectedOptions}
+					keyId='value'
+					getOptionLabel={getOptionLabel}
+					onChange={handleChange}
+					onClick={openSelect}
+				/>
+			);
+		}
+
+		// Пустой массив или пустая строка
+		if (
+			(Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&
+			!selectedOptions.length
+		) {
+			return placeholder;
+		}
+
+		// Строка
+		return getOptionLabel(selectedOptions as string | number);
+	};
+
+	return (
+		<FormControl error={error} fullWidth={fullWidth}>
+			{label && (
+				<InputLabel htmlFor='grouped-select' required={required}>
+					{label}
+				</InputLabel>
+			)}
+			<StyledSelect
+				{...props}
+				open={isOpened}
+				disabled={disabled}
+				onOpen={openSelect}
+				onClose={closeSelect}
+				renderValue={renderValue}
+				IconComponent={() => null}
+				displayEmpty
+				fullWidth={fullWidth}
+				onChange={externalOnChange}
+				endAdornment={
+					<EndAdornmentWrapper>
+						{isShowingClearButton && (
+							<ClearButton
+								disabled={disabled}
+								ref={resetButtonRef}
+								onClick={onClearAll}
+							/>
+						)}
+						<StyledIconButton
+							variant='text'
+							disabled={disabled}
+							onClick={openSelect}
+						>
+							{!isOpened ? <ChevronDown /> : <ChevronUp />}
+						</StyledIconButton>
+					</EndAdornmentWrapper>
+				}
+			>
+				<Placeholder value=''>{placeholder}</Placeholder>
+				{loading && (
+					<ProgressWrapper>
+						<CircularProgress color='primary' />
+					</ProgressWrapper>
+				)}
+				{!loading && children}
+				{!loading && isNoData && <MenuItem disabled>Нет данных</MenuItem>}
+			</StyledSelect>
+
+			{!hideHelperText && (
+				<FormHelperText error={error} success={success}>
+					{helperText}
+				</FormHelperText>
+			)}
+		</FormControl>
+	);
+};

package/src/components/Select/constants.ts

@@ -0,0 +1 @@
+export const CLEAR_TEXT = 'Очистить';

package/src/components/Select/index.ts

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