@max-ts/components 0.0.2

package/src/components/Tag/enums.ts

@@ -0,0 +1,20 @@
+export enum TagColors {
+	DEFAULT = 'default',
+	PRIMARY = 'primary',
+	ERROR = 'error',
+	GREY = 'grey',
+	SUCCESS = 'success',
+	WARNING = 'warning',
+}
+
+export enum TagVariants {
+	CONTAINED = 'contained',
+	LIGHT = 'light',
+	TEXT = 'text',
+}
+
+export enum TagStates {
+	DEFAULT = 'default',
+	HOVER = 'hover',
+	ACTIVE = 'active',
+}

package/src/components/Tag/index.ts

@@ -0,0 +1,3 @@
+export * from './Tag';
+
+export * from './types';

package/src/components/Tag/styles.ts

@@ -0,0 +1,332 @@
+import { Chip, type ChipProps, styled } from '@mui/material';
+
+import type { BadgeColor } from '../Badge';
+
+import type React from 'react';
+import type { Theme } from '../../theme';
+import { Container } from '../Container';
+import { TagColors, TagStates, TagVariants } from './enums';
+import type { TagColor, TagSize, TagState, TagVariant } from './types';
+
+type StyledTagProps = {
+	customColor?: TagColor;
+	customVariant?: TagVariant;
+	rounded?: boolean;
+	customSize: TagSize;
+};
+
+type StyledTagThemeProps = StyledTagProps & { theme: Theme } & Pick<
+		ChipProps,
+		'onDelete' | 'disabled'
+	>;
+
+const HEIGHTS: Record<TagSize, string> = {
+	small: '20px',
+	medium: '24px',
+	large: '32px',
+};
+
+export const getBadgeColor = (args: {
+	tagColor?: TagColor;
+	variant?: TagVariant;
+	theme: Theme;
+}) => {
+	const { tagColor, variant } = args;
+
+	if (variant === TagVariants.CONTAINED) {
+		return 'white';
+	}
+
+	const colors: Record<TagColor, BadgeColor> = {
+		[TagColors.PRIMARY]: 'primary',
+		[TagColors.ERROR]: 'error',
+		[TagColors.GREY]: 'grey',
+		[TagColors.SUCCESS]: 'success',
+		[TagColors.WARNING]: 'warning',
+		[TagColors.DEFAULT]: 'grey',
+	};
+
+	return colors[tagColor || 'default'];
+};
+
+const getShape = ({ theme, rounded }: StyledTagThemeProps): string => {
+	if (rounded) {
+		return '100px';
+	}
+
+	return theme.shape.small;
+};
+
+const getDeleteIconBorderRadius = ({
+	theme,
+	rounded,
+}: StyledTagThemeProps): string => {
+	if (rounded) {
+		return '100px';
+	}
+
+	return `0  ${theme.shape.small}  ${theme.shape.small} 0`;
+};
+
+const getBgColor = ({
+	theme,
+	customColor,
+	customVariant,
+	disabled,
+}: StyledTagThemeProps): string => {
+	if (disabled) {
+		return theme.palette.grey[100];
+	}
+
+	if (customVariant === 'text') {
+		return 'transparent';
+	}
+
+	const backgroundColorVariants = {
+		contained: {
+			primary: theme.palette.primary.main,
+			error: theme.palette.red[800],
+			success: theme.palette.green[800],
+			warning: theme.palette.yellow[800],
+			grey: theme.palette.grey[300],
+			default: theme.palette.background.element,
+		},
+		light: {
+			primary: theme.palette.primary[100],
+			error: theme.palette.red[100],
+			success: theme.palette.green[100],
+			warning: theme.palette.yellow[100],
+			grey: theme.palette.grey[100],
+			default: theme.palette.background.element,
+		},
+	};
+
+	if (customVariant && customColor) {
+		return backgroundColorVariants[customVariant][customColor];
+	}
+
+	if (!customVariant && customColor) {
+		return backgroundColorVariants.contained[customColor];
+	}
+
+	return theme.palette.grey[300];
+};
+
+const getColor = ({
+	theme,
+	customColor,
+	customVariant,
+	disabled,
+}: StyledTagThemeProps): string => {
+	if (disabled) {
+		return theme.palette.text.disabled;
+	}
+
+	if (customVariant === 'text') {
+		return theme.palette.grey[900];
+	}
+
+	const textColorVariants = {
+		contained: {
+			primary: theme.palette.primary.contrastText,
+			error: theme.palette.error.contrastText,
+			success: theme.palette.warning.contrastText,
+			warning: theme.palette.success.contrastText,
+			default: theme.palette.text.primary,
+			grey: theme.palette.grey[900],
+		},
+		light: {
+			primary: theme.palette.primary.main,
+			error: theme.palette.red[800],
+			success: theme.palette.green[800],
+			warning: theme.palette.yellow[800],
+			default: theme.palette.text.primary,
+			grey: theme.palette.grey[900],
+		},
+	};
+
+	if (!customVariant && !customColor) {
+		return theme.palette.grey[900];
+	}
+
+	if (!customVariant && customColor !== 'grey') {
+		return theme.palette.common.white;
+	}
+
+	if (!customColor) {
+		return textColorVariants.contained.default;
+	}
+
+	if (customVariant && customColor) {
+		return textColorVariants[customVariant][customColor];
+	}
+
+	return theme.palette.text.primary;
+};
+
+const getTagLabelPadding = ({
+	theme,
+	rounded,
+	customSize,
+}: StyledTagThemeProps): string => {
+	if (rounded) {
+		return theme.spacing(0, 2);
+	}
+
+	switch (customSize) {
+		case 'small':
+			return theme.spacing(0, 1);
+		case 'medium':
+		case 'large':
+			return theme.spacing(0, 2);
+	}
+};
+
+const getDeleteIconBgColor = ({
+	theme,
+	iconState,
+	customVariant,
+	customColor,
+}: StyledTagThemeProps & { iconState: TagState }): string => {
+	const hoverColors = {
+		contained: {
+			primary: theme.palette.primary[600],
+			error: theme.palette.red[600],
+			success: theme.palette.green[600],
+			warning: theme.palette.yellow[600],
+			grey: theme.palette.grey[100],
+			default: theme.palette.grey[300],
+		},
+		light: {
+			primary: theme.palette.primary[300],
+			error: theme.palette.red[300],
+			success: theme.palette.green[300],
+			warning: theme.palette.yellow[300],
+			grey: theme.palette.grey[300],
+			default: theme.palette.grey[300],
+		},
+	};
+
+	if (iconState !== 'default') {
+		if (
+			(customVariant === 'contained' || customVariant === 'light') &&
+			customColor
+		) {
+			return hoverColors[customVariant][customColor || 'default'];
+		}
+
+		if (customVariant === 'text') {
+			return hoverColors.light.grey;
+		}
+	}
+
+	return 'transparent';
+};
+
+export const getDeleteIconColor = ({
+	customVariant,
+	customColor,
+	theme,
+}: StyledTagThemeProps) => {
+	if (
+		customVariant === 'contained' &&
+		customColor !== 'grey' &&
+		customColor !== 'default'
+	) {
+		return theme.palette.common.white;
+	}
+
+	return theme.palette.grey[900];
+};
+
+export const StyledTag = styled(Chip, {
+	shouldForwardProp: (prop) =>
+		prop !== 'customColor' &&
+		prop !== 'customVariant' &&
+		prop !== 'rounded' &&
+		prop !== 'customSize',
+})<StyledTagProps>`
+  user-select: none;
+
+  height: ${({ customSize }) => HEIGHTS[customSize]};
+
+  font-size: 14px;
+
+  background-color: ${getBgColor};
+  border-radius: ${getShape};
+
+  &:hover {
+    color: ${getColor};
+
+    background-color: ${getBgColor};
+  }
+
+  &:active {
+    color: ${getColor};
+
+    background-color: ${getBgColor};
+  }
+
+  .MuiChip-label {
+    padding: ${getTagLabelPadding};
+
+    color: ${getColor};
+
+    &:hover {
+      color: ${getColor};
+    }
+
+    &:active {
+      color: ${getColor};
+    }
+  }
+
+  .MuiChip-deleteIcon {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    color: ${getDeleteIconColor};
+
+    background: ${(props) =>
+			getDeleteIconBgColor({ ...props, iconState: TagStates.DEFAULT })};
+    border-radius: ${getDeleteIconBorderRadius};
+
+    &:hover {
+      color: ${getDeleteIconColor};
+
+      background: ${(props) =>
+				getDeleteIconBgColor({ ...props, iconState: TagStates.HOVER })};
+    }
+
+    &:active {
+      color: ${getDeleteIconColor};
+
+      background: ${(props) =>
+				getDeleteIconBgColor({ ...props, iconState: TagStates.ACTIVE })};
+    }
+  }
+
+  &.Mui-disabled {
+    opacity: 1;
+  }
+
+  .MuiChip-avatar {
+    width: 16px;
+    height: 16px;
+    margin: 2px;
+
+    color: ${getColor};
+  }
+
+  .MuiChip-icon {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+export const LabelContainer = styled(Container)`
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+`;

package/src/components/Tag/types.ts

@@ -0,0 +1,9 @@
+import type { TagColors, TagStates, TagVariants } from './enums';
+
+export type TagColor = `${TagColors}`;
+
+export type TagVariant = `${TagVariants}`;
+
+export type TagSize = 'small' | 'medium' | 'large';
+
+export type TagState = `${TagStates}`;

package/src/components/TagBadge/TagBadge.stories.tsx

@@ -0,0 +1,235 @@
+import { Stack } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tag } from '../Tag';
+
+import { TagBadge } from '.';
+
+/**
+ * ### [Figma](https://www.figma.com/design/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?node-id=284-7165)
+ * ### [Guide]()
+ */
+
+const meta: Meta<typeof TagBadge> = {
+	title: 'Components/Data Display/TagBadge',
+	component: TagBadge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TagBadge>;
+
+export const Interaction: Story = {
+	args: {
+		color: 'primary',
+		badgeContent: '12',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const baseProps = {
+	label: 'Тэг',
+};
+
+export const Example = () => (
+	<Tag
+		{...baseProps}
+		endAddon={(props) => <TagBadge {...props} badgeContent='12' />}
+	/>
+);
+
+export const Default = () => <TagBadge color='primary' badgeContent='12' />;
+
+export const Color = () => (
+	<Stack direction='column' gap={2}>
+		<Stack direction='row' gap={2}>
+			<Tag
+				{...baseProps}
+				label='primary'
+				color='primary'
+				variant='light'
+				endAddon={(props) => (
+					<TagBadge {...props} color='primary' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				{...baseProps}
+				label='error'
+				color='error'
+				variant='light'
+				endAddon={(props) => (
+					<TagBadge {...props} color='error' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				{...baseProps}
+				label='success'
+				color='success'
+				variant='light'
+				endAddon={(props) => (
+					<TagBadge {...props} color='success' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				{...baseProps}
+				label='warning'
+				color='warning'
+				variant='light'
+				endAddon={(props) => (
+					<TagBadge {...props} color='warning' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				{...baseProps}
+				label='grey'
+				color='grey'
+				variant='light'
+				endAddon={(props) => (
+					<TagBadge {...props} color='grey' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				{...baseProps}
+				label='white'
+				color='default'
+				variant='light'
+				endAddon={(props) => (
+					<TagBadge {...props} color='white' badgeContent='12' />
+				)}
+			/>
+		</Stack>
+	</Stack>
+);
+
+export const VariantColor = () => (
+	<Stack direction='column' gap={2}>
+		<Stack direction='row' justifyContent={'center'} gap={2}>
+			<Tag
+				label='contained'
+				variant='contained'
+				endAddon={(props) => (
+					<TagBadge {...props} color='primary' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				label='contained'
+				variant='contained'
+				endAddon={(props) => (
+					<TagBadge {...props} color='error' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				label='contained'
+				variant='contained'
+				endAddon={(props) => (
+					<TagBadge {...props} color='success' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				label='contained'
+				variant='contained'
+				endAddon={(props) => (
+					<TagBadge {...props} color='warning' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				label='contained'
+				variant='contained'
+				endAddon={(props) => (
+					<TagBadge {...props} color='grey' badgeContent='12' />
+				)}
+			/>
+			<Tag
+				label='contained'
+				variant='contained'
+				endAddon={(props) => (
+					<TagBadge {...props} color='white' badgeContent='12' />
+				)}
+			/>
+		</Stack>
+		<Stack direction='row' justifyContent={'center'} gap={2}>
+			<Tag
+				label='light'
+				variant='light'
+				color='default'
+				endAddon={(props) => (
+					<TagBadge
+						{...props}
+						variantColor='light'
+						color='primary'
+						badgeContent='12'
+					/>
+				)}
+			/>
+			<Tag
+				label='light'
+				variant='light'
+				color='default'
+				endAddon={(props) => (
+					<TagBadge
+						{...props}
+						variantColor='light'
+						color='error'
+						badgeContent='12'
+					/>
+				)}
+			/>
+			<Tag
+				label='light'
+				variant='light'
+				color='default'
+				endAddon={(props) => (
+					<TagBadge
+						{...props}
+						variantColor='light'
+						color='success'
+						badgeContent='12'
+					/>
+				)}
+			/>
+			<Tag
+				label='light'
+				variant='light'
+				color='default'
+				endAddon={(props) => (
+					<TagBadge
+						{...props}
+						variantColor='light'
+						color='warning'
+						badgeContent='12'
+					/>
+				)}
+			/>
+			<Tag
+				label='light'
+				variant='light'
+				color='default'
+				endAddon={(props) => (
+					<TagBadge
+						{...props}
+						variantColor='light'
+						color='grey'
+						badgeContent='12'
+					/>
+				)}
+			/>
+			<Tag
+				label='light'
+				variant='light'
+				color='default'
+				endAddon={(props) => (
+					<TagBadge
+						{...props}
+						variantColor='light'
+						color='white'
+						badgeContent='12'
+					/>
+				)}
+			/>
+		</Stack>
+	</Stack>
+);

package/src/components/TagBadge/TagBadge.tsx

@@ -0,0 +1,47 @@
+import type { BadgeColor, BadgeProps } from '../Badge';
+
+import { StyledBadge } from './styles';
+import { getCheckableTagBadgeBgColor } from './utils';
+
+export type TagBadgeProps = Omit<BadgeProps, 'color' | 'withBorder'> & {
+	/**
+	 * CheckableTag в состоянии checked
+	 */
+	checked?: boolean;
+	/**
+	 * CheckableTag в состоянии disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * Кастомный цвет для состояния checked
+	 */
+	checkedColor?: BadgeColor;
+	/**
+	 * Цвет Badge
+	 */
+	color?: BadgeColor;
+};
+
+/**
+ * Badge для использования внутри компонента Tag
+ */
+export const TagBadge = ({
+	color = 'primary',
+	checked,
+	disabled,
+	checkedColor,
+	...props
+}: TagBadgeProps) => {
+	return (
+		<StyledBadge
+			withBorder={false}
+			color={getCheckableTagBadgeBgColor({
+				disabled,
+				checked,
+				checkedColor,
+				color,
+			})}
+			{...props}
+		/>
+	);
+};

package/src/components/TagBadge/index.ts

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

package/src/components/TagBadge/styles.ts

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material';
+import { Badge } from '../Badge';
+
+export const StyledBadge = styled(Badge)`
+  vertical-align: text-top;
+
+  & span.MuiBadge-badge {
+    position: static;
+    transform: none;
+
+    box-sizing: content-box;
+    height: 16px;
+  }
+`;

package/src/components/TagBadge/utils/getCheckableTagBadgeBgColor/getCheckableTagBadgeBgColor.ts

@@ -0,0 +1,31 @@
+import type { BadgeColor } from '../../../Badge';
+
+/**
+ * Утилита для получения цвета TagBadge,
+ * в зависимости от его состояния disabled и checked, и полученного цвета color из props
+ * @param {Object} disabled - Состояние disabled тега.
+ * @param {Object} checked - Состояние checked тега.
+ * @param {Object} checkedColor - Кастомный цвет для состояния checked.
+ * @param {Object} color - Цвет Badge, полученный из props.
+ */
+export const getCheckableTagBadgeBgColor = ({
+	disabled,
+	checked,
+	checkedColor,
+	color,
+}: {
+	checked?: boolean;
+	disabled?: boolean;
+	checkedColor?: BadgeColor;
+	color: BadgeColor;
+}): BadgeColor => {
+	if (disabled) {
+		return 'grey';
+	}
+
+	if (checked) {
+		return checkedColor || 'white';
+	}
+
+	return color;
+};

package/src/components/TagBadge/utils/getCheckableTagBadgeBgColor/index.ts

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

package/src/components/TagBadge/utils/index.ts

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