@max-ts/components 0.0.2

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,70 @@
+import { Checkbox, css, styled } from '@mui/material';
+import type { Theme } from '../../theme';
+
+type CheckboxStyledProps = {
+	isError?: boolean;
+};
+
+const getErrorStyles = (theme: Theme) => css`
+  &.Mui-checked {
+    color: ${theme.palette.red[800]};
+
+    &:hover {
+      color: ${theme.palette.red[700]};
+    }
+  }
+
+  & .MuiSvgIcon-border {
+    fill: ${theme.palette.red[800]};
+  }
+`;
+
+export const StyledCheckbox = styled(Checkbox, {
+	shouldForwardProp: (prop) => prop !== 'isError',
+})<CheckboxStyledProps>`
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  color: ${({ theme }) => theme.palette.background.element};
+
+  border-radius: unset;
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.grey[100]};
+  }
+
+  & .MuiSvgIcon-border {
+    fill: ${({ theme }) => theme.palette.grey[300]};
+  }
+
+  & > svg {
+    width: calc(16 / 14 * 1rem);
+    height: calc(16 / 14 * 1rem);
+  }
+
+  &.Mui-disabled {
+    color: ${({ theme }) => theme.palette.grey[200]};
+
+    & .MuiSvgIcon-border {
+      fill: currentColor;
+    }
+  }
+
+  &.Mui-checked,
+  &.MuiCheckbox-indeterminate {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[700]};
+    }
+
+    &.Mui-disabled {
+      color: ${({ theme }) => theme.palette.grey[500]};
+    }
+
+    & .MuiSvgIcon-mark {
+      fill: ${({ theme }) => theme.palette.common.white};
+    }
+  }
+
+  ${({ isError, theme }) => isError && getErrorStyles(theme)}
+`;

