@omniumretail/component-library 1.2.70 → 1.2.72

package/src/components/BellNotifications/index.tsx

@@ -1,154 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Badge, Dropdown, Menu } from 'antd';
-import { BellOutlined, CheckCircleOutlined, ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons';
-import styles from './styles.module.scss';
-import { useTranslation } from 'react-i18next';
-import { Switch } from '../Switch';
-
-export interface Criticality {
-  Id: string;
-  Name: string;
-  ColorHex: string;
-}
-
-export interface BellNotification {
-  Id: string;
-  Title: string;
-  Description: string;
-  RedirectURL: string;
-  Icon: string;
-  ExpirationDate: number;
-  Criticality: Criticality;
-  IsRead: boolean;
-}
-
-export interface BellNotificationsProps {
-  notifications: BellNotification[];
-  onFilterChange: (filter: 'all' | 'unread') => void;
-  onNotificationClick: (id: string, url: string) => void;
-  handleMarkAllAsRead: () => void;
-}
-
-export const BellNotifications = ({ notifications, onFilterChange, onNotificationClick, handleMarkAllAsRead }: BellNotificationsProps) => {
-  const { t } = useTranslation();
-  const [filter, setFilter] = useState<'all' | 'unread'>('all');
-  const [isShaking, setIsShaking] = useState(false);
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  const unreadCount = notifications.filter((notif) => !notif.IsRead).length;
-
-  const handleNotificationClick = (id: string, url: string) => {
-    onNotificationClick(id, url);
-  }
-
-  const handleFilterChange = (checked: boolean) => {
-    const newFilter = checked ? 'unread' : 'all';
-    setFilter(newFilter);
-    onFilterChange(newFilter);
-  };
-
-  useEffect(() => {
-    if (unreadCount > 0) {
-      const interval = setInterval(() => {
-        setIsShaking(true);
-
-        const stopShakeTimeout = setTimeout(() => setIsShaking(false), 2000);
-
-        return () => clearTimeout(stopShakeTimeout);
-      }, 30000);
-
-      return () => clearInterval(interval);
-    }
-  }, [unreadCount]);
-
-  const optionsMenu = (
-    <Menu>
-      <Menu.Item key="markAllAsRead" onClick={handleMarkAllAsRead}>
-        <CheckCircleOutlined className={styles.checkIconStyle} />
-
-        {t('components.bellNotifications.markAllAsRead')}
-      </Menu.Item>
-    </Menu>
-  );
-
-  const menu = (
-    <Menu className={styles.notificationMenu}>
-
-      {unreadCount > 0 && (
-        <div className={styles.headerContainer}>
-          <div className={styles.switchContainer}>
-            <span>{t('components.bellNotifications.onlyShowNoRead')}</span>
-
-            <Switch
-              checked={filter === 'unread'}
-              onChange={handleFilterChange}
-              size="small"
-            />
-          </div>
-
-          <Dropdown overlayClassName={styles.optionsMenuStyle} overlay={optionsMenu} trigger={['click']}>
-            <MoreOutlined className={styles.moreOutlinedIconStyle} />
-          </Dropdown>
-        </div>
-      )}
-
-      <div className={styles.menuItemContainer}>
-        {notifications.map((notif) => (
-          <Menu.Item
-            key={notif.Id}
-            className={styles.notificationItem}
-            onClick={() => handleNotificationClick(notif.Id, notif.RedirectURL)}
-          >
-            <div className={styles.notificationContent}>
-              {notif.Criticality?.Name === 'High' && (
-                <ExclamationCircleOutlined
-                  className={styles.criticalityIcon}
-                  style={{ color: notif.Criticality?.ColorHex }}
-                />
-              )}
-
-              <img src={notif.Icon} alt="Notification Icon" className={styles.notificationIcon} />
-
-              <div className={styles.notificationText}>
-                <div
-                  className={styles.notificationTitle}
-                >
-                  {notif.Title}
-                </div>
-
-                <div className={styles.notificationDescription}>
-                  {notif.Description}
-                </div>
-              </div>
-
-              {!notif.IsRead && <div className={styles.unreadIndicator}></div>}
-            </div>
-          </Menu.Item>
-        ))}
-      </div>
-
-      {notifications.length === 0 && <Menu.Item disabled>{t('components.bellNotifications.noNotifications')}</Menu.Item>}
-    </Menu>
-  );
-
-  return (
-    <Dropdown placement={isMobile ? undefined : 'topRight'} overlayClassName={styles.dropdownContainer} overlay={menu} trigger={['click']}>
-      <Badge count={unreadCount} className={styles.badgeStyle} overflowCount={99}>
-        <BellOutlined className={`${styles.bellIcon} ${isShaking ? styles.shake : ''}`} />
-      </Badge>
-    </Dropdown>
-  );
-};
-
-export default BellNotifications;

package/src/components/BellNotifications/styles.module.scss

@@ -1,239 +0,0 @@
-.dropdownContainer {
-  position: fixed;
-
-  @media (max-width: 768px) {
-    position: absolute;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    width: 100% !important;
-  }
-}
-
-.notificationMenu {
-  max-height: calc(100vh - 70px);
-  padding: 0 !important;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
-  @media (max-width: 768px) {
-    max-width: 100vw;
-    border-radius: 0;
-  }
-
-  @media (min-width: 768px) {
-    max-width: 500px;
-    max-height: calc(100vh - 100px);
-    transform: translate(25%);
-    margin-block-end: 20px;
-    margin-bottom: 20px !important;
-  }
-}
-
-.optionsMenuStyle {
-  @media (max-width: 768px) {
-    position: absolute;
-  }
-}
-
-.menuItemContainer {
-  overflow-y: auto;
-  max-height: calc(100vh - 200px);
-
-  @media (max-width: 768px) {
-    max-height: calc(100vh - 120px);
-  }
-}
-
-.notificationItem {
-  display: flex;
-  flex-direction: column;
-  align-items: unset !important;
-  padding: 10px;
-  border-bottom: 1px solid #f0f0f0;
-  background-color: #fff !important;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f9f9f9;
-  }
-
-  @media (max-width: 768px) {
-    padding: 8px;
-  }
-}
-
-.headerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 16px;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.moreOutlinedIconStyle {
-  font-size: 20px;
-  cursor: pointer;
-  color: #595959;
-  padding: 4px;
-  border-radius: 4px;
-
-  &:hover {
-    background-color: #e8e8e8;
-  }
-}
-
-.checkIconStyle {
-  color: #FF674C;
-  margin-right: 8px;
-}
-
-.switchContainer {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  span {
-    font-size: 14px;
-    font-weight: 500;
-    color: #595959;
-  }
-}
-
-.notificationContent {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 12px;
-  width: 100%;
-
-  @media (max-width: 768px) {
-    padding-left: 8px;
-  }
-}
-
-.criticalityIcon {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 16px;
-
-  @media (max-width: 768px) {
-    font-size: 12px;
-  }
-}
-
-.notificationIcon {
-  width: 50px;
-  height: 50px;
-  margin-left: 10px;
-  margin-right: 10px;
-  flex-shrink: 0;
-
-  @media (max-width: 768px) {
-    width: 40px;
-    height: 40px;
-    margin-left: 8px;
-    margin-right: 8px;
-  }
-}
-
-.notificationText {
-  flex: 1;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.notificationTitle {
-  font-weight: bold;
-  font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-width: 100%;
-
-  @media (max-width: 768px) {
-    font-size: 12px;
-  }
-}
-
-.notificationDescription {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-width: 100%;
-  font-size: 12px;
-  color: #666;
-  margin-top: 2px;
-
-  @media (max-width: 768px) {
-    font-size: 10px;
-  }
-}
-
-.unreadIndicator {
-  width: 6px;
-  height: 6px;
-  background-color: #1890ff;
-  border-radius: 50%;
-  margin-left: 10px;
-  flex-shrink: 0;
-
-  @media (max-width: 768px) {
-    width: 4px;
-    height: 4px;
-    margin-left: 8px;
-  }
-}
-
-.badgeStyle {
-  :global {
-    .ant-badge-count {
-      font-size: 12px !important;
-      min-width: 16px !important;
-      height: 16px !important;
-      line-height: 16px !important;
-      transform: translate(40%, -50%) !important;
-    }
-  }
-}
-
-.bellIcon {
-  font-size: 26px;
-  cursor: pointer;
-  color: #0033a0;
-
-  @media (min-width: 767px) {
-    color: var(--color-grey-light);
-  }
-}
-
-.shake {
-  animation: shake 1s ease-in-out infinite;
-}
-
-@keyframes shake {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  25% {
-    transform: rotate(10deg);
-  }
-
-  50% {
-    transform: rotate(-10deg);
-  }
-
-  75% {
-    transform: rotate(10deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
-}

package/src/components/Button/Button.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-webpack5";
-import { Button, CustomButtonProps } from '.';
-
-export default {
-    title: 'Button',
-    component: Button,
-} as Meta;
-
-const Template: StoryFn<CustomButtonProps> = (args: any) => <Button {...args}>ola</Button>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    href: '#',
-    iconAlignRight: true,
-    type: 'link',
-    customClass: 'ola'
-};
-
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    href: '#',
-    iconAlignRight: true,
-    type: 'link',
-    ghost: true
-};

package/src/components/Button/index.tsx

@@ -1,24 +0,0 @@
-import { Button as AntButton, ButtonProps } from 'antd';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export interface CustomButtonProps extends ButtonProps {
-    iconAlignRight?: boolean;
-    buttonStyle?: string;
-    customClass?: string;
-}
-
-export const Button = ({customClass, ...props}: CustomButtonProps) => {
-    const { iconAlignRight, buttonStyle } = props;
-
-    const buttonClasses = { 
-        [styles.button]: true,
-        [styles["button--iconPositionStyle"]]: iconAlignRight === true,
-        [styles["button--style1"]]: buttonStyle === "style1",
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        <AntButton { ...props } className={ classNames(buttonClasses) } />
-    );
-};

package/src/components/Button/styles.module.scss

@@ -1,70 +0,0 @@
-.button {
-    padding: 12px 24px;
-    border-radius: 4px;
-    min-width: 170px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    align-self: flex-start;
-    text-decoration: none;
-    border: none;
-    font-size: 14px;
-    line-height: 16.8px;
-    font-weight: 700;
-    font-family: 'Silka', sans-serif;
-    background-color: var(--button-default-background);
-    color: var(--button-default-text-color);
-
-    @media(max-width: 767px) {
-        min-width: 0px;
-    }
-
-    &:hover {
-        background-color: var(--button-default-background-hover-color) !important;
-        color: var(--button-default-text-hover-color) !important;
-    }
-
-    &:disabled,
-    &.disabled {
-        background-color: #C7CAC9 !important;
-        color: var(--button-disabled-default-text-color) !important;
-        pointer-events: none;
-    }
-
-    &--iconPositionStyle {
-        flex-direction: row-reverse;
-        gap: 5px;
-    }
-
-    &--style1 {
-        background-color: var(--button-style-1-background);
-        color: var(--button-style-1-text-color);
-
-        &:hover {
-            background-color: var(--button-style-1-background-hover-color);
-            color: var(--button-style-1-text-hover-color) !important;
-        }
-
-        &:disabled,
-        &.disabled {
-            background-color: var(--button-disabled-background-color);
-            color: var(--button-disabled-default-text-color);
-            pointer-events: none;
-        }
-    }
-}
-
-:global {
-
-    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link:disabled,
-    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link.ant-btn-disabled {
-        color: var(--button-disabled-default-text-color);
-        background-color: #C7CAC9;
-    }
-
-    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link:disabled,
-    :where(.css-dev-only-do-not-override-m4timi).ant-btn-link.ant-btn-disabled {
-        color: var(--button-disabled-default-text-color);
-        background-color: #C7CAC9;
-    }
-}