@max-ts/components 0.1.1 → 0.2.0

package/src/theme/components/MuiButton.ts

@@ -1,418 +0,0 @@
-import { type Components, buttonClasses } from '@mui/material';
-
-import {
-	type ButtonProps,
-	ButtonSizes,
-	type ButtonState,
-	ButtonStates,
-	ButtonVariants,
-} from '../../components/Button';
-
-import { LOADING_BUTTON_CLASSNAME } from '../../components/Button/constants';
-import type { Theme } from '../types';
-
-type WithTheme<T extends object> = T & { theme: Theme };
-
-type ButtonPropsWithTheme = WithTheme<ButtonProps<'button'>>;
-
-type GetButtonHeightOptions = Pick<ButtonPropsWithTheme, 'size'>;
-
-type GetButtonPaddingOptions = Pick<ButtonPropsWithTheme, 'size' | 'theme'>;
-
-type GetButtonPaddingMobileOptions = Pick<
-	ButtonPropsWithTheme,
-	'size' | 'theme' | 'variant'
->;
-
-type GetValueOptions = {
-	type?: string | undefined;
-	values: Record<string, string>;
-	defaultValue: string;
-};
-
-/**
- * Вспомогательная утилита для получения значения из values
- * values - содержит в себе все возможные значения
- * type - значение (ключ), который необходимо получить из values
- * defaultValue - значение по умолчанию, если значение values[type] не найдено
- */
-const getValue = ({ type, values, defaultValue }: GetValueOptions) => {
-	if (!type) {
-		return defaultValue;
-	}
-
-	return values[type] || defaultValue;
-};
-
-/**
- * Получить значения для высоты кнопки в зависимости от size параметра
- */
-export const getButtonHeight = (options: GetButtonHeightOptions): string =>
-	getValue({
-		type: options.size,
-		values: {
-			[ButtonSizes.Large]: '40px',
-		},
-		defaultValue: '32px',
-	});
-
-/**
- * Получить значения для высоты кнопки мобильной версии в зависимости от size параметра
- */
-export const getButtonHeightMobile = (
-	options: GetButtonHeightOptions,
-): string =>
-	getValue({
-		type: options.size,
-		values: {
-			[ButtonSizes.Small]: '36px',
-		},
-		defaultValue: '48px',
-	});
-
-/**
- * Получить значения внутренних отступов кнопки (padding) в зависимости от size параметра
- */
-export const getButtonPadding = (options: GetButtonPaddingOptions): string =>
-	getValue({
-		type: options.size,
-		values: {
-			[ButtonSizes.Large]: options.theme.spacing(2, 4, 2, 4),
-		},
-		defaultValue: options.theme.spacing(1, 3, 1, 3),
-	});
-
-/**
- * Получить значения внутренних отступов кнопки мобильной версии (padding) в зависимости от size параметра
- */
-export const getButtonPaddingMobile = (
-	options: GetButtonPaddingMobileOptions,
-): string => {
-	if (options.variant === ButtonVariants.Link) {
-		return '0';
-	}
-
-	return getValue({
-		type: options.size,
-		values: {
-			[ButtonSizes.Small]: options.theme.spacing(2, 3),
-		},
-		defaultValue: options.theme.spacing(4, 3),
-	});
-};
-
-const getButtonColor = ({
-	theme,
-	variant,
-	color,
-	buttonState,
-	selected,
-}: Pick<ButtonPropsWithTheme, 'theme' | 'color' | 'variant' | 'selected'> & {
-	buttonState: ButtonState;
-}): string => {
-	const textColorVariants = {
-		selected: {
-			default: theme.palette.grey['900'],
-			hover: theme.palette.grey['700'],
-			active: theme.palette.grey['800'],
-			focus: theme.palette.grey['900'],
-		},
-		light: {
-			error: {
-				default: theme.palette.red['900'],
-				hover: theme.palette.red['900'],
-				active: theme.palette.red['800'],
-				focus: theme.palette.red['900'],
-			},
-			success: {
-				default: theme.palette.green['900'],
-				hover: theme.palette.green['900'],
-				active: theme.palette.green['800'],
-				focus: theme.palette.green['900'],
-			},
-			primary: {
-				default: theme.palette.grey['900'],
-				hover: theme.palette.grey['900'],
-				active: theme.palette.primary['800'],
-				focus: theme.palette.grey['900'],
-			},
-			warning: {
-				default: theme.palette.yellow['900'],
-				hover: theme.palette.yellow['900'],
-				active: theme.palette.yellow['800'],
-				focus: theme.palette.yellow['900'],
-			},
-		},
-		contained: theme.palette.primary.contrastText,
-		text: {
-			default: theme.palette.grey['900'],
-			hover: theme.palette.grey['900'],
-			active: theme.palette.primary['800'],
-			focus: theme.palette.grey['900'],
-		},
-		link: {
-			default: theme.palette.primary['800'],
-			hover: theme.palette.primary['700'],
-			active: theme.palette.primary['900'],
-			focus: theme.palette.primary['800'],
-		},
-	};
-
-	if (selected) {
-		return variant !== ButtonVariants.Link
-			? theme.palette.primary.contrastText
-			: textColorVariants.selected[buttonState];
-	}
-
-	if (variant === ButtonVariants.Contained) {
-		return textColorVariants.contained;
-	}
-
-	if (variant === ButtonVariants.Light && color) {
-		return textColorVariants.light[color][buttonState];
-	}
-
-	if (variant === ButtonVariants.Text) {
-		return textColorVariants.text[buttonState];
-	}
-
-	return textColorVariants.link[buttonState];
-};
-
-export const getButtonBackgroundColor = ({
-	selected,
-	color,
-	variant,
-	buttonState,
-	theme,
-}: Pick<ButtonPropsWithTheme, 'selected' | 'color' | 'variant' | 'theme'> & {
-	buttonState: ButtonState;
-}) => {
-	const bgColorVariants = {
-		selected: {
-			default: theme.palette.grey['900'],
-			hover: theme.palette.grey['700'],
-			active: theme.palette.grey['800'],
-			focus: theme.palette.grey['900'],
-		},
-		light: {
-			error: {
-				default: theme.palette.red['100'],
-				hover: theme.palette.red['200'],
-				active: theme.palette.red['100'],
-				focus: theme.palette.red['100'],
-			},
-			success: {
-				default: theme.palette.green['100'],
-				hover: theme.palette.green['200'],
-				active: theme.palette.green['100'],
-				focus: theme.palette.green['100'],
-			},
-			primary: {
-				default: theme.palette.grey['100'],
-				hover: theme.palette.grey['200'],
-				active: theme.palette.primary['100'],
-				focus: theme.palette.grey['100'],
-			},
-			warning: {
-				default: theme.palette.yellow['100'],
-				hover: theme.palette.yellow['200'],
-				active: theme.palette.yellow['100'],
-				focus: theme.palette.yellow['100'],
-			},
-		},
-		contained: {
-			error: {
-				default: theme.palette.red['800'],
-				hover: theme.palette.red['700'],
-				active: theme.palette.red['900'],
-				focus: theme.palette.red['800'],
-			},
-			success: {
-				default: theme.palette.green['800'],
-				hover: theme.palette.green['700'],
-				active: theme.palette.green['900'],
-				focus: theme.palette.green['800'],
-			},
-			primary: {
-				default: theme.palette.primary['800'],
-				hover: theme.palette.primary['700'],
-				active: theme.palette.primary['900'],
-				focus: theme.palette.primary['800'],
-			},
-			warning: {
-				default: theme.palette.yellow['800'],
-				hover: theme.palette.yellow['700'],
-				active: theme.palette.yellow['900'],
-				focus: theme.palette.yellow['800'],
-			},
-		},
-		text: {
-			default: 'transparent',
-			hover: theme.palette.grey['200'],
-			active: theme.palette.primary['100'],
-			focus: 'transparent',
-		},
-		link: 'transparent',
-	};
-
-	if (selected && variant !== ButtonVariants.Link) {
-		return bgColorVariants.selected[buttonState];
-	}
-
-	if (variant === ButtonVariants.Light && color) {
-		return bgColorVariants.light[color][buttonState];
-	}
-
-	if (variant === ButtonVariants.Contained && color) {
-		return bgColorVariants.contained[color][buttonState];
-	}
-
-	if (variant === ButtonVariants.Text) {
-		return bgColorVariants.text[buttonState];
-	}
-
-	return bgColorVariants.link;
-};
-
-export const getButtonDisabledBackgroundColor = ({
-	theme,
-	variant,
-}: Pick<ButtonPropsWithTheme, 'theme' | 'variant'>): string => {
-	if (ButtonVariants.Link === variant || ButtonVariants.Text === variant) {
-		return 'transparent';
-	}
-
-	return theme.palette.grey['200'];
-};
-
-export const MuiButton: Components<Theme>['MuiButton'] = {
-	defaultProps: {
-		disableRipple: true,
-	},
-	styleOverrides: {
-		root({ ownerState, theme }) {
-			const variant = ownerState.variant as ButtonPropsWithTheme['variant'];
-			const color = ownerState.color as ButtonPropsWithTheme['color'];
-			const selected = ownerState.selected as ButtonPropsWithTheme['selected'];
-
-			const size = ownerState.size as ButtonPropsWithTheme['size'];
-
-			return {
-				height: getButtonHeight({ size }),
-				padding: getButtonPadding({
-					theme,
-					size,
-				}),
-				[theme.breakpoints.down('sm')]: {
-					height: getButtonHeightMobile({ size }),
-					padding: getButtonPaddingMobile({ size, theme, variant }),
-					whiteSpace: 'nowrap',
-				},
-				color: getButtonColor({
-					selected,
-					theme,
-					variant,
-					color,
-					buttonState: ButtonStates.Default,
-				}),
-				fontWeight: theme.typography.button.fontWeight,
-				fontSize: theme.typography.button.fontSize,
-				backgroundColor: getButtonBackgroundColor({
-					selected,
-					theme,
-					color,
-					variant,
-					buttonState: ButtonStates.Default,
-				}),
-				border: 'none',
-				borderRadius: theme.shape.small,
-				'&:hover': {
-					color: getButtonColor({
-						selected,
-						theme,
-						variant,
-						color,
-						buttonState: ButtonStates.Hover,
-					}),
-					backgroundColor: getButtonBackgroundColor({
-						selected,
-						color,
-						variant,
-						theme,
-						buttonState: ButtonStates.Hover,
-					}),
-					boxShadow: 'none',
-				},
-				'&:active': {
-					color: getButtonColor({
-						selected,
-						color,
-						variant,
-						theme,
-						buttonState: ButtonStates.Active,
-					}),
-					backgroundColor: getButtonBackgroundColor({
-						selected,
-						color,
-						variant,
-						theme,
-						buttonState: ButtonStates.Active,
-					}),
-					outline: 'none',
-				},
-				'&:focus-visible': {
-					color: getButtonColor({
-						selected,
-						theme,
-						variant,
-						color,
-						buttonState: ButtonStates.Focus,
-					}),
-					backgroundColor: getButtonBackgroundColor({
-						selected,
-						color,
-						variant,
-						theme,
-						buttonState: ButtonStates.Focus,
-					}),
-					outline: `2px solid ${theme.palette.primary['400']}`,
-					boxShadow: 'none',
-				},
-				[`&.${buttonClasses.disabled}`]: {
-					color: theme.palette.grey['500'],
-					backgroundColor: getButtonDisabledBackgroundColor({
-						theme,
-						variant,
-					}),
-					pointerEvents: 'none',
-					cursor: 'unset',
-				},
-				[`&.${LOADING_BUTTON_CLASSNAME}`]: {
-					color: 'transparent',
-					backgroundColor: getButtonBackgroundColor({
-						color,
-						variant,
-						theme,
-						buttonState: ButtonStates.Default,
-					}),
-				},
-
-				gap: theme.spacing(1),
-				textTransform: 'none',
-				boxShadow: 'none',
-				minWidth: 'auto',
-
-				'&.MuiButton-root .MuiButton-startIcon': {
-					marginRight: theme.spacing(1),
-				},
-				'&.MuiButton-root .MuiButton-endIcon': {
-					marginLeft: theme.spacing(1),
-				},
-				'&.MuiButton-root .MuiSvgIcon-root': {
-					fontSize: '24px',
-				},
-			};
-		},
-	},
-};