package/src/components/CheckboxField/CheckboxField.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CheckboxField } from './CheckboxField';
+
+const meta: Meta<typeof CheckboxField> = {
+	title: 'Components/Inputs/CheckboxField',
+	component: CheckboxField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxField>;
+
+export const Interaction: Story = {
+	args: {
+		label: 'Текст',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return <CheckboxField label='Текст' helperText={'helper text'} />;
+};
+
+export const Default = () => <CheckboxField label='Текст (default)' />;
+
+export const HelperText = () => (
+	<CheckboxField label='Текст (helper text)' helperText={'helper text'} />
+);
+
+export const ErrorExample = () => (
+	<CheckboxField label='Текст (error)' helperText={'helper text'} isError />
+);
+
+export const ErrorTooltip = () => (
+	<CheckboxField
+		label='Текст (error, tooltip)'
+		helperText={'helper text'}
+		isError
+		hideHelperText
+	/>
+);
+
+export const Success = () => (
+	<CheckboxField label='Текст (success)' helperText={'helper text'} isSuccess />
+);

package/src/components/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode, useMemo } from 'react';
+
+import type { CheckboxProps } from '../Checkbox';
+import { FormControl } from '../FormControl';
+import { FormHelperText } from '../FormHelperText';
+import { Tooltip } from '../Tooltip';
+
+import { StyledCheckbox, StyledFormControlledLabel } from './styles';
+
+export type CheckboxFieldProps = CheckboxProps & {
+	/**
+	 * Флаг отображения успешного состояния текстовой ошибки (helperText)
+	 */
+	isSuccess?: boolean;
+	/**
+	 * Текст-подсказка
+	 */
+	helperText?: ReactNode;
+	/**
+	 * Флаг принудительного скрытия блока helperText
+	 */
+	hideHelperText?: boolean;
+	/**
+	 * Текст или элемент около чекбокса (обычно краткое описание назначения чекбокса)
+	 */
+	label: ReactNode;
+};
+
+/**
+ * Составной компонент чекбокса. Содержит label, tooltip, helperText и т.д.
+ */
+export const CheckboxField = ({
+	isSuccess,
+	helperText,
+	hideHelperText = false,
+	label,
+	isError,
+	...restProps
+}: CheckboxFieldProps) => {
+	const showTooltip = useMemo(
+		() => Boolean(isError && hideHelperText),
+		[isError, hideHelperText],
+	);
+
+	return (
+		<FormControl>
+			<Tooltip
+				title={showTooltip && helperText}
+				placement='bottom-start'
+				withoutContainer={false}
+			>
+				<StyledFormControlledLabel
+					control={<StyledCheckbox isError={isError} {...restProps} />}
+					label={label}
+				/>
+			</Tooltip>
+			{!hideHelperText && (
+				<FormHelperText error={isError} success={isSuccess}>
+					{helperText}
+				</FormHelperText>
+			)}
+		</FormControl>
+	);
+};

package/src/components/CheckboxField/index.ts

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

package/src/components/CheckboxField/styles.ts

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material';
+import { Checkbox } from '../Checkbox';
+import { FormControlLabel } from '../FormControlLabel';
+
+/**
+ * Выравнивает элементы по вертикали
+ */
+export const StyledFormControlledLabel = styled(FormControlLabel)`
+  align-items: flex-start;
+`;
+
+/**
+ * Уменьшает padding сверху, чтобы чекбокс не был ниже текста
+ */
+export const StyledCheckbox = styled(Checkbox)`
+  padding-top: 3px;
+`;

package/src/components/Chevron/Chevron.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Button } from '../Button';
+
+import { Chevron } from './Chevron';
+
+const meta: Meta<typeof Chevron> = {
+	title: 'Components/Chevron',
+	component: Chevron,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chevron>;
+
+export const Interaction: Story = {
+	args: {},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [isActive, setActive] = useState(false);
+
+	return (
+		<>
+			<Button onClick={() => setActive(!isActive)}>Toggle</Button>
+			<Chevron isActive={isActive} />
+		</>
+	);
+};

package/src/components/Chevron/Chevron.tsx

@@ -0,0 +1,12 @@
+import type { SvgIconProps } from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { ChevronIcon } from './styles';
+
+export type ChevronProps = { isActive?: boolean; className?: string } & Omit<
+	WithoutEmotionSpecific<SvgIconProps>,
+	'children' | 'classes' | 'ref'
+>;
+
+export const Chevron = (props: ChevronProps) => <ChevronIcon {...props} />;

package/src/components/Chevron/index.ts

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

package/src/components/Chevron/styles.tsx

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material';
+import { ChevronsDown } from 'lucide-react';
+
+type ChevronWrapperProps = { isActive?: boolean };
+
+// @ts-ignore
+export const ChevronIcon = styled(ChevronsDown, {
+	shouldForwardProp: (prop) => prop !== 'isActive',
+})<ChevronWrapperProps>`
+  transform: rotateZ(${({ isActive }) => (isActive ? 180 : 0)}deg);
+
+  transition: ${({ theme }) =>
+		theme.transitions.create('transform', {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.short,
+		})};
+`;

package/src/components/CircularProgress/CircularProgress.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CircularProgress } from './CircularProgress';
+
+const meta: Meta<typeof CircularProgress> = {
+	title: 'Components/CircularProgress',
+	component: CircularProgress,
+	parameters: {
+		options: {
+			showPanel: true,
+		},
+		controls: {
+			expanded: true,
+		},
+		backgrounds: {
+			default: 'dark',
+			values: [
+				{ name: 'dark', value: '#B7C2CE' },
+				{ name: 'light', value: '#EBEEF1' },
+			],
+		},
+	},
+};
+
+type Story = StoryObj<typeof CircularProgress>;
+
+export const Interaction: Story = {
+	args: {},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export default meta;
+
+export const Example = () => <CircularProgress />;
+
+export const Color = () => (
+	<>
+		<CircularProgress color='primary' />
+		<CircularProgress color='inverted' />
+	</>
+);
+
+export const Size = () => (
+	<>
+		<CircularProgress size='small' />
+		<CircularProgress size='medium' />
+	</>
+);

package/src/components/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,42 @@
+import {
+	CircularProgress as MuiCircularProgress,
+	type CircularProgressProps as MuiCircularProgressProps,
+} from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { useLogic } from './useLogic';
+
+declare module '@mui/material/CircularProgress' {
+	interface CircularProgressPropsColorOverrides {
+		primary: true;
+		inverted: true;
+	}
+}
+
+export type CircularProgressProps = WithoutEmotionSpecific<
+	Omit<WithoutEmotionSpecific<MuiCircularProgressProps>, 'color' | 'size'>
+> & {
+	/**
+	 * Цвет лоадера
+	 */
+	color?: 'primary' | 'inverted';
+	/**
+	 * Размер лоадера
+	 */
+	size?: 'small' | 'medium';
+};
+
+export const CircularProgress = (props: CircularProgressProps) => {
+	const { size } = useLogic({ ...props });
+	const { size: sizeProp, color, ...restProps } = props;
+
+	return (
+		<MuiCircularProgress
+			{...restProps}
+			size={size}
+			color='inherit'
+			data-color={color}
+		/>
+	);
+};

package/src/components/CircularProgress/constants.ts

@@ -0,0 +1,9 @@
+export enum CircularProgressColors {
+	PRIMARY = 'primary',
+	INVERTED = 'inverted',
+}
+
+export enum CircularProgressSizes {
+	SMALL = 'small',
+	MEDIUM = 'medium',
+}

package/src/components/CircularProgress/index.ts

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

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

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

package/src/components/CircularProgress/useLogic/useLogic.ts

@@ -0,0 +1,9 @@
+import type { CircularProgressProps } from '../CircularProgress';
+
+type UseLogicParams = CircularProgressProps;
+
+export const useLogic = ({ size: sizeProp }: UseLogicParams) => {
+	const size = sizeProp === 'small' ? 16 : 24;
+
+	return { size };
+};

package/src/components/Collapse/Collapse.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Chevron } from '../Chevron';
+import { List } from '../List';
+import { ListItem } from '../ListItem';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+
+import { House } from 'lucide-react';
+import { Collapse } from './Collapse';
+
+const meta: Meta<typeof Collapse> = {
+	title: 'Components/Data Display/Collapse',
+	component: Collapse,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapse>;
+
+export const Interaction: Story = {
+	args: {
+		children: 'Content',
+		in: true,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [open, setOpen] = useState(true);
+
+	const handleClick = () => {
+		setOpen(!open);
+	};
+
+	return (
+		<List>
+			<ListItem onClick={handleClick}>
+				<ListItemIcon>
+					<House />
+				</ListItemIcon>
+				<ListItemText primary='Inbox' />
+				<Chevron isActive={open} />
+			</ListItem>
+			<Collapse in={open}>
+				<List disablePadding>
+					<ListItem>
+						<ListItemIcon>
+							<House />
+						</ListItemIcon>
+						<ListItemText primary='Collapsed' />
+					</ListItem>
+					<ListItem>
+						<ListItemIcon>
+							<House />
+						</ListItemIcon>
+						<ListItemText primary='Collapsed' />
+					</ListItem>
+				</List>
+			</Collapse>
+		</List>
+	);
+};

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,10 @@
+import {
+	Collapse as MuiCollapse,
+	type CollapseProps as MuiCollapseProps,
+} from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+export type CollapseProps = WithoutEmotionSpecific<MuiCollapseProps>;
+
+export const Collapse = (props: CollapseProps) => <MuiCollapse {...props} />;

package/src/components/Collapse/index.ts

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

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -0,0 +1,165 @@
+import { type ReactNode, createContext, useEffect } from 'react';
+
+import type { ImageProps } from '../Placeholder';
+
+const imagesMapDefault = {
+	noDataImgSrc: '',
+	defaultErrorImgSrc: '',
+	outdatedReleaseErrorImgSrc: '',
+	mailImgSrc: '',
+};
+
+const techSupDefault = {
+	phone: '',
+	email: '',
+};
+
+const defaultHidePersonalDataClassname = 'ym-hide-content';
+
+type Language = 'ru';
+type ImagesMap = {
+	/**
+	 * Изображение при отсутствии данных (используется в DataGrid)
+	 */
+	noDataImgSrc: string;
+
+	/**
+	 * Изображение при ошибке (используется в ContentState)
+	 */
+
+	defaultErrorImgSrc: string;
+	/**
+	 * Изображение при ошибке загрузки актуальных чанков (используется в
+	 * ContentState/ErrorBoundary)
+	 */
+	outdatedReleaseErrorImgSrc: string;
+
+	/**
+	 * Изображение при успешной отправке данных (используется в FeedbackPanel)
+	 */
+	mailImgSrc?: string;
+
+	/**
+	 * Изображение для загружаемых файлов (используется в PreviewFileUploader)
+	 */
+	uploadFileImgSrc?: string;
+
+	/**
+	 * Изображение файла, если он не валиден (используется в PreviewFileUploader)
+	 */
+	errorFileImgSrc?: string;
+};
+
+type TechnicalSupport = {
+	phone: string;
+	email: string;
+};
+
+export type ConfigContextProps = {
+	/**
+	 * Язык локализации
+	 * @default 'ru'
+	 */
+	language: Language;
+	/*
+	 * Callback для отправки ошибки в sentry
+	 */
+	// eslint-disable-next-line
+	captureException: (error: unknown) => void;
+
+	/**
+	 * Карта для типовых изображений.
+	 * Используется в компонентах ui-kit, где требуется отображение декоративных
+	 * img
+	 */
+	imagesMap: ImagesMap;
+	/**
+	 * Символ для пустого значения
+	 * @default '—'
+	 */
+	emptySymbol: string;
+	/**
+	 * Данные технической поддержки
+	 * @default '-'
+	 */
+	techSup: TechnicalSupport;
+	/**
+	 *  флаг скрытия персональной информации от трекеров
+	 *  @default true
+	 */
+	hidePersonalData?: boolean;
+	/**
+	 * цсс класс для сокрытия персональной информации от трекеров
+	 * @default 'ym-hide-content'
+	 */
+	hidePersonalDataClassname?: string;
+	/**
+	 * Настройки для общеиспользуемых компонентов
+	 */
+	components?: {
+		/**
+		 * Настройки для компонента Placeholder
+		 */
+		placeholder?: {
+			defaultProps?: {
+				/**
+				 * Кастомный компонент, ответственный за рендер основного изображения,
+				 * По умолчанию рендерится обычный img тег
+				 */
+				renderImage?: (props: ImageProps) => ReactNode;
+			};
+		};
+	};
+};
+
+export type ConfigProviderProps = Partial<ConfigContextProps> & {
+	children: ReactNode;
+};
+
+export const ConfigContext = createContext<ConfigContextProps>({
+	language: 'ru',
+	captureException: (error) => console.error(error),
+	imagesMap: imagesMapDefault,
+	techSup: techSupDefault,
+	emptySymbol: '—',
+	hidePersonalDataClassname: defaultHidePersonalDataClassname,
+	hidePersonalData: true,
+});
+
+export const ConfigProvider = ({
+	children,
+	language = 'ru',
+	captureException,
+	emptySymbol = '—',
+	imagesMap = imagesMapDefault,
+	techSup = techSupDefault,
+	hidePersonalData = true,
+	hidePersonalDataClassname = defaultHidePersonalDataClassname,
+	components,
+}: Partial<ConfigProviderProps>) => {
+	useEffect(() => {
+		if (!captureException) {
+			console.warn(
+				'ConfigProvider: Необходимо наличие captureException, связанного с сервисом мониторинга ошибок.\n' +
+					'На данный момент все ошибки, отлавливаемые в ErrorBoundary будут выводиться только в консоль',
+			);
+		}
+	}, []);
+
+	return (
+		<ConfigContext.Provider
+			value={{
+				language,
+				captureException: captureException || ((error) => console.error(error)),
+				emptySymbol,
+				imagesMap,
+				techSup,
+				hidePersonalData,
+				hidePersonalDataClassname,
+				components,
+			}}
+		>
+			{children}
+		</ConfigContext.Provider>
+	);
+};

package/src/components/ConfigProvider/index.ts

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