@max-ts/components 0.0.2

package/src/components/ListItemButton/ListItemButton.tsx

@@ -0,0 +1,74 @@
+import {
+	type ListItemButtonTypeMap,
+	ListItemButton as MuiListItemButton,
+	type ListItemButtonProps as MuiListItemButtonProps,
+} from '@mui/material';
+import type { ElementType } from 'react';
+
+import { Tooltip, type TooltipProps } from '../Tooltip';
+import type { WithoutEmotionSpecific } from '../types';
+
+export type ListItemButtonProps<
+	RootComponent extends
+		React.ElementType = ListItemButtonTypeMap['defaultComponent'],
+	AdditionalProps = object,
+> = Omit<
+	WithoutEmotionSpecific<
+		MuiListItemButtonProps<RootComponent, AdditionalProps>
+	>,
+	'disableRipple'
+> & {
+	tooltipPlacement?: TooltipProps['placement'];
+	/**
+	 * Текст тултипа при заблокированном состоянии элемента меню
+	 */
+	disabledReason?: string;
+	/**
+	 * Текст тултипа при наведении на элемент меню
+	 */
+	note?: string;
+	component?: ElementType;
+	/**
+	 * withoutContainer необходим для обратной совместимости и рендерит компонент без тега li
+	 */
+	withoutContainer?: boolean;
+};
+
+export const ListItemButton = <
+	RootComponent extends React.ElementType,
+	AdditionalProps,
+>(
+	props: ListItemButtonProps<RootComponent, AdditionalProps>,
+) => {
+	const {
+		disabledReason,
+		disabled,
+		tooltipPlacement,
+		note,
+		withoutContainer = false,
+		...restProps
+	} = props;
+
+	const renderListItemButton = () => {
+		return (
+			<Tooltip
+				title={disabled ? disabledReason : note}
+				placement={tooltipPlacement}
+				withoutContainer={!disabled}
+			>
+				<MuiListItemButton
+					disabled={disabled}
+					component='div'
+					{...restProps}
+					disableRipple
+				/>
+			</Tooltip>
+		);
+	};
+
+	if (withoutContainer) {
+		return renderListItemButton();
+	}
+
+	return <li>{renderListItemButton()}</li>;
+};

package/src/components/ListItemButton/constants.ts

@@ -0,0 +1,5 @@
+export enum ListItemButtonStates {
+	DEFAULT = 'default',
+	HOVER = 'hover',
+	SELECTED = 'selected',
+}

