@ssa-ui-kit/widgets 0.0.10-alpha → 0.0.13-alpha

package/src/components/NotificationMenu/NotificationMenu.tsx

@@ -1,77 +1,77 @@
-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>
-          {isLoading ? (
-            <div css={Loading}></div>
-          ) : (
-            <PopoverDescription variant="body1">
-              <div data-testid="element-wrapper">{children}</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>
-  );
-};
+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>
+          {isLoading ? (
+            <div css={Loading}></div>
+          ) : (
+            <PopoverDescription variant="body1">
+              <div data-testid="element-wrapper">{children}</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 +1,91 @@
-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];
-  }, []);
-};
+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 +1,2 @@
-export { NotificationMenu } from './NotificationMenu';
-export * from './types';
+export { NotificationMenu } from './NotificationMenu';
+export * from './types';

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

@@ -1,14 +1,14 @@
-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 = {};
+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,84 +1,84 @@
-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,
-  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;
-    getMockData().then((data) => {
-      setIsLoading(false);
-      setNotifications(data.notificationItems);
-      setReadNotifications(data.notificationItems);
-      setButtonItems(data.groupButtonItems);
-    });
-  };
-
-  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>
-  );
-};
+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,
+  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;
+    getMockData().then((data) => {
+      setIsLoading(false);
+      setNotifications(data.notificationItems);
+      setReadNotifications(data.notificationItems);
+      setButtonItems(data.groupButtonItems);
+    });
+  };
+
+  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 +1,52 @@
-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"
-    />
-  );
-};
+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"
+    />
+  );
+};