@ssa-ui-kit/widgets 0.0.30-alpha → 0.0.32-alpha

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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;
-  currency?: string;
-  labelListStyles?: SerializedStyles;
-  valueListStyles?: SerializedStyles;
-  variant?: 'valueList' | 'withoutValueList';
-}

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

@@ -1,31 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,32 +0,0 @@
-import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { progressInfoData as data } from './mockProgressInfoRequest';
-
-import { default as ProgressInfo, ProgressInfoProps } 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: ProgressInfoProps,
-) => {
-  return <ProgressInfo {...args} />;
-};
-
-Default.args = { data, className: 'lostpixel-ignore' };

package/src/components/ProgressInfo/ProgressInfo.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useState } from 'react';
-import { css, useTheme } from '@emotion/react';
-import {
-  Card,
-  CardHeader,
-  Typography,
-  DropdownOptionProps,
-  Dropdown,
-  DropdownOption,
-  MainColors,
-} from '@ssa-ui-kit/core';
-
-import { PieChart, PieChartLegend } from '@components/PieChart';
-import { ProgressInfoTotals } from './ProgressInfoTotals';
-
-import {
-  ProgressInfoItemProps,
-  Period,
-  ProgressInfoProps,
-  PeriodOption,
-} from './types';
-
-import { getPieChartStyles } from './styles';
-
-export const ProgressInfo = ({ data, className }: ProgressInfoProps) => {
-  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: DropdownOptionProps) => {
-    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>
-  );
-};

package/src/components/ProgressInfo/ProgressInfoTotals.tsx

@@ -1,60 +0,0 @@
-import { Typography } from '@ssa-ui-kit/core';
-import { withTheme, css } from '@emotion/react';
-
-import { ProgressInfoTotalsProps } from './types';
-
-export const ProgressInfoTotals = withTheme(
-  ({ theme, total }: ProgressInfoTotalsProps) => {
-    return (
-      <Typography
-        variant="body2"
-        weight="regular"
-        color={theme.colors.greyDarker60}
-        css={css`
-          font-size: 13px;
-          line-height: 16px;
-          margin-top: -5px;
-
-          ${theme.mediaQueries.md} {
-            font-size: 16px;
-            font-weight: 700;
-          }
-        `}>
-        Total
-        <Typography
-          variant="body2"
-          weight="bold"
-          color={theme.colors.greyDarker}
-          as={'span'}
-          css={css`
-            font-size: 19px;
-            line-height: 23px;
-            display: block;
-
-            ${theme.mediaQueries.md} {
-              font-size: 27.65px;
-              line-height: 35px;
-            }
-          `}>
-          {total}
-          <Typography
-            variant="body2"
-            weight="regular"
-            as="span"
-            color={theme.colors.greyDarker60}
-            css={css`
-              font-size: 13px;
-              font-weight: 600;
-              margin-left: 3px;
-
-              ${theme.mediaQueries.md} {
-                font-size: 16px;
-              }
-            `}>
-            hrs
-          </Typography>
-        </Typography>
-      </Typography>
-    );
-  },
-);

package/src/components/ProgressInfo/index.ts

@@ -1,3 +0,0 @@
-export { ProgressInfo as default } from './ProgressInfo';
-export { ProgressInfoTotals } from './ProgressInfoTotals';
-export * from './types';

package/src/components/ProgressInfo/mockProgressInfoRequest.ts

