@max-ts/components 0.0.2 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/components",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {

package/rslib.config.ts

@@ -1,32 +1,32 @@
-import { resolve } from 'node:path';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 import { pluginDts } from 'rsbuild-plugin-dts';
 
 export default defineConfig({
-	lib: [
-		{
-			format: 'cjs',
-			bundle: true,
-			dts: false,
-		},
-		{
-			format: 'esm',
-			bundle: true,
-			dts: false,
-		},
-	],
-	source: {
-		entry: {
-			index: './src/index.ts',
-		},
-	},
-	output: {
-		cleanDistPath: true,
-		minify: true,
-		externals: ['react', 'react-dom'],
-		target: 'web',
-		injectStyles: true,
-	},
-	plugins: [pluginDts(), pluginReact()],
+  mode: 'production',
+  lib: [
+    {
+      format: 'cjs',
+      bundle: true,
+      dts: true,
+    },
+    {
+      format: 'esm',
+      bundle: true,
+      dts: true,
+    },
+  ],
+  source: {
+    entry: {
+      index: './src/index.ts',
+    },
+  },
+  output: {
+    cleanDistPath: true,
+    minify: true,
+    externals: ['react', 'react-dom'],
+    target: 'web',
+    injectStyles: true,
+  },
+  plugins: [pluginDts(), pluginReact()],
 });

package/src/components/Accordion/Accordion.stories.tsx

@@ -7,6 +7,8 @@ import { Button } from '../Button';
 import { Container } from '../Container';
 import { Accordion } from './Accordion';
 
