@max-ts/components 0.0.2

package/src/components/Description/styles.ts

@@ -0,0 +1,27 @@
+import { styled } from '@mui/material';
+
+export const Wrapper = styled('div', {
+	shouldForwardProp: (prop) =>
+		!['$justifyContent', 'as', '$direction'].includes(prop.toString()),
+})<{
+	$justifyContent?: 'space-between' | 'start';
+	$direction?: 'default' | 'column' | 'row';
+}>`
+  overflow: hidden;
+  display: flex;
+  flex-direction: ${({ $direction }) =>
+		$direction === 'default' ? 'row' : $direction};
+  align-items: baseline;
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+
+  margin: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-direction: ${({ $direction }) =>
+			$direction === 'default' ? 'column' : $direction};
+
+    .MuiTypography-root {
+      font-size: ${({ theme }) => theme.typography.fontSize};
+    }
+  }
+`;

package/src/components/Description/useLogic/index.ts

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

package/src/components/Description/useLogic/useLogic.ts

@@ -0,0 +1,21 @@
+import { useViewportType } from '../../../hooks';
+import type { DescriptionProps } from '../Description';
+import { DEFAULT_SEPARATOR } from '../constants';
+
+type UseLogicParams = DescriptionProps;
+
+export const useLogic = ({
+	direction = 'default',
+	separator = DEFAULT_SEPARATOR,
+}: UseLogicParams) => {
+	const { isMobile } = useViewportType();
+
+	const hasSeparator =
+		direction === 'column' || (isMobile && direction === 'default');
+
+	const descriptionContextProviderProps = {
+		separator: hasSeparator ? '' : separator,
+	};
+
+	return { descriptionContextProviderProps, direction };
+};

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -0,0 +1,475 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+
+import { styled } from '@mui/material';
+import { DescriptionList } from './DescriptionList';
+import type { DescriptionListItem } from './types';
+
+const meta: Meta<typeof DescriptionList> = {
+	title: 'Components/Data Display/DescriptionList',
+	component: DescriptionList,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DescriptionList>;
+
+export const Interaction: Story = {
+	args: {
+		items: [
+			{
+				name: 'ИНН',
+				value: '295995231495',
+				options: { nameMaxWidth: '200px', color: 'primary', canCopy: true },
+			},
+			{
+				name: 'Описание',
+				value: 'ИНН физического лица является последовательностью из 12 цифр',
+				options: { nameMaxWidth: '300px', color: 'error' },
+			},
+		],
+		justifyContent: 'space-between',
+		leader: true,
+		separator: ':',
+		title: 'Заголовок блока',
+	},
+	parameters: {
+		options: { showPanel: true },
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const Wrapper = styled('div')`
+  width: 400px;
+`;
+
+const GuidWrapper = styled('div')`
+  width: 200px;
+`;
+
+export const Example = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ИНН',
+			value: '295995231495',
+			options: { canCopy: true },
+		},
+		{
+			name: 'Описание ИНН физического лица',
+			value: 'ИНН физического лица является последовательностью из 12 цифр',
+		},
+		{
+			name: 'СНИЛС',
+			value: '',
+		},
+	];
+
+	return (
+		<DescriptionList
+			items={items}
+			variant='contained'
+			title='Данные физ. лица'
+		/>
+	);
+};
+
+/**
+ * ```canCopy``` можно задать для каждого элемента списка отдельно
+ */
+export const CanCopy = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ИНН',
+			value: '295995231495',
+			options: { canCopy: true },
+		},
+		{
+			name: 'СНИЛС',
+			value: '23339576886',
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+/**
+ * По дефолту copyPosition="right", можно задать "left"
+ */
+export const CopyPosition = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ИНН',
+			value: '295995231495',
+			options: { canCopy: true, copyPosition: 'left' },
+		},
+		{
+			name: 'СНИЛС',
+			value: '23339576886',
+			options: { canCopy: true },
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+export const CopyText = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ИНН',
+			value: '295995231495',
+			options: { canCopy: true },
+		},
+		{
+			name: 'guid',
+			value: '83273239-19d9-47db-ae3b-d4c6f24bbbee',
+			options: {
+				canCopy: true,
+				variant: 'guid',
+				copyText: '83273239-19d9-47db-ae3b-d4c6f24bbbee',
+			},
+		},
+	];
+
+	return (
+		<GuidWrapper>
+			<DescriptionList items={items} />
+		</GuidWrapper>
+	);
+};
+
+/**
+ * `variant` определяет тип отображение списка.
+ * По умолчанию отображается без рамки.
+ */
+export const Contained = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ИНН',
+			value: '295995231495',
+			options: { canCopy: true },
+		},
+		{
+			name: 'Описание ИНН физического лица',
+			value: 'ИНН физического лица является последовательностью из 12 цифр',
+		},
+		{
+			name: 'СНИЛС',
+			value: '',
+		},
+	];
+
+	return <DescriptionList variant='contained' items={items} />;
+};
+
+/**
+ * По дефолту ширина Name не ограничена, можно задать ```nameMaxWidth``` для фиксированной длины
+ */
+export const NameMaxWidth = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Полное именование',
+			value:
+				'_тест_ОАО "Тестовое коммерческое профессиональное учреждение\n' +
+				'          Специальное управление службы №007 Министерство Внутренней Разработки\n' +
+				'          по делам тестирования, исправления, чрезвычайным ситуациям и\n' +
+				'          ликвидации последствии действия багов"',
+			options: { nameMaxWidth: '100px' },
+		},
+		{
+			name: 'Описания ИНН юридического лица',
+			value: 'ИНН юридического лица — последовательность из 10 арабских цифр',
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+/**
+ * Prop ```justifyContent``` по дефолту start, можно задать space-between для всего списка
+ */
+export const JustifyContent = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ФИО',
+			value: 'Швецова М. Д.',
+		},
+		{
+			name: 'ФИО',
+			value: 'Швецова Мария Дмитриевна',
+		},
+	];
+
+	return <DescriptionList items={items} justifyContent='space-between' />;
+};
+
+export const JustifyContentCanCopy = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ФИО',
+			value: 'Швецова М. Д.',
+			options: { canCopy: true },
+		},
+		{
+			name: 'Описание',
+			value: 'ИНН юридического лица — последовательность из 10 арабских цифр',
+			options: { canCopy: true, copyPosition: 'left' },
+		},
+	];
+
+	return <DescriptionList items={items} justifyContent='space-between' />;
+};
+
+/**
+ * Prop ```leader``` добавляет dashed строку
+ */
+export const Leader = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ФИО',
+			value: 'Швецова М. Д.',
+		},
+		{
+			name: 'ФИО',
+			value: 'Швецова Мария Дмитриевна',
+		},
+	];
+
+	return <DescriptionList items={items} leader />;
+};
+
+/**
+ * Prop direction определяет как располагаются Name и Value.
+ * Так же изменяет расположение для мобильных устройств.
+ * `default` значение указывает на позиционирование row для больших экранов и column для мобильных устройств
+ */
+export const Direction = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ФИО',
+			value: 'Швецова М. Д.',
+		},
+		{
+			name: 'ФИО',
+			value: 'Швецова Мария Дмитриевна',
+		},
+	];
+
+	return <DescriptionList items={items} direction='column' />;
+};
+
+export const Separator = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ФИО',
+			value: 'Швецова М. Д.',
+		},
+		{
+			name: 'ФИО',
+			value: 'Швецова Мария Дмитриевна',
+		},
+	];
+
+	return <DescriptionList items={items} separator='-' />;
+};
+
+export const CustomRenderOption = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: {
+				renderValue: (value) => <Button variant='text'>{value}</Button>,
+			},
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: {
+				renderValue: (value) => (
+					<Typography color='primary'>{value}</Typography>
+				),
+			},
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+export const VariantTag = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'grey', variant: 'tag' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'warning', variant: 'tag' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'error', variant: 'tag' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'success', variant: 'tag' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'primary', variant: 'tag' },
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+export const VariantGuid = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'guid',
+			value: 'c9b9b0ed-99b0-4d6a-9bf3-d9205398ca95',
+			options: { variant: 'guid' },
+		},
+		{
+			name: 'guid',
+			value: 'fd81ae06-cbd4-48a5-8852-547119bb7aa6',
+			options: {
+				variant: 'guid',
+				canCopy: true,
+				copyText: 'fd81ae06-cbd4-48a5-8852-547119bb7aa6',
+			},
+		},
+	];
+
+	return (
+		<GuidWrapper>
+			<DescriptionList items={items} />
+		</GuidWrapper>
+	);
+};
+
+export const LongDescriptionValueLeader = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Полное наименование',
+			value: 'ПРЕДСТАВИТЕЛЬСТВО АО"КАЛУГА АСТРАЛ" (Г.БАРНАУЛ)#1 ',
+		},
+		{
+			name: 'Краткое наименование',
+			value: 'АО"КАЛУГА АСТРАЛ"',
+		},
+	];
+
+	return (
+		<Wrapper>
+			<DescriptionList items={items} leader />
+		</Wrapper>
+	);
+};
+
+export const LongNameValue = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Описания ИНН юридического лица',
+			value: 'ИНН юридического лица — последовательность из 10 арабских цифр',
+		},
+		{
+			name: 'Описания ИНН юридического лица',
+			value: 'ИНН юридического лица — последовательность из 10 арабских цифр"',
+			options: { nameMaxWidth: '100px' },
+		},
+	];
+
+	return (
+		<Wrapper>
+			<DescriptionList items={items} />
+		</Wrapper>
+	);
+};
+
+export const Colors = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'grey' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'warning' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'error' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'success' },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'primary' },
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+export const ColorsCanCopy = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'grey', canCopy: true },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'warning', canCopy: true },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'error', canCopy: true },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'success', canCopy: true },
+		},
+		{
+			name: 'Название показателя',
+			value: 'Значение показателя',
+			options: { color: 'primary', canCopy: true },
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};
+
+export const EmptyValue = () => {
+	const items: DescriptionListItem[] = [
+		{
+			name: 'ФИО',
+			value: 'Швецова М. Д',
+		},
+		{
+			name: 'СНИЛС',
+			value: '',
+		},
+	];
+
+	return <DescriptionList items={items} />;
+};

