@ssa-ui-kit/widgets 0.0.14-alpha → 0.0.16-alpha

package/src/components/Filters/types.ts

@@ -1,4 +1,4 @@
-export type ElementInfo = {
-  name: string;
-  visibility?: boolean;
-};
+export type ElementInfo = {
+  name: string;
+  visibility?: boolean;
+};

package/src/components/HeartRate/BPM.tsx

@@ -1,43 +1,43 @@
-import styled from '@emotion/styled';
-import { Theme, useTheme } from '@emotion/react';
-import { css } from '@emotion/react';
-import { IBMPProps } from './types';
-
-const BPMBase = styled.div`
-  text-align: center;
-  margin-top: 23px;
-`;
-
-const BPMValueStyles = css`
-  font-weight: 700;
-  font-size: 1.728rem; /* 27.65px */
-  line-height: 2rem; /* 32px */
-
-  @media (max-width: 900px) {
-    font-size: 1.2rem; /* 19.2px */
-    line-height: 1.639; /* 26.23px */
-  }
-`;
-
-const getBPMLabelStyles = (theme: Theme) => css`
-  color: ${theme.colors.greyDarker60};
-  font-weight: 600;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5rem; /* 24px */
-  margin-left: 4px;
-
-  @media (max-width: 900px) {
-    font-size: 0.833rem; /* 13.33px */
-    line-height: 1.375; /* 22px */
-  }
-`;
-
-export const BPM = ({ value }: IBMPProps) => {
-  const theme = useTheme();
-  return (
-    <BPMBase>
-      <span css={BPMValueStyles}>{value}</span>
-      <span css={getBPMLabelStyles(theme)}>BPM</span>
-    </BPMBase>
-  );
-};
+import styled from '@emotion/styled';
+import { Theme, useTheme } from '@emotion/react';
+import { css } from '@emotion/react';
+import { IBMPProps } from './types';
+
+const BPMBase = styled.div`
+  text-align: center;
+  margin-top: 23px;
+`;
+
+const BPMValueStyles = css`
+  font-weight: 700;
+  font-size: 1.728rem; /* 27.65px */
+  line-height: 2rem; /* 32px */
+
+  @media (max-width: 900px) {
+    font-size: 1.2rem; /* 19.2px */
+    line-height: 1.639; /* 26.23px */
+  }
+`;
+
+const getBPMLabelStyles = (theme: Theme) => css`
+  color: ${theme.colors.greyDarker60};
+  font-weight: 600;
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  margin-left: 4px;
+
+  @media (max-width: 900px) {
+    font-size: 0.833rem; /* 13.33px */
+    line-height: 1.375; /* 22px */
+  }
+`;
+
+export const BPM = ({ value }: IBMPProps) => {
+  const theme = useTheme();
+  return (
+    <BPMBase>
+      <span css={BPMValueStyles}>{value}</span>
+      <span css={getBPMLabelStyles(theme)}>BPM</span>
+    </BPMBase>
+  );
+};

package/src/components/HeartRate/HeartRate.e2e.ts

