@ssa-ui-kit/widgets 0.0.29-alpha → 0.0.31-alpha

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

@@ -1,48 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { Meta, StoryObj } from '@storybook/react';
-import { AddNewAccountCard } from './AddNewAccountCard';
-import { Icon, mainTheme } from '@ssa-ui-kit/core';
-
-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

@@ -1,22 +0,0 @@
-import { Link } from 'react-router-dom';
-import { Card } from '@ssa-ui-kit/core';
-import { AddNewAccountCardProps } from './types';
-import { AccountCard } from './styles';
-
-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

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

package/src/components/AddNewAccountCard/styles.ts

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Card, CardContent, Typography } from '@ssa-ui-kit/core';
-
-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

@@ -1,37 +0,0 @@
-import { Fragment } from 'react';
-import { css } from '@emotion/react';
-
-import { Typography } from '@ssa-ui-kit/core';
-
-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

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

package/src/components/CardList/types.ts

@@ -1,10 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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:6007/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

@@ -1,50 +0,0 @@
-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

@@ -1,81 +0,0 @@
-import { useState, useId, useEffect } from 'react';
-import { Wrapper } from '@ssa-ui-kit/core';
-import { useWindowSize } from '@ssa-ui-kit/hooks';
-import * as S from './styles';
-import { SCREEN_SIZES } from '../../consts';
-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';
-/**
- * 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>
-  );
-};

package/src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts

@@ -1,134 +0,0 @@
-import styled from '@emotion/styled';
-import NavBarBase from '@components/NavBar/NavBarBase';
-import { css } from '@emotion/react';
-
-// TODO: refactor this
-const popupIconsToggle = (isVisible: boolean) => css`
-  & a > button {
-    display: ${isVisible ? 'block' : 'none'};
-  }
-  & > div > div > div > div:first-of-type {
-    display: ${isVisible ? 'block' : 'none'};
-    & > button {
-      display: ${isVisible ? 'block' : 'none'};
-    }
-  }
-`;
-
-// TODO: refactor this
-const staticIconsToggle = (isVisible: boolean) => css`
-  & a > div {
-    display: ${isVisible ? 'flex' : 'none'};
-  }
-  & > div > div > div > div:nth-of-type(2) {
-    display: ${isVisible ? 'flex' : 'none'};
-  }
-  & > div > div > div:nth-of-type(2) {
-    display: ${isVisible ? 'block' : 'none'};
-  }
-`;
-
-const CollapsibleNavBarBase = styled(NavBarBase)`
-  padding: 15px 0 0 15px;
-  position: absolute;
-
-  & li {
-    ${popupIconsToggle(false)}
-  }
-
-  &.opened {
-    background: linear-gradient(
-      108.3deg,
-      ${({ theme }) => theme.colors.greyDarker} -0.36%,
-      ${({ theme }) => theme.colors.greyDarker} 100%
-    );
-    align-items: flex-start;
-    min-width: 100%;
-    width: 100%;
-    height: 100%;
-
-    ${({ theme }) => theme.mediaQueries.md} {
-      height: initial;
-    }
-  }
-
-  & > input[type='checkbox'] {
-    &:checked {
-      & ~ div:first-of-type {
-        background-color: #4a4d51;
-
-        & label span {
-          opacity: 1;
-          transform: rotate(45deg) translate(-5px, -9px);
-          background: ${({ theme }) => theme.colors.white};
-
-          &:nth-last-of-type(3) {
-            opacity: 0;
-            transform: rotate(0deg) scale(0.2, 0.2);
-          }
-
-          &:nth-last-of-type(2) {
-            transform: rotate(-45deg) translate(-2px, 8px);
-          }
-        }
-      }
-
-      & ~ div:nth-of-type(2) {
-        display: block;
-        border-radius: 12px 12px 0 0;
-        height: calc(100vh - 60px);
-
-        ${({ theme }) => theme.mediaQueries.xlg} {
-          border-radius: 0;
-          height: 100vh;
-        }
-      }
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    width: 85px;
-    padding: 0;
-    position: static;
-    z-index: 0;
-    min-width: unset;
-
-    & li {
-      ${staticIconsToggle(false)}
-      ${popupIconsToggle(true)}
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    &.opened {
-      min-width: unset;
-      width: 240px;
-
-      & > div:nth-of-type(2) {
-        width: 240px;
-        padding-left: 31px;
-        & img {
-          margin-left: 0;
-        }
-        & li {
-          justify-content: flex-start;
-          & button {
-            display: flex;
-          }
-          ${staticIconsToggle(true)}
-          ${popupIconsToggle(false)}
-
-          & > a > span {
-            display: block;
-          }
-
-          & div > div > div:nth-of-type(2) {
-            display: flex;
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default CollapsibleNavBarBase;

package/src/components/CollapsibleNavBar/CollapsibleNavBarItem.ts

@@ -1,28 +0,0 @@
-import styled from '@emotion/styled';
-import NavBarItem from '@components/NavBar/NavBarItem';
-
-const CollapsibleNavBarItem = styled(NavBarItem)`
-  align-items: flex-start;
-  justify-content: flex-start;
-
-  height: auto;
-  min-height: 24px;
-  padding: 12px 0;
-  &:first-of-type {
-    padding-top: 0;
-  }
-  &:last-of-type {
-    padding-bottom: 0;
-  }
-  width: 100%;
-  & > a {
-    height: 26px;
-  }
-  ${({ theme }) => theme.mediaQueries.md} {
-    justify-content: center;
-    padding: 20px 0;
-    width: 100%;
-  }
-`;
-
-export default CollapsibleNavBarItem;

package/src/components/CollapsibleNavBar/CollapsibleNavBarLink.ts

@@ -1,40 +0,0 @@
-import styled from '@emotion/styled';
-import NavBarLink from '@components/NavBar/NavBarLink';
-
-const CollapsibleNavBarLink = styled(NavBarLink)`
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 20px;
-  color: ${({ theme }) => theme.colors.white80};
-
-  svg {
-    backdrop-filter: blur(0);
-  }
-
-  &:not(.active):hover {
-    backdrop-filter: blur(0);
-    filter: ${({ theme }) =>
-      `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
-    color: ${({ theme }) => theme.colors.white};
-
-    svg {
-      & path {
-        fill: ${({ theme }) => theme.colors.white};
-      }
-      & circle {
-        stroke: ${({ theme }) => theme.colors.white};
-      }
-    }
-  }
-
-  & > span {
-    color: ${({ theme }) => theme.colors.white80};
-
-    ${({ theme }) => theme.mediaQueries.md} {
-      display: none;
-    }
-  }
-`;
-
-export default CollapsibleNavBarLink;