@ssa-ui-kit/widgets 0.0.15-alpha → 0.0.17-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.15-alpha",
+  "version": "0.0.17-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.10-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.12-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/AccountBalance/AccountBalance.spec.tsx

@@ -79,4 +79,33 @@ describe('AccountBalance', () => {
     await fireEvent.click(linkEl);
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('Renders without value list', () => {
+    const { getByText } = render(
+      <AccountBalance
+        total="798"
+        currency="USDT"
+        variant="withoutValueList"
+        data={[
+          {
+            id: 'BTC',
+            label: 'BTC',
+            legendValue: 1,
+            value: 871.23,
+          },
+          {
+            id: 'LTC',
+            label: 'LTC',
+            legendValue: 7,
+            value: 530.25,
+          },
+        ]}
+      />,
+    );
+
+    getByText('1 BTC');
+    getByText('871.23 USDT');
+    getByText('7 LTC');
+    getByText('530.25 USDT');
+  });
 });

package/src/components/AccountBalance/AccountBalance.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { css } from '@emotion/react';
+import { mainTheme } from '@ssa-ui-kit/core';
 
 import { data } from './stories/fixtures';
 
@@ -33,3 +35,43 @@ WithLink.args = {
   ...Default.args,
   link: '/',
 };
+
+export const Custom: StoryObj<typeof AccountBalance> = (
+  args: AccountBalanceProps,
+) => {
+  return (
+    <AccountBalance
+      {...args}
+      css={css`
+        ul li {
+          height: auto;
+        }
+      `}
+    />
+  );
+};
+
+Custom.args = {
+  total: 48700.53569,
+  currency: 'USDT',
+  variant: 'withoutValueList',
+  chartColorPalette: [
+    mainTheme.colors.blue as string,
+    mainTheme.colors.green as string,
+  ],
+  legendColorPalette: ['blue', 'green'],
+  data: [
+    {
+      id: 'BTC',
+      label: 'BTC',
+      value: 571.23,
+      legendValue: 12323,
+    },
+    {
+      id: 'LTC',
+      label: 'LTC',
+      value: 530.25,
+      legendValue: 12323,
+    },
+  ],
+};

package/src/components/AccountBalance/AccountBalance.tsx

