@max-ts/components 0.0.2

package/src/theme/components/components.ts

@@ -0,0 +1,155 @@
+import type { Components } from '@mui/material';
+
+import type { Theme } from '../types';
+
+import { MuiAlert } from './MuiAlert';
+import { MuiAutocomplete } from './MuiAutocomplete';
+import { MuiButton } from './MuiButton';
+import { MuiButtonBase } from './MuiButtonBase';
+import { MuiCircularProgress } from './MuiCircularProgress';
+import { MuiDialog } from './MuiDialog';
+import { MuiDialogActions } from './MuiDialogActions';
+import { MuiDialogContent } from './MuiDialogContent';
+import { MuiDialogTitle } from './MuiDialogTitle';
+import { MuiDrawer } from './MuiDrawer';
+import { MuiFormHelperText } from './MuiFormHelperText';
+import { MuiFormLabel } from './MuiFormLabel';
+import { MuiInputLabel } from './MuiInputLabel';
+import { MuiLinearProgress } from './MuiLinearProgress';
+import { MuiListItemButton } from './MuiListItemButton';
+import { MuiListItemText } from './MuiListItemText';
+import { MuiMenu } from './MuiMenu';
+import { MuiMenuItem } from './MuiMenuItem';
+import { MuiOutlinedInput } from './MuiOutlinedInput';
+import { MuiPaginationItem } from './MuiPaginationItem';
+import { MuiPaper } from './MuiPaper';
+import { MuiStep } from './MuiStep';
+import { MuiStepConnector } from './MuiStepConnector';
+import { MuiStepLabel } from './MuiStepLabel';
+import { MuiSwitch } from './MuiSwitch';
+import { MuiTab } from './MuiTab';
+import { MuiTableCell } from './MuiTableCell';
+import { MuiTableHead } from './MuiTableHead';
+import { MuiTableRow } from './MuiTableRow';
+import { MuiTabs } from './MuiTabs';
+import { MuiTextField } from './MuiTextField';
+import { MuiToggleButton } from './MuiToggleButton';
+import { MuiToggleButtonGroup } from './MuiToggleButtonGroup';
+import { MuiTypography } from './MuiTypography';
+
+export type FontsUrls = {
+	bold: {
+		woff: string;
+		woff2: string;
+	};
+	light: {
+		woff: string;
+		woff2: string;
+	};
+	medium: {
+		woff: string;
+		woff2: string;
+	};
+	regular: {
+		woff: string;
+		woff2: string;
+	};
+};
+
+const getFontFaces = (fontUrls: FontsUrls): string => `
+  @font-face {
+    font-family: 'Ubuntu';
+    font-style: 'normal';
+    font-weight: 300;
+    font-display: swap;
+    src: url(${fontUrls.light.woff2}) format('woff2'), url(${fontUrls.light.woff}) format('woff');
+  }
+  @font-face { 
+    font-family: 'Ubuntu';
+    font-style: 'normal';
+    font-weight: 400;
+    font-display: swap;
+    src: url(${fontUrls.regular.woff2}) format('woff2'), url(${fontUrls.regular.woff}) format('woff');
+  }
+  @font-face {
+    font-family: 'Ubuntu';
+    font-style: 'normal';
+    font-weight: 500;
+    font-display: swap;
+    src: url(${fontUrls.medium.woff2}) format('woff2'), url(${fontUrls.medium.woff}) format('woff');
+  }
+  @font-face {
+    font-family: 'Ubuntu';
+    font-style: 'normal';
+    font-weight: 700;
+    font-display: swap;
+    src: url(${fontUrls.bold.woff2}) format('woff2'), url(${fontUrls.bold.woff}) format('woff');
+  }
+`;
+
+const getMuiCssBaseline = (
+	fontUrls: FontsUrls,
+): Components['MuiCssBaseline'] => ({
+	styleOverrides: getFontFaces(fontUrls),
+});
+
+const getMuiScopedCssBaseline = (
+	fontUrls: FontsUrls,
+): Components['MuiScopedCssBaseline'] => ({
+	styleOverrides: {
+		root: getFontFaces(fontUrls),
+	},
+});
+
+const MuiCheckbox: Components['MuiCheckbox'] = {
+	defaultProps: {
+		disableRipple: true,
+	},
+};
+
+const MuiRadio: Components['MuiRadio'] = {
+	defaultProps: {
+		disableRipple: true,
+	},
+};
+
+export const getComponents = (fontUrls: FontsUrls): Components<Theme> => ({
+	MuiCssBaseline: getMuiCssBaseline(fontUrls),
+	MuiScopedCssBaseline: getMuiScopedCssBaseline(fontUrls),
+	MuiAlert,
+	MuiButton,
+	MuiButtonBase,
+	MuiTypography,
+	MuiInputLabel,
+	MuiOutlinedInput,
+	MuiFormLabel,
+	MuiFormHelperText,
+	MuiAutocomplete,
+	MuiCheckbox,
+	MuiMenu,
+	MuiMenuItem,
+	MuiRadio,
+	MuiDialog,
+	MuiDialogTitle,
+	MuiDialogContent,
+	MuiDialogActions,
+	MuiDrawer,
+	MuiTableCell,
+	MuiTableHead,
+	MuiTableRow,
+	MuiPaginationItem,
+	MuiPaper,
+	MuiCircularProgress,
+	MuiListItemButton,
+	MuiListItemText,
+	MuiLinearProgress,
+	MuiTab,
+	MuiTabs,
+	MuiStepLabel,
+	MuiStep,
+	MuiStepConnector,
+	MuiToggleButtonGroup,
+	MuiToggleButton,
+	MuiTextField,
+	MuiSwitch,
+});

