@ssa-ui-kit/widgets 0.0.7-alpha → 0.0.8-alpha

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

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

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

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