@ssa-ui-kit/core 1.0.19 → 1.1.1

package/dist/types/emotion.d.ts

@@ -18,6 +18,7 @@ type Colors = MakeColors<[
     'grey',
     'grey20',
     'grey40',
+    'greyShadow16',
     'greyShadow24',
     'greyDarker',
     'greyDarker40',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.19",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -54,8 +54,8 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@nivo/core": "^0.83.0",
-    "@nivo/pie": "0.83.0",
+    "@nivo/core": "^0.84.0",
+    "@nivo/pie": "0.84.0",
     "react": "18.x",
     "react-dom": "18.x",
     "react-hook-form": "^7.46.1",

package/src/components/Badge/Badge.stories.tsx

@@ -154,3 +154,11 @@ WithIcon.argTypes = {
     control: false,
   },
 };
+
+export const WithCustomColor = () => {
+  return (
+    <Badge color={'#F7931A'} size="medium">
+      Custom color
+    </Badge>
+  );
+};

package/src/components/Badge/Badge.tsx

@@ -36,7 +36,17 @@ const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   ref,
 ) {
   return (
-    <BadgeBase ref={ref} css={[mapColors[color], mapSizes[size]]} {...props}>
+    <BadgeBase
+      ref={ref}
+      css={[
+        color in mapColors
+          ? mapColors[color as keyof MainColors]
+          : {
+              background: color,
+            },
+        mapSizes[size],
+      ]}
+      {...props}>
       {children ? children : null}
     </BadgeBase>
   );

package/src/components/Badge/types.ts

@@ -1,5 +1,5 @@
 export interface BadgeProps {
-  color?: keyof MainColors;
+  color?: keyof MainColors | string;
   size?: keyof MainSizes;
   children?: React.ReactNode;
   as?: React.ElementType;

package/src/components/FullscreenModeContext.tsx

@@ -0,0 +1,62 @@
+import { createContext, useContext, useState } from 'react';
+
+export type FullscreenModeContextType = {
+  isFullscreenMode: boolean;
+  activeId: null | number | string;
+  toggleFullscreenMode: () => void;
+  setFullscreenMode: (isFullscreenMode: boolean) => void;
+  setActiveId: (activeId: null | number | string) => void;
+};
+
+export const FullscreenModeContext = createContext<FullscreenModeContextType>({
+  isFullscreenMode: false,
+  activeId: null,
+  toggleFullscreenMode: () => {
+    // no-op
+  },
+  setFullscreenMode: () => {
+    // no-op
+  },
+  setActiveId: () => {
+    // no-op
+  },
+});
+
+export const FullscreenModeProvider = ({
+  children,
+}: React.PropsWithChildren) => {
+  const [isFullscreenMode, setFullscreenMode] = useState(false);
+  const [activeId, setActiveId] =
+    useState<FullscreenModeContextType['activeId']>(null);
+  const toggleFullscreenMode = () => {
+    setFullscreenMode((prevState) => !prevState);
+  };
+  return (
+    <FullscreenModeContext.Provider
+      value={{
+        isFullscreenMode,
+        activeId,
+        setFullscreenMode,
+        toggleFullscreenMode,
+        setActiveId,
+      }}>
+      {children}
+    </FullscreenModeContext.Provider>
+  );
+};
+
+export const useFullscreenMode = () => useContext(FullscreenModeContext);
+
+export const WithFullscreenMode = <T extends object>(
+  Component: React.ComponentType<T>,
+  rest?: Parameters<typeof FullscreenModeProvider>[0],
+) => {
+  const decoratedComp = (props: T) => (
+    <FullscreenModeProvider {...rest}>
+      <Component {...props} />
+    </FullscreenModeProvider>
+  );
+
+  decoratedComp.displayName = `WithFullscreenMode(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/Icon/icons/Maximize.tsx

@@ -0,0 +1,26 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Maximize = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Maximize',
+  ...props
+}: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>{tooltip}</title>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.30005 4.00005C2.30005 3.06116 3.06116 2.30005 4.00005 2.30005H8.00005C8.38665 2.30005 8.70005 2.61345 8.70005 3.00005C8.70005 3.38665 8.38665 3.70005 8.00005 3.70005H4.00005C3.83436 3.70005 3.70005 3.83436 3.70005 4.00005V8.00005C3.70005 8.38665 3.38665 8.70005 3.00005 8.70005C2.61345 8.70005 2.30005 8.38665 2.30005 8.00005V4.00005ZM15.3 3.00005C15.3 2.61345 15.6134 2.30005 16 2.30005H20C20.9389 2.30005 21.7001 3.06116 21.7001 4.00005V8.00005C21.7001 8.38665 21.3866 8.70005 21 8.70005C20.6135 8.70005 20.3 8.38665 20.3 8.00005V4.00005C20.3 3.83436 20.1657 3.70005 20 3.70005H16C15.6134 3.70005 15.3 3.38665 15.3 3.00005ZM3.00005 15.3C3.38665 15.3 3.70005 15.6134 3.70005 16V20C3.70005 20.1657 3.83436 20.3 4.00005 20.3H8.00005C8.38665 20.3 8.70005 20.6135 8.70005 21C8.70005 21.3866 8.38665 21.7001 8.00005 21.7001H4.00005C3.06116 21.7001 2.30005 20.9389 2.30005 20V16C2.30005 15.6134 2.61345 15.3 3.00005 15.3ZM21 15.3C21.3866 15.3 21.7001 15.6134 21.7001 16V20C21.7001 20.9389 20.9389 21.7001 20 21.7001H16C15.6134 21.7001 15.3 21.3866 15.3 21C15.3 20.6135 15.6134 20.3 16 20.3H20C20.1657 20.3 20.3 20.1657 20.3 20V16C20.3 15.6134 20.6135 15.3 21 15.3Z"
+      fill={fill}
+    />
+  </svg>
+);
+
+export const ICON_NAME = 'maximize';

package/src/components/Icon/icons/all.ts

@@ -57,3 +57,4 @@ export * as Edit from './Edit';
 export * as Import from './Import';
 export * as Pages from './Pages';
 export * as Roles from './Roles';
+export * as Maximize from './Maximize';

package/src/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.tsx

@@ -1,11 +1,9 @@
 import { useTheme } from '@emotion/react';
-import {
-  DropdownOption,
-  Typography,
-  Wrapper,
-  Dropdown,
-  usePaginationContext,
-} from '@components';
+import DropdownOption from '@components/DropdownOption/DropdownOption';
+import Typography from '@components/Typography/Typography';
+import Wrapper from '@components/Wrapper/Wrapper';
+import Dropdown from '@components/Dropdown/Dropdown';
+import { usePaginationContext } from '@components/Pagination/PaginationContext';
 import { RowsPerPageDropdownProps } from './types';
 import { DEFAULT_PER_PAGE_VALUE, ROWS_PER_PAGE_LIST } from '../../constants';
 

package/src/components/PieChart/PieChart.stories.tsx

@@ -1,9 +1,9 @@
+import { Fragment, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { css, useTheme } from '@emotion/react';
 import Typography from '@components/Typography';
-
 import { PieChart, PieChartLegend, pieChartPalettes } from './index';
-import { fitnessData, accountData } from './stories/fixtures';
+import { fitnessData, accountData, eventsDataBig } from './stories/fixtures';
 
 export default {
   title: 'Charts/PieChart',
@@ -21,49 +21,47 @@ export const FitnessExample: StoryObj<typeof PieChart> = () => {
   ] as unknown as string[];
 
   return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={fitnessData}
-        colors={pieChartColors}
-        animate={false}
-        title={
+    <PieChart
+      data={fitnessData}
+      colors={pieChartColors}
+      animate={false}
+      title={
+        <Typography
+          variant="body2"
+          weight="regular"
+          color={theme.colors.greyDarker60}
+          css={css`
+            font-size: 16px;
+            line-height: 16px;
+            margin-top: -5px;
+          `}>
+          Total
           <Typography
             variant="body2"
-            weight="regular"
-            color={theme.colors.greyDarker60}
+            weight="bold"
+            color={theme.colors.greyDarker}
             css={css`
-              font-size: 16px;
-              line-height: 16px;
-              margin-top: -5px;
+              font-size: 27.65px;
+              line-height: 35px;
             `}>
-            Total
+            143
             <Typography
               variant="body2"
-              weight="bold"
-              color={theme.colors.greyDarker}
+              weight="regular"
+              as="span"
+              color={theme.colors.greyDarker60}
               css={css`
-                font-size: 27.65px;
-                line-height: 35px;
+                font-size: 16px;
+                font-weight: 600;
+                margin-left: 3px;
               `}>
-              143
-              <Typography
-                variant="body2"
-                weight="regular"
-                as="span"
-                color={theme.colors.greyDarker60}
-                css={css`
-                  font-size: 16px;
-                  font-weight: 600;
-                  margin-left: 3px;
-                `}>
-                hrs
-              </Typography>
+              hrs
             </Typography>
           </Typography>
-        }>
-        <PieChartLegend data={fitnessData} colors={colorNames} />
-      </PieChart>
-    </div>
+        </Typography>
+      }>
+      <PieChartLegend data={fitnessData} colors={colorNames} />
+    </PieChart>
   );
 };
 FitnessExample.args = {};
@@ -74,56 +72,179 @@ export const AccountExample: StoryObj<typeof PieChart> = () => {
     pieChartPalettes.getBalancePalette(theme);
 
   return (
-    <div style={{ width: '400px' }}>
-      <PieChart
+    <PieChart
+      data={accountData}
+      colors={pieChartColors}
+      animate={false}
+      title={
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          css={css`
+            font-size: 20px;
+            line-height: 25px;
+          `}>
+          18183 &nbsp;
+          <Typography
+            variant="body2"
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker80}
+            css={css`
+              font-size: 14px;
+            `}>
+            USDT
+          </Typography>
+        </Typography>
+      }>
+      <PieChartLegend
         data={accountData}
-        colors={pieChartColors}
-        animate={false}
-        title={
+        colors={legendColorNames}
+        renderValue={({ value, label }) =>
+          label === 'Other' ? value + ' USD' : value + ' ' + label
+        }
+        markerStyles={css`
+          width: 10px;
+          height: 10px;
+        `}
+        labelListStyles={css`
+          h6 {
+            font-weight: 700;
+          }
+        `}
+        valueListStyles={css`
+          h6 {
+            color: ${theme.colors.greyDarker80};
+          }
+        `}
+      />
+    </PieChart>
+  );
+};
+AccountExample.args = {};
+
+export const CustomColors: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const colors = ['#F7931A', '#50AF95', '#6f93d1', '#d37070'];
+
+  return (
+    <PieChart
+      data={accountData}
+      colors={colors}
+      animate={false}
+      title={
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          css={css`
+            font-size: 20px;
+            line-height: 25px;
+          `}>
+          18183 &nbsp;
           <Typography
             variant="body2"
-            weight="bold"
-            color={theme.colors.greyDarker}
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker80}
             css={css`
-              font-size: 20px;
-              line-height: 25px;
+              font-size: 14px;
             `}>
-            18183 &nbsp;
-            <Typography
-              variant="body2"
-              weight="regular"
-              as="span"
-              color={theme.colors.greyDarker80}
-              css={css`
-                font-size: 14px;
-              `}>
-              USDT
-            </Typography>
+            USDT
           </Typography>
-        }>
-        <PieChartLegend
-          data={accountData}
-          colors={legendColorNames}
-          renderValue={({ value, label }) =>
-            label === 'Other' ? value + ' USD' : value + ' ' + label
+        </Typography>
+      }>
+      <PieChartLegend
+        data={accountData}
+        backgroundColors={colors}
+        renderValue={({ value, label }) =>
+          label === 'Other' ? value + ' USD' : value + ' ' + label
+        }
+        markerStyles={css`
+          width: 10px;
+          height: 10px;
+        `}
+        labelListStyles={css`
+          h6 {
+            font-weight: 700;
           }
-          markerStyles={css`
-            width: 10px;
-            height: 10px;
-          `}
-          labelListStyles={css`
-            h6 {
-              font-weight: 700;
+        `}
+        valueListStyles={css`
+          h6 {
+            color: ${theme.colors.greyDarker80};
+          }
+        `}
+      />
+    </PieChart>
+  );
+};
+CustomColors.args = {};
+
+export const FullscreenAndTitle: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const [isFullscreenMode, setFullscreenMode] = useState(false);
+  const { legendColorNames, pieChartColors } =
+    pieChartPalettes.getBalancePalette(theme);
+
+  return (
+    <PieChart
+      data={eventsDataBig}
+      onFullscreenModeChange={setFullscreenMode}
+      colors={pieChartColors}
+      activeHighlight
+      isInteractive
+      innerRadius={0}
+      padAngle={0}
+      cornerRadius={0}
+      css={{
+        padding: 20,
+      }}
+      activeInnerRadiusOffset={0}
+      activeOuterRadiusOffset={isFullscreenMode ? 40 : 7}
+      features={['header', 'fullscreenMode']}
+      cardProps={{
+        title: 'Events',
+      }}
+      tooltip={() => <Fragment></Fragment>}>
+      <PieChartLegend
+        data={eventsDataBig}
+        colors={legendColorNames}
+        activeHighlight
+        markerStyles={css`
+          width: 10px;
+          height: 10px;
+        `}
+        labelListStyles={css`
+          li {
+            height: ${isFullscreenMode ? 'auto' : '34px'};
+          }
+          h6 {
+            color: ${theme.colors.greyDarker};
+            line-height: 34px;
+            font-size: 14px;
+            &:nth-of-type(1) {
+              font-weight: 500;
             }
-          `}
-          valueListStyles={css`
-            h6 {
-              color: ${theme.colors.greyDarker80};
+            &:nth-of-type(2) {
+              font-weight: 700;
+              font-size: 12px;
             }
-          `}
-        />
-      </PieChart>
-    </div>
+          }
+        `}
+        valueListStyles={css`
+          li {
+            justify-content: flex-end;
+            height: ${isFullscreenMode ? 'auto' : '34px'};
+          }
+          h6 {
+            color: ${theme.colors.greyDarker};
+            font-weight: 700;
+            font-size: 12px;
+          }
+        `}
+      />
+    </PieChart>
   );
 };
-AccountExample.args = {};
+FullscreenAndTitle.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -1,38 +1,96 @@
+import { useEffect } from 'react';
 import { ResponsivePie } from '@nivo/pie';
+import {
+  useFullscreenMode,
+  WithFullscreenMode,
+} from '@components/FullscreenModeContext';
+import { WithWidgetCard } from '@components/WidgetCard';
 import { PieChartProps } from './types';
-
 import { PieChartBase, PieChartTextBase } from './PieChartBases';
+import { PieChartHeader } from './PieChartHeader';
 
-export const PieChart = ({
+const PieChartComponent = ({
   as,
   className,
   title,
   children,
+  width = '400px',
+  features = [],
+  cardProps,
+  activeHighlight = false,
+  onFullscreenModeChange,
   ...chartProps
 }: PieChartProps) => {
+  const { isFullscreenMode, activeId, setActiveId } = useFullscreenMode();
+  const {
+    activeInnerRadiusOffset = 0,
+    activeOuterRadiusOffset = 0,
+    isInteractive = false,
+  } = chartProps;
+
+  let internalOffset = 0;
+  if (isInteractive) {
+    internalOffset = Math.max(
+      ...[activeInnerRadiusOffset, activeOuterRadiusOffset],
+    );
+  }
+
+  useEffect(() => {
+    onFullscreenModeChange?.(isFullscreenMode);
+  }, [isFullscreenMode]);
+
   return (
-    <PieChartBase as={as} className={className}>
-      <div className="pie-chart-wrapper">
-        <ResponsivePie
-          isInteractive={false}
-          innerRadius={0.8}
-          enableArcLinkLabels={false}
-          enableArcLabels={false}
-          padAngle={2}
-          cornerRadius={16}
-          activeOuterRadiusOffset={8}
-          colors={{ datum: 'data.color' }}
-          arcLinkLabelsSkipAngle={10}
-          arcLinkLabelsTextColor="#333333"
-          arcLinkLabelsThickness={2}
-          arcLinkLabelsColor={{ from: 'color' }}
-          arcLabelsSkipAngle={10}
-          layers={['arcs', 'arcLinkLabels', 'arcLabels']}
-          {...chartProps}
-        />
-        {title && <PieChartTextBase>{title}</PieChartTextBase>}
-      </div>
-      {children}
-    </PieChartBase>
+    <WithWidgetCard
+      features={features}
+      width={`calc(${width} + ${internalOffset}px)`}
+      cardProps={{
+        headerContent: <PieChartHeader features={features} />,
+        ...cardProps,
+      }}>
+      <PieChartBase
+        as={as}
+        className={className}
+        width={`calc(${width} + ${internalOffset}px)`}
+        isFullscreenMode={isFullscreenMode}>
+        <div className="pie-chart-wrapper">
+          <ResponsivePie
+            isInteractive={false}
+            margin={{
+              top: internalOffset,
+              right: internalOffset,
+              bottom: internalOffset,
+              left: internalOffset,
+            }}
+            innerRadius={0.8}
+            enableArcLinkLabels={false}
+            enableArcLabels={false}
+            padAngle={2}
+            cornerRadius={16}
+            activeInnerRadiusOffset={0}
+            activeOuterRadiusOffset={0}
+            colors={{ datum: 'data.color' }}
+            arcLinkLabelsSkipAngle={10}
+            arcLinkLabelsTextColor="#333333"
+            arcLinkLabelsThickness={2}
+            arcLinkLabelsColor={{ from: 'color' }}
+            arcLabelsSkipAngle={10}
+            layers={['arcs', 'arcLinkLabels', 'arcLabels']}
+            activeId={activeId}
+            onActiveIdChange={(activeId: string | number | null) => {
+              activeHighlight && setActiveId(activeId);
+            }}
+            {...chartProps}
+          />
+          {title && (
+            <PieChartTextBase isFullscreenMode={isFullscreenMode}>
+              {title}
+            </PieChartTextBase>
+          )}
+        </div>
+        {children}
+      </PieChartBase>
+    </WithWidgetCard>
   );
 };
+
+export const PieChart = WithFullscreenMode(PieChartComponent);

package/src/components/PieChart/PieChartBases.tsx

@@ -1,19 +1,46 @@
 import styled from '@emotion/styled';
 
-export const PieChartBase = styled.div`
+export const PieChartBase = styled.div<{
+  isFullscreenMode: boolean;
+  width?: string;
+}>`
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
 
+  flex-direction: ${({ isFullscreenMode }) =>
+    isFullscreenMode ? 'column' : 'row'};
+
+  width: ${({ isFullscreenMode, width }) =>
+    isFullscreenMode ? '100%' : width};
+  height: 100%;
+
+  height: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : 'auto')};
+  max-height: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : 'none')};
+
   & > .pie-chart-wrapper {
     position: relative;
-    width: 160px;
-    height: 160px;
+    width: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : '160px')};
+
+    ${({ theme }) => theme.mediaQueries.md} {
+      margin-bottom: 6px;
+    }
+
+    ${({ theme }) => theme.mediaQueries.lg} {
+      margin-bottom: 0;
+    }
+    height: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : '160px')};
+
+    & > div > div {
+      display: ${({ isFullscreenMode }) =>
+        isFullscreenMode ? 'flex' : 'block'};
+      justify-content: ${({ isFullscreenMode }) =>
+        isFullscreenMode ? 'center' : 'unset'};
+    }
   }
 `;
 
-export const PieChartTextBase = styled.div`
+export const PieChartTextBase = styled.div<{ isFullscreenMode: boolean }>`
   position: absolute;
   display: flex;
   align-items: center;