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

package/src/components/HeartRate/HeartRate.tsx

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

@@ -1,53 +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}
-    />
-  );
-};
+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

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

package/src/components/HeartRate/mockHeartRateRequest.ts

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

@@ -1,15 +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;
-}
+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

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

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

package/src/components/LinksTabBar/LinksTabBar.spec.tsx

@@ -1,48 +1,48 @@
-import { css } from '@emotion/react';
-import userEvent from '@testing-library/user-event';
-import { links } from './stories/mockData';
-import { MemoryRouterDecorator } from './stories/decorators';
-
-import { LinksTabBar } from './index';
-
-function setup(Component: React.ElementType) {
-  return {
-    user: userEvent.setup(),
-    ...render(MemoryRouterDecorator(Component)),
-  };
-}
-
-describe('Widget: LinksTabBar', () => {
-  it('Renders all passed in links and reacts to clicks', async () => {
-    const { user, getByRole, getByText } = setup(() => (
-      <LinksTabBar links={links} />
-    ));
-
-    getByText(`Current route: ${links[0].children}`);
-
-    for (const link of links) {
-      const linkEl = getByRole('link', { name: link.children });
-      await user.click(linkEl);
-      getByText(`Current route: ${link.children}`);
-    }
-  });
-
-  it('Renders with custom styles', () => {
-    const { getAllByRole } = setup(() => (
-      <LinksTabBar
-        links={links}
-        css={css`
-          background-color: magenta;
-        `}
-      />
-    ));
-    const linkEl = getAllByRole('link')[0];
-
-    expect(linkEl.parentNode).toHaveStyle(`background-color: magenta`);
-  });
-
-  it('Renders with a custom base tag', () => {
-    const { getByRole } = setup(() => <LinksTabBar links={links} as="nav" />);
-    getByRole('navigation');
-  });
-});
+import { css } from '@emotion/react';
+import userEvent from '@testing-library/user-event';
+import { links } from './stories/mockData';
+import { MemoryRouterDecorator } from './stories/decorators';
+
+import { LinksTabBar } from './index';
+
+function setup(Component: React.ElementType) {
+  return {
+    user: userEvent.setup(),
+    ...render(MemoryRouterDecorator(Component)),
+  };
+}
+
+describe('Widget: LinksTabBar', () => {
+  it('Renders all passed in links and reacts to clicks', async () => {
+    const { user, getByRole, getByText } = setup(() => (
+      <LinksTabBar links={links} />
+    ));
+
+    getByText(`Current route: ${links[0].children}`);
+
+    for (const link of links) {
+      const linkEl = getByRole('link', { name: link.children });
+      await user.click(linkEl);
+      getByText(`Current route: ${link.children}`);
+    }
+  });
+
+  it('Renders with custom styles', () => {
+    const { getAllByRole } = setup(() => (
+      <LinksTabBar
+        links={links}
+        css={css`
+          background-color: magenta;
+        `}
+      />
+    ));
+    const linkEl = getAllByRole('link')[0];
+
+    expect(linkEl.parentNode).toHaveStyle(`background-color: magenta`);
+  });
+
+  it('Renders with a custom base tag', () => {
+    const { getByRole } = setup(() => <LinksTabBar links={links} as="nav" />);
+    getByRole('navigation');
+  });
+});

package/src/components/LinksTabBar/LinksTabBar.stories.tsx

@@ -1,45 +1,45 @@
-import { css } from '@emotion/react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { LinksTabBar, LinksTabBarProps } from './index';
-import { links } from './stories/mockData';
-import { MemoryRouterDecorator } from './stories/decorators';
-
-export default {
-  title: 'Widgets/LinksTabBar',
-  component: LinksTabBar,
-  decorators: [MemoryRouterDecorator],
-  args: {
-    links,
-  },
-} as Meta<typeof LinksTabBar>;
-
-export const Default = {};
-
-export const WithCustomStyles: StoryObj<typeof LinksTabBar> = (
-  args: LinksTabBarProps,
-) => {
-  /**
-   * Colors are from here: https://paletadecolores.online/en/colors/846ef3/
-   * */
-  return (
-    <LinksTabBar
-      {...args}
-      css={css`
-        a {
-          color: #846ef3;
-          background-color: #dfbcfc;
-          padding: 4px 8px;
-          border-radius: 6px;
-        }
-
-        a.active {
-          color: #7560e3;
-          text-decoration: underline solid #ddf36e;
-          text-underline-offset: 2px;
-        }
-      `}
-    />
-  );
-};
-WithCustomStyles.args = {};
+import { css } from '@emotion/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LinksTabBar, LinksTabBarProps } from './index';
+import { links } from './stories/mockData';
+import { MemoryRouterDecorator } from './stories/decorators';
+
+export default {
+  title: 'Widgets/LinksTabBar',
+  component: LinksTabBar,
+  decorators: [MemoryRouterDecorator],
+  args: {
+    links,
+  },
+} as Meta<typeof LinksTabBar>;
+
+export const Default = {};
+
+export const WithCustomStyles: StoryObj<typeof LinksTabBar> = (
+  args: LinksTabBarProps,
+) => {
+  /**
+   * Colors are from here: https://paletadecolores.online/en/colors/846ef3/
+   * */
+  return (
+    <LinksTabBar
+      {...args}
+      css={css`
+        a {
+          color: #846ef3;
+          background-color: #dfbcfc;
+          padding: 4px 8px;
+          border-radius: 6px;
+        }
+
+        a.active {
+          color: #7560e3;
+          text-decoration: underline solid #ddf36e;
+          text-underline-offset: 2px;
+        }
+      `}
+    />
+  );
+};
+WithCustomStyles.args = {};

package/src/components/LinksTabBar/LinksTabBar.tsx

@@ -1,14 +1,14 @@
-import { NavLink } from 'react-router-dom';
-
-import { LinksTabBarProps } from './types';
-import { LinksTabBarBase } from './LinksTabBarBase';
-
-export const LinksTabBar = ({ as, className, links }: LinksTabBarProps) => {
-  return (
-    <LinksTabBarBase as={as} className={className}>
-      {links.map(({ id, ...props }) => (
-        <NavLink key={id} {...props} />
-      ))}
-    </LinksTabBarBase>
-  );
-};
+import { NavLink } from 'react-router-dom';
+
+import { LinksTabBarProps } from './types';
+import { LinksTabBarBase } from './LinksTabBarBase';
+
+export const LinksTabBar = ({ as, className, links }: LinksTabBarProps) => {
+  return (
+    <LinksTabBarBase as={as} className={className}>
+      {links.map(({ id, ...props }) => (
+        <NavLink key={id} {...props} />
+      ))}
+    </LinksTabBarBase>
+  );
+};