@@ -1,78 +1,78 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-heart-rate--hint-opened__`;
-
-const MOUSE_POSITIONS = {
-  390: [
-    { x: 97, y: 122 },
-    { x: 97, y: 122 },
-  ],
-  900: [
-    { x: 215, y: 123 },
-    { x: 212, y: 123 },
-  ],
-  1440: [
-    { x: 334, y: 123 },
-    { x: 337, y: 123 },
-  ],
-  1920: [
-    { x: 453, y: 125 },
-    { x: 450, y: 125 },
-  ],
-};
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-heartrate--default&viewMode=story',
-  );
-};
-
-const waitForImg = (page: Page) => {
-  return page.getByRole('img', { name: 'Heart' }).waitFor();
-};
-
-/**
- * The BPM value is always different on screenshots.
- * That's why we ignore it to avoid re-approving every time.
- * */
-const replaceBPMValue = (page: Page) => {
-  return page
-    .locator('span[class*="BPMValueStyles"]')
-    .evaluate((element: HTMLSpanElement) => (element.textContent = 'N'));
-};
-
-test.describe('Widgets: HeartRate', () => {
-  test('Renders correctly', async ({ page }) => {
-    await gotoPage(page);
-    await expect(
-      page.getByRole('heading', { name: 'Heart Rate' }),
-    ).toBeVisible();
-  });
-
-  for (const resolution of Object.keys(SCREEN_SIZES)) {
-    const viewportSize =
-      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
-    const mouseMoves =
-      MOUSE_POSITIONS[resolution as unknown as keyof typeof SCREEN_SIZES];
-
-    if (mouseMoves == null) {
-      throw new Error(
-        `No mouse move for the specified resolution "${resolution}" found`,
-      );
-    }
-
-    test(`[${resolution}] Tooltip is shown`, async ({ page }) => {
-      await page.setViewportSize(viewportSize);
-      await gotoPage(page);
-      for (const { x, y } of mouseMoves) {
-        await page.mouse.move(x, y);
-      }
-      await Promise.all([replaceBPMValue(page), waitForImg(page)]);
-      await page.screenshot({
-        path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
-      });
-    });
-  }
-});
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-heart-rate--hint-opened__`;
+
+const MOUSE_POSITIONS = {
+  390: [
+    { x: 97, y: 122 },
+    { x: 97, y: 122 },
+  ],
+  900: [
+    { x: 215, y: 123 },
+    { x: 212, y: 123 },
+  ],
+  1440: [
+    { x: 334, y: 123 },
+    { x: 337, y: 123 },
+  ],
+  1920: [
+    { x: 453, y: 125 },
+    { x: 450, y: 125 },
+  ],
+};
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-heartrate--default&viewMode=story',
+  );
+};
+
+const waitForImg = (page: Page) => {
+  return page.getByRole('img', { name: 'Heart' }).waitFor();
+};
+
+/**
+ * The BPM value is always different on screenshots.
+ * That's why we ignore it to avoid re-approving every time.
+ * */
+const replaceBPMValue = (page: Page) => {
+  return page
+    .locator('span[class*="BPMValueStyles"]')
+    .evaluate((element: HTMLSpanElement) => (element.textContent = 'N'));
+};
+
+test.describe('Widgets: HeartRate', () => {
+  test('Renders correctly', async ({ page }) => {
+    await gotoPage(page);
+    await expect(
+      page.getByRole('heading', { name: 'Heart Rate' }),
+    ).toBeVisible();
+  });
+
+  for (const resolution of Object.keys(SCREEN_SIZES)) {
+    const viewportSize =
+      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
+    const mouseMoves =
+      MOUSE_POSITIONS[resolution as unknown as keyof typeof SCREEN_SIZES];
+
+    if (mouseMoves == null) {
+      throw new Error(
+        `No mouse move for the specified resolution "${resolution}" found`,
+      );
+    }
+
+    test(`[${resolution}] Tooltip is shown`, async ({ page }) => {
+      await page.setViewportSize(viewportSize);
+      await gotoPage(page);
+      for (const { x, y } of mouseMoves) {
+        await page.mouse.move(x, y);
+      }
+      await Promise.all([replaceBPMValue(page), waitForImg(page)]);
+      await page.screenshot({
+        path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
+      });
+    });
+  }
+});

package/src/components/HeartRate/HeartRate.spec.tsx

