@max-ts/components 0.0.2

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '../Typography';
+
+import { Link } from './Link';
+
+/**
+ * Link - универсальная ссылка.
+ *
+ * ### [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=20577%3A252079&mode=design&t=4tPFQ3yp7yhE0vZX-1)
+ * ### [Guide]()
+ */
+const meta: Meta<typeof Link> = {
+	title: 'Components/Link',
+	component: Link,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Interaction: Story = {
+	args: {
+		children: 'Link',
+		href: '#',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+		controls: {
+			expanded: true,
+		},
+		options: {
+			showPanel: true,
+		},
+	},
+};
+
+export const Example = () => (
+	<>
+		<Typography>
+			Для начала работы необходимо:
+			<br />
+			<ul>
+				<li>
+					Подключить{' '}
+					<Link href='#1' withAdornment='start'>
+						Telegram
+					</Link>
+				</li>
+				<li>
+					Выпустить сертификат <Link href='#2'>УНЭП</Link>
+				</li>
+				<li>
+					<Link href='/'>Госключ</Link> для подписания документов
+				</li>
+			</ul>
+		</Typography>
+	</>
+);
+
+export const Adornment = () => (
+	<>
+		<Link href='#1' withAdornment='start'>
+			Icon-start
+		</Link>
+
+		<Link href='#2' withAdornment='end'>
+			Icon-end
+		</Link>
+	</>
+);
+
+/**
+ * Prop ```isDownload``` добавляет атрибут `download` ссылке и иконку скачивания
+ */
+export const Download = () => (
+	<>
+		<Link href='Принять_оферту.pdf' isDownload withAdornment='start'>
+			Принять оферту
+		</Link>
+
+		<Link href='Принять_оферту.pdf' isDownload withAdornment='end'>
+			Принять оферту
+		</Link>
+	</>
+);

package/src/components/Link/Link.tsx

@@ -0,0 +1,44 @@
+import type { LinkProps as MuiLinkProps } from '@mui/material';
+import { forwardRef } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { ArrowDownToLine, SquareArrowOutUpRight } from 'lucide-react';
+import { StyledLink } from './styles';
+
+export type LinkProps = Pick<
+	WithoutEmotionSpecific<MuiLinkProps>,
+	| 'rel'
+	| 'href'
+	| 'className'
+	| 'classes'
+	| 'style'
+	| 'children'
+	| 'key'
+	| 'target'
+> & {
+	/**
+	 * Добавление иконки
+	 */
+	withAdornment?: 'start' | 'end';
+	/**
+	 * Указывает что ссылка для скачивания файла
+	 * добавляет атрибут 'download' тегу 'a'
+	 */
+	isDownload?: boolean;
+};
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+	({ withAdornment, isDownload, children, ...props }, ref) => {
+		const icon = isDownload ? <ArrowDownToLine /> : <SquareArrowOutUpRight />;
+
+		return (
+			<StyledLink download={isDownload} ref={ref} {...props}>
+				{withAdornment === 'start' && icon}
+				{children}
+				{withAdornment === 'end' && icon}
+				{!withAdornment && isDownload && <ArrowDownToLine />}
+			</StyledLink>
+		);
+	},
+);

package/src/components/Link/index.ts

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

package/src/components/Link/styles.ts

@@ -0,0 +1,37 @@
+import { Link, styled, svgIconClasses } from '@mui/material';
+
+export const StyledLink = styled(Link)`
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: baseline;
+  justify-content: flex-start;
+
+  font-size: ${({ theme }) => theme.typography.fontSize}px;
+  color: ${({ theme }) => theme.palette.components.link.main};
+  text-decoration: none;
+
+  &:active {
+    color: ${({ theme }) => theme.palette.components.link.active};
+  }
+
+  &:visited {
+    color: ${({ theme }) => theme.palette.components.link.visited};
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.components.link.hover};
+    text-decoration: underline;
+  }
+
+  &:focus {
+    border-radius: 4px;
+    outline: 2px solid ${({ theme }) => theme.palette.primary[400]};
+  }
+
+  .${svgIconClasses.root} {
+    align-self: center;
+
+    width: 16px;
+    height: 16px;
+  }
+`;

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

