@max-ts/components 0.0.2

package/src/theme/components/MuiMenu.ts

@@ -0,0 +1,32 @@
+import { type Components, listClasses, paperClasses } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiMenu: Components<Theme>['MuiMenu'] = {
+	defaultProps: {
+		autoFocus: false,
+	},
+	styleOverrides: {
+		paper({ theme }: { theme: Theme }) {
+			return {
+				marginTop: theme.spacing(2),
+				[`&&.${paperClasses.root}`]: {
+					borderRadius: theme.shape.small,
+					boxShadow: theme.elevation[200],
+				},
+			};
+		},
+		list({ theme }: { theme: Theme }) {
+			return {
+				[`&&.${listClasses.root}`]: {
+					padding: 0,
+				},
+				[`&&.${listClasses.padding}`]: {
+					padding: theme.spacing(1, 0),
+				},
+			};
+		},
+	},
+};
+
+export default MuiMenu;

package/src/theme/components/MuiMenuItem.ts

@@ -0,0 +1,36 @@
+import { type Components, menuItemClasses } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiMenuItem: Components<Theme>['MuiMenuItem'] = {
+	styleOverrides: {
+		root({ theme }: { theme: Theme }) {
+			return {
+				padding: theme.spacing(2, 2, 2, 3),
+
+				'&:hover': {
+					backgroundColor: theme.palette.background.elementHover,
+				},
+
+				[`&.${menuItemClasses.selected}`]: {
+					background: `linear-gradient(90deg, ${theme.palette.primary.main} 0, ${theme.palette.primary.main} 4px, ${theme.palette.primary['100']} 4px)`,
+				},
+
+				[`&.${menuItemClasses.gutters}`]: {
+					minHeight: theme.spacing(8),
+					padding: theme.spacing(1, 3, 1, 3),
+				},
+
+				[theme.breakpoints.down('sm')]: {
+					padding: theme.spacing(3, 3, 4, 3),
+
+					[`&.${menuItemClasses.gutters}`]: {
+						padding: theme.spacing(3, 3, 4, 3),
+					},
+				},
+			};
+		},
+	},
+};
+
+export default MuiMenuItem;

package/src/theme/components/MuiOutlinedInput.ts

@@ -0,0 +1,75 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
+	defaultProps: {
+		notched: false,
+	},
+	styleOverrides: {
+		root({ theme }) {
+			return {
+				fontSize: theme.typography.pxToRem(14),
+				borderRadius: theme.shape.small,
+				color: theme.palette.grey[900],
+				background: theme.palette.background.element,
+				'&:hover': {
+					background: theme.palette.background.elementHover,
+					'&.Mui-disabled': {
+						background: theme.palette.background.element,
+					},
+				},
+				'&:hover .MuiOutlinedInput-notchedOutline': {
+					borderColor: theme.palette.grey[300],
+				},
+				'&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+					borderColor: theme.palette.background.element,
+				},
+				'&.Mui-error .MuiOutlinedInput-notchedOutline': {
+					borderColor: theme.palette.error.dark,
+				},
+				'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+					borderColor: theme.palette.primary[700],
+				},
+			};
+		},
+		input({ theme }) {
+			return {
+				height: 20,
+				padding: theme.spacing(2.5, 2),
+				borderRadius: theme.shape.small,
+				'&:disabled': {
+					background: theme.palette.background.element,
+				},
+				'&::placeholder': {
+					opacity: 1,
+					color: theme.palette.grey[600],
+				},
+			};
+		},
+		inputSizeSmall({ theme }) {
+			return {
+				paddingBlock: theme.spacing(1.5),
+				paddingInline: theme.spacing(2),
+			};
+		},
+		notchedOutline({ theme }) {
+			return {
+				borderWidth: 2,
+				borderColor: theme.palette.grey[300],
+			};
+		},
+		multiline() {
+			return {
+				padding: 0,
+			};
+		},
+		inputMultiline({ theme }) {
+			return {
+				padding: theme.spacing(2),
+			};
+		},
+	},
+};
+
+export default MuiOutlinedInput;

package/src/theme/components/MuiPaginationItem.ts

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

package/src/theme/components/MuiPaper.ts

