@ssa-ui-kit/widgets 0.0.1-alpha

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

@@ -0,0 +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',
+        },
+      },
+    },
+  },
+};

package/src/components/Filters/types.ts

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

package/src/components/HeartRate/BPM.tsx

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

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

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

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

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

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

@@ -0,0 +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 = {};

package/src/components/HeartRate/HeartRate.tsx

@@ -0,0 +1,105 @@
+import { useState, useMemo, useEffect } from 'react';
+import { css, useTheme } from '@emotion/react';
+import { linearGradientDef } from '@nivo/core';
+import { Point } from '@nivo/line';
+
+import {
+  CardHeader,
+  CardContent,
+  Card,
+  ResponsiveImage,
+  Typography,
+} from '@ssa-ui-kit/core';
+
+import { throttle } from '@ssa-ui-kit/utils';
+
+import { IHeartRateProps } from './types';
+import { HeartRateLineChart } from './HeartRateLineChart';
+import { BPM } from './BPM';
+
+const gradientId = 'HeartRateGradient';
+const chartFill = [{ match: '*' as const, id: gradientId }];
+
+/**
+ *
+ * UI Component that shows the heart rate of the user
+ */
+export const HeartRate = ({
+  data,
+  caption = 'Heart Rate',
+  color,
+}: IHeartRateProps) => {
+  const [bpmValue, setBpmValue] = useState<number>(
+    data?.data?.[0]?.y as number,
+  );
+  const [onBpmValueChange, cancelTimer] = useMemo(
+    () => throttle((point: Point) => setBpmValue(point?.data?.y as any), 100),
+    [],
+  );
+
+  const theme = useTheme();
+  const chartColor = color || theme.colors.purpleDark;
+
+  useEffect(() => () => cancelTimer(), []);
+
+  useEffect(() => {
+    setBpmValue(data?.data?.[0]?.y as number);
+  }, [data]);
+
+  const gradientDefs = useMemo(
+    () => [
+      linearGradientDef(gradientId, [
+        { offset: 100, color: chartColor as string },
+        { offset: 0, color: chartColor as string },
+      ]),
+    ],
+    [chartColor],
+  );
+
+  const chartProps = useMemo(
+    () => ({
+      data: [data],
+      colors: chartColor,
+    }),
+    [data, chartColor],
+  );
+
+  return (
+    <Card
+      css={css`
+        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
+        border-radius: 20px;
+      `}>
+      <CardHeader
+        icon={
+          <ResponsiveImage
+            css={{ filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})` }}
+            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_64.png?alt=media&token=aca1639b-62f5-44ed-a0d1-3cea8e4797e2 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_48.png?alt=media&token=7ef68a25-5362-48b9-b359-c46b48d1db54 48w"
+            sizes="(min-width: 1440px) 64px, 48px"
+            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_48.png?alt=media&token=7ef68a25-5362-48b9-b359-c46b48d1db54"
+            alt="Heart"
+          />
+        }>
+        <Typography variant="h5" weight="bold">
+          {caption}
+        </Typography>
+      </CardHeader>
+      <CardContent direction="column" css={{ width: '100%' }}>
+        <div
+          css={css`
+            height: 65px;
+            width: calc(100% + 40px);
+            margin-inline: -20px;
+          `}>
+          <HeartRateLineChart
+            {...chartProps}
+            fill={chartFill}
+            defs={gradientDefs}
+            onMouseMove={onBpmValueChange}
+          />
+        </div>
+        {bpmValue != null ? <BPM value={bpmValue} /> : null}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/HeartRate/HeartRateLineChart.tsx

@@ -0,0 +1,53 @@
+import { ResponsiveLine, LineSvgProps, LineProps } from '@nivo/line';
+import { SimpleChartTooltip } from '@ssa-ui-kit/core';
+
+import { getTime } from './utils';
+
+// ScaleSpec is not exported from @nivo/line
+type ScaleSpec = LineSvgProps['xScale'];
+
+const defaults: Omit<LineProps, 'data'> = {
+  margin: { top: 0, right: 0, bottom: 0, left: 0 },
+  xScale: { type: 'point' } as ScaleSpec,
+  yScale: {
+    type: 'linear',
+    min: 'auto',
+    max: 'auto',
+    stacked: true,
+    reverse: false,
+  } as ScaleSpec,
+  pointBorderColor: { from: 'serieColor' },
+  legends: [],
+  xFormat: (yVal) => getTime(new Date(yVal)),
+  yFormat: (xVal) => `${xVal} bpm`,
+  tooltip: (args) => <SimpleChartTooltip {...args} />,
+};
+
+export const HeartRateLineChart = ({ data, ...props }: LineSvgProps) => {
+  return (
+    <ResponsiveLine
+      data={data}
+      curve="linear"
+      axisTop={null}
+      axisRight={null}
+      axisBottom={null}
+      axisLeft={null}
+      enableGridX={false}
+      enableGridY={false}
+      lineWidth={1}
+      enablePoints={false}
+      pointSize={3}
+      pointColor="black"
+      pointBorderWidth={2}
+      pointLabelYOffset={-12}
+      enableArea={true}
+      areaOpacity={0.1}
+      enableCrosshair={false}
+      crosshairType="top-left"
+      useMesh={true}
+      animate={false}
+      {...defaults}
+      {...props}
+    />
+  );
+};

package/src/components/HeartRate/index.ts

@@ -0,0 +1,2 @@
+export { HeartRate } from './HeartRate';
+export * from './types';

package/src/components/HeartRate/mockHeartRateRequest.ts

@@ -0,0 +1,15 @@
+const ONE_HOUR_MS = 3600000;
+const BPMs = [
+  85, 120, 90, 95, 63, 75, 70, 140, 80, 60, 65, 100, 94, 88, 90, 58, 65, 71, 78,
+  65, 67, 57, 61,
+];
+
+const DATE_NOW_MOCKED = 1692626621701;
+
+export const heartRateData = {
+  id: 'heart-rate',
+  data: BPMs.map((bpm, index) => ({
+    x: DATE_NOW_MOCKED - ONE_HOUR_MS * (BPMs.length - index - 1),
+    y: bpm,
+  })),
+};

package/src/components/HeartRate/types.ts

@@ -0,0 +1,15 @@
+import { Serie } from '@nivo/line';
+
+export interface IHeartRateProps {
+  data: Serie;
+  caption?: string;
+  color?: string;
+}
+
+export interface IBMPProps {
+  value: number;
+}
+
+export interface IHeartRateCaptionProps {
+  caption: string;
+}

package/src/components/HeartRate/utils.tsx

@@ -0,0 +1,8 @@
+export const getTime = (date: Date, options?: Intl.DateTimeFormatOptions) =>
+  date.toLocaleTimeString(
+    'en-US',
+    options || {
+      hour: '2-digit',
+      minute: '2-digit',
+    },
+  );

package/src/components/LinksTabBar/LinksTabBar.e2e.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+test('Widgets: LinksTabBar', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-linkstabbar--default&viewMode=story',
+  );
+
+  await expect(page.getByText('Current route: Information')).toBeVisible();
+  await page.getByRole('link', { name: 'Information' }).focus();
+
+  await page.screenshot({
+    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-linkstabbar--current-focus__[w1920px].png`,
+  });
+
+  await page.getByRole('link', { name: 'Configuration' }).focus();
+  await page.screenshot({
+    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-linkstabbar--non-current-focus__[w1920px].png`,
+  });
+});