@ssa-ui-kit/widgets 1.0.12 → 1.1.55-canary-79b6b0d-20250224

package/src/components/HeartRate/HeartRate.tsx

@@ -1,105 +0,0 @@
-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 { HeartRateProps } 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,
-}: HeartRateProps) => {
-  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 +0,0 @@
-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 +0,0 @@
-export { HeartRate } from './HeartRate';
-export * from './types';

package/src/components/HeartRate/mockHeartRateRequest.ts

@@ -1,15 +0,0 @@
-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 +0,0 @@
-import { Serie } from '@nivo/line';
-
-export interface HeartRateProps {
-  data: Serie;
-  caption?: string;
-  color?: string;
-}
-
-export interface BMPProps {
-  value: number;
-}
-
-export interface HeartRateCaptionProps {
-  caption: string;
-}

package/src/components/HeartRate/utils.tsx

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

package/src/components/ListGoals/ListGoals.specBackup.tsx

@@ -1,82 +0,0 @@
-import type { MainColors } from '@ssa-ui-kit/core';
-import { screen } from '../../../customTest';
-
-import ListGoals from './index';
-
-describe('ListGoals', () => {
-  it('Render component', async () => {
-    render(
-      <ListGoals
-        goals={[
-          {
-            id: 'lifting_weights',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
-            title: 'Lifting weights',
-            details: 'Goal 25 kg | 20 kg',
-            completion: 79,
-            color: 'yellow' as keyof MainColors,
-          },
-          {
-            id: 'running',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
-            title: 'Running',
-            details: 'Goal 25 km | 19,7 km',
-            completion: 79,
-            color: 'pink' as keyof MainColors,
-          },
-        ]}
-      />,
-    );
-
-    const list = await screen.findAllByRole('listitem');
-    const itemA = await screen.findByText('Lifting weights');
-    const itemB = await screen.findByText('Running');
-
-    expect(list.length).toBe(2);
-    expect(itemA).toBeInTheDocument();
-    expect(itemB).toBeInTheDocument();
-  });
-
-  it('Render using default props values', async () => {
-    const mockData = [
-      {
-        id: 'lifting_weights',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
-        title: 'Lifting weights',
-        details: 'Goal 25 kg | 20 kg',
-      },
-      {
-        id: 'running',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
-        title: 'Running',
-        details: 'Goal 25 km | 19,7 km',
-      },
-    ];
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    render(<ListGoals goals={mockData} />);
-
-    const list = await screen.findAllByRole('listitem');
-    const itemA = await screen.findByText('Lifting weights');
-    const itemB = await screen.findByText('Running');
-
-    expect(list.length).toBe(2);
-    expect(itemA).toBeInTheDocument();
-    expect(itemB).toBeInTheDocument();
-  });
-
-  it('should not render a list if no data', async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    render(<ListGoals goals={null} />);
-
-    const list = await screen.queryAllByRole('listitem');
-
-    expect(list.length).toBe(0);
-  });
-});

package/src/components/ListGoals/ListGoals.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MainColors } from '@ssa-ui-kit/core';
-
-import { ListGoals } from './ListGoals';
-
-export default {
-  title: 'Fitness/ListGoals',
-  component: ListGoals,
-} as Meta<typeof ListGoals>;
-
-export const Default: StoryObj<typeof ListGoals> = () => {
-  const goals = [
-    {
-      id: 'lifting_weights',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fdumbbell%2Fdumbbell_42.png?alt=media&token=06312895-4372-47b0-a5fa-4a64726a6215',
-      title: 'Lifting weights',
-      details: 'Goal 25 kg | 20 kg',
-      completion: 79,
-      color: 'yellow' as keyof MainColors,
-    },
-    {
-      id: 'running',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Ftreadmill%2Ftreadmill_42.png?alt=media&token=151f51bb-a6ba-4f4a-9d51-57a6784c767b',
-      title: 'Running',
-      details: 'Goal 25 km | 19,7 km',
-      completion: 79,
-      color: 'pink' as keyof MainColors,
-    },
-    {
-      id: 'sleeping',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmoon%2Fmoon_42.png?alt=media&token=b279625d-091d-4dc2-9f0f-e670e1072174',
-      title: 'Sleeping',
-      details: 'Goal 8 hrs | 6 hrs',
-      completion: 60,
-      color: 'blue' as keyof MainColors,
-    },
-    {
-      id: 'weight_loss',
-      image:
-        'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fscales%2Fscales_42.png?alt=media&token=4f4c198b-7120-4e2f-a4b4-5602243eb732',
-      title: 'Weight Loss',
-      details: 'Goal 10 kg | 4 kg',
-      completion: 40,
-      color: 'purple' as keyof MainColors,
-    },
-  ];
-
-  return (
-    <div style={{ background: '#f1f1f1', padding: 20 }}>
-      <ListGoals goals={goals} />
-    </div>
-  );
-};
-
-Default.storyName = 'ListGoals';

