@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/StepsCounter/index.ts

@@ -0,0 +1,2 @@
+export { StepsCounter as default } from './StepsCounter';
+export * from './types';

package/src/components/StepsCounter/types.ts

@@ -0,0 +1,4 @@
+export interface StepsCounterProps {
+  max: number;
+  currentValue: number;
+}

package/src/components/TableFilters/TableFilterCancelButton.tsx

@@ -0,0 +1,39 @@
+import { PopoverClose } from '@ssa-ui-kit/core';
+import { Theme, css, useTheme } from '@emotion/react';
+import { baseButtonStyle } from './styles';
+
+export const cancelButtonStyles = (theme: Theme) => css`
+  ${baseButtonStyle}
+  color: ${theme.colors.greyCancelClearButton};
+  background: ${theme.colors.white};
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  justify-content: center;
+
+  &:hover {
+    border-color: ${theme.colors.greyDropdownFocused};
+  }
+
+  &:active {
+    border-color: ${theme.colors.blueNotification};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+    color: ${theme.colors.greyFilterIcon};
+  }
+`;
+
+export const TableFiltersCancelButton = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <PopoverClose css={cancelButtonStyles(theme)} onClick={onClick}>
+      {children}
+    </PopoverClose>
+  );
+};

package/src/components/TableFilters/TableFilterCheckbox.tsx

@@ -0,0 +1,24 @@
+import { ICheckboxProps, Checkbox, checkboxStyles } from '@ssa-ui-kit/core';
+import { Theme, css, useTheme } from '@emotion/react';
+
+const getStyles = (theme: Theme) => css`
+  margin: 0 0 14px;
+  & span {
+    margin-left: 16px;
+    color: ${theme.colors.greyDisabled};
+    user-select: none;
+  }
+  & input + div {
+    border-radius: 2px;
+    &::before {
+      border-radius: 2px;
+    }
+  }
+  ${checkboxStyles.blueInput(theme)}
+`;
+
+export const TableFilterCheckbox = (props: ICheckboxProps) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  return <Checkbox {...props} css={styles} />;
+};

package/src/components/TableFilters/TableFilterClearButton.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@ssa-ui-kit/core';
+import { Theme, css, useTheme } from '@emotion/react';
+import { baseButtonStyle } from './styles';
+
+export const clearButtonStyles = (theme: Theme) => css`
+  ${baseButtonStyle}
+  color: ${theme.colors.greyCancelClearButton};
+  background: ${theme.colors.greyLighter};
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  justify-content: center;
+
+  &:hover {
+    border-color: ${theme.colors.greyDropdownFocused};
+    background: ${theme.colors.greyLighter};
+  }
+
+  &:active {
+    border-color: ${theme.colors.greyDropdownFocused};
+    background: ${theme.colors.greyLighter};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+    color: ${theme.colors.greyFilterIcon};
+  }
+`;
+
+export const TableFiltersClearButton = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <Button
+      css={{
+        ...baseButtonStyle,
+        ...clearButtonStyles(theme),
+      }}
+      variant="secondary"
+      onClick={onClick}>
+      {children}
+    </Button>
+  );
+};

package/src/components/TableFilters/TableFilterTrigger.tsx

@@ -0,0 +1,50 @@
+import { css, useTheme } from '@emotion/react';
+import { PopoverTrigger, Icon } from '@ssa-ui-kit/core';
+import { Theme } from '@emotion/react';
+
+export const filterButtonStyles = (theme: Theme) => css`
+  height: 40px;
+  color: ${theme.colors.greyDisabled};
+  background: ${theme.colors.white};
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  border-radius: 6.5px;
+  padding: 0 11px 0 13px;
+  font-size: 14px;
+  letter-spacing: normal;
+  gap: 5px;
+  user-select: none;
+
+  &:hover {
+    border-color: ${theme.colors.greyDropdownFocused};
+  }
+
+  &:active {
+    border-color: ${theme.colors.blueNotification};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+  }
+`;
+
+export const TableFilterTrigger = ({
+  children,
+  ...rest
+}: {
+  children: React.ReactNode;
+  as?: string;
+  className?: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <PopoverTrigger
+      variant="custom"
+      css={filterButtonStyles}
+      endIcon={
+        <Icon name="filter" color={theme.colors.greyFilterIcon} size={20} />
+      }
+      {...rest}>
+      {children}
+    </PopoverTrigger>
+  );
+};