+import type React from 'react';
+
 /**
  * Accordion - компонент, позволяющий скрывать контент под заголовком
  *

package/src/components/ActionCell/ActionCell.stories.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { DataGrid, type DataGridColumns } from '../DataGrid';
 
 import { Eye, Save, Send, Trash } from 'lucide-react';
+import React from 'react';
 import { ActionCell, type Actions } from './ActionCell';
 
 /**

package/src/components/ActionCell/MainAction/MainAction.tsx

@@ -36,6 +36,7 @@ export const MainAction = <T,>({
 					disabled={isDisabled || disabled}
 				>
 					{actions.map(
+						// @ts-ignore
 						({ name: nestedActionName, onClick: onClickNested, ...props }) => (
 							<MenuItem
 								{...props}

package/src/components/AsyncAutocomplete/AsyncAutocomplete.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react';
 import { type SyntheticEvent, useState } from 'react';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import {
 	AsyncAutocomplete,
 	type AsyncAutocompleteProps,

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -7,6 +7,7 @@ import { Tag } from '../Tag';
 import { Tooltip } from '../Tooltip';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { Autocomplete } from './Autocomplete';
 
 const meta: Meta<typeof Autocomplete> = {

package/src/components/Badge/Badge.stories.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 
 import { Button } from '../Button';
 
+import React from 'react';
 import { Container } from '../Container';
 import { Badge } from './Badge';
 

package/src/components/BottomDrawer/BottomDrawer.stories.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { Button } from '../Button';
 
 import { styled } from '@mui/material';
+import type React from 'react';
 import { Container } from '../Container';
 import { BottomDrawer } from './BottomDrawer';
 
@@ -18,7 +19,7 @@ const Row = styled('div')`
 `;
 
 const renderRows = (count: number) => {
-	const rows = [];
+	const rows: React.ReactElement[] = [];
 
 	for (let i = 0; i < count; i++) {
 		rows.push(

package/src/components/Button/Button.stories.tsx

@@ -8,6 +8,7 @@ import { DialogContent } from '../DialogContent';
 import { DialogTitle } from '../DialogTitle';
 
 import { ChevronDown, MessageCircle, ThumbsUp } from 'lucide-react';
+import React from 'react';
 import { Container } from '../Container';
 import { Button } from './Button';
 
@@ -82,7 +83,7 @@ export const Disabled = () => (
 		<Button disabled variant='link'>
 			Link
 		</Button>
-		<Button disabled variant='text'>
+		<Button disabled variant='text' component={Link}>
 			Text
 		</Button>
 	</ButtonsContainer>

package/src/components/Button/Button.tsx

@@ -1,5 +1,8 @@
-import type { ButtonProps as MuiButtonProps } from '@mui/material';
-import type { ReactNode } from 'react';
+import type {
+	ButtonTypeMap,
+	ButtonProps as MuiButtonProps,
+} from '@mui/material';
+import type { ElementType, ReactNode } from 'react';
 
 import type { WithoutEmotionSpecific } from '../types';
 
@@ -9,11 +12,8 @@ import { ButtonColors, ButtonVariants } from './enums';
 import { StyledButton, StyledCircularProgress } from './styles';
 import { useLogic } from './useLogic';
 
-export type ButtonProps<
-	RootComponent extends React.ElementType,
-	AdditionalProps = object,
-> = Omit<
-	WithoutEmotionSpecific<MuiButtonProps<RootComponent, AdditionalProps>>,
+export type ButtonProps<RootComponent extends ElementType> = Omit<
+	WithoutEmotionSpecific<MuiButtonProps<RootComponent>>,
 	'variant' | 'color'
 > & {
 	/**
@@ -48,10 +48,9 @@ export type ButtonProps<
 };
 
 export const Button = <
-	RootComponent extends React.ElementType,
-	AdditionalProps,
+	RootComponent extends React.ElementType = ButtonTypeMap['defaultComponent'],
 >(
-	props: ButtonProps<RootComponent, AdditionalProps>,
+	props: ButtonProps<RootComponent>,
 ) => {
 	const { loadingIndicatorColor } = useLogic(props);
 	const {

package/src/components/Button/useLogic/useLogic.ts

@@ -4,12 +4,9 @@ import { CircularProgressColors } from '../../CircularProgress/constants';
 import type { ButtonProps } from '../Button';
 import { ButtonVariants } from '../enums';
 
-export const useLogic = <
-	RootComponent extends React.ElementType,
-	AdditionalProps,
->({
+export const useLogic = <RootComponent extends React.ElementType>({
 	variant,
-}: ButtonProps<RootComponent, AdditionalProps>) => {
+}: ButtonProps<RootComponent>) => {
 	const loadingIndicatorColor = useMemo(() => {
 		if (variant !== ButtonVariants.Contained) {
 			return CircularProgressColors.PRIMARY;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -9,14 +9,12 @@ import { DialogTitle } from '../DialogTitle';
 import { FormControlLabel } from '../FormControlLabel';
 import { TextField } from '../TextField';
 
+import React from 'react';
 import { Container } from '../Container';
 import { Checkbox } from './Checkbox';
 
 /**
  * Checkbox — это элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено.
- *
- * ### [Figma](https://www.figma.com/design/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(АКТУАЛЬНО)?node-id=322-5837&t=NrGSkPDdR1WstBqT-0)
- * ### [Guide]()
  */
 
 const meta: Meta<typeof Checkbox> = {

package/src/components/CheckboxField/CheckboxField.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import React from 'react';
 import { CheckboxField } from './CheckboxField';
 
 const meta: Meta<typeof CheckboxField> = {

package/src/components/Chevron/Chevron.stories.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 
 import { Button } from '../Button';
 
+import React from 'react';
 import { Chevron } from './Chevron';
 
 const meta: Meta<typeof Chevron> = {

package/src/components/CircularProgress/CircularProgress.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import React from 'react';
 import { CircularProgress } from './CircularProgress';
 
 const meta: Meta<typeof CircularProgress> = {

package/src/components/Collapse/Collapse.stories.tsx

@@ -8,6 +8,7 @@ import { ListItemIcon } from '../ListItemIcon';
 import { ListItemText } from '../ListItemText';
 
 import { House } from 'lucide-react';
+import React from 'react';
 import { Collapse } from './Collapse';
 
 const meta: Meta<typeof Collapse> = {

package/src/components/ConfirmAction/ConfirmAction.stories.tsx

@@ -3,13 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { IconButton } from '../IconButton';
 
 import { Trash } from 'lucide-react';
+import React from 'react';
 import { ConfirmAction } from './ConfirmAction';
 
 /**
  * Используется для подтверждения действия пользователя.
- *
- * ### [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=30167-461154&node-type=frame&t=GgA8Lk5RPtTzJk3I-0)
- * ### [Guide]()
  */
 const meta: Meta<typeof ConfirmAction> = {
 	title: 'Components/ConfirmAction',

package/src/components/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Button } from '../Button';
+
+import { useToggle } from '../../hooks';
+import { ConfirmDialog } from './ConfirmDialog';
+
+/**
+ * Необходим для подтверждения действия пользователем.
+ */
+const meta: Meta<typeof ConfirmDialog> = {
+	title: 'Components/ConfirmDialog',
+	component: ConfirmDialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConfirmDialog>;
+
+export const Interaction: Story = {
+	args: {
+		open: true,
+		title: 'Подверждение',
+		onClose: () => {},
+		actions: {
+			confirm: {
+				text: 'Да',
+			},
+		},
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [isActive, handleOpen, handleClose] = useToggle();
+	const [loading, setLoading] = React.useState(false);
+
+	const handleConfirm = () => {
+		setLoading(true);
+
+		return setTimeout(() => {
+			setLoading(false);
+			handleClose();
+		}, 1000);
+	};
+
+	return (
+		<div>
+			<Button variant='contained' onClick={handleOpen}>
+				ConfirmDialog
+			</Button>
+			<ConfirmDialog
+				open={isActive}
+				title='Подверждение'
+				description='Вы подтверждаете действие?'
+				onClose={handleClose}
+				actions={{
+					confirm: { text: 'Да', onClick: handleConfirm, loading },
+					cancel: { text: 'Нет' },
+				}}
+			/>
+		</div>
+	);
+};

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+
+import { Button, type ButtonProps } from '../Button';
+import { Dialog, type DialogProps } from '../Dialog';
+import { DialogActions } from '../DialogActions';
+import { DialogContent } from '../DialogContent';
+import { DialogContentText } from '../DialogContentText';
+
+import { CancelButton } from './styles';
+import { useLogic } from './useLogic';
+
+export type ConfirmDialogProps = {
+	/**
+	 * Заголовок диалога
+	 */
+	title: string;
+	/**
+	 * Вспомогательный текст
+	 */
+	description?: ReactNode;
+	/**
+	 * Функция для закрытия диалога
+	 */
+	onClose: () => void;
+	/**
+	 * Параметры кнопок действий
+	 */
+	actions: {
+		/**
+		 * Параметры кнопки подтверждения
+		 * @example <ConfirmDialog actions={{ confirm: { text: 'Название кнопки' }}}
+		 */
+		confirm: ButtonProps<'button'> & { text: string };
+		/**
+		 * Параметры кнопки отмены. В качестве действия onClick по-умолчанию используется пропс onClose
+		 * @example <ConfirmDialog actions={{ cancel: { text: 'Название кнопки' }}}
+		 */
+		cancel?: ButtonProps<'button'> & { text: string };
+	};
+} & Pick<
+	DialogProps,
+	| 'aria-labelledby'
+	| 'aria-describedby'
+	| 'disableBackdropClick'
+	| 'disablePortal'
+	| 'disableScrollLock'
+	| 'hideBackdrop'
+	| 'keepMounted'
+	| 'open'
+>;
+
+export const ConfirmDialog = (props: ConfirmDialogProps) => {
+	const { isShowCancelButton, cancelButtonProps } = useLogic(props);
+
+	const { open, title, description, actions, onClose, ...restProps } = props;
+
+	const { text: confirmText, ...confirmButtonProps } = actions.confirm;
+
+	const {
+		text: cancelText,
+		variant,
+		onClick,
+		...restCancelProps
+	} = actions.cancel || {};
+
+	return (
+		<Dialog title={title} open={open} onClose={onClose} {...restProps}>
+			{description && (
+				<DialogContent>
+					<DialogContentText>{description}</DialogContentText>
+				</DialogContent>
+			)}
+			<DialogActions>
+				{isShowCancelButton && (
+					<CancelButton {...restCancelProps} {...cancelButtonProps}>
+						{cancelText}
+					</CancelButton>
+				)}
+				<Button {...confirmButtonProps}>{confirmText}</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};

package/src/components/ConfirmDialog/index.ts

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

package/src/components/ConfirmDialog/styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material';
+import { Button } from '../Button';
+
+export const CancelButton = styled(Button)`
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    order: 1;
+  }
+`;

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

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

package/src/components/ConfirmDialog/useLogic/useLogic.ts

@@ -0,0 +1,23 @@
+import { useViewportType } from '../../../hooks';
+import type { ConfirmDialogProps } from '../ConfirmDialog';
+
+type UseLogicParams = ConfirmDialogProps;
+
+export const useLogic = ({ actions, onClose }: UseLogicParams) => {
+	const { isMobile } = useViewportType();
+	const { cancel } = actions;
+
+	const isShowCancelButton = Boolean(cancel);
+
+	const cancelVariant = isMobile ? 'light' : 'text';
+	const handleCancelClick = cancel?.onClick || onClose;
+
+	const { variant = cancelVariant } = cancel || {};
+
+	const cancelButtonProps = {
+		variant,
+		onClick: handleCancelClick,
+	};
+
+	return { isShowCancelButton, cancelButtonProps };
+};

package/src/components/ContentState/ContentState.stories.tsx

@@ -10,6 +10,7 @@ import { ConfigProvider } from '../ConfigProvider';
 import { TextField } from '../TextField';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { Container } from '../Container';
 import { ContentState } from './ContentState';
 

package/src/components/CopyTypography/CopyTypography.stories.tsx

@@ -5,11 +5,10 @@ import { Typography } from '../Typography';
 import { OverflowTypography } from '../OverflowTypography';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { CopyTypography } from './CopyTypography';
 
 /**
- * ### [Figma]()
- * ### [Guide]()
  * Компонент позволяет скопировать содержимое в буфер обмена
  */
 

package/src/components/DataGrid/DataGrid.stories.tsx

@@ -10,6 +10,7 @@ import {
 import { DataGridPagination } from '../DataGridPagination';
 
 import { Eye, Pencil, Send, Trash } from 'lucide-react';
+import React from 'react';
 import { DataGrid } from './DataGrid';
 import {
 	makeColumns,

package/src/components/DataGridActionCell/DataGridActionCell.stories.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { DataGrid, type DataGridColumns } from '../DataGrid';
 
 import { Pencil, Save, Trash } from 'lucide-react';
+import React from 'react';
 import {
 	DataGridActionCell,
 	type DataGridActionCellProps,

package/src/components/DataGridPagination/DataGridPagination.stories.tsx

@@ -8,6 +8,7 @@ import {
 } from '../DataGrid';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { SearchField } from '../SearchField';
 import { DataGridPagination } from './DataGridPagination';
 import { makeDataList, makeRandomDate } from './faker';

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { Container } from '../Container';
 import { Description } from './Description';
 

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

@@ -4,6 +4,7 @@ import { Button } from '../Button';
 import { Typography } from '../Typography';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { DescriptionList } from './DescriptionList';
 import type { DescriptionListItem } from './types';
 

package/src/components/Dialog/Dialog.stories.tsx

@@ -8,6 +8,7 @@ import { DialogContentText } from '../DialogContentText';
 import { DialogHeader } from '../DialogHeader';
 import { Typography } from '../Typography';
 
+import React from 'react';
 import { Container } from '../Container';
 import { DescriptionList, type DescriptionListItem } from '../DescriptionList';
 import { Tag } from '../Tag';

package/src/components/DialogActions/DialogActions.stories.tsx

@@ -6,6 +6,7 @@ import { Dialog } from '../Dialog';
 import { DialogContent } from '../DialogContent';
 import { DialogContentText } from '../DialogContentText';
 
+import React from 'react';
 import { Container } from '../Container';
 import { DialogActions } from './DialogActions';
 
@@ -13,9 +14,6 @@ type Story = StoryObj<typeof DialogActions>;
 
 /**
  * DialogActions используется для передачи в футер диалога компонентов для управления диалоговым окном.
- *
- * ### [Figma](https://www.figma.com/file/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?type=design&node-id=95-159&mode=design&t=5c0oZ9TMtlkNyOeB-0)
- * ### [Guide]()
  */
 const meta: Meta<typeof DialogActions> = {
 	title: 'Components/Dialog/DialogActions',

package/src/components/DialogContent/DialogContent.stories.tsx

@@ -6,15 +6,13 @@ import { Dialog } from '../Dialog';
 import { DialogActions } from '../DialogActions';
 import { DialogContentText } from '../DialogContentText';
 
+import React from 'react';
 import { DialogContent } from './DialogContent';
 
 type Story = StoryObj<typeof DialogContent>;
 
 /**
  * Для размещения контента внутри Dialog используется DialogContent
- *
- * ### [Figma](https://www.figma.com/file/3ghN4WjSgkKx5rETR64jqh/Sirius-Design-System-(%D0%90%D0%9A%D0%A2%D0%A3%D0%90%D0%9B%D0%AC%D0%9D%D0%9E)?type=design&node-id=95-159&mode=design&t=5c0oZ9TMtlkNyOeB-0)
- * ### [Guide]()
  */
 const meta: Meta<typeof DialogContent> = {
 	title: 'Components/Dialog/DialogContent',

package/src/components/DialogContentText/DialogContentText.stories.tsx

@@ -6,6 +6,7 @@ import { Dialog } from '../Dialog';
 import { DialogActions } from '../DialogActions';
 import { DialogContent } from '../DialogContent';
 
+import React from 'react';
 import { DialogContentText } from './DialogContentText';
 
 type Story = StoryObj<typeof DialogContent>;

package/src/components/DialogHeader/DialogHeader.stories.tsx

@@ -9,6 +9,7 @@ import { DialogContentText } from '../DialogContentText';
 
 import { Tag } from '../Tag';
 
+import React from 'react';
 import { Container } from '../Container';
 import { DialogHeader } from './DialogHeader';
 

package/src/components/Divider/Divider.stories.tsx

@@ -6,6 +6,7 @@ import { ListItemButton } from '../ListItemButton';
 import { ListItemText } from '../ListItemText';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { Container } from '../Container';
 import { Divider } from './Divider';