package/src/components/ListGoals/ListGoals.tsx

@@ -1,29 +0,0 @@
-import { CardList } from '@ssa-ui-kit/core';
-
-import { ListGoalsCard } from './ListGoalsCard';
-
-import { ListGoalsProps } from './types';
-
-/**
- *
- * UI Component that uses CardList to render a list of goals
- */
-export const ListGoals = ({ goals }: ListGoalsProps) => {
-  return (
-    <CardList
-      title="Goals"
-      items={goals}
-      renderItem={(goal) => (
-        <ListGoalsCard
-          image={goal.image}
-          title={goal.title}
-          details={goal.details}
-          progressProps={{
-            currentValue: goal.completion,
-            color: goal.color,
-          }}
-        />
-      )}
-    />
-  );
-};

package/src/components/ListGoals/ListGoalsCard.tsx

@@ -1,61 +0,0 @@
-import { css } from '@emotion/react';
-
-import {
-  Avatar,
-  Card,
-  CardContent,
-  ProgressCircle,
-  Typography,
-  Wrapper,
-} from '@ssa-ui-kit/core';
-
-import { content } from './styles';
-import { ItemCardProps, ProgressProps } from './types';
-
-export const ListGoalsCard = ({
-  image,
-  title,
-  details,
-  progressProps,
-}: ItemCardProps) => {
-  const {
-    size = 50,
-    max = 100,
-    currentValue = 0,
-    infoContent,
-    color = 'blue',
-  } = progressProps;
-
-  return (
-    <Card noShadow>
-      <Wrapper direction="row" avatarSize={42}>
-        <Avatar size={42} image={image} css={{ borderRadius: 0 }} />
-
-        <CardContent
-          css={css`
-            width: calc(100% - 42px);
-            padding-left: 15px;
-          `}>
-          <div css={content}>
-            <Typography variant="h6">{title}</Typography>
-            <Typography variant="subtitle" as="p">
-              {details}
-            </Typography>
-          </div>
-
-          <ProgressCircle
-            size={size}
-            max={max}
-            currentValue={currentValue}
-            infoContent={
-              infoContent || (
-                <Typography variant="body1">{currentValue}%</Typography>
-              )
-            }
-            color={color as ProgressProps['color']}
-          />
-        </CardContent>
-      </Wrapper>
-    </Card>
-  );
-};

package/src/components/ListGoals/index.ts

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

package/src/components/ListGoals/styles.tsx

@@ -1,11 +0,0 @@
-import { Theme, css } from '@emotion/react';
-
-export const content = (theme: Theme) => css`
-  h6 {
-    line-height: 23px;
-  }
-  p {
-    color: ${theme.colors.greyDarker60};
-    line-height: 23px;
-  }
-`;

package/src/components/ListGoals/types.ts

@@ -1,25 +0,0 @@
-import { MainColors, ProgressCircle } from '@ssa-ui-kit/core';
-
-export type Goal = {
-  id: string;
-  image: string;
-  title: string;
-  details: string;
-  completion: number;
-  color: keyof MainColors;
-};
-
-export interface ListGoalsProps {
-  goals: Array<Goal>;
-}
-
-export type ProgressProps = Partial<
-  React.ComponentProps<typeof ProgressCircle>
->;
-
-export interface ItemCardProps {
-  image: string;
-  title: string;
-  details: string;
-  progressProps: ProgressProps;
-}

package/src/components/MealNutrients/MealNutrients.e2e.ts

