@ssa-ui-kit/core 1.0.14 → 1.0.17

package/dist/styles/safari-focus-outline.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme, SerializedStyles } from '@emotion/react';
 type OutlineFn = (theme: Theme, color?: keyof Theme['colors'], borderRadius?: string, borderStyle?: React.CSSProperties['borderStyle']) => SerializedStyles;
 export declare const focusOutline: OutlineFn;

package/dist/types/emotion.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type RGBString = `rgb${string}`;
 type MakeColors<T extends Array<string>> = {
     [K in T[number]]?: RGBString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
     "@nivo/line": "0.83.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.48.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@types/uuid": "^9.0.3",
@@ -69,6 +69,7 @@
   "scripts": {
     "test": "jest -i --no-cache",
     "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "build:watch": "webpack --mode=production --node-env=production --watch && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
     "sb:dev": "storybook dev -p 6006",
     "sb:build": "storybook build",
     "test:e2e": "pnpm exec playwright test --project=chromium",

package/src/components/Filters/FiltersBlock.tsx

@@ -1,42 +1,17 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTheme } from '@emotion/react';
 import DropdownOption from '@components/DropdownOption';
 import MultipleDropdown from '@components/MultipleDropdown';
 import { useFiltersContext } from './FiltersContext';
+import { useFiltersBlock } from './hooks/useFiltersBlock';
 
 export const FiltersBlock = () => {
-  const { setElementRef, onDropdownChange, checkboxData } = useFiltersContext();
-  const handleOnChange = (groupName: string) => (item: string | number) => {
-    onDropdownChange(groupName, item);
-  };
-
-  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
-    Record<string, Array<{ value: string }>>
-  >({});
-
   const theme = useTheme();
-
-  useEffect(() => {
-    const newData: Record<
-      string,
-      Array<{
-        value: string;
-      }>
-    > = {};
-    Object.keys(checkboxData).map((groupName) => {
-      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
-      if (selectedItems) {
-        newData[groupName] = selectedItems.map((item) => ({
-          value: item,
-        }));
-      }
-    });
-    setSelectedItemsWithValue(newData);
-  }, [checkboxData]);
+  const { setElementRef, checkboxData } = useFiltersContext();
+  const { selectedItemsWithValue, handleOnChange } = useFiltersBlock();
 
   return (
-    <>
+    <React.Fragment>
       {Object.keys(checkboxData).map((groupName) => {
         const accordionInfo = checkboxData[groupName];
         const selectedItems = selectedItemsWithValue[groupName];
@@ -74,6 +49,6 @@ export const FiltersBlock = () => {
           </MultipleDropdown>
         );
       })}
-    </>
+    </React.Fragment>
   );
 };

package/src/components/Filters/hooks/useFiltersBlock.ts

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFiltersContext } from '../FiltersContext';
+
+export const useFiltersBlock = () => {
+  const { onDropdownChange, checkboxData } = useFiltersContext();
+
+  const handleOnChange = (groupName: string) => (item: string | number) => {
+    onDropdownChange(groupName, item);
+  };
+
+  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
+    Record<string, Array<{ value: string }>>
+  >({});
+
+  const memoSelectedItemsWithValue = useMemo(
+    () => selectedItemsWithValue,
+    [JSON.stringify(selectedItemsWithValue)],
+  );
+
+  useEffect(() => {
+    const newData: Record<
+      string,
+      Array<{
+        value: string;
+      }>
+    > = {};
+    Object.keys(checkboxData).map((groupName) => {
+      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
+      if (selectedItems) {
+        newData[groupName] = selectedItems.map((item) => ({
+          value: item,
+        }));
+      }
+    });
+    setSelectedItemsWithValue(newData);
+  }, [checkboxData]);
+
+  return { selectedItemsWithValue: memoSelectedItemsWithValue, handleOnChange };
+};

package/src/components/Indicator/Indicator.tsx

@@ -15,9 +15,7 @@ const Indicator = ({
   const indicatorRef = useRef<HTMLDivElement>(null);
   const childrenRef = useRef<HTMLDivElement | null>(null);
   const [width, setWidth] = useState<number>(0);
-  const [childrenData, setChildrenData] = useState<ChildrenDataProps | null>(
-    {} || null,
-  );
+  const [childrenData, setChildrenData] = useState<ChildrenDataProps>({});
   const { width: windowWidth } = useWindowSize();
   const theme = useTheme();
 
@@ -32,8 +30,17 @@ const Indicator = ({
         width: childrenRef.current.offsetWidth,
         right: childrenRef.current.offsetWidth + childrenRef.current.offsetLeft,
       };
-      setWidth(refValue);
-      setChildrenData(refData);
+      if (refValue !== width) {
+        setWidth(refValue);
+      }
+      if (
+        childrenData.top !== refData.top ||
+        childrenData.left !== refData.left ||
+        childrenData.width !== refData.width ||
+        childrenData.right !== refData.right
+      ) {
+        setChildrenData(refData);
+      }
     }
   }, [width, childrenRef.current, windowWidth]);
 
