@max-ts/components 0.0.2 → 0.1.0

package/src/components/FormLabel/index.ts

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

package/src/components/FormLabel/styles.ts

@@ -0,0 +1,6 @@
+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};
+`;

package/src/components/GuidTypography/GuidTypography.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { CopyTypography } from '../CopyTypography';
 
 import { styled } from '@mui/material';
+import React from 'react';
 import { GuidTypography } from './GuidTypography';
 
 const meta: Meta<typeof GuidTypography> = {

package/src/components/IconButton/IconButton.stories.tsx

@@ -3,8 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ActionCell, type Actions } from '../ActionCell';
 import { DataGrid, type DataGridColumns } from '../DataGrid';
 
-import { styled } from '@mui/material';
 import { Download, Eye, Filter, Printer, Send } from 'lucide-react';
+import React from 'react';
 import { Container } from '../Container';
 import { IconButton } from './IconButton';
 

package/src/components/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import { type ElementType, type ForwardedRef, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { type ButtonProps, ButtonVariants } from '../Button';
 import {
@@ -8,22 +8,17 @@ import {
 
 import { StyledButton } from './styles';
 
-export type IconButtonProps<
-	RootComponent extends React.ElementType,
-	AdditionalProps = object,
-> = ButtonProps<RootComponent, AdditionalProps> & {
-	/**
-	 * Флаг отображения индикатора загрузки
-	 * @example <IconButton loading />
-	 */
-	loading?: boolean;
-};
+export type IconButtonProps<RootComponent extends React.ElementType> =
+	ButtonProps<RootComponent> & {
+		/**
+		 * Флаг отображения индикатора загрузки
+		 * @example <IconButton loading />
+		 */
+		loading?: boolean;
+	};
 
-export const IconButton = <
-	RootComponent extends React.ElementType,
-	AdditionalProps = object,
->(
-	props: IconButtonProps<RootComponent, AdditionalProps>,
+export const IconButton = <RootComponent extends React.ElementType = 'button'>(
+	props: IconButtonProps<RootComponent>,
 ) => {
 	const {
 		variant = ButtonVariants.Contained,

package/src/components/IconButton/styles.ts

@@ -1,44 +1,44 @@
 import { styled } from '@mui/material';
-import { Button, ButtonSizes, type ButtonProps } from '../Button';
+import { Button, type ButtonProps, ButtonSizes } from '../Button';
 
 type GetValueOptions = {
-  type?: string | undefined;
-  values: Record<string, string>;
-  defaultValue: string;
+	type?: string | undefined;
+	values: Record<string, string>;
+	defaultValue: string;
 };
 
 const getValue = ({ type, values, defaultValue }: GetValueOptions) => {
-  if (!type) {
-    return defaultValue;
-  }
+	if (!type) {
+		return defaultValue;
+	}
 
-  return values[type] || defaultValue;
+	return values[type] || defaultValue;
 };
 
 /**
  * Получить значения для высоты кнопки в зависимости от size параметра
  */
 export const getButtonHeight = (options: ButtonProps<'button'>): string =>
-  getValue({
-    type: options.size,
-    values: {
-      [ButtonSizes.Large]: '40px',
-    },
-    defaultValue: '32px',
-  });
+	getValue({
+		type: options.size,
+		values: {
+			[ButtonSizes.Large]: '40px',
+		},
+		defaultValue: '32px',
+	});
 
 export const getButtonHeightMobile = (options: ButtonProps<'button'>): string =>
-  getValue({
-    type: options.size,
-    values: {
-      [ButtonSizes.Small]: '36px',
-    },
-    defaultValue: '48px',
-  });
+	getValue({
+		type: options.size,
+		values: {
+			[ButtonSizes.Small]: '36px',
+		},
+		defaultValue: '48px',
+	});
 
 export const StyledButton = styled(Button, {
-  shouldForwardProp: (prop) =>
-    prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading',
+	shouldForwardProp: (prop) =>
+		prop !== 'startIcon' && prop !== 'endIcon' && prop !== 'loading',
 })`
   pointer-events: ${({ loading }) => loading && 'none'};
 

package/src/components/IconDropdownButton/IconDropdownButton.stories.tsx

@@ -6,6 +6,7 @@ import { IconButton } from '../IconButton';
 import { MenuItem } from '../MenuItem';
 
 import { EllipsisVertical, Pencil } from 'lucide-react';
