@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -0,0 +1,84 @@
+import {
+  AccordionGroupContextProvider,
+  AccordionGroup,
+  Accordion,
+  Wrapper,
+  AccordionTitle,
+} from '@ssa-ui-kit/core';
+import CollapsibleNavBarItem from './CollapsibleNavBarItem';
+import { NavBarAccordionContent } from './NavBarAccordionContent';
+import { CollapsibleNavBarPopover } from './NavBarPopover';
+import { TriggerIcon } from './TriggerIcon';
+import { CollapsibleNavBarGroup } from './types';
+import * as S from './styles';
+
+export const NavBarItemWithSubMenu = ({
+  item,
+  pathname,
+}: {
+  item: CollapsibleNavBarGroup;
+  pathname: string;
+}) => {
+  const { iconName, iconSize, title, items, prefix } = item;
+  const uniqName = iconName + title.replace(' ', '').toLowerCase();
+  const accordionUniqName = uniqName + 'accordion';
+  return (
+    <AccordionGroupContextProvider key={uniqName}>
+      <CollapsibleNavBarItem>
+        <AccordionGroup
+          size="small"
+          css={{
+            width: '100%',
+          }}>
+          <Accordion
+            id={accordionUniqName}
+            title={title}
+            isOpened={false}
+            ariaControls={`${accordionUniqName}-panel`}
+            css={{
+              padding: 0,
+              '& ul li:last-child': {
+                paddingBottom: 10,
+              },
+            }}
+            renderContent={(props) => (
+              <NavBarAccordionContent
+                items={items}
+                accordionUniqueName={accordionUniqName}
+                prefix={prefix}
+                pathname={pathname}
+                isPopover={false}
+                {...props}
+              />
+            )}
+            renderTitle={(data) => (
+              <Wrapper onClick={data.onClick} css={S.AccordionTitleWrapper}>
+                <div css={S.IconWrapper} className="icon-wrapper">
+                  <CollapsibleNavBarPopover
+                    triggerIcon={
+                      <TriggerIcon iconName={iconName} iconSize={iconSize} />
+                    }
+                    title={data.title}
+                    content={
+                      <NavBarAccordionContent
+                        items={items}
+                        accordionUniqueName={accordionUniqName}
+                        prefix={prefix}
+                        pathname={pathname}
+                        id={accordionUniqName}
+                        isOpened
+                        isPopover
+                      />
+                    }
+                  />
+                </div>
+                <TriggerIcon iconName={iconName} iconSize={iconSize} />
+                <AccordionTitle {...data} css={S.AccordionTitle} />
+              </Wrapper>
+            )}
+          />
+        </AccordionGroup>
+      </CollapsibleNavBarItem>
+    </AccordionGroupContextProvider>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -0,0 +1,39 @@
+import CollapsibleNavBarItem from './CollapsibleNavBarItem';
+import { CollapsibleNavBarPopover } from './NavBarPopover';
+import { TriggerIcon } from './TriggerIcon';
+import CollapsibleNavBarLink from './CollapsibleNavBarLink';
+import * as T from './types';
+
+export const NavBarItemWithoutSubMenu = ({
+  item,
+  pathname,
+}: {
+  item: T.CollapsibleNavBarItem;
+  pathname: string;
+}) => {
+  const { path, iconName, title, iconSize } = item;
+  return (
+    <CollapsibleNavBarItem key={path}>
+      <CollapsibleNavBarLink
+        to={'/' + path}
+        active={pathname === path ? true : undefined}>
+        <CollapsibleNavBarPopover
+          triggerIcon={
+            <TriggerIcon
+              iconName={iconName}
+              iconSize={iconSize}
+              css={{ marginRight: 20 }}
+            />
+          }
+          title={title}
+        />
+        <TriggerIcon
+          iconName={iconName}
+          iconSize={iconSize}
+          css={{ marginRight: 20 }}
+        />
+        <span>{title}</span>
+      </CollapsibleNavBarLink>
+    </CollapsibleNavBarItem>
+  );
+};

package/src/components/CollapsibleNavBar/NavBarPopover.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { offset } from '@floating-ui/react';
+import { useTheme } from '@emotion/react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeading,
+  PopoverTrigger,
+} from '@ssa-ui-kit/core';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+
+export const CollapsibleNavBarPopover = ({
+  triggerIcon,
+  title,
+  content,
+}: {
+  triggerIcon: React.ReactElement;
+  title: string;
+  content?: React.ReactElement;
+}) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+
+  const { width } = useWindowSize();
+
+  useEffect(() => {
+    setOpen(false);
+  }, [width]);
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open,
+        middleware: [
+          offset({
+            mainAxis: 37,
+          }),
+        ],
+      }}
+      placement="right-start"
+      interactionsEnabled="both">
+      <PopoverTrigger
+        variant="custom"
+        dataTestId="collapsible-nav-bar-trigger-button"
+        css={{
+          height: 'auto',
+          padding: 0,
+          cursor: 'pointer',
+          backgroundColor: 'unset',
+        }}
+        startIcon={triggerIcon}
+      />
+      <PopoverContent
+        css={{
+          [theme.mediaQueries.xs]: {
+            display: 'none',
+          },
+          [theme.mediaQueries.md]: {
+            display: 'block',
+          },
+        }}>
+        <PopoverHeading
+          css={{
+            color: theme.colors.white,
+            fontSize: 12,
+            padding: '3px 5px 5px 5px',
+            background: theme.colors.greyGraphite,
+            borderRadius: 5,
+            cursor: 'default',
+            marginBottom: 1,
+            width: 85,
+            '&::before': {
+              content: '""',
+              display: 'block',
+              background: 'rgba(71, 74, 80, 1)',
+              borderRadius: 2,
+              position: 'absolute',
+              width: 9,
+              height: 9,
+              top: 7,
+              left: -4,
+              transform: 'rotate(45deg)',
+              zIndex: -1,
+            },
+          }}>
+          {title}
+        </PopoverHeading>
+        <PopoverDescription
+          css={{
+            '& > div': {
+              padding: 0,
+              background: theme.colors.greyGraphite,
+              borderRadius: 5,
+              width: 85,
+              '& > a': {
+                color: theme.colors.white,
+                padding: 5,
+                fontSize: 12,
+                fontWeight: 400,
+                '&:first-of-type': {
+                  paddingTop: 5,
+                },
+                '&:last-of-type': {
+                  paddingBottom: 9,
+                },
+                '&:hover': {
+                  background: '#62656B',
+                },
+              },
+            },
+          }}>
+          {content}
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -0,0 +1,35 @@
+import { css, useTheme } from '@emotion/react';
+import { Wrapper, Icon, IMapIcons } from '@ssa-ui-kit/core';
+import * as S from './styles';
+
+export const TriggerIcon = ({
+  iconName,
+  iconSize,
+  className,
+}: {
+  iconName: keyof IMapIcons;
+  iconSize?: number;
+  className?: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <Wrapper
+      css={css`
+        width: 24px;
+        height: 24px;
+        justify-content: center;
+        &:hover {
+          ${S.SVGHoverShadow(theme)}
+        }
+      `}
+      className="trigger-icon">
+      <Icon
+        name={iconName}
+        color={theme.colors.grey}
+        css={{ marginRight: 20 }}
+        size={iconSize}
+        className={className}
+      />
+    </Wrapper>
+  );
+};

