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

package/src/components/NavBar/NavBar.e2e.ts

@@ -0,0 +1,64 @@
+import { test, Page } 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-navbar-opened__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?id=widgets-navbar--default&viewMode=story',
+  );
+};
+
+const clickAndWaitForAnimationEnd = async (page: Page) => {
+  await page.locator('#storybook-root div').nth(1).click();
+  await page
+    .locator('div[class*="NavBarWrapper"]')
+    .evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished),
+      ),
+    );
+};
+
+test('[1920] Widgets: NavBar 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('[1440] Widgets: NavBar should be visible', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1440]);
+  await gotoPage(page);
+  await page.locator('nav ul');
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1440px].png`,
+  });
+});
+
+test('[900] Widgets: NavBar should be visible after icon clicking', async ({
+  page,
+}) => {
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await gotoPage(page);
+  await clickAndWaitForAnimationEnd(page);
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('[390] Widgets: NavBar should be visible after icon clicking', async ({
+  page,
+}) => {
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  await gotoPage(page);
+  await clickAndWaitForAnimationEnd(page);
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});

package/src/components/NavBar/NavBar.stories.tsx

@@ -0,0 +1,86 @@
+import { Fragment } from 'react';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { Meta } from '@storybook/react';
+import { Title, Description, Source } from '@storybook/addon-docs';
+
+import { NavBar } from './NavBar';
+import { DecoratorFunction } from '@storybook/types';
+
+type Args = Parameters<typeof NavBar>[0];
+
+const reactRouterDecorator: DecoratorFunction<
+  {
+    component: typeof NavBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/*" element={<Story />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+const Items = [
+  { path: 'stats', iconName: 'stats' },
+  { path: 'calendar', iconName: 'calendar' },
+  { path: 'trainings', iconName: 'trainings' },
+  { path: 'measurements', iconName: 'measurements' },
+  { path: 'diet', iconName: 'diet' },
+  { path: 'notification', iconName: 'notification' },
+  { path: 'settings', iconName: 'settings' },
+];
+
+export default {
+  title: 'Widgets/NavBar',
+  component: NavBar,
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile2',
+    },
+    docs: {
+      page: () => (
+        <Fragment>
+          <Title />
+          <Description />
+          <Source code={`<NavBar />`} />
+        </Fragment>
+      ),
+    },
+  },
+  decorators: [
+    reactRouterDecorator,
+    (Story) => (
+      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
+    ),
+  ],
+  args: {
+    items: Items,
+  },
+} as Meta<typeof NavBar>;
+
+export const Default = {};
+
+const VIEWPORTS = {
+  laptop: {
+    name: 'Laptop',
+    styles: {
+      width: '1440px',
+      height: '1080px',
+    },
+  },
+};
+
+export const WideScreen = {
+  component: NavBar,
+  parameters: {
+    viewport: {
+      viewports: VIEWPORTS,
+      defaultViewport: 'laptop',
+    },
+  },
+};

package/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,41 @@
+import { useId } from 'react';
+import { useTheme } from '@emotion/react';
+
+import Icon from '@components/Icon';
+
+import NavBarBase from './NavBarBase';
+import NavBarWrapper from './NavBarWrapper';
+import NavBarList from './NavBarList';
+import NavBarItem from './NavBarItem';
+import NavBarLink from './NavBarLink';
+import NavToggle from './NavToggle';
+
+import { NavBarProps } from './types';
+
+/**
+ * UI Component that shows the navigation bar
+ */
+export const NavBar = ({ items }: NavBarProps) => {
+  const toggleId = useId();
+  const theme = useTheme();
+
+  return (
+    <NavBarBase>
+      <input type="checkbox" id={toggleId} />
+
+      <NavToggle htmlFor={toggleId} />
+
+      <NavBarWrapper>
+        <NavBarList>
+          {items.map(({ path, iconName }) => (
+            <NavBarItem key={path}>
+              <NavBarLink to={'/' + path}>
+                <Icon name={iconName} color={theme.colors.grey} />
+              </NavBarLink>
+            </NavBarItem>
+          ))}
+        </NavBarList>
+      </NavBarWrapper>
+    </NavBarBase>
+  );
+};

package/src/components/NavBar/NavBarBase.ts

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+const NavBarBase = styled.nav`
+  align-items: center;
+  justify-content: center;
+
+  z-index: 9999;
+
+  color: ${({ theme }) => theme.colors.greyLighter};
+
+  input[type='checkbox'] {
+    display: none;
+
+    &:checked {
+      & ~ div:first-of-type {
+        background-color: #dee1ec;
+      }
+
+      & ~ div:nth-of-type(2) {
+        transform: translateY(0);
+        border-radius: 12px 12px 0 0;
+        height: calc(100vh - 60px);
+
+        ${({ theme }) => theme.mediaQueries.lg} {
+          border-radius: 0;
+          height: 100vh;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: flex;
+
+    top: 0;
+
+    border-radius: 0;
+
+    button {
+      display: none;
+    }
+  }
+`;
+
+export default NavBarBase;

package/src/components/NavBar/NavBarItem.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const NavBarItem = styled.li`
+  display: flex;
+  flex: 1 1 100%;
+
+  align-items: center;
+  justify-content: center;
+
+  height: 65px;
+`;
+
+export default NavBarItem;

package/src/components/NavBar/NavBarLink.ts

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+
+const NavBarLink = styled(NavLink)`
+  cursor: pointer;
+
+  &:not(.active):hover {
+    svg {
+      filter: ${({ theme }) =>
+        `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
+    }
+  }
+
+  &.active {
+    cursor: default;
+    backdrop-filter: blur(0);
+    filter: drop-shadow(-4px 4px 14px ${({ theme }) => theme.colors.white});
+    color: ${({ theme }) => theme.colors.white};
+
+    svg {
+      filter: drop-shadow(-4px 4px 14px ${({ theme }) => theme.colors.white});
+
+      & path {
+        fill: ${({ theme }) => theme.colors.white};
+      }
+      & circle {
+        stroke: ${({ theme }) => theme.colors.white};
+      }
+    }
+  }
+`;
+
+export default NavBarLink;

package/src/components/NavBar/NavBarList.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+const NavBarList = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+
+  list-style: none;
+
+  align-items: center;
+  align-self: center;
+  height: 486px;
+
+  padding: 0;
+`;
+
+export default NavBarList;

package/src/components/NavBar/NavBarWrapper.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+const NavBarWrapper = styled.div`
+  position: absolute;
+
+  top: 60px;
+  left: 0;
+
+  width: 56px;
+
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(
+    108.3deg,
+    ${({ theme }) => theme.colors.greyDarker} -0.36%,
+    ${({ theme }) => theme.colors.greyDarker} 100%
+  );
+
+  transform: translateY(-200vh);
+  transition: height 475ms ease, transform 450ms ease, border-radius 450ms ease;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    width: 64px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.xlg} {
+    display: flex;
+    position: fixed;
+
+    top: 0;
+
+    width: 94px;
+    height: 100vh;
+
+    border-radius: 0;
+
+    transform: translateY(0);
+  }
+`;
+
+export default NavBarWrapper;

package/src/components/NavBar/NavToggle.tsx

@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+
+import NavToggleWrapper from './NavToggleWrapper';
+
+const NavToggle = ({ htmlFor }: { htmlFor: string }) => (
+  <NavToggleWrapper>
+    <label
+      htmlFor={htmlFor}
+      css={css`
+        cursor: pointer;
+
+        height: 20px;
+        width: 20px;
+
+        transform: scale(-1, 1);
+
+        span {
+          height: 2px;
+          width: 100%;
+          background: black;
+          display: block;
+          margin: 3px 0;
+
+          &:nth-of-type(2) {
+            width: 80%;
+          }
+        }
+      `}>
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </NavToggleWrapper>
+);
+
+export default NavToggle;

package/src/components/NavBar/NavToggleWrapper.ts

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+const NavToggleWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  border-radius: 25px;
+  background: transparent;
+
+  height: 36px;
+  width: 36px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+
+export default NavToggleWrapper;

package/src/components/NavBar/index.ts

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

package/src/components/NavBar/types.ts

@@ -0,0 +1,25 @@
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import { MapIconsType } from '@components/Icon/types';
+
+export interface NavBarProps {
+  items: Array<{ path: string; iconName: keyof MapIconsType }>;
+}
+
+export type NavBarExtendedItem = {
+  CustomIcon?: () => EmotionJSX.Element;
+  path: string;
+  iconName: keyof MapIconsType;
+  title: string;
+};
+
+export type NavBarExtendedGroup = {
+  CustomIcon?: () => EmotionJSX.Element;
+  prefix?: string;
+  iconName: keyof MapIconsType;
+  title: string;
+  items: Array<{ path: string; title: string }>;
+};
+
+export interface NavBarExtendedProps {
+  items: Array<NavBarExtendedItem | NavBarExtendedGroup>;
+}

package/src/components/NotificationCard/NotificationCard.spec.tsx

@@ -0,0 +1,113 @@
+import { createRef } from 'react';
+import userEvent from '@testing-library/user-event';
+import Button from '@components/Button';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardProps } from './types';
+
+const commonProps: Pick<
+  NotificationCardProps,
+  'title' | 'text' | 'type' | 'time'
+> = {
+  title: 'Title',
+  text: 'Text',
+  type: 'Informational',
+  time: Date.now() - 1200000,
+};
+
+describe('NotificationCard', () => {
+  it('Renders with indicator (Unread state)', () => {
+    const { getByTestId } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByTestId('indicator-left');
+  });
+
+  it('Renders without indicator (Read state)', () => {
+    const { queryByTestId } = render(
+      <NotificationCard {...commonProps} isRead={true} />,
+    );
+
+    expect(queryByTestId('indicator-left')).not.toBeInTheDocument();
+  });
+
+  it('Renders with badge and icon', () => {
+    const { getByTestId } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByTestId('badge');
+    expect(getByTestId('badge')).toHaveTextContent(/information/i);
+  });
+
+  it('Renders with title and sub-text', () => {
+    const { getByText } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByText(/title/i);
+    getByText(/text/i);
+  });
+
+  it('Renders with children prop', () => {
+    const { getByText, getAllByRole } = render(
+      <NotificationCard {...commonProps} isRead={false}>
+        <Button text="test" />
+        <Button text="test" />
+        Children Content
+      </NotificationCard>,
+    );
+
+    getByText(/children content/i);
+    const buttons = getAllByRole('button');
+    expect(buttons.length).toBe(2);
+  });
+
+  it('Renders with passed time value', () => {
+    const { getByText } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByText(/20 mins ago/i);
+  });
+
+  it('Renders with passed onClick prop', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByTestId } = render(
+      <NotificationCard
+        {...commonProps}
+        isRead={false}
+        onClick={mockOnClick}
+      />,
+    );
+
+    const notification = getByTestId('notification');
+
+    await user.click(notification);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('Renders with ref', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<NotificationCard {...commonProps} isRead={false} ref={ref} />);
+
+    expect(ref.current?.querySelector('h6')?.textContent).toBe('Title');
+  });
+
+  it('Renders with custom styles', () => {
+    const { getByTestId } = render(
+      <NotificationCard
+        {...commonProps}
+        isRead={false}
+        css={{
+          backgroundColor: 'blue',
+        }}
+      />,
+    );
+
+    const notification = getByTestId('notification');
+    expect(notification).toHaveStyleRule('background-color', 'blue');
+  });
+});

package/src/components/NotificationCard/NotificationCard.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from '@components/Button';
+import { mainTheme } from '../..';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardProps } from './types';
+import { childrenWrapper } from './styles';
+
+const notifyValues: Array<Pick<NotificationCardProps, 'type' | 'time'>> = [
+  {
+    type: 'Informational',
+    time: Date.now() - 600000,
+  },
+  {
+    type: 'Warning',
+    time: Date.now() - 1600000,
+  },
+
+  {
+    type: 'Error',
+    time: Date.now() - 2600000,
+  },
+];
+
+export default {
+  title: 'Widgets/NotificationCard',
+  component: NotificationCard,
+  argTypes: {
+    isRead: {
+      control: 'boolean',
+    },
+
+    type: {
+      options: ['Informational', 'Warning', 'Error'],
+      control: {
+        type: 'select',
+      },
+    },
+
+    time: {
+      control: {
+        type: 'date',
+      },
+    },
+  },
+} as Meta<typeof NotificationCard>;
+
+export const Default: StoryObj<typeof NotificationCard> = (
+  args: NotificationCardProps,
+) => {
+  return (
+    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
+      <NotificationCard
+        title={args.title}
+        text={args.text}
+        isRead={args.isRead}
+        type={args.type}
+        time={args.time}>
+        <div css={childrenWrapper}>
+          <Button
+            size="small"
+            variant="tertiary"
+            text="Ignore"
+            css={{
+              border: `1px solid ${mainTheme.colors.greyDropdownMain}`,
+              fontWeight: '600',
+              padding: '5px 21px',
+
+              ['span']: {
+                color: mainTheme.colors.greyCancelClearButton,
+              },
+            }}
+          />
+          <Button
+            size="small"
+            variant="attention"
+            text="Stop bot"
+            css={{ padding: '5px 26px' }}
+          />
+        </div>
+      </NotificationCard>
+    </div>
+  );
+};
+
+Default.args = {
+  title: 'CyberVeinToken is Now Available on Exchange',
+  text: 'You have an error with Bot name 1. Do you want to stop this bot?',
+  isRead: false,
+  type: 'Informational',
+  time: Date.now() - 1200000,
+};
+
+export const NotificationList: StoryObj<typeof NotificationCard> = () => {
+  return (
+    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
+      {notifyValues.map((value, index) => {
+        return (
+          <NotificationCard
+            key={index}
+            title="CyberVeinToken is Now Available"
+            text="With our newest listing, we’re welcoming Wrapped "
+            isRead={false}
+            type={value.type}
+            time={value.time}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+NotificationList.args = {};