@ssa-ui-kit/core 1.1.0 → 1.1.2

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.1.0",
+  "version": "1.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
-    "@nivo/line": "0.83.0",
+    "@nivo/line": "0.84.0",
     "@playwright/test": "^1.48.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/testing-library__jest-dom": "^5.14.6",
@@ -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/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',
@@ -180,3 +180,71 @@ export const CustomColors: StoryObj<typeof 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;
+            }
+            &:nth-of-type(2) {
+              font-weight: 700;
+              font-size: 12px;
+            }
+          }
+        `}
+        valueListStyles={css`
+          li {
+            justify-content: flex-end;
+            height: ${isFullscreenMode ? 'auto' : '34px'};
+          }
+          h6 {
+            color: ${theme.colors.greyDarker};
+            font-weight: 700;
+            font-size: 12px;
+          }
+        `}
+      />
+    </PieChart>
+  );
+};
+FullscreenAndTitle.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -1,44 +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 = 400,
+  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}
-      css={{
-        width,
+    <WithWidgetCard
+      features={features}
+      width={`calc(${width} + ${internalOffset}px)`}
+      cardProps={{
+        headerContent: <PieChartHeader features={features} />,
+        ...cardProps,
       }}>
-      <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>
+      <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;

package/src/components/PieChart/PieChartHeader.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react';
+import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
+import Wrapper from '@components/Wrapper';
+import { useFullscreenMode } from '@components/FullscreenModeContext';
+import { PieChartProps } from './types';
+import { PieChartButton } from './styles';
+
+export const PieChartHeader = ({
+  features = [],
+}: Pick<PieChartProps, 'features'>) => {
+  const theme = useTheme();
+  const { toggleFullscreenMode, isFullscreenMode } = useFullscreenMode();
+
+  const handleToggleFullscreenMode = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    event.stopPropagation();
+    event.preventDefault();
+    toggleFullscreenMode();
+  };
+
+  if (!features.length) {
+    return <Fragment></Fragment>;
+  }
+  return (
+    <Wrapper css={{ width: 'auto', marginLeft: 'auto' }}>
+      {features.includes('fullscreenMode') && (
+        <PieChartButton variant="tertiary" onClick={handleToggleFullscreenMode}>
+          <Icon
+            name={isFullscreenMode ? 'cross' : 'maximize'}
+            css={{
+              cursor: 'pointer',
+            }}
+            tooltip={isFullscreenMode ? 'Close' : 'Maximize'}
+            size={18}
+            color={theme.colors.greyFilterIcon}
+          />
+        </PieChartButton>
+      )}
+    </Wrapper>
+  );
+};

package/src/components/PieChart/PieChartLegend.tsx

@@ -1,32 +1,56 @@
 import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
 import Typography from '@components/Typography';
 
+import { useFullscreenMode } from '@components/FullscreenModeContext';
+import Wrapper from '@components/Wrapper';
 import { PieChartLegendMarker } from './PieChartLegendMarker';
 import { PieChartLegendList } from './PieChartLegendList';
 import { PieChartLegendProps } from './types';
+import {
+  PieChartLegendListItem,
+  PieChartLegendListValueListItem,
+} from './PieChartLegendListItem';
 
 export const PieChartLegend = ({
   data,
   colors,
   backgroundColors,
-  renderLabel,
-  renderValue,
   markerStyles,
   currency,
   labelListStyles,
   valueListStyles,
   variant = 'valueList',
+  activeHighlight = false,
+  renderLabel,
+  renderValue,
 }: PieChartLegendProps) => {
   const theme = useTheme();
   const isValueList = variant === 'valueList';
+  const { isFullscreenMode, activeId, setActiveId } = useFullscreenMode();
+  const handleActiveIdChange = (newActiveId: null | number | string) => {
+    if (activeHighlight) {
+      setActiveId(newActiveId);
+    }
+  };
   return (
-    <Fragment>
-      <PieChartLegendList css={labelListStyles}>
+    <Wrapper css={{ width: 'auto' }}>
+      <PieChartLegendList
+        css={labelListStyles}
+        isFullscreenMode={isFullscreenMode}>
         {data.map((item, index) => {
           const { id, label, value, legendValue } = item;
+          const isActive = id === activeId;
           return (
-            <li key={`tag-${id}`}>
+            <PieChartLegendListItem
+              key={`tag-${id}`}
+              isActive={isActive}
+              isFullscreenMode={isFullscreenMode}
+              onMouseEnter={() => {
+                handleActiveIdChange(id);
+              }}
+              onMouseLeave={() => {
+                handleActiveIdChange(null);
+              }}>
               <PieChartLegendMarker
                 color={
                   backgroundColors ? undefined : colors?.[index] || 'purple'
@@ -36,9 +60,18 @@ export const PieChartLegend = ({
                 }
                 as={'span'}
                 css={markerStyles}
+                isFullscreenMode={isFullscreenMode}
               />
               {isValueList ? (
-                <Typography variant="h6">
+                <Typography
+                  variant="h6"
+                  css={{
+                    alignSelf: 'start',
+                    marginRight: 5,
+                    height: 'auto',
+                    lineHeight: '34px',
+                    alignContent: 'center',
+                  }}>
                   {typeof renderLabel === 'function'
                     ? renderLabel(item)
                     : label}
@@ -58,23 +91,53 @@ export const PieChartLegend = ({
                   </span>
                 </Typography>
               )}
-            </li>
+              {isValueList && isFullscreenMode && (
+                <Typography
+                  variant="subtitle"
+                  color={theme.colors.greyDarker60}
+                  css={{
+                    fontSize: isFullscreenMode ? '12px' : '0.833rem',
+                    alignContent: isFullscreenMode && 'center',
+                  }}>
+                  {typeof renderValue === 'function'
+                    ? renderValue(item)
+                    : item.value}
+                </Typography>
+              )}
+            </PieChartLegendListItem>
           );
         })}
       </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>
-          ))}
+      {isValueList && !isFullscreenMode && (
+        <PieChartLegendList
+          css={valueListStyles}
+          isFullscreenMode={isFullscreenMode}>
+          {data.map((item) => {
+            const { id } = item;
+            const isActive = id === activeId;
+            return (
+              <PieChartLegendListValueListItem
+                key={`subtitle-${id}`}
+                isActive={isActive}
+                css={{ paddingLeft: 20 }}
+                onMouseEnter={() => {
+                  handleActiveIdChange(id);
+                }}
+                onMouseLeave={() => {
+                  handleActiveIdChange(null);
+                }}>
+                <Typography
+                  variant="subtitle"
+                  color={theme.colors.greyDarker60}>
+                  {typeof renderValue === 'function'
+                    ? renderValue(item)
+                    : item.value}
+                </Typography>
+              </PieChartLegendListValueListItem>
+            );
+          })}
         </PieChartLegendList>
       )}
-    </Fragment>
+    </Wrapper>
   );
 };

package/src/components/PieChart/PieChartLegendList.tsx

@@ -1,19 +1,23 @@
 import styled from '@emotion/styled';
 
-export const PieChartLegendList = styled.ul`
+export const PieChartLegendList = styled.ul<{ isFullscreenMode?: boolean }>`
   display: flex;
-  flex-flow: column;
   justify-content: center;
   list-style: none;
+  flex-flow: ${({ isFullscreenMode }) =>
+    isFullscreenMode ? 'row wrap' : 'column nowrap'};
 
-  height: 100%;
   padding: 0;
-  margin: 0;
-  gap: 14px;
+  height: ${({ isFullscreenMode }) => (isFullscreenMode ? 'auto' : '100%')};
+  margin: ${({ isFullscreenMode }) => (isFullscreenMode ? '40px 0 50px' : 0)};
+  gap: ${({ isFullscreenMode }) => (isFullscreenMode ? '0 20px' : 0)};
 
   li {
+    height: 34px;
     display: flex;
     align-items: center;
-    height: 20px;
+    text-align: left;
+    white-space: nowrap;
+    padding-right: ${({ isFullscreenMode }) => isFullscreenMode && '12px'};
   }
 `;

