@ssa-ui-kit/core 0.0.26-alpha → 0.0.28-alpha

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

@@ -0,0 +1,79 @@
+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';
+import { Layout } from './Layout';
+import { CustomIcon } from './CustomIcon';
+
+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) => <Layout>{Story()}</Layout>],
+  args: {
+    items: ITEMS,
+    renderLogo: <Logo />,
+    onChange: (isChecked) => {
+      console.log('>>>onChange', isChecked);
+    },
+  },
+} as Meta<typeof CollapsibleNavBar>;
+
+export const Default = {};
+
+export const WithCustomIcon = {
+  title: 'With Custom Icon',
+  component: CollapsibleNavBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    items: [
+      ...ITEMS,
+      {
+        path: 'custom',
+        CustomIcon,
+        title: 'Item with custom icon',
+      },
+    ],
+    renderLogo: <Logo />,
+    onChange: (isChecked) => {
+      console.log('>>>onChange', isChecked);
+    },
+  },
+} as Meta<typeof CollapsibleNavBar>;

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

@@ -0,0 +1,20 @@
+export const CustomIcon = () => {
+  const size = 24;
+  const fill = 'rgb(195, 197, 204)';
+  const props = {};
+  return (
+    <svg
+      className="svg-icon"
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M708.76 993.953333a53.366667 53.366667 0 0 1-46.28-26.666666L532.1 741.466667l-154.666667 148.586666A21.333333 21.333333 0 0 1 341.333333 874.666667V192a21.333333 21.333333 0 0 1 6.706667-15.526667c5.333333-5.02 15.26-8.74 25.72-2.666666l91.946667 53.086666 498.833333 288a21.333333 21.333333 0 0 1-4.733333 38.966667l-206 59.64 130.386666 225.826667a53.333333 53.333333 0 0 1-19.526666 72.826666l-129.333334 74.666667a53.02 53.02 0 0 1-26.573333 7.133333z m-171.806667-308.073333a20.666667 20.666667 0 0 1 3 0.213333 21.333333 21.333333 0 0 1 15.48 10.453334l144 249.413333a10.666667 10.666667 0 0 0 14.566667 3.906667l129.333333-74.666667a10.666667 10.666667 0 0 0 3.906667-14.573333l-144-249.413334a21.333333 21.333333 0 0 1 12.546667-31.16l184.053333-53.286666L384 228.953333v595.633334l138.18-132.76a21.333333 21.333333 0 0 1 14.773333-5.946667zM298.666667 661.333333a21.333333 21.333333 0 0 0-21.333334-21.333333H96a10.666667 10.666667 0 0 1-10.666667-10.666667V96a10.666667 10.666667 0 0 1 10.666667-10.666667h746.666667a10.666667 10.666667 0 0 1 10.666666 10.666667v266.666667a21.333333 21.333333 0 0 0 42.666667 0V96a53.393333 53.393333 0 0 0-53.333333-53.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333333v533.333333a53.393333 53.393333 0 0 0 53.333333 53.333334h181.333333a21.333333 21.333333 0 0 0 21.333334-21.333334z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { NotificationCard } from '@components/NotificationCard';
+
+const Main = styled.main`
+  background: linear-gradient(
+      143deg,
+      #e7ebf1 -4.16%,
+      #d7d9dd 39.37%,
+      #cccdd2 52.66%,
+      #e1e4ea 87.68%
+    ),
+    #f8f9fb;
+  width: 100%;
+  padding: 60px 10px 10px 15px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding: 10px 21px 10px 35px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 10px 49px 10px 36px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.xlg} {
+    padding: 10px 60px 10px 62px;
+  }
+`;
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+  /* cSpell:disable */
+  return (
+    <div
+      css={{
+        display: 'flex',
+        minHeight: '100vh',
+        position: 'relative',
+      }}>
+      {children}
+      <Main>
+        {new Array(100).fill(1).map((_, index) => (
+          <NotificationCard
+            key={index}
+            title="CyberVeinToken is Now Available"
+            text="With our newest listing, we’re welcoming Wrapped"
+            isRead={false}
+            type="Informational"
+            time={Date.now()}
+          />
+        ))}
+      </Main>
+    </div>
+  );
+  /* cSpell:enable */
+};

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

@@ -0,0 +1,12 @@
+import ResponsiveImage from '@components/ResponsiveImage';
+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,26 @@
+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 />}
+              onChange={(isChecked) => {
+                console.log('>>>checked ', isChecked);
+              }}
+            />
+          </div>
+        }
+      />
+    </Routes>
+  </MemoryRouter>
+);

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