package/src/theme/components/index.ts

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

package/src/theme/constants.ts

@@ -0,0 +1 @@
+export const SPACING = 4;

package/src/theme/elevation.ts

@@ -0,0 +1,15 @@
+export type Elevation = {
+	100: string;
+	200: string;
+	300: string;
+	400: string;
+	500: string;
+};
+
+export const elevation: Elevation = {
+	100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;',
+	200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733;',
+	300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726;',
+	400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726;',
+	500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726;',
+};

package/src/theme/hooks/index.ts

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

package/src/theme/hooks/useTheme/index.ts

@@ -0,0 +1,7 @@
+import { useTheme as useEmotionTheme } from '@emotion/react';
+
+import type { Theme } from '../../types';
+
+// any необходим для коннекта темы
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useTheme = (): Theme => useEmotionTheme() as any;

package/src/theme/index.ts

@@ -0,0 +1,13 @@
+export * from './types';
+
+export * from './baseTheme';
+
+export * from './palette';
+
+export * from './constants';
+
+export * from './elevation';
+
+export * from './shape';
+
+export * from './hooks';

package/src/theme/palette/componentsColors/componentsColors.ts

@@ -0,0 +1,9 @@
+import { type LinkColors, linkColors } from './linkColors';
+
+export type ComponentsColors = {
+	link: LinkColors;
+};
+
+export const componentsColors: ComponentsColors = {
+	link: linkColors,
+};

package/src/theme/palette/componentsColors/index.ts

@@ -0,0 +1 @@
+export { type ComponentsColors, componentsColors } from './componentsColors';

package/src/theme/palette/componentsColors/linkColors/index.ts

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

package/src/theme/palette/componentsColors/linkColors/linkColors.ts

@@ -0,0 +1,13 @@
+export type LinkColors = {
+	main: string;
+	hover: string;
+	visited: string;
+	active: string;
+};
+
+export const linkColors: LinkColors = {
+	main: '#1874FF',
+	hover: '#268FF9',
+	visited: '#762376',
+	active: '#072D57',
+};

package/src/theme/palette/index.ts

@@ -0,0 +1,5 @@
+export * from './types';
+
+export * from './componentsColors';
+
+export * from './palette';

package/src/theme/palette/palette.ts

