@ssa-ui-kit/widgets 0.0.1-alpha

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import { MainColors, Typography } from '@ssa-ui-kit/core';
+
+import { PieChart, PieChartLegend, pieChartPalettes } from './index';
+import { fitnessData, accountData } from './stories/fixtures';
+
+export default {
+  title: 'Widgets/PieChart',
+  component: PieChart,
+} as Meta<typeof PieChart>;
+
+export const FitnessExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+    keyof MainColors
+  >;
+  const pieChartColors = [
+    theme.colors.blueLighter,
+    theme.colors.turquoise,
+  ] as unknown as string[];
+
+  return (
+    <div style={{ width: '400px' }}>
+      <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="bold"
+              color={theme.colors.greyDarker}
+              css={css`
+                font-size: 27.65px;
+                line-height: 35px;
+              `}>
+              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>
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend data={fitnessData} colors={colorNames} />
+      </PieChart>
+    </div>
+  );
+};
+FitnessExample.args = {};
+
+export const AccountExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const { legendColorNames, pieChartColors } =
+    pieChartPalettes.getBalancePalette(theme);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <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;
+            `}>
+            147358 &nbsp;
+            <Typography
+              variant="body2"
+              weight="regular"
+              as="span"
+              color={theme.colors.greyDarker80}
+              css={css`
+                font-size: 14px;
+              `}>
+              USD
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend
+          data={accountData}
+          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>
+    </div>
+  );
+};
+AccountExample.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -0,0 +1,40 @@
+import { ResponsivePie } from '@nivo/pie';
+import { PieChartProps } from './types';
+
+import { PieChartBase, PieChartTextBase } from './PieChartBases';
+
+export const PieChart = ({
+  data,
+  as,
+  className,
+  title,
+  children,
+  ...chartProps
+}: PieChartProps) => {
+  return (
+    <PieChartBase as={as} className={className}>
+      <div className="pie-chart-wrapper">
+        <ResponsivePie
+          data={data}
+          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']}
+          {...chartProps}
+        />
+        {title && <PieChartTextBase>{title}</PieChartTextBase>}
+      </div>
+      {children}
+    </PieChartBase>
+  );
+};

package/src/components/PieChart/PieChartBases.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+export const PieChartBase = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  & > .pie-chart-wrapper {
+    position: relative;
+    width: 160px;
+    height: 160px;
+  }
+`;
+
+export const PieChartTextBase = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;

package/src/components/PieChart/PieChartLegend.tsx

