@max-ts/components 0.1.1 → 0.2.0

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

@@ -1,320 +0,0 @@
-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';
-
-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

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

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

package/src/components/Select/index.ts

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

package/src/components/Select/styles.ts

@@ -1,60 +0,0 @@
-import { Select, selectClasses, styled } from '@mui/material';
-
-import { CircleX } from 'lucide-react';
-import { IconButton } from '../IconButton';
-import { MenuItem } from '../MenuItem';
-
-export const ProgressWrapper = styled('div')`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  min-height: 64px;
-
-  .MuiCircularProgress-root {
-    margin-top: ${({ theme }) => theme.spacing(5)};
-
-    color: ${({ theme }) => theme.palette.grey['900']};
-  }
-`;
-
-export const Placeholder = styled(MenuItem)`
-  display: none;
-`;
-
-export const StyledIconButton = styled(IconButton)`
-  background-color: transparent;
-
-  &:hover {
-    background-color: transparent;
-
-    svg {
-      fill: ${({ theme }) => theme.palette.grey['700']};
-    }
-  }
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 32px;
-    height: 32px;
-  }
-`;
-
-export const StyledCloseFillSm = styled(CircleX)`
-  width: 16px;
-  height: 16px;
-
-  fill: ${({ theme }) => theme.palette.grey['500']};
-`;
-
-export const EndAdornmentWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-
-  margin-left: auto;
-`;
-
-export const StyledSelect = styled(Select)`
-  .${selectClasses.select} {
-    padding-right: ${({ theme }) => theme.spacing(2)} !important;
-  }
-` as unknown as typeof Select;

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

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

package/src/components/Select/useLogic/useLogic.ts

@@ -1,53 +0,0 @@
-import type { SelectChangeEvent } from '@mui/material';
-import { Children, useRef, useState } from 'react';
-
-import type { SelectProps } from '../Select';
-
-export function useLogic<Value>({
-	value,
-	onChange,
-	children,
-	open: externalIsOpened,
-	defaultOpen,
-	multiple,
-	isShowClearButton = true,
-}: SelectProps<Value>) {
-	const [isOpened, setOpened] = useState(
-		defaultOpen || externalIsOpened || false,
-	);
-	const resetButtonRef = useRef<HTMLButtonElement>(null);
-
-	const openSelect = () => setOpened(true);
-	const closeSelect = () => setOpened(false);
-
-	const onClearAll = () => {
-		const changeEvent = {
-			target: {
-				value: multiple ? ([] as string[]) : '',
-			},
-		} as SelectChangeEvent<string[]>;
-
-		type OnChangeFn = (e: SelectChangeEvent<string[]>) => void;
-
-		(onChange as OnChangeFn)?.call({}, changeEvent);
-	};
-	const isShowingClearButton =
-		isShowClearButton &&
-		!(
-			!value ||
-			(Array.isArray(value) && value.length === 0) ||
-			(typeof value === 'string' && value.length === 0)
-		);
-
-	const isNoData = !Children.count(children);
-
-	return {
-		isOpened,
-		isNoData,
-		isShowingClearButton,
-		resetButtonRef,
-		openSelect,
-		closeSelect,
-		onClearAll,
-	};
-}