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

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,95 +0,0 @@
-import { forwardRef } from 'react';
-import { useTheme } from '@emotion/react';
-import { dateFormatters } from '@ssa-ui-kit/utils';
-import {
-  Badge,
-  CardBase,
-  MapIconsType,
-  Icon,
-  Indicator,
-  MainColors,
-  Typography,
-} from '@ssa-ui-kit/core';
-import { NotificationCardProps } from './types';
-import {
-  notifyBadge,
-  notifyCard,
-  notifyTitle,
-  notifyText,
-  notifyTime,
-} from './styles';
-
-export const notificationTypes: Record<string, { [key: string]: string }> = {
-  Informational: {
-    icon: 'information',
-    color: 'blueLight',
-  },
-  Warning: {
-    icon: 'warning',
-    color: 'yellowWarm',
-  },
-  Error: {
-    icon: 'attention',
-    color: 'pink',
-  },
-};
-
-export const NotificationCard = forwardRef<
-  HTMLDivElement,
-  NotificationCardProps
->(function NotificationCard(
-  { title, children, text, isRead, type, time, onClick, className },
-  ref,
-) {
-  const theme = useTheme();
-  const { getTimeAgo } = dateFormatters;
-
-  return (
-    <CardBase
-      ref={ref}
-      data-testid="notification"
-      css={notifyCard}
-      className={className}
-      noShadow
-      onClick={() => {
-        if (typeof onClick === 'function') {
-          onClick();
-        }
-      }}>
-      <Indicator isVisible={!isRead}>
-        <Badge
-          data-testid="badge"
-          color={notificationTypes[type].color as keyof MainColors}
-          css={notifyBadge}>
-          <Icon
-            name={notificationTypes[type].icon as keyof MapIconsType}
-            color={theme.colors.white}
-            size={14}
-          />
-        </Badge>
-      </Indicator>
-      <Typography
-        variant="subtitle"
-        weight="medium"
-        css={notifyTitle}
-        color={theme.colors.greyDarker}>
-        {title}
-      </Typography>
-      <Typography
-        variant="body1"
-        weight="regular"
-        css={notifyText}
-        color={theme.colors.greyDarker60}>
-        {text}
-      </Typography>
-      {children}
-      <Typography
-        variant="body1"
-        weight="regular"
-        css={notifyTime}
-        color={theme.colors.greyDarker}>
-        {getTimeAgo(time)}
-      </Typography>
-    </CardBase>
-  );
-});

package/src/components/NotificationCard/index.ts

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

package/src/components/NotificationCard/styles.tsx

@@ -1,134 +0,0 @@
-import { Theme, css } from '@emotion/react';
-
-export const childrenWrapper = (theme: Theme) => `
-  grid-column: 2 / span 2;
-  margin-top: 10px;
-
-  button {
-    height: 31px;
-    border-radius: 6px;
-    font-weight: 700;
-
-    &:focus::before {
-      content: none;
-    }
-
-    &:not(:last-child) {
-      margin-right: 20px;
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    margin-top: 13px;
-  }
-
-  ${theme.mediaQueries.xs} {
-    button {
-      height: 28px;
-      padding: 10px;
-
-      &:not(:last-child) {
-        margin-right: 5px;
-      }
-    }
-  }
-`;
-
-export const notifyCard = (theme: Theme) => css`
-  position: relative;
-  display: grid;
-  column-gap: 9px;
-  grid-template-columns: auto 1fr auto;
-  padding: 14px 12px;
-  align-items: flex-start;
-
-  &:not(:last-child) {
-    margin-bottom: 5px;
-  }
-
-  ${theme.mediaQueries.md} {
-    column-gap: 12px;
-    padding: 14px 18px 14px 12px;
-
-    &:not(:last-child) {
-      margin-bottom: 10px;
-    }
-  }
-
-  ${theme.mediaQueries.xs} {
-    padding: 10px 8px;
-  }
-`;
-
-export const notifyBadge = (theme: Theme) => css`
-  display: grid;
-  grid-row: 1 / span 2;
-  height: auto;
-  width: fit-content;
-  padding: 8px;
-  border-radius: 6px;
-  box-shadow: -4px 12px 14px 0 #dae1e1;
-
-  ${theme.mediaQueries.md} {
-    padding: 11px;
-    border-radius: 12px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-`;
-
-export const notifyTitle = (theme: Theme) => css`
-  grid-row: 1;
-  grid-column: 2;
-  margin-bottom: 2px;
-
-  ${theme.mediaQueries.md} {
-    margin-top: -3px;
-    font-size: 16px;
-    line-height: 20px;
-  }
-
-  ${theme.mediaQueries.xs} {
-    grid-row: 2;
-  }
-`;
-
-export const notifyText = (theme: Theme) => css`
-  grid-row: 2;
-  grid-column: 2 / span 3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover {
-    overflow: visible;
-    text-overflow: inherit;
-    white-space: normal;
-  }
-
-  ${theme.mediaQueries.md} {
-    font-size: 13.3px;
-    line-height: 20px;
-    overflow: visible;
-    text-overflow: inherit;
-    white-space: normal;
-  }
-
-  ${theme.mediaQueries.xs} {
-    grid-row: 3;
-  }
-`;
-
-export const notifyTime = (theme: Theme) => css`
-  grid-row: 1;
-  grid-column: 3;
-  text-align: right;
-
-  ${theme.mediaQueries.xs} {
-    grid-column: 2;
-    text-align: left;
-  }
-`;

