@ssa-ui-kit/widgets 0.0.1-alpha

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

@@ -0,0 +1,97 @@
+import { assocPath, propOr } from '@ssa-ui-kit/utils';
+import { useState, BaseSyntheticEvent, useEffect, createRef } from 'react';
+import { TableFilterConfig } from '../types';
+import {
+  getCheckboxChangedItems,
+  getClearData,
+  getResetData,
+  getSubmitData,
+} from '../utils/handlers';
+
+export interface UseTableDataParameters {
+  initialState?: TableFilterConfig;
+  wrapperRef?: React.RefObject<HTMLElement>;
+  handleCancel?: () => void;
+  handleClear?: () => void;
+  handleSubmit?: (data: Record<string, string[]>) => void;
+}
+
+export const useTableData = ({
+  initialState,
+  wrapperRef,
+  handleCancel,
+  handleSubmit,
+  handleClear,
+}: 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]);
+    }
+  };
+
+  useEffect(() => {
+    if (initialState) {
+      const data = JSON.parse(JSON.stringify(initialState));
+      Object.keys(initialState).forEach((groupName) => {
+        const groupInfo = propOr({}, groupName)(initialState);
+        const groupInfoSelectedItems = propOr([], 'selectedItems')(groupInfo);
+        data[groupName]['selectedItemsDraft'] = groupInfoSelectedItems;
+      });
+      setCheckboxData(data);
+    }
+  }, []);
+
+  const handleCheckboxToggle = (groupName: string, name: string | number) => {
+    const { items, path } = getCheckboxChangedItems(
+      checkboxData,
+      groupName,
+      name,
+    );
+    setCheckboxData(assocPath(path, items));
+  };
+
+  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,
+    handleCheckboxToggle,
+    onSubmit,
+    onReset,
+    onClear,
+  };
+};
+
+export type UseTableDataResult = ReturnType<typeof useTableData>;

package/src/components/TableFilters/index.ts

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

@@ -0,0 +1,35 @@
+import { mockData } from './mockData';
+import { useTableData } from '../hooks/useTableData';
+import { FiltersContextProvider } from '@components/Filters/FiltersContext';
+import { TableFiltersWrapper } from './TableFiltersWrapper';
+import { useRef } from 'react';
+import { Wrapper } from '@ssa-ui-kit/core';
+
+export const StoryComponent = () => {
+  const handleSubmit = (submitData: Record<string, string[]>) => {
+    console.log('>>>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

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

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

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

@@ -0,0 +1,114 @@
+import { TableFilterConfig } from '../types';
+
+export const mockData: TableFilterConfig = {
+  strategy: {
+    id: 'strategy',
+    title: 'Strategy',
+    isOpened: true,
+    ariaControls: 'strategy-panel',
+    selectedItems: ['checkbox1', 'checkbox4'],
+    items: {
+      checkbox1: {
+        key: 'strategy-checkbox1',
+        name: 'checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox1'],
+          text: 'checkbox1',
+        },
+      },
+      checkbox2: {
+        key: 'strategy-checkbox2',
+        name: 'checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox2'],
+          text: 'checkbox2',
+        },
+      },
+      checkbox3: {
+        key: 'strategy-checkbox3',
+        name: 'checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox3'],
+          text: 'checkbox3',
+        },
+      },
+      checkbox4: {
+        key: 'strategy-checkbox4',
+        name: 'checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox4'],
+          text: 'checkbox4',
+        },
+      },
+      checkbox5: {
+        key: 'strategy-checkbox5',
+        name: 'checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox5'],
+          text: 'checkbox5',
+        },
+      },
+    },
+  },
+  status: {
+    id: 'status',
+    title: 'Status',
+    isOpened: false,
+    ariaControls: 'status-panel',
+    selectedItems: ['running'],
+    items: {
+      running: {
+        key: 'status-checkbox-running',
+        name: 'running',
+        content: {
+          statePath: ['status', 'items', 'running'],
+          text: 'Running',
+        },
+      },
+      stopped: {
+        key: 'status-checkbox-stopped',
+        name: 'stopped',
+        content: {
+          statePath: ['status', 'items', 'stopped'],
+          text: 'Stopped',
+        },
+      },
+    },
+  },
+  pairs: {
+    id: 'pairs',
+    title: 'Pairs',
+    isOpened: false,
+    ariaControls: 'pairs-panel',
+    selectedItems: ['btcfdusd'],
+    items: {
+      btcfdusd: {
+        key: 'btcfdusd',
+        name: 'btcfdusd',
+        isDisabled: true,
+        content: {
+          statePath: ['pairs', 'items', 'btcfdusd'],
+          text: 'BTC-FDUSD',
+        },
+      },
+    },
+  },
+  exchange: {
+    id: 'exchange',
+    title: 'Exchange',
+    isOpened: false,
+    ariaControls: 'exchange-panel',
+    selectedItems: ['binance'],
+    items: {
+      binance: {
+        key: 'binance',
+        name: 'binance',
+        isDisabled: true,
+        content: {
+          statePath: ['exchange', 'items', 'binance'],
+          text: 'Binance',
+        },
+      },
+    },
+  },
+};

