@ssa-ui-kit/widgets 0.0.18-alpha → 0.0.20-alpha

package/src/components/ProgressInfo/mockProgressInfoRequest.ts

@@ -1,166 +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',
-      },
-    ],
-  },
-};
+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 +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;
-    }
-  }
-`;
+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 +1,29 @@
-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 IProgressInfoProps {
-  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';
+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 IProgressInfoProps {
+  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

@@ -1,37 +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:6007/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`,
-  });
-});
+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:6007/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

@@ -1,77 +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']]);
-  });
-});
+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']]);
+  });
+});