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

package/src/components/PieChart/PieChartLegend.tsx

@@ -1,51 +1,51 @@
-import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
-import { Typography } from '@ssa-ui-kit/core';
-
-import { PieChartLegendMarker } from './PieChartLegendMarker';
-import { PieChartLegendList } from './PieChartLegendList';
-import { PieChartLegendProps } from './types';
-
-export const PieChartLegend = ({
-  data,
-  colors,
-  renderLabel,
-  renderValue,
-  markerStyles,
-  labelListStyles,
-  valueListStyles,
-}: PieChartLegendProps) => {
-  const theme = useTheme();
-  return (
-    <Fragment>
-      <PieChartLegendList css={labelListStyles}>
-        {data.map((item, index) => {
-          const { id, label } = item;
-          return (
-            <li key={`tag-${id}`}>
-              <PieChartLegendMarker
-                color={colors[index] || 'purple'}
-                as={'span'}
-                css={markerStyles}
-              />
-              <Typography variant="h6">
-                {typeof renderLabel === 'function' ? renderLabel(item) : label}
-              </Typography>
-            </li>
-          );
-        })}
-      </PieChartLegendList>
-      <PieChartLegendList css={valueListStyles}>
-        {data.map((item) => (
-          <li key={`subtitle-${item.id}`}>
-            <Typography variant="subtitle" color={theme.colors.greyDarker60}>
-              {typeof renderValue === 'function'
-                ? renderValue(item)
-                : item.value}
-            </Typography>
-          </li>
-        ))}
-      </PieChartLegendList>
-    </Fragment>
-  );
-};
+import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
+import { Typography } from '@ssa-ui-kit/core';
+
+import { PieChartLegendMarker } from './PieChartLegendMarker';
+import { PieChartLegendList } from './PieChartLegendList';
+import { PieChartLegendProps } from './types';
+
+export const PieChartLegend = ({
+  data,
+  colors,
+  renderLabel,
+  renderValue,
+  markerStyles,
+  labelListStyles,
+  valueListStyles,
+}: PieChartLegendProps) => {
+  const theme = useTheme();
+  return (
+    <Fragment>
+      <PieChartLegendList css={labelListStyles}>
+        {data.map((item, index) => {
+          const { id, label } = item;
+          return (
+            <li key={`tag-${id}`}>
+              <PieChartLegendMarker
+                color={colors[index] || 'purple'}
+                as={'span'}
+                css={markerStyles}
+              />
+              <Typography variant="h6">
+                {typeof renderLabel === 'function' ? renderLabel(item) : label}
+              </Typography>
+            </li>
+          );
+        })}
+      </PieChartLegendList>
+      <PieChartLegendList css={valueListStyles}>
+        {data.map((item) => (
+          <li key={`subtitle-${item.id}`}>
+            <Typography variant="subtitle" color={theme.colors.greyDarker60}>
+              {typeof renderValue === 'function'
+                ? renderValue(item)
+                : item.value}
+            </Typography>
+          </li>
+        ))}
+      </PieChartLegendList>
+    </Fragment>
+  );
+};

package/src/components/PieChart/PieChartLegendList.tsx

@@ -1,19 +1,19 @@
-import styled from '@emotion/styled';
-
-export const PieChartLegendList = styled.ul`
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  list-style: none;
-
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  gap: 14px;
-
-  li {
-    display: flex;
-    align-items: center;
-    height: 20px;
-  }
-`;
+import styled from '@emotion/styled';
+
+export const PieChartLegendList = styled.ul`
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  list-style: none;
+
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  gap: 14px;
+
+  li {
+    display: flex;
+    align-items: center;
+    height: 20px;
+  }
+`;

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -1,12 +1,12 @@
-import styled from '@emotion/styled';
-import { Badge } from '@ssa-ui-kit/core';
-
-export const PieChartLegendMarker = styled(Badge)`
-  display: inline-block;
-
-  padding: 0;
-  margin-right: 12px;
-
-  width: 8px;
-  height: 8px;
-`;
+import styled from '@emotion/styled';
+import { Badge } from '@ssa-ui-kit/core';
+
+export const PieChartLegendMarker = styled(Badge)`
+  display: inline-block;
+
+  padding: 0;
+  margin-right: 12px;
+
+  width: 8px;
+  height: 8px;
+`;

package/src/components/PieChart/colorPalettes.ts

@@ -1,28 +1,28 @@
-import { Theme } from '@emotion/react';
-import { MainColors } from '@ssa-ui-kit/core';
-
-export const getBalancePalette = (theme: Theme) => {
-  const legendColorNames = [
-    'yellow',
-    'blue',
-    'green',
-    'yellowWarm',
-    'blueLight',
-    'turquoise',
-    'pink',
-    'purple',
-  ] as unknown as Array<keyof MainColors>;
-
-  const pieChartColors = [
-    theme.colors.yellow,
-    theme.colors.blue,
-    theme.colors.green,
-    theme.colors.yellowLighter,
-    theme.colors.blueLight,
-    theme.colors.turquoise,
-    theme.colors.pink,
-    theme.colors.purple,
-  ] as unknown as string[];
-
-  return { legendColorNames, pieChartColors };
-};
+import { Theme } from '@emotion/react';
+import { MainColors } from '@ssa-ui-kit/core';
+
+export const getBalancePalette = (theme: Theme) => {
+  const legendColorNames = [
+    'yellow',
+    'blue',
+    'green',
+    'yellowWarm',
+    'blueLight',
+    'turquoise',
+    'pink',
+    'purple',
+  ] as unknown as Array<keyof MainColors>;
+
+  const pieChartColors = [
+    theme.colors.yellow,
+    theme.colors.blue,
+    theme.colors.green,
+    theme.colors.yellowLighter,
+    theme.colors.blueLight,
+    theme.colors.turquoise,
+    theme.colors.pink,
+    theme.colors.purple,
+  ] as unknown as string[];
+
+  return { legendColorNames, pieChartColors };
+};

package/src/components/PieChart/index.ts

@@ -1,4 +1,4 @@
-export * from './PieChart';
-export * from './PieChartLegend';
-export * as pieChartPalettes from './colorPalettes';
-export * from './types';
+export * from './PieChart';
+export * from './PieChartLegend';
+export * as pieChartPalettes from './colorPalettes';
+export * from './types';

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();
+  });
+});