feat(BoxDrawing): add new component

packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts

@@ -0,0 +1,13 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type BoxDrawingClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+export type BoxDrawingClassKey = keyof BoxDrawingClasses;
+
+export function getBoxDrawingUtilityClass(slot: string): string {
+  return generateUtilityClass('ESBoxDrawing', slot);
+}
+
+export const boxDrawingClasses: BoxDrawingClasses = generateUtilityClasses('ESBoxDrawing', ['root']);

packages/react/src/components/BoxDrawing/BoxDrawing.tsx

@@ -0,0 +1,64 @@
+import { BoxDrawingProps } from './BoxDrawing.types';
+
+import clsx from 'clsx';
+import { getBoxDrawingUtilityClass } from './BoxDrawing.classes';
+
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+
+import { useThemeProps } from '@mui/material/styles';
+import { styled } from '@mui/material';
+
+type BoxDrawingOwnerState = {
+  classes?: BoxDrawingProps['classes'];
+  bottomOffset?: BoxDrawingProps['bottomOffset'];
+};
+
+const useUtilityClasses = (ownerState: BoxDrawingOwnerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+
+  return composeClasses(slots, getBoxDrawingUtilityClass, classes);
+};
+
+const BoxDrawingRoot = styled('div', {
+  name: 'ESBoxDrawing',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    return [styles.root];
+  }
+})<{ ownerState: BoxDrawingOwnerState }>(({ ownerState: { bottomOffset }, theme }) => ({
+  position: 'absolute',
+  borderLeft: `1px dashed ${theme.vars.palette.monoA.A400}`,
+  borderBottom: `1px dashed ${theme.vars.palette.monoA.A400}`,
+  borderRadius: '0px 0px 0px 4px',
+  width: '7px',
+  height: `calc(100% - ${bottomOffset ?? '0'}px)`,
+  backgroundColor: 'transparent',
+  left: '20px',
+  top: 0
+}));
+
+export const BoxDrawing = (inProps: BoxDrawingProps) => {
+  const {
+    className,
+    classes: inClasses,
+    bottomOffset,
+    ...props
+  } = useThemeProps({
+    props: inProps,
+    name: 'ESBoxDrawing'
+  });
+
+  const ownerState = {
+    classes: inClasses,
+    bottomOffset
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return <BoxDrawingRoot className={clsx(classes.root, className)} ownerState={ownerState} {...props} />;
+};

packages/react/src/components/BoxDrawing/BoxDrawing.types.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { BoxDrawingClasses } from './BoxDrawing.classes';
+
+import { SxProps, Theme } from '@mui/material';
+
+export interface BoxDrawingProps {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<BoxDrawingClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Class applied to the root element. */
+  className?: string;
+
+  bottomOffset?: string;
+}

packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts

@@ -0,0 +1,13 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type BoxDrawingItemClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+export type BoxDrawingItemClassKey = keyof BoxDrawingItemClasses;
+
+export function getBoxDrawingItemUtilityClass(slot: string): string {
+  return generateUtilityClass('ESBoxDrawingItem', slot);
+}
+
+export const boxDrawingItemClasses: BoxDrawingItemClasses = generateUtilityClasses('ESBoxDrawingItem', ['root']);

packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx

@@ -0,0 +1,83 @@
+import { BoxDrawingItemProps } from './BoxDrawingItem.types';
+
+import clsx from 'clsx';
+import { getBoxDrawingItemUtilityClass } from './BoxDrawingItem.classes';
+
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+
+import { useThemeProps } from '@mui/material/styles';
+import { styled } from '@mui/material';
+
+type BoxDrawingItemOwnerState = {
+  classes?: BoxDrawingItemProps['classes'];
+  isLast?: BoxDrawingItemProps['isLast'];
+};
+
+const useUtilityClasses = (ownerState: BoxDrawingItemOwnerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root']
+  };
+
+  return composeClasses(slots, getBoxDrawingItemUtilityClass, classes);
+};
+
+const BoxDrawingItemRoot = styled('div', {
+  name: 'ESBoxDrawingItem',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState: { clickable }
+    } = props;
+
+    return [styles.root, clickable && styles.clickable];
+  }
+})<{ ownerState: BoxDrawingItemOwnerState }>(({ ownerState: { isLast }, theme }) => ({
+  position: 'absolute',
+
+  top: 'calc(50% - 1.5px)',
+  left: '27.5px',
+  width: '3px',
+  height: '3px',
+  borderRadius: '50%',
+  background: theme.vars.palette.monoA.A400,
+
+  '&::after': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    borderBottom: `1px dashed ${theme.vars.palette.monoA.A400}`,
+    width: '7px',
+    backgroundColor: 'transparent',
+    left: '-7.5px',
+    top: 'calc(50% - 0.5px)'
+  },
+
+  ...(isLast && {
+    '&::after': {
+      display: 'none'
+    }
+  })
+}));
+
+export const BoxDrawingItem = (inProps: BoxDrawingItemProps) => {
+  const {
+    className,
+    classes: inClasses,
+    isLast,
+    ...props
+  } = useThemeProps({
+    props: inProps,
+    name: 'ESBoxDrawingItem'
+  });
+
+  const ownerState = {
+    classes: inClasses,
+    isLast
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return <BoxDrawingItemRoot className={clsx(classes.root, className)} ownerState={ownerState} {...props} />;
+};

packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { BoxDrawingItemClasses } from './BoxDrawingItem.classes';
+
+import { SxProps, Theme } from '@mui/material';
+
+export interface BoxDrawingItemProps {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<BoxDrawingItemClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Class applied to the root element. */
+  className?: string;
+
+  isLast?: boolean;
+}

packages/react/src/components/BoxDrawing/BoxDrawingItem/index.ts

@@ -0,0 +1,3 @@
+export { BoxDrawingItem } from './BoxDrawingItem';
+export { BoxDrawingItemClasses, boxDrawingItemClasses, BoxDrawingItemClassKey } from './BoxDrawingItem.classes';
+export { BoxDrawingItemProps } from './BoxDrawingItem.types';

packages/react/src/components/BoxDrawing/index.ts

@@ -0,0 +1,3 @@
+export { BoxDrawing } from './BoxDrawing';
+export { BoxDrawingClasses, boxDrawingClasses, BoxDrawingClassKey } from './BoxDrawing.classes';
+export { BoxDrawingProps } from './BoxDrawing.types';

packages/react/src/components/Sidebar/Sidebar.stories.tsx

@@ -16,6 +16,8 @@ import { SidebarSpacer } from './SidebarSpacer';
 import { SidebarToggle } from './SidebarToggle';
 
 import { IconAccountLc, IconAt, IconBellFill, IconMagnify } from '../../icons';
+import { BoxDrawing } from '../BoxDrawing';
+import { BoxDrawingItem } from '../BoxDrawing/BoxDrawingItem';
 
 type Args = ComponentProps<typeof Sidebar> & { behaviour?: SidebarMenuProps['behaviour']; exclusive?: boolean };
 
@@ -138,10 +140,12 @@ export const Demo: Story = {
                 ))}
               </SidebarItem>
               <SidebarItem icon={<IconAt />} id="1" text={locale === 'en' ? 'Files' : 'Файлы'}>
+                <BoxDrawing bottomOffset="20" />
                 {[...Array(8)].map((_, i) => (
                   <SidebarItem
                     key={i}
                     inset
+                    icon={<BoxDrawingItem isLast={i === 7} />}
                     text={(locale === 'en' ? 'File' : 'Файл') + ' №' + i}
                     onClick={() => console.info(`File ${i}`)}
                   />

packages/react/src/components/Sidebar/SidebarItem/SidebarItem.tsx

@@ -224,6 +224,7 @@ const SidebarItemNestedMenu = styled('div', {
   flexDirection: 'column',
   gap: '2px',
   marginTop: '2px',
+  position: 'relative',
 
   [`& .${sidebarItemClasses.root}`]: {
     margin: '0'