@@ -0,0 +1,38 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+/**
+ * Подставить нужную тень
+ * @param {number|undefined} elevation - Значение пропса "elevation"
+ * @param {Theme} theme - Объект темы
+ * @return {string} Вернёт значение "box-shadow" из "theme"
+ * @example
+ * getShadow( 2, theme)
+ */
+const getShadow = (elevation: number | undefined, theme: Theme): string => {
+	if (elevation === 0) {
+		return 'none';
+	}
+
+	if (elevation === 1) {
+		return theme.elevation['200'];
+	}
+
+	return theme.elevation['300'];
+};
+
+export const MuiPaper: Components<Theme>['MuiPaper'] = {
+	styleOverrides: {
+		elevation({ theme, ownerState: { elevation } }) {
+			return {
+				boxShadow: getShadow(elevation, theme),
+			};
+		},
+		outlined({ theme }) {
+			return {
+				border: `1px solid ${theme.palette.grey[300]}`,
+			};
+		},
+	},
+};

package/src/theme/components/MuiStep.ts

@@ -0,0 +1,16 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiStep: Components<Theme>['MuiStep'] = {
+	styleOverrides: {
+		horizontal({ theme }) {
+			return {
+				'&:first-of-type': {
+					paddingLeft: 0,
+				},
+				padding: theme.spacing(0, 2.5),
+			};
+		},
+	},
+};

package/src/theme/components/MuiStepConnector.ts

@@ -0,0 +1,11 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiStepConnector: Components<Theme>['MuiStepConnector'] = {
+	styleOverrides: {
+		lineHorizontal({ theme }) {
+			return { borderTopWidth: 2, borderColor: theme.palette.grey[300] };
+		},
+	},
+};

package/src/theme/components/MuiStepLabel.ts

@@ -0,0 +1,30 @@
+import { type Components, stepLabelClasses } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiStepLabel: Components<Theme>['MuiStepLabel'] = {
+	styleOverrides: {
+		label({ theme }) {
+			const { active, completed, error } = stepLabelClasses;
+
+			//TODO В мажорном релизе заменить small на caption
+			return {
+				fontSize: theme.typography.small.fontSize,
+				lineHeight: theme.typography.small.lineHeight,
+				fontWeight: theme.typography.small.fontWeight,
+				color: theme.palette.grey[700],
+				[`&.${active}, &.${completed}, &.${error}`]: {
+					color: theme.palette.grey[900],
+					fontSize: theme.typography.small.fontSize,
+					lineHeight: theme.typography.small.lineHeight,
+					fontWeight: theme.typography.small.fontWeight,
+				},
+			};
+		},
+		iconContainer({ theme }) {
+			return {
+				paddingRight: theme.spacing(2.5),
+			};
+		},
+	},
+};

package/src/theme/components/MuiSwitch.ts

