@max-ts/components 0.0.2 → 0.1.0

package/src/components/Switch/styles.ts

@@ -0,0 +1,14 @@
+import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material';
+
+export const StyledSwitch = styled(MuiSwitch)`
+  .Mui-focusVisible {
+    border: 2px solid ${({ theme }) => theme.palette.primary[400]};
+  }
+  ${`.${switchClasses.track}`}::before {
+    display: none;
+  }
+
+  ${`.${switchClasses.track}`}::after {
+    display: none;
+  }
+`;

package/src/components/Tab/Tab.stories.tsx

@@ -0,0 +1,53 @@
+import { Stack } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type SyntheticEvent, useState } from 'react';
+
+import { Tabs } from '../Tabs';
+import { Typography } from '../Typography';
+
+import React from 'react';
+import { Tab } from './Tab';
+
+const meta: Meta<typeof Tab> = {
+	title: 'Components/Navigation/Tabs/Tab',
+	component: Tab,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tab>;
+
+export const Interaction: Story = {
+	args: {
+		label: 'Tab',
+	},
+	parameters: {
+		options: { showPanel: false },
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [value, setValue] = useState(0);
+
+	const handleChange = (_event: SyntheticEvent, newValue: number) => {
+		setValue(newValue);
+	};
+
+	return (
+		<Stack gap={4}>
+			<Stack gap={4}>
+				<Typography variant='h3'>Tab</Typography>
+				<Stack gap={1}>
+					<Tabs value={value} onChange={handleChange}>
+						<Tab label='Tab' />
+						<Tab label='Tab' />
+						<Tab label='Tab' disabled />
+					</Tabs>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+};

package/src/components/Tab/Tab.tsx

@@ -0,0 +1,20 @@
+import type { TabProps as MuiTabProps } from '@mui/material';
+import type { ElementType } from 'react';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { StyledTab } from './styles';
+
+export type TabProps<
+	TComponent extends ElementType,
+	TComponentProps = object,
+> = WithoutEmotionSpecific<MuiTabProps<TComponent, TComponentProps>> & {
+	component?: TComponent;
+};
+
+export const Tab = <
+	TComponent extends ElementType = 'div',
+	TComponentProps = object,
+>(
+	props: TabProps<TComponent, TComponentProps>,
+) => <StyledTab {...props} />;

package/src/components/Tab/index.ts

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

package/src/components/Tab/styles.ts

@@ -0,0 +1,22 @@
+import { Tab, styled } from '@mui/material';
+
+export const StyledTab = styled(Tab)`
+  min-height: 36px;
+  margin-right: ${({ theme }) => theme.spacing(4)};
+  padding: 0;
+
+  line-height: 20px;
+  color: ${({ theme }) => theme.palette.grey[900]};
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.primary[800]};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.palette.primary[900]};
+  }
+`;

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type SyntheticEvent, useState } from 'react';
+
+import { Tab } from '../Tab';
+
+import React from 'react';
+import { Tabs } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+	title: 'Components/Navigation/Tabs',
+	component: Tabs,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Interaction: Story = {
+	args: {
+		value: 0,
+		onChange: () => {},
+	},
+	parameters: {
+		options: { showPanel: false },
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => {
+	const [value, setValue] = useState(0);
+
+	const handleChange = (_event: SyntheticEvent, newValue: number) => {
+		setValue(newValue);
+	};
+
+	return (
+		<Tabs
+			nextFeatureFlags={{ hasBottomDivider: true }}
+			value={value}
+			onChange={handleChange}
+			centered
+		>
+			<Tab label='Вкладка 1' />
+			<Tab label='Вкладка 2' />
+			<Tab label='Вкладка 3' />
+			<Tab label='Вкладка 4' />
+			<Tab label='Вкладка 5' />
+			<Tab label='Вкладка 6' />
+		</Tabs>
+	);
+};
+
+export const TabDisabled = () => {
+	const [value, setValue] = useState(0);
+
+	const handleChange = (_event: SyntheticEvent, newValue: number) => {
+		setValue(newValue);
+	};
+
+	return (
+		<Tabs
+			nextFeatureFlags={{ hasBottomDivider: true }}
+			value={value}
+			onChange={handleChange}
+			centered
+		>
+			<Tab label='Вкладка 1' />
+			<Tab label='Вкладка 2' disabled />
+			<Tab label='Вкладка 3' disabled />
+		</Tabs>
+	);
+};

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,27 @@
+import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';
+
+import type { WithoutEmotionSpecific } from '../types';
+
+import { Container, Divider } from './styles';
+
+export type TabsProps = WithoutEmotionSpecific<MuiTabsProps> & {
+	nextFeatureFlags?: {
+		/**
+		 * @deprecated
+		 * Флаг включения нижнего разделителя
+		 * В мажорном релизе, флаг будет удален
+		 */
+		hasBottomDivider: boolean;
+	};
+};
+
+export const Tabs = ({ nextFeatureFlags, ...tabsProps }: TabsProps) => {
+	return nextFeatureFlags?.hasBottomDivider ? (
+		<Container>
+			<MuiTabs {...tabsProps} />
+			<Divider />
+		</Container>
+	) : (
+		<MuiTabs {...tabsProps} />
+	);
+};

package/src/components/Tabs/index.ts

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

package/src/components/Tabs/styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material';
+
+export const Container = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: 100%;
+`;
+
+export const Divider = styled('div')`
+  position: relative;
+  z-index: -1;
+  bottom: 2px;
+
+  width: 100%;
+  height: 2px;
+
+  background-color: ${(props) => props.theme.palette.grey[200]};
+`;

package/src/components/Tag/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import { Stack, styled, useMediaQuery, useTheme } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { ActionCell, type Actions } from '../ActionCell';
 import { DataGrid, type DataGridColumns, type DataGridSort } from '../DataGrid';

package/src/components/TagBadge/TagBadge.stories.tsx

@@ -3,13 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Tag } from '../Tag';
 
+import React from 'react';
 import { TagBadge } from '.';
 
-/**
- * ### [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=284-7165)
- * ### [Guide]()
- */
-
 const meta: Meta<typeof TagBadge> = {
 	title: 'Components/Data Display/TagBadge',
 	component: TagBadge,

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ChangeEvent, useState } from 'react';
+
+import React from 'react';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+	title: 'Components/Inputs/TextArea',
+	component: TextArea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const Interaction: Story = {
+	args: {
+		label: 'Комментарии',
+		helperText: 'Укажите любую доп. информацию',
+	},
+	parameters: {
+		docs: {
+			disable: true,
+		},
+	},
+};
+
+export const Example = () => (
+	<>
+		<TextArea label='Basic' />
+		<TextArea label='Disabled' disabled />
+	</>
+);
+
+export const Controlled = () => {
+	const [value, setValue] = useState('');
+
+	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+		setValue(event.target.value);
+	};
+
+	return (
+		<TextArea label='Доп. информация' value={value} onChange={handleChange} />
+	);
+};
+
+export const Statuses = () => (
+	<>
+		<TextArea
+			required
+			error
+			helperText='Обязательно'
+			label='Информация об абоненте'
+		/>
+		<TextArea
+			success
+			helperText='Удачно завершился процесс проверки ключа'
+			label='Электронный ключ'
+		/>
+	</>
+);
+
+export const Required = () => <TextArea required label='Доп. информация' />;
+
+export const FullWidth = () => <TextArea fullWidth label='Длинное поле' />;
+
+export const HelperText = () => (
+	<>
+		<TextArea helperText='Описание поле' label='Доп. информация' />
+		<TextArea error helperText='Описание ошибки поля' label='Доп. информация' />
+		<TextArea
+			success
+			helperText='Отображение success статуса'
+			label='Доп. информация'
+		/>
+	</>
+);
+
+export const Disabled = () => (
+	<TextArea disabled helperText='Поле не доступно' label='Доп. информация' />
+);

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+
+import { TextField } from '../TextField';
+import type { TextFieldProps } from '../TextField';
+
+export type TextAreaProps = Omit<TextFieldProps, 'multiline'>;
+
+export const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(
+	({ rows = 7, ...props }, ref) => {
+		return <TextField ref={ref} multiline rows={rows} {...props} />;
+	},
+);

package/src/components/TextArea/index.ts

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

package/src/components/TextField/TextField.stories.tsx

@@ -3,12 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { type ChangeEvent, useState } from 'react';
 
 import { Eye, Search } from 'lucide-react';
+import React from 'react';
 import { TextField } from './TextField';
 
-/**
- * ### [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=3211-52609&mode=design&t=lMvg1tmjfSIA2lhp-0)
- * ### [Guide]()
- */
 const meta: Meta<typeof TextField> = {
 	title: 'Components/Inputs/TextField',
 	component: TextField,

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -5,13 +5,10 @@ import { Button } from '../Button';
 import { Typography } from '../Typography';
 
 import { Info, Plus } from 'lucide-react';
+import React from 'react';
 import { Container } from '../Container';
 import { Tooltip } from './Tooltip';
 
-/**
- * ### [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=13972%3A156442&mode=design&t=LsGtMosbO9B0qzPe-1)
- * ### [Guide]()
- */
 const meta: Meta<typeof Tooltip> = {
 	title: 'Components/Data Display/Tooltip',
 	component: Tooltip,

package/src/components/Typography/Typography.stories.tsx

@@ -1,14 +1,12 @@
 import { styled } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react/*';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { Container } from '../Container';
 import { Paper } from '../Paper';
 import { Typography } from './Typography';
 
 /**
  * Весь текст должен задаваться через Typography.
- *
- * ### [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=1-347&mode=design&t=lMvg1tmjfSIA2lhp-0)
- * ### [Guide]()
  */
 const meta: Meta<typeof Typography> = {
 	title: 'Components/Data Display/Typography',

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useViewportType';
 export * from './useMenu';
 export * from './usePopover';
+export * from './useToggle';

package/src/hooks/useToggle/index.ts

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

package/src/hooks/useToggle/useToggle.ts

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+
+/**
+ * тип обозначающий какой угодно рест аргументов
+ */
+type Arguments = unknown[];
+
+/**
+ * хэндлер принимающий на вход неизвестное количество аргументов, неизвестного вида
+ */
+type Handler<Args extends Arguments> = (...a: Args) => void;
+/**
+ * хэндлер на открытие с неизвестным количеством аргументов, неизвестного вида
+ */
+type OpenHandler<Args extends Arguments> = Handler<Args>;
+/**
+ * хэндлер на закрытие с неизвестным количеством аргументов, неизвестного вида
+ */
+type CloseHandler<Args extends Arguments> = Handler<Args>;
+
+type UseToggleResultTuple<
+	CloseArgs extends Arguments,
+	OpenArgs extends Arguments,
+> = [
+	/**
+	 * флаг активности состояния
+	 */
+	boolean,
+	OpenHandler<OpenArgs>,
+	CloseHandler<CloseArgs>,
+];
+
+type UseToggleOptions<
+	CloseArgs extends Arguments,
+	OpenArgs extends Arguments,
+> = {
+	/**
+	 * изначальное состояние активности
+	 */
+	initialState?: boolean;
+	/**
+	 * коллбэк на открытие
+	 */
+	onActive?: OpenHandler<OpenArgs>;
+	/**
+	 * коллбэк на закрытие
+	 */
+	onInactive?: CloseHandler<CloseArgs>;
+};
+
+/**
+ * хук хранящий стейт активности, и предоставляющий методы переключения с проксируемыми аргументами, позволяет уменьшить бойлерплейт код
+ */
+export const useToggle = <
+	CloseArgs extends Arguments,
+	OpenArgs extends Arguments,
+>(
+	params?: UseToggleOptions<CloseArgs, OpenArgs>,
+): UseToggleResultTuple<CloseArgs, OpenArgs> => {
+	const { initialState = false, onInactive, onActive } = params || {};
+	const [isActive, setActive] = useState(initialState);
+
+	// выставляем флаг активности в true, и проксируем все принятые аргументы
+	const handleActive: OpenHandler<OpenArgs> = (...args) => {
+		setActive(true);
+		onActive?.(...args);
+	};
+
+	// выставляем флаг активности в false, и проксируем все принятые аргументы
+	const handleInactive: CloseHandler<CloseArgs> = (...args) => {
+		setActive(false);
+		onInactive?.(...args);
+	};
+
+	return [isActive, handleActive, handleInactive];
+};

package/test.tsx

@@ -0,0 +1 @@
+import { Select } from './dist';

package/tsconfig.json

@@ -1,7 +1,8 @@
 {
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"outDir": "./dist"
+		"outDir": "./dist",
+		"isolatedModules": true
 	},
 	"include": ["src"],
 	"exclude": [
@@ -11,5 +12,5 @@
 		"./**/*.test.tsx",
 		"./**/*.test.ts",
 		"./**/*.stories.tsx"
-	]
+	],
 }