@ssa-ui-kit/core 0.0.27-alpha → 0.0.29-alpha

package/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,70 @@
+import { KeyboardEvent, useEffect, useRef } from 'react';
+import { useWatch } from 'react-hook-form';
+import Icon from '@components/Icon';
+import { debounce } from '@ssa-ui-kit/utils';
+import { SearchBoxWrapper } from './SearchBoxWrapper';
+import { SearchBoxInput } from './SearchBoxInput';
+import { SearchBoxCrossIcon } from '.';
+import { SearchBoxProps } from './types';
+
+export const SearchBox = ({
+  name,
+  placeholder = 'Search by name',
+  control,
+  callbackDelay = 500,
+  autoSearchTrigger = true,
+  register,
+  resetField,
+  callback,
+  ...rest
+}: SearchBoxProps) => {
+  const watchResult = useWatch({ control });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceThrottled = useRef(debounce(callback, callbackDelay));
+  const [debouncedFn, cancel] = debounceThrottled.current;
+
+  useEffect(() => {
+    const searchTerm = watchResult[name];
+    if (autoSearchTrigger && searchTerm !== undefined) {
+      debouncedFn(searchTerm);
+    }
+  }, [watchResult]);
+
+  const crossIconHandler = () => {
+    resetField(name, {
+      defaultValue: '',
+    });
+    inputRef.current?.focus();
+  };
+
+  const EndElement = !watchResult[name] ? (
+    <div data-testid="search-icon">
+      <Icon name="search" size={15} color="#55575A" />
+    </div>
+  ) : (
+    <SearchBoxCrossIcon onClick={crossIconHandler} />
+  );
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      cancel();
+      callback(watchResult[name]);
+    }
+  };
+
+  return (
+    <SearchBoxWrapper>
+      <SearchBoxInput
+        name={name}
+        endElement={EndElement}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+        status="custom"
+        onKeyUp={onKeyUp}
+        {...rest}
+        ref={inputRef}
+      />
+    </SearchBoxWrapper>
+  );
+};

