@max-ts/components 0.1.0 → 0.2.0

package/src/theme/components/MuiMenu.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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