@@ -9,6 +9,7 @@ export const AccountBalance = ({
   className,
   onClick,
   link,
+  variant = 'valueList',
   ...props
 }: AccountBalanceProps) => {
   const theme = useTheme();
@@ -55,7 +56,7 @@ export const AccountBalance = ({
             width: 100%;
             display: block;
           `}>
-          <BalancePieChart theme={theme} {...props} />
+          <BalancePieChart theme={theme} variant={variant} {...props} />
         </CardContent>
       </Card>
     </WithLink>

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -10,14 +10,21 @@ import { BalancePieChartTitle } from './BalancePieChartTitle';
 import { BalancePieChartProps } from './types';
 
 export const BalancePieChart = withTheme(
-  ({ total, currency, data, theme }: BalancePieChartProps) => {
+  ({
+    total,
+    currency,
+    data,
+    theme,
+    chartColorPalette,
+    legendColorPalette,
+    variant = 'valueList',
+  }: BalancePieChartProps) => {
     const { legendColorNames, pieChartColors } =
       pieChartPalettes.getBalancePalette(theme);
-
     return (
       <PieChart
         data={data}
-        colors={pieChartColors}
+        colors={chartColorPalette || pieChartColors}
         animate={false}
         title={
           <BalancePieChartTitle
@@ -41,7 +48,9 @@ export const BalancePieChart = withTheme(
         `}>
         <PieChartLegend
           data={data}
-          colors={legendColorNames}
+          colors={legendColorPalette || legendColorNames}
+          variant={variant}
+          currency={currency}
           markerStyles={css`
             width: 10px;
             height: 10px;

package/src/components/AccountBalance/types.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@ssa-ui-kit/core';
+import { MainColors, Theme } from '@ssa-ui-kit/core';
 import type { To } from 'react-router-dom';
 
 interface WithTheme {
@@ -8,6 +8,9 @@ interface WithTheme {
 type BalanceBase = {
   total: number | string;
   currency: string;
+  legendColorPalette?: Array<keyof MainColors>;
+  chartColorPalette?: string[];
+  variant?: 'valueList' | 'withoutValueList';
   data: Array<{
     id: string | number;
     value: number;

package/src/components/CollapsibleNavBar/CollapsibleNavBar.tsx

@@ -1,7 +1,9 @@
 import { useState, useId, useEffect } from 'react';
 import { Wrapper } from '@ssa-ui-kit/core';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
 import * as S from './styles';
 
+import { SCREEN_SIZES } from '../../consts';
 import CollapsibleNavBarBase from './CollapsibleNavBarBase';
 import CollapsibleNavBarWrapper from './CollapsibleNavBarWrapper';
 import CollapsibleNavBarList from './CollapsibleNavBarList';
@@ -10,7 +12,6 @@ import { CollapsibleNavBarExtendedProps } from './types';
 import { NavContentToggle } from './CollapsibleNavContentToggle';
 import { NavBarItemWithSubMenu } from './NavBarItemWithSubMenu';
 import { NavBarItemWithoutSubMenu } from './NavBarItemWithoutSubMenu';
-
 /**
  * UI Component that shows the collapsible navigation bar
  */
@@ -19,18 +20,19 @@ export const CollapsibleNavBar = ({
   renderLogo,
 }: CollapsibleNavBarExtendedProps) => {
   const toggleId = useId();
+  const { width } = useWindowSize();
   const [isChecked, onToggle] = useState(false);
+  const isMobile = width < SCREEN_SIZES['900'].width;
 
   useEffect(() => {
-    const onResize = () => {
-      onToggle(false);
-    };
+    onToggle(false);
+  }, [width]);
 
-    window.addEventListener('resize', onResize);
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, []);
+  const handleCloseMobileMenu = () => {
+    if (isMobile) {
+      onToggle(!isChecked);
+    }
+  };
 
   return (
     <CollapsibleNavBarBase className={isChecked ? 'opened' : undefined}>
@@ -55,9 +57,17 @@ export const CollapsibleNavBar = ({
             const { iconName, title } = item;
             const keyName = iconName + title.replace(' ', '').toLowerCase();
             return 'items' in item ? (
-              <NavBarItemWithSubMenu item={item} key={keyName} />
+              <NavBarItemWithSubMenu
+                item={item}
+                key={keyName}
+                onClick={handleCloseMobileMenu}
+              />
             ) : (
-              <NavBarItemWithoutSubMenu item={item} key={keyName} />
+              <NavBarItemWithoutSubMenu
+                item={item}
+                key={keyName}
+                onClick={handleCloseMobileMenu}
+              />
             );
           })}
         </CollapsibleNavBarList>

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

@@ -26,12 +26,14 @@ export const NavBarAccordionContent = ({
   accordionUniqueName,
   prefix,
   isPopover,
+  onClick,
   ...rest
 }: RenderContentProps & {
   items: Array<{ path: string; title: string }>;
   accordionUniqueName: string;
   prefix?: string;
   isPopover?: boolean;
+  onClick?: () => void;
 }) => (
   <AccordionContent
     {...rest}
@@ -41,6 +43,7 @@ export const NavBarAccordionContent = ({
         key={`${accordionUniqueName}-link-${subMenuItem.title
           .replace(' ', '')
           .toLowerCase()}`}
+        onClick={onClick}
         to={'/' + prefix + subMenuItem.path}>
         {subMenuItem.title}
       </Link>

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -18,8 +18,10 @@ const Link = CollapsibleNavBarLink.withComponent('div');
 
 export const NavBarItemWithSubMenu = ({
   item,
+  onClick,
 }: {
   item: CollapsibleNavBarGroup;
+  onClick?: () => void;
 }) => {
   const { iconName, iconSize, title, items, prefix, css } = item;
   const uniqName = iconName + title.replace(' ', '').toLowerCase();
@@ -55,6 +57,7 @@ export const NavBarItemWithSubMenu = ({
                 accordionUniqueName={accordionUniqName}
                 prefix={prefix}
                 isPopover={false}
+                onClick={onClick}
                 {...props}
               />
             )}

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -6,8 +6,10 @@ import * as T from './types';
 
 export const NavBarItemWithoutSubMenu = ({
   item,
+  onClick,
 }: {
   item: T.CollapsibleNavBarItem;
+  onClick?: () => void;
 }) => {
   const { path, iconName, title, iconSize, css } = item;
   const Icon = () => (
@@ -16,7 +18,7 @@ export const NavBarItemWithoutSubMenu = ({
 
   return (
     <CollapsibleNavBarItem key={path}>
-      <CollapsibleNavBarLink to={'/' + path}>
+      <CollapsibleNavBarLink to={'/' + path} onClick={onClick}>
         <CollapsibleNavBarPopover triggerIcon={<Icon />} title={title} />
         <Icon />
         <span>{title}</span>

package/src/components/PieChart/PieChartLegend.tsx

@@ -12,15 +12,18 @@ export const PieChartLegend = ({
   renderLabel,
   renderValue,
   markerStyles,
+  currency,
   labelListStyles,
   valueListStyles,
+  variant = 'valueList',
 }: PieChartLegendProps) => {
   const theme = useTheme();
+  const isValueList = variant === 'valueList';
   return (
     <Fragment>
       <PieChartLegendList css={labelListStyles}>
         {data.map((item, index) => {
-          const { id, label } = item;
+          const { id, label, value, legendValue } = item;
           return (
             <li key={`tag-${id}`}>
               <PieChartLegendMarker
@@ -28,24 +31,44 @@ export const PieChartLegend = ({
                 as={'span'}
                 css={markerStyles}
               />
-              <Typography variant="h6">
-                {typeof renderLabel === 'function' ? renderLabel(item) : label}
-              </Typography>
+              {isValueList ? (
+                <Typography variant="h6">
+                  {typeof renderLabel === 'function'
+                    ? renderLabel(item)
+                    : label}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="subtitle"
+                  css={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}>
+                  <span>
+                    {legendValue as React.ReactNode} {label}
+                  </span>
+                  <span css={{ fontWeight: '400' }}>
+                    {value} {currency}
+                  </span>
+                </Typography>
+              )}
             </li>
           );
         })}
       </PieChartLegendList>
-      <PieChartLegendList css={valueListStyles}>
-        {data.map((item) => (
-          <li key={`subtitle-${item.id}`}>
-            <Typography variant="subtitle" color={theme.colors.greyDarker60}>
-              {typeof renderValue === 'function'
-                ? renderValue(item)
-                : item.value}
-            </Typography>
-          </li>
-        ))}
-      </PieChartLegendList>
+      {isValueList && (
+        <PieChartLegendList css={valueListStyles}>
+          {data.map((item) => (
+            <li key={`subtitle-${item.id}`}>
+              <Typography variant="subtitle" color={theme.colors.greyDarker60}>
+                {typeof renderValue === 'function'
+                  ? renderValue(item)
+                  : item.value}
+              </Typography>
+            </li>
+          ))}
+        </PieChartLegendList>
+      )}
     </Fragment>
   );
 };

package/src/components/PieChart/types.ts

@@ -23,6 +23,8 @@ export interface PieChartLegendProps {
   renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   className?: string;
   markerStyles?: SerializedStyles;
+  currency?: string;
   labelListStyles?: SerializedStyles;
   valueListStyles?: SerializedStyles;
+  variant?: 'valueList' | 'withoutValueList';
 }