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

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

@@ -1,171 +0,0 @@
-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,
-  onCheckboxToggle: jest.fn(),
-  onDropdownChange: 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();
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  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('>>>TableFilters 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

@@ -1,187 +0,0 @@
-import {
-  BaseSyntheticEvent,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
-import { assocPath } from '@ssa-ui-kit/utils';
-import {
-  AccordionTitle,
-  AccordionGroup,
-  AccordionGroupContextProvider,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  CheckboxProps,
-} 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,
-  onCheckboxToggle,
-  handleMoreButtonVisibleChange,
-}: TableFiltersView) => {
-  const [localCheckboxData, setLocalCheckboxData] =
-    useState<TableFilterConfig>(checkboxData);
-  const [selectedGroupsCount, setSelectedGroupsCount] = useState(0);
-  const [isMoreButtonVisible, setIsMoreButtonVisible] = useState(false);
-
-  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);
-    }
-    const isMoreButtonVisibleLocal = !(
-      Object.keys(localCheckboxData).length === 0
-    );
-    setIsMoreButtonVisible(isMoreButtonVisibleLocal);
-  }, [localCheckboxData]);
-
-  useEffect(() => {
-    handleMoreButtonVisibleChange?.(isMoreButtonVisible);
-  }, [isMoreButtonVisible]);
-
-  const onCheckboxChange = (groupName: string, name: string) => () => {
-    const { items, path } = getCheckboxChangedItems(
-      localCheckboxData,
-      groupName,
-      name,
-    );
-    setLocalCheckboxData(assocPath(path, items));
-    onCheckboxToggle?.(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={isMoreButtonVisible}
-      />
-      <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<CheckboxProps> = {};
-                            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

@@ -1,14 +0,0 @@
-import { Accordion, AccordionViewProps } from '@ssa-ui-kit/core';
-
-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

@@ -1,18 +0,0 @@
-import { AccordionContent, RenderContentProps } from '@ssa-ui-kit/core';
-
-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

@@ -1,32 +0,0 @@
-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>
-  );
-};

package/src/components/TableFilters/hooks/useTableData.ts

