@max-ts/components 0.1.0 → 0.2.0

package/src/components/Filename/Filename.stories.tsx

@@ -1,244 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { type JSX, useEffect, useState } from 'react';
-
-import { ActionCell, type Actions } from '../ActionCell';
-import {
-	DataGrid,
-	type DataGridColumns,
-	type DataGridRowOptions,
-} from '../DataGrid';
-
-import { styled } from '@mui/material';
-import { Eye, Send } from 'lucide-react';
-import React from 'react';
-import { Filename } from './Filename';
-
-/**
- * Filename применяется для отображения названий файлов, с автоматической проверкой текстового переполнения
- *
- * ### [Figma]()
- * ### [Guide]()
- */
-const meta: Meta<typeof Filename> = {
-	title: 'Components/Filename',
-	component: Filename,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Filename>;
-
-export const Interaction: Story = {
-	args: {
-		children:
-			'Версия 1.0Приложение No 10к Договору подряда No КрФ/15331/24 от\n' +
-			'25.04.2024.pdf',
-	},
-	parameters: {
-		docs: {
-			disable: true,
-		},
-	},
-};
-
-const Wrapper = styled('div')`
-  max-width: 400px;
-  min-width: 200px;
-  margin: 0 auto 10px;
-`;
-
-type DataType = {
-	id: string;
-	documentName: JSX.Element;
-	direction: string;
-	createDate: string;
-};
-
-type SortField = 'documentName' | 'direction' | 'createDate';
-
-const FAKE_DATA_OBJECT_TEMPLATE = {
-	id: '1',
-	documentName: <Filename>OS_FINAL_BDW_FW24_MeA_21022024.pdf</Filename>,
-	direction: 'ФНС',
-	createDate: '2022-03-24T17:50:40.206Z',
-};
-
-const FAKE_ACTIONS: Actions<DataType> = {
-	main: [
-		{
-			icon: <Eye />,
-			name: 'Просмотреть',
-			onClick: () => console.log('main'),
-		},
-		{
-			icon: <Send />,
-			nested: true,
-			name: 'Отправить',
-			actions: [
-				{ name: 'Туда', onClick: () => console.log('nested 1') },
-				{ name: 'Сюда', onClick: () => console.log('nested 2') },
-			],
-		},
-	],
-	secondary: [
-		{ name: 'Редактировать', onClick: () => console.log('secondary 1') },
-		{ name: 'Удалить', onClick: () => console.log('secondary 2') },
-	],
-};
-
-const generateRandomDate = () => {
-	const start = new Date(2022, 0, 1);
-	const end = new Date();
-	const randomTimestamp =
-		start.getTime() + Math.random() * (end.getTime() - start.getTime());
-	const randomDate = new Date(randomTimestamp);
-
-	return randomDate.toISOString();
-};
-
-const generateData = (
-	dataObjTemplate: DataType,
-	options?: DataGridRowOptions<DataType>,
-): DataType[] => {
-	const DIRECTIONS = ['ФНС', 'ФСС', 'ПФР', 'РПН'];
-	const DATA_ARRAY_LENGTH = 16;
-	const DOCUMENT_NAMES = [
-		<Filename key='1'>api-единая.-спецификация-api.docs</Filename>,
-		<Filename key='2'>OS_FINAL_BDW_FW24_MeA_21022024.pdf</Filename>,
-		<Filename key='3'>OS_FINAL_BDW_FW24_MeA.pdf</Filename>,
-		<Filename key='4'>OS_FINAL.pdf</Filename>,
-	];
-
-	return Array.from({ length: DATA_ARRAY_LENGTH })
-		.fill(dataObjTemplate)
-		.map((_, i) => ({
-			id: String(i + 1),
-			documentName:
-				DOCUMENT_NAMES[Math.floor(Math.random() * DOCUMENT_NAMES.length)],
-			direction: DIRECTIONS[Math.floor(Math.random() * DIRECTIONS.length)],
-			createDate: generateRandomDate(),
-			options: Math.random() < 0.5 ? options : undefined,
-		}));
-};
-
-export const Example = () => {
-	const fakeData = generateData(FAKE_DATA_OBJECT_TEMPLATE);
-
-	const columns: DataGridColumns<DataType>[] = [
-		{
-			field: 'documentName',
-			label: 'Наименование документа',
-			sortable: true,
-		},
-		{
-			field: 'direction',
-			label: 'Направление',
-			sortable: true,
-		},
-		{
-			field: 'createDate',
-			label: 'Дата создания',
-			sortable: true,
-			format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
-		},
-		{
-			label: 'Действия',
-			sortable: false,
-			align: 'center',
-			width: '120px',
-			renderCell: (row) => {
-				return <ActionCell actions={FAKE_ACTIONS} row={row} />;
-			},
-		},
-	];
-
-	const [isLoading, setLoading] = useState(true);
-	const [slicedData, setSlicedData] = useState<DataType[]>([]);
-	const [selected, setSelected] = useState<DataType[]>([]);
-	const handleSelect = (rows: DataType[]) => setSelected(rows);
-
-	useEffect(() => {
-		setTimeout(() => {
-			setSlicedData(fakeData.slice(0, 10));
-			setLoading(false);
-		}, 1500);
-	}, []);
-
-	const handleRowClick = (row: DataType) => console.log('row clicked', row);
-
-	return (
-		<DataGrid<DataType, SortField>
-			keyId='id'
-			rows={slicedData}
-			columns={columns}
-			isLoading={isLoading}
-			selectedRows={selected}
-			onRowClick={handleRowClick}
-			onSelectRow={handleSelect}
-			onRetry={() => {}}
-		/>
-	);
-};
-
-export const LongFileName = () => {
-	return (
-		<Wrapper>
-			<Filename>
-				Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
-				25.04.2024.pdf
-			</Filename>
-		</Wrapper>
-	);
-};
-
-export const ShortFileName = () => {
-	return (
-		<Wrapper>
-			<Filename>Приложение №10.pdf</Filename>
-		</Wrapper>
-	);
-};
-
-/**
- * prop ```align``` позволяет позиционировать текст
- */
-export const Align = () => {
-	return (
-		<div>
-			<Wrapper>
-				<Filename>Приложение №10.pdf</Filename>
-			</Wrapper>
-			<Wrapper>
-				<Filename align='center'>Приложение №10.pdf</Filename>
-			</Wrapper>
-			<Wrapper>
-				<Filename align='right'>Приложение №10.pdf</Filename>
-			</Wrapper>
-		</div>
-	);
-};
-
-export const ComplexFileExtension = () => {
-	return (
-		<div>
-			<Wrapper>
-				<Filename>
-					Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
-					25.04.2024.xml.dist
-				</Filename>
-			</Wrapper>
-			<Wrapper>
-				<Filename>
-					Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
-					25.04.2024.tar.xz
-				</Filename>
-			</Wrapper>
-			<Wrapper>
-				<Filename>
-					Версия 1.0 Приложение No 10к Договору подряда No КрФ/15331/24 от
-					25.04.2024.xml.orig
-				</Filename>
-			</Wrapper>
-		</div>
-	);
-};

package/src/components/Filename/Filename.tsx

@@ -1,57 +0,0 @@
-import { forwardRef } from 'react';
-
-import { type TooltipProps as BasicTooltipProps, Tooltip } from '../Tooltip';
-import type { TypographyProps, TypographyVariant } from '../Typography';
-
-import { FileBaseName, StyledTypography } from './styles';
-import { useLogic } from './useLogic';
-
-type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
-
-export type FileNameProps = Omit<TypographyProps, 'variant'> & {
-	/**
-	 * Название файла
-	 */
-	children: string;
-	/**
-	 * Cпособ кастомизировать тултип при необходимости
-	 * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
-	 */
-	tooltipProps?: Omit<TooltipProps, 'children'>;
-
-	/**
-	 * Применяет стили оформления темы
-	 * @default inherit
-	 */
-	variant?: TypographyVariant | 'inherit';
-};
-
-export const Filename = forwardRef<HTMLElement, FileNameProps>(
-	(props, forwardedRef) => {
-		const { isOverflowed, suffixWithExtension, baseNameProps } = useLogic({
-			...props,
-			ref: forwardedRef,
-		});
-
-		const {
-			tooltipProps,
-			variant = 'inherit',
-			children,
-			align = 'left',
-			...restProps
-		} = props;
-
-		return (
-			<Tooltip
-				title={isOverflowed && children}
-				disableInteractive
-				{...tooltipProps}
-			>
-				<StyledTypography $align={align} variant={variant} {...restProps}>
-					<FileBaseName {...baseNameProps} />
-					<span>{suffixWithExtension}</span>
-				</StyledTypography>
-			</Tooltip>
-		);
-	},
-);

package/src/components/Filename/index.ts

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

package/src/components/Filename/styles.ts

@@ -1,18 +0,0 @@
-import { styled } from '@mui/material';
-import { Typography } from '../Typography';
-
-export const FileBaseName = styled('span')`
-  overflow: hidden;
-
-  max-width: 100%;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export const StyledTypography = styled(Typography, {
-	shouldForwardProp: (prop) => !['$align'].includes(prop.toString()),
-})<{ $align: string }>`
-  display: flex;
-  justify-content: ${({ $align }) => $align};
-`;

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

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

package/src/components/Filename/useLogic/useLogic.ts

@@ -1,36 +0,0 @@
-import type { Ref } from 'react';
-
-import { useOverflowed } from '../../OverflowTypography/hooks';
-import type { FileNameProps } from '../Filename';
-
-import { truncateString } from './utils';
-
-type SpanProps = {
-	children: string;
-	ref?: Ref<HTMLElement>;
-};
-
-type UseLogicParams = FileNameProps & {
-	ref: Ref<HTMLElement>;
-};
-
-type UseLogicResult = {
-	isOverflowed: boolean;
-	baseNameProps: SpanProps;
-	suffixWithExtension: string;
-};
-
-export const useLogic = ({
-	ref: forwardedRef,
-	children,
-}: UseLogicParams): UseLogicResult => {
-	const { ref, isOverflowed } = useOverflowed(forwardedRef);
-
-	const { baseName, suffixWithExtension } = truncateString(children);
-
-	return {
-		baseNameProps: { ref, children: baseName },
-		isOverflowed,
-		suffixWithExtension,
-	};
-};

package/src/components/Filename/useLogic/utils/findExtension/constants.ts

@@ -1,16 +0,0 @@
-export const COMPLEX_EXTENSIONS: string[] = [
-	'.xml.dist',
-	'.xml.tpl',
-	'.xml.gz',
-	'.xml.bz2',
-	'.xml.zip',
-	'.xml.enc',
-	'.xml.sig',
-	'.xml.metadata',
-	'.xml.backup',
-	'.xml.orig',
-	'.tar.gz',
-	'.tar.bz2',
-	'.tar.xz',
-	'.tar.lz',
-];

package/src/components/Filename/useLogic/utils/findExtension/findExtension.ts

@@ -1,17 +0,0 @@
-import { COMPLEX_EXTENSIONS } from './constants';
-
-export const findExtension = (filename: string) => {
-	for (const fileExtension of COMPLEX_EXTENSIONS) {
-		if (filename.endsWith(fileExtension)) {
-			return fileExtension;
-		}
-	}
-
-	const extensionIndex = filename.lastIndexOf('.');
-
-	if (extensionIndex !== -1) {
-		return filename.slice(extensionIndex);
-	}
-
-	return undefined;
-};

package/src/components/Filename/useLogic/utils/findExtension/index.ts

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

package/src/components/Filename/useLogic/utils/index.ts

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

package/src/components/Filename/useLogic/utils/truncateString/constants.ts

@@ -1 +0,0 @@
-export const SUFFIX_LENGTH = 2;

package/src/components/Filename/useLogic/utils/truncateString/index.ts

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

package/src/components/Filename/useLogic/utils/truncateString/truncateString.ts

@@ -1,24 +0,0 @@
-import { findExtension } from '../findExtension';
-
-import { SUFFIX_LENGTH } from './constants';
-
-export const truncateString = (fileName: string) => {
-	const fileExtension = findExtension(fileName);
-
-	if (fileExtension && fileName.endsWith(fileExtension)) {
-		const baseName = fileName.slice(
-			0,
-			fileName.length - fileExtension.length - SUFFIX_LENGTH,
-		);
-		const suffixWithExtension = fileName.slice(
-			-fileExtension.length - SUFFIX_LENGTH,
-		);
-
-		return { baseName, suffixWithExtension };
-	}
-
-	const baseName = fileName.slice(0, -SUFFIX_LENGTH);
-	const suffixWithExtension = fileName.slice(-SUFFIX_LENGTH);
-
-	return { baseName, suffixWithExtension };
-};

package/src/components/FormControl/FormControl.tsx

@@ -1,12 +0,0 @@
-import {
-	FormControl as MuiFormControl,
-	type FormControlProps as MuiFormControlProps,
-} from '@mui/material';
-
-import type { WithoutEmotionSpecific } from '../types';
-
-export type FormControlProps = WithoutEmotionSpecific<MuiFormControlProps>;
-
-export const FormControl = (props: FormControlProps) => (
-	<MuiFormControl {...props} />
-);

package/src/components/FormControl/index.tsx

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

package/src/components/FormControlLabel/FormControlLabel.tsx

@@ -1,6 +0,0 @@
-import { StyledFormControlLabel } from './styles';
-import type { FormControlLabelProps } from './types';
-
-export const FormControlLabel = (props: FormControlLabelProps) => {
-	return <StyledFormControlLabel {...props} />;
-};

package/src/components/FormControlLabel/index.ts

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

package/src/components/FormControlLabel/styles.ts

@@ -1,14 +0,0 @@
-import { FormControlLabel, styled } from '@mui/material';
-
-import type { FormControlLabelProps } from './types';
-
-export const StyledFormControlLabel = styled(
-	FormControlLabel,
-)<FormControlLabelProps>`
-  margin-right: 0;
-  margin-left: -5px;
-
-  & .MuiFormControlLabel-label {
-    margin-left: ${({ theme }) => theme.spacing(1)};
-  }
-`;

package/src/components/FormControlLabel/types.ts

@@ -1,6 +0,0 @@
-import type { FormControlLabelProps as MuiFormControlLabelProps } from '@mui/material/FormControlLabel';
-
-import type { WithoutEmotionSpecific } from '../types';
-
-export type FormControlLabelProps =
-	WithoutEmotionSpecific<MuiFormControlLabelProps>;

package/src/components/FormHelperText/FormHelperText.tsx

@@ -1,29 +0,0 @@
-import {
-	FormHelperText as MuiFormHelperText,
-	type FormHelperTextProps as MuiFormHelperTextProps,
-} from '@mui/material';
-
-import type { WithoutEmotionSpecific } from '../types';
-
-import { FormHelperTextContent } from './FormHelperTextContent';
-
-export type FormHelperTextProps =
-	WithoutEmotionSpecific<MuiFormHelperTextProps> & {
-		success?: boolean;
-		error?: boolean;
-	};
-
-export const FormHelperText = ({
-	children,
-	success,
-	error,
-	...props
-}: FormHelperTextProps) => {
-	return (
-		<MuiFormHelperText {...props}>
-			<FormHelperTextContent error={error} success={success}>
-				{children}
-			</FormHelperTextContent>
-		</MuiFormHelperText>
-	);
-};

package/src/components/FormHelperText/FormHelperTextContent/FormHelperTextContent.tsx

@@ -1,38 +0,0 @@
-import { type ReactNode, useMemo } from 'react';
-
-import { ErrorIcon, Message, SuccessIcon, Wrapper } from './styles';
-
-export type FormHelperTextContentProps = {
-	success?: boolean;
-	error?: boolean;
-	children?: ReactNode;
-};
-
-export const FormHelperTextContent = ({
-	success,
-	error,
-	children,
-}: FormHelperTextContentProps) => {
-	const Icon = useMemo(() => {
-		if (success) {
-			return <SuccessIcon />;
-		}
-
-		if (error) {
-			return <ErrorIcon />;
-		}
-
-		return null;
-	}, [success, error]);
-
-	if (children) {
-		return (
-			<Wrapper error={error} success={success}>
-				{Icon}
-				<Message>{children}</Message>
-			</Wrapper>
-		);
-	}
-
-	return null;
-};

package/src/components/FormHelperText/FormHelperTextContent/index.ts

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

package/src/components/FormHelperText/FormHelperTextContent/styles.ts

@@ -1,44 +0,0 @@
-import { styled } from '@mui/material';
-import { CircleCheck, OctagonAlert } from 'lucide-react';
-import type { Theme } from '../../../theme';
-
-const getStyles = (theme: Theme) => {
-	return `display: inline-flex;
-  justify-content: center;
-  font-size: ${theme.typography.h5.fontSize};
-  vertical-align: middle;`;
-};
-
-type WrapperProps = {
-	success?: boolean;
-	error?: boolean;
-};
-
-// flex необходим, для того, чтобы span не менял высоту полей и имел фиксированную высоту в 16px
-export const Wrapper = styled('span')<WrapperProps>`
-  display: flex;
-
-  color: ${({ success, error, theme }) => {
-		if (success) {
-			return theme.palette.success.dark;
-		}
-
-		if (error) {
-			return theme.palette.error.dark;
-		}
-
-		return 'inherit';
-	}};
-`;
-
-export const SuccessIcon = styled(CircleCheck)`
-  ${({ theme }) => getStyles(theme)}
-`;
-
-export const ErrorIcon = styled(OctagonAlert)`
-  ${({ theme }) => getStyles(theme)}
-`;
-
-export const Message = styled('span')`
-  vertical-align: middle;
-`;

package/src/components/FormHelperText/index.ts

@@ -1,3 +0,0 @@
-export * from './FormHelperText';
-
-export * from './FormHelperTextContent';

package/src/components/FormLabel/FormLabel.tsx

@@ -1,11 +0,0 @@
-import type { FormLabelProps as MuiFormLabelProps } from '@mui/material';
-
-import type { WithoutEmotionSpecific } from '../types';
-
-import { StyledFormLabel } from './styles';
-
-export type FormLabelProps = WithoutEmotionSpecific<MuiFormLabelProps>;
-
-export const FormLabel = (props: FormLabelProps) => {
-	return <StyledFormLabel {...props} />;
-};

package/src/components/FormLabel/index.ts

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

package/src/components/FormLabel/styles.ts

@@ -1,6 +0,0 @@
-import { FormLabel, styled } from '@mui/material';
-
-export const StyledFormLabel = styled(FormLabel)`
-  font-size: ${({ theme }) => theme.typography.pointer.fontSize};
-  line-height: ${({ theme }) => theme.typography.pointer.lineHeight};
-`;