@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/MealNutrients/types.ts

@@ -0,0 +1,37 @@
+import { Point, LineSvgProps, CustomLayerProps } from '@nivo/line';
+import { ScaleTimeSpec } from '@nivo/scales';
+import { MainColors, IDropdownOption } from '@ssa-ui-kit/core';
+
+export interface OptionType extends IDropdownOption {
+  value: 'd' | 'w' | 'm';
+  label: string;
+  precision: string;
+}
+
+export interface IMealNutrientsProps {
+  caption?: string;
+  options: OptionType[];
+  data: LineSvgProps['data'];
+  onOptionChange?: (option: OptionType) => void;
+}
+
+export interface IMealNutrientsTooltipProps {
+  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

@@ -0,0 +1,69 @@
+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.spec.tsx

@@ -0,0 +1,77 @@
+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

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

package/src/components/MealPlanner/MealPlanner.tsx

@@ -0,0 +1,100 @@
+import { useState, useEffect } from 'react';
+import { css } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Dropdown,
+  DropdownOption,
+  IDropdownOption,
+} 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<IDropdownOption[]>([]);
+
+  const handleChange = (e: IDropdownOption) => {
+    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

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,22 @@
+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

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

package/src/components/MealPlanner/mockMealPlannerRequest.ts

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,21 @@
+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/NavBar/NavBar.e2e.ts

@@ -0,0 +1,64 @@
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+test.describe.configure({ mode: 'serial' });
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-navbar-opened__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?id=widgets-navbar--default&viewMode=story',
+  );
+};
+
+const clickAndWaitForAnimationEnd = async (page: Page) => {
+  await page.locator('#storybook-root div').nth(1).click();
+  await page
+    .locator('div[class*="NavBarWrapper"]')
+    .evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished),
+      ),
+    );
+};
+
+test('[1920] Widgets: NavBar should be visible', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await gotoPage(page);
+  await page.locator('nav ul');
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});
+
+test('[1440] Widgets: NavBar should be visible', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1440]);
+  await gotoPage(page);
+  await page.locator('nav ul');
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1440px].png`,
+  });
+});
+
+test('[900] Widgets: NavBar should be visible after icon clicking', async ({
+  page,
+}) => {
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await gotoPage(page);
+  await clickAndWaitForAnimationEnd(page);
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('[390] Widgets: NavBar should be visible after icon clicking', async ({
+  page,
+}) => {
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  await gotoPage(page);
+  await clickAndWaitForAnimationEnd(page);
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});

package/src/components/NavBar/NavBar.stories.tsx

@@ -0,0 +1,86 @@
+import { Fragment } from 'react';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { Meta } from '@storybook/react';
+import { Title, Description, Source } from '@storybook/addon-docs';
+
+import { NavBar } from './NavBar';
+import { DecoratorFunction } from '@storybook/types';
+
+type Args = Parameters<typeof NavBar>[0];
+
+const reactRouterDecorator: DecoratorFunction<
+  {
+    component: typeof NavBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/*" element={<Story />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+const Items = [
+  { path: 'stats', iconName: 'stats' },
+  { path: 'calendar', iconName: 'calendar' },
+  { path: 'trainings', iconName: 'trainings' },
+  { path: 'measurements', iconName: 'measurements' },
+  { path: 'diet', iconName: 'diet' },
+  { path: 'notification', iconName: 'notification' },
+  { path: 'settings', iconName: 'settings' },
+];
+
+export default {
+  title: 'Widgets/NavBar',
+  component: NavBar,
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile2',
+    },
+    docs: {
+      page: () => (
+        <Fragment>
+          <Title />
+          <Description />
+          <Source code={`<NavBar />`} />
+        </Fragment>
+      ),
+    },
+  },
+  decorators: [
+    reactRouterDecorator,
+    (Story) => (
+      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
+    ),
+  ],
+  args: {
+    items: Items,
+  },
+} as Meta<typeof NavBar>;
+
+export const Default = {};
+
+const VIEWPORTS = {
+  laptop: {
+    name: 'Laptop',
+    styles: {
+      width: '1440px',
+      height: '1080px',
+    },
+  },
+};
+
+export const WideScreen = {
+  component: NavBar,
+  parameters: {
+    viewport: {
+      viewports: VIEWPORTS,
+      defaultViewport: 'laptop',
+    },
+  },
+};