@@ -1,166 +0,0 @@
-import { ProgressInfoResp } from './types';
-
-export const progressInfoData: ProgressInfoResp = {
-  weekly: {
-    stretching: [
-      {
-        // cspell:disable-next-line
-        id: 'XlyNrZpVvNp2Z9LqloS6',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-05-03T23:00:00.000Z',
-        value: 88,
-        label: 'stretching',
-      },
-    ],
-    cardio: [
-      {
-        // cspell:disable-next-line
-        id: 'YthvgItFS3W0Sa3mRW0X',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-05-03T23:00:00.000Z',
-        value: 55,
-        label: 'cardio',
-      },
-    ],
-  },
-  monthly: {
-    cardio: [
-      {
-        // cspell:disable-next-line
-        id: '5MI8tTgF1PNFs7Cx7gOC',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-04-26T23:00:00.000Z',
-        value: 76,
-        label: 'cardio',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'YthvgItFS3W0Sa3mRW0X',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-05-03T23:00:00.000Z',
-        value: 55,
-        label: 'cardio',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'eaSQG2w0TkXhbg5dkSmo',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-04-16T23:00:00.000Z',
-        value: 56,
-        label: 'cardio',
-      },
-    ],
-    stretching: [
-      {
-        // cspell:disable-next-line
-        id: 'FdMmyq45pj9M0VVP01EN',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-04-26T23:00:00.000Z',
-        value: 78,
-        label: 'stretching',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'TAFnTPs8kOeAy9uTn502',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-04-16T23:00:00.000Z',
-        value: 88,
-        label: 'stretching',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'XlyNrZpVvNp2Z9LqloS6',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-05-03T23:00:00.000Z',
-        value: 88,
-        label: 'stretching',
-      },
-    ],
-  },
-  yearly: {
-    cardio: [
-      {
-        // cspell:disable-next-line
-        id: '5MI8tTgF1PNFs7Cx7gOC',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-04-26T23:00:00.000Z',
-        value: 76,
-        label: 'cardio',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'YthvgItFS3W0Sa3mRW0X',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-05-03T23:00:00.000Z',
-        value: 55,
-        label: 'cardio',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'eaSQG2w0TkXhbg5dkSmo',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-04-16T23:00:00.000Z',
-        value: 56,
-        label: 'cardio',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'ym7TO7GOoB7NhtFrzT4Y',
-        color: 'rgba(65, 187, 187, 1)',
-        colorTag: 'turquoise',
-        date: '2023-02-17T00:00:00.000Z',
-        value: 23,
-        label: 'cardio',
-      },
-    ],
-    stretching: [
-      {
-        // cspell:disable-next-line
-        id: 'FdMmyq45pj9M0VVP01EN',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-04-26T23:00:00.000Z',
-        value: 78,
-        label: 'stretching',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'TAFnTPs8kOeAy9uTn502',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-04-16T23:00:00.000Z',
-        value: 88,
-        label: 'stretching',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'XlyNrZpVvNp2Z9LqloS6',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-05-03T23:00:00.000Z',
-        value: 88,
-        label: 'stretching',
-      },
-      {
-        // cspell:disable-next-line
-        id: 'twtiFqUQ1yZpv3pcTkCp',
-        color: 'rgba(117, 153, 222, 1)',
-        colorTag: 'blueLight',
-        date: '2023-02-17T00:00:00.000Z',
-        value: 12,
-        label: 'stretching',
-      },
-    ],
-  },
-};

package/src/components/ProgressInfo/styles.ts

@@ -1,20 +0,0 @@
-import { css, Theme } from '@emotion/react';
-
-export const getPieChartStyles = (theme: Theme) => css`
-  width: 100%;
-  height: 100%;
-
-  max-width: 380px;
-
-  div:nth-of-type(1) {
-    width: 120px;
-    height: 120px;
-  }
-
-  ${theme.mediaQueries.md} {
-    div:nth-of-type(1) {
-      width: 160px;
-      height: 160px;
-    }
-  }
-`;

package/src/components/ProgressInfo/types.ts

@@ -1,29 +0,0 @@
-import { Theme } from '@emotion/react';
-import { MainColors } from '@ssa-ui-kit/core';
-
-export type ProgressInfoItemProps = {
-  id: string;
-  date: string;
-  label: string;
-  value: number;
-  color: string;
-  colorTag: keyof MainColors | undefined;
-};
-
-export type ProgressInfoResp = {
-  [key: string]: { [key: string]: ProgressInfoItemProps[] };
-};
-
-export interface ProgressInfoProps {
-  data: ProgressInfoResp;
-  className?: string;
-}
-
-export interface ProgressInfoTotalsProps {
-  theme: Theme;
-  total: number;
-}
-
-export type PeriodOption = { value: string; id: string };
-
-export type Period = 'daily' | 'weekly' | 'monthly' | 'yearly';