@ssa-ui-kit/widgets 0.0.30-alpha → 0.0.32-alpha

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

@@ -1,12 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/Filters/FilterBlockWrapper.tsx

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

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

@@ -1,115 +0,0 @@
-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:6007/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:6007/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

@@ -1,47 +0,0 @@
-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

@@ -1,87 +0,0 @@
-import { useRef, useState } from 'react';
-import { Wrapper } from '@ssa-ui-kit/core';
-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>
-  );
-};

package/src/components/Filters/FiltersBlock.tsx

@@ -1,78 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { useEffect, useState } from 'react';
-import { useTheme } from '@emotion/react';
-import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
-import { useFiltersContext } from './FiltersContext';
-
-export const FiltersBlock = () => {
-  const { setElementRef, onDropdownChange, checkboxData } = useFiltersContext();
-  const handleOnChange = (groupName: string) => (item: string | number) => {
-    onDropdownChange(groupName, item);
-  };
-
-  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
-    Record<string, Array<{ value: string }>>
-  >({});
-
-  const theme = useTheme();
-
-  useEffect(() => {
-    const newData: Record<
-      string,
-      Array<{
-        value: string;
-      }>
-    > = {};
-    Object.keys(checkboxData).map((groupName) => {
-      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
-      if (selectedItems) {
-        newData[groupName] = selectedItems.map((item) => ({
-          value: item,
-        }));
-      }
-    });
-    setSelectedItemsWithValue(newData);
-  }, [checkboxData]);
-
-  return (
-    <>
-      {Object.keys(checkboxData).map((groupName) => {
-        const accordionInfo = checkboxData[groupName];
-        const selectedItems = selectedItemsWithValue[groupName];
-        return (
-          <MultipleDropdown
-            key={accordionInfo.id}
-            showPlaceholder={false}
-            label={accordionInfo.title}
-            ref={(element) => {
-              setElementRef(accordionInfo.id, element);
-            }}
-            onChange={handleOnChange(groupName)}
-            selectedItems={selectedItems}
-            css={{
-              padding: '11px 15px 9px 10px',
-              '& + ul': {
-                minWidth: 150,
-                maxHeight: '50vh',
-              },
-              [theme.mediaQueries.md]: {
-                padding: '0 15px 0 10px',
-              },
-            }}>
-            {Object.keys(accordionInfo.items).map((itemKey) => {
-              const item = accordionInfo.items[itemKey];
-              return (
-                <DropdownOption
-                  key={`${accordionInfo.id}${item.name}`}
-                  value={item.name}
-                  isDisabled={item.isDisabled}>
-                  {item.content.text}
-                </DropdownOption>
-              );
-            })}
-          </MultipleDropdown>
-        );
-      })}
-    </>
-  );
-};

package/src/components/Filters/FiltersContext.tsx

@@ -1,44 +0,0 @@
-import { UseTableDataResult } from '@components/TableFilters/hooks/useTableData';
-import { mockData } from '@components/TableFilters/stories/mockData';
-import {
-  BaseSyntheticEvent,
-  createContext,
-  createRef,
-  useContext,
-} from 'react';
-
-export const FiltersContext = createContext<UseTableDataResult>({
-  checkboxData: mockData,
-  selectedItemsByGroup: {},
-  onCheckboxToggle: (groupName: string, name: string | number) => () => {
-    // no action
-  },
-  onDropdownChange: (groupName: string, name: string | number) => () => {
-    // no action
-  },
-  onClear: () => {
-    // no action
-  },
-  onReset: () => {
-    // no action
-  },
-  onSubmit: (event?: BaseSyntheticEvent) => {
-    // no action
-  },
-  refsList: [],
-  setElementRef: (groupName: string, element: HTMLElement | null) => {
-    // no action
-  },
-  wrapperRef: createRef(),
-} as UseTableDataResult);
-
-export const useFiltersContext = () => useContext(FiltersContext);
-
-export const FiltersContextProvider = ({
-  children,
-  ...rest
-}: {
-  children: React.ReactNode;
-} & UseTableDataResult) => (
-  <FiltersContext.Provider value={rest}>{children}</FiltersContext.Provider>
-);

package/src/components/Filters/FiltersWrapper.tsx

@@ -1,34 +0,0 @@
-import styled from '@emotion/styled';
-
-export const FiltersWrapper = styled.div<{ isMoreButtonVisible?: boolean }>`
-  width: 300px;
-  display: flex;
-  justify-content: right;
-  flex: auto;
-  flex-direction: ${({ isMoreButtonVisible }) =>
-    isMoreButtonVisible ? 'row' : 'row-reverse'};
-
-  & button {
-    height: 30px;
-  }
-
-  & > div:first-of-type > div:last-child {
-    margin-right: ${({ isMoreButtonVisible }) =>
-      isMoreButtonVisible ? '10px' : 0};
-    ul: {
-      right: ${({ isMoreButtonVisible }) => (isMoreButtonVisible ? 'auto' : 0)};
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    & button {
-      height: 36px;
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    & button {
-      height: 40px;
-    }
-  }
-`;