@max-ts/components 0.0.2

package/src/components/Description/Description.stories.tsx

@@ -0,0 +1,327 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { styled } from '@mui/material';
+import { Container } from '../Container';
+import { Description } from './Description';
+
+const meta: Meta<typeof Description> = {
+	title: 'Components/Data Display/Description',
+	component: Description,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Description>;
+
+export const Interaction: Story = {
+	args: {
+		children: (
+			<>
+				<Description.Name>Название поля</Description.Name>
+				<Description.Value>Значение поля</Description.Value>
+			</>
+		),
+	},
+	parameters: {
+		options: { showPanel: true },
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const GridWrapper = styled(Container)`
+  justify-content: center;
+`;
+
+const StyledDescriptionName = styled(Description.Name)`
+  width: 100px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: unset;
+  }
+`;
+
+const StyledDescriptionValue = styled(Description.Value)`
+  width: 300px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: unset;
+  }
+`;
+
+export const Example = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description>
+				<Description.Name>ИНН</Description.Name>
+				<Description.Value>295995231495</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Описание</Description.Name>
+				<StyledDescriptionValue>
+					ИНН физического лица является последовательностью из 12 цифр
+				</StyledDescriptionValue>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const CanCopy = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description>
+				<Description.Name>КПП</Description.Name>
+				<Description.Value canCopy>293144576</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+/**
+ * По дефолту copyPosition="right", можно задать "left"
+ */
+export const CopyPosition = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description>
+				<Description.Name>КПП</Description.Name>
+				<Description.Value canCopy>293144576</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Снилс</Description.Name>
+				<Description.Value canCopy copyPosition='left'>
+					23339576886
+				</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+/**
+ * Prop ```leader``` добавляет dashed строку
+ */
+export const Leader = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description leader>
+				<Description.Name>ФИО</Description.Name>
+				<Description.Value>Швецова М. Д.</Description.Value>
+			</Description>
+			<Description leader>
+				<Description.Name>ФИО</Description.Name>
+				<Description.Value>Швецова Мария Дмитриевна</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+/**
+ * Prop ```direction``` определяет как располагаются Name и Value.
+ * Так же изменяет расположение для мобильных устройств.
+ * ```default``` значение указывает на позиционирование row для больших экранов и column для мобильных устройств
+ *
+ */
+export const Direction = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description direction='row'>
+				<Description.Name>ИНН</Description.Name>
+				<Description.Value>295995231495</Description.Value>
+			</Description>
+			<Description direction='column'>
+				<Description.Name>Описание</Description.Name>
+				<Description.Value>
+					ИНН физического лица является последовательностью из 12 цифр
+				</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const JustifyContent = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description justifyContent='space-between'>
+				<Description.Name>ФИО</Description.Name>
+				<Description.Value>Швецова М. Д.</Description.Value>
+			</Description>
+			<Description justifyContent='space-between'>
+				<Description.Name>ФИО</Description.Name>
+				<Description.Value>Швецова Мария Дмитриевна</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const JustifyContentCanCopy = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description justifyContent='space-between'>
+				<Description.Name>ИНН</Description.Name>
+				<Description.Value canCopy>295995231495</Description.Value>
+			</Description>
+			<Description justifyContent='space-between'>
+				<Description.Name>Описание</Description.Name>
+				<Description.Value canCopy copyPosition='left'>
+					ИНН физического лица является последовательностью из 12 цифр
+				</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const LongLabelValue = () => {
+	return (
+		<GridWrapper gap={4}>
+			<Description>
+				<Description.Name>Описания ИНН юридического лица</Description.Name>
+				<Description.Value>
+					ИНН юридического лица — последовательность из 10 арабских цифр
+				</Description.Value>
+			</Description>
+			<Description>
+				<StyledDescriptionName>
+					Описания ИНН юридического лица
+				</StyledDescriptionName>
+				<StyledDescriptionValue>
+					ИНН юридического лица — последовательность из 10 арабских цифр
+				</StyledDescriptionValue>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const LongDescriptionValueLeader = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description leader>
+				<Description.Name>Описания ИНН юридического лица</Description.Name>
+				<StyledDescriptionValue>
+					ИНН юридического лица — последовательность из 10 арабских цифр
+				</StyledDescriptionValue>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+/**
+ * По дефолту component="dl", можно задать "div", при построении списков и наличии внешнего контейнера из dl
+ */
+export const DescriptionList = () => {
+	return (
+		<GridWrapper gap={3}>
+			<dl>
+				<Description component='div'>
+					<Description.Name>ИНН</Description.Name>
+					<Description.Value>295995231495</Description.Value>
+				</Description>
+				<Description component='div'>
+					<Description.Name>КПП</Description.Name>
+					<Description.Value>293144576</Description.Value>
+				</Description>
+			</dl>
+		</GridWrapper>
+	);
+};
+
+/**
+ * В случаях при длинном значении Value и коротком значении Name,
+ * следует ограничить ширину Name через css и переносить его на несколько строк
+ */
+export const ShortLabelWithLongValue = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description leader>
+				<StyledDescriptionName>Полное именование</StyledDescriptionName>
+				<Description.Value>
+					_тест_ОАО "Тестовое коммерческое профессиональное учреждение
+					Специальное управление службы №007 Министерство Внутренней Разработки
+					по делам тестирования, исправления, чрезвычайным ситуациям и
+					ликвидации последствии действия багов"
+				</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const Colors = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value color='grey'>Значение показателя</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value color='warning'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value color='error'>Значение показателя</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value color='success'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value color='primary'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const ColorsCanCopy = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value canCopy color='grey'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value canCopy color='warning'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value canCopy color='error'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value canCopy color='success'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value canCopy color='primary'>
+					Значение показателя
+				</Description.Value>
+			</Description>
+		</GridWrapper>
+	);
+};
+
+export const EmptyValue = () => {
+	return (
+		<GridWrapper gap={3}>
+			<Description>
+				<Description.Name>Название показателя</Description.Name>
+				<Description.Value />
+			</Description>
+		</GridWrapper>
+	);
+};

package/src/components/Description/Description.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+
+import { DescriptionContextProvider } from './DescriptionContext';
+import { Name } from './Name';
+import { Value } from './Value';
+import { DESCRIPTION_ROOT_CLASSNAME } from './constants';
+import { Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type DescriptionProps = {
+	/**
+	 * Элементы Description.Name и Description.Value
+	 */
+	children: ReactNode;
+
+	/**
+	 * Позиционирует элементы либо по разным краям, либо по левому краю
+	 */
+	justifyContent?: 'space-between' | 'start';
+
+	/**
+	 * Добавляет dashed разделитель, заполняющего свободное пространство между Name Value
+	 */
+	leader?: boolean;
+
+	/**
+	 * Определяет разделитель между Name Value
+	 * @default ':'
+	 */
+	separator?: string;
+
+	/**
+	 * Определяет тип корневого HTML-элемента
+	 */
+	component?: 'div' | 'dl';
+
+	/**
+	 * Определяет перенос строк
+	 * @default 'default'
+	 */
+	direction?: 'default' | 'column' | 'row';
+};
+
+export const Description = (props: DescriptionProps) => {
+	const { descriptionContextProviderProps, direction } = useLogic(props);
+
+	const {
+		justifyContent = 'start',
+		component = 'dl',
+		children,
+		leader = false,
+	} = props;
+
+	return (
+		<DescriptionContextProvider
+			leader={leader}
+			direction={direction}
+			{...descriptionContextProviderProps}
+		>
+			<Wrapper
+				$justifyContent={justifyContent}
+				className={DESCRIPTION_ROOT_CLASSNAME}
+				$direction={direction}
+				as={component}
+			>
+				{children}
+			</Wrapper>
+		</DescriptionContextProvider>
+	);
+};
+
+Description.Name = Name;
+Description.Value = Value;

package/src/components/Description/DescriptionContext/DescriptionContext.tsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+import { DEFAULT_SEPARATOR } from '../constants';
+
+export type DescriptionContextProps = {
+	leader: boolean;
+	separator: string;
+	direction: string;
+};
+
+export const DescriptionContext = createContext<DescriptionContextProps>({
+	leader: false,
+	separator: DEFAULT_SEPARATOR,
+	direction: 'default',
+});

package/src/components/Description/DescriptionContext/DescriptionContextProvider/DescriptionContextProvider.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+import {
+	DescriptionContext,
+	type DescriptionContextProps,
+} from '../DescriptionContext';
+
+type Props = DescriptionContextProps & {
+	children: ReactNode;
+};
+
+export const DescriptionContextProvider = ({
+	children,
+	leader,
+	separator,
+	direction,
+}: Props) => (
+	<DescriptionContext.Provider value={{ leader, separator, direction }}>
+		{children}
+	</DescriptionContext.Provider>
+);

package/src/components/Description/DescriptionContext/DescriptionContextProvider/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from './DescriptionContext';
+
+export * from './DescriptionContextProvider';

package/src/components/Description/Name/Name.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import { Typography, type TypographyProps } from '../../Typography';
+import { DescriptionContext } from '../DescriptionContext';
+
+import { DashedSeparator, Wrapper } from './styles';
+
+export type NameProps = Pick<TypographyProps, 'color' | 'variant' | 'children'>;
+
+export const Name = ({
+	children,
+	color = 'textSecondary',
+	...props
+}: NameProps) => {
+	const { leader, separator } = useContext(DescriptionContext);
+
+	return (
+		<>
+			<Wrapper $leader={leader}>
+				<Typography {...props} color={color}>
+					{children}
+					{!leader && separator}
+				</Typography>
+			</Wrapper>
+			{leader && <DashedSeparator />}
+		</>
+	);
+};

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

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

package/src/components/Description/Name/styles.ts

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material';
+
+type WrapperProps = {
+	$leader?: boolean;
+};
+
+export const Wrapper = styled('dt', {
+	shouldForwardProp: (prop) => prop !== '$leader',
+})<WrapperProps>`
+  flex-shrink: 0;
+
+  max-width: ${({ $leader }) =>
+		$leader ? 'calc(100% - 36px)' : 'calc(100% - 12px)'};
+  margin-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const DashedSeparator = styled('div')`
+  flex: 1;
+
+  min-width: 12px;
+  height: 4px;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+
+  border-bottom: 1px dashed ${({ theme }) => theme.palette.grey[400]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/src/components/Description/Value/Value.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+
+import type { TypographyProps } from '../../Typography';
+
+import { StyledCopyTypography, StyledTypography, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+
+export type ValueProps = Pick<
+	TypographyProps,
+	'color' | 'variant' | 'children'
+> & {
+	/**
+	 * @example <Description.Item stub="нет значения">value</Description.Item>
+	 * Заглушка, отображающаяся, если нет значения
+	 */
+	stub?: ReactNode;
+
+	/**
+	 * Добавляет возможность копирования
+	 */
+	canCopy?: boolean;
+
+	/**
+	 * Позиционирует иконку "копировать" (слева / справа от текста)
+	 */
+	copyPosition?: 'left' | 'right';
+	/**
+	 * Текст, который будет скопирован. Перекрывает обычное копирование если children является строкой
+	 */
+	copyText?: string;
+};
+
+export const Value = (props: ValueProps) => {
+	const { valueToRender, isDefaultValueRender, leader, direction } =
+		useLogic(props);
+
+	const {
+		copyPosition = 'right',
+		copyText,
+		canCopy,
+		children,
+		stub,
+		...restProps
+	} = props;
+
+	if (isDefaultValueRender) {
+		return (
+			<StyledTypography
+				$direction={direction}
+				component='dd'
+				$leader={leader}
+				{...restProps}
+			>
+				{valueToRender}
+			</StyledTypography>
+		);
+	}
+
+	return (
+		<Wrapper>
+			<StyledCopyTypography
+				copyPosition={copyPosition}
+				copyText={copyText}
+				$direction={direction}
+				$leader={leader}
+				component='div'
+				{...restProps}
+			>
+				{valueToRender}
+			</StyledCopyTypography>
+		</Wrapper>
+	);
+};

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

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

package/src/components/Description/Value/styles.ts

@@ -0,0 +1,62 @@
+import { styled } from '@mui/material';
+import { CopyTypography } from '../../CopyTypography';
+import { Typography } from '../../Typography';
+
+type StyledTypographyProps = {
+	$leader?: boolean;
+	$canCopy?: boolean;
+	$direction: string;
+};
+
+type StyledCopyTypographyProps = {
+	$leader?: boolean;
+	$direction: string;
+};
+
+export const StyledTypography = styled(Typography, {
+	shouldForwardProp: (prop) =>
+		!['$canCopy', '$leader', '$direction'].includes(prop.toString()),
+})<StyledTypographyProps>`
+  cursor: ${({ $canCopy }) => ($canCopy ? 'pointer' : 'default')};
+
+  overflow: hidden;
+
+  hyphens: auto;
+  text-align: ${({ $leader }) => ($leader ? 'right' : 'left')};
+  overflow-wrap: break-word;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    text-align: ${({ $direction }) =>
+			$direction !== 'row' ? 'left' : 'right'};
+  }
+
+  &:hover {
+    text-decoration: ${({ $canCopy }) => ($canCopy ? 'underline' : 'none')};
+  }
+`;
+
+export const StyledCopyTypography = styled(CopyTypography, {
+	shouldForwardProp: (prop) =>
+		!['$leader', '$direction'].includes(prop.toString()),
+})<StyledCopyTypographyProps>`
+  display: unset;
+
+  hyphens: auto;
+  text-align: ${({ $leader }) => ($leader ? 'right' : 'left')};
+  overflow-wrap: break-word;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    text-align: ${({ $direction }) =>
+			$direction !== 'row' ? 'left' : 'right'};
+  }
+
+  & > svg {
+    margin-bottom: ${({ theme }) => theme.spacing(-1)};
+  }
+`;
+
+export const Wrapper = styled('dd')`
+  overflow: hidden;
+
+  margin: 0;
+`;

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

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

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

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+
+import { ConfigContext } from '../../../ConfigProvider';
+import { DescriptionContext } from '../../DescriptionContext';
+import type { ValueProps } from '../Value';
+
+type UseLogicParams = ValueProps;
+
+export const useLogic = ({ canCopy, children, stub }: UseLogicParams) => {
+	const { emptySymbol } = useContext(ConfigContext);
+	const { leader, direction } = useContext(DescriptionContext);
+
+	const valueToRender = children || stub || emptySymbol;
+
+	const isDefaultValueRender = !canCopy || !Boolean(children);
+
+	return { valueToRender, isDefaultValueRender, leader, direction };
+};

package/src/components/Description/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_SEPARATOR = ':';
+
+export const DEFAULT_SYMBOL = '—';
+
+export const DESCRIPTION_ROOT_CLASSNAME = 'astral-ui_descriptionRoot';

package/src/components/Description/index.ts

@@ -0,0 +1,3 @@
+export * from './Description';
+
+export * from './constants';