+import React from 'react';
 import { IconDropdownButton } from './IconDropdownButton';
 
 const meta: Meta<typeof IconDropdownButton> = {

package/src/components/InternalErrorPlaceholder/InternalErrorPlaceholder.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react';
 
 import { ConfigProvider } from '../ConfigProvider';
 
+import React from 'react';
 import { InternalErrorPlaceholder } from './InternalErrorPlaceholder';
 
 const errorIllustration = '../../illustrations/error.svg';

package/src/components/Link/Link.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Typography } from '../Typography';
 
+import React from 'react';
 import { Link } from './Link';
 
 /**

package/src/components/List/List.stories.tsx

@@ -11,6 +11,7 @@ import { ListItemText } from '../ListItemText';
 import { ListSubheader } from '../ListSubheader';
 
 import { Dot, House } from 'lucide-react';
+import React from 'react';
 import { List } from './List';
 
 const meta: Meta<typeof List> = {

package/src/components/ListItem/ListItem.stories.tsx

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

package/src/components/ListItemButton/ListItemButton.stories.tsx

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

package/src/components/ListItemButton/ListItemButton.tsx

@@ -11,11 +11,8 @@ import type { WithoutEmotionSpecific } from '../types';
 export type ListItemButtonProps<
 	RootComponent extends
 		React.ElementType = ListItemButtonTypeMap['defaultComponent'],
-	AdditionalProps = object,
 > = Omit<
-	WithoutEmotionSpecific<
-		MuiListItemButtonProps<RootComponent, AdditionalProps>
-	>,
+	WithoutEmotionSpecific<MuiListItemButtonProps<RootComponent>>,
 	'disableRipple'
 > & {
 	tooltipPlacement?: TooltipProps['placement'];
@@ -34,11 +31,8 @@ export type ListItemButtonProps<
 	withoutContainer?: boolean;
 };
 
-export const ListItemButton = <
-	RootComponent extends React.ElementType,
-	AdditionalProps,
->(
-	props: ListItemButtonProps<RootComponent, AdditionalProps>,
+export const ListItemButton = <RootComponent extends React.ElementType>(
+	props: ListItemButtonProps<RootComponent>,
 ) => {
 	const {
 		disabledReason,

package/src/components/ListItemIcon/ListItemIcon.stories.tsx

@@ -4,6 +4,7 @@ import { List } from '../List';
 import { ListItemText } from '../ListItemText';
 
 import { House } from 'lucide-react';
+import React from 'react';
 import { ListItemButton } from '../ListItemButton';
 import { ListItemIcon } from './ListItemIcon';
 

package/src/components/ListItemText/ListItemText.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { List } from '../List';
 import { ListItem } from '../ListItem';
 
+import React from 'react';
 import { ListItemText } from './ListItemText';
 
 const meta: Meta<typeof ListItemText> = {

package/src/components/ListSubheader/ListSubheader.stories.tsx

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

package/src/components/Menu/Menu.stories.tsx

@@ -6,6 +6,7 @@ import { ListItemIcon } from '../ListItemIcon';
 import { MenuItem } from '../MenuItem';
 
 import { Building2, LogOut, Settings, User } from 'lucide-react';
+import React from 'react';
 import { Menu } from './Menu';
 
 const meta: Meta<typeof Menu> = {

package/src/components/MenuItem/MenuItem.stories.tsx

@@ -4,6 +4,7 @@ import { ListItemIcon } from '../ListItemIcon';
 import { MenuList } from '../MenuList';
 
 import { User } from 'lucide-react';
+import React from 'react';
 import { MenuItem, type MenuItemProps } from './MenuItem';
 
 const meta: Meta<typeof MenuItem> = {

package/src/components/MenuItem/MenuItem.tsx

@@ -10,8 +10,7 @@ import type { WithoutEmotionSpecific } from '../types';
 
 export type MenuItemProps<
 	RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
-	AdditionalProps = object,
-> = WithoutEmotionSpecific<MuiMenuItemProps<RootComponent, AdditionalProps>> & {
+> = WithoutEmotionSpecific<MuiMenuItemProps<RootComponent>> & {
 	/**
 	 * Текст тултипа при заблокированном состоянии элемента меню
 	 */

package/src/components/MenuList/MenuList.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { Divider } from '../Divider';
 import { ListItemIcon } from '../ListItemIcon';

package/src/components/MenuList/types.ts

