@ssa-ui-kit/widgets 0.0.29-alpha → 0.0.31-alpha

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} />;
-};

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

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

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

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