package/src/components/SearchBox/SearchBoxCrossIcon.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from '@emotion/react';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+
+export const SearchBoxCrossIcon = ({
+  onClick,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const theme = useTheme();
+  return (
+    <Button
+      onClick={onClick}
+      variant="custom"
+      data-testid="cross-icon"
+      css={{
+        padding: 0,
+        background: 'none',
+        '& svg path': {
+          strokeWidth: 1,
+          stroke: theme.colors.greyFilterIcon,
+        },
+      }}>
+      <Icon name="cross" size={15} color="#55575A" />
+    </Button>
+  );
+};

package/src/components/SearchBox/SearchBoxInput.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import Input from '@components/Input';
+
+export const SearchBoxInput = styled(Input)`
+  height: 30px;
+  font-size: 12px;
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.colors.greyLighter};
+  border: 1px solid #dee0e8;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  padding-right: 20px;
+  &::placeholder {
+    color: #55575a;
+    font-weight: 500;
+  }
+  &:hover {
+    border: ${({ theme }) => `1px solid ${theme.colors.greyDropdownFocused}`};
+  }
+  & + div {
+    right: 11px;
+    & svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    height: 36px;
+    font-size: 14px;
+    padding-right: 40px;
+    & + div {
+      right: 23px;
+      & svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    height: 40px;
+  }
+`;

package/src/components/SearchBox/SearchBoxWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const SearchBoxWrapper = styled.div`
+  width: 139px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    width: 180px;
+  }
+`;

package/src/components/SearchBox/index.ts

@@ -0,0 +1,4 @@
+export { SearchBox } from './SearchBox';
+export { SearchBoxCrossIcon } from './SearchBoxCrossIcon';
+export { SearchBoxInput } from './SearchBoxInput';
+export { SearchBoxWrapper } from './SearchBoxWrapper';

package/src/components/SearchBox/stories/SearchBox.stories.tsx

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

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

@@ -0,0 +1,25 @@
+import { FieldValues, useForm } from 'react-hook-form';
+
+import { SearchBox } from '..';
+
+export const StoryComponent = ({
+  handleCallback,
+}: {
+  handleCallback?: (searchTerm: string) => void;
+}) => {
+  const { register, control, resetField } = useForm<FieldValues>();
+
+  const onCallback = (searchTerm: string) => {
+    console.log('Searching for the term...', searchTerm);
+  };
+
+  return (
+    <SearchBox
+      register={register}
+      control={control}
+      resetField={resetField}
+      callback={handleCallback || onCallback}
+      name={'search'}
+    />
+  );
+};

package/src/components/SearchBox/types.ts

@@ -0,0 +1,9 @@
+import { InputProps } from '@components/Input/types';
+import { UseFormReturn } from 'react-hook-form';
+
+export type SearchBoxProps = InputProps &
+  Pick<UseFormReturn, 'control' | 'resetField'> & {
+    callback: (searchTerm: string) => void;
+    callbackDelay?: number;
+    autoSearchTrigger?: boolean;
+  };

package/src/components/TabBar/stories/TimePeriodTabBar.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable prettier/prettier */
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import TabBar from '@components/TabBar';
 import Tab from '@components/Tab';
 

package/src/components/TabBar/stories/WeekTabBar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import TabBar from '@components/TabBar';
 import LargeTab from '@components/LargeTab';
 

package/src/components/TableFilters/TableFilterCancelButton.tsx

@@ -0,0 +1,39 @@
+import { PopoverClose } from '@components/Popover';
+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,25 @@
+import Checkbox from '@components/Checkbox';
+import { CheckboxProps, checkboxStyles } from '@components/Checkbox';
+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: CheckboxProps) => {
+  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 '@components/Button';
+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,67 @@
+import { css, useTheme } from '@emotion/react';
+import { PopoverTrigger } from '@components/Popover';
+import Icon from '@components/Icon';
+import { Theme } from '@emotion/react';
+
+export const filterButtonStyles = (count?: number) => (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;
+
+    &::before {
+      display: block;
+      content: '"Filter"';
+      content: ${count ? '"More"' : '"Filter"'};
+    }
+
+    @media screen and (min-width: 900px) {
+      &::before {
+        content: 'More';
+      }
+    }
+
+    &:hover {
+      border-color: ${theme.colors.greyDropdownFocused};
+    }
+
+    &:active {
+      border-color: ${theme.colors.blueNotification};
+    }
+
+    &:disabled {
+      background: ${theme.colors.grey};
+    }
+  `;
+
+export const TableFilterTrigger = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  children,
+  count,
+  ...rest
+}: {
+  children?: React.ReactNode;
+  count?: number;
+  as?: string;
+  className?: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <PopoverTrigger
+      variant="custom"
+      css={filterButtonStyles(count)}
+      endIcon={
+        <Icon name="filter" color={theme.colors.greyFilterIcon} size={20} />
+      }
+      {...rest}>
+      {children}
+    </PopoverTrigger>
+  );
+};

package/src/components/TableFilters/TableFilterTriggerWithNotification.tsx

@@ -0,0 +1,44 @@
+import { Interpolation, Theme, useTheme } from '@emotion/react';
+import MultipleDropdownNotification from '@components/MultipleDropdownNotification';
+import { TableFilterTrigger } from './TableFilterTrigger';
+
+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} count={count}>
+      {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,32 @@
+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:6006/iframe.html?args=&id=widgets-tablefilters--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: TableFilters', () => {
+  test('Renders correctly', async ({ page }) => {
+    await gotoPage(page);
+    const triggerButton = page.getByTestId('trigger-button');
+    const beforeContent = await triggerButton.evaluate((el) => {
+      return window.getComputedStyle(el, ':before').content;
+    });
+    expect(beforeContent).toEqual('"More"');
+  });
+
+  test('Opens popover', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.getByTestId('trigger-button').click();
+
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+    });
+  });
+});

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

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