@@ -1,137 +0,0 @@
-import { useState, BaseSyntheticEvent, useEffect, createRef } from 'react';
-import { assocPath, propOr } from '@ssa-ui-kit/utils';
-import { TableFilterConfig } from '../types';
-import {
-  getCheckboxChangedItems,
-  getClearData,
-  getResetData,
-  getSubmitData,
-} from '../utils/handlers';
-
-export interface UseTableDataParameters {
-  initialState?: TableFilterConfig;
-  wrapperRef?: React.RefObject<HTMLElement>;
-  updatedCheckboxData?: TableFilterConfig;
-  handleCancel?: () => void;
-  handleClear?: () => void;
-  handleSubmit?: (data: Record<string, string[]>) => void;
-  handleDropdownChange?: (data: {
-    groupName: string;
-    name: string | number;
-    checked: boolean;
-  }) => void;
-}
-
-export const useTableData = ({
-  initialState,
-  wrapperRef,
-  updatedCheckboxData,
-  handleCancel,
-  handleSubmit,
-  handleClear,
-  handleDropdownChange,
-}: UseTableDataParameters) => {
-  const [checkboxData, setCheckboxData] = useState<TableFilterConfig>(
-    {} as TableFilterConfig,
-  );
-
-  const [refsList, setRefsList] = useState<
-    Array<React.MutableRefObject<HTMLElement | null>>
-  >([]);
-  const [groupNames, setGroupNames] = useState<string[]>([]);
-
-  const setElementRef = (groupName: string, element: HTMLElement | null) => {
-    if (element !== null && !groupNames.includes(groupName)) {
-      const newRef: React.MutableRefObject<HTMLElement | null> =
-        createRef<HTMLElement>();
-      newRef.current = element;
-      setRefsList((currentList) => [...currentList, newRef]);
-      setGroupNames((currentList) => [...currentList, groupName]);
-    }
-  };
-
-  const proceedSettingCheckboxData = (newCheckboxData?: TableFilterConfig) => {
-    if (newCheckboxData) {
-      const data = JSON.parse(JSON.stringify(newCheckboxData));
-      Object.keys(newCheckboxData).forEach((groupName) => {
-        const groupInfo = propOr({}, groupName)(newCheckboxData);
-        const groupInfoSelectedItems = propOr([], 'selectedItems')(groupInfo);
-        data[groupName]['selectedItemsDraft'] = groupInfoSelectedItems;
-      });
-      setCheckboxData(data);
-    }
-  };
-
-  useEffect(() => {
-    proceedSettingCheckboxData(initialState);
-  }, []);
-
-  useEffect(() => {
-    proceedSettingCheckboxData(updatedCheckboxData);
-  }, [JSON.stringify(updatedCheckboxData)]);
-
-  const onCheckboxToggle = (groupName: string, name: string | number) => {
-    const { items, path } = getCheckboxChangedItems(
-      checkboxData,
-      groupName,
-      name,
-    );
-    setCheckboxData(assocPath(path, items));
-  };
-
-  const onDropdownChange = (groupName: string, name: string | number) => {
-    const { items, path } = getCheckboxChangedItems(
-      checkboxData,
-      groupName,
-      name,
-    );
-    const newCheckboxData = assocPath<TableFilterConfig>(
-      path,
-      items,
-    )(checkboxData);
-    handleDropdownChange?.({
-      groupName,
-      name,
-      checked: items.includes(name),
-    });
-
-    const { submitCheckboxData, dataForSubmit } =
-      getSubmitData(newCheckboxData);
-
-    setCheckboxData(submitCheckboxData);
-    handleSubmit?.(dataForSubmit);
-  };
-
-  const onSubmit = (event?: BaseSyntheticEvent) => {
-    event?.preventDefault();
-    const { submitCheckboxData, dataForSubmit } = getSubmitData(checkboxData);
-    setCheckboxData(submitCheckboxData);
-    handleSubmit?.(dataForSubmit);
-  };
-
-  const onReset = () => {
-    const resetData = getResetData(checkboxData);
-    setCheckboxData(resetData);
-    handleCancel?.();
-  };
-
-  const onClear = () => {
-    const newData = getClearData(checkboxData);
-    setCheckboxData(newData);
-    handleClear?.();
-  };
-
-  return {
-    checkboxData,
-    wrapperRef,
-    refsList,
-    setElementRef,
-    onCheckboxToggle,
-    onDropdownChange,
-    onSubmit,
-    onReset,
-    onClear,
-  };
-};
-
-export type UseTableDataResult = ReturnType<typeof useTableData>;

package/src/components/TableFilters/index.ts

@@ -1,9 +0,0 @@
-export * from './TableFilterCancelButton';
-export * from './TableFilterCheckbox';
-export * from './TableFilterClearButton';
-export * from './TableFilterTrigger';
-export * from './TableFilterTriggerWithNotification';
-export * from './TableFiltersAccordion';
-export * from './TableFiltersAccordionContent';
-export * from './TableFiltersButtons';
-export * from './TableFilters';

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

@@ -1,35 +0,0 @@
-import { useRef } from 'react';
-import { Wrapper } from '@ssa-ui-kit/core';
-import { FiltersContextProvider } from '@components/Filters/FiltersContext';
-import { mockData } from './mockData';
-import { useTableData } from '../hooks/useTableData';
-import { TableFiltersWrapper } from './TableFiltersWrapper';
-
-export const StoryComponent = () => {
-  const handleSubmit = (submitData: Record<string, string[]>) => {
-    console.log('>>>TableFilters onSubmit', submitData);
-  };
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const useTableDataResult = useTableData({
-    initialState: mockData,
-    wrapperRef,
-    handleSubmit,
-  });
-
-  return (
-    <div
-      css={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <FiltersContextProvider {...useTableDataResult}>
-        <Wrapper direction="column" ref={wrapperRef}>
-          <TableFiltersWrapper />
-        </Wrapper>
-      </FiltersContextProvider>
-    </div>
-  );
-};

package/src/components/TableFilters/stories/TableFilters.stories.tsx

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

package/src/components/TableFilters/stories/TableFiltersWrapper.tsx

@@ -1,7 +0,0 @@
-import { useFiltersContext } from '@components/Filters/FiltersContext';
-import { TableFilters } from '..';
-
-export const TableFiltersWrapper = () => {
-  const data = useFiltersContext();
-  return <TableFilters {...data} />;
-};