@@ -44,7 +51,7 @@ const Indicator = ({
           data-testid={`indicator-${position}`}
           ref={indicatorRef}
           css={
-            childrenData && [
+            Object.keys(childrenData).length > 0 && [
               css`
                 top: ${childrenData.top + 2}px;
                 left: ${isRight ? '-6px' : '1px'};

package/src/components/SegmentedPieChart/components/ChartTooltip.tsx

@@ -25,7 +25,7 @@ export const ChartTooltip = ({
             pointData.legendValueRoundingDigits,
           )
         : getRoundedNumber(
-            pointData.value,
+            pointData.mainValue,
             pointData.legendValueRoundingDigits,
           ),
     label: pointData.legendLabel || pointData.label,

package/src/components/SegmentedPieChart/hooks/useData.ts

@@ -31,6 +31,7 @@ export const useData = ({
       label: item.label,
       percentage: mainPercentage,
       mainId: Number(item.id),
+      mainValue: item.value,
       legendLabel: item.legendLabel,
       legendValue: item.legendValue,
       legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
@@ -42,28 +43,31 @@ export const useData = ({
     };
     balanceDataForTheLegend.push(newMainItem);
     if (item.parts?.length) {
-      item.parts?.forEach((part, partIndex) => {
-        const partPercentage = (part.value * 100) / calculatedTotalAmount;
-        balanceDataForTheGraph.push({
-          value: item.value,
-          label: item.label,
-          percentage: mainPercentage,
-          mainId: Number(item.id),
-          legendLabel: item.legendLabel,
-          legendValue: item.legendValue,
-          legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
-            legendValueRoundingDigits,
-            'legendValueRoundingDigits',
-          )(item),
-          color: pieChartColorsLocal?.[itemIndex]?.[partIndex],
-          id: `${itemIndex}${partIndex}`,
-          partIndex,
-          partLabel: part.label,
-          partPercentage: Number(partPercentage),
-          partValue: part.value,
-          partLegendValue: part.legendValue,
+      item.parts
+        ?.filter((part) => !!part.value)
+        .forEach((part, partIndex) => {
+          const partPercentage = (part.value * 100) / calculatedTotalAmount;
+          balanceDataForTheGraph.push({
+            value: part.value,
+            label: item.label,
+            percentage: mainPercentage,
+            mainId: Number(item.id),
+            mainValue: item.value,
+            legendLabel: item.legendLabel,
+            legendValue: item.legendValue,
+            legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
+              legendValueRoundingDigits,
+              'legendValueRoundingDigits',
+            )(item),
+            color: pieChartColorsLocal?.[itemIndex]?.[partIndex],
+            id: `${itemIndex}${partIndex}`,
+            partIndex,
+            partLabel: part.label,
+            partPercentage: Number(partPercentage),
+            partValue: part.value,
+            partLegendValue: part.legendValue,
+          });
         });
-      });
     } else {
       balanceDataForTheGraph.push(newMainItem);
     }

package/src/components/SegmentedPieChart/stories/fixtures.ts

@@ -100,6 +100,89 @@ export const balanceData: SegmentedDataSet = [
   },
 ];
 
+export const balanceDataNullable: SegmentedDataSet = [
+  {
+    id: 1,
+    value: 5843.37,
+    legendValue: 5843.37 / RATE.BTC,
+    legendLabel: 'BTC',
+    label: 'BTC',
+    legendValueRoundingDigits: 6,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 5843.37,
+        legendValue: 5843.37 / RATE.BTC,
+      },
+      {
+        label: 'Option 2',
+        value: 0,
+        legendValue: 0,
+      },
+    ],
+  },
+  {
+    id: 2,
+    value: 5249.25,
+    legendValue: 5249.25 / RATE.ETH,
+    legendLabel: 'ETH',
+    label: 'ETH',
+    legendValueRoundingDigits: 2,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 2800,
+        legendValue: 2800 / RATE.ETH,
+      },
+      {
+        label: 'Option 2',
+        value: 2449.25,
+        legendValue: 2449.25 / RATE.ETH,
+      },
+    ],
+  },
+  {
+    id: 3,
+    value: 3825.55,
+    legendValue: 3825.55 / RATE.FDUSD,
+    legendLabel: 'FDUSD',
+    label: 'FDUSD',
+    legendValueRoundingDigits: 2,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 3825.55,
+        legendValue: 3825.55 / RATE.FDUSD,
+      },
+      {
+        label: 'Option 2',
+        value: 0,
+        legendValue: 0,
+      },
+    ],
+  },
+  {
+    id: 4,
+    value: 2818.83,
+    legendValue: 2818.83 / RATE.USDT,
+    label: 'Other',
+    legendLabel: 'USDT',
+    legendValueRoundingDigits: 0,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 2818.83,
+        legendValue: 2818.83 / RATE.USDT,
+      },
+      {
+        label: 'Option 2',
+        value: 0,
+        legendValue: 0,
+      },
+    ],
+  },
+];
+
 export const balanceTotalAmount = balanceData
   .map((item) => Number(item.value))
   .reduce((acc, currentValue) => acc + currentValue, 0);

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}