@ssa-ui-kit/widgets 0.0.9-alpha → 0.0.11-alpha

package/src/components/ListGoals/ListGoalsCard.tsx

@@ -1,61 +1,61 @@
-import { css } from '@emotion/react';
-
-import {
-  Avatar,
-  Card,
-  CardContent,
-  ProgressCircle,
-  Typography,
-  Wrapper,
-} from '@ssa-ui-kit/core';
-
-import { content } from './styles';
-import { IItemCardProps, ProgressProps } from './types';
-
-export const ListGoalsCard = ({
-  image,
-  title,
-  details,
-  progressProps,
-}: IItemCardProps) => {
-  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>
-  );
-};
+import { css } from '@emotion/react';
+
+import {
+  Avatar,
+  Card,
+  CardContent,
+  ProgressCircle,
+  Typography,
+  Wrapper,
+} from '@ssa-ui-kit/core';
+
+import { content } from './styles';
+import { IItemCardProps, ProgressProps } from './types';
+
+export const ListGoalsCard = ({
+  image,
+  title,
+  details,
+  progressProps,
+}: IItemCardProps) => {
+  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 +1,2 @@
-export { ListGoals as default } from './ListGoals';
-export * from './types';
+export { ListGoals as default } from './ListGoals';
+export * from './types';

package/src/components/ListGoals/styles.tsx

@@ -1,11 +1,11 @@
-import { Theme, css } from '@emotion/react';
-
-export const content = (theme: Theme) => css`
-  h6 {
-    line-height: 23px;
-  }
-  p {
-    color: ${theme.colors.greyDarker60};
-    line-height: 23px;
-  }
-`;
+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 +1,25 @@
-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 IListGoalsProps {
-  goals: Array<Goal>;
-}
-
-export type ProgressProps = Partial<
-  React.ComponentProps<typeof ProgressCircle>
->;
-
-export interface IItemCardProps {
-  image: string;
-  title: string;
-  details: string;
-  progressProps: ProgressProps;
-}
+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 IListGoalsProps {
+  goals: Array<Goal>;
+}
+
+export type ProgressProps = Partial<
+  React.ComponentProps<typeof ProgressCircle>
+>;
+
+export interface IItemCardProps {
+  image: string;
+  title: string;
+  details: string;
+  progressProps: ProgressProps;
+}

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

@@ -1,68 +1,68 @@
-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=widgets-mealnutrients--default&viewMode=story',
-  );
-};
-
-test.describe('Widgets: 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`,
-      });
-    });
-  }
-});
+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=widgets-mealnutrients--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: 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.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();
+    });
+  });
+});