@max-ts/components 0.0.2 → 0.1.1

package/src/components/RadioField/RadioField.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { styled } from '@mui/material';
+import React from 'react';
+import { Container } from '../Container';
+import { RadioField } from './RadioField';
+
+/**
+ * RadioField - Составной компонент, инкапсулирует внутри логику отображения label, tooltip и т.п.
+ * Упрощает использование компонента Radio
+ *
+ * ### [Figma]()
+ * ### [Guide]()
+ */
+const meta: Meta<typeof RadioField> = {
+	title: 'Components/Inputs/RadioField',
+	component: RadioField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioField>;
+
+export const Interaction: Story = {
+	args: {
+		label: 'Лейбл',
+		isError: false,
+		required: false,
+		checked: false,
+		disabled: false,
+		disabledReason: 'Причина, по которой radio заблокирован',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+const BaseContainer = styled(Container)`
+  width: 300px;
+  min-height: 90px;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const Example = () => (
+	<BaseContainer>
+		<RadioField value='foo' label='Radio label' />
+	</BaseContainer>
+);
+
+export const Required = () => (
+	<BaseContainer>
+		<RadioField value='foo' label='Radio label' required name='bar' />
+	</BaseContainer>
+);
+
+export const DisabledReason = () => (
+	<BaseContainer>
+		<RadioField
+			label='Radio label'
+			value='foo'
+			disabledReason='Причина, по которой radio заблокирован'
+			checked
+			disabled
+		/>
+	</BaseContainer>
+);
+
+export const ErrorState = () => (
+	<BaseContainer>
+		<RadioField label='Radio label' value='foo' isError />
+	</BaseContainer>
+);

package/src/components/RadioField/RadioField.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+
+import type { FormControlLabelProps } from '../FormControlLabel';
+import { Radio, type RadioProps } from '../Radio';
+import { Tooltip } from '../Tooltip';
+
+import { StyledFormControlLabel } from './styles';
+
+export type RadioFieldProps = Omit<RadioProps, 'title' | 'LinkComponent'> & {
+	/**
+	 * Радио лейбл
+	 */
+	label: ReactNode;
+	/**
+	 * Пропсы для FormControlLabel. Дают возможность конфигурации лейбла
+	 */
+	formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
+	/**
+	 * Флаг состояния ошибки
+	 */
+	isError?: boolean;
+	/**
+	 * Причина дизейбла поля. Переданный текст будет отображаться в тултипе при наведении на задизейбленный radio-элемент
+	 */
+	disabledReason?: ReactNode;
+};
+
+/**
+ * Составной компонент radio. Содержит label, tooltip и т.п.
+ */
+export const RadioField = ({
+	id,
+	disabled,
+	label,
+	isError,
+	disabledReason,
+	formControlLabelProps,
+	...restFieldProps
+}: RadioFieldProps) => {
+	return (
+		<Tooltip
+			key={id}
+			title={disabled && disabledReason}
+			placement='bottom-start'
+			withoutContainer={false}
+		>
+			<StyledFormControlLabel
+				{...formControlLabelProps}
+				label={label}
+				control={<Radio {...restFieldProps} isError={isError} />}
+				disabled={disabled}
+			/>
+		</Tooltip>
+	);
+};

package/src/components/RadioField/index.ts

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

package/src/components/RadioField/styles.ts

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

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RadioGroupField } from '../RadioGroupField';
+
+import React from 'react';
+import { RadioGroup } from './RadioGroup';
+
+const meta: Meta<typeof RadioGroup> = {
+	title: 'Components/Inputs/RadioGroup',
+	component: RadioGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Interaction: Story = {
+	args: {
+		groupLabel: 'Группа радио',
+		required: false,
+		isError: false,
+		errorText: 'Ошибка',
+		children: (
+			<>
+				<RadioGroupField label='Radio field 1' value='one' />
+				<RadioGroupField label='Radio field 2' value='two' />
+				<RadioGroupField label='Radio field 3' value='three' />
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => (
+	<RadioGroup groupLabel='Группа радио'>
+		<RadioGroupField label='Radio field 1' value='one' />
+		<RadioGroupField label='Radio field 2' value='two' />
+		<RadioGroupField label='Radio field 3' value='three' />
+	</RadioGroup>
+);
+
+export const ErrorState = () => (
+	<RadioGroup groupLabel='Группа радио' required isError errorText='Ошибка'>
+		<RadioGroupField label='Radio field 1' value='one' />
+		<RadioGroupField label='Radio field 2' value='two' />
+		<RadioGroupField label='Radio field 3' value='three' />
+	</RadioGroup>
+);
+
+export const Row = () => (
+	<RadioGroup groupLabel='Группа радио' row required>
+		<RadioGroupField label='Radio field 1' value='one' />
+		<RadioGroupField label='Radio field 2' value='two' />
+		<RadioGroupField label='Radio field 3' value='three' />
+	</RadioGroup>
+);

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,79 @@
+import {
+	RadioGroup as MuiRadioGroup,
+	type RadioGroupProps as MuiRadioGroupProps,
+} from '@mui/material';
+import { type ReactNode, useId } from 'react';
+
+import { FormControl, type FormControlProps } from '../FormControl';
+import { FormLabel } from '../FormLabel';
+import { Tooltip } from '../Tooltip';
+import type { WithoutEmotionSpecific } from '../types';
+
+import { RadioGroupContextProvider } from './RadioGroupContext';
+
+export type RadioGroupProps = WithoutEmotionSpecific<MuiRadioGroupProps> & {
+	/**
+	 * Флаг состояния ошибки
+	 */
+	isError?: boolean;
+	/**
+	 * Текстовая информация об ошибке, будет отображен в тултипе при isError: true
+	 */
+	errorText?: ReactNode;
+	/**
+	 * Лейбл для группы
+	 */
+	groupLabel?: string;
+	/**
+	 * Лейбл будет помечен как обязательный
+	 */
+	required?: boolean;
+
+	/**
+	 * Пропсы для управления FormControl
+	 */
+	formControlProps?: Omit<FormControlProps, 'error'>;
+};
+
+/**
+ * Компонент RadioGroup с расширенным функционалом
+ */
+export const RadioGroup = (props: RadioGroupProps) => {
+	const {
+		children,
+		groupLabel,
+		errorText,
+		isError,
+		required,
+		formControlProps,
+		row,
+		...otherMuiRadioGroupProps
+	} = props;
+
+	const labelId = useId();
+
+	return (
+		<Tooltip
+			title={isError && errorText}
+			placement={'right-start'}
+			followCursor
+		>
+			<FormControl {...formControlProps}>
+				{groupLabel && (
+					<FormLabel id={labelId} required={required}>
+						{groupLabel}
+					</FormLabel>
+				)}
+				<MuiRadioGroup
+					{...otherMuiRadioGroupProps}
+					aria-labelledby={labelId}
+					row={row}
+				>
+					<RadioGroupContextProvider isError={isError}>
+						{children}
+					</RadioGroupContextProvider>
+				</MuiRadioGroup>
+			</FormControl>
+		</Tooltip>
+	);
+};

package/src/components/RadioGroup/RadioGroupContext/RadioGroupContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export type RadioGroupContextProps = {
+	isError?: boolean;
+};
+
+export const RadioGroupContext = createContext<RadioGroupContextProps>({
+	isError: false,
+});

package/src/components/RadioGroup/RadioGroupContext/RadioGroupContextProvider/RadioGroupContextProvider.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+import {
+	RadioGroupContext,
+	type RadioGroupContextProps,
+} from '../RadioGroupContext';
+
+export type Props = RadioGroupContextProps & {
+	children: ReactNode;
+};
+
+export const RadioGroupContextProvider = ({ children, isError }: Props) => {
+	return (
+		<RadioGroupContext.Provider value={{ isError }}>
+			{children}
+		</RadioGroupContext.Provider>
+	);
+};

package/src/components/RadioGroup/RadioGroupContext/RadioGroupContextProvider/index.ts

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

package/src/components/RadioGroup/RadioGroupContext/index.ts

@@ -0,0 +1,3 @@
+export * from './RadioGroupContext';
+
+export * from './RadioGroupContextProvider';

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,3 @@
+export * from './RadioGroup';
+
+export { RadioGroupContext } from './RadioGroupContext';

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+
+import { RadioField, type RadioFieldProps } from '../RadioField';
+import { RadioGroupContext } from '../RadioGroup';
+
+export type RadioGroupFieldProps = Omit<RadioFieldProps, 'isError'>;
+
+/**
+ *
+ * Компонент RadioField, адаптирован под использование внутри RadioGroup,
+ * Использует контекст RadioGroupContext
+ */
+export const RadioGroupField = (props: RadioGroupFieldProps) => {
+	const { isError } = useContext(RadioGroupContext);
+
+	return <RadioField {...props} isError={isError} />;
+};

package/src/components/RadioGroupField/index.ts

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

package/src/components/Select/Select.stories.tsx

@@ -12,10 +12,6 @@ import { MenuItem } from '../MenuItem';
 
 import { Select, type SelectProps } from './Select';
 
-/**
- * ### [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)?node-id=8756%3A125130)
- * ### [Guide]()
- */
 const meta: Meta<typeof Select> = {
 	title: 'Components/Inputs/Select',
 	component: Select,

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { styled } from '@mui/material';
+import { User } from 'lucide-react';
+import React from 'react';
+import { Skeleton } from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+	title: 'Components/Skeleton',
+	component: Skeleton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Interaction: Story = {
+	args: {
+		variant: 'text',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+		controls: {
+			expanded: true,
+		},
+		options: {
+			showPanel: true,
+		},
+	},
+};
+
+const Container = styled('div')`
+  width: 240px;
+`;
+
+export const Example = () => (
+	<>
+		<Container>
+			<Skeleton />
+		</Container>
+	</>
+);
+
+/**
+ * Скелетон имеет несколько вариантов отображения: text, rounded, circular
+ */
+
+export const Variants = () => (
+	<Container>
+		<Skeleton variant='text' />
+		<Skeleton variant='circular' width={40} height={40} />
+		<Skeleton variant='rounded' width={210} height={60} />
+	</Container>
+);
+
+/**
+ * Пропс "component" позволяет изменить корневой элемент
+ */
+
+export const Component = () => (
+	<Container>
+		<Skeleton variant='rounded' width={210} height={60} component='div' />
+	</Container>
+);
+
+/**
+ * При наличии children скелетон ориентируется на его размеры
+ */
+
+export const WithChildren = () => (
+	<Container>
+		<Skeleton variant='circular'>
+			<User />
+		</Skeleton>
+	</Container>
+);

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,31 @@
+import type { SkeletonProps as MuiSkeletonProps } from '@mui/material';
+import type { ElementType } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { StyledSkeleton } from './styles';
+
+export type SkeletonProps<
+	TComponent extends ElementType,
+	TComponentProps = object,
+> = Omit<
+	WithoutEmotionSpecific<MuiSkeletonProps<TComponent, TComponentProps>>,
+	'variant' | 'animation'
+> & {
+	/**
+	 * Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонент
+	 */
+	component?: TComponent;
+
+	/**
+	 * Тип контента, который будет отображаться
+	 */
+	variant?: 'text' | 'rounded' | 'circular';
+};
+
+export const Skeleton = <
+	TComponent extends ElementType = 'span',
+	TComponentProps = object,
+>(
+	props: SkeletonProps<TComponent, TComponentProps>,
+) => <StyledSkeleton {...props} />;

package/src/components/Skeleton/index.ts

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

package/src/components/Skeleton/styles.ts

@@ -0,0 +1,16 @@
+import { Skeleton, alpha, skeletonClasses, styled } from '@mui/material';
+
+export const StyledSkeleton = styled(Skeleton)`
+  /* stylelint-disable-next-line */
+  background-color: ${({ theme }) => alpha(theme.palette.grey[900], 0.12)};
+
+  /* TODO: Заменить на значения из темы в рамках
+  https://track.astral.ru/soft/browse/UIKIT-1400 */
+  &.${skeletonClasses.text} {
+    border-radius: 4px;
+  }
+
+  &.${skeletonClasses.rounded} {
+    border-radius: 4px;
+  }
+`;

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,179 @@
+import { Paper, styled } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DialogActions } from '../DialogActions';
+import { DialogContent } from '../DialogContent';
+import { DialogTitle } from '../DialogTitle';
+import { FormControlLabel } from '../FormControlLabel';
+import { Typography } from '../Typography';
+
+import React from 'react';
+import { Container } from '../Container';
+import { Switch } from './Switch';
+
+/**
+ * Switch — переключатель — включает или выключает состояние отдельной настройки.
+ * Данный компонент можно использовать при необходимости включения/отключения какой-либо функции в сервисе.
+ *
+ * ### [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=574-76885)
+ * ### [Guide]()
+ */
+const meta: Meta<typeof Switch> = {
+	title: 'Components/Switch',
+	component: Switch,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Interaction: Story = {
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return (
+		<>
+			<Paper style={{ width: 500 }}>
+				<DialogTitle variant='h5'>Настройки</DialogTitle>
+				<DialogContent>
+					<Container>
+						<Typography>Отображать отклоненные заявления</Typography>
+						<Switch size='small' />
+					</Container>
+				</DialogContent>
+				<DialogActions />
+			</Paper>
+		</>
+	);
+};
+
+/**
+ * Переключатель имеет два состояния: выключен и включен.
+ */
+export const Types = () => (
+	<Container>
+		<Switch />
+	</Container>
+);
+
+export const Checked = () => (
+	<Container>
+		<Switch checked />
+	</Container>
+);
+
+export const Disabled = () => (
+	<Container>
+		<Switch disabled />
+		<Switch checked disabled />
+	</Container>
+);
+
+/**
+ * Компонент переключателя используется в интерфейсе с поясняющим текстом.
+ */
+export const SwitchWithText = () => (
+	<Container gap={4}>
+		<FormControlLabel
+			control={<Switch />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+		/>
+		<FormControlLabel
+			control={<Switch />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+			labelPlacement='start'
+		/>
+
+		<FormControlLabel
+			control={<Switch />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+		/>
+		<FormControlLabel
+			control={<Switch />}
+			disabled
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+			labelPlacement='start'
+		/>
+
+		<FormControlLabel
+			control={<Switch checked />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+		/>
+		<FormControlLabel
+			control={<Switch checked />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+			labelPlacement='start'
+		/>
+
+		<FormControlLabel
+			control={<Switch checked />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+			disabled
+		/>
+		<FormControlLabel
+			control={<Switch checked />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+			labelPlacement='start'
+			disabled
+		/>
+	</Container>
+);
+
+/**
+ * Переключатель имеет несколько размеров: small, medium.
+ */
+export const Sizes = () => (
+	<Container gap={4}>
+		<Switch size='small' />
+		<FormControlLabel control={<Switch size='small' />} label='Text' />
+		<Switch />
+		<FormControlLabel
+			control={<Switch />}
+			label={
+				<Typography variant='subtitle1' component='span'>
+					Text
+				</Typography>
+			}
+		/>
+	</Container>
+);

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,14 @@
+import type { SwitchProps as MuiSwitchProps } from '@mui/material';
+import { forwardRef } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { StyledSwitch } from './styles';
+
+export type SwitchProps = WithoutEmotionSpecific<MuiSwitchProps>;
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+	(props, ref) => {
+		return <StyledSwitch ref={ref} {...props} />;
+	},
+);

package/src/components/Switch/index.ts

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