@@ -0,0 +1,37 @@
+import { CollapsibleNavBarExtendedProps } from '../types';
+
+export const ITEMS: CollapsibleNavBarExtendedProps['items'] = [
+  { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
+  {
+    path: 'bots',
+    iconName: 'robot',
+    iconSize: 54,
+    title: 'Bots',
+    css: {
+      position: 'absolute',
+      top: '-14px',
+    },
+  },
+  {
+    path: 'notifications',
+    iconName: 'notification',
+    iconSize: 24,
+    title: 'Notifications',
+  },
+  {
+    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,91 @@
+import { Theme, css } from '@emotion/react';
+
+export const AccordionTitleWrapper = (theme: Theme) => css`
+  cursor: pointer;
+  align-items: center;
+
+  ${theme.mediaQueries.md} {
+    display: flex;
+    justify-content: center;
+  }
+
+  & div.icon-wrapper {
+    width: 100%;
+    gap: 0;
+  }
+
+  & div.icon-wrapper:not(.active):hover > button svg path,
+  & div.icon-wrapper.active > button svg path {
+    stroke: #fff;
+    fill: none;
+  }
+
+  & .trigger-icon {
+    height: 22px;
+  }
+`;
+
+export const AccordionTitle = (theme: Theme) => css`
+  padding: 0 14px 0 22px;
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const AccordionContent = (theme: Theme) => css`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-left: 44px;
+  overflow: hidden;
+  perspective: 1px;
+
+  ${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 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,18 @@
+import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
+
+export interface CollapsibleNavBarItem extends NavBarExtendedItem {
+  iconSize: number;
+  css?: React.CSSProperties;
+}
+
+export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
+  iconSize: number;
+  css?: React.CSSProperties;
+  prefix: string;
+}
+
+export interface CollapsibleNavBarExtendedProps {
+  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
+  renderLogo: React.ReactElement;
+  onChange?: (isChecked: boolean) => void;
+}

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 

package/src/components/Filters/FilterBlockWrapper.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import Wrapper from '@components/Wrapper';
+
+export const FilterBlockWrapper = styled(Wrapper)`
+  justify-content: end;
+  width: 100%;
+  & > div {
+    min-width: auto;
+    margin-right: 10px;
+  }
+`;

package/src/components/Filters/Filters.e2e.ts

@@ -0,0 +1,115 @@
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-filters--default&viewMode=story',
+  );
+};
+
+test('Widgets: Filters should be opened correctly', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await expect(page.getByText('strategy #3Carrot down')).toBeVisible();
+  await expect(page.getByText('More')).not.toBeVisible();
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--default__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});
+
+test('Widgets: Filters - More button should be shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  const triggerButton = page.getByTestId('trigger-button');
+  const beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  await expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  await expect(buttonText).toEqual('2');
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('Widgets: Filters - More button should be shown when items selected', async ({
+  page,
+}) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  const triggerButton = page.getByTestId('trigger-button');
+  const beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('4');
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button-items-selected__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});
+
+test('Widgets: Filters - More button count notification should be changed', async ({
+  page,
+}) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  let triggerButton = await page.getByTestId('trigger-button');
+  let beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  let buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('2');
+
+  await page.getByText('Status: Running').click();
+  await page.getByRole('button', { name: 'Stopped' }).click();
+  await expect(page.getByText('Status: Running+1')).toBeVisible();
+
+  await page.getByText('strategy #3Carrot down').click();
+  await page.getByRole('button', { name: 'strategy #3 checkbox1' }).click();
+
+  triggerButton = page.getByTestId('trigger-button');
+  beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('3');
+});
+
+test('Widgets: Filters - Filter button should be shown when items not selected', async ({
+  page,
+}) => {
+  await page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-filters--all-items-enabled&viewMode=story',
+  );
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  const triggerButton = page.getByTestId('trigger-button');
+  let beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('1');
+
+  await page.getByTestId('trigger-button').click();
+  /* cSpell:disable */
+  await page.locator('label').filter({ hasText: 'Checkcheckbox1' }).click();
+  await page.locator('label').filter({ hasText: 'Checkcheckbox4' }).click();
+
+  beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"Filter"');
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--filter-button-items-not-selected__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});

package/src/components/Filters/Filters.spec.tsx