@@ -0,0 +1,51 @@
+import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
+import { Typography } from '@ssa-ui-kit/core';
+
+import { PieChartLegendMarker } from './PieChartLegendMarker';
+import { PieChartLegendList } from './PieChartLegendList';
+import { PieChartLegendProps } from './types';
+
+export const PieChartLegend = ({
+  data,
+  colors,
+  renderLabel,
+  renderValue,
+  markerStyles,
+  labelListStyles,
+  valueListStyles,
+}: PieChartLegendProps) => {
+  const theme = useTheme();
+  return (
+    <Fragment>
+      <PieChartLegendList css={labelListStyles}>
+        {data.map((item, index) => {
+          const { id, label } = item;
+          return (
+            <li key={`tag-${id}`}>
+              <PieChartLegendMarker
+                color={colors[index] || 'purple'}
+                as={'span'}
+                css={markerStyles}
+              />
+              <Typography variant="h6">
+                {typeof renderLabel === 'function' ? renderLabel(item) : label}
+              </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>
+    </Fragment>
+  );
+};

package/src/components/PieChart/PieChartLegendList.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+export const PieChartLegendList = styled.ul`
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  list-style: none;
+
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  gap: 14px;
+
+  li {
+    display: flex;
+    align-items: center;
+    height: 20px;
+  }
+`;

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import { Badge } from '@ssa-ui-kit/core';
+
+export const PieChartLegendMarker = styled(Badge)`
+  display: inline-block;
+
+  padding: 0;
+  margin-right: 12px;
+
+  width: 8px;
+  height: 8px;
+`;

package/src/components/PieChart/colorPalettes.ts

@@ -0,0 +1,28 @@
+import { Theme } from '@emotion/react';
+import { MainColors } from '@ssa-ui-kit/core';
+
+export const getBalancePalette = (theme: Theme) => {
+  const legendColorNames = [
+    'yellow',
+    'blue',
+    'green',
+    'yellowWarm',
+    'blueLight',
+    'turquoise',
+    'pink',
+    'purple',
+  ] as unknown as Array<keyof MainColors>;
+
+  const pieChartColors = [
+    theme.colors.yellow,
+    theme.colors.blue,
+    theme.colors.green,
+    theme.colors.yellowLighter,
+    theme.colors.blueLight,
+    theme.colors.turquoise,
+    theme.colors.pink,
+    theme.colors.purple,
+  ] as unknown as string[];
+
+  return { legendColorNames, pieChartColors };
+};

package/src/components/PieChart/index.ts

@@ -0,0 +1,4 @@
+export * from './PieChart';
+export * from './PieChartLegend';
+export * as pieChartPalettes from './colorPalettes';
+export * from './types';

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

@@ -0,0 +1,39 @@
+export const fitnessData = [
+  {
+    // cspell:disable-next-line
+    id: 'XlyNrZpVvNp2Z9LqloS6',
+    date: '2023-05-03T23:00:00.000Z',
+    value: 88,
+    label: 'stretching',
+  },
+  {
+    // cspell:disable-next-line
+    id: 'YthvgItFS3W0Sa3mRW0X',
+    date: '2023-05-03T23:00:00.000Z',
+    value: 55,
+    label: 'cardio',
+  },
+];
+
+export const accountData = [
+  {
+    id: 1,
+    value: 5800,
+    label: 'BTC',
+  },
+  {
+    id: 2,
+    value: 6243,
+    label: 'ETH',
+  },
+  {
+    id: 3,
+    value: 3840,
+    label: 'USDT',
+  },
+  {
+    id: 4,
+    value: 2300,
+    label: 'Other',
+  },
+];

package/src/components/PieChart/types.ts

@@ -0,0 +1,28 @@
+import { SerializedStyles } from '@emotion/react';
+import { CommonProps, MainColors } from '@ssa-ui-kit/core';
+import { ResponsivePie } from '@nivo/pie';
+
+export interface PieChartProps
+  extends CommonProps,
+    React.ComponentProps<typeof ResponsivePie> {
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export type PieChartLegendItem = {
+  id: string | number;
+  value: string | number;
+  label: string;
+  [key: string | number | symbol]: unknown;
+};
+
+export interface PieChartLegendProps {
+  data: Array<PieChartLegendItem>;
+  colors: Array<keyof MainColors>;
+  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  className?: string;
+  markerStyles?: SerializedStyles;
+  labelListStyles?: SerializedStyles;
+  valueListStyles?: SerializedStyles;
+}

package/src/components/ProgressInfo/ProgressInfo.e2e.ts

@@ -0,0 +1,31 @@
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-progressInfo__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-progressinfo--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: ProgressInfo', () => {
+  for (const resolution of Object.keys(SCREEN_SIZES)) {
+    const viewportSize =
+      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
+
+    test(`[${resolution}] Renders on extra large screens`, async ({ page }) => {
+      await page.setViewportSize(viewportSize);
+      await gotoPage(page);
+      await page.screenshot({
+        path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
+      });
+      await page.getByRole('combobox').click();
+      await page.waitForSelector('[role="listbox"]');
+      await page.screenshot({
+        path: `${SCREENSHOT_PREFIX}dropdown__[w${resolution}px].png`,
+      });
+    });
+  }
+});

package/src/components/ProgressInfo/ProgressInfo.spec.tsx

@@ -0,0 +1,91 @@
+import userEvent from '@testing-library/user-event';
+import { fireEvent, screen, waitFor, within } from '../../../customTest';
+import ResizeObserver from 'resize-observer-polyfill';
+
+import { progressInfoData as data } from './mockProgressInfoRequest';
+
+import ProgressInfo from './index';
+
+const ResponsivePieMock = ({
+  colors,
+}: {
+  onMouseMove: (p: { data: { y: number } }) => void;
+  colors?: string;
+}) => <div data-testid="progress-mock" css={{ color: colors }}></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+const setup = (component: React.ReactElement) => {
+  return {
+    user: userEvent.setup(),
+    ...render(component),
+  };
+};
+
+describe('ProgressInfo', () => {
+  beforeAll(() => {
+    window.ResizeObserver = ResizeObserver;
+  });
+
+  it('Renders the correct number items legends & items', async () => {
+    render(<ProgressInfo data={data} />);
+
+    await waitFor(async () => {
+      const [listActivities, listTotal] = await screen.findAllByRole('list');
+      const listActivitiesEls = await within(listActivities).findAllByRole(
+        'listitem',
+      );
+      const listTotalEls = await within(listTotal).findAllByRole('listitem');
+
+      expect(listActivitiesEls).toHaveLength(2);
+      expect(listTotalEls).toHaveLength(2);
+    });
+  });
+
+  it('Changes its content when a period is changed', async () => {
+    const { getByTestId, getByRole, getAllByRole, getByText } = render(
+      <ProgressInfo data={data} />,
+    );
+
+    await waitFor(async () => {
+      const dropdownEl = getByTestId('dropdown');
+      const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+      await fireEvent.click(dropdownToggleEl);
+
+      const listItemEls = within(getByRole('listbox')).getAllByRole('button');
+
+      await fireEvent.click(listItemEls[2]);
+
+      const [listActivities, listTotal] = getAllByRole('list');
+      const listActivitiesEls = within(listActivities).getAllByRole('listitem');
+      const listTotalEls = within(listTotal).getAllByRole('listitem');
+
+      expect(listActivitiesEls).toHaveLength(2);
+      expect(listTotalEls).toHaveLength(2);
+      expect(getByText(/210 hrs/i)).toBeInTheDocument();
+      expect(getByText(/266 hrs/i)).toBeInTheDocument();
+    });
+  });
+
+  it('Renders without data', async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const { queryByTestId } = render(<ProgressInfo data="" />);
+
+    await waitFor(async () => {
+      const dropdownEl = await queryByTestId('dropdown');
+
+      expect(dropdownEl).not.toBeInTheDocument();
+    });
+  });
+
+  it('Renders ResponsivePie', async () => {
+    const { getByTestId } = setup(<ProgressInfo data={data} />);
+
+    await expect(getByTestId('progress-mock')).toBeInTheDocument();
+  });
+});

package/src/components/ProgressInfo/ProgressInfo.stories.tsx

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { progressInfoData as data } from './mockProgressInfoRequest';
+
+import { default as ProgressInfo, IProgressInfoProps } from './index';
+
+export default {
+  title: 'Widgets/ProgressInfo',
+  component: ProgressInfo,
+  args: {
+    data,
+  },
+  decorators: [
+    (Story) => (
+      <div
+        css={css`
+          container-type: inline-size;
+        `}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof ProgressInfo>;
+
+export const Default: StoryObj<typeof ProgressInfo> = (
+  args: IProgressInfoProps,
+) => {
+  return <ProgressInfo {...args} />;
+};
+
+Default.args = { data, className: 'lostpixel-ignore' };

package/src/components/ProgressInfo/ProgressInfo.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import {
+  Card,
+  CardHeader,
+  Typography,
+  IDropdownOption,
+  Dropdown,
+  DropdownOption,
+  MainColors,
+} from '@ssa-ui-kit/core';
+
+import { PieChart, PieChartLegend } from '@components/PieChart';
+import { ProgressInfoTotals } from './ProgressInfoTotals';
+
+import {
+  ProgressInfoItemProps,
+  Period,
+  IProgressInfoProps,
+  PeriodOption,
+} from './types';
+
+import { getPieChartStyles } from './styles';
+
+export const ProgressInfo = ({ data, className }: IProgressInfoProps) => {
+  const [options, setOptions] = useState<PeriodOption[]>([]);
+  const [selected, setSelected] = useState<PeriodOption>();
+  const [response, setResponse] = useState<ProgressInfoItemProps[]>([]);
+  const theme = useTheme();
+
+  useEffect(() => {
+    if (Object.keys(data).length > 0) {
+      const options: PeriodOption[] = [];
+
+      Object.keys(data).forEach((key) => {
+        Object.keys(data[key]).length > 0
+          ? options.push({ value: key, id: key })
+          : null;
+      });
+
+      setOptions(options);
+      setSelected(options[0]);
+
+      filterData(options[0].id as Period);
+    }
+  }, [data]);
+
+  const sumValues = (
+    acc: ProgressInfoItemProps,
+    cur: ProgressInfoItemProps,
+  ) => {
+    return {
+      ...acc,
+      value: acc.value + (cur?.value ? cur.value : 0),
+    };
+  };
+
+  const filterData = (e: Period) => {
+    const response: ProgressInfoItemProps[] = [];
+
+    Object.keys(data[e]).forEach((key) => {
+      const el = data[e][key].reduce(sumValues);
+
+      response.push(el);
+    });
+
+    setResponse(response);
+  };
+
+  const handleChange = (e: IDropdownOption) => {
+    filterData(e.value as Period);
+  };
+
+  return (
+    <Card
+      css={css`
+        border-radius: 20px;
+        padding-inline: 24px;
+        padding-block: 24px;
+      `}
+      className={className}>
+      <CardHeader>
+        <Typography variant="h3" weight="bold">
+          Progress
+        </Typography>
+
+        {Object.keys(options).length > 0 && (
+          <Dropdown selectedItem={selected} onChange={handleChange}>
+            {options.map((item, index) => (
+              <DropdownOption key={index} value={item.value} />
+            ))}
+          </Dropdown>
+        )}
+      </CardHeader>
+      {response.length > 0 ? (
+        <PieChart
+          data={response}
+          css={getPieChartStyles(theme)}
+          title={
+            <ProgressInfoTotals
+              theme={theme}
+              total={response.reduce((sum, { value }) => sum + value, 0)}
+            />
+          }>
+          <PieChartLegend
+            data={response}
+            colors={response.map(
+              ({ colorTag }) =>
+                colorTag || ('purple' as unknown as keyof MainColors),
+            )}
+            renderValue={({ value }) => value + ' hrs'}
+          />
+        </PieChart>
+      ) : null}
+    </Card>
+  );
+};