@ssa-ui-kit/core 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/LinksTabBar/LinksTabBar.spec.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import userEvent from '@testing-library/user-event';
 import { links } from './stories/mockData';
 import { MemoryRouterDecorator } from './stories/decorators';
-
 import { LinksTabBar } from './index';
 
 function setup(Component: React.ElementType) {

package/src/components/PieChart/PieChart.tsx

@@ -4,7 +4,6 @@ import { PieChartProps } from './types';
 import { PieChartBase, PieChartTextBase } from './PieChartBases';
 
 export const PieChart = ({
-  data,
   as,
   className,
   title,
@@ -15,7 +14,6 @@ export const PieChart = ({
     <PieChartBase as={as} className={className}>
       <div className="pie-chart-wrapper">
         <ResponsivePie
-          data={data}
           isInteractive={false}
           innerRadius={0.8}
           enableArcLinkLabels={false}
@@ -29,7 +27,7 @@ export const PieChart = ({
           arcLinkLabelsThickness={2}
           arcLinkLabelsColor={{ from: 'color' }}
           arcLabelsSkipAngle={10}
-          layers={['arcs']}
+          layers={['arcs', 'arcLinkLabels', 'arcLabels']}
           {...chartProps}
         />
         {title && <PieChartTextBase>{title}</PieChartTextBase>}

package/src/components/PieChart/PieChartBases.tsx

@@ -17,6 +17,7 @@ export const PieChartTextBase = styled.div`
   position: absolute;
   width: 100%;
   height: 100%;
+  pointer-events: none;
   top: 0;
   left: 0;
   display: flex;

package/src/components/PieChart/PieChartLegend.tsx

@@ -9,6 +9,7 @@ import { PieChartLegendProps } from './types';
 export const PieChartLegend = ({
   data,
   colors,
+  backgroundColors,
   renderLabel,
   renderValue,
   markerStyles,
@@ -27,7 +28,12 @@ export const PieChartLegend = ({
           return (
             <li key={`tag-${id}`}>
               <PieChartLegendMarker
-                color={colors[index] || 'purple'}
+                color={
+                  backgroundColors ? undefined : colors?.[index] || 'purple'
+                }
+                background={
+                  backgroundColors ? backgroundColors[index] : undefined
+                }
                 as={'span'}
                 css={markerStyles}
               />

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import Badge from '@components/Badge';
 
-export const PieChartLegendMarker = styled(Badge)`
+export const PieChartLegendMarker = styled(Badge)<{ background?: string }>`
   display: inline-block;
 
   padding: 0;
@@ -9,4 +9,6 @@ export const PieChartLegendMarker = styled(Badge)`
 
   width: 8px;
   height: 8px;
+
+  background: ${({ background }) => background};
 `;

package/src/components/PieChart/types.ts

@@ -18,7 +18,8 @@ export type PieChartLegendItem = {
 
 export interface PieChartLegendProps {
   data: Array<PieChartLegendItem>;
-  colors: Array<keyof MainColors>;
+  colors?: Array<keyof MainColors>;
+  backgroundColors?: Array<string>;
   renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   className?: string;

package/src/components/SegmentedPieChart/SegmentedPieChart.spec.tsx

@@ -0,0 +1,29 @@
+import { SegmentedPieChart } from './index';
+import { balanceData } from './stories/fixtures';
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('SegmentedPieChart', () => {
+  it('Renders with a Legend', () => {
+    const { getByTestId, getByRole, getByText } = render(
+      <SegmentedPieChart data={balanceData} />,
+    );
+
+    getByTestId('responsive-pie');
+    getByText('17737');
+
+    for (const { label, value, percentage } of balanceData) {
+      getByRole('heading', { name: label });
+      if (label === 'Other') {
+        getByRole('heading', { name: `${value} USD (${percentage}%)` });
+      } else {
+        getByRole('heading', { name: `${value} ${label} (${percentage}%)` });
+      }
+    }
+  });
+});

package/src/components/SegmentedPieChart/SegmentedPieChart.tsx

@@ -0,0 +1,154 @@
+import { css, useTheme } from '@emotion/react';
+import { pathOr } from '@ssa-ui-kit/utils';
+import { Typography, Wrapper, PieChart, PieChartLegend } from '@components';
+import {
+  defaultLegendBackgrounds,
+  defaultPieChartColors,
+} from './colorPalettes';
+import { BalanceDataForGraph, SegmentedPieChartProps } from './types';
+
+export const SegmentedPieChart = ({
+  data,
+  pieChartProps,
+  pieChartLegendProps,
+  legendBackgrounds = defaultLegendBackgrounds,
+  pieChartColors = defaultPieChartColors,
+  currency = 'USD',
+  otherLabel = 'Other',
+}: SegmentedPieChartProps) => {
+  const theme = useTheme();
+
+  const balanceDataForTheGraph: BalanceDataForGraph[] = [];
+  let balanceDataTotal = 0;
+  data?.forEach((item, itemIndex) => {
+    if (item.parts?.length) {
+      item.parts?.forEach((part, partIndex) => {
+        balanceDataForTheGraph.push({
+          mainLabel: item.label,
+          mainPercentage: item.percentage,
+          partLabel: part.label,
+          partPercentage: part.percentage,
+          color: pieChartColors[itemIndex][partIndex],
+          id: `${itemIndex}${partIndex}`,
+          mainId: item.id,
+          value: part.percentage,
+        });
+      });
+    } else {
+      balanceDataForTheGraph.push({
+        mainLabel: item.label,
+        mainPercentage: item.percentage,
+        color: pieChartColors[itemIndex][0],
+        id: `${itemIndex}${0}`,
+        mainId: item.id,
+        value: item.percentage,
+      });
+    }
+    balanceDataTotal += item.value;
+  });
+
+  return (
+    <PieChart
+      data={balanceDataForTheGraph}
+      animate={true}
+      css={{
+        width: 500,
+        padding: 50,
+      }}
+      isInteractive
+      activeInnerRadiusOffset={0}
+      activeOuterRadiusOffset={0}
+      tooltip={(point) => {
+        const pointData = pathOr<typeof point, BalanceDataForGraph>({}, [
+          'datum',
+          'data',
+        ])(point);
+        return (
+          <Wrapper
+            css={{
+              background: theme.colors.greyLighter,
+              flexDirection: 'column',
+              borderRadius: 8,
+              padding: 5,
+              fontSize: 12,
+              fontWeight: 500,
+            }}>
+            {['main', 'part'].map((item) => {
+              if (item === 'part' && !pointData['partLabel']) {
+                return null;
+              }
+              const currentItem =
+                item === 'main'
+                  ? {
+                      label: pointData['mainLabel'],
+                      percentage: pointData['mainPercentage'],
+                    }
+                  : {
+                      label: pointData['partLabel'],
+                      percentage: pointData['partPercentage'],
+                    };
+              return (
+                <Wrapper
+                  key={item}
+                  css={{
+                    justifyContent: 'space-between',
+                    gap: 10,
+                  }}>
+                  <span css={{ fontWeight: 600 }}>{currentItem.label}</span>
+                  <span>{currentItem['percentage']}%</span>
+                </Wrapper>
+              );
+            })}
+          </Wrapper>
+        );
+      }}
+      title={
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          css={css`
+            font-size: 20px;
+            line-height: 25px;
+          `}>
+          {balanceDataTotal} &nbsp;
+          <Typography
+            variant="body2"
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker80}
+            css={css`
+              font-size: 14px;
+            `}>
+            {currency}
+          </Typography>
+        </Typography>
+      }
+      {...pieChartProps}>
+      <PieChartLegend
+        data={data}
+        backgroundColors={legendBackgrounds}
+        renderValue={({ value, label, percentage }) =>
+          label === otherLabel
+            ? value + ` ${currency}` + ` (${percentage}%)`
+            : value + ' ' + label + ` (${percentage}%)`
+        }
+        markerStyles={css`
+          width: 10px;
+          height: 10px;
+        `}
+        labelListStyles={css`
+          h6 {
+            font-weight: 700;
+          }
+        `}
+        valueListStyles={css`
+          h6 {
+            color: ${theme.colors.greyDarker80};
+          }
+        `}
+        {...pieChartLegendProps}
+      />
+    </PieChart>
+  );
+};

package/src/components/SegmentedPieChart/colorPalettes.ts

@@ -0,0 +1,13 @@
+export const defaultLegendBackgrounds = [
+  'linear-gradient(90deg, #ED995D 0%, #EDBA5D 100%)',
+  'linear-gradient(247deg, #7599DE 14.71%, #4178E1 85.29%)',
+  'linear-gradient(296deg, #89D996 16.38%, #52C587 83.62%)',
+  'linear-gradient(68deg, #EB7556 12.3%, #F2888E 88.95%)',
+];
+
+export const defaultPieChartColors = [
+  ['#ED995D', '#EDAA5D', '#EDBA5D', '#FFCF78', '#FFDFA5'],
+  ['#4178E1', '#7599DE', '#8BB2FD', '#A6C4FF', '#CEDFFF'],
+  ['#36AB6C', '#52C587', '#89D996', '#A7F3B3', '#C0FFCA'],
+  ['#EB7556', '#FF917E', '#F2888E', '#FFA6A8', '#FFD4CB'],
+];

package/src/components/SegmentedPieChart/index.ts

@@ -0,0 +1 @@
+export * from './SegmentedPieChart';

package/src/components/SegmentedPieChart/stories/SegmentedPieChart.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { balanceData, balanceMissedPartsData } from './fixtures';
+import { SegmentedPieChart } from '../SegmentedPieChart';
+
+export default {
+  title: 'Widgets/SegmentedPieChart',
+  component: SegmentedPieChart,
+} as Meta<typeof SegmentedPieChart>;
+
+type Args = StoryObj<Partial<Parameters<typeof SegmentedPieChart>[0]>>;
+
+const StoryTemplate: Args = {
+  render: ({ ...args }) => <SegmentedPieChart data={balanceData} {...args} />,
+};
+
+export const AccountExample = {
+  ...StoryTemplate,
+  args: {},
+};
+
+export const CustomColors = {
+  ...StoryTemplate,
+  args: {
+    legendBackgrounds: [
+      'linear-gradient(90deg, #6A9FDC 0%, #85BCE8 100%)',
+      'linear-gradient(247deg, #A34EC6 14.71%, #D678F8 85.29%)',
+      'linear-gradient(296deg, #5FD1E4 16.38%, #7AE4F5 83.62%)',
+      'linear-gradient(68deg, #D77A61 12.3%, #E89C91 88.95%)',
+    ],
+    pieChartColors: [
+      ['#6A9FDC', '#85BCE8', '#A3D7F2', '#BAE7FF', '#D1F2FF'],
+      ['#A34EC6', '#D678F8', '#E597FF', '#F5C0FF', '#FFD9FF'],
+      ['#5FD1E4', '#7AE4F5', '#A1F3FF', '#C0FFFF', '#D9FFFF'],
+      ['#D77A61', '#E89C91', '#F1B5A4', '#FFC3B5', '#FFDACC'],
+    ],
+    pieChartProps: {
+      tooltip: undefined,
+    },
+  },
+};
+
+export const CustomCurrency = {
+  ...StoryTemplate,
+  args: {
+    currency: 'EUR',
+  },
+};
+
+export const WithoutTooltip = {
+  ...StoryTemplate,
+  args: {
+    pieChartProps: {
+      isInteractive: false,
+    },
+  },
+};
+
+export const MissedPartsData = {
+  ...StoryTemplate,
+  args: {
+    data: balanceMissedPartsData,
+  },
+};

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

@@ -0,0 +1,147 @@
+import { BalanceData } from '../types';
+
+export const balanceData: BalanceData = [
+  {
+    id: 1,
+    value: 5843.37,
+    label: 'BTC',
+    percentage: 33,
+    parts: [
+      {
+        label: 'BTC. Option 1',
+        percentage: 13,
+        value: 2300,
+      },
+      {
+        label: 'BTC. Option 2',
+        percentage: 10,
+        value: 1800,
+      },
+      {
+        label: 'BTC. Option 3',
+        percentage: 10,
+        value: 1743.37,
+      },
+    ],
+  },
+  {
+    id: 2,
+    value: 5249.25,
+    label: 'ETH',
+    percentage: 30,
+    parts: [
+      {
+        label: 'ETH. Option 1',
+        percentage: 17,
+        value: 2800,
+      },
+      {
+        label: 'ETH. Option 2',
+        percentage: 13,
+        value: 2449.25,
+      },
+    ],
+  },
+  {
+    id: 3,
+    value: 3825.55,
+    label: 'USDT',
+    percentage: 22,
+    parts: [
+      {
+        label: 'USDT. Option 1',
+        percentage: 5,
+        value: 1000,
+      },
+      {
+        label: 'USDT. Option 2',
+        percentage: 12,
+        value: 1840,
+      },
+      {
+        label: 'USDT. Option 3',
+        percentage: 5,
+        value: 985.55,
+      },
+    ],
+  },
+  {
+    id: 4,
+    value: 2818.83,
+    label: 'Other',
+    percentage: 15,
+    parts: [
+      {
+        label: 'Other. Option 1',
+        percentage: 7,
+        value: 1400,
+      },
+      {
+        label: 'Other. Option 2',
+        percentage: 8,
+        value: 1418.83,
+      },
+    ],
+  },
+];
+
+export const balanceMissedPartsData: BalanceData = [
+  {
+    id: 1,
+    value: 5843.37,
+    label: 'BTC',
+    percentage: 33,
+    parts: [
+      {
+        label: 'BTC. Option 1',
+        percentage: 13,
+        value: 2300,
+      },
+      {
+        label: 'BTC. Option 2',
+        percentage: 10,
+        value: 1800,
+      },
+      {
+        label: 'BTC. Option 3',
+        percentage: 10,
+        value: 1743.37,
+      },
+    ],
+  },
+  {
+    id: 2,
+    value: 5249.25,
+    label: 'ETH',
+    percentage: 30,
+  },
+  {
+    id: 3,
+    value: 3825.55,
+    label: 'USDT',
+    percentage: 22,
+    parts: [
+      {
+        label: 'USDT. Option 1',
+        percentage: 5,
+        value: 1000,
+      },
+      {
+        label: 'USDT. Option 2',
+        percentage: 12,
+        value: 1840,
+      },
+      {
+        label: 'USDT. Option 3',
+        percentage: 5,
+        value: 985.55,
+      },
+    ],
+  },
+  {
+    id: 4,
+    value: 2818.83,
+    label: 'Other',
+    percentage: 15,
+  },
+];

package/src/components/SegmentedPieChart/types.ts

@@ -0,0 +1,40 @@
+import { CommonProps } from '@global-types/emotion';
+import { MayHaveLabel } from '@nivo/pie';
+import { PieChartLegend, PieChartProps } from '@components';
+
+type BalanceDataPartsItem = {
+  label: string;
+  percentage: number;
+  value: number;
+};
+
+type BalanceDataItem = {
+  id: number;
+  value: number;
+  label: string;
+  percentage: number;
+  parts?: BalanceDataPartsItem[];
+};
+
+export type BalanceData = Array<BalanceDataItem>;
+
+export interface SegmentedPieChartProps extends CommonProps {
+  data: BalanceData;
+  pieChartProps?: Partial<PieChartProps>;
+  pieChartLegendProps?: Partial<React.ComponentProps<typeof PieChartLegend>>;
+  legendBackgrounds?: string[];
+  pieChartColors?: string[][];
+  currency?: string;
+  otherLabel?: string;
+}
+
+export interface BalanceDataForGraph extends MayHaveLabel {
+  mainLabel: string;
+  mainPercentage: number;
+  partLabel?: string;
+  partPercentage?: number;
+  id: number | string;
+  mainId: number;
+  value: number | string;
+  color: string;
+}

package/src/components/Typeahead/Typeahead.context.ts

@@ -52,9 +52,6 @@ export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
   handleRemoveSelectedClick: () => () => {
     /* no-op */
   },
-  handleInputBlur: () => {
-    /* no-op */
-  },
   handleSelectedClick: () => {
     /* no-op */
   },

package/src/components/Typeahead/Typeahead.stories.tsx

@@ -63,8 +63,8 @@ export const Basic: StoryObj = (args: TypeaheadProps) => {
       <Typeahead
         initialSelectedItems={[items[2].id]}
         isDisabled={args.isDisabled}
-        onBlur={() => {
-          console.log('>>>onBlur event');
+        onEmptyChange={(isEmpty) => {
+          console.log('>>>onEmptyChange event', isEmpty);
         }}
         name={'typeahead-dropdown'}
         label="Label"
@@ -127,8 +127,8 @@ export const Multiple: StoryObj = (args: TypeaheadProps) => {
         initialSelectedItems={[items[2].id, items[1].id]}
         isMultiple
         isDisabled={args.isDisabled}
-        onBlur={() => {
-          console.log('>>>onBlur event');
+        onEmptyChange={(isEmpty) => {
+          console.log('>>>onEmptyChange event', isEmpty);
         }}
         label="Label"
         helperText="Helper Text"

package/src/components/Typeahead/Typeahead.tsx

@@ -45,7 +45,7 @@ export const Typeahead = ({
   setValue,
   register,
   onChange,
-  onBlur,
+  onEmptyChange,
   renderOption,
 }: TypeaheadProps) => {
   const theme = useTheme();
@@ -68,7 +68,7 @@ export const Typeahead = ({
     setValue,
     register,
     onChange,
-    onBlur,
+    onEmptyChange,
     renderOption,
   });
 

package/src/components/Typeahead/components/MultipleTrigger.tsx

@@ -67,7 +67,6 @@ export const MultipleTrigger = () => {
               onClick: context.handleInputClick,
               onKeyDown: context.handleInputKeyDown,
               onChange: context.handleInputChange,
-              onBlur: context.handleInputBlur,
               value: context.inputValue,
               autoComplete: 'off',
               className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),

package/src/components/Typeahead/components/SingleTrigger.tsx

@@ -26,7 +26,6 @@ export const SingleTrigger = () => {
             onClick: context.handleInputClick,
             onKeyDown: context.handleInputKeyDown,
             onChange: context.handleInputChange,
-            onBlur: context.handleInputBlur,
             value: context.inputValue,
             autoComplete: 'off',
             className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),

package/src/components/Typeahead/types.ts

@@ -34,7 +34,7 @@ export interface TypeaheadProps {
   setValue?: UseFormSetValue<FieldValues>;
   register?: UseFormReturn['register'];
   onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onEmptyChange?: (isEmpty?: boolean) => void;
   renderOption?: (data: {
     value: string | number;
     input: string;
@@ -49,7 +49,7 @@ export type UseTypeaheadProps = Pick<
   | 'children'
   | 'isMultiple'
   | 'onChange'
-  | 'onBlur'
+  | 'onEmptyChange'
   | 'renderOption'
   | 'isOpen'
   | 'className'

package/src/components/Typeahead/useTypeahead.tsx

@@ -29,7 +29,7 @@ export const useTypeahead = ({
   register,
   setValue,
   onChange,
-  onBlur,
+  onEmptyChange,
   renderOption,
 }: UseTypeaheadProps) => {
   const inputName = `${name}-text`;
@@ -40,6 +40,7 @@ export const useTypeahead = ({
   const [optionsWithKey, setOptionsWithKey] = useState<
     Record<number | string, Record<string, string | number>>
   >({});
+  const [isEmpty, setIsEmpty] = useState<boolean>();
   const [isFirstRender, setFirstRender] = useState<boolean>(true);
   const [items, setItems] = useState<Array<React.ReactElement> | undefined>();
   const [inputValue, setInputValue] = useState<string>('');
@@ -70,8 +71,16 @@ export const useTypeahead = ({
         shouldDirty: !isFirstRender,
       });
     }
+
+    if (!isFirstRender) {
+      setIsEmpty(!selected.length);
+    }
   }, [selected]);
 
+  useEffect(() => {
+    onEmptyChange?.(isEmpty);
+  }, [isEmpty]);
+
   useEffect(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);
@@ -341,7 +350,6 @@ export const useTypeahead = ({
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
-    handleInputBlur: onBlur,
     handleSelectedClick,
     handleRemoveSelectedClick,
   };