package/src/theme/components/MuiButtonBase.ts

@@ -1,16 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiButtonBase: Components<Theme>['MuiButtonBase'] = {
-	defaultProps: {
-		disableRipple: true,
-	},
-	styleOverrides: {
-		root({ theme }) {
-			return {
-				fontFamily: theme.typography.fontFamily,
-			};
-		},
-	},
-};

package/src/theme/components/MuiCircularProgress.ts

@@ -1,22 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiCircularProgress: Components<Theme>['MuiCircularProgress'] = {
-	styleOverrides: {
-		root({ ownerState, theme }) {
-			// В данном случае появилась необходимость использования data- атрибута
-			// Подробнее: https://github.com/kaluga-astral/frontend/pull/199/files/5b42598b80e5b199e1b1a1298844a51b489e9c5a#r857514116
-			const { 'data-color': color } = ownerState;
-
-			return {
-				color:
-					color === 'primary'
-						? theme.palette.grey[900]
-						: theme.palette.primary.contrastText,
-			};
-		},
-	},
-};
-
-export default MuiCircularProgress;

package/src/theme/components/MuiDialog.ts

@@ -1,13 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiDialog: Components<Theme>['MuiDialog'] = {
-	styleOverrides: {
-		paper({ theme }) {
-			return {
-				borderRadius: theme.shape.small,
-			};
-		},
-	},
-};