package/src/components/TableFilters/TableFilterTriggerWithNotification.tsx

@@ -0,0 +1,44 @@
+import { MultipleDropdownNotification } from '@ssa-ui-kit/core';
+import { TableFilterTrigger } from './TableFilterTrigger';
+import { Interpolation, Theme, useTheme } from '@emotion/react';
+
+export const TableFilterTriggerWithNotification = ({
+  children,
+  count,
+  visible = true,
+}: {
+  children: React.ReactNode;
+  count?: number;
+  visible?: boolean;
+}) => {
+  const theme = useTheme();
+  const css: Interpolation<Theme> = {
+    display: visible ? 'flex' : 'none',
+  };
+  if (count) {
+    css.background = theme.colors.blueDropdownWithSelectedItems;
+    css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
+  }
+  return (
+    <TableFilterTrigger css={css}>
+      {children}
+      {count ? (
+        <MultipleDropdownNotification
+          as={'div'}
+          css={{
+            width: 16,
+            height: 16,
+            minWidth: 16,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          data-testid={'trigger-notification'}>
+          {count}
+        </MultipleDropdownNotification>
+      ) : (
+        ''
+      )}
+    </TableFilterTrigger>
+  );
+};

package/src/components/TableFilters/TableFilters.e2e.ts

@@ -0,0 +1,28 @@
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-table-filters--opened__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-tablefilters--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: TableFilters', () => {
+  test('Renders correctly', async ({ page }) => {
+    await gotoPage(page);
+    await expect(page.getByText('More')).toBeVisible();
+  });
+
+  test('Opens popover', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.getByText('More').click();
+
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+    });
+  });
+});

package/src/components/TableFilters/TableFilters.spec.tsx