package/src/components/TableFilters/styles.ts

@@ -0,0 +1,26 @@
+import { Theme, css } from '@emotion/react';
+
+export const tableFilterPopoverContentStyles = (theme: Theme) => css`
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  border-radius: 20px;
+  padding: 20px 20px 14px 18px;
+  width: 340px;
+  background: ${theme.colors.white};
+`;
+
+export const tableFilterDividerStyles = (theme: Theme) => css`
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  width: calc(100% + 38px);
+  margin: 22px auto 14px -19px;
+`;
+
+export const baseButtonStyle = css`
+  padding: 0 14px;
+  height: 38px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: 600;
+  &:hover {
+    box-shadow: none;
+  }
+`;

package/src/components/TableFilters/types.ts

@@ -0,0 +1,33 @@
+export type CheckboxData = Record<string, string[]>;
+export type NotChangedData = Record<string, Record<string, boolean>>;
+
+export interface SingleItem {
+  key: string;
+  name: string;
+  isDisabled?: boolean;
+  content: {
+    statePath: string[];
+    text: string;
+  };
+}
+
+export interface AccordionInfo {
+  id: string;
+  title: string;
+  isOpened: boolean;
+  ariaControls: string;
+  isDisabled?: boolean;
+  items: Record<string, SingleItem>;
+  selectedItems: string[];
+  selectedItemsDraft?: string[];
+}
+
+export type TableFilterConfig = Record<string, AccordionInfo>;
+
+export interface TableFiltersView {
+  onReset?: () => void;
+  onClear?: () => void;
+  onSubmit?: () => void;
+  handleCheckboxToggle?: (groupName: string, name: string) => void;
+  checkboxData?: TableFilterConfig;
+}

package/src/components/TableFilters/utils/handlers.ts

@@ -0,0 +1,73 @@
+import { assocPath, pathOr } from '@ssa-ui-kit/utils';
+import { TableFilterConfig } from '../types';
+
+export const getSubmitData = (checkboxData: TableFilterConfig) => {
+  let submitCheckboxData: TableFilterConfig = JSON.parse(
+    JSON.stringify(checkboxData),
+  );
+  const dataForSubmit: Record<string, string[]> = {};
+  Object.keys(submitCheckboxData).forEach((groupName) => {
+    submitCheckboxData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItems'],
+      submitCheckboxData[groupName]['selectedItemsDraft'],
+    )(submitCheckboxData);
+    dataForSubmit[groupName] = submitCheckboxData[groupName][
+      'selectedItemsDraft'
+    ] as string[];
+  });
+  return {
+    submitCheckboxData,
+    dataForSubmit,
+  };
+};
+
+export const getResetData = (checkboxData: TableFilterConfig) => {
+  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
+  Object.keys(newData).forEach((groupName) => {
+    newData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItemsDraft'],
+      newData[groupName]['selectedItems'],
+    )(newData);
+  });
+  return newData;
+};
+
+export const getClearData = (checkboxData: TableFilterConfig) => {
+  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
+  Object.keys(checkboxData).forEach((groupName) => {
+    const notChangedData: string[] = [];
+    const selectedItems = checkboxData[groupName].selectedItems;
+    const currentItems = checkboxData[groupName].items;
+    Object.keys(checkboxData[groupName].items).forEach((itemKey) => {
+      const itemInfo = currentItems[itemKey];
+      if (itemInfo.isDisabled && selectedItems.includes(itemInfo.name)) {
+        notChangedData.push(itemInfo.name);
+      }
+    });
+    newData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItemsDraft'],
+      notChangedData,
+    )(newData);
+  });
+  return newData;
+};
+
+export const getCheckboxChangedItems = (
+  checkboxData: TableFilterConfig,
+  groupName: string,
+  name: string | number,
+) => {
+  const draftPath = [groupName, 'selectedItemsDraft'];
+  const selectedItemsDraft = pathOr<TableFilterConfig, string[]>(
+    [],
+    draftPath,
+  )(checkboxData);
+  const newSelectedItems = selectedItemsDraft.includes(`${name}`)
+    ? selectedItemsDraft.filter((currentItemName) => currentItemName !== name)
+    : [...selectedItemsDraft, name];
+
+  return {
+    items: newSelectedItems,
+    path: draftPath,
+  };
+};