@@ -0,0 +1,47 @@
+import { within, fireEvent } from '@testing-library/dom';
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('Filters', () => {
+  mockIntersectionObserver();
+
+  it('Should be correctly rendered', () => {
+    const { queryByText, queryByTestId } = render(<StoryComponent />);
+
+    queryByText('strategy #3');
+    expect(queryByTestId('trigger-notification')).not.toBeInTheDocument();
+  });
+
+  it('Should be correctly changed the item', async () => {
+    const { queryByRole, getByRole, queryAllByTestId } = render(
+      <StoryComponent />,
+    );
+
+    const dropdownElements = queryAllByTestId('dropdown');
+    const dropdownElement = dropdownElements[0];
+    let dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+
+    let listboxEl = queryByRole('listbox');
+    expect(listboxEl).not.toBeInTheDocument();
+
+    await fireEvent.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+    expect(listItemEls.length).toBe(5);
+
+    const logSpy = jest.spyOn(console, 'log');
+    await fireEvent.click(listItemEls[0]);
+
+    dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
+    expect(logSpy).toHaveBeenCalledWith('>>>Filters onSubmit', {
+      exchange: ['binance'],
+      pairs: ['btcfdusd'],
+      status: ['running'],
+      strategy: ['checkbox4'],
+      strategy2: ['strategy2Checkbox1'],
+      strategy3: [],
+    });
+  });
+});

package/src/components/Filters/Filters.tsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import Wrapper from '@components/Wrapper';
+import { TableFilters } from '@components/TableFilters';
+import { TableFilterConfig } from '@components/TableFilters/types';
+import {
+  UseTableDataParameters,
+  UseTableDataResult,
+  useTableData,
+} from '@components/TableFilters/hooks/useTableData';
+import { FiltersContextProvider } from './FiltersContext';
+import { FiltersBlock } from './FiltersBlock';
+import { FilterBlockWrapper } from './FilterBlockWrapper';
+import { FiltersWrapper } from './FiltersWrapper';
+import { useVisibility } from './hooks/useVisibility';
+
+export const Filters = ({
+  checkboxData: initialState = {} as TableFilterConfig,
+  updatedCheckboxData,
+  handleSubmit,
+  handleCancel,
+  handleClear,
+  handleDropdownChange,
+}: Pick<UseTableDataResult, 'checkboxData'> & {
+  updatedCheckboxData?: TableFilterConfig;
+} & Pick<
+    UseTableDataParameters,
+    'handleSubmit' | 'handleCancel' | 'handleClear' | 'handleDropdownChange'
+  >) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [hiddenCheckboxData, setHiddenCheckboxData] =
+    useState<TableFilterConfig>({});
+
+  const [isMoreButtonVisible, setIsMoreButtonVisible] = useState(false);
+
+  const useTableDataResult = useTableData({
+    initialState,
+    updatedCheckboxData,
+    wrapperRef,
+    handleSubmit,
+    handleCancel,
+    handleClear,
+    handleDropdownChange,
+  });
+
+  const { checkboxData, refsList } = useTableDataResult;
+
+  const handleVisibilityProcessed = () => {
+    const newHiddenCheckboxData: TableFilterConfig = {};
+    const groupNames = Object.keys(checkboxData);
+    refsList.forEach((currentRef, index) => {
+      const groupName = groupNames[index];
+      const isNotVisible = currentRef.current?.style.visibility === 'hidden';
+      if (isNotVisible) {
+        newHiddenCheckboxData[groupName] = checkboxData[groupName];
+      }
+    });
+    setHiddenCheckboxData(newHiddenCheckboxData);
+  };
+
+  const handleMoreButtonVisibleChange = (isVisible: boolean) => {
+    setIsMoreButtonVisible(isVisible);
+  };
+
+  useVisibility({
+    checkboxData,
+    refsList,
+    wrapperRef,
+    onVisibilityProcessed: handleVisibilityProcessed,
+  });
+
+  return (
+    <FiltersWrapper ref={wrapperRef} isMoreButtonVisible={isMoreButtonVisible}>
+      <FiltersContextProvider {...useTableDataResult}>
+        <FilterBlockWrapper>
+          <FiltersBlock />
+        </FilterBlockWrapper>
+        <Wrapper css={{ width: 110 }}>
+          <TableFilters
+            {...useTableDataResult}
+            checkboxData={hiddenCheckboxData}
+            handleMoreButtonVisibleChange={handleMoreButtonVisibleChange}
+          />
+        </Wrapper>
+      </FiltersContextProvider>
+    </FiltersWrapper>
+  );
+};