package/src/components/ListItemButton/index.ts

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

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { List } from '../List';
+import { ListItemText } from '../ListItemText';
+
+import { House } from 'lucide-react';
+import { ListItemButton } from '../ListItemButton';
+import { ListItemIcon } from './ListItemIcon';
+
+const meta: Meta<typeof ListItemIcon> = {
+	title: 'Components/Data Display/List/ListItemIcon',
+	component: ListItemIcon,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItemIcon>;
+
+export const Interaction: Story = {
+	args: {
+		children: <House />,
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return (
+		<List>
+			<ListItemButton selected={true}>
+				<ListItemIcon>
+					<House />
+				</ListItemIcon>
+				<ListItemText primary='Drafts' />
+			</ListItemButton>
+		</List>
+	);
+};

package/src/components/ListItemIcon/ListItemIcon.tsx

@@ -0,0 +1,14 @@
+import type { ListItemIconProps as MuiListItemIconProps } from '@mui/material';
+import { forwardRef } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { StyledListItemIcon } from './styles';
+
+type ListItemIconProps = WithoutEmotionSpecific<MuiListItemIconProps>;
+
+export const ListItemIcon = forwardRef<HTMLLIElement, ListItemIconProps>(
+	(props, ref) => {
+		return <StyledListItemIcon ref={ref} {...props} />;
+	},
+);

package/src/components/ListItemIcon/index.ts

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

package/src/components/ListItemIcon/styles.ts

@@ -0,0 +1,5 @@
+import { ListItemIcon, styled } from '@mui/material';
+
+export const StyledListItemIcon = styled(ListItemIcon)`
+  color: inherit;
+`;

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { List } from '../List';
+import { ListItem } from '../ListItem';
+
+import { ListItemText } from './ListItemText';
+
+const meta: Meta<typeof ListItemText> = {
+	title: 'Components/Data Display/List/ListItemText',
+	component: ListItemText,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItemText>;
+
+export const Interaction: Story = {
+	args: {
+		primary: 'Text',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return (
+		<List>
+			<ListItem>
+				<ListItemText primary='Drafts' />
+			</ListItem>
+			<ListItem>
+				<ListItemText primary='Inbox' />
+			</ListItem>
+		</List>
+	);
+};

package/src/components/ListItemText/ListItemText.tsx

@@ -0,0 +1,11 @@
+import MuiListItemText, {
+	type ListItemTextProps as MuiListItemTextProps,
+} from '@mui/material/ListItemText';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+export type ListItemTextProps = WithoutEmotionSpecific<MuiListItemTextProps>;
+
+export const ListItemText = (props: ListItemTextProps) => {
+	return <MuiListItemText {...props} />;
+};

package/src/components/ListItemText/index.ts

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

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { List } from '../List';
+import { ListItem } from '../ListItem';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+
+import { House } from 'lucide-react';
+import { ListSubheader } from './ListSubheader';
+
+const meta: Meta<typeof ListSubheader> = {
+	title: 'Components/Data Display/List/ListSubheader',
+	component: ListSubheader,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListSubheader>;
+
+export const Interaction: Story = {
+	args: {
+		children: 'Subheader',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return (
+		<List subheader={<ListSubheader>Subheader</ListSubheader>}>
+			<ListItem>
+				<ListItemIcon>
+					<House />
+				</ListItemIcon>
+				<ListItemText primary='Drafts' />
+			</ListItem>
+		</List>
+	);
+};

package/src/components/ListSubheader/ListSubheader.tsx

@@ -0,0 +1,12 @@
+import {
+	ListSubheader as MuiListSubheader,
+	type ListSubheaderProps as MuiListSubheaderProps,
+} from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+export type ListSubheaderProps = WithoutEmotionSpecific<MuiListSubheaderProps>;
+
+export const ListSubheader = (props: ListSubheaderProps) => (
+	<MuiListSubheader {...props} />
+);

package/src/components/ListSubheader/index.ts

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

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type MouseEvent, useCallback, useMemo, useState } from 'react';
+
+import { Button } from '../Button';
+import { ListItemIcon } from '../ListItemIcon';
+import { MenuItem } from '../MenuItem';
+
+import { Building2, LogOut, Settings, User } from 'lucide-react';
+import { Menu } from './Menu';
+
+const meta: Meta<typeof Menu> = {
+	title: 'Components/Navigation/Menu',
+	component: Menu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Menu>;
+
+export const Interaction: Story = {
+	args: {
+		title: 'Menu',
+		open: true,
+		children: [
+			<MenuItem key={1}>
+				<ListItemIcon>
+					<Settings />
+				</ListItemIcon>
+				Item 1
+			</MenuItem>,
+			<MenuItem key={2}>
+				<ListItemIcon>
+					<Building2 />
+				</ListItemIcon>
+				Item 2
+			</MenuItem>,
+			<MenuItem key={3}>
+				<ListItemIcon>
+					<Settings />
+				</ListItemIcon>
+				Item 3
+			</MenuItem>,
+			<MenuItem key={4}>
+				<ListItemIcon>
+					<Settings />
+				</ListItemIcon>
+				Item 4
+			</MenuItem>,
+		],
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+
+	const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	}, []);
+
+	const handleClose = useCallback(() => {
+		setAnchorEl(null);
+	}, []);
+
+	return (
+		<>
+			<Button variant='text' onClick={handleClick}>
+				Profile
+			</Button>
+			<Menu
+				title='Profile'
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+			>
+				<MenuItem onClick={handleClose}>
+					<ListItemIcon>
+						<User />
+					</ListItemIcon>
+					Мой профиль
+				</MenuItem>
+				<MenuItem onClick={handleClose}>
+					<ListItemIcon>
+						<Building2 />
+					</ListItemIcon>
+					Мои организации
+				</MenuItem>
+				<MenuItem divider onClick={handleClose}>
+					<ListItemIcon>
+						<Settings />
+					</ListItemIcon>
+					Настройки
+				</MenuItem>
+				<MenuItem onClick={handleClose}>
+					<ListItemIcon>
+						<LogOut />
+					</ListItemIcon>
+					Выйти
+				</MenuItem>
+			</Menu>
+		</>
+	);
+};

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,38 @@
+import { Menu as MuiMenu, type MenuProps as MuiMenuProps } from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { useViewportType } from '../../hooks';
+import { BottomDrawer } from '../BottomDrawer';
+import { MenuList } from '../MenuList';
+
+export type MenuProps = WithoutEmotionSpecific<MuiMenuProps> & {
+	/**
+	 * Заголовок для отображения в мобильной версии
+	 */
+	title?: string;
+};
+
+export const Menu = ({
+	children,
+	onClose,
+	open,
+	title,
+	...restProps
+}: MenuProps) => {
+	const { isMobile } = useViewportType();
+
+	if (isMobile) {
+		return (
+			<BottomDrawer title={title} onClose={onClose} open={open}>
+				<MenuList>{children}</MenuList>
+			</BottomDrawer>
+		);
+	}
+
+	return (
+		<MuiMenu open={open} onClose={onClose} {...restProps}>
+			{children}
+		</MuiMenu>
+	);
+};

package/src/components/Menu/index.ts

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

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

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ListItemIcon } from '../ListItemIcon';
+import { MenuList } from '../MenuList';
+
+import { User } from 'lucide-react';
+import { MenuItem, type MenuItemProps } from './MenuItem';
+
+const meta: Meta<typeof MenuItem> = {
+	title: 'Components/Navigation/Menu/MenuItem',
+	component: MenuItem,
+};
+
+export default meta;
+
+type Story = StoryObj<MenuItemProps>;
+
+export const Interaction: Story = {
+	args: {
+		selected: true,
+		children: 'Menu Item',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return (
+		<MenuList>
+			<MenuItem>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Мой профиль
+			</MenuItem>
+			<MenuItem>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Выход
+			</MenuItem>
+		</MenuList>
+	);
+};
+
+/**
+ * prop ```note``` выводит Tooltip на не заблокированном элементе меню
+ */
+export const Note = () => {
+	return (
+		<MenuList>
+			<MenuItem note='Перейти в профиль'>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Мой профиль
+			</MenuItem>
+			<MenuItem>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Выход
+			</MenuItem>
+		</MenuList>
+	);
+};
+
+export const Selected = () => {
+	return (
+		<MenuList>
+			<MenuItem selected>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Мой профиль
+			</MenuItem>
+			<MenuItem>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Выход
+			</MenuItem>
+		</MenuList>
+	);
+};
+
+export const Disabled = () => {
+	return (
+		<MenuList>
+			<MenuItem
+				disabled
+				disabledReason='Действие недоступно. Попробуйте позднее'
+			>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Мой профиль
+			</MenuItem>
+			<MenuItem>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				Выход
+			</MenuItem>
+		</MenuList>
+	);
+};

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,68 @@
+import {
+	type MenuItemTypeMap,
+	MenuItem as MuiMenuItem,
+	type MenuItemProps as MuiMenuItemProps,
+} from '@mui/material';
+import type { ElementType } from 'react';
+
+import { Tooltip, type TooltipProps } from '../Tooltip';
+import type { WithoutEmotionSpecific } from '../types';
+
+export type MenuItemProps<
+	RootComponent extends React.ElementType = MenuItemTypeMap['defaultComponent'],
+	AdditionalProps = object,
+> = WithoutEmotionSpecific<MuiMenuItemProps<RootComponent, AdditionalProps>> & {
+	/**
+	 * Текст тултипа при заблокированном состоянии элемента меню
+	 */
+	disabledReason?: string;
+	/**
+	 * Текст тултипа при наведении на элемент меню
+	 */
+	note?: string;
+	/**
+	 * Позиционирование тултипа
+	 * @default left
+	 */
+	tooltipPlacement?: TooltipProps['placement'];
+	/**
+	 * Тип элемента
+	 */
+	component?: RootComponent;
+	/**
+	 * Ссылка, если в component передан тег a.
+	 */
+	href?: string;
+};
+
+export const MenuItem = <TComponent extends ElementType>(
+	props: MenuItemProps<TComponent>,
+) => {
+	const {
+		disabledReason,
+		disabled,
+		component = 'div',
+		title,
+		tooltipPlacement = 'left',
+		note,
+		...rest
+	} = props;
+
+	return (
+		<li>
+			<Tooltip
+				key={title}
+				title={disabled ? disabledReason : note}
+				placement={tooltipPlacement}
+				withoutContainer={!disabled}
+			>
+				<MuiMenuItem
+					{...rest}
+					disabled={disabled}
+					title={title}
+					component={component}
+				/>
+			</Tooltip>
+		</li>
+	);
+};

package/src/components/MenuItem/index.ts

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

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

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Divider } from '../Divider';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+
+import { Building2, LogOut, Settings, User } from 'lucide-react';
+import { MenuItem } from '../MenuItem';
+import { MenuList } from './MenuList';
+
+const meta: Meta<typeof MenuList> = {
+	title: 'Components/MenuList',
+	component: MenuList,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MenuList>;
+
+export const Interaction: Story = {
+	args: {
+		children: [
+			<MenuItem key={1}>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				<ListItemText>item 1</ListItemText>
+			</MenuItem>,
+			<MenuItem key={2}>
+				<ListItemIcon>
+					<Building2 />
+				</ListItemIcon>
+				<ListItemText>item 2</ListItemText>
+			</MenuItem>,
+			<MenuItem key={3}>
+				<ListItemIcon>
+					<Settings />
+				</ListItemIcon>
+				<ListItemText>item 3</ListItemText>
+			</MenuItem>,
+			<MenuItem key={4}>
+				<ListItemIcon>
+					<LogOut />
+				</ListItemIcon>
+				<ListItemText>item 4</ListItemText>
+			</MenuItem>,
+		],
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	return (
+		<MenuList>
+			<MenuItem>
+				<ListItemIcon>
+					<User />
+				</ListItemIcon>
+				<ListItemText>Мой профиль</ListItemText>
+			</MenuItem>
+			<MenuItem>
+				<ListItemIcon>
+					<Building2 />
+				</ListItemIcon>
+				<ListItemText>Мои организации</ListItemText>
+			</MenuItem>
+			<MenuItem>
+				<ListItemIcon>
+					<Settings />
+				</ListItemIcon>
+				<ListItemText>Настройки</ListItemText>
+			</MenuItem>
+			<Divider />
+			<MenuItem>
+				<ListItemIcon>
+					<LogOut />
+				</ListItemIcon>
+				<ListItemText>Выйти</ListItemText>
+			</MenuItem>
+		</MenuList>
+	);
+};

package/src/components/MenuList/MenuList.tsx

@@ -0,0 +1,6 @@
+import { StyledMenuList } from './styles';
+import type { MenuListProps } from './types';
+
+export const MenuList = ({ children, ...props }: MenuListProps<'ul'>) => {
+	return <StyledMenuList {...props}>{children}</StyledMenuList>;
+};

package/src/components/MenuList/index.ts

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