@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

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

@@ -1,97 +1,107 @@
-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>;
+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;
+}
+
+export const useTableData = ({
+  initialState,
+  wrapperRef,
+  updatedCheckboxData,
+  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]);
+    }
+  };
+
+  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);
+  }, [updatedCheckboxData]);
+
+  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

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

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