package/src/components/NotificationCard/types.ts

@@ -1,12 +0,0 @@
-export type NotificationType = 'Informational' | 'Warning' | 'Error';
-
-export interface NotificationCardProps {
-  title: string;
-  text: string;
-  isRead: boolean;
-  type: NotificationType;
-  time: string | number;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-}

package/src/components/NotificationMenu/NotificationMenu.e2e.ts

@@ -1,27 +0,0 @@
-import { test, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const CUSTOM_SHOTS_PATH = './custom-shots/';
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-notificationmenu--default&viewMode=story',
-  );
-};
-
-for (const resolution of Object.keys(SCREEN_SIZES)) {
-  const viewportSize =
-    SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
-  test(`[${resolution}] Widgets: NotificationMenu is opened`, async ({
-    page,
-  }) => {
-    await gotoPage(page);
-    await page.setViewportSize(viewportSize);
-    await page.getByTestId('trigger-button').click();
-
-    const SCREENSHOT_PREFIX = `${CUSTOM_SHOTS_PATH}widgets-notification-menu--is-opened__`;
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
-    });
-  });
-}

package/src/components/NotificationMenu/NotificationMenu.spec.tsx

@@ -1,64 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { within } from '@testing-library/dom';
-import { StoryComponent } from './stories/StoryComponent';
-import { notificationData } from './helpers';
-
-describe('NotificationMenu', () => {
-  it('Renders with button group', async () => {
-    const user = userEvent.setup();
-    const { getByTestId } = render(<StoryComponent />);
-    await user.click(getByTestId('trigger-button'));
-    const buttonGroup = getByTestId('element-wrapper');
-
-    notificationData.groupButtonItems.forEach((item) => {
-      within(buttonGroup).getByRole('button', { name: item.text });
-    });
-  });
-
-  it('Renders with list of notifications', async () => {
-    const user = userEvent.setup();
-    const { getByTestId, getAllByTestId } = render(<StoryComponent />);
-    await user.click(getByTestId('trigger-button'));
-
-    const notificationEls = getAllByTestId('notification');
-    const notificationArr = notificationData.notificationItems;
-
-    expect(notificationEls.length).toBe(notificationArr.length);
-
-    for (let i = 0; i < notificationEls.length; i++) {
-      expect(notificationEls[i]).toHaveTextContent(notificationArr[i].text);
-    }
-  });
-
-  it('Marks all notifications as read after clicking on the button', async () => {
-    const user = userEvent.setup();
-    const { getByRole, getByTestId, queryAllByTestId } = render(
-      <StoryComponent />,
-    );
-    await user.click(getByTestId('trigger-button'));
-
-    const buttonEl = getByRole('button', {
-      name: new RegExp('Mark all as read', 'i'),
-    });
-    await user.click(buttonEl);
-    const unreadBtn = getByRole('button', {
-      name: 'Unread',
-    });
-
-    const indicatorEls = queryAllByTestId('indicator-left');
-
-    expect(indicatorEls.length).toBe(0);
-    expect(unreadBtn).toHaveAttribute('disabled');
-    expect(buttonEl).not.toBeInTheDocument();
-  });
-
-  it('Renders with link button', async () => {
-    const user = userEvent.setup();
-    const { getByRole, getByTestId } = render(<StoryComponent />);
-    await user.click(getByTestId('trigger-button'));
-
-    getByRole('link', {
-      name: new RegExp('View all notification', 'i'),
-    });
-  });
-});

package/src/components/NotificationMenu/NotificationMenu.tsx

