@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/ExchangeAccountKeys/styles.ts

@@ -0,0 +1,96 @@
+import { Theme, css } from '@emotion/react';
+
+export const Card = (theme: Theme) => css`
+  box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
+  padding: 0;
+
+  &.disabled {
+    pointer-events: none;
+  }
+`;
+
+export const CardHeader = (theme: Theme) => css`
+  align-items: center;
+  background: ${theme.colors.greyLighter};
+  padding: 10px;
+  border-radius: 20px 20px 0 0;
+  margin-bottom: 0;
+
+  ${theme.mediaQueries.md} {
+    padding: 15px 10px 15px 30px;
+  }
+`;
+
+export const DeleteButton = (theme: Theme) => css`
+  height: auto;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+
+  &:hover {
+    svg path {
+      fill: ${theme.colors.greyDarker};
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    padding: 12px;
+  }
+`;
+
+export const CardContent = (theme: Theme) => css`
+  width: 100%;
+  padding: 10px;
+
+  ${theme.mediaQueries.md} {
+    padding: 13px 30px 20px;
+  }
+`;
+
+export const KeyItem = css`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+`;
+
+export const VisibleButton = css`
+  height: auto;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+`;
+
+export const SecretKey = css`
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 24px;
+
+  span {
+    padding: 4px 0 0;
+  }
+`;
+
+export const NoWrapText = (theme: Theme) => css`
+  white-space: nowrap;
+  overflow-x: auto;
+
+  ${theme.mediaQueries.md} {
+    overflow-x: visible;
+  }
+`;

package/src/components/ExchangeAccountKeys/types.ts

@@ -0,0 +1,8 @@
+export interface ExchangeAccountKeysProps {
+  title: string | JSX.Element;
+  apiKey: string;
+  secretKey: string;
+  onDelete: () => void;
+  onVisibilityChange: (e: boolean) => void;
+  isDisabled?: boolean;
+}

package/src/components/Filters/FilterBlockWrapper.tsx

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

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

@@ -0,0 +1,47 @@
+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]);
+  await expect(page.getByText('More2')).toBeVisible();
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('Widgets: Filters - More button count notification should be changed', async ({
+  page,
+}) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await expect(page.getByText('More2')).toBeVisible();
+
+  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();
+  await expect(page.getByText('More3')).toBeVisible();
+});

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

@@ -0,0 +1,38 @@
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
+import { StoryComponent } from './stories/StoryComponent';
+import { within, fireEvent } from '@testing-library/dom';
+
+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);
+
+    await fireEvent.click(listItemEls[0]);
+
+    dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
+  });
+});

package/src/components/Filters/Filters.tsx

@@ -0,0 +1,75 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+import { TableFilters } from '@components/TableFilters';
+import { TableFilterConfig } from '@components/TableFilters/types';
+import { useRef, useState } from 'react';
+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,
+  handleSubmit,
+  handleCancel,
+  handleClear,
+}: Pick<UseTableDataResult, 'checkboxData'> &
+  Pick<
+    UseTableDataParameters,
+    'handleSubmit' | 'handleCancel' | 'handleClear'
+  >) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [hiddenCheckboxData, setHiddenCheckboxData] =
+    useState<TableFilterConfig>({});
+
+  const useTableDataResult = useTableData({
+    initialState,
+    wrapperRef,
+    handleSubmit,
+    handleCancel,
+    handleClear,
+  });
+
+  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);
+  };
+
+  useVisibility({
+    checkboxData,
+    refsList,
+    wrapperRef,
+    onVisibilityProcessed: handleVisibilityProcessed,
+  });
+
+  return (
+    <FiltersWrapper ref={wrapperRef}>
+      <FiltersContextProvider {...useTableDataResult}>
+        <FilterBlockWrapper>
+          <FiltersBlock />
+        </FilterBlockWrapper>
+        <Wrapper css={{ width: 110 }}>
+          <TableFilters
+            {...useTableDataResult}
+            checkboxData={hiddenCheckboxData}
+          />
+        </Wrapper>
+      </FiltersContextProvider>
+    </FiltersWrapper>
+  );
+};

package/src/components/Filters/FiltersBlock.tsx

