@ssa-ui-kit/core 0.0.26-alpha → 0.0.28-alpha

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, ProgressInfoProps } from './index';
+
+export default {
+  title: 'Charts/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

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import Dropdown from '@components/Dropdown';
+import DropdownOption from '@components/DropdownOption';
+import type { DropdownOptionProps } from '@components/DropdownOptions';
+import Card from '@components/Card';
+import CardHeader from '@components/CardHeader';
+import Typography from '@components/Typography';
+
+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

@@ -0,0 +1,60 @@
+import Typography from '@components/Typography';
+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

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

package/src/components/ProgressInfo/mockProgressInfoRequest.ts

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

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

@@ -0,0 +1,28 @@
+import { Theme } from '@emotion/react';
+
+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';

package/src/components/SearchBox/SearchBox.e2e.ts

@@ -0,0 +1,37 @@
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-searchbox--default&viewMode=story',
+  );
+};
+
+test('Widgets: SearchBox should be opened correctly', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await gotoPage(page);
+  await page.waitForSelector('#formElement-search');
+
+  const inputElement = await page.getByPlaceholder('Search by name');
+  expect(inputElement).toBeVisible();
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-searchbox--search-icon__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('Widgets: SearchBox - cross icon should be shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+
+  const inputElement = await page.getByPlaceholder('Search by name');
+  await inputElement.type('test');
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-searchbox--cross-icon__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});

package/src/components/SearchBox/SearchBox.spec.tsx

@@ -0,0 +1,77 @@
+import { fireEvent } from '@testing-library/dom';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('SearchBox', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.spyOn(global, 'setTimeout');
+    jest.spyOn(global, 'clearTimeout');
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it('should be correctly rendered', () => {
+    const { getByPlaceholderText, getByTestId, queryByTestId } = render(
+      <StoryComponent />,
+    );
+    getByTestId('search-icon');
+    getByPlaceholderText('Search by name');
+    expect(queryByTestId('cross-icon')).not.toBeInTheDocument();
+  });
+
+  it('should change value and icon', () => {
+    const { getByPlaceholderText, getByTestId } = render(<StoryComponent />);
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+
+    const crossIcon = getByTestId('cross-icon');
+    fireEvent.click(crossIcon);
+
+    expect((inputElement as HTMLInputElement).value).toBe('');
+  });
+
+  it('should be cleared by pressing the cross icon', () => {
+    const { getByPlaceholderText, getByTestId, queryByTestId } = render(
+      <StoryComponent />,
+    );
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+
+    getByTestId('cross-icon');
+    expect((inputElement as HTMLInputElement).value).toBe('test');
+    expect(queryByTestId('search-icon')).not.toBeInTheDocument();
+  });
+
+  it('should call the callback', () => {
+    const { getByPlaceholderText } = render(<StoryComponent />);
+
+    const consoleLogMock = jest.spyOn(console, 'log').mockImplementation();
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+    jest.runAllTimers();
+    expect(consoleLogMock.mock.calls).toEqual([
+      ['Searching for the term...', 'test'],
+    ]);
+    consoleLogMock.mockRestore();
+  });
+
+  it('should call the callback by pressing the Enter key', () => {
+    const handleCallback = jest.fn();
+    const { getByPlaceholderText } = render(
+      <StoryComponent handleCallback={handleCallback} />,
+    );
+
+    const inputElement = getByPlaceholderText('Search by name');
+    fireEvent.change(inputElement, { target: { value: 'test' } });
+    fireEvent.keyUp(inputElement, {
+      key: 'Enter',
+    });
+    expect(handleCallback.mock.calls).toEqual([['test']]);
+  });
+});