@@ -1,68 +0,0 @@
-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-meal-nutrients--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: 433, y: 125 },
-    { x: 430, y: 125 },
-  ],
-};
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=fitness-mealnutrients--default&viewMode=story',
-  );
-};
-
-test.describe('Industry Specific Widgets - Fitness - MealNutrients', () => {
-  test('Should be rendered', async ({ page }) => {
-    await gotoPage(page);
-
-    await expect(
-      page.getByRole('heading', { name: 'Meal Nutrients' }),
-    ).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 page.screenshot({
-        path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
-      });
-      await page.getByRole('combobox').click();
-      await page.waitForSelector('[role="listbox"]');
-      await page.screenshot({
-        path: `${SCREENSHOT_PREFIX}dropdown__[w${resolution}px].png`,
-      });
-    });
-  }
-});

package/src/components/MealNutrients/MealNutrients.specBackup.tsx

@@ -1,134 +0,0 @@
-import { within } from '@testing-library/dom';
-import { waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ResizeObserver from 'resize-observer-polyfill';
-
-import mockApi from './mockMealNutrientsRequest';
-const { getData, getOptions } = mockApi;
-
-import { MealNutrients } 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 MealNutrientsLineChartMock = () => {
-  return <div data-testid="chart-mock"></div>;
-};
-
-global.ResizeObserver = ResizeObserver;
-
-jest.mock('./MealNutrientsLineChart', () => ({
-  MealNutrientsLineChart: MealNutrientsLineChartMock,
-}));
-
-jest.mock('./useChartConfig', () => {
-  const useChartConfigMock = () => ({
-    xScale: { type: 'time', format: '%L', precision: 'month' },
-    axisBottom: {
-      tickSize: 0,
-      tickPadding: 30,
-      legend: '',
-      tickValues: 7,
-      tickRotation: 30,
-      format: jest.fn(),
-    },
-  });
-  return {
-    __esModule: true,
-    default: useChartConfigMock,
-  };
-});
-
-function setup(component: React.ReactElement) {
-  return {
-    user: userEvent.setup(),
-    ...render(component),
-  };
-}
-
-describe('MealNutrients', () => {
-  it('Renders', async () => {
-    const options = await getOptions();
-    const data = await getData(options[0].value);
-
-    const { getByTestId, getByText } = setup(
-      <MealNutrients data={data} options={options} />,
-    );
-
-    getByText('Meal Nutrients');
-
-    await waitFor(() => {
-      getByTestId('chart-mock');
-      getByTestId('dropdown');
-    });
-  });
-
-  it('Changes an option and calls "onOptionChange"', async () => {
-    const options = await getOptions();
-    const data = await getData(options[0].value);
-    const mockOnChange = jest.fn(async ({ value }) => {
-      await getData(String(value));
-    });
-
-    const { user, getByTestId, getByRole } = setup(
-      <MealNutrients
-        data={data}
-        options={options}
-        onOptionChange={mockOnChange}
-      />,
-    );
-
-    await waitFor(async () => {
-      getByTestId('chart-mock');
-      const dropdownEl = getByTestId('dropdown');
-      const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
-
-      await user.click(dropdownToggleEl);
-
-      const listboxEl = getByRole('listbox');
-      const listItemElToChoose = within(listboxEl).getAllByRole('listitem')[1];
-
-      await user.click(listItemElToChoose);
-
-      const selectedItemText = listItemElToChoose.textContent;
-      expect(selectedItemText).not.toBeFalsy();
-      within(dropdownToggleEl).getByText(selectedItemText as string);
-
-      expect(mockOnChange).toBeCalledWith(options[1]);
-    });
-  });
-
-  it('Renders with a custom caption', async () => {
-    const caption = 'A custom caption';
-    const options = await getOptions();
-    const data = await getData(options[0].value);
-
-    const { getByTestId, getByText } = setup(
-      <MealNutrients caption={caption} data={data} options={options} />,
-    );
-
-    getByText(caption);
-
-    await waitFor(() => {
-      getByTestId('chart-mock');
-      getByTestId('dropdown');
-    });
-  });
-
-  it("Hides chart when there's no data", async () => {
-    const caption = 'A custom caption';
-    const { queryByTestId, getByText } = setup(
-      <MealNutrients caption={caption} data={[]} options={[]} />,
-    );
-
-    getByText(caption);
-
-    await waitFor(() => {
-      expect(queryByTestId('chart-mock')).not.toBeInTheDocument();
-    });
-  });
-});