@ssa-ui-kit/core 0.0.27-alpha → 0.0.28-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.27-alpha",
+  "version": "0.0.28-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -18,18 +18,6 @@
     "url": "https://github.com/ssagroup/ui-kit.git",
     "directory": "packages/core"
   },
-  "devDependencies": {
-    "@emotion/jest": "^11.11.0",
-    "@nivo/line": "0.83.0",
-    "@playwright/test": "^1.37.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/testing-library__jest-dom": "^5.14.6",
-    "@types/uuid": "^9.0.3",
-    "resolve-tspaths": "^0.8.16",
-    "storybook-addon-pseudo-states": "^2.1.0",
-    "terser-webpack-plugin": "^5.3.9",
-    "webpack": "^5.85.0"
-  },
   "dependencies": {
     "@emotion/core": "^11.0.0",
     "@emotion/css": "^11.11.2",
@@ -44,6 +32,18 @@
     "@ssa-ui-kit/hooks": "^0.0.2-alpha",
     "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },
+  "devDependencies": {
+    "@emotion/jest": "^11.11.0",
+    "@nivo/line": "0.83.0",
+    "@playwright/test": "^1.37.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "@types/uuid": "^9.0.3",
+    "resolve-tspaths": "^0.8.16",
+    "storybook-addon-pseudo-states": "^2.1.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.85.0"
+  },
   "browserslist": [
     ">0.1%",
     "not dead",
@@ -54,6 +54,8 @@
     "@emotion/css": "^11.11.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@nivo/core": "^0.83.0",
+    "@nivo/pie": "0.83.0",
     "react": "18.x",
     "react-dom": "18.x",
     "react-hook-form": "^7.46.1"

package/src/components/AddNewAccountCard/AddNewAccountCard.spec.tsx

@@ -0,0 +1,39 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { AddNewAccountCard } from './AddNewAccountCard';
+
+describe('AddNewAccountCard', () => {
+  it('Renders with onClick and button element', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole } = render(
+      <AddNewAccountCard onClick={mockOnClick}>Text</AddNewAccountCard>,
+    );
+
+    const buttonEl = getByRole('button', {
+      name: new RegExp('Text', 'i'),
+    });
+
+    await user.click(buttonEl);
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('Renders with link element', () => {
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={<AddNewAccountCard link="/link">Text</AddNewAccountCard>}
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const linkEl = getByRole('link', {
+      name: new RegExp('Text', 'i'),
+    });
+
+    expect(linkEl).toHaveAttribute('href', '/link');
+  });
+});

package/src/components/AddNewAccountCard/AddNewAccountCard.stories.tsx

@@ -0,0 +1,49 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+import Icon from '@components/Icon';
+import mainTheme from '@themes/main';
+import { AddNewAccountCard } from './AddNewAccountCard';
+
+export default {
+  title: 'Widgets/AddNewAccountCard',
+  component: AddNewAccountCard,
+} as Meta<typeof AddNewAccountCard>;
+
+export const Default: StoryObj<typeof AddNewAccountCard> = () => {
+  return (
+    <div css={{ width: '100%', maxWidth: '500px' }}>
+      <AddNewAccountCard onClick={() => alert('Clicked!')}>
+        <Icon name="plus" size={12} color={mainTheme.colors.blueRoyal} />
+        Add new account
+      </AddNewAccountCard>
+    </div>
+  );
+};
+
+Default.args = {};
+
+export const WithLink: StoryObj<typeof AddNewAccountCard> = () => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <div css={{ width: '100%', maxWidth: '500px' }}>
+              <AddNewAccountCard link="/link">
+                <Icon
+                  name="plus"
+                  size={12}
+                  color={mainTheme.colors.blueRoyal}
+                />
+                Add new account
+              </AddNewAccountCard>
+            </div>
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {};

package/src/components/AddNewAccountCard/AddNewAccountCard.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import { AccountCard } from './styles';
+import Card from '@components/Card';
+import { AddNewAccountCardProps } from '.';
+
+export const AddNewAccountCard = ({
+  children,
+  link,
+  onClick,
+}: AddNewAccountCardProps) => {
+  return link ? (
+    <Link css={{ textDecoration: 'none' }} to={link} onClick={onClick}>
+      <Card css={AccountCard} noShadow>
+        {children}
+      </Card>
+    </Link>
+  ) : (
+    <Card css={AccountCard} noShadow onClick={onClick}>
+      {children}
+    </Card>
+  );
+};

package/src/components/AddNewAccountCard/index.ts

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

package/src/components/AddNewAccountCard/styles.ts

@@ -0,0 +1,29 @@
+import { Theme, css } from '@emotion/react';
+
+export const AccountCard = (theme: Theme) => css`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 21px 10px;
+  color: ${theme.colors.blueRoyal};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0;
+  border-radius: 20px;
+  padding: 21px 0;
+  background: ${theme.colors.greyLighter};
+  border: 1px solid ${theme.colors.white};
+  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
+  transition: 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid ${theme.colors.white};
+    background: ${theme.colors.greyLighter};
+    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
+  }
+`;

package/src/components/AddNewAccountCard/types.ts

@@ -0,0 +1,7 @@
+import { To } from 'react-router-dom';
+
+export interface AddNewAccountCardProps {
+  children: React.ReactNode;
+  link?: To;
+  onClick?: () => void;
+}

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { css, useTheme } from '@emotion/react';
 import { ButtonGroup } from './ButtonGroup';
 import { items } from './helpers';

package/src/components/CardList/CardList.spec.tsx

@@ -0,0 +1,32 @@
+import { screen } from '../../../customTest';
+
+import { CardList } from './index';
+
+describe('CardList', () => {
+  it('Render component', async () => {
+    render(
+      <CardList
+        title="List of cards"
+        items={[
+          {
+            id: '1',
+            title: 'ITEM A',
+          },
+          {
+            id: '2',
+            title: 'ITEM B',
+          },
+        ]}
+        renderItem={(item) => item.title as string}
+      />,
+    );
+
+    const list = await screen.findAllByRole('listitem');
+    const itemA = await screen.findByText('ITEM A');
+    const itemB = await screen.findByText('ITEM B');
+
+    expect(list.length).toBe(2);
+    expect(itemA).toBeInTheDocument();
+    expect(itemB).toBeInTheDocument();
+  });
+});

package/src/components/CardList/CardList.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from '@components/Typography';
+import Card from '@components/Card';
+import CardContent from '@components/CardContent';
+import { CardList } from './CardList';
+
+export default {
+  title: 'Widgets/CardList',
+  component: CardList,
+} as Meta<typeof CardList>;
+
+export const Default: StoryObj<typeof CardList> = () => {
+  return (
+    <CardList
+      title="List of cards"
+      items={[
+        {
+          id: 'cardio_training',
+          title: 'HIIT Cardio training',
+        },
+        {
+          id: 'other_training',
+          title: 'Other cardio training',
+        },
+      ]}
+      renderItem={(item) => (
+        <Card>
+          <CardContent>
+            <Typography variant="body1">{item.title}</Typography>
+          </CardContent>
+        </Card>
+      )}
+    />
+  );
+};
+
+Default.storyName = 'CardList';

package/src/components/CardList/CardList.tsx

@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { css } from '@emotion/react';
+import Typography from '@components/Typography';
+import { CardListProps, Item } from './types';
+
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
+ */
+export const CardList = <ItemType extends Item>({
+  title,
+  items,
+  renderItem,
+}: CardListProps<ItemType>) => {
+  return (
+    <Fragment>
+      <Typography variant="h5" weight="bold">
+        {title}
+      </Typography>
+
+      <ul
+        css={css`
+          list-style: none;
+          padding: 0;
+
+          li {
+            margin-bottom: 15px;
+          }
+        `}>
+        {Array.isArray(items) &&
+          items.map((item) => <li key={item.id}>{renderItem(item)}</li>)}
+      </ul>
+    </Fragment>
+  );
+};

package/src/components/CardList/index.ts

@@ -0,0 +1,2 @@
+export * from './CardList';
+export * from './types';

package/src/components/CardList/types.ts

@@ -0,0 +1,10 @@
+export type Item = {
+  id: string | number;
+  [prop: string | number | symbol]: unknown;
+};
+
+export interface CardListProps<ItemType extends Item> {
+  title: string;
+  items: Array<ItemType>;
+  renderItem: (item: ItemType) => React.ReactNode;
+}

package/src/components/CollapsibleNavBar/CollapsibleNavBar.e2e.ts

@@ -0,0 +1,115 @@
+import { test, Page, expect } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+test.describe.configure({ mode: 'serial' });
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-collapsiblenavbar-opened__`;
+const MOBILE_SIZE = { width: 899, height: 1200 };
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-collapsiblenavbar--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: CollapsibleNavBar', () => {
+  test('[1920] Should be visible', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.locator('nav ul');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+    });
+  });
+
+  test('[1920] Statistics submenu should be shown after Statistics icon hovered', async ({
+    page,
+  }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.locator('ul > li:nth-of-type(3) button').first().hover();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px]_statistics_submenu_popover.png`,
+    });
+  });
+
+  test('[1920] Side menu should be expanded after toggle icon clicked', async ({
+    page,
+  }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.locator('label').filter({ hasText: 'Carrot right' }).click();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px]_side_menu_expanded.png`,
+    });
+  });
+
+  test('[1920] Statistics submenu should be showed after Statistics item clicked (expanded state)', async ({
+    page,
+  }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.locator('label').filter({ hasText: 'Carrot right' }).click();
+    await page.click('#chartstatisticsaccordion');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px]_statistics_submenu_expanded.png`,
+    });
+  });
+
+  test('[1439] Should be visible', async ({ page }) => {
+    await page.setViewportSize({ width: 1439, height: 1200 });
+    await gotoPage(page);
+    await page.locator('nav ul');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1439px].png`,
+    });
+  });
+
+  test('[1439] Statistics submenu should be shown after Statistics icon hovered', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1439, height: 1200 });
+    await gotoPage(page);
+    await page.locator('ul > li:nth-of-type(3) button').first().hover();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1439px]_statistics_submenu_popover.png`,
+    });
+  });
+
+  test('[899] Hamburger menu icon should be visible by default', async ({
+    page,
+  }) => {
+    await page.setViewportSize(MOBILE_SIZE);
+    await gotoPage(page);
+    await page.locator('nav ui');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w899px]_default.png`,
+    });
+  });
+
+  test('[899] Menu content should be visible after icon clicked', async ({
+    page,
+  }) => {
+    await page.setViewportSize(MOBILE_SIZE);
+    await gotoPage(page);
+    await page.click('nav > div:nth-of-type(1) > label');
+    await expect(page.getByText('Dashboard')).toBeVisible();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w899px]_menu_opened.png`,
+    });
+  });
+
+  test('[899] Statistics submenu should be visible after Statistics item clicked', async ({
+    page,
+  }) => {
+    await page.setViewportSize(MOBILE_SIZE);
+    await gotoPage(page);
+    await page.click('nav > div:nth-of-type(1) > label');
+    await page.getByText('Statistics').click();
+    await expect(page.getByText('Max in Work')).toBeVisible();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w899px]_statistics_submenu.png`,
+    });
+  });
+});

package/src/components/CollapsibleNavBar/CollapsibleNavBar.spec.tsx

@@ -0,0 +1,50 @@
+import { fireEvent } from '@testing-library/dom';
+import { ITEMS } from './stories/consts';
+import { StoryComponent } from './stories/StoryComponent';
+import { Logo } from './stories/Logo';
+
+describe('CollapsibleNavBar', () => {
+  it('Should be correctly rendered', () => {
+    const { getByText, getAllByText } = render(
+      <StoryComponent items={ITEMS} renderLogo={<Logo />} />,
+    );
+
+    getByText('Dashboard');
+    getByText('Bots');
+    getByText('Notifications');
+    getByText('Statistics');
+    getByText('Max in Work');
+    getByText('History');
+    getAllByText('Settings');
+  });
+
+  it('Should expand the group', () => {
+    const { container } = render(
+      <StoryComponent items={ITEMS} renderLogo={<Logo />} />,
+    );
+
+    const statisticsArrow = container.querySelector(
+      'button#chartstatisticsaccordion',
+    );
+
+    expect(statisticsArrow as Node).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(statisticsArrow as Node);
+
+    expect(statisticsArrow as Node).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('Should be expanded', () => {
+    const { queryByLabelText, getByLabelText } = render(
+      <StoryComponent items={ITEMS} renderLogo={<Logo />} />,
+    );
+
+    const contentToggler = getByLabelText('Carrot right');
+
+    fireEvent.click(contentToggler as Node);
+
+    expect(queryByLabelText('Carrot right')).not.toBeInTheDocument();
+
+    getByLabelText('Carrot left');
+  });
+});

package/src/components/CollapsibleNavBar/CollapsibleNavBar.tsx

@@ -0,0 +1,81 @@
+import { useState, useId, useEffect } from 'react';
+import { useWindowSize } from '@ssa-ui-kit/hooks';
+import Wrapper from '@components/Wrapper';
+import * as S from './styles';
+import CollapsibleNavBarBase from './CollapsibleNavBarBase';
+import CollapsibleNavBarWrapper from './CollapsibleNavBarWrapper';
+import CollapsibleNavBarList from './CollapsibleNavBarList';
+import CollapsibleNavToggle from './CollapsibleNavToggle';
+import { CollapsibleNavBarExtendedProps } from './types';
+import { NavContentToggle } from './CollapsibleNavContentToggle';
+import { NavBarItemWithSubMenu } from './NavBarItemWithSubMenu';
+import { NavBarItemWithoutSubMenu } from './NavBarItemWithoutSubMenu';
+import { SCREEN_SIZES } from '../../consts';
+/**
+ * UI Component that shows the collapsible navigation bar
+ */
+export const CollapsibleNavBar = ({
+  items,
+  renderLogo,
+  onChange,
+}: CollapsibleNavBarExtendedProps) => {
+  const toggleId = useId();
+  const { width } = useWindowSize();
+  const [isChecked, onToggle] = useState(false);
+  const isMobile = width < SCREEN_SIZES['900'].width;
+
+  useEffect(() => {
+    onToggle(false);
+  }, [width]);
+
+  useEffect(() => {
+    onChange?.(isChecked);
+  }, [isChecked]);
+
+  const handleCloseMobileMenu = () => {
+    if (isMobile) {
+      onToggle(!isChecked);
+    }
+  };
+
+  return (
+    <CollapsibleNavBarBase className={isChecked ? 'opened' : undefined}>
+      <input
+        type="checkbox"
+        id={toggleId}
+        checked={isChecked}
+        onChange={() => {
+          onToggle(!isChecked);
+        }}
+      />
+
+      <CollapsibleNavToggle id={toggleId} />
+
+      <CollapsibleNavBarWrapper>
+        <Wrapper css={S.LogoWrapper}>
+          {renderLogo}
+          <NavContentToggle id={toggleId} isChecked={isChecked} />
+        </Wrapper>
+        <CollapsibleNavBarList>
+          {items.map((item) => {
+            const { iconName, title } = item;
+            const keyName = iconName + title.replace(' ', '').toLowerCase();
+            return 'items' in item ? (
+              <NavBarItemWithSubMenu
+                item={item}
+                key={keyName}
+                onClick={handleCloseMobileMenu}
+              />
+            ) : (
+              <NavBarItemWithoutSubMenu
+                item={item}
+                key={keyName}
+                onClick={handleCloseMobileMenu}
+              />
+            );
+          })}
+        </CollapsibleNavBarList>
+      </CollapsibleNavBarWrapper>
+    </CollapsibleNavBarBase>
+  );
+};