@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/MealNutrients/MealNutrients.spec.tsx

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

package/src/components/MealNutrients/MealNutrients.stories.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import type { Meta } from '@storybook/react';
+
+import { MealNutrients } from './index';
+import { IMealNutrientsProps } from './types';
+
+import { mockStaticApi } from './mockMealNutrientsRequest';
+const { getData, getOptions } = mockStaticApi;
+
+export default {
+  title: 'Widgets/MealNutrients',
+  component: MealNutrients,
+} as Meta<typeof MealNutrients>;
+
+export const Default = () => {
+  const [options, setOptions] = useState<IMealNutrientsProps['options']>([]);
+  const [data, setData] = useState<IMealNutrientsProps['data']>([]);
+
+  useEffect(() => {
+    getOptions()
+      .then((respOptions) => {
+        setOptions(respOptions);
+        return getData(respOptions[0].value);
+      })
+      .then(setData);
+  }, []);
+
+  return (
+    <MealNutrients
+      data={data}
+      options={options}
+      onOptionChange={({ value }) => {
+        getData(String(value) as 'd' | 'w' | 'm').then(setData);
+      }}
+    />
+  );
+};

package/src/components/MealNutrients/MealNutrients.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect, useRef } from 'react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Dropdown,
+  DropdownOption,
+} from '@ssa-ui-kit/core';
+
+import { MealNutrientsLineChart } from './MealNutrientsLineChart';
+import useChartConfig from './useChartConfig';
+import { IMealNutrientsProps, UseChartConfig, OptionType } from './types';
+
+/**
+ *
+ * UI Component that shows the nutrients consumed by the user
+ */
+export const MealNutrients = ({
+  caption = 'Meal Nutrients',
+  options,
+  data,
+  onOptionChange,
+}: IMealNutrientsProps) => {
+  const [selectedOption, setSelectedOption] = useState<OptionType>();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const chartConfig = useChartConfig(
+    containerRef,
+    data,
+    selectedOption?.precision as Parameters<UseChartConfig>[2],
+  );
+
+  useEffect(() => {
+    if (options?.length > 0 && selectedOption == null) {
+      handleChange(options[0]);
+    }
+  }, [options]);
+
+  const handleChange = (e: OptionType) => {
+    const item = options.filter((item) => item.value === e.value)[0];
+
+    setSelectedOption(item);
+    onOptionChange && onOptionChange(item);
+  };
+
+  return (
+    <div ref={containerRef}>
+      <CardHeader transparent>
+        <Typography variant="h4" weight="bold" css={{ lineHeight: 'normal' }}>
+          {caption}
+        </Typography>
+
+        {options?.length > 0 && (
+          <Dropdown selectedItem={options[0]} onChange={handleChange}>
+            {options.map((item) => (
+              <DropdownOption
+                key={item.value}
+                value={item.value}
+                label={item.label}
+              />
+            ))}
+          </Dropdown>
+        )}
+      </CardHeader>
+      <Card>
+        <CardContent direction="column" css={{ width: '100%' }}>
+          <div
+            css={{
+              height: '227px',
+              svg: {
+                overflow: 'visible',
+              },
+            }}>
+            {data?.length > 0 && (
+              <MealNutrientsLineChart data={data} {...chartConfig} />
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/MealNutrients/MealNutrientsLineChart.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { ResponsiveLine, LineSvgProps, LineProps } from '@nivo/line';
+import { useTheme } from '@emotion/react';
+import type { ColorsKeys, MainColors } from '@ssa-ui-kit/core';
+
+import { defaults } from './chartDefaultConfig';
+import { MealNutrientsTooltip } from './MealNutrientsTooltip';
+
+const colorPalette = ['pink', 'purple', 'turquoise', 'yellow', 'green', 'blue'];
+
+export const MealNutrientsLineChart = ({ data, ...props }: LineSvgProps) => {
+  const theme = useTheme();
+
+  const defaultColorMapping = useMemo(
+    () =>
+      colorPalette.reduce<Record<string, keyof MainColors>>(
+        (res, colorName) => {
+          const colorValue = theme.colors[
+            `${colorName}Lighter` as ColorsKeys
+          ] as string;
+          res[colorValue] = colorName as keyof MainColors;
+          return res;
+        },
+        {},
+      ),
+    [theme.colors],
+  );
+
+  const defaultSettings = useMemo(
+    () =>
+      Object.assign<Omit<LineProps, 'data'>, Omit<LineProps, 'data'>>(
+        defaults,
+        {
+          colors: colorPalette.map(
+            (color) => theme.colors[`${color}Lighter` as ColorsKeys] as string,
+          ),
+          tooltip: ({ point }) => {
+            const color: keyof MainColors = defaultColorMapping[point.color];
+            return <MealNutrientsTooltip point={point} colorName={color} />;
+          },
+          theme: {
+            fontFamily: "'Manrope', sans-serif",
+            axis: {
+              ticks: {
+                text: {
+                  fontSize: '0.833rem',
+                  fontWeight: 500,
+                  fill: theme.colors.greyDarker,
+                },
+              },
+            },
+            grid: {
+              line: {
+                stroke: theme.colors.greyLighter,
+                strokeWidth: 1,
+                strokeDasharray: '8 8',
+              },
+            },
+          },
+        },
+      ),
+    [theme.colors, defaultColorMapping],
+  );
+
+  return (
+    <ResponsiveLine
+      data={data}
+      curve="catmullRom"
+      axisTop={null}
+      axisLeft={null}
+      enableGridX={false}
+      enableGridY={true}
+      lineWidth={1}
+      enablePoints={true}
+      pointSize={8}
+      pointBorderWidth={0}
+      pointLabelYOffset={-12}
+      enableArea={false}
+      areaOpacity={0.1}
+      enableCrosshair={false}
+      useMesh={true}
+      animate={false}
+      {...defaultSettings}
+      {...props}
+    />
+  );
+};

package/src/components/MealNutrients/MealNutrientsTooltip.tsx

@@ -0,0 +1,30 @@
+import { ProgressChartTooltip } from '@ssa-ui-kit/core';
+import type { IMapIcons } from '@ssa-ui-kit/core';
+
+import { IMealNutrientsTooltipProps } from './types';
+
+const capitalize = (str: string) =>
+  `${str[0].toUpperCase()}${str.substring(1)}`;
+
+export const MealNutrientsTooltip = ({
+  colorName,
+  point,
+}: IMealNutrientsTooltipProps) => {
+  const caption = capitalize(String(point.serieId));
+  const {
+    data: { y, comp, unit },
+  } = point;
+  const iconName =
+    ((comp && `arrow-${comp > 0 ? 'up' : 'down'}`) as keyof IMapIcons) ||
+    undefined;
+
+  return (
+    <ProgressChartTooltip
+      caption={caption}
+      value={y as number}
+      valueFormatted={`${comp}${unit}`}
+      iconName={iconName}
+      barProps={{ color: colorName }}
+    />
+  );
+};

package/src/components/MealNutrients/chartDefaultConfig.tsx

@@ -0,0 +1,87 @@
+import { LineProps } from '@nivo/line';
+import { DotsItem, useTheme as useNivoTheme } from '@nivo/core';
+
+import { dateFormatters } from '@ssa-ui-kit/utils';
+
+import { CustomPointLayerProps } from './types';
+
+const { formatDayOfWeek } = dateFormatters;
+
+const CustomPointLayer = ({
+  currentPoint,
+  pointSize,
+  pointBorderWidth,
+  ...props
+}: CustomPointLayerProps) => {
+  const theme = useNivoTheme();
+
+  if (!currentPoint) {
+    return;
+  }
+
+  const point = currentPoint;
+
+  return (
+    <g>
+      <DotsItem
+        key={point.id}
+        x={point.x}
+        y={point.y}
+        color={point.color}
+        borderColor={point.borderColor}
+        datum={point.data}
+        theme={theme}
+        size={pointSize || 0}
+        borderWidth={pointBorderWidth || 0}
+        {...props}
+      />
+    </g>
+  );
+};
+
+const tickValues = [0, 20, 40, 60, 80, 100];
+
+export const defaults: Omit<LineProps, 'data'> = {
+  margin: { top: 28, right: 50, bottom: 50, left: 5 },
+  xScale: { type: 'time', format: '%L', precision: 'day' },
+  yScale: {
+    type: 'linear',
+    min: 'auto',
+    max: 'auto',
+    stacked: false,
+    reverse: false,
+  },
+  axisRight: {
+    tickSize: 0,
+    tickPadding: 10,
+    tickRotation: 0,
+    tickValues,
+    format: (tick) => `${tick}%`,
+    legend: '',
+    legendOffset: 0,
+  },
+  axisBottom: {
+    tickSize: 0,
+    tickPadding: 30,
+    tickRotation: 0,
+    legend: '',
+    tickValues: 'every day',
+    format: formatDayOfWeek,
+  },
+  pointColor: { from: 'color', modifiers: [] },
+  pointBorderColor: { from: 'color', modifiers: [] },
+  legends: [],
+  gridYValues: tickValues,
+  layers: [
+    'grid',
+    'markers',
+    'axes',
+    'areas',
+    'crosshair',
+    'lines',
+    CustomPointLayer,
+    'slices',
+    'mesh',
+    'legends',
+  ],
+};

package/src/components/MealNutrients/index.tsx

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