@@ -0,0 +1,125 @@
+import { componentsColors } from './componentsColors';
+import type { PaletteOptions } from './types';
+
+export const getPalette = (): PaletteOptions => {
+	const colors = {
+		primary: {
+			900: '#0F52B8',
+			800: '#2165CC',
+			700: '#1874FF',
+			600: '#2684FF',
+			500: '#4C9AFF',
+			400: '#70AEFF',
+			300: '#94C2FF',
+			200: '#C5DCFF',
+			100: '#E1EDFF',
+		},
+		secondary: {
+			800: '#55B8F0',
+		},
+	};
+
+	return {
+		red: {
+			900: '#E64343',
+			800: '#F24646',
+			700: '#F35959',
+			600: '#F67E7E',
+			500: '#F79090',
+			400: '#F8A3A3',
+			300: '#FAB5B5',
+			200: '#FCDADA',
+			100: '#FEEDED',
+		},
+		green: {
+			900: '#008055',
+			800: '#00875A',
+			700: '#19936A',
+			600: '#4DAB8C',
+			500: '#66B79C',
+			400: '#80C3AC',
+			300: '#99CFBD',
+			200: '#CCE7DE',
+			100: '#E6F3EF',
+		},
+		yellow: {
+			900: '#ED8000',
+			800: '#F98700',
+			700: '#FA961F',
+			600: '#FBAB4D',
+			500: '#FBB766',
+			400: '#FDCF99',
+			300: '#FDDBB2',
+			200: '#FBE6CC',
+			100: '#FEF3E6',
+		},
+		grey: {
+			900: '#072D57',
+			800: '#1D3F66',
+			700: '#557192',
+			600: '#778DA8',
+			500: '#99A9BA',
+			400: '#B7C2CE',
+			300: '#DDE2E8',
+			200: '#EBEEF1',
+			100: '#F0F4F7',
+		},
+		primary: {
+			main: colors.primary[800],
+			dark: colors.primary[900],
+			contrastText: '#FFF',
+			...colors.primary,
+		},
+		secondary: {
+			main: colors.secondary[800],
+			dark: colors.primary[900],
+			contrastText: '#FFF',
+			...colors.secondary,
+		},
+		background: {
+			default: '#FFF',
+			paper: '#FFF',
+			element: '#FAFBFC',
+			elementHover: '#EEF1F4',
+			modalShadow: '#142A438A',
+		},
+		get text() {
+			return {
+				primary: this.grey[900],
+				secondary: this.grey[700],
+				disabled: this.grey[500],
+			};
+		},
+		get info() {
+			return this.primary;
+		},
+		get warning() {
+			return {
+				...this.yellow,
+				light: this.yellow[100],
+				main: this.yellow[600],
+				dark: this.yellow[800],
+				contrastText: '#FFF',
+			};
+		},
+		get success() {
+			return {
+				...this.green,
+				light: this.green[100],
+				main: this.green[600],
+				dark: this.green[800],
+				contrastText: '#FFF',
+			};
+		},
+		get error() {
+			return {
+				...this.red,
+				light: this.red[100],
+				main: this.red[600],
+				dark: this.red[800],
+				contrastText: '#FFF',
+			};
+		},
+		components: componentsColors,
+	};
+};

package/src/theme/palette/types.ts

@@ -0,0 +1,55 @@
+import type {
+	Palette as MuiPalette,
+	PaletteOptions as MuiPaletteOptions,
+	PaletteColor,
+	PaletteColorOptions,
+	TypeBackground,
+} from '@mui/material';
+import type { ComponentsColors } from './componentsColors';
+
+export type Color = {
+	900: string;
+	800: string;
+	700: string;
+	600: string;
+	500: string;
+	400: string;
+	300: string;
+	200: string;
+	100: string;
+};
+
+export type PrimaryColorOptions = PaletteColorOptions & Color;
+
+export type Background = TypeBackground & {
+	element: string;
+	elementHover: string;
+	modalShadow: string;
+};
+
+export type PaletteOptions = MuiPaletteOptions & {
+	red: Color;
+	green: Color;
+	yellow: Color;
+	grey: Color;
+	error: Color;
+	warning: Color;
+	success: Color;
+	primary: PrimaryColorOptions;
+	background: Background;
+	components: ComponentsColors;
+};
+
+export type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
+	red: Color;
+	green: Color;
+	yellow: Color;
+	grey: Color;
+	error: Color;
+	warning: Color;
+	success: Color;
+	primary: PaletteColor & Color;
+	secondary: PaletteColor & Color;
+	background: Background;
+	components: ComponentsColors;
+};

package/src/theme/shape.ts

@@ -0,0 +1,11 @@
+export type Shape = {
+	small: string;
+	medium: string;
+	large: string;
+};
+
+export const shape: Shape = {
+	small: '3px',
+	medium: '6px',
+	large: '9px',
+};

package/src/theme/types.ts

@@ -0,0 +1,30 @@
+import type {
+	Breakpoints,
+	BreakpointsOptions,
+	Theme as MuiTheme,
+	SimplePaletteColorOptions,
+} from '@mui/material';
+import type { Elevation } from './elevation';
+import type { Palette } from './palette';
+import type { Shape } from './shape';
+import type { TypographyThemeOptions } from './typography';
+
+declare module '@mui/material/styles' {
+	interface Theme {
+		palette: Palette;
+		breakpoints: Breakpoints;
+		shape: Shape;
+		typography: TypographyThemeOptions;
+		elevation: Elevation;
+	}
+	// allow configuration using `createTheme`
+	interface ThemeOptions {
+		breakpoints?: BreakpointsOptions;
+		shape: Shape;
+		elevation: Elevation;
+	}
+}
+
+export type { SimplePaletteColorOptions };
+
+export type Theme = MuiTheme;

package/src/theme/typography.ts