@@ -0,0 +1,166 @@
+import { fireEvent } from '@testing-library/dom';
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
+import { StoryComponent } from './stories/StoryComponent';
+import { TableFilters } from '.';
+import { UseTableDataResult } from './hooks/useTableData';
+import { mockData } from './stories/mockData';
+import { createRef } from 'react';
+
+const mockTableFiltersProps: UseTableDataResult = {
+  checkboxData: mockData,
+  handleCheckboxToggle: jest.fn(),
+  setElementRef: jest.fn(),
+  onSubmit: jest.fn((e) => {
+    e?.preventDefault();
+    console.log('>>>Submit: completed');
+  }),
+  onReset: () => {
+    console.log('>>>Cancel: completed');
+  },
+  onClear: () => {
+    console.log('>>>Clear: completed');
+  },
+  wrapperRef: createRef(),
+  refsList: [],
+};
+
+describe('TableFilters', () => {
+  mockIntersectionObserver();
+
+  it('Should be correctly rendered', () => {
+    const { getByText, getByRole, queryByText } = render(<StoryComponent />);
+
+    const buttonEl = getByRole('button');
+    let cancelButtonEl = queryByText('Cancel');
+    expect(cancelButtonEl).not.toBeInTheDocument();
+    fireEvent.click(buttonEl);
+    cancelButtonEl = getByText('Cancel');
+    getByText('Strategy');
+    getByText('checkbox1');
+    fireEvent.click(cancelButtonEl);
+    expect(queryByText('Cancel')).not.toBeInTheDocument();
+  });
+  it('Should be all checked (Strategy group)', () => {
+    const { getByText, getByRole } = render(<StoryComponent />);
+
+    const buttonEl = getByRole('button');
+    fireEvent.click(buttonEl);
+    fireEvent.click(getByText('checkbox2'));
+    fireEvent.click(getByText('checkbox3'));
+    fireEvent.click(getByText('checkbox5'));
+    const checkboxes = document.querySelectorAll<HTMLInputElement>(
+      'div[role=region][title=Strategy] input',
+    );
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox.checked).toEqual(true);
+    });
+  });
+  it('Should be cleared with persisting of disabled values', () => {
+    const { getByText, getByRole } = render(<StoryComponent />);
+
+    const buttonEl = getByRole('button');
+    fireEvent.click(buttonEl);
+    fireEvent.click(getByText('checkbox2'));
+    fireEvent.click(getByText('checkbox3'));
+    fireEvent.click(getByText('checkbox5'));
+    let strategyCheckboxes = document.querySelectorAll<HTMLInputElement>(
+      'div[role=region][title=Strategy] input',
+    );
+    strategyCheckboxes.forEach((checkbox) => {
+      expect(checkbox.checked).toEqual(true);
+    });
+    fireEvent.click(getByText('Clear'));
+    strategyCheckboxes = document.querySelectorAll<HTMLInputElement>(
+      'div[role=region][title=Strategy] input',
+    );
+    strategyCheckboxes.forEach((checkbox) => {
+      expect(checkbox.checked).toEqual(false);
+    });
+    const pairsCheckboxes = document.querySelectorAll<HTMLInputElement>(
+      'div[role=region][title=Pairs] input',
+    );
+    pairsCheckboxes.forEach((checkbox) => {
+      expect(checkbox.checked).toEqual(true);
+      expect(checkbox.disabled).toEqual(true);
+    });
+    const exchangeCheckboxes = document.querySelectorAll<HTMLInputElement>(
+      'div[role=region][title=Exchange] input',
+    );
+    exchangeCheckboxes.forEach((checkbox) => {
+      expect(checkbox.checked).toEqual(true);
+      expect(checkbox.disabled).toEqual(true);
+    });
+  });
+  it('Should be correctly working custom handlers', () => {
+    const { getByText, getByRole } = render(
+      <div
+        css={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <TableFilters {...mockTableFiltersProps} />
+      </div>,
+    );
+
+    const logSpy = jest.spyOn(console, 'log');
+    const buttonEl = getByRole('button');
+    fireEvent.click(buttonEl);
+    fireEvent.click(getByText('checkbox2'));
+    fireEvent.click(getByText('Clear'));
+    expect(logSpy).toHaveBeenCalledWith('>>>Clear: completed');
+    fireEvent.click(getByText('checkbox2'));
+    fireEvent.click(getByText('Apply'));
+    expect(logSpy).toHaveBeenCalledWith('>>>Submit: completed');
+    fireEvent.click(getByText('Cancel'));
+    expect(logSpy).toHaveBeenCalledWith('>>>Cancel: completed');
+  });
+  it('Should be submitted with callback', () => {
+    const { getByText, getByRole } = render(<StoryComponent />);
+
+    const buttonEl = getByRole('button');
+    fireEvent.click(buttonEl);
+    fireEvent.click(getByText('checkbox2'));
+    fireEvent.click(getByText('checkbox3'));
+    fireEvent.click(getByText('checkbox5'));
+
+    const logSpy = jest.spyOn(console, 'log');
+    fireEvent.click(getByText('Apply'));
+    expect(logSpy).toHaveBeenCalledWith('>>>onSubmit', {
+      exchange: ['binance'],
+      pairs: ['btcfdusd'],
+      status: ['running'],
+      strategy: [
+        'checkbox1',
+        'checkbox4',
+        'checkbox2',
+        'checkbox3',
+        'checkbox5',
+      ],
+    });
+  });
+  it('Should be submitted by default', () => {
+    const { getByText, getByRole, getByTestId } = render(
+      <div
+        css={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <TableFilters {...mockTableFiltersProps} />
+      </div>,
+    );
+
+    const buttonEl = getByRole('button');
+    fireEvent.click(buttonEl);
+
+    const formEl = getByTestId('table-filters-form');
+    formEl.onsubmit = jest.fn((e) => {
+      e.preventDefault();
+      console.log('>>>Form submitted');
+    });
+    const logSpy = jest.spyOn(console, 'log');
+    fireEvent.click(getByText('Apply'));
+    expect(logSpy).toHaveBeenCalledWith('>>>Form submitted');
+  });
+});

