@max-ts/components 0.0.2

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

@@ -0,0 +1,203 @@
+import { Paper } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ReactNode, useEffect, useState } from 'react';
+
+import { Badge } from '../Badge';
+import { DialogActions } from '../DialogActions';
+import { DialogContent } from '../DialogContent';
+import { DialogTitle } from '../DialogTitle';
+
+import { ChevronDown, MessageCircle, ThumbsUp } from 'lucide-react';
+import { Container } from '../Container';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+	title: 'Components/Buttons/Button',
+	component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Interaction: Story = {
+	render: (args) => {
+		return <Button {...args}>Click me</Button>;
+	},
+	args: {},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			setLoading(false);
+		}, 1500);
+
+		return () => clearTimeout(timeout);
+	}, [loading]);
+
+	const handleClick = () => setLoading(true);
+
+	return (
+		<Paper style={{ width: 500 }}>
+			<DialogTitle>Изменения не сохранятся</DialogTitle>
+			<DialogContent>
+				На странице есть несохраненные изменения, которые будут утеряны, если их
+				не сохранить.
+			</DialogContent>
+			<DialogActions>
+				<Button variant='text'>Отмена</Button>
+				<Button loading={loading} onClick={handleClick}>
+					Продолжить
+				</Button>
+			</DialogActions>
+		</Paper>
+	);
+};
+
+const ButtonsContainer = Container;
+
+export const Variants = () => (
+	<ButtonsContainer>
+		<Button>Contained</Button>
+		<Button variant='light'>Light</Button>
+		<Button variant='link'>Link</Button>
+		<Button variant='text'>Text</Button>
+	</ButtonsContainer>
+);
+
+export const Disabled = () => (
+	<ButtonsContainer>
+		<Button disabled>Contained</Button>
+		<Button disabled variant='light'>
+			Light
+		</Button>
+		<Button disabled variant='link'>
+			Link
+		</Button>
+		<Button disabled variant='text'>
+			Text
+		</Button>
+	</ButtonsContainer>
+);
+
+export const Loading = () => (
+	<ButtonsContainer>
+		<Button loading>Contained</Button>
+		<Button loading variant='light'>
+			Light
+		</Button>
+		<Button loading variant='link'>
+			Link
+		</Button>
+		<Button loading variant='text'>
+			Text
+		</Button>
+	</ButtonsContainer>
+);
+
+export const Selected = () => (
+	<ButtonsContainer>
+		<Button selected>Contained</Button>
+		<Button selected variant='light'>
+			Light
+		</Button>
+		<Button selected variant='link'>
+			Link
+		</Button>
+		<Button selected variant='text'>
+			Text
+		</Button>
+	</ButtonsContainer>
+);
+
+export const Icons = () => (
+	<ButtonsContainer>
+		<Button startIcon={<ThumbsUp />}>Start Icon</Button>
+		<Button endIcon={<MessageCircle />}>End Icon</Button>
+		<Button startIcon={<MessageCircle />} endIcon={<ChevronDown />}>
+			Start & End
+		</Button>
+		<Button
+			variant='light'
+			endIcon={
+				<Badge
+					badgeContent={12}
+					color='error'
+					style={{ marginLeft: 2, marginRight: 15 }}
+				>
+					<span style={{ width: 10 }} />
+				</Badge>
+			}
+		>
+			Badge
+		</Button>
+	</ButtonsContainer>
+);
+
+export const Sizes = () => (
+	<ButtonsContainer>
+		<Button size='medium'>Medium</Button>
+		<Button size='large'>Large</Button>
+	</ButtonsContainer>
+);
+
+export const Colors = () => (
+	<Container gap={3}>
+		<ButtonsContainer>
+			<Button>Primary</Button>
+			<Button color='error'>Error</Button>
+			<Button color='success'>Success</Button>
+			<Button color='warning'>Warning</Button>
+			<Button color='error'>Error</Button>
+		</ButtonsContainer>
+		<ButtonsContainer>
+			<Button variant='light'>Primary</Button>
+			<Button variant='light' color='error'>
+				Error
+			</Button>
+			<Button variant='light' color='success'>
+				Success
+			</Button>
+			<Button variant='light' color='warning'>
+				Warning
+			</Button>
+			<Button variant='light' color='error'>
+				Error
+			</Button>
+		</ButtonsContainer>
+	</Container>
+);
+
+const Link = ({
+	children,
+	className,
+	href,
+}: {
+	children: ReactNode;
+	className?: string;
+	href: string;
+}) => (
+	<a href={href} className={className}>
+		{children}
+	</a>
+);
+
+/**
+ * Когда необходима ссылка, которая выглядит как кнопка
+ */
+export const AsLink = () => (
+	<>
+		<Button href='#'>Обычная ссылка</Button>
+		<Button href='/' component={Link}>
+			Ссылка роутера
+		</Button>
+	</>
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,85 @@
+import type { ButtonProps as MuiButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { clsx } from 'clsx';
+import { LOADING_BUTTON_CLASSNAME } from './constants';
+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>>,
+	'variant' | 'color'
+> & {
+	/**
+	 * Тип кнопки
+	 */
+	variant?: `${ButtonVariants}`;
+	/**
+	 * Если `true`, появляется loader внутри кнопки
+	 */
+	loading?: boolean;
+	/**
+	 * @deprecated Не поддерживается, используется стандартный индикатор загрузки
+	 */
+	loadingIndicator?: ReactNode;
+	/**
+	 * @deprecated Не поддерживается, используется стандартное положение индикатора загрузки `center`
+	 */
+	loadingPosition?: 'start' | 'end' | 'center';
+	/**
+	 * Цвет текста кнопки
+	 */
+	color?: `${ButtonColors}`;
+	// https://github.com/mui/material-ui/issues/30038
+	/**
+	 * Тип html-элемента
+	 */
+	component?: RootComponent;
+	/**
+	 * Состояние кнопки - selected
+	 */
+	selected?: boolean;
+};
+
+export const Button = <
+	RootComponent extends React.ElementType,
+	AdditionalProps,
+>(
+	props: ButtonProps<RootComponent, AdditionalProps>,
+) => {
+	const { loadingIndicatorColor } = useLogic(props);
+	const {
+		variant = ButtonVariants.Contained,
+		color = ButtonColors.Primary,
+		loading,
+		loadingIndicator,
+		loadingPosition,
+		disabled,
+		children,
+		className,
+		...restProps
+	} = props;
+
+	return (
+		<StyledButton
+			variant={variant}
+			color={color}
+			disabled={loading || disabled}
+			{...restProps}
+			className={clsx(className, {
+				[LOADING_BUTTON_CLASSNAME]: loading,
+			})}
+		>
+			{loading && (
+				<StyledCircularProgress color={loadingIndicatorColor} size='small' />
+			)}
+			{children}
+		</StyledButton>
+	);
+};

package/src/components/Button/constants.ts

@@ -0,0 +1 @@
+export const LOADING_BUTTON_CLASSNAME = 'astral-button-loading';

package/src/components/Button/enums.ts

@@ -0,0 +1,26 @@
+export enum ButtonColors {
+	Error = 'error',
+	Success = 'success',
+	Warning = 'warning',
+	Primary = 'primary',
+}
+
+export enum ButtonVariants {
+	Contained = 'contained',
+	Light = 'light',
+	Text = 'text',
+	Link = 'link',
+}
+
+export enum ButtonSizes {
+	Small = 'small',
+	Medium = 'medium',
+	Large = 'large',
+}
+
+export enum ButtonStates {
+	Default = 'default',
+	Active = 'active',
+	Focus = 'focus',
+	Hover = 'hover',
+}

package/src/components/Button/index.ts

@@ -0,0 +1,7 @@
+export * from './Button';
+
+export * from './types';
+
+export * from './enums';
+
+export * from './constants';

package/src/components/Button/styles.ts

@@ -0,0 +1,19 @@
+import { Button, styled } from '@mui/material';
+
+import { CircularProgress } from '../CircularProgress';
+
+import { ButtonVariants } from './enums';
+
+export const StyledButton = styled(Button)`
+  min-width: ${({ variant }) =>
+		variant === ButtonVariants.Link ? 'auto' : ''};
+  padding: ${({ variant }) => (variant === ButtonVariants.Link ? 0 : '')};
+
+  :active {
+    box-shadow: none;
+  }
+`;
+
+export const StyledCircularProgress = styled(CircularProgress)`
+  position: absolute;
+`;

package/src/components/Button/types.ts

@@ -0,0 +1,30 @@
+import type {
+	ButtonColors,
+	ButtonSizes,
+	ButtonStates,
+	ButtonVariants,
+} from './enums';
+
+declare module '@mui/material/Button' {
+	interface ButtonPropsVariantOverrides {
+		contained: true;
+		light: true;
+		text: true;
+		link: true;
+	}
+
+	interface ButtonPropsColorVariantOverrides {
+		primary: true;
+		success: true;
+		warning: true;
+		error: true;
+	}
+}
+
+export type ButtonColor = `${ButtonColors}`;
+
+export type ButtonVariant = `${ButtonVariants}`;
+
+export type ButtonSize = `${ButtonSizes}`;
+
+export type ButtonState = `${ButtonStates}`;

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

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

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

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

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

@@ -0,0 +1,154 @@
+import { Box, Paper } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useState } from 'react';
+
+import { Button } from '../Button';
+import { DialogActions } from '../DialogActions';
+import { DialogContent } from '../DialogContent';
+import { DialogTitle } from '../DialogTitle';
+import { FormControlLabel } from '../FormControlLabel';
+import { TextField } from '../TextField';
+
+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> = {
+	title: 'Components/Inputs/Checkbox',
+	component: Checkbox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Interaction: Story = {
+	args: {
+		disabled: false,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+/**
+ * Пример использования
+ */
+export const Example = () => {
+	const [loading, setLoading] = useState(false);
+	const handleClick = () => setLoading(true);
+
+	return (
+		<Paper style={{ width: 500 }}>
+			<DialogTitle>Форма обратной связи</DialogTitle>
+			<DialogContent>
+				<Box>
+					<Container gap={2} templateColumns='repeat(2, 1fr)'>
+						<TextField placeholder={'Поле 1'} />
+						<TextField placeholder={'Поле 2'} />
+					</Container>
+					<FormControlLabel
+						control={<Checkbox />}
+						label='Дополнительный параметр '
+					/>
+				</Box>
+			</DialogContent>
+			<DialogActions>
+				<Button variant='text'>Отмена</Button>
+				<Button loading={loading} onClick={handleClick}>
+					Продолжить
+				</Button>
+			</DialogActions>
+		</Paper>
+	);
+};
+
+export const CheckboxDefault = () => <Checkbox />;
+
+export const CheckboxChecked = () => <Checkbox checked />;
+
+export const CheckboxDisabled = () => (
+	<>
+		<Checkbox disabled />
+		<Checkbox disabled checked />
+	</>
+);
+
+/**
+ * Обычно чекбокс используется с текстом, к которому он относится.
+ */
+export const CheckboxLabel = () => (
+	<>
+		<FormControlLabel control={<Checkbox />} label='Текст' />
+		<FormControlLabel control={<Checkbox disabled />} label='Текст' />
+		<FormControlLabel control={<Checkbox disabled checked />} label='Текст' />
+	</>
+);
+
+/**
+ * Неопределенное состояние.
+ * В случаях, когда используется группировка элементов в списке и есть возможность выбора всех или определенного числа, может быть использован чексбокс в неопределенном состоянии. Он представляет собой выбранный чекбокс со знаком “-”.
+ */
+export const Indeterminate = () => {
+	const [checked, setChecked] = useState([true, false]);
+
+	const handleChange1 = (event: ChangeEvent<HTMLInputElement>) => {
+		setChecked([event.target.checked, event.target.checked]);
+	};
+
+	const handleChange2 = (event: ChangeEvent<HTMLInputElement>) => {
+		setChecked([event.target.checked, checked[1]]);
+	};
+
+	const handleChange3 = (event: ChangeEvent<HTMLInputElement>) => {
+		setChecked([checked[0], event.target.checked]);
+	};
+
+	return (
+		<>
+			<div>
+				<FormControlLabel
+					label='Заголовок'
+					control={
+						<Checkbox
+							checked={checked[0] && checked[1]}
+							indeterminate={checked[0] !== checked[1]}
+							onChange={handleChange1}
+						/>
+					}
+				/>
+				<Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
+					<FormControlLabel
+						label='Вариант 1'
+						control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
+					/>
+					<FormControlLabel
+						label='Вариант 2'
+						control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
+					/>
+				</Box>
+			</div>
+		</>
+	);
+};
+
+/**
+ * Вид компонента для визуального отображения состояния ошибки
+ */
+export const ErrorExample = () => (
+	<>
+		<FormControlLabel control={<Checkbox isError={true} />} label='Текст' />
+		<FormControlLabel
+			control={<Checkbox checked isError={true} />}
+			label='Текст'
+		/>
+	</>
+);

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,39 @@
+import type { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox/Checkbox';
+import { forwardRef } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { CheckedIcon, DefaultIcon, IndeterminateIcon } from './icons';
+import { StyledCheckbox } from './styles';
+
+export type CheckboxProps = Omit<
+	WithoutEmotionSpecific<MuiCheckboxProps>,
+	'size' | 'color'
+> & {
+	/**
+	 * Флаг для активации error стилей.
+	 */
+	isError?: boolean;
+};
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+	(
+		{
+			icon = <DefaultIcon />,
+			checkedIcon = <CheckedIcon />,
+			indeterminateIcon = <IndeterminateIcon />,
+			...props
+		}: CheckboxProps,
+		ref,
+	) => {
+		return (
+			<StyledCheckbox
+				ref={ref}
+				icon={icon}
+				checkedIcon={checkedIcon}
+				indeterminateIcon={indeterminateIcon}
+				{...props}
+			/>
+		);
+	},
+);

package/src/components/Checkbox/icons.tsx

@@ -0,0 +1,41 @@
+import { SvgIcon, type SvgIconProps } from '@mui/material';
+
+export const DefaultIcon: React.FunctionComponent<SvgIconProps> = ({
+	...props
+}) => (
+	<SvgIcon viewBox='0 0 14 14' {...props}>
+		<path d='M0 3C0 1.34315 1.34315 0 3 0H11C12.6569 0 14 1.34315 14 3V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V3Z' />
+		<path
+			className='MuiSvgIcon-border'
+			fillRule='evenodd'
+			clipRule='evenodd'
+			d='M11 2H3C2.44772 2 2 2.44772 2 3V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2ZM3 0C1.34315 0 0 1.34315 0 3V11C0 12.6569 1.34315 14 3 14H11C12.6569 14 14 12.6569 14 11V3C14 1.34315 12.6569 0 11 0H3Z'
+		/>
+	</SvgIcon>
+);
+
+export const CheckedIcon: React.FunctionComponent<SvgIconProps> = ({
+	...props
+}) => (
+	<SvgIcon viewBox='0 0 14 14' {...props}>
+		<rect width='14' height='14' rx='3' />
+		<path
+			className='MuiSvgIcon-mark'
+			fillRule='evenodd'
+			clipRule='evenodd'
+			d='M4.71402 6.30066C4.62206 6.20534 4.51205 6.12931 4.39042 6.07701C4.26879 6.0247 4.13797 5.99717 4.0056 5.99602C3.87323 5.99487 3.74195 6.02012 3.61943 6.0703C3.49691 6.12048 3.3856 6.19458 3.292 6.28829C3.19839 6.38199 3.12437 6.49342 3.07424 6.61607C3.02411 6.73872 2.99889 6.87013 3.00004 7.00265C3.00119 7.13516 3.02869 7.26612 3.08094 7.38787C3.13319 7.50963 3.20914 7.61976 3.30435 7.71182L5.29823 9.7078C5.48518 9.8949 5.73871 10 6.00306 10C6.26741 10 6.52094 9.8949 6.7079 9.7078L10.6956 5.71584C10.7909 5.62377 10.8668 5.51365 10.9191 5.39189C10.9713 5.27013 10.9988 5.13918 11 5.00666C11.0011 4.87415 10.9759 4.74274 10.9258 4.62009C10.8756 4.49744 10.8016 4.38601 10.708 4.29231C10.6144 4.1986 10.5031 4.1245 10.3806 4.07432C10.258 4.02414 10.1268 3.99889 9.9944 4.00004C9.86203 4.00119 9.73121 4.02872 9.60958 4.08102C9.48795 4.13333 9.37794 4.20936 9.28598 4.30468L6.00306 7.59106L4.71402 6.30066V6.30066Z'
+		/>
+	</SvgIcon>
+);
+
+export const IndeterminateIcon: React.FunctionComponent<SvgIconProps> = ({
+	...props
+}) => (
+	<SvgIcon viewBox='0 0 14 14' {...props}>
+		<rect width='14' height='14' rx='3' />
+		<path
+			className='MuiSvgIcon-mark'
+			d='M10 6H4C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8H10C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6Z'
+		/>
+	</SvgIcon>
+);

package/src/components/Checkbox/index.ts

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