@ssa-ui-kit/widgets 0.0.5-alpha → 0.0.7-alpha

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"
+    />
+  );
+};