package/src/components/DescriptionList/DescriptionList.tsx

@@ -0,0 +1,108 @@
+import { type ReactNode, useCallback } from 'react';
+
+import { Description } from '../Description';
+import { GuidTypography } from '../GuidTypography';
+import { Tag, type TagColor } from '../Tag';
+import { Typography } from '../Typography';
+
+import {
+	ListWrapper,
+	StyledDescriptionName,
+	StyledDescriptionValue,
+	Wrapper,
+} from './styles';
+import type { DescriptionListProps, DescriptionOptions } from './types';
+import { getTooltipProps } from './utils';
+
+export const DescriptionList = ({
+	items,
+	variant: listVariant = 'default',
+	title,
+	direction,
+	...props
+}: DescriptionListProps) => {
+	const render = useCallback(
+		(
+			value: ReactNode,
+			optionProps: Omit<DescriptionOptions, 'nameMaxWidth'>,
+		) => {
+			const { renderValue, color, canCopy, copyPosition, variant, copyText } =
+				optionProps;
+
+			if (renderValue) {
+				return renderValue(value, optionProps);
+			}
+
+			if (variant === 'tag') {
+				return (
+					<Description.Value>
+						<Tag label={value} color={color as TagColor} variant='light' />
+					</Description.Value>
+				);
+			}
+
+			if (variant === 'guid') {
+				const tooltipProps = getTooltipProps(canCopy);
+
+				return (
+					<StyledDescriptionValue
+						canCopy={canCopy}
+						$isCopy={canCopy}
+						color={color}
+						copyPosition={copyPosition}
+						copyText={copyText}
+					>
+						<GuidTypography tooltipProps={tooltipProps}>{value}</GuidTypography>
+					</StyledDescriptionValue>
+				);
+			}
+
+			return (
+				<Description.Value
+					canCopy={canCopy}
+					color={color}
+					copyPosition={copyPosition}
+				>
+					{value}
+				</Description.Value>
+			);
+		},
+		[],
+	);
+
+	const renderTitle = () => {
+		if (typeof title === 'string') {
+			return <Typography variant='h6'>{title}</Typography>;
+		}
+
+		return title;
+	};
+
+	return (
+		<Wrapper $variant={listVariant}>
+			{title && renderTitle()}
+			<ListWrapper $direction={direction}>
+				{items.map(({ name, value, options }) => {
+					const { nameMaxWidth, ...restOptions } = options || {};
+
+					return (
+						<Description
+							key={`${name}:${value}`}
+							direction={direction}
+							{...props}
+							component='div'
+						>
+							<StyledDescriptionName
+								$nameMaxWidth={nameMaxWidth}
+								$direction={direction}
+							>
+								{name}
+							</StyledDescriptionName>
+							{render(value, restOptions)}
+						</Description>
+					);
+				})}
+			</ListWrapper>
+		</Wrapper>
+	);
+};