@@ -1,11 +1,6 @@
-import type {
-	MenuListTypeMap,
-	MenuListProps as MuiMenuListProps,
-} from '@mui/material/MenuList';
+import type { MenuListProps as MuiMenuListProps } from '@mui/material/MenuList';
 
 import type { WithoutEmotionSpecific } from '../types';
 
-export type MenuListProps<
-	RootComponent extends React.ElementType = MenuListTypeMap['defaultComponent'],
-	AdditionalProps = object,
-> = WithoutEmotionSpecific<MuiMenuListProps<RootComponent, AdditionalProps>>;
+export type MenuListProps<RootComponent extends React.ElementType> =
+	WithoutEmotionSpecific<MuiMenuListProps<RootComponent>>;

package/src/components/NavMenu/Item/ItemButton/ItemButton.tsx

@@ -14,8 +14,7 @@ import {
 
 export type NavMenuItemButtonProps<
 	RootComponent extends ElementType = ElementType,
-	AdditionalProps = object,
-> = ListItemButtonProps<RootComponent, AdditionalProps> & {
+> = ListItemButtonProps<RootComponent> & {
 	opened?: boolean;
 	collapsedIn: boolean;
 	selected?: boolean;

package/src/components/NavMenu/NavMenu.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { OverflowTypography } from '../OverflowTypography';
 

package/src/components/OutdatedReleasePlaceholder/OutdatedReleasePlaceholder.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react';
+import React from 'react';
 
 import { ConfigProvider } from '../ConfigProvider';
 

package/src/components/OverflowTypography/OverflowTypography.stories.tsx

@@ -1,16 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { styled } from '@mui/material';
 import { OverflowTypography } from './OverflowTypography';
 
-/**
- * ##Мотивация
- * Вариация [Typography](/story/components-data-display-typography--docs) элемента, с автоматической проверкой на переполнение текстового контента, и если есть переполнение, то тогда добавляется кастомизируемая обертка ```Tooltip```.
- *
- * ### [Figma]()
- * ### [Guide]()
- */
-
 const meta: Meta<typeof OverflowTypography> = {
 	title: 'Components/Data Display/OverflowTypography',
 	component: OverflowTypography,

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { type ChangeEvent, useState } from 'react';
 
 import { Typography } from '../Typography';

package/src/components/Placeholder/Placeholder.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { Button } from '../Button';
 import { ConfigProvider } from '../ConfigProvider';

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,6 @@
 import { type PopoverOrigin, styled } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { type MouseEvent, useState } from 'react';
 
 import { Button } from '../Button';

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React from 'react';
+import { ProgressBar } from './ProgressBar';
+
+/**
+ * 
+Прогресс-бар — это индикатор, который отображает прогресс выполнения задачи.
+ */
+
+const meta: Meta<typeof ProgressBar> = {
+	title: 'Components/ProgressBar',
+	component: ProgressBar,
+};
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Interaction: Story = {
+	args: {
+		value: 33,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export default meta;
+
+export const Example = ({ value = 25 }) => <ProgressBar value={value} />;

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,26 @@
+import { LinearProgress as MuiLinearProgress } from '@mui/material';
+
+export type ProgressBarProps = {
+	/**
+	 * Текущий прогресс загрузки (от 0 до 100)
+	 * @example <ProgressBar value={25} />
+	 */
+	value: number;
+
+	/**
+	 * Название класса, применяется к корневому компоненту
+	 */
+	className?: string;
+};
+
+export const ProgressBar = ({ className, value }: ProgressBarProps) => {
+	const clampedValue = Math.max(0, Math.min(value, 100));
+
+	return (
+		<MuiLinearProgress
+			className={className}
+			variant='determinate'
+			value={clampedValue}
+		/>
+	);
+};

package/src/components/ProgressBar/index.ts

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

package/src/components/Radio/Icon/Icon.tsx

@@ -0,0 +1,37 @@
+import { SvgIcon } from '@mui/material';
+
+import { CHECKED_ICON_CLASSES, DEFAULT_ICON_CLASSES } from '../constants';
+
+export const DefaultIcon = ({ ...props }) => (
+	<SvgIcon viewBox='0 0 24 24' {...props}>
+		<circle
+			cx='12'
+			cy='12'
+			r='10'
+			className={DEFAULT_ICON_CLASSES.outerCircle}
+		/>
+		<circle
+			cx='12'
+			cy='12'
+			r='8'
+			className={DEFAULT_ICON_CLASSES.innerCircle}
+		/>
+	</SvgIcon>
+);
+
+export const CheckedCircleIcon = ({ ...props }) => (
+	<SvgIcon viewBox='0 0 24 24' {...props}>
+		<circle
+			cx='12'
+			cy='12'
+			r='10'
+			className={CHECKED_ICON_CLASSES.outerCircle}
+		/>
+		<circle
+			cx='12'
+			cy='12'
+			r='4'
+			className={CHECKED_ICON_CLASSES.innerCircle}
+		/>
+	</SvgIcon>
+);

package/src/components/Radio/Icon/index.ts

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

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import React from 'react';
+import { Radio } from './Radio';
+
+const meta: Meta<typeof Radio> = {
+	title: 'Components/Inputs/Radio',
+	component: Radio,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio>;
+
+export const Interaction: Story = {
+	args: {
+		checked: false,
+		disabled: false,
+		isError: false,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => <Radio />;
+
+export const Disabled = () => <Radio disabled />;
+
+export const WithError = () => <Radio isError />;

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,24 @@
+import type { RadioProps as MuiRadioProps } from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { CheckedCircleIcon, DefaultIcon } from './Icon';
+import { StyledRadio } from './styles';
+
+export type RadioProps = Omit<
+	WithoutEmotionSpecific<MuiRadioProps>,
+	'size' | 'color'
+> & {
+	/**
+	 * Флаг для применения error стилей.
+	 */
+	isError?: boolean;
+};
+
+export const Radio = ({
+	icon = <DefaultIcon />,
+	checkedIcon = <CheckedCircleIcon />,
+	...props
+}: RadioProps) => {
+	return <StyledRadio icon={icon} checkedIcon={checkedIcon} {...props} />;
+};

package/src/components/Radio/constants.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_ICON_CLASSES = {
+	innerCircle: 'RadioIcon-innerCircle',
+	outerCircle: 'RadioIcon-outerCircle',
+} as const;
+
+export const CHECKED_ICON_CLASSES = {
+	innerCircle: 'RadioCheckedIcon-innerCircle',
+	outerCircle: 'RadioCheckedIcon-outerCircle',
+} as const;

package/src/components/Radio/index.ts

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

package/src/components/Radio/styles.ts

@@ -0,0 +1,70 @@
+import { Radio, css, styled } from '@mui/material';
+
+import type { Theme } from '../../theme';
+import { CHECKED_ICON_CLASSES, DEFAULT_ICON_CLASSES } from './constants';
+
+type StyledRadioProps = {
+	isError?: boolean;
+};
+
+const getErrorStyles = (theme: Theme) => css`
+  &.MuiRadio-root:not(.Mui-disabled) {
+    color: ${theme.palette.red[800]};
+
+    &:hover {
+      & > svg {
+        color: ${theme.palette.red[700]};
+      }
+    }
+  }
+`;
+
+export const StyledRadio = styled(Radio, {
+	shouldForwardProp: (prop) => prop !== 'isError',
+})<StyledRadioProps>`
+  padding: 5px;
+
+  color: ${({ theme }) => theme.palette.grey[300]};
+
+  border-radius: unset;
+
+  & > svg > .${DEFAULT_ICON_CLASSES.innerCircle} {
+    fill: ${({ theme }) => theme.palette.common.white};
+  }
+
+  &:hover {
+    background: none;
+
+    & > svg > .${DEFAULT_ICON_CLASSES.innerCircle} {
+      fill: ${({ theme }) => theme.palette.grey[100]};
+    }
+  }
+
+  &.Mui-disabled:not(.Mui-checked) {
+    color: ${({ theme }) => theme.palette.grey[200]};
+
+    & > svg > .${DEFAULT_ICON_CLASSES.innerCircle} {
+      fill: ${({ theme }) => theme.palette.grey[200]};
+    }
+  }
+
+  &.Mui-checked {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    &:hover {
+      & > svg {
+        color: ${({ theme }) => theme.palette.primary[700]};
+      }
+    }
+
+    &.Mui-disabled {
+      color: ${({ theme }) => theme.palette.grey[400]};
+    }
+
+    & > svg > .${CHECKED_ICON_CLASSES.innerCircle} {
+      fill: ${({ theme }) => theme.palette.common.white};
+    }
+  }
+
+  ${({ isError, theme }) => isError && getErrorStyles(theme)}
+`;