package/src/components/PieChart/PieChartLegendListItem.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+export const PieChartLegendListItem = styled.li<{
+  isFullscreenMode?: boolean;
+  isActive?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  height: ${({ isFullscreenMode }) => (isFullscreenMode ? 'auto' : '22px')};
+  padding-right: ${({ isFullscreenMode }) => !isFullscreenMode && '5px'};
+  background: ${({ isActive, theme }) =>
+    isActive && `${theme.colors.greyLighter}`};
+  border-radius: ${({ isFullscreenMode, isActive }) =>
+    isFullscreenMode && isActive && '5px'};
+  border-top-left-radius: ${({ isFullscreenMode, isActive }) =>
+    !isFullscreenMode && isActive && '5px'};
+  border-bottom-left-radius: ${({ isFullscreenMode, isActive }) =>
+    !isFullscreenMode && isActive && '5px'};
+`;
+
+export const PieChartLegendListValueListItem = styled.li<{
+  isActive?: boolean;
+}>`
+  padding: 0 12px 0 20px;
+  justify-content: flex-start;
+  background: ${({ isActive, theme }) =>
+    isActive && `${theme.colors.greyLighter}`};
+  border-top-right-radius: ${({ isActive }) => isActive && '5px'};
+  border-bottom-right-radius: ${({ isActive }) => isActive && '5px'};
+`;