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

package/src/components/LinksTabBar/LinksTabBar.tsx

@@ -1,14 +0,0 @@
-import { NavLink } from 'react-router-dom';
-
-import { LinksTabBarProps } from './types';
-import { LinksTabBarBase } from './LinksTabBarBase';
-
-export const LinksTabBar = ({ as, className, links }: LinksTabBarProps) => {
-  return (
-    <LinksTabBarBase as={as} className={className}>
-      {links.map(({ id, ...props }) => (
-        <NavLink key={id} {...props} />
-      ))}
-    </LinksTabBarBase>
-  );
-};

package/src/components/LinksTabBar/LinksTabBarBase.tsx

@@ -1,36 +0,0 @@
-import styled from '@emotion/styled';
-import { styleUtils } from '@ssa-ui-kit/core';
-
-export const LinksTabBarBase = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  a {
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding: 8px 4px;
-    font-size: 14px;
-    text-decoration: none;
-    color: ${({ theme }) => theme.colors.greyDropdownFocused};
-  }
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    a {
-      font-size: 18px;
-    }
-  }
-
-  a.active {
-    font-weight: 700;
-    color: ${({ theme }) => theme.colors.greyDarker};
-    text-decoration: underline solid #2f6ce3;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 8px;
-  }
-
-  a:focus-visible::before {
-    ${({ theme }) => styleUtils.outlineStyles(theme, 'grey40', '6px', 'dashed')}
-  }
-`;

package/src/components/LinksTabBar/index.ts

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

package/src/components/LinksTabBar/stories/decorators.tsx

@@ -1,34 +0,0 @@
-import { MemoryRouter, Route, Routes, Outlet } from 'react-router-dom';
-import { links } from './mockData';
-
-export const RoutePlaceholder = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => <div>Current route: {children}</div>;
-
-export const MemoryRouterDecorator = (Component: React.ElementType) => (
-  <div style={{ width: '591px', padding: '10px' }}>
-    <MemoryRouter initialEntries={[links[0].to]}>
-      <Routes>
-        <Route
-          element={
-            <div>
-              <Component />
-              <div style={{ marginTop: '25px' }}>
-                <Outlet />
-              </div>
-            </div>
-          }>
-          {links.map((link, index) => (
-            <Route
-              key={index}
-              path={link.to}
-              element={<RoutePlaceholder>{link.children}</RoutePlaceholder>}
-            />
-          ))}
-        </Route>
-      </Routes>
-    </MemoryRouter>
-  </div>
-);

package/src/components/LinksTabBar/stories/mockData.ts

@@ -1,27 +0,0 @@
-export const links = [
-  {
-    id: 'information',
-    to: '/information',
-    children: 'Information',
-  },
-  {
-    id: 'configuration',
-    to: '/configuration',
-    children: 'Configuration',
-  },
-  {
-    id: 'logs',
-    to: '/logs',
-    children: 'Logs',
-  },
-  {
-    id: 'history',
-    to: '/history',
-    children: 'History',
-  },
-  {
-    id: 'monitor',
-    to: '/monitor',
-    children: 'Monitor',
-  },
-];

package/src/components/LinksTabBar/types.ts

@@ -1,12 +0,0 @@
-import { SerializedStyles } from '@emotion/react';
-import type { NavLinkProps } from 'react-router-dom';
-import { CommonProps } from '@ssa-ui-kit/core';
-
-export interface TabBarLink extends NavLinkProps {
-  id: string;
-  css?: SerializedStyles;
-}
-
-export interface LinksTabBarProps extends CommonProps {
-  links: Array<TabBarLink>;
-}

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

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

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

@@ -1,41 +0,0 @@
-import { useId } from 'react';
-import { useTheme } from '@emotion/react';
-
-import { Icon } from '@ssa-ui-kit/core';
-
-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

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

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

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

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

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

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

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

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

package/src/components/NavBar/types.ts

@@ -1,25 +0,0 @@
-import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
-import { MapIconsType } from '@ssa-ui-kit/core';
-
-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

@@ -1,113 +0,0 @@
-import { createRef } from 'react';
-import userEvent from '@testing-library/user-event';
-import { Button } from '@ssa-ui-kit/core';
-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');
-  });
-});