@@ -1,77 +0,0 @@
-import { useTheme } from '@emotion/react';
-import {
-  Icon,
-  Popover,
-  PopoverClose,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeading,
-  PopoverTrigger,
-} from '@ssa-ui-kit/core';
-import { NotificationCard } from '@components/NotificationCard';
-import { NotificationMenuProps } from './types';
-import {
-  ResetBtnStyles,
-  Close,
-  ButtonsWrapper,
-  List,
-  Loading,
-  PopoverWrapper,
-  PopoverContentWrapper,
-} from './styles';
-
-export const NotificationMenu = ({
-  trigger,
-  notifications,
-  children,
-  onClick,
-  isLoading,
-  rightButton,
-  leftButton,
-}: NotificationMenuProps) => {
-  const theme = useTheme();
-  return (
-    <Popover placement="bottom-end">
-      <PopoverTrigger onClick={onClick} css={ResetBtnStyles}>
-        {trigger}
-      </PopoverTrigger>
-      <PopoverContent className="popover" css={PopoverWrapper}>
-        <div css={PopoverContentWrapper}>
-          <PopoverClose css={Close}>
-            <Icon name="cross" size={14} color={theme.colors.greyGraphite70} />
-          </PopoverClose>
-          <PopoverHeading variant="h5" weight="bold">
-            Notification
-          </PopoverHeading>
-          <PopoverDescription variant="body1">
-            <div data-testid="element-wrapper">{children}</div>
-            {isLoading ? (
-              <div css={Loading}></div>
-            ) : (
-              <div css={List}>
-                {notifications.map((item, index) => {
-                  return (
-                    <NotificationCard
-                      key={index}
-                      title={item.title}
-                      text={item.text}
-                      type={item.type}
-                      time={item.time}
-                      isRead={item.isRead}
-                    />
-                  );
-                })}
-              </div>
-            )}
-          </PopoverDescription>
-        </div>
-        {rightButton || leftButton ? (
-          <div css={ButtonsWrapper}>
-            {leftButton}
-            {rightButton}
-          </div>
-        ) : null}
-      </PopoverContent>
-    </Popover>
-  );
-};

package/src/components/NotificationMenu/helpers.ts

@@ -1,91 +0,0 @@
-import { ButtonGroupItem } from '@ssa-ui-kit/core';
-import { NotificationCardProps } from '@components/NotificationCard';
-
-export interface DataProps {
-  notificationItems: NotificationCardProps[];
-  groupButtonItems: ButtonGroupItem[];
-}
-
-export const notificationData: DataProps = {
-  groupButtonItems: [
-    { id: 1, text: 'All', isDisabled: false },
-    { id: 2, text: 'Unread', isDisabled: false },
-  ],
-  notificationItems: [
-    {
-      title: 'lorem',
-      text: 'With our newest listing, we’re welcoming Wrapped Bitcoin to innovation Zone! You can now deposit',
-      type: 'Informational',
-      isRead: false,
-      time: Date.now() - 600000,
-    },
-    {
-      title: 'CyberVeinToken is Now Available.',
-      text: 'With our newest listing, we’re welcoming Wrapped',
-      type: 'Warning',
-      isRead: false,
-      time: Date.now() - 1600000,
-    },
-    {
-      title: 'CyberVeinToken is Now Available.',
-      text: 'With our newest listing, we’re welcoming Wrapped',
-      type: 'Warning',
-      isRead: false,
-      time: Date.now() - 1600000,
-    },
-    {
-      title: 'CyberVeinToken is Now Available.',
-      text: 'With our newest listing, we’re welcoming Wrapped',
-      type: 'Error',
-      isRead: true,
-      time: Date.now() - 2600000,
-    },
-
-    {
-      title: 'CyberVeinToken is Now Available.',
-      text: 'With our newest listing, we’re welcoming Wrapped',
-      type: 'Informational',
-      isRead: true,
-      time: Date.now() - 3600000,
-    },
-  ],
-};
-
-export const getMockData = () => {
-  return new Promise<DataProps>((resolve) => {
-    resolve(notificationData);
-  });
-};
-
-export const divideOnSubArr = (arr: Array<NotificationCardProps>) => {
-  return arr.reduce(
-    (acc: Record<string, Array<NotificationCardProps>>, obj) => {
-      if (!obj.isRead) {
-        acc['Unread'].push(obj);
-      }
-      acc['All'] = arr;
-
-      return acc;
-    },
-    { All: [], Unread: [] },
-  );
-};
-
-export const readAll = (arr: Array<NotificationCardProps>) => {
-  return arr.reduce((acc: Array<NotificationCardProps>, item) => {
-    item.isRead = true;
-    return [...acc, item];
-  }, []);
-};
-
-export const disableButton = (
-  arr: Array<ButtonGroupItem>,
-  notifyArr: Array<NotificationCardProps>,
-) => {
-  return arr.reduce((accBtn: Array<ButtonGroupItem>, btn) => {
-    if (!divideOnSubArr(notifyArr)[btn.text].length) {
-      btn.isDisabled = true;
-    }
-    return [...accBtn, btn];
-  }, []);
-};