@@ -0,0 +1,153 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+const prepareColorToUrl = (color: string) => color.replace('#', '%23');
+
+const getCheckBackgroundImage = (color: string) => {
+	const preparedColor = prepareColorToUrl(color);
+
+	return `url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6L4.5 8.5L10 3.5" stroke="${preparedColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>')`;
+};
+
+const getCrossBackgroundImage = (color: string) => {
+	const preparedColor = prepareColorToUrl(color);
+
+	return `url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.00005 5.41087L3.79463 3.20545C3.71605 3.12955 3.6108 3.08755 3.50155 3.0885C3.3923 3.08945 3.28779 3.13327 3.21054 3.21053C3.13329 3.28778 3.08947 3.39228 3.08852 3.50153C3.08757 3.61078 3.12957 3.71603 3.20546 3.79462L5.41088 6.00003L3.20546 8.20545C3.12957 8.28403 3.08757 8.38929 3.08852 8.49853C3.08947 8.60778 3.13329 8.71229 3.21054 8.78954C3.28779 8.86679 3.3923 8.91062 3.50155 8.91156C3.6108 8.91251 3.71605 8.87052 3.79463 8.79462L6.00005 6.5892L8.20546 8.79462C8.28405 8.87052 8.3893 8.91251 8.49855 8.91156C8.6078 8.91062 8.7123 8.86679 8.78956 8.78954C8.86681 8.71229 8.91063 8.60778 8.91158 8.49853C8.91253 8.38929 8.87053 8.28403 8.79463 8.20545L6.58921 6.00003L8.79463 3.79462C8.83443 3.75618 8.86617 3.7102 8.88801 3.65937C8.90984 3.60853 8.92134 3.55386 8.92182 3.49853C8.9223 3.44321 8.91176 3.38834 8.89081 3.33714C8.86986 3.28593 8.83892 3.23941 8.7998 3.20029C8.76067 3.16116 8.71415 3.13023 8.66294 3.10927C8.61174 3.08832 8.55687 3.07778 8.50155 3.07826C8.44622 3.07874 8.39155 3.09024 8.34071 3.11207C8.28988 3.13391 8.2439 3.16565 8.20546 3.20545L6.00005 5.41087Z" fill="${preparedColor}" stroke="${preparedColor}" stroke-width="1.5" /></svg>')`;
+};
+
+export const MuiSwitch: Components<Theme>['MuiSwitch'] = {
+	styleOverrides: {
+		root({ theme }) {
+			return {
+				width: 'fit-content',
+				height: 'fit-content',
+				padding: theme.spacing(1),
+
+				// CHECKED
+				'& .Mui-checked.MuiSwitch-switchBase': {
+					padding: 0,
+					'& + .MuiSwitch-track': {
+						backgroundColor: theme.palette.primary.main[800],
+						opacity: 1,
+					},
+				},
+
+				// NOT CHECKED
+				'& :not(.Mui-checked).MuiSwitch-switchBase': {
+					padding: 0,
+					'& + .MuiSwitch-track': {
+						backgroundColor: theme.palette.grey[700],
+						opacity: 1,
+					},
+				},
+
+				// CHECKED HOVER
+				'& .Mui-checked:hover + .MuiSwitch-track': {
+					backgroundColor: theme.palette.primary[700],
+				},
+
+				// NOT CHECKED HOVER
+				'& :not(.Mui-checked):hover + .MuiSwitch-track': {
+					backgroundColor: theme.palette.grey[500],
+				},
+
+				// DISABLED TRACK
+				'& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
+					'& + .MuiSwitch-track': {
+						backgroundColor: theme.palette.grey[200],
+
+						'&::before': {
+							backgroundImage: getCheckBackgroundImage(theme.palette.grey[500]),
+						},
+						'&::after': {
+							backgroundImage: getCrossBackgroundImage(theme.palette.grey[500]),
+						},
+					},
+				},
+
+				// ACTIVE TRACK
+				'& :not(.Mui-disabled):active + .MuiSwitch-track': {
+					border: `2px solid ${theme.palette.primary[400]}`,
+				},
+			};
+		},
+
+		switchBase: {
+			padding: 0,
+
+			'&:hover, &.Mui-checked:hover': {
+				backgroundColor: 'transparent',
+			},
+		},
+
+		track({ theme }) {
+			return {
+				borderRadius: 10,
+				boxSizing: 'border-box',
+
+				'&::before, &::after': {
+					position: 'absolute',
+					top: '50%',
+					transform: 'translateY(-50%)',
+					content: '""',
+					backgroundSize: 'cover',
+				},
+				'&::before': {
+					left: theme.spacing(2),
+					backgroundImage: getCheckBackgroundImage(
+						theme.palette.background.default,
+					),
+				},
+				'&::after': {
+					right: theme.spacing(2),
+					backgroundImage: getCrossBackgroundImage(
+						theme.palette.background.default,
+					),
+				},
+			};
+		},
+
+		thumb({ theme }) {
+			return {
+				backgroundColor: theme.palette.background.default,
+				boxShadow: 'none',
+				margin: theme.spacing(1.5),
+			};
+		},
+
+		sizeSmall: {
+			'& .MuiSwitch-track': {
+				width: 32,
+				height: 16,
+
+				'&::before, &::after': {
+					width: 8,
+					height: 8,
+				},
+			},
+
+			'& .MuiSwitch-thumb': {
+				width: 12,
+				height: 12,
+			},
+		},
+
+		sizeMedium: {
+			'& .MuiSwitch-track': {
+				width: 40,
+				height: 20,
+
+				'&::before, &::after': {
+					width: 12,
+					height: 12,
+				},
+			},
+
+			'& .MuiSwitch-thumb': {
+				width: 16,
+				height: 16,
+			},
+		},
+	},
+};