package/src/theme/components/MuiDialogActions.ts

@@ -1,17 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiDialogActions: Components<Theme>['MuiDialogActions'] = {
-	styleOverrides: {
-		root: ({ theme }) => {
-			return {
-				padding: theme.spacing(4, 6, 6, 6),
-
-				'>div': {
-					width: '100%',
-				},
-			};
-		},
-	},
-};

package/src/theme/components/MuiDialogContent.ts

@@ -1,13 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiDialogContent: Components<Theme>['MuiDialogContent'] = {
-	styleOverrides: {
-		root({ theme }) {
-			return {
-				padding: theme.spacing(0, 6),
-			};
-		},
-	},
-};

package/src/theme/components/MuiDialogTitle.ts

@@ -1,24 +0,0 @@
-import { type Components, buttonClasses } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiDialogTitle: Components<Theme>['MuiDialogTitle'] = {
-	styleOverrides: {
-		root({ theme }) {
-			return {
-				padding: theme.spacing(6, 6, 4),
-				fontSize: theme.typography.h4.fontSize,
-				fontWeight: theme.typography.h4.fontWeight,
-				lineHeight: theme.typography.h4.lineHeight,
-				display: 'flex',
-				justifyContent: 'space-between',
-				alignItems: 'center',
-
-				[`& .${buttonClasses.root}`]: {
-					marginLeft: theme.spacing(4),
-					color: theme.palette.grey[800],
-				},
-			};
-		},
-	},
-};