package/src/components/TableFilters/TableFilters.tsx

@@ -0,0 +1,178 @@
+import {
+  BaseSyntheticEvent,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { assocPath } from '@ssa-ui-kit/utils';
+import {
+  AccordionTitle,
+  AccordionGroup,
+  AccordionGroupContextProvider,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  ICheckboxProps,
+} from '@ssa-ui-kit/core';
+import {
+  tableFilterDividerStyles,
+  tableFilterPopoverContentStyles,
+} from './styles';
+import {
+  TableFilterCheckbox,
+  TableFilterTriggerWithNotification,
+  TableFiltersAccordion,
+  TableFiltersAccordionContent,
+  TableFiltersButtons,
+} from '.';
+import { TableFilterConfig, TableFiltersView } from './types';
+import {
+  getCheckboxChangedItems,
+  getClearData,
+  getResetData,
+  getSubmitData,
+} from './utils/handlers';
+
+export const TableFilters = ({
+  checkboxData = {} as TableFilterConfig,
+  onReset,
+  onSubmit,
+  onClear,
+  handleCheckboxToggle,
+}: TableFiltersView) => {
+  const [localCheckboxData, setLocalCheckboxData] =
+    useState<TableFilterConfig>(checkboxData);
+  const [selectedGroupsCount, setSelectedGroupsCount] = useState(0);
+
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+
+  useEffect(() => {
+    setLocalCheckboxData(checkboxData);
+  }, [checkboxData]);
+
+  useLayoutEffect(() => {
+    let counter = 0;
+    Object.keys(localCheckboxData).forEach((groupName) => {
+      const selectedItemsDraft =
+        localCheckboxData[groupName].selectedItemsDraft || [];
+      if (selectedItemsDraft.length > 0) {
+        counter++;
+      }
+    });
+    setSelectedGroupsCount(counter);
+
+    if (Object.keys(localCheckboxData).length === 0) {
+      setOpen(false);
+    }
+  }, [localCheckboxData]);
+
+  const onCheckboxChange = (groupName: string, name: string) => () => {
+    const { items, path } = getCheckboxChangedItems(
+      localCheckboxData,
+      groupName,
+      name,
+    );
+    setLocalCheckboxData(assocPath(path, items));
+    handleCheckboxToggle?.(groupName, name);
+  };
+
+  const handleSubmit = (event: BaseSyntheticEvent) => {
+    event.preventDefault();
+    const { submitCheckboxData } = getSubmitData(localCheckboxData);
+    setLocalCheckboxData(submitCheckboxData);
+    onSubmit?.();
+  };
+
+  const handleReset = () => {
+    const resetData = getResetData(localCheckboxData);
+    setLocalCheckboxData(resetData);
+    setOpen(false);
+    onReset?.();
+  };
+
+  const handleClear = () => {
+    const newData = getClearData(localCheckboxData);
+    setLocalCheckboxData(newData);
+    onClear?.();
+  };
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open: open,
+      }}>
+      <TableFilterTriggerWithNotification
+        count={selectedGroupsCount}
+        visible={!(Object.keys(localCheckboxData).length === 0)}>
+        More
+      </TableFilterTriggerWithNotification>
+      <PopoverContent className="popover" css={tableFilterPopoverContentStyles}>
+        <form
+          onSubmit={handleSubmit}
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+          }}
+          data-testid="table-filters-form">
+          <PopoverDescription variant="body1">
+            <AccordionGroupContextProvider>
+              <AccordionGroup size="medium">
+                {Object.keys(localCheckboxData).map((groupName) => {
+                  const accordionInfo = localCheckboxData[groupName];
+                  return (
+                    <TableFiltersAccordion
+                      key={accordionInfo.id}
+                      id={accordionInfo.id}
+                      title={accordionInfo.title}
+                      isOpened={accordionInfo.isOpened}
+                      ariaControls={accordionInfo.ariaControls}
+                      renderContent={(props) => (
+                        <TableFiltersAccordionContent {...props}>
+                          {Object.keys(accordionInfo.items).map((itemKey) => {
+                            const info = accordionInfo.items[itemKey];
+                            const extraProps: Partial<ICheckboxProps> = {};
+                            const currentState = !!localCheckboxData?.[
+                              accordionInfo.id
+                            ].selectedItemsDraft?.includes(info.name);
+                            if (info.isDisabled) {
+                              extraProps.initialState = currentState;
+                            } else {
+                              extraProps.externalState = currentState;
+                            }
+                            return (
+                              <TableFilterCheckbox
+                                key={info.key}
+                                name={info.name}
+                                id={info.key}
+                                onChange={onCheckboxChange(
+                                  groupName,
+                                  info.name,
+                                )}
+                                text={info.content.text}
+                                isDisabled={info.isDisabled}
+                                {...extraProps}
+                              />
+                            );
+                          })}
+                        </TableFiltersAccordionContent>
+                      )}
+                      renderTitle={AccordionTitle}
+                    />
+                  );
+                })}
+              </AccordionGroup>
+            </AccordionGroupContextProvider>
+          </PopoverDescription>
+          <hr css={tableFilterDividerStyles} />
+          <TableFiltersButtons onClear={handleClear} onCancel={handleReset} />
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/TableFilters/TableFiltersAccordion.tsx

