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

package/src/components/TableFilters/TableFilters.tsx

@@ -0,0 +1,189 @@
+import {
+  BaseSyntheticEvent,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { assocPath } from '@ssa-ui-kit/utils';
+import {
+  AccordionTitle,
+  AccordionGroup,
+  AccordionGroupContextProvider,
+} from '@components/AccordionGroup';
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+} from '@components/Popover';
+import { CheckboxProps } from '@components/Checkbox';
+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

@@ -0,0 +1,14 @@
+import { Accordion, AccordionViewProps } from '@components/AccordionGroup';
+
+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,21 @@
+import {
+  AccordionContent,
+  RenderContentProps,
+} from '@components/AccordionGroup';
+
+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,33 @@
+import Button from '@components/Button';
+import Wrapper from '@components/Wrapper';
+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

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

@@ -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 { useRef } from 'react';
+import Wrapper from '@components/Wrapper';
+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

@@ -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,34 @@
+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;
+  onCheckboxToggle?: (groupName: string, name: string) => void;
+  handleMoreButtonVisibleChange?: (isVisible: boolean) => void;
+  checkboxData?: TableFilterConfig;
+}