package/src/components/DescriptionList/index.ts

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

package/src/components/DescriptionList/styles.ts

@@ -0,0 +1,67 @@
+import { styled } from '@mui/material';
+import { Description } from '../Description';
+
+type Direction = 'default' | 'row' | 'column';
+
+type DescriptionNameProps = {
+	$nameMaxWidth?: string;
+	$direction?: Direction;
+};
+
+type DescriptionListVariant = 'contained' | 'default';
+
+export const StyledDescriptionName = styled(Description.Name, {
+	shouldForwardProp: (prop) =>
+		!['$nameMaxWidth, $direction'].includes(prop.toString()),
+})<DescriptionNameProps>`
+  max-width: ${({ $nameMaxWidth }) => ($nameMaxWidth ? $nameMaxWidth : 'none')};
+  margin-bottom: ${({ theme, $direction }) =>
+		Object.is($direction, 'column') ? theme.spacing(1) : 0};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: ${({ theme, $direction }) =>
+			Object.is($direction, 'row') ? 0 : theme.spacing(1)};
+  }
+`;
+
+export const Wrapper = styled('article', {
+	shouldForwardProp: (prop) => !['$variant'].includes(prop.toString()),
+})<{ $variant: DescriptionListVariant }>`
+  display: grid;
+  row-gap: ${({ theme }) => theme.spacing(3)};
+
+  padding: ${({ $variant, theme }) =>
+		$variant === 'contained' ? theme.spacing(4) : 0};
+
+  background-color: ${({ $variant, theme }) =>
+		$variant === 'contained'
+			? theme.palette.background.default
+			: 'transparent'};
+  border: ${({ $variant, theme }) =>
+		$variant === 'contained'
+			? `1px solid ${theme.palette.grey[300]}`
+			: 'unset'};
+  border-radius: ${({ theme }) => theme.shape.small};
+`;
+
+export const ListWrapper = styled('dl', {
+	shouldForwardProp: (prop) => !['$direction'].includes(prop.toString()),
+})<{ $direction?: Direction }>`
+  display: grid;
+  row-gap: ${({ theme, $direction }) =>
+		Object.is($direction, 'column') ? theme.spacing(3) : theme.spacing(1)};
+
+  margin: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    row-gap: ${({ theme }) => theme.spacing(3)};
+  }
+`;
+
+export const StyledDescriptionValue = styled(Description.Value, {
+	shouldForwardProp: (prop) => !['$isCopy'].includes(prop.toString()),
+})<{ $isCopy?: boolean }>`
+  display: ${({ $isCopy }) => $isCopy && 'flex'};
+
+  width: ${({ $isCopy }) => $isCopy && 'calc(100% - 20px)'};
+`;