@@ -0,0 +1,15 @@
+import { Accordion } from '@ssa-ui-kit/core';
+import { AccordionViewProps } from '@ssa-ui-kit/core/src/components/AccordionGroup/types';
+
+export const TableFiltersAccordion = (props: AccordionViewProps) => (
+  <Accordion
+    {...props}
+    css={{
+      display: props.isHidden ? 'none' : 'flex',
+      padding: '10px 0',
+      '&:last-child': {
+        paddingBottom: 0,
+      },
+    }}
+  />
+);

package/src/components/TableFilters/TableFiltersAccordionContent.tsx

@@ -0,0 +1,19 @@
+import { AccordionContent } from '@ssa-ui-kit/core';
+import { RenderContentProps } from '@ssa-ui-kit/core/src/components/AccordionGroup/types';
+
+export const TableFiltersAccordionContent = ({
+  isOpened,
+  children,
+  ...rest
+}: RenderContentProps & {
+  children: React.ReactNode;
+}) => (
+  <AccordionContent
+    {...rest}
+    isOpened={isOpened}
+    css={{
+      padding: isOpened ? '18px 3px 5px 3px' : 0,
+    }}>
+    {children}
+  </AccordionContent>
+);

package/src/components/TableFilters/TableFiltersButtons.tsx

@@ -0,0 +1,32 @@
+import { Button, Wrapper } from '@ssa-ui-kit/core';
+import { TableFiltersCancelButton } from './TableFilterCancelButton';
+import { TableFiltersClearButton } from './TableFilterClearButton';
+import { baseButtonStyle } from './styles';
+
+export const TableFiltersButtons = ({
+  onClear,
+  onCancel,
+}: {
+  onClear?: () => void;
+  onCancel?: () => void;
+}) => {
+  const handleOnClear = () => {
+    onClear?.();
+  };
+  const handleOnCancel = () => {
+    onCancel?.();
+  };
+  return (
+    <Wrapper css={{ gap: '10px', width: 'auto', alignSelf: 'end' }}>
+      <TableFiltersCancelButton onClick={handleOnCancel}>
+        Cancel
+      </TableFiltersCancelButton>
+      <TableFiltersClearButton onClick={handleOnClear}>
+        Clear
+      </TableFiltersClearButton>
+      <Button css={baseButtonStyle} variant="info" type="submit">
+        Apply
+      </Button>
+    </Wrapper>
+  );
+};