@@ -1,91 +1,91 @@
-import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/react';
-
-import { heartRateData as data } from './mockHeartRateRequest';
-
-import { HeartRate } from './index';
-
-/**
- * The Line charts have trouble rendering in the test suite (some issues with
- * the ResizeObserver).
- * As a temporal solution, we follow Kent's advice not to test charts
- * with Jest:
- * https://kentcdodds.com/calls/01/76/nivo-charts-issue
- * */
-const HeartRateLineChartMock = ({
-  onMouseMove,
-  colors,
-}: {
-  onMouseMove: (p: { data: { y: number } }) => void;
-  colors?: string;
-}) => (
-  <div
-    data-testid="chart-mock"
-    css={{ color: colors }}
-    onMouseMove={() => {
-      onMouseMove({ data: { y: 170 } });
-    }}></div>
-);
-
-jest.mock('./HeartRateLineChart', () => ({
-  HeartRateLineChart: HeartRateLineChartMock,
-}));
-
-function setup(component: React.ReactElement) {
-  return {
-    user: userEvent.setup(),
-    ...render(component),
-  };
-}
-
-describe('HeartRate', () => {
-  it('Renders and reacts to mouse events', async () => {
-    const { getByText, getByTestId } = setup(<HeartRate data={data} />);
-
-    getByText('Heart Rate');
-    getByText(data.data[0].y);
-    getByText('BPM');
-    const chartEl = getByTestId('chart-mock');
-
-    await userEvent.hover(chartEl);
-
-    await waitFor(() => {
-      getByText(170);
-    });
-  });
-
-  it('Renders with a custom color', () => {
-    const chartColor = 'orange';
-    const { getByTestId } = setup(<HeartRate data={data} color={chartColor} />);
-
-    // Since we don't render the real <HeartRateLineChart /> component, we
-    // just check here that we pass the "colors" prop into its mock.
-    const chartEl = getByTestId('chart-mock');
-    expect(chartEl).toHaveStyle(`color: ${chartColor}`);
-  });
-
-  it('Renders with a custom caption', () => {
-    const caption = 'A custom caption';
-    const { getByText, queryByText } = setup(
-      <HeartRate data={data} caption={caption} />,
-    );
-
-    expect(queryByText('Heart Rate')).not.toBeInTheDocument();
-    getByText(caption);
-  });
-
-  it('Handle empty data', () => {
-    const caption = 'A custom caption';
-
-    const { getByText, queryByText } = setup(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      <HeartRate data={null} caption={caption} />,
-    );
-
-    expect(queryByText('Heart Rate')).not.toBeInTheDocument();
-    expect(queryByText('BPM')).not.toBeInTheDocument();
-
-    getByText(caption);
-  });
-});
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+
+import { heartRateData as data } from './mockHeartRateRequest';
+
+import { HeartRate } from './index';
+
+/**
+ * The Line charts have trouble rendering in the test suite (some issues with
+ * the ResizeObserver).
+ * As a temporal solution, we follow Kent's advice not to test charts
+ * with Jest:
+ * https://kentcdodds.com/calls/01/76/nivo-charts-issue
+ * */
+const HeartRateLineChartMock = ({
+  onMouseMove,
+  colors,
+}: {
+  onMouseMove: (p: { data: { y: number } }) => void;
+  colors?: string;
+}) => (
+  <div
+    data-testid="chart-mock"
+    css={{ color: colors }}
+    onMouseMove={() => {
+      onMouseMove({ data: { y: 170 } });
+    }}></div>
+);
+
+jest.mock('./HeartRateLineChart', () => ({
+  HeartRateLineChart: HeartRateLineChartMock,
+}));
+
+function setup(component: React.ReactElement) {
+  return {
+    user: userEvent.setup(),
+    ...render(component),
+  };
+}
+
+describe('HeartRate', () => {
+  it('Renders and reacts to mouse events', async () => {
+    const { getByText, getByTestId } = setup(<HeartRate data={data} />);
+
+    getByText('Heart Rate');
+    getByText(data.data[0].y);
+    getByText('BPM');
+    const chartEl = getByTestId('chart-mock');
+
+    await userEvent.hover(chartEl);
+
+    await waitFor(() => {
+      getByText(170);
+    });
+  });
+
+  it('Renders with a custom color', () => {
+    const chartColor = 'orange';
+    const { getByTestId } = setup(<HeartRate data={data} color={chartColor} />);
+
+    // Since we don't render the real <HeartRateLineChart /> component, we
+    // just check here that we pass the "colors" prop into its mock.
+    const chartEl = getByTestId('chart-mock');
+    expect(chartEl).toHaveStyle(`color: ${chartColor}`);
+  });
+
+  it('Renders with a custom caption', () => {
+    const caption = 'A custom caption';
+    const { getByText, queryByText } = setup(
+      <HeartRate data={data} caption={caption} />,
+    );
+
+    expect(queryByText('Heart Rate')).not.toBeInTheDocument();
+    getByText(caption);
+  });
+
+  it('Handle empty data', () => {
+    const caption = 'A custom caption';
+
+    const { getByText, queryByText } = setup(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      <HeartRate data={null} caption={caption} />,
+    );
+
+    expect(queryByText('Heart Rate')).not.toBeInTheDocument();
+    expect(queryByText('BPM')).not.toBeInTheDocument();
+
+    getByText(caption);
+  });
+});

package/src/components/HeartRate/HeartRate.stories.tsx

@@ -1,36 +1,36 @@
-import type { Meta } from '@storybook/react';
-import '@storybook/types';
-
-import { HeartRate } from './index';
-import { heartRateData as data } from './mockHeartRateRequest';
-
-export default {
-  title: 'Widgets/HeartRate',
-  component: HeartRate,
-  argTypes: {
-    color: {
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-      options: [
-        'pink',
-        'yellow',
-        'green',
-        'turquoise',
-        'purple',
-        'blueLight',
-        'blue',
-      ],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-  args: {
-    data,
-  },
-} as Meta<typeof HeartRate>;
-
-export const Default = {};
+import type { Meta } from '@storybook/react';
+import '@storybook/types';
+
+import { HeartRate } from './index';
+import { heartRateData as data } from './mockHeartRateRequest';
+
+export default {
+  title: 'Widgets/HeartRate',
+  component: HeartRate,
+  argTypes: {
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: {
+    data,
+  },
+} as Meta<typeof HeartRate>;
+
+export const Default = {};