@ssa-ui-kit/widgets 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
+    "@ssa-ui-kit/core": "^1.1.7",
     "@ssa-ui-kit/hooks": "^1.0.0",
-    "@ssa-ui-kit/core": "^1.1.6",
     "@ssa-ui-kit/utils": "^1.0.0"
   },
   "browserslist": [

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { css } from '@emotion/react';
+import { css as cssReact } from '@emotion/react';
+import { css } from '@emotion/css';
 import { mainTheme } from '@ssa-ui-kit/core';
 
 import { data } from './stories/fixtures';
@@ -14,9 +15,15 @@ export default {
 
 export const Default: StoryObj<typeof AccountBalance> = {};
 Default.args = {
-  total: 48700.53569,
+  total: 48700.53,
   currency: 'USDT',
   onClick: () => alert('Clicked!'),
+  widgetMaxWidth: '290px',
+  className: css`
+    & .pie-chart-wrapper p {
+      font-size: 12px;
+    }
+  `,
   data,
 };
 
@@ -48,17 +55,20 @@ export const Custom: StoryObj<typeof AccountBalance> = (
   return (
     <AccountBalance
       {...args}
-      css={css`
+      css={cssReact`
         ul li {
           height: auto;
         }
+        & .pie-chart-wrapper p {
+          font-size: 12px;
+        }
       `}
     />
   );
 };
 
 Custom.args = {
-  total: 48700.53569,
+  total: 48700.53,
   currency: 'USDT',
   variant: 'withoutValueList',
   chartColorPalette: [
@@ -66,6 +76,7 @@ Custom.args = {
     mainTheme.colors.green as string,
   ],
   legendColorPalette: ['blue', 'green'],
+  widgetMaxWidth: '240px',
   data: [
     {
       id: 'BTC',
@@ -88,17 +99,20 @@ export const WithoutPaletteColors: StoryObj<typeof AccountBalance> = (
   return (
     <AccountBalance
       {...args}
-      css={css`
+      css={cssReact`
         ul li {
           height: auto;
         }
+        & .pie-chart-wrapper p {
+          font-size: 12px;
+        }
       `}
     />
   );
 };
 
 WithoutPaletteColors.args = {
-  total: 48700.53569,
+  total: 48700.53,
   currency: 'USDT',
   variant: 'withoutValueList',
   chartColorPalette: ['#F7931A', '#50AF95'],
@@ -106,6 +120,7 @@ WithoutPaletteColors.args = {
     'linear-gradient(243.84deg, rgb(235, 117, 86), rgb(242, 136, 142))',
     '#50AF95',
   ],
+  widgetMaxWidth: '240px',
   data: [
     {
       id: 'BTC',

package/src/components/AccountBalance/AccountBalance.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import { css } from '@emotion/css';
 import { WithLink } from '@ssa-ui-kit/core';
@@ -12,9 +13,11 @@ export const AccountBalance = ({
   variant = 'valueList',
   fullscreenModeFeature = false,
   activeHighlight = true,
+  widgetMaxWidth = '280px',
   ...props
 }: AccountBalanceProps) => {
   const theme = useTheme();
+  const [isFullscreenMode, setIsFullscreenMode] = useState(false);
 
   return (
     <WithLink link={link} onClick={onClick}>
@@ -23,10 +26,19 @@ export const AccountBalance = ({
         variant={variant}
         fullscreenModeFeature={fullscreenModeFeature}
         activeHighlight={activeHighlight}
+        onFullscreenModeChange={setIsFullscreenMode}
         pieChartProps={{
+          width: '100%',
           cardProps: {
             title,
-            className,
+            className: [
+              css`
+                & > div:last-of-type {
+                  max-width: ${isFullscreenMode ? '100%' : widgetMaxWidth};
+                }
+              `,
+              className,
+            ].join(' '),
             headerClassName: css([
               {
                 fontSize: 11,

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -22,6 +22,7 @@ export const BalancePieChart = withTheme(
     pieChartProps = {},
     fullscreenModeFeature = false,
     activeHighlight = false,
+    onFullscreenModeChange,
   }: BalancePieChartProps) => {
     const [isFullscreenMode, setFullscreenMode] = useState(false);
     const { legendColorNames, pieChartColors } =
@@ -38,6 +39,7 @@ export const BalancePieChart = withTheme(
 
     const handleFullscreenModeChange = (pieChartFullscreenMode: boolean) => {
       setFullscreenMode(pieChartFullscreenMode);
+      onFullscreenModeChange?.(pieChartFullscreenMode);
     };
     return (
       <PieChart

package/src/components/AccountBalance/BalancePieChartTitle.tsx

@@ -1,15 +1,12 @@
 import { withTheme, css } from '@emotion/react';
 import { Typography, useFullscreenMode } from '@ssa-ui-kit/core';
-import { useTextSizeDecrease } from '@ssa-ui-kit/hooks';
 import { BalancePieChartTitleProps } from './types';
 
 export const BalancePieChartTitle = withTheme(
   ({ total, currency, theme }: BalancePieChartTitleProps) => {
-    const ref = useTextSizeDecrease();
     const { isFullscreenMode } = useFullscreenMode();
     return (
       <Typography
-        ref={ref}
         variant="body2"
         weight="bold"
         color={theme.colors.greyDarker}
@@ -20,7 +17,7 @@ export const BalancePieChartTitle = withTheme(
                 font-weight: 500;
               `
             : css`
-                font-size: 13px;
+                font-size: 12px;
                 padding: 0 14px;
                 line-height: 1;
               `

package/src/components/AccountBalance/types.ts

@@ -23,6 +23,7 @@ type BalanceBase = {
 export interface BalancePieChartProps extends WithTheme, BalanceBase {
   pieChartProps?: Partial<PieChartProps>;
   activeHighlight?: boolean;
+  onFullscreenModeChange?: (isFullscreenMode: boolean) => void;
 }
 
 export interface AccountBalanceProps extends BalanceBase {
@@ -31,6 +32,7 @@ export interface AccountBalanceProps extends BalanceBase {
   onClick?: () => void;
   link?: To;
   activeHighlight?: boolean;
+  widgetMaxWidth?: string;
 }
 
 export type BalancePieChartTitleProps = Pick<

package/src/components/ExchangeAccount/ExchangeAccount.stories.tsx

@@ -1,6 +1,7 @@
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { css, useTheme } from '@emotion/react';
+import { css as cssClassname } from '@emotion/css';
 import { Icon, AddNewAccountCard } from '@ssa-ui-kit/core';
 import { ExchangeAccount } from './ExchangeAccount';
 import { dataValues } from './helpers';
@@ -19,6 +20,12 @@ export const Default: StoryObj<typeof ExchangeAccount> = () => {
       data={dataValues[0].data}
       onClick={() => alert('Card is clicked!')}
       onDelete={() => alert('Card is deleted!')}
+      pieChartProps={{
+        className: cssClassname`
+          align-self: center;
+          max-width: 300px;
+        `,
+      }}
     />
   );
 };
@@ -40,6 +47,12 @@ export const WithLink: StoryObj<typeof ExchangeAccount> = () => {
               link="/link"
               onClick={() => alert('Card is clicked!')}
               onDelete={() => alert('Card is deleted!')}
+              pieChartProps={{
+                className: cssClassname`
+                  align-self: center;
+                  max-width: 300px;
+                `,
+              }}
             />
           }
         />
@@ -79,6 +92,12 @@ export const List: StoryObj<typeof ExchangeAccount> = () => {
             data={item.data}
             onClick={() => alert('Card is clicked!')}
             onDelete={() => alert('Card is deleted!')}
+            pieChartProps={{
+              className: cssClassname`
+                align-self: center;
+                max-width: 300px;
+              `,
+            }}
           />
         );
       })}

package/src/components/ExchangeAccount/ExchangeAccount.tsx

@@ -19,6 +19,7 @@ export const ExchangeAccount = ({
   status,
   link,
   data,
+  pieChartProps,
   onClick,
   onDelete,
 }: ExchangeAccountProps) => {
@@ -69,7 +70,6 @@ export const ExchangeAccount = ({
         <CardContent css={S.CardContent} direction="column">
           <BalancePieChart
             theme={theme}
-            {...data}
             pieChartProps={{
               className: css`
                 ${theme.mediaQueries.md} {
@@ -79,7 +79,9 @@ export const ExchangeAccount = ({
                   flex-direction: column;
                 }
               `,
+              ...pieChartProps,
             }}
+            {...data}
           />
         </CardContent>
       </CardBase>

package/src/components/ExchangeAccount/helpers.tsx

@@ -15,7 +15,7 @@ export const dataValues: Array<
     title: 'Account Name',
     status: 'Active',
     data: {
-      total: 48000.53032,
+      total: 48000.53,
       currency: 'USDT',
       data: [
         {
@@ -120,7 +120,7 @@ export const dataValues: Array<
     title: 'Name#4',
     status: 'Active',
     data: {
-      total: 9000.53032,
+      total: 9000.53,
       currency: 'USDT',
       data: [
         {

package/src/components/ExchangeAccount/types.ts

@@ -1,4 +1,5 @@
 import { To } from 'react-router-dom';
+import { PieChartProps } from '@ssa-ui-kit/core';
 import { AccountBalanceProps } from '@components/AccountBalance';
 
 export interface ExchangeAccountProps {
@@ -9,4 +10,5 @@ export interface ExchangeAccountProps {
   onDelete: () => void;
   link?: To;
   data: Omit<AccountBalanceProps, 'title' | 'className' | 'onClick' | 'link'>;
+  pieChartProps?: Partial<PieChartProps>;
 }