package/src/components/NotificationMenu/index.ts

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

package/src/components/NotificationMenu/stories/NotificationMenu.stories.tsx

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { NotificationMenu } from '../NotificationMenu';
-import { StoryComponent } from './StoryComponent';
-
-export default {
-  title: 'Widgets/NotificationMenu',
-  component: NotificationMenu,
-} as Meta<typeof NotificationMenu>;
-
-export const Default: StoryObj<typeof NotificationMenu> = () => {
-  return <StoryComponent />;
-};
-
-Default.args = {};

package/src/components/NotificationMenu/stories/StoryComponent.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
-import { Button, ButtonGroup, ButtonGroupItem } from '@ssa-ui-kit/core';
-import { NotificationCardProps } from '@components/NotificationCard';
-import { NotificationMenu } from '../NotificationMenu';
-import { MarkAllReadButton, Trigger } from './StoryContent';
-import {
-  disableButton,
-  divideOnSubArr,
-  getMockData,
-  notificationData,
-  readAll,
-} from '../helpers';
-import { ButtonGroupCustom } from '../styles';
-
-export const StoryComponent = () => {
-  const [notifications, setNotifications] = useState<NotificationCardProps[]>(
-    [],
-  );
-  const [readNotifications, setReadNotifications] = useState<
-    NotificationCardProps[]
-  >([]);
-  const [buttonItems, setButtonItems] = useState<ButtonGroupItem[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  const unreadQty = divideOnSubArr(notifications).Unread.length;
-
-  const handleClickOpen = () => () => {
-    if (!isLoading) return;
-    setButtonItems(notificationData.groupButtonItems);
-    getMockData().then((data) => {
-      setIsLoading(false);
-      setNotifications(data.notificationItems);
-      setReadNotifications(data.notificationItems);
-    });
-  };
-
-  useEffect(() => {
-    handleClickOpen();
-    if (!unreadQty) {
-      setButtonItems(disableButton(buttonItems, notifications));
-    }
-  }, [isLoading]);
-
-  const handleClickReadAll = () => {
-    setReadNotifications(readAll(notifications));
-    setButtonItems(disableButton(buttonItems, notifications));
-  };
-
-  const handleClick = (item: Pick<ButtonGroupItem, 'id' | 'text'>) => {
-    setReadNotifications(divideOnSubArr(notifications)[item.text]);
-  };
-
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <NotificationMenu
-              trigger={<Trigger />}
-              onClick={handleClickOpen()}
-              notifications={readNotifications}
-              leftButton={
-                unreadQty ? (
-                  <MarkAllReadButton onClick={() => handleClickReadAll()} />
-                ) : null
-              }
-              rightButton={
-                <Link to={'/'} css={{ gridColumn: 2 }}>
-                  <Button variant="info" text="View all notification" />
-                </Link>
-              }
-              isLoading={isLoading}>
-              <ButtonGroup
-                items={buttonItems}
-                buttonStyles={ButtonGroupCustom}
-                onClick={(item) => handleClick(item)}
-              />
-            </NotificationMenu>
-          }></Route>
-      </Routes>
-    </MemoryRouter>
-  );
-};

package/src/components/NotificationMenu/stories/StoryContent.tsx

@@ -1,52 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-import { Button, Icon, Indicator } from '@ssa-ui-kit/core';
-import { ResetBtnStyles } from '../styles';
-
-interface CommonNotificationPops {
-  onClick: () => void;
-}
-
-export const Trigger = () => {
-  const theme = useTheme();
-  return (
-    <Indicator
-      position="right"
-      isVisible
-      text={
-        <span
-          css={{
-            fontSize: 10,
-            fontWeight: 600,
-            color: '#fff',
-            minWidth: '12px',
-          }}>
-          2
-        </span>
-      }
-      background={`linear-gradient(90deg, ${theme.colors.yellow} 0%, ${theme.colors.yellowLighter} 100%)`}>
-      <div css={{ padding: '0 5px' }}>
-        <Icon name="notification" size={20} color={theme.colors.greyDarker} />
-      </div>
-    </Indicator>
-  );
-};
-
-export const MarkAllReadButton = ({ onClick }: CommonNotificationPops) => {
-  const theme = useTheme();
-  return (
-    <Button
-      onClick={onClick}
-      variant="tertiary"
-      css={css`
-        ${ResetBtnStyles}
-        span {
-          color: ${theme.colors.blueDark};
-        }
-      `}
-      startIcon={
-        <Icon name="check-circle" size={20} color={theme.colors.blueDark} />
-      }
-      text="Mark all as read"
-    />
-  );
-};