package/src/theme/components/MuiDrawer.ts

@@ -1,15 +0,0 @@
-import { type Components, backdropClasses, drawerClasses } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiDrawer: Components<Theme>['MuiDrawer'] = {
-	styleOverrides: {
-		root({ theme }) {
-			return {
-				[`&.${drawerClasses.root} > .${backdropClasses.root}`]: {
-					backgroundColor: theme.palette.background.modalShadow,
-				},
-			};
-		},
-	},
-};

package/src/theme/components/MuiFormHelperText.ts

@@ -1,23 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiFormHelperText: Components<Theme>['MuiFormHelperText'] = {
-	styleOverrides: {
-		root({ theme }: { theme: Theme }) {
-			//TODO В мажорном релизе заменить small на caption
-			return {
-				display: 'flex',
-				minHeight: theme.typography.small.lineHeight,
-				fontSize: theme.typography.small.fontSize,
-				margin: theme.spacing(1, 0, 0),
-				lineHeight: theme.typography.small.lineHeight,
-				'&.Mui-error': {
-					color: theme.palette.error.dark,
-				},
-			};
-		},
-	},
-};
-
-export default MuiFormHelperText;

package/src/theme/components/MuiFormLabel.ts

@@ -1,16 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiFormLabel: Components<Theme>['MuiFormLabel'] = {
-	styleOverrides: {
-		root() {
-			return {
-				position: 'relative',
-				transform: 'none',
-			};
-		},
-	},
-};
-
-export default MuiFormLabel;

package/src/theme/components/MuiInputLabel.ts

@@ -1,33 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiInputLabel: Components<Theme>['MuiInputLabel'] = {
-	defaultProps: {
-		shrink: true,
-	},
-	styleOverrides: {
-		root({ theme }) {
-			return {
-				position: 'relative',
-				transform: 'none',
-				color: theme.palette.grey[700],
-				fontWeight: theme.typography.fontWeightMedium,
-				fontSize: theme.typography.pxToRem(12),
-				lineHeight: theme.typography.pxToRem(16),
-				marginBottom: theme.spacing(1),
-				'&.Mui-focused': {
-					color: theme.palette.grey[700],
-				},
-				'&.Mui-error': {
-					color: theme.palette.grey[700],
-				},
-				'&.Mui-disabled': {
-					color: theme.palette.grey[600],
-				},
-			};
-		},
-	},
-};
-
-export default MuiInputLabel;

package/src/theme/components/MuiLinearProgress.ts

@@ -1,22 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiLinearProgress: Components<Theme>['MuiLinearProgress'] = {
-	styleOverrides: {
-		root({ theme }: { theme: Theme }) {
-			return {
-				width: '100%',
-				borderRadius: '4px',
-				backgroundColor: theme.palette.grey[300],
-			};
-		},
-		barColorPrimary({ theme }: { theme: Theme }) {
-			return {
-				backgroundColor: theme.palette.primary['800'],
-			};
-		},
-	},
-};
-
-export default MuiLinearProgress;

package/src/theme/components/MuiListItemButton.ts

@@ -1,16 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiListItemButton: Components<Theme>['MuiListItemButton'] = {
-	styleOverrides: {
-		root({ theme }) {
-			return {
-				'&.Mui-selected': {
-					color: theme.palette.primary[800],
-					backgroundColor: theme.palette.grey[100],
-				},
-			};
-		},
-	},
-};

package/src/theme/components/MuiListItemText.ts

@@ -1,16 +0,0 @@
-import type { Components } from '@mui/material';
-
-import type { Theme } from '../types';
-
-export const MuiListItemText: Components<Theme>['MuiListItemText'] = {
-	styleOverrides: {
-		root() {
-			return {
-				overflow: 'hidden',
-				whiteSpace: 'nowrap',
-				textAlign: 'left',
-				textOverflow: 'ellipsis',
-			};
-		},
-	},
-};