package/src/components/TradingInfoCard/TradingInfoCard.e2e.ts

@@ -0,0 +1,16 @@
+import { test } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+test('Widgets: Trading Info Card Hover', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-tradinginfocard--with-tooltip&viewMode=story',
+  );
+  await page.getByTestId('tooltip-trigger').hover();
+
+  await page.screenshot({
+    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-trading-info-card--hover__[w1920px].png`,
+  });
+});

package/src/components/TradingInfoCard/TradingInfoCard.spec.tsx

@@ -0,0 +1,116 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '../../../customTest';
+
+import { Icon } from '@ssa-ui-kit/core';
+import TradingInfoCard from './TradingInfoCard';
+
+describe('TradingInfoCard', () => {
+  it('Renders with value and title', () => {
+    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
+
+    screen.getByText('400');
+    screen.getByText('Title');
+  });
+
+  it('Renders with value, title, and unit', () => {
+    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
+
+    screen.getByText('400');
+    screen.getByText('%');
+    screen.getByText('Title');
+  });
+
+  it('Renders with value, title, unit, and icon', async () => {
+    render(
+      <TradingInfoCard
+        value={'400'}
+        unit={'%'}
+        title={'Title'}
+        icon={<Icon name="arrow-up" color="#2CA24D" size={16} />}
+      />,
+    );
+
+    screen.getByText('400');
+    screen.getByText('%');
+    screen.getByText('Title');
+
+    await screen.findByTitle(/Arrow Up/i);
+  });
+
+  it('Renders with an integer value (no tooltip)', async () => {
+    const { queryByTestId } = render(
+      <TradingInfoCard value={400} title={'Title'} />,
+    );
+
+    screen.getByText('400');
+    await waitFor(() =>
+      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('Renders with a non-numeric value (no tooltip)', async () => {
+    const { queryByTestId } = render(
+      <TradingInfoCard value={'Test'} title={'Title'} />,
+    );
+
+    screen.getByText('Test');
+    await waitFor(() =>
+      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('Renders with a numeric value (tooltip) ', async () => {
+    const user = userEvent.setup();
+    const { getByTestId, queryByTestId, findByTestId } = render(
+      <TradingInfoCard value={400.5} title={'Title'} />,
+    );
+
+    const tooltipEl = getByTestId('tooltip-trigger');
+
+    await user.hover(tooltipEl);
+    await findByTestId('floating-arrow');
+
+    await user.unhover(tooltipEl);
+    await waitFor(() =>
+      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('Calls onClick handler when clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+
+    const { getByRole } = render(
+      <TradingInfoCard
+        value={'400.500'}
+        title={'Title'}
+        onClick={mockOnClick}
+      />,
+    );
+
+    const button = getByRole('button');
+
+    await user.click(button);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+    expect(button).toHaveAttribute('tabindex', '0');
+  });
+
+  it('Renders with link prop', () => {
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={
+              <TradingInfoCard value={'5000'} title={'Test'} link={'/'} />
+            }
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(getByRole('link')).toHaveAttribute('href', '/');
+  });
+});

package/src/components/TradingInfoCard/TradingInfoCard.stories.tsx

@@ -0,0 +1,118 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@ssa-ui-kit/core';
+import TradingInfoCard from './TradingInfoCard';
+import { ITradingInfoCardProps } from './types';
+
+export default {
+  title: 'Widgets/TradingInfoCard',
+  component: TradingInfoCard,
+} as Meta<typeof TradingInfoCard>;
+
+export const Default: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+      onClick={() => alert('clicked!')}
+    />
+  );
+};
+
+Default.args = {
+  value: '500',
+  unit: 'USD',
+  title: 'Turnover',
+};
+
+export const WithLink: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <TradingInfoCard
+              value={args.value}
+              unit={args.unit}
+              title={args.title}
+              icon={args.icon}
+              link={'/link'}
+            />
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {
+  value: '500',
+  unit: 'USD',
+  title: 'Turnover',
+};
+
+export const WithTooltip: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+      onClick={() => alert('clicked!')}
+    />
+  );
+};
+
+WithTooltip.args = {
+  value: '500.025',
+  unit: 'USD',
+  title: 'Turnover',
+};
+
+export const WithIcon: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+      onClick={() => alert('clicked!')}
+    />
+  );
+};
+
+WithIcon.args = {
+  value: '500.025',
+  unit: 'USD',
+  title: 'Turnover',
+  icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+};
+
+export const WithoutUnit: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+    />
+  );
+};
+
+WithoutUnit.args = {
+  value: 'ETH/USDT',
+  title: 'Pairs',
+};