@@ -0,0 +1,191 @@
+import type { Typography } from '@mui/material/styles/createTypography';
+import type { CSSProperties } from 'react';
+
+import type { Theme } from './types';
+
+const HTML_FONT_SIZE = 14;
+
+type CustomTypographyVariantStyle = {
+	fontSize: CSSProperties['fontSize'];
+	fontWeight: CSSProperties['fontWeight'];
+	lineHeight: CSSProperties['lineHeight'];
+};
+
+export type TypographyThemeOptions = Omit<Typography, 'overline'> & {
+	/**
+	 * @deprecated
+	 * Данный вариант больше не поддерживается и будет удален в следующем мажорном релизе. Используйте `pointer` или другой более подходящий вариант.
+	 * Причина отказа от поддержки: данный вариант отсутствует в обновленной дизайн-системе
+	 */
+	h7: CustomTypographyVariantStyle;
+
+	/**
+	 * @deprecated
+	 * Данный вариант больше не поддерживается и будет удален в следующем мажорном релизе. Используйте `pointer` или другой более подходящий вариант.
+	 * Причина отказа от поддержки: данный вариант отсутствует в обновленной дизайн-системе
+	 */
+	h8: CustomTypographyVariantStyle;
+
+	/**
+	 * @deprecated
+	 * Данный вариант больше не поддерживается и будет удален в следующем мажорном релизе. Используйте `body1` или другой подходящий вариант.
+	 * Причина отказа от поддержки: данный вариант отсутствует в обновленной дизайн-системе
+	 */
+	ui: CustomTypographyVariantStyle;
+
+	/**
+	 * @deprecated
+	 * Данный вариант больше не поддерживается и будет удален в следующем мажорном релизе. Используйте `caption` или другой подходящий вариант.
+	 * Причина отказа от поддержки: данный вариант отсутствует в обновленной дизайн-системе
+	 */
+	small: CustomTypographyVariantStyle;
+
+	/**
+	 * @deprecated
+	 * Данный вариант больше не поддерживается и будет удален в следующем мажорном релизе. Используйте `body1` или  другой подходящий вариант.
+	 * Причина отказа от поддержки: данный вариант отсутствует в обновленной дизайн-системе
+	 */
+	body2: CustomTypographyVariantStyle;
+
+	link: CustomTypographyVariantStyle;
+	pointer: CustomTypographyVariantStyle;
+};
+
+// Т.к. нет доступа к теме, написал функцию для конвертации px в rem
+export const pxToRem = (
+	fontSize: number,
+	htmlFontSize: number = HTML_FONT_SIZE,
+): string => {
+	return `${fontSize / htmlFontSize}rem`;
+};
+
+export const baseTypography: Partial<TypographyThemeOptions> = {
+	fontSize: 14,
+	htmlFontSize: 14,
+	fontWeightLight: 300,
+	fontWeightRegular: 400,
+	fontWeightMedium: 500,
+	fontWeightBold: 700,
+	fontFamily: ['Ubuntu', 'sans-serif'].join(','),
+};
+
+export const getTypography = (theme: Theme) => ({
+	h1: {
+		fontSize: '36px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '40px',
+	},
+	h2: {
+		fontSize: '28px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '32px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '32px',
+			lineHeight: '40px',
+		},
+	},
+	h3: {
+		fontSize: '24px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '28px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '28px',
+			lineHeight: '36px',
+		},
+	},
+	h4: {
+		fontSize: '20px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '24px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '24px',
+			lineHeight: '28px',
+		},
+	},
+	h5: {
+		fontSize: '16px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '20px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '18px',
+			lineHeight: '20px',
+		},
+	},
+	h6: {
+		fontSize: '14px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '20px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '16px',
+			lineHeight: '20px',
+		},
+	},
+	subtitle1: {
+		fontSize: '16px',
+		fontWeight: theme.typography.fontWeightRegular,
+		lineHeight: '20px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '18px',
+		},
+	},
+	subtitle2: {
+		fontSize: '14px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '20px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '16px',
+		},
+	},
+	body1: {
+		fontSize: '14px',
+		fontWeight: theme.typography.fontWeightRegular,
+		lineHeight: '20px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '16px',
+		},
+	},
+	button: {
+		fontSize: '14px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '24px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '16px',
+		},
+	},
+	link: {
+		fontSize: '14px',
+		fontWeight: theme.typography.fontWeightRegular,
+		lineHeight: '20px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '16px',
+		},
+	},
+	caption: {
+		fontSize: '12px',
+		fontWeight: theme.typography.fontWeightRegular,
+		lineHeight: '16px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '14px',
+		},
+	},
+	pointer: {
+		fontSize: '12px',
+		fontWeight: theme.typography.fontWeightMedium,
+		lineHeight: '16px',
+
+		[theme.breakpoints.down('sm')]: {
+			fontSize: '14px',
+		},
+	},
+});

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "./dist"
+	},
+	"include": ["src"],
+	"exclude": [
+		"node_modules",
+		"lib",
+		"./*.ts",
+		"./**/*.test.tsx",
+		"./**/*.test.ts",
+		"./**/*.stories.tsx"
+	]
+}