@@ -0,0 +1,254 @@
+import { Link } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Chevron } from '../Chevron';
+import { Collapse } from '../Collapse';
+import { IconButton } from '../IconButton';
+import { ListItemButton } from '../ListItemButton';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+import { ListSubheader } from '../ListSubheader';
+
+import { Dot, House } from 'lucide-react';
+import { List } from './List';
+
+const meta: Meta<typeof List> = {
+	title: 'Components/Data Display/List',
+	component: List,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof List>;
+
+export const Interaction: Story = {
+	args: {
+		children: (
+			<>
+				<ListItemButton>Item 1</ListItemButton>{' '}
+				<ListItemButton>Item 2</ListItemButton>
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [open, setOpen] = useState(true);
+	const [selectedItem, setSelectedItem] = useState<null | number>(null);
+	const [listOpen, setListOpen] = useState(true);
+
+	const handleListCollapse = () => {
+		setListOpen(!listOpen);
+	};
+
+	const handleClick = () => {
+		setOpen(!open);
+	};
+
+	return (
+		<>
+			<List
+				subheader={
+					<ListSubheader>Список ссылок (ListItemButton) </ListSubheader>
+				}
+			>
+				<ListItemButton
+					selected={selectedItem === 0}
+					component={Link}
+					href='/'
+					onClick={() => {
+						setSelectedItem(0);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Главная ( ссылка )</ListItemText>
+				</ListItemButton>
+				<ListItemButton
+					selected={selectedItem === 1}
+					component={Link}
+					href='/'
+					onClick={() => {
+						setSelectedItem(1);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Главная ( ссылка )</ListItemText>
+				</ListItemButton>
+
+				<ListItemButton
+					selected={selectedItem === 2}
+					component={Link}
+					href='https://www.yandex.com/'
+					onClick={() => {
+						setSelectedItem(2);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Яндекс</ListItemText>
+				</ListItemButton>
+			</List>
+			<List
+				subheader={
+					<ListSubheader>Список Кнопок (ListItemButton) </ListSubheader>
+				}
+			>
+				<ListItemButton
+					selected={selectedItem === 11}
+					onClick={() => {
+						setSelectedItem(11);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Главная </ListItemText>
+				</ListItemButton>
+				<ListItemButton
+					selected={selectedItem === 12}
+					onClick={() => {
+						setSelectedItem(12);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Главная </ListItemText>
+				</ListItemButton>
+				<ListItemButton
+					selected={selectedItem === 13}
+					onClick={() => {
+						setSelectedItem(13);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Яндекс</ListItemText>
+				</ListItemButton>
+			</List>
+			<List
+				subheader={
+					<ListSubheader>
+						Выпадающий список с активными элементами
+					</ListSubheader>
+				}
+			>
+				<ListItemButton onClick={handleClick}>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Транспорт</ListItemText>
+					<Chevron isActive={open} />
+				</ListItemButton>
+				<Collapse in={open} orientation='vertical'>
+					<List disablePadding>
+						<ListItemButton
+							selected={selectedItem === 3}
+							onClick={() => {
+								setSelectedItem(3);
+							}}
+						>
+							<ListItemIcon>
+								<Dot />
+							</ListItemIcon>
+							<ListItemText>Машины</ListItemText>
+						</ListItemButton>
+						<ListItemButton
+							selected={selectedItem === 4}
+							onClick={() => {
+								setSelectedItem(4);
+							}}
+						>
+							<ListItemIcon>
+								<Dot />
+							</ListItemIcon>
+							<ListItemText>Велосипеды</ListItemText>
+						</ListItemButton>
+						<ListItemButton
+							selected={selectedItem === 5}
+							onClick={() => {
+								setSelectedItem(5);
+							}}
+						>
+							<ListItemIcon>
+								<Dot />
+							</ListItemIcon>
+							<ListItemText>Мотоциклы</ListItemText>
+						</ListItemButton>
+					</List>
+				</Collapse>
+			</List>
+			<List
+				subheader={
+					<ListSubheader
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+						}}
+					>
+						Сворачиваемый список
+						<IconButton
+							variant='text'
+							onClick={handleListCollapse}
+							style={{ transform: 'rotate(270deg)' }}
+						>
+							<Chevron isActive={listOpen} />
+						</IconButton>
+					</ListSubheader>
+				}
+			>
+				<Collapse in={listOpen} orientation='horizontal' collapsedSize={56}>
+					<List disablePadding>
+						<ListItemButton
+							selected={selectedItem === 11}
+							onClick={() => {
+								setSelectedItem(11);
+							}}
+						>
+							<ListItemIcon>
+								<House />
+							</ListItemIcon>
+							<ListItemText>Главная</ListItemText>
+						</ListItemButton>
+						<ListItemButton
+							selected={selectedItem === 12}
+							onClick={() => {
+								setSelectedItem(12);
+							}}
+						>
+							<ListItemIcon>
+								<House />
+							</ListItemIcon>
+							<ListItemText>
+								Главная новая страница для определенно ненужного сайта
+							</ListItemText>
+						</ListItemButton>
+						<ListItemButton
+							selected={selectedItem === 13}
+							onClick={() => {
+								setSelectedItem(13);
+							}}
+						>
+							<ListItemIcon>
+								<House />
+							</ListItemIcon>
+							<ListItemText>Яндекс</ListItemText>
+						</ListItemButton>
+					</List>
+				</Collapse>
+			</List>
+		</>
+	);
+};

package/src/components/List/List.tsx

@@ -0,0 +1,9 @@
+import MuiList, { type ListProps as MuiListProps } from '@mui/material/List';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+export type ListProps = WithoutEmotionSpecific<MuiListProps>;
+
+export const List = (props: ListProps) => {
+	return <MuiList {...props} />;
+};

package/src/components/List/index.ts

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

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

@@ -0,0 +1,84 @@
+import { Link } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { List } from '../List';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+import { ListSubheader } from '../ListSubheader';
+
+import { House } from 'lucide-react';
+import { ListItem } from './ListItem';
+
+const meta: Meta<typeof ListItem> = {
+	title: 'Components/Data Display/List/ListItem',
+	component: ListItem,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItem>;
+
+export const Interaction: Story = {
+	args: {
+		children: 'Item',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [selectedItem, setSelectedItem] = useState<null | number>(null);
+
+	return (
+		<>
+			<List
+				subheader={<ListSubheader>Список ссылок (ListItem) </ListSubheader>}
+			>
+				<Link href='/'>
+					<ListItem>
+						<ListItemIcon>
+							<House />
+						</ListItemIcon>
+						<ListItemText>Ссылка 1</ListItemText>
+					</ListItem>
+				</Link>
+				<Link href='/'>
+					<ListItem>
+						<ListItemIcon>
+							<House />
+						</ListItemIcon>
+						<ListItemText>Ссылка 2</ListItemText>
+					</ListItem>
+				</Link>
+			</List>
+			<List
+				subheader={<ListSubheader>Список не ссылок (ListItem) </ListSubheader>}
+			>
+				<ListItem
+					onClick={() => {
+						setSelectedItem(0);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Автомобиль</ListItemText>
+				</ListItem>
+				<ListItem
+					onClick={() => {
+						setSelectedItem(1);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Велосипед</ListItemText>
+				</ListItem>
+			</List>
+		</>
+	);
+};

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,12 @@
+import {
+	ListItem as MuiListItem,
+	type ListItemProps as MuiListItemProps,
+} from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+export type ListItemProps = WithoutEmotionSpecific<MuiListItemProps>;
+
+export const ListItem = (props: ListItemProps) => {
+	return <MuiListItem {...props} />;
+};

package/src/components/ListItem/index.ts

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

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Chevron } from '../Chevron';
+import { Collapse } from '../Collapse';
+import { List } from '../List';
+import { ListItem } from '../ListItem';
+import { ListItemIcon } from '../ListItemIcon';
+import { ListItemText } from '../ListItemText';
+import { ListSubheader } from '../ListSubheader';
+
+import { House } from 'lucide-react';
+import { ListItemButton } from './ListItemButton';
+
+const meta: Meta<typeof ListItemButton> = {
+	title: 'Components/Data Display/List/ListItemButton',
+	component: ListItemButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItemButton>;
+
+export const Interaction: Story = {
+	args: {
+		children: 'Button',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [open, setOpen] = useState(true);
+	const [selectedItem, setSelectedItem] = useState<null | number>(null);
+
+	const handleClick = () => {
+		setOpen(!open);
+	};
+
+	return (
+		<>
+			<List
+				subheader={
+					<ListSubheader>Компонент Списка Кнопки selectable</ListSubheader>
+				}
+			>
+				<ListItemButton
+					selected={selectedItem === 0}
+					onClick={() => {
+						setSelectedItem(0);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Главная </ListItemText>
+				</ListItemButton>
+				<ListItemButton
+					selected={selectedItem === 1}
+					onClick={() => {
+						setSelectedItem(1);
+					}}
+				>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Яндекс</ListItemText>
+				</ListItemButton>
+			</List>
+			<List
+				subheader={
+					<ListSubheader>
+						Компонент Списка ListItemButton + Collapse
+					</ListSubheader>
+				}
+			>
+				<ListItemButton onClick={handleClick}>
+					<ListItemIcon>
+						<House />
+					</ListItemIcon>
+					<ListItemText>Транспорт</ListItemText>
+					<Chevron isActive={open} />
+				</ListItemButton>
+				<Collapse in={open}>
+					<List>
+						<ListItem>
+							<ListItemIcon>
+								<House />
+							</ListItemIcon>
+							<ListItemText>Машины</ListItemText>
+						</ListItem>
+						<ListItemButton selected>
+							<ListItemIcon>
+								<House />
+							</ListItemIcon>
+							<ListItemText>Велосипеды ( selected )</ListItemText>
+						</ListItemButton>
+						<ListItemButton>
+							<ListItemIcon>
+								<House />
+							</ListItemIcon>
+							<ListItemText>Мотоциклы</ListItemText>
+						</ListItemButton>
+					</List>
+				</Collapse>
+			</List>
+		</>
+	);
+};