@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.3-alpha

package/src/components/PieChart/stories/fixtures.ts

@@ -1,39 +1,39 @@
-export const fitnessData = [
-  {
-    // cspell:disable-next-line
-    id: 'XlyNrZpVvNp2Z9LqloS6',
-    date: '2023-05-03T23:00:00.000Z',
-    value: 88,
-    label: 'stretching',
-  },
-  {
-    // cspell:disable-next-line
-    id: 'YthvgItFS3W0Sa3mRW0X',
-    date: '2023-05-03T23:00:00.000Z',
-    value: 55,
-    label: 'cardio',
-  },
-];
-
-export const accountData = [
-  {
-    id: 1,
-    value: 5800,
-    label: 'BTC',
-  },
-  {
-    id: 2,
-    value: 6243,
-    label: 'ETH',
-  },
-  {
-    id: 3,
-    value: 3840,
-    label: 'USDT',
-  },
-  {
-    id: 4,
-    value: 2300,
-    label: 'Other',
-  },
-];
+export const fitnessData = [
+  {
+    // cspell:disable-next-line
+    id: 'XlyNrZpVvNp2Z9LqloS6',
+    date: '2023-05-03T23:00:00.000Z',
+    value: 88,
+    label: 'stretching',
+  },
+  {
+    // cspell:disable-next-line
+    id: 'YthvgItFS3W0Sa3mRW0X',
+    date: '2023-05-03T23:00:00.000Z',
+    value: 55,
+    label: 'cardio',
+  },
+];
+
+export const accountData = [
+  {
+    id: 1,
+    value: 5800,
+    label: 'BTC',
+  },
+  {
+    id: 2,
+    value: 6243,
+    label: 'ETH',
+  },
+  {
+    id: 3,
+    value: 3840,
+    label: 'USDT',
+  },
+  {
+    id: 4,
+    value: 2300,
+    label: 'Other',
+  },
+];

package/src/components/PieChart/types.ts

