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

package/src/components/MealNutrients/types.ts

@@ -1,37 +0,0 @@
-import { Point, LineSvgProps, CustomLayerProps } from '@nivo/line';
-import { ScaleTimeSpec } from '@nivo/scales';
-import { MainColors, DropdownOptionProps } from '@ssa-ui-kit/core';
-
-export interface OptionType extends DropdownOptionProps {
-  value: 'd' | 'w' | 'm';
-  label: string;
-  precision: string;
-}
-
-export interface MealNutrientsProps {
-  caption?: string;
-  options: OptionType[];
-  data: LineSvgProps['data'];
-  onOptionChange?: (option: OptionType) => void;
-}
-
-export interface MealNutrientsTooltipProps {
-  colorName: keyof MainColors;
-  point: Exclude<Point, 'data'> & {
-    data: Point['data'] & { comp?: number; unit?: string };
-  };
-}
-
-export type UseChartConfig = (
-  ref: React.RefObject<HTMLElement>,
-  data: LineSvgProps['data'],
-  precision: ScaleTimeSpec['precision'] | 'week',
-) => Pick<LineSvgProps, 'xScale' | 'axisBottom'>;
-
-// ScaleSpec is not exported from @nivo/line
-export type ScaleSpec = LineSvgProps['xScale'];
-
-// `CustomLayerProps` doesn't have `currentPoint` defined  on it even
-// though this property is passed to a custom layer:
-// https://github.com/plouc/nivo/blob/408d46f7de205d391ab19cf34321e7b40d5cebad/packages/line/src/Line.js#L318
-export type CustomPointLayerProps = CustomLayerProps & { currentPoint?: Point };

package/src/components/MealNutrients/useChartConfig.ts

@@ -1,69 +0,0 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
-import { dateFormatters, throttle } from '@ssa-ui-kit/utils';
-import { UseChartConfig } from './types';
-
-const { formatTime, formatDayOfWeek, formatDate } = dateFormatters;
-
-const MAX_ITEMS_ON_SMALL_SCREENS = 7;
-const MIN_WIDTH = 600;
-const THROTTLE_DELAY_MS = 50;
-
-const useChartConfig: UseChartConfig = (elRef, data, precision = 'day') => {
-  const [width, setWidth] = useState(0);
-  const throttledRef = useRef(
-    throttle((entries) => {
-      setWidth(entries[0].contentRect.width);
-    }, THROTTLE_DELAY_MS),
-  );
-
-  const observerRef = useRef(new ResizeObserver(throttledRef?.current?.[0]));
-
-  useEffect(() => {
-    const currentRef = elRef.current;
-
-    if (observerRef.current && currentRef) {
-      observerRef.current.observe(currentRef);
-    }
-
-    return () => {
-      if (observerRef.current && currentRef) {
-        observerRef.current.unobserve(currentRef);
-      }
-    };
-  }, [elRef, observerRef]);
-
-  useEffect(() => {
-    return () => {
-      if (throttledRef.current) {
-        const [, cancel] = throttledRef.current;
-        cancel();
-      }
-    };
-  }, [throttledRef]);
-
-  return useMemo(
-    () => ({
-      xScale: {
-        type: 'time',
-        format: '%L',
-        precision: precision === 'week' ? 'day' : precision,
-      },
-      axisBottom: {
-        tickSize: 0,
-        tickPadding: 30,
-        legend: '',
-        tickValues: width < MIN_WIDTH ? MAX_ITEMS_ON_SMALL_SCREENS : undefined,
-        tickRotation: width < MIN_WIDTH ? 30 : 0,
-        format:
-          precision === 'hour'
-            ? formatTime
-            : precision === 'week'
-            ? formatDayOfWeek
-            : formatDate,
-      },
-    }),
-    [data, width, precision],
-  );
-};
-
-export default useChartConfig;

package/src/components/MealPlanner/MealPlanner.specBackup.tsx