package/src/components/CollapsibleNavBar/index.ts

@@ -0,0 +1,2 @@
+export { CollapsibleNavBar } from './CollapsibleNavBar';
+export type * from './types';

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -0,0 +1,57 @@
+import { Fragment } from 'react';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { Meta } from '@storybook/react';
+import { Title, Description, Source } from '@storybook/addon-docs';
+
+import { DecoratorFunction } from '@storybook/types';
+import { CollapsibleNavBar } from '../CollapsibleNavBar';
+import { ITEMS } from './consts';
+import { Logo } from './Logo';
+
+type Args = Parameters<typeof CollapsibleNavBar>[0];
+
+const reactRouterDecorator: DecoratorFunction<
+  {
+    component: typeof CollapsibleNavBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/*" element={<Story />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+export default {
+  title: 'Widgets/CollapsibleNavBar',
+  component: CollapsibleNavBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      page: () => (
+        <Fragment>
+          <Title />
+          <Description />
+          <Source code={`<CollapsibleNavBar />`} />
+        </Fragment>
+      ),
+    },
+  },
+  decorators: [
+    reactRouterDecorator,
+    (Story) => (
+      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
+    ),
+  ],
+  args: {
+    items: ITEMS,
+    renderLogo: <Logo />,
+  },
+} as Meta<typeof CollapsibleNavBar>;
+
+export const Default = {};

package/src/components/CollapsibleNavBar/stories/Logo.tsx

@@ -0,0 +1,12 @@
+import { ResponsiveImage } from '@ssa-ui-kit/core';
+import * as S from './styles';
+
+export const Logo = () => (
+  <ResponsiveImage
+    css={S.ResponsiveLogo}
+    srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Large_Left.png?alt=media&token=b6fe7ab8-fd0b-475f-bb08-360311f27693 69w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Medium_Left.png?alt=media&token=a1aeba69-7c07-40c9-aeac-c2477640870d 55w"
+    sizes="(min-width: 900px) 55px, (min-width: 1440px) 69px"
+    src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Small_Left.png?alt=media&token=bff7149e-3b90-4657-8a11-040e83990e6f"
+    alt="SSA CTP logo"
+  />
+);

package/src/components/CollapsibleNavBar/stories/StoryComponent.tsx

@@ -0,0 +1,20 @@
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { CollapsibleNavBar } from '../CollapsibleNavBar';
+import { Logo } from './Logo';
+
+export const StoryComponent = ({
+  items,
+}: Parameters<typeof CollapsibleNavBar>[0]) => (
+  <MemoryRouter>
+    <Routes>
+      <Route
+        path="/*"
+        element={
+          <div style={{ height: '100vh', position: 'relative' }}>
+            <CollapsibleNavBar items={items} renderLogo={<Logo />} />
+          </div>
+        }
+      />
+    </Routes>
+  </MemoryRouter>
+);

package/src/components/CollapsibleNavBar/stories/consts.ts

@@ -0,0 +1,22 @@
+import { CollapsibleNavBarExtendedProps } from '../types';
+
+export const ITEMS: CollapsibleNavBarExtendedProps['items'] = [
+  { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
+  { path: 'bots', iconName: 'robot', iconSize: 24, title: 'Bots' },
+  {
+    prefix: 'statistics/',
+    iconName: 'chart',
+    iconSize: 22,
+    title: 'Statistics',
+    items: [
+      { path: 'balance', title: 'Balance' },
+      { path: 'max-in-work', title: 'Max in Work' },
+      { path: 'orders', title: 'Orders' },
+      { path: 'pnl', title: 'PNL' },
+      { path: 'turnover', title: 'Turnover' },
+      { path: 'hourly-pnl', title: 'Hourly PNL' },
+    ],
+  },
+  { path: 'history', iconName: 'clock', iconSize: 24, title: 'History' },
+  { path: 'settings', iconName: 'settings', iconSize: 20, title: 'Settings' },
+];

package/src/components/CollapsibleNavBar/stories/styles.ts

@@ -0,0 +1,21 @@
+import { Theme, css } from '@emotion/react';
+
+export const ResponsiveLogo = (theme: Theme) => css`
+  width: 48px;
+  height: 42px;
+  &:hover: {
+    filter: drop-shadow(0px 5px 5px ${theme.colors.grey});
+  }
+  display: none;
+  ${theme.mediaQueries.md} {
+    display: block;
+  }
+  ${theme.mediaQueries.lg} {
+    width: 55px;
+    height: 48px;
+    margin-left: 7px;
+    &:has(~ div > input[type='checkbox']:checked) {
+      margin-left: 34px;
+    }
+  }
+`;

package/src/components/CollapsibleNavBar/styles.ts

@@ -0,0 +1,119 @@
+import { Theme, css } from '@emotion/react';
+
+export const SVGHoverShadow = (theme: Theme) => css`
+  filter: drop-shadow(-4px 4px 14px ${theme.colors.white});
+  & path {
+    fill: ${theme.colors.white};
+  }
+  & circle {
+    stroke: ${theme.colors.white};
+  }
+`;
+
+export const SVGMainStyle = (theme: Theme) => css`
+  & svg {
+    & path {
+      fill: ${theme.colors.greyDisabledCheckbox};
+    }
+    & circle {
+      stroke: ${theme.colors.greyDisabledCheckbox};
+    }
+  }
+`;
+
+export const AccordionTitleWrapper = (theme: Theme) => css`
+  cursor: pointer;
+  align-items: flex-start;
+  ${SVGMainStyle(theme)}
+  ${theme.mediaQueries.md} {
+    justify-content: center;
+  }
+  &:hover {
+    & > div:nth-of-type(2) > svg {
+      ${SVGHoverShadow(theme)}
+    }
+  }
+`;
+
+export const AccordionTitle = (theme: Theme) => css`
+  padding: 0 14px 0 22px;
+  & svg {
+    & path {
+      fill: none;
+    }
+  }
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const AccordionContent = (theme: Theme) => css`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-left: 44px;
+  & a {
+    width: 100%;
+    padding: 4.8px 0;
+    &:first-of-type {
+      padding-top: 15px;
+    },
+  },
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+  ${theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+
+export const AccordionContentPopover = (theme: Theme) => css`
+  display: flex;
+  ${theme.mediaQueries.md} {
+    display: flex;
+  }
+  ${theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;
+
+export const IconWrapper = (theme: Theme) => css`
+  width: 24px;
+  height: 24px;
+  ${SVGMainStyle(theme)}
+  &:hover svg {
+    ${SVGHoverShadow(theme)}
+  }
+`;
+
+export const LogoWrapper = (theme: Theme) => css`
+  position: relative;
+  ${theme.mediaQueries.md} {
+    justify-content: center;
+  }
+  ${theme.mediaQueries.lg} {
+    justify-content: flex-start;
+  }
+`;
+
+export const ContentToggle = (theme: Theme) => css`
+  display: none;
+  position: absolute;
+  cursor: pointer;
+  right: -17px;
+  width: 34px;
+  height: 34px;
+  background: ${theme.colors.greyLighter};
+  border-radius: 12px;
+  justify-content: center;
+  align-items: center;
+  & input {
+    display: none;
+  }
+  & svg {
+    cursor: pointer;
+  }
+  ${theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;

package/src/components/CollapsibleNavBar/types.ts

@@ -0,0 +1,14 @@
+import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
+
+export interface CollapsibleNavBarItem extends NavBarExtendedItem {
+  iconSize: number;
+}
+
+export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
+  iconSize: number;
+}
+
+export interface CollapsibleNavBarExtendedProps {
+  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
+  renderLogo: React.ReactElement;
+}