package/src/theme/components/MuiTab.ts

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

package/src/theme/components/MuiTableCell.ts

@@ -0,0 +1,16 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiTableCell: Components<Theme>['MuiTableCell'] = {
+	styleOverrides: {
+		root({ theme }) {
+			return {
+				border: 'none',
+				padding: theme.spacing(1, 4),
+				// 44px - минимальная высота ячейки, установленная в дизайн-системе
+				height: 44,
+			};
+		},
+	},
+};

package/src/theme/components/MuiTableHead.ts

@@ -0,0 +1,15 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiTableHead: Components<Theme>['MuiTableHead'] = {
+	styleOverrides: {
+		root({ theme }) {
+			return {
+				th: {
+					borderBottom: `2px solid ${theme.palette.grey['300']}`,
+				},
+			};
+		},
+	},
+};

package/src/theme/components/MuiTableRow.ts

@@ -0,0 +1,19 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiTableRow: Components<Theme>['MuiTableRow'] = {
+	styleOverrides: {
+		root({ theme }) {
+			return {
+				'&.MuiTableRow-hover:hover': {
+					backgroundColor: theme.palette.background.elementHover,
+					cursor: 'pointer',
+				},
+				'&.Mui-selected': {
+					backgroundColor: theme.palette.primary['100'],
+				},
+			};
+		},
+	},
+};

package/src/theme/components/MuiTabs.ts

@@ -0,0 +1,19 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiTabs: Components<Theme>['MuiTabs'] = {
+	styleOverrides: {
+		root() {
+			return {
+				minHeight: 38,
+				height: 38,
+			};
+		},
+		indicator({ theme }) {
+			return {
+				borderRadius: theme.shape.small,
+			};
+		},
+	},
+};

package/src/theme/components/MuiTextField.ts

@@ -0,0 +1,28 @@
+import {
+	type Components,
+	inputBaseClasses,
+	outlinedInputClasses,
+} from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiTextField: Components<Theme>['MuiTextField'] = {
+	styleOverrides: {
+		root({ theme }) {
+			return {
+				[`& .${inputBaseClasses.adornedStart}`]: {
+					paddingLeft: theme.spacing(2),
+				},
+				[`& .${inputBaseClasses.adornedEnd}`]: {
+					paddingRight: theme.spacing(2),
+				},
+				[`& .${inputBaseClasses.inputAdornedStart}`]: {
+					paddingLeft: theme.spacing(1),
+				},
+				[`& .${outlinedInputClasses.notchedOutline}`]: {
+					top: -4.5,
+				},
+			};
+		},
+	},
+};

package/src/theme/components/MuiToggleButton.ts

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

package/src/theme/components/MuiToggleButtonGroup.ts

@@ -0,0 +1,10 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+export const MuiToggleButtonGroup: Components<Theme>['MuiToggleButtonGroup'] = {
+	defaultProps: {
+		size: 'small',
+		color: 'primary',
+	},
+};

package/src/theme/components/MuiTypography.ts

@@ -0,0 +1,41 @@
+import type { Components } from '@mui/material';
+
+export type FontsUrls = {
+	bold: {
+		woff: string;
+		woff2: string;
+	};
+	light: {
+		woff: string;
+		woff2: string;
+	};
+	medium: {
+		woff: string;
+		woff2: string;
+	};
+	regular: {
+		woff: string;
+		woff2: string;
+	};
+};
+
+export const MuiTypography: Components['MuiTypography'] = {
+	variants: [
+		{
+			props: { variant: 'button' },
+			style: {
+				textTransform: 'capitalize',
+			},
+		},
+	],
+	defaultProps: {
+		// TODO: необходимо кастомизировать типы Components['MuiTypography']
+		variantMapping: {
+			link: 'a',
+			code: 'code',
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any,
+	},
+};
+
+export default MuiTypography;