@@ -1,77 +0,0 @@
-import userEvent from '@testing-library/user-event';
-
-import { screen, within } from '../../../customTest';
-
-import { MealPlannerItem } from './types';
-import MealPlanner from './index';
-
-const data: { [key: string]: MealPlannerItem } = {
-  breakfast: {
-    time: '8:00 AM',
-    data: [
-      {
-        id: 1,
-        name: 'Avocado salad',
-        image: 'https://via.placeholder.com/64x64',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-    ],
-  },
-  lunch: {
-    time: '1:00 pm',
-    data: [
-      {
-        id: 4,
-        name: 'Beef steak',
-        image: 'https://via.placeholder.com/64x64',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-    ],
-  },
-};
-
-describe('MealPlanner', () => {
-  it('Render recipes and update then when change the dropdown', async () => {
-    const user = userEvent.setup();
-
-    render(<MealPlanner data={data} />);
-
-    const recipeBreakfast = screen.getByText(/Avocado salad/i);
-    const progressBars = screen.getAllByRole('progressbar');
-
-    expect(recipeBreakfast).toBeInTheDocument();
-    expect(progressBars).toHaveLength(3);
-
-    const dropdownEl = screen.getByTestId('dropdown');
-    const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
-
-    await user.click(dropdownToggleEl);
-
-    const listItemEls = within(screen.getByRole('listbox')).getAllByRole(
-      'button',
-    );
-
-    await user.click(listItemEls[1]);
-
-    const recipeLunch = screen.getByText(/Beef steak/i);
-
-    expect(recipeLunch).toBeInTheDocument();
-    expect(recipeBreakfast).not.toBeInTheDocument();
-  });
-
-  it("don't render if not data or wrong typeof data", async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    render(<MealPlanner data={'data'} />);
-
-    const recipeBreakfast = await screen.queryByText(/Avocado salad/i);
-
-    expect(recipeBreakfast).not.toBeInTheDocument();
-  });
-});

package/src/components/MealPlanner/MealPlanner.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { mealPlannerData as data } from './mockMealPlannerRequest';
-
-import MealPlanner from './index';
-
-export default {
-  title: 'Fitness/MealPlanner',
-  component: MealPlanner,
-  args: {
-    data,
-  },
-} as Meta<typeof MealPlanner>;
-
-export const Default = {};

package/src/components/MealPlanner/MealPlanner.tsx

@@ -1,100 +0,0 @@
-import { useState, useEffect } from 'react';
-import { css } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Typography,
-  Dropdown,
-  DropdownOption,
-  DropdownOptionProps,
-} from '@ssa-ui-kit/core';
-
-import { MealPlannerCard } from './MealPlannerCard';
-
-import { MealPlannerProps, MealPlannerData } from './types';
-import styled from '@emotion/styled';
-
-const CustomOption = styled(DropdownOption)`
-  text-align: left;
-  line-height: 18px;
-  font-size: 11px;
-`;
-
-export const MealPlanner = ({ data }: MealPlannerProps) => {
-  const [selectedOption, setSelectedOption] = useState<string | null>(null);
-  const [options, setOptions] = useState<DropdownOptionProps[]>([]);
-
-  const handleChange = (e: DropdownOptionProps) => {
-    const value = e.value.toString().toLowerCase();
-
-    setSelectedOption(value);
-  };
-
-  useEffect(() => {
-    if (data == null || typeof data !== 'object') {
-      return;
-    }
-
-    setOptions(
-      Object.keys(data).map((item, index) => ({
-        id: index,
-        value: `${item.charAt(0).toUpperCase()}${item.slice(1)}`,
-        label: `${item.charAt(0).toUpperCase()}${item.slice(1)} | ${
-          data[item].time
-        }`,
-        extraVal: data[item].time,
-      })),
-    );
-  }, [data]);
-
-  useEffect(() => {
-    if (options?.length > 0 && selectedOption == null) {
-      handleChange(options[0]);
-    }
-  }, [options]);
-
-  return (
-    <div>
-      <CardHeader transparent>
-        <Typography variant="h4" weight="bold" css={{ lineHeight: 'normal' }}>
-          Meal Planner
-        </Typography>
-
-        {options?.length > 0 && (
-          <Dropdown selectedItem={options[0]} onChange={handleChange}>
-            {options.map((item, index) => (
-              <CustomOption
-                key={index}
-                value={item.value}
-                label={item.label.toString()}>
-                <span style={{ fontSize: 13, fontWeight: 500 }}>
-                  {item.value}
-                </span>
-                &nbsp;|&nbsp;
-                <span style={{ fontSize: 11, fontWeight: 500 }}>
-                  {item.extraVal}
-                </span>
-              </CustomOption>
-            ))}
-          </Dropdown>
-        )}
-      </CardHeader>
-      <Card>
-        <CardContent
-          css={css`
-            flex-direction: column;
-            width: 100%;
-          `}>
-          {selectedOption &&
-            data[selectedOption].data.map(
-              ({ id, ...props }: MealPlannerData) => (
-                <MealPlannerCard key={id} {...props} />
-              ),
-            )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};

package/src/components/MealPlanner/MealPlannerBadge.tsx

@@ -1,15 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Badge } from '@ssa-ui-kit/core';
-
-const Marker = styled(Badge)`
-  display: inline-block;
-
-  padding: 0;
-  margin-right: 5px;
-
-  width: 4px;
-  height: 4px;
-`;
-
-export default Marker;

package/src/components/MealPlanner/MealPlannerBars.tsx

@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-
-const MealPlannerBars = styled.ul`
-  display: flex;
-
-  list-style: none;
-
-  width: 100%;
-  height: 20px;
-
-  padding: 0;
-  margin: 0;
-
-  & > li:nth-of-type(2n):not(:last-child) {
-    margin: 0 5px;
-  }
-`;
-
-export default MealPlannerBars;

package/src/components/MealPlanner/MealPlannerCard.tsx

@@ -1,73 +0,0 @@
-import { css } from '@emotion/react';
-
-import { ProgressBar, Typography, Avatar, Wrapper } from '@ssa-ui-kit/core';
-
-import Marker from './MealPlannerBadge';
-import MealPlannerLegends from './MealPlannerLegends';
-import MealPlannerBars from './MealPlannerBars';
-
-import { MealPlannerCardProps } from './types';
-
-const markerColor = {
-  carbs: 'yellow',
-  protein: 'green',
-  fat: 'blue',
-};
-
-type MarkerColorKeys = keyof typeof markerColor;
-
-export const MealPlannerCard = ({
-  name,
-  image,
-  carbs,
-  protein,
-  fat,
-}: MealPlannerCardProps) => {
-  const listItems = { carbs, protein, fat };
-
-  return (
-    <Wrapper
-      css={{
-        marginTop: '5.6px',
-      }}>
-      <Avatar size={64} image={image} />
-
-      <div
-        css={css`
-          width: calc(100% - 64px);
-          padding-left: 15px;
-        `}>
-        <Typography variant="h6" weight="medium">
-          {name}
-        </Typography>
-
-        <MealPlannerLegends.List>
-          {Object.keys(listItems).map((item) => (
-            <MealPlannerLegends.Item key={item}>
-              <Marker color={markerColor[item as MarkerColorKeys]} />
-
-              <Typography variant="body1">
-                {listItems[item as MarkerColorKeys]}% {item}
-              </Typography>
-            </MealPlannerLegends.Item>
-          ))}
-        </MealPlannerLegends.List>
-
-        <MealPlannerBars>
-          {Object.keys(listItems).map((item) => (
-            <li
-              css={css`
-                width: ${listItems[item as MarkerColorKeys]}%;
-              `}
-              key={item}>
-              <ProgressBar
-                percentage={100}
-                color={markerColor[item as MarkerColorKeys]}
-              />
-            </li>
-          ))}
-        </MealPlannerBars>
-      </div>
-    </Wrapper>
-  );
-};

package/src/components/MealPlanner/MealPlannerLegends.tsx

@@ -1,22 +0,0 @@
-import styled from '@emotion/styled';
-
-const MealPlannerLegends = {
-  List: styled.ul`
-    display: flex;
-    justify-content: space-between;
-    list-style: none;
-
-    width: 100%;
-    height: 20px;
-
-    padding: 0;
-    margin: 0;
-    margin-bottom: 8px;
-  `,
-  Item: styled.li`
-    display: flex;
-    align-items: center;
-  `,
-};
-
-export default MealPlannerLegends;

package/src/components/MealPlanner/index.ts

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

package/src/components/MealPlanner/mockMealPlannerRequest.ts

@@ -1,70 +0,0 @@
-import { MealPlannerItem } from './types';
-type MealPlannerResp = { [key: string]: MealPlannerItem };
-
-export const mealPlannerData: MealPlannerResp = {
-  breakfast: {
-    time: '8:00 AM',
-    data: [
-      {
-        id: 1,
-        name: 'Avocado salad',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Favocado%2Favocado_64.png?alt=media&token=daa461dd-085c-4542-a5d4-c83a0a8efb4c',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-      {
-        id: 2,
-        name: 'Almond milk',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmilk%2Fmilk_64.png?alt=media&token=88ab4b5d-1c1f-43e5-849f-1dbf71c5dc8b',
-        calories: 300,
-        carbs: 40,
-        protein: 20,
-        fat: 40,
-      },
-      {
-        id: 3,
-        name: 'Blueberry',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fblueberry%2Fblueberry_64.png?alt=media&token=ab7c1d58-9743-478e-bcf8-aa7726ccbe78',
-        calories: 300,
-        carbs: 40,
-        protein: 30,
-        fat: 30,
-      },
-    ],
-  },
-  lunch: {
-    time: '1:00 PM',
-    data: [
-      {
-        id: 4,
-        name: 'Beef steak',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteak%2Fsteak_64.png?alt=media&token=44f02ad7-9a56-4839-aa00-e50ff44a14aa',
-        calories: 300,
-        carbs: 10,
-        protein: 50,
-        fat: 40,
-      },
-    ],
-  },
-  dinner: {
-    time: '7:00 PM',
-    data: [
-      {
-        id: 5,
-        name: 'Soup',
-        image:
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsoup%2Fsoup_64.png?alt=media&token=fb2a8b51-a735-4669-8cdc-c2d52b23b114',
-        calories: 300,
-        carbs: 30,
-        protein: 30,
-        fat: 40,
-      },
-    ],
-  },
-};

package/src/components/MealPlanner/types.ts

@@ -1,21 +0,0 @@
-export interface MealPlannerCardProps {
-  name: string;
-  image: string;
-  calories: number;
-  carbs: number;
-  protein: number;
-  fat: number;
-}
-
-export type MealPlannerData = MealPlannerCardProps & { id: number };
-
-export interface MealPlannerItem {
-  time: string;
-  data: Array<MealPlannerData>;
-}
-
-export interface MealPlannerProps {
-  data: {
-    [mealName: string]: MealPlannerItem;
-  };
-}

package/src/components/StepsCounter/StepsCounter.specBackup.tsx

@@ -1,14 +0,0 @@
-import { screen } from '../../../customTest';
-import StepsCounter from './index';
-
-describe('StepsCounter', () => {
-  it('Render component with correct %', () => {
-    render(<StepsCounter max={3000} currentValue={2500} />);
-
-    const progressBar = screen.getByRole('progressbar');
-    const label = screen.getByText(/83% of your goals/i);
-
-    expect(label).toBeInTheDocument();
-    expect(progressBar).toHaveStyle('width: 83%;');
-  });
-});

package/src/components/StepsCounter/StepsCounter.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { StepsCounter } from './StepsCounter';
-
-export default {
-  title: 'Fitness/StepsCounter',
-  component: StepsCounter,
-} as Meta<typeof StepsCounter>;
-
-export const Default = {
-  args: {
-    max: 3000,
-    currentValue: 2500,
-    unit: 'L',
-  },
-};

package/src/components/StepsCounter/StepsCounter.tsx

@@ -1,74 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  ProgressBar,
-  Typography,
-  ResponsiveImage,
-} from '@ssa-ui-kit/core';
-
-import { StepsCounterProps } from './types';
-
-/**
- *
- * UI Component with a Card that shows the steps count of the user
- */
-export const StepsCounter = ({ max, currentValue }: StepsCounterProps) => {
-  const theme = useTheme();
-  const percentage = Math.round((currentValue / max) * 100);
-
-  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(0 5px 5px ${theme.colors.grey})` }}
-            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_64.png?alt=media&token=22d59e48-da19-448a-98e3-25f396108243 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7 48w"
-            sizes="(min-width: 1440px) 64px, 48px"
-            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7"
-            alt="Steps"
-          />
-        }>
-        <Typography variant="h6" weight="bold">
-          Steps
-        </Typography>
-      </CardHeader>
-
-      <CardContent
-        style={{
-          flexWrap: 'wrap',
-        }}>
-        <div>
-          <span
-            css={css`
-              font-size: 33px;
-              font-weight: bold;
-            `}>
-            {currentValue}
-          </span>
-          <span>Steps</span>
-        </div>
-        <div
-          css={css`
-            width: 100%;
-            margin: 10px 0;
-          `}>
-          <ProgressBar percentage={percentage} color="green" />
-        </div>
-        <Typography
-          variant="body1"
-          css={css`
-            color: ${theme.colors.greyDarker60};
-          `}>
-          {!Number.isNaN(percentage) && `${percentage}% of your goals`}
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-};

package/src/components/StepsCounter/index.ts

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

package/src/components/StepsCounter/types.ts

@@ -1,4 +0,0 @@
-export interface StepsCounterProps {
-  max: number;
-  currentValue: number;
-}

package/src/components/TradingInfoCard/TradingInfoCard.e2e.ts

@@ -1,18 +0,0 @@
-import { test } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-
-test('Industry Specific Widgets - Fitness - Trading Info Card Hover', async ({
-  page,
-}) => {
-  await page.setViewportSize(SCREEN_SIZES[1920]);
-  await page.goto(
-    'http://localhost:6007/iframe.html?args=&id=trading-tradinginfocard--with-tooltip&viewMode=story',
-  );
-  await page.getByTestId('tooltip-trigger').hover();
-
-  await page.screenshot({
-    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-trading-info-card--hover__[w1920px].png`,
-  });
-});