@@ -0,0 +1,70 @@
+import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
+import React, { useEffect, useState } from 'react';
+import { useFiltersContext } from './FiltersContext';
+
+export const FiltersBlock = () => {
+  const { setElementRef, handleCheckboxToggle, checkboxData } =
+    useFiltersContext();
+  const handleOnChange = (groupName: string) => (item: string | number) => {
+    handleCheckboxToggle(groupName, item);
+  };
+
+  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
+    Record<string, Array<{ value: string }>>
+  >({});
+
+  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={{
+              '& + ul': {
+                minWidth: 150,
+              },
+            }}>
+            {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

@@ -0,0 +1,41 @@
+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: {},
+  handleCheckboxToggle: (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

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const FiltersWrapper = styled.div`
+  width: 300;
+  display: flex;
+  justify-content: right;
+  flex: auto;
+`;

package/src/components/Filters/hooks/useVisibility.ts

@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ElementInfo } from '../types';
+import { TableFilterConfig } from '@components/TableFilters/types';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+
+export type RefsByKey = Record<string, ElementInfo>;
+type UseVisibilityParams = {
+  checkboxData: TableFilterConfig;
+  refsList: Array<React.MutableRefObject<HTMLElement | null>>;
+  wrapperRef?: React.RefObject<HTMLElement>;
+  onVisibilityProcessed?: () => void;
+};
+
+export const useVisibility = ({
+  checkboxData,
+  wrapperRef,
+  refsList,
+  onVisibilityProcessed,
+}: UseVisibilityParams) => {
+  const [visibilities, setVisibilities] = useState<boolean[]>(
+    Object.keys(checkboxData).map(() => false),
+  );
+  const handleIntersection = () => {
+    if (wrapperRef && wrapperRef.current) {
+      processVisibility();
+    }
+  };
+
+  const observer = useMemo(
+    () =>
+      wrapperRef === null
+        ? null
+        : new IntersectionObserver(handleIntersection, {
+            root: wrapperRef?.current,
+            rootMargin: '0px',
+            threshold: 1,
+          }),
+    [wrapperRef?.current, refsList],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (observer !== null) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (refsList.length === Object.keys(checkboxData).length) {
+      refsList.forEach((currentRef) => {
+        if (currentRef.current && observer !== null) {
+          observer.observe(currentRef.current);
+        }
+      });
+    }
+    return () => {
+      refsList.forEach((currentRef) => {
+        if (currentRef.current && observer !== null) {
+          observer.unobserve(currentRef.current);
+        }
+      });
+    };
+  }, [refsList, observer]);
+
+  const windowSize = useWindowSize();
+
+  const processVisibility = () => {
+    const newVisibilities: boolean[] = [];
+    refsList.forEach((currentRef) => {
+      if (currentRef.current && wrapperRef?.current) {
+        const visibility =
+          currentRef.current?.offsetLeft >= wrapperRef?.current.offsetLeft;
+        newVisibilities.push(visibility);
+        currentRef.current.style.visibility = visibility ? 'visible' : 'hidden';
+      }
+    });
+    setVisibilities(newVisibilities);
+  };
+
+  const memoVisibilities = useMemo(() => {
+    return visibilities;
+  }, [JSON.stringify(visibilities)]);
+
+  useEffect(() => {
+    onVisibilityProcessed?.();
+  }, [memoVisibilities]);
+
+  useEffect(() => {
+    if (
+      refsList.length > 0 &&
+      refsList.length === Object.keys(checkboxData).length
+    ) {
+      processVisibility();
+    }
+  }, [windowSize.width]);
+
+  return {
+    processVisibility,
+  };
+};

package/src/components/Filters/index.ts

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

package/src/components/Filters/stories/Filters.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StoryComponent } from './StoryComponent';
+import { Filters } from '..';
+
+type FiltersType = typeof Filters;
+
+export default {
+  title: 'Widgets/Filters',
+  component: Filters,
+  argTypes: {},
+} as Meta<typeof Filters>;
+
+export const Default: StoryObj<FiltersType> = () => {
+  return <StoryComponent />;
+};
+
+Default.args = {};

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

@@ -0,0 +1,18 @@
+import { mockData } from './mockData';
+import { Filters } from '..';
+
+export const StoryComponent = () => {
+  const handleSubmit = (submitData: Record<string, string[]>) => {
+    console.log('>>>onSubmit', submitData);
+  };
+  return (
+    <div
+      css={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Filters handleSubmit={handleSubmit} checkboxData={mockData} />
+    </div>
+  );
+};