@ssa-ui-kit/widgets 0.0.7-alpha → 0.0.8-alpha

package/src/components/Filters/stories/mockData.ts

@@ -1,212 +1,212 @@
-import { TableFilterConfig } from '@components/TableFilters/types';
-
-export const mockData: TableFilterConfig = {
-  strategy: {
-    id: 'strategy',
-    title: 'Strategy',
-    isOpened: true,
-    ariaControls: 'strategy-panel',
-    selectedItems: ['checkbox1', 'checkbox4'],
-    items: {
-      checkbox1: {
-        key: 'strategy-checkbox1',
-        name: 'checkbox1',
-        content: {
-          statePath: ['strategy', 'items', 'checkbox1'],
-          text: 'checkbox1',
-        },
-      },
-      checkbox2: {
-        key: 'strategy-checkbox2',
-        name: 'checkbox2',
-        content: {
-          statePath: ['strategy', 'items', 'checkbox2'],
-          text: 'checkbox2',
-        },
-      },
-      checkbox3: {
-        key: 'strategy-checkbox3',
-        name: 'checkbox3',
-        content: {
-          statePath: ['strategy', 'items', 'checkbox3'],
-          text: 'checkbox3',
-        },
-      },
-      checkbox4: {
-        key: 'strategy-checkbox4',
-        name: 'checkbox4',
-        content: {
-          statePath: ['strategy', 'items', 'checkbox4'],
-          text: 'checkbox4',
-        },
-      },
-      checkbox5: {
-        key: 'strategy-checkbox5',
-        name: 'checkbox5',
-        content: {
-          statePath: ['strategy', 'items', 'checkbox5'],
-          text: 'checkbox5',
-        },
-      },
-    },
-  },
-  strategy2: {
-    id: 'strategy2',
-    title: 'Strategy #2',
-    isOpened: false,
-    ariaControls: 'strategy2-panel',
-    selectedItems: ['strategy2Checkbox1'],
-    items: {
-      strategy2Checkbox1: {
-        key: 'strategy2-checkbox1',
-        name: 'strategy2Checkbox1',
-        content: {
-          statePath: ['strategy', 'items', 'strategy2Checkbox1'],
-          text: 'strategy #2 checkbox1',
-        },
-      },
-      strategy2Checkbox2: {
-        key: 'strategy2-checkbox2',
-        name: 'strategy2Checkbox2',
-        content: {
-          statePath: ['strategy', 'items', 'strategy2Checkbox2'],
-          text: 'strategy #2 checkbox2',
-        },
-      },
-      strategy2Checkbox3: {
-        key: 'strategy2-checkbox3',
-        name: 'strategy2Checkbox3',
-        content: {
-          statePath: ['strategy', 'items', 'strategy2Checkbox3'],
-          text: 'strategy #2 checkbox3',
-        },
-      },
-      strategy2Checkbox4: {
-        key: 'strategy2-checkbox4',
-        name: 'strategy2Checkbox4',
-        content: {
-          statePath: ['strategy', 'items', 'strategy2Checkbox4'],
-          text: 'strategy #2 checkbox4',
-        },
-      },
-      strategy2Checkbox5: {
-        key: 'strategy2-checkbox5',
-        name: 'strategy2Checkbox5',
-        content: {
-          statePath: ['strategy', 'items', 'strategy2Checkbox5'],
-          text: 'strategy #2 checkbox5',
-        },
-      },
-    },
-  },
-  strategy3: {
-    id: 'strategy3',
-    title: 'Strategy #3',
-    isOpened: false,
-    ariaControls: 'strategy3-panel',
-    selectedItems: [],
-    items: {
-      strategy3Checkbox1: {
-        key: 'strategy3-checkbox1',
-        name: 'strategy3Checkbox1',
-        content: {
-          statePath: ['strategy', 'items', 'strategy3Checkbox1'],
-          text: 'strategy #3 checkbox1',
-        },
-      },
-      strategy3Checkbox2: {
-        key: 'strategy3-checkbox2',
-        name: 'strategy3Checkbox2',
-        content: {
-          statePath: ['strategy', 'items', 'strategy3Checkbox2'],
-          text: 'strategy #3 checkbox2',
-        },
-      },
-      strategy3Checkbox3: {
-        key: 'strategy3-checkbox3',
-        name: 'strategy3Checkbox3',
-        content: {
-          statePath: ['strategy', 'items', 'strategy3Checkbox3'],
-          text: 'strategy #3 checkbox3',
-        },
-      },
-      strategy3Checkbox4: {
-        key: 'strategy3-checkbox4',
-        name: 'strategy3Checkbox4',
-        content: {
-          statePath: ['strategy', 'items', 'strategy3Checkbox4'],
-          text: 'strategy #3 checkbox4',
-        },
-      },
-      strategy3Checkbox5: {
-        key: 'strategy3-checkbox5',
-        name: 'strategy3Checkbox5',
-        content: {
-          statePath: ['strategy', 'items', 'strategy3Checkbox5'],
-          text: 'strategy #3 checkbox5',
-        },
-      },
-    },
-  },
-  status: {
-    id: 'status',
-    title: 'Status',
-    isOpened: false,
-    ariaControls: 'status-panel',
-    selectedItems: ['running'],
-    items: {
-      running: {
-        key: 'status-checkbox-running',
-        name: 'running',
-        content: {
-          statePath: ['status', 'items', 'running'],
-          text: 'Running',
-        },
-      },
-      stopped: {
-        key: 'status-checkbox-stopped',
-        name: 'stopped',
-        content: {
-          statePath: ['status', 'items', 'stopped'],
-          text: 'Stopped',
-        },
-      },
-    },
-  },
-  pairs: {
-    id: 'pairs',
-    title: 'Pairs',
-    isOpened: false,
-    ariaControls: 'pairs-panel',
-    selectedItems: ['btcfdusd'],
-    items: {
-      btcfdusd: {
-        key: 'btcfdusd',
-        name: 'btcfdusd',
-        isDisabled: true,
-        content: {
-          statePath: ['pairs', 'items', 'btcfdusd'],
-          text: 'BTC-FDUSD',
-        },
-      },
-    },
-  },
-  exchange: {
-    id: 'exchange',
-    title: 'Exchange',
-    isOpened: false,
-    ariaControls: 'exchange-panel',
-    selectedItems: ['binance'],
-    items: {
-      binance: {
-        key: 'binance',
-        name: 'binance',
-        isDisabled: true,
-        content: {
-          statePath: ['exchange', 'items', 'binance'],
-          text: 'Binance',
-        },
-      },
-    },
-  },
-};
+import { TableFilterConfig } from '@components/TableFilters/types';
+
+export const mockData: TableFilterConfig = {
+  strategy: {
+    id: 'strategy',
+    title: 'Strategy',
+    isOpened: true,
+    ariaControls: 'strategy-panel',
+    selectedItems: ['checkbox1', 'checkbox4'],
+    items: {
+      checkbox1: {
+        key: 'strategy-checkbox1',
+        name: 'checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox1'],
+          text: 'checkbox1',
+        },
+      },
+      checkbox2: {
+        key: 'strategy-checkbox2',
+        name: 'checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox2'],
+          text: 'checkbox2',
+        },
+      },
+      checkbox3: {
+        key: 'strategy-checkbox3',
+        name: 'checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox3'],
+          text: 'checkbox3',
+        },
+      },
+      checkbox4: {
+        key: 'strategy-checkbox4',
+        name: 'checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox4'],
+          text: 'checkbox4',
+        },
+      },
+      checkbox5: {
+        key: 'strategy-checkbox5',
+        name: 'checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox5'],
+          text: 'checkbox5',
+        },
+      },
+    },
+  },
+  strategy2: {
+    id: 'strategy2',
+    title: 'Strategy #2',
+    isOpened: false,
+    ariaControls: 'strategy2-panel',
+    selectedItems: ['strategy2Checkbox1'],
+    items: {
+      strategy2Checkbox1: {
+        key: 'strategy2-checkbox1',
+        name: 'strategy2Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox1'],
+          text: 'strategy #2 checkbox1',
+        },
+      },
+      strategy2Checkbox2: {
+        key: 'strategy2-checkbox2',
+        name: 'strategy2Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox2'],
+          text: 'strategy #2 checkbox2',
+        },
+      },
+      strategy2Checkbox3: {
+        key: 'strategy2-checkbox3',
+        name: 'strategy2Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox3'],
+          text: 'strategy #2 checkbox3',
+        },
+      },
+      strategy2Checkbox4: {
+        key: 'strategy2-checkbox4',
+        name: 'strategy2Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox4'],
+          text: 'strategy #2 checkbox4',
+        },
+      },
+      strategy2Checkbox5: {
+        key: 'strategy2-checkbox5',
+        name: 'strategy2Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox5'],
+          text: 'strategy #2 checkbox5',
+        },
+      },
+    },
+  },
+  strategy3: {
+    id: 'strategy3',
+    title: 'Strategy #3',
+    isOpened: false,
+    ariaControls: 'strategy3-panel',
+    selectedItems: [],
+    items: {
+      strategy3Checkbox1: {
+        key: 'strategy3-checkbox1',
+        name: 'strategy3Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox1'],
+          text: 'strategy #3 checkbox1',
+        },
+      },
+      strategy3Checkbox2: {
+        key: 'strategy3-checkbox2',
+        name: 'strategy3Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox2'],
+          text: 'strategy #3 checkbox2',
+        },
+      },
+      strategy3Checkbox3: {
+        key: 'strategy3-checkbox3',
+        name: 'strategy3Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox3'],
+          text: 'strategy #3 checkbox3',
+        },
+      },
+      strategy3Checkbox4: {
+        key: 'strategy3-checkbox4',
+        name: 'strategy3Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox4'],
+          text: 'strategy #3 checkbox4',
+        },
+      },
+      strategy3Checkbox5: {
+        key: 'strategy3-checkbox5',
+        name: 'strategy3Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox5'],
+          text: 'strategy #3 checkbox5',
+        },
+      },
+    },
+  },
+  status: {
+    id: 'status',
+    title: 'Status',
+    isOpened: false,
+    ariaControls: 'status-panel',
+    selectedItems: ['running'],
+    items: {
+      running: {
+        key: 'status-checkbox-running',
+        name: 'running',
+        content: {
+          statePath: ['status', 'items', 'running'],
+          text: 'Running',
+        },
+      },
+      stopped: {
+        key: 'status-checkbox-stopped',
+        name: 'stopped',
+        content: {
+          statePath: ['status', 'items', 'stopped'],
+          text: 'Stopped',
+        },
+      },
+    },
+  },
+  pairs: {
+    id: 'pairs',
+    title: 'Pairs',
+    isOpened: false,
+    ariaControls: 'pairs-panel',
+    selectedItems: ['btcfdusd'],
+    items: {
+      btcfdusd: {
+        key: 'btcfdusd',
+        name: 'btcfdusd',
+        isDisabled: true,
+        content: {
+          statePath: ['pairs', 'items', 'btcfdusd'],
+          text: 'BTC-FDUSD',
+        },
+      },
+    },
+  },
+  exchange: {
+    id: 'exchange',
+    title: 'Exchange',
+    isOpened: false,
+    ariaControls: 'exchange-panel',
+    selectedItems: ['binance'],
+    items: {
+      binance: {
+        key: 'binance',
+        name: 'binance',
+        isDisabled: true,
+        content: {
+          statePath: ['exchange', 'items', 'binance'],
+          text: 'Binance',
+        },
+      },
+    },
+  },
+};

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`,
+      });
+    });
+  }
+});