@@ -1,28 +1,28 @@
-import { SerializedStyles } from '@emotion/react';
-import { CommonProps, MainColors } from '@ssa-ui-kit/core';
-import { ResponsivePie } from '@nivo/pie';
-
-export interface PieChartProps
-  extends CommonProps,
-    React.ComponentProps<typeof ResponsivePie> {
-  title?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-export type PieChartLegendItem = {
-  id: string | number;
-  value: string | number;
-  label: string;
-  [key: string | number | symbol]: unknown;
-};
-
-export interface PieChartLegendProps {
-  data: Array<PieChartLegendItem>;
-  colors: Array<keyof MainColors>;
-  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
-  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
-  className?: string;
-  markerStyles?: SerializedStyles;
-  labelListStyles?: SerializedStyles;
-  valueListStyles?: SerializedStyles;
-}
+import { SerializedStyles } from '@emotion/react';
+import { CommonProps, MainColors } from '@ssa-ui-kit/core';
+import { ResponsivePie } from '@nivo/pie';
+
+export interface PieChartProps
+  extends CommonProps,
+    React.ComponentProps<typeof ResponsivePie> {
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export type PieChartLegendItem = {
+  id: string | number;
+  value: string | number;
+  label: string;
+  [key: string | number | symbol]: unknown;
+};
+
+export interface PieChartLegendProps {
+  data: Array<PieChartLegendItem>;
+  colors: Array<keyof MainColors>;
+  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  className?: string;
+  markerStyles?: SerializedStyles;
+  labelListStyles?: SerializedStyles;
+  valueListStyles?: SerializedStyles;
+}

package/src/components/ProgressInfo/ProgressInfo.e2e.ts

@@ -1,31 +1,31 @@
-import { test, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-progressInfo__`;
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-progressinfo--default&viewMode=story',
-  );
-};
-
-test.describe('Widgets: ProgressInfo', () => {
-  for (const resolution of Object.keys(SCREEN_SIZES)) {
-    const viewportSize =
-      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
-
-    test(`[${resolution}] Renders on extra large screens`, async ({ page }) => {
-      await page.setViewportSize(viewportSize);
-      await gotoPage(page);
-      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, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-progressInfo__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-progressinfo--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: ProgressInfo', () => {
+  for (const resolution of Object.keys(SCREEN_SIZES)) {
+    const viewportSize =
+      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
+
+    test(`[${resolution}] Renders on extra large screens`, async ({ page }) => {
+      await page.setViewportSize(viewportSize);
+      await gotoPage(page);
+      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/ProgressInfo/ProgressInfo.spec.tsx

@@ -1,91 +1,91 @@
-import userEvent from '@testing-library/user-event';
-import { fireEvent, screen, waitFor, within } from '../../../customTest';
-import ResizeObserver from 'resize-observer-polyfill';
-
-import { progressInfoData as data } from './mockProgressInfoRequest';
-
-import ProgressInfo from './index';
-
-const ResponsivePieMock = ({
-  colors,
-}: {
-  onMouseMove: (p: { data: { y: number } }) => void;
-  colors?: string;
-}) => <div data-testid="progress-mock" css={{ color: colors }}></div>;
-
-jest.mock('@nivo/pie', () => ({
-  PieCustomLayerProps: {},
-  ResponsivePie: ResponsivePieMock,
-}));
-
-const setup = (component: React.ReactElement) => {
-  return {
-    user: userEvent.setup(),
-    ...render(component),
-  };
-};
-
-describe('ProgressInfo', () => {
-  beforeAll(() => {
-    window.ResizeObserver = ResizeObserver;
-  });
-
-  it('Renders the correct number items legends & items', async () => {
-    render(<ProgressInfo data={data} />);
-
-    await waitFor(async () => {
-      const [listActivities, listTotal] = await screen.findAllByRole('list');
-      const listActivitiesEls = await within(listActivities).findAllByRole(
-        'listitem',
-      );
-      const listTotalEls = await within(listTotal).findAllByRole('listitem');
-
-      expect(listActivitiesEls).toHaveLength(2);
-      expect(listTotalEls).toHaveLength(2);
-    });
-  });
-
-  it('Changes its content when a period is changed', async () => {
-    const { getByTestId, getByRole, getAllByRole, getByText } = render(
-      <ProgressInfo data={data} />,
-    );
-
-    await waitFor(async () => {
-      const dropdownEl = getByTestId('dropdown');
-      const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
-
-      await fireEvent.click(dropdownToggleEl);
-
-      const listItemEls = within(getByRole('listbox')).getAllByRole('button');
-
-      await fireEvent.click(listItemEls[2]);
-
-      const [listActivities, listTotal] = getAllByRole('list');
-      const listActivitiesEls = within(listActivities).getAllByRole('listitem');
-      const listTotalEls = within(listTotal).getAllByRole('listitem');
-
-      expect(listActivitiesEls).toHaveLength(2);
-      expect(listTotalEls).toHaveLength(2);
-      expect(getByText(/210 hrs/i)).toBeInTheDocument();
-      expect(getByText(/266 hrs/i)).toBeInTheDocument();
-    });
-  });
-
-  it('Renders without data', async () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { queryByTestId } = render(<ProgressInfo data="" />);
-
-    await waitFor(async () => {
-      const dropdownEl = await queryByTestId('dropdown');
-
-      expect(dropdownEl).not.toBeInTheDocument();
-    });
-  });
-
-  it('Renders ResponsivePie', async () => {
-    const { getByTestId } = setup(<ProgressInfo data={data} />);
-
-    await expect(getByTestId('progress-mock')).toBeInTheDocument();
-  });
-});
+import userEvent from '@testing-library/user-event';
+import { fireEvent, screen, waitFor, within } from '../../../customTest';
+import ResizeObserver from 'resize-observer-polyfill';
+
+import { progressInfoData as data } from './mockProgressInfoRequest';
+
+import ProgressInfo from './index';
+
+const ResponsivePieMock = ({
+  colors,
+}: {
+  onMouseMove: (p: { data: { y: number } }) => void;
+  colors?: string;
+}) => <div data-testid="progress-mock" css={{ color: colors }}></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+const setup = (component: React.ReactElement) => {
+  return {
+    user: userEvent.setup(),
+    ...render(component),
+  };
+};
+
+describe('ProgressInfo', () => {
+  beforeAll(() => {
+    window.ResizeObserver = ResizeObserver;
+  });
+
+  it('Renders the correct number items legends & items', async () => {
+    render(<ProgressInfo data={data} />);
+
+    await waitFor(async () => {
+      const [listActivities, listTotal] = await screen.findAllByRole('list');
+      const listActivitiesEls = await within(listActivities).findAllByRole(
+        'listitem',
+      );
+      const listTotalEls = await within(listTotal).findAllByRole('listitem');
+
+      expect(listActivitiesEls).toHaveLength(2);
+      expect(listTotalEls).toHaveLength(2);
+    });
+  });
+
+  it('Changes its content when a period is changed', async () => {
+    const { getByTestId, getByRole, getAllByRole, getByText } = render(
+      <ProgressInfo data={data} />,
+    );
+
+    await waitFor(async () => {
+      const dropdownEl = getByTestId('dropdown');
+      const dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+      await fireEvent.click(dropdownToggleEl);
+
+      const listItemEls = within(getByRole('listbox')).getAllByRole('button');
+
+      await fireEvent.click(listItemEls[2]);
+
+      const [listActivities, listTotal] = getAllByRole('list');
+      const listActivitiesEls = within(listActivities).getAllByRole('listitem');
+      const listTotalEls = within(listTotal).getAllByRole('listitem');
+
+      expect(listActivitiesEls).toHaveLength(2);
+      expect(listTotalEls).toHaveLength(2);
+      expect(getByText(/210 hrs/i)).toBeInTheDocument();
+      expect(getByText(/266 hrs/i)).toBeInTheDocument();
+    });
+  });
+
+  it('Renders without data', async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const { queryByTestId } = render(<ProgressInfo data="" />);
+
+    await waitFor(async () => {
+      const dropdownEl = await queryByTestId('dropdown');
+
+      expect(dropdownEl).not.toBeInTheDocument();
+    });
+  });
+
+  it('Renders ResponsivePie', async () => {
+    const { getByTestId } = setup(<ProgressInfo data={data} />);
+
+    await expect(getByTestId('progress-mock')).toBeInTheDocument();
+  });
+});

package/src/components/ProgressInfo/ProgressInfo.stories.tsx

@@ -1,32 +1,32 @@
-import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { progressInfoData as data } from './mockProgressInfoRequest';
-
-import { default as ProgressInfo, IProgressInfoProps } from './index';
-
-export default {
-  title: 'Widgets/ProgressInfo',
-  component: ProgressInfo,
-  args: {
-    data,
-  },
-  decorators: [
-    (Story) => (
-      <div
-        css={css`
-          container-type: inline-size;
-        `}>
-        <Story />
-      </div>
-    ),
-  ],
-} as Meta<typeof ProgressInfo>;
-
-export const Default: StoryObj<typeof ProgressInfo> = (
-  args: IProgressInfoProps,
-) => {
-  return <ProgressInfo {...args} />;
-};
-
-Default.args = { data, className: 'lostpixel-ignore' };
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { progressInfoData as data } from './mockProgressInfoRequest';
+
+import { default as ProgressInfo, IProgressInfoProps } from './index';
+
+export default {
+  title: 'Widgets/ProgressInfo',
+  component: ProgressInfo,
+  args: {
+    data,
+  },
+  decorators: [
+    (Story) => (
+      <div
+        css={css`
+          container-type: inline-size;
+        `}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof ProgressInfo>;
+
+export const Default: StoryObj<typeof ProgressInfo> = (
+  args: IProgressInfoProps,
+) => {
+  return <ProgressInfo {...args} />;
+};
+
+Default.args = { data, className: 'lostpixel-ignore' };