@omniumretail/component-library 1.2.71 → 1.2.72

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

@@ -1,292 +0,0 @@
-.footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: fixed;
-  bottom: 0px;
-  width: 100%;
-  height: 70px;
-  padding: 0 10px;
-  box-sizing: border-box;
-  z-index: 10;
-  padding-bottom: 2px;
-  background-color: white;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: #e5e7eb;
-    width: 100%;
-  }
-
-  @media (min-width: 767px) {
-    background-color: var(--color-black) !important;
-    padding-bottom: 0px;
-  }
-
-  .navigation {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    @media (min-width: 767px) {
-      width: fit-content;
-      gap: 100px;
-    }
-  }
-
-  .content {
-    font-size: var(--font-size-body-1);
-    color: var(--color-grey-light);
-  }
-
-  .brand {
-    width: 100%;
-    margin-bottom: 4px;
-  }
-
-  .time {
-    margin-left: 8px;
-  }
-
-  .date,
-  .time {
-    display: inline-block;
-  }
-
-  .a2aiLogoImg {
-    max-width: 160px;
-    max-height: 40px;
-  }
-
-  .omniumLogoImg {
-    height: 25px;
-    width: 100px;
-    align-self: flex-end;
-  }
-
-  .navItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-
-    @media (min-width: 767px) {
-      flex-direction: row;
-      gap: 12px;
-      flex: unset;
-    }
-
-    .navIcon {
-      font-size: 26px;
-      color: #0033a0;
-      cursor: pointer;
-
-      @media (min-width: 767px) {
-        color: var(--color-grey-light);
-      }
-    }
-
-    .navText {
-      font-size: 12px;
-      margin-top: 4px;
-      color: #0033a0;
-
-      @media (min-width: 767px) {
-        color: var(--color-grey-light);
-      }
-    }
-  }
-
-  .addButtonContainer {
-    display: flex;
-    justify-content: center;
-    flex: 1;
-
-    @media (min-width: 767px) {
-      flex: unset;
-    }
-
-    .addButton {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      height: 50px;
-      background-color: #0033a0;
-      border-radius: 8px;
-      cursor: pointer;
-
-      @media (min-width: 767px) {
-        background-color: var(--color-grey-light);
-      }
-
-      .addIcon {
-        font-size: 20px;
-        color: white;
-
-        @media (min-width: 767px) {
-          color: #2c2d2e;
-        }
-      }
-    }
-  }
-
-  .notificationContainer {
-    position: relative;
-  }
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed !important;
-  pointer-events: none;
-}
-
-.rotateIcon {
-  transform: rotate(45deg);
-  transition: transform 0.3s ease;
-}
-
-.circularMenu {
-  position: absolute;
-  bottom: 70px;
-  width: 250px;
-  left: 50%;
-  transform: translateX(-52%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  z-index: 999;
-
-  @media (min-width: 767px) {
-    transform: translateX(-67%);
-  }
-}
-
-.circleMenuItem {
-  display: flex;
-  align-items: center;
-  background-color: white;
-  padding: 8px 16px;
-  border-radius: 20px;
-  box-shadow: 0 4px 12px rgba(0, 51, 160, 0.5);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 51, 160, 0.25);
-    background-color: #f8fafc;
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &.disabled {
-    &:hover {
-      transform: none;
-      box-shadow: 0 4px 12px rgba(0, 51, 160, 0.15);
-      background-color: white;
-    }
-  }
-}
-
-.circleMenuIcon {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background-color: #f3f4f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 10px;
-  color: #4b5563;
-
-  .circleMenuItem:hover & {
-    transform: scale(1.1);
-  }
-}
-
-.circleMenuLabel {
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-
-  .circleMenuItem:hover & {
-    color: #1f2937;
-  }
-}
-
-.backButton {
-  display: flex;
-  align-items: center;
-  background: linear-gradient(135deg, #0033a0 0%, #0052cc 100%);
-  color: white;
-  padding: 0px 2px;
-  border-radius: 25px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  box-shadow: 0 4px 12px rgba(0, 51, 160, 0.3);
-  width: 20px;
-  justify-content: center;
-  margin-bottom: 8px;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 51, 160, 0.4);
-  }
-
-  .backIcon {
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-  }
-}
-
-.submenuIndicator {
-  color: #9ca3af;
-  font-size: 12px;
-  margin-left: 4px;
-
-  .circleMenuItem:hover & {
-    color: #0033a0;
-    transform: translateX(2px);
-  }
-}
-
-@keyframes popIn {
-  from {
-    opacity: 0;
-    transform: scale(0.8) translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/src/components/Header/Header.data.ts

@@ -1,26 +0,0 @@
-import { t } from 'i18next';
-import { MenuItem } from './Header.types';
-
-export const getMenuTopList = (
-    onHome: () => void,
-): MenuItem[] => [
-    {
-        name: t('navigation.home'),
-        action: onHome,
-    },
-];
-
-export const getMenuBottomList= (
-    onProfile: () => void,
-    onLogout: () => void,
-    userName?: string,
-): MenuItem[] => [
-    {
-        name: `${t('navigation.profile')}${userName ? ` <span>(${userName})</span>` : ''}`,
-        action: onProfile,
-    },
-    {
-        name: t('navigation.logout'),
-        action: onLogout,
-    }
-];

package/src/components/Header/Header.stories.tsx

@@ -1,236 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { Header } from '.';
-import { HeaderProps } from './Header.types';
-
-export default {
-    title: 'Header',
-    component: Header,
-} as Meta;
-
-const Template: StoryFn<HeaderProps> = (args: any) => <Header {...args}></Header>;
-
-const mockAction = () => {
-    console.log('action');
-}
-
-const homeUrl = 'http://www.google.com';
-const profileUrl = 'http://www.google.pt';
-
-const mockMenu = [
-    {
-        name: "Ciclos de Avaliação",
-        action: () => mockAction(),
-        targetRoute: "cycleslist",
-    },
-    {
-        name: "Questionários",
-        action: () => mockAction(),
-        targetRoute: "questionanaire",
-    },
-    {
-        name: "Análises",
-        action: () => mockAction(),
-        targetRoute: "analyse",
-    },
-    {
-        name: "Relatórios",
-        action: () => mockAction(),
-        targetRoute: "reports",
-        dropdownMenu: [
-            {
-                name: "Análises",
-                action: () => mockAction(),
-                targetRoute: "analyse",
-            },
-            {
-                name: "Análises2",
-                action: () => mockAction(),
-                targetRoute: "analyse2",
-            }
-        ]
-    }
-];
-
-const notifications = [
-        {
-            "Id": "662C390B-A38F-45AB-B97C-2D00F0A8ACAD",
-            "Title": "Creation of an Evaluation Cycle",
-            "Description": "A new evaluation cycle was created. You must answer it.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-            "ExpirationDate": 1736899200,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": true
-        },
-        {
-            "Id": "0AF18720-1C94-48CD-8DF3-D254077E8363",
-            "Title": "Creation of an Evaluation Cycle",
-            "Description": "A new evaluation cycle was created. You must answer it.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-            "ExpirationDate": 1736899200,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": true
-        },
-        {
-            "Id": "0419654F-66FE-41EA-BBA4-D8BB6E3D6B33",
-            "Title": "Creation of an Evaluation Cycle",
-            "Description": "A new evaluation cycle was created. You must answer it.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-            "ExpirationDate": 1736899200,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": true
-        },
-        {
-            "Id": "CC98EDA1-0461-4D08-982E-8424EF4AFB3B",
-            "Title": "Creation of an Evaluation Cycle",
-            "Description": "A new evaluation cycle was created. You must answer it.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-            "ExpirationDate": 1736899200,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "3DB9310A-4BF8-4B90-8D5A-7583473664BB",
-            "Title": "Creation of an Evaluation Cycle",
-            "Description": "A new evaluation cycle was created. You must answer it.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omniumfont.s3.eu-west-1.amazonaws.com/Assets/images/aacp-image.png",
-            "ExpirationDate": 1736899200,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D6FB93EE-3255-42B2-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new user",
-            "Description": "A new user was created in the platform with the mecanographic number 8111.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D6FB96EE-3255-42B2-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new action of inspection",
-            "Description": "A new inspection action was created.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D6FB96EE-3655-42B2-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new action of inspection",
-            "Description": "A new inspection action was created.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D6FB96EE-3255-46B2-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new action of inspection",
-            "Description": "A new inspection action was created.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D9FB96EE-3255-42B2-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new action of inspection",
-            "Description": "A new inspection action was created.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D6FB96EE-5955-42B2-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new action of inspection",
-            "Description": "A new inspection action was created.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        },
-        {
-            "Id": "D6FB96EE-3255-42B7-8EC1-27E7AC3F5249",
-            "Title": "Creation of a new action of inspection",
-            "Description": "A new inspection action was created.",
-            "RedirectURL": "https://www.google.pt",
-            "Icon": "https://omnium-user-images.s3.eu-west-1.amazonaws.com/omniumretail-bigwingame-logotipo-vermelho.svg",
-            "ExpirationDate": 1736985600,
-            "Criticality": {
-                "Id": "F133ED4C-6C72-4CDC-86A1-27A76E6BDE7F",
-                "Name": "High",
-                "ColorHex": "#E05151"
-            },
-            "IsRead": false
-        }
-    ];
-
-export const Primary = Template.bind({});
-Primary.args = {
-    menuList: mockMenu,
-    logout: () => console.log('Logout'), // in here logout from auth0 should be passed
-    homeUrl: homeUrl,
-    profileUrl: profileUrl,
-    userName: 'Diogo Carvalho',
-    pageTitle: 'Page Title',
-    notifications: notifications,
-    companyName: 'a2ai',
-};
-

package/src/components/Header/Header.types.ts

@@ -1,32 +0,0 @@
-import { BellNotification } from "../BellNotifications";
-
-export interface MenuItem {
-    name: string;
-    action: () => void;
-    targetRoute?: string;
-    dropdownMenu?: MenuItem[];
-}
-
-export interface actionButton {
-    element?: any; // the client wants to be able to get a icon here
-    action?: () => void;
-    visibility?: boolean;
-}
-
-export interface HeaderProps {
-    actionButton?: actionButton;
-    menuList?: MenuItem[];
-    logout?: () => void;
-    homeUrl: string;
-    profileUrl: string;
-    onLeavingPage?: (targetRoute: string) => void;
-    userName?: string;
-    pageTitle?: string;
-    onFilterChange?: (filter: 'all' | 'unread') => void;
-    onNotificationClick?: (id: string, url: string) => void;
-    handleMarkAllAsRead?: () => void;
-    notifications?: BellNotification[];
-    shouldConfirmNavigation?: boolean;
-    companyName?: string;
-    customLogoClass?: string;
-}

package/src/components/Header/README.md

@@ -1,38 +0,0 @@
-# Header Component
-
-The `Header` component renders a navigation header with support for dropdown menus, dynamic routing, and an action button. It also supports conditional rendering based on user login and profile URL.
-
-## Props
-
-### `HeaderProps`
-
-- `actionButton` (optional): An object with the following properties:
-  - `element`: A React component to be rendered as the action button (e.g., an icon).
-  - `action`: A function to be called when the action button is clicked.
-  - `visibility`: A boolean indicating whether the action button should be visible.
-- `menuList` (optional): An array of menu items, where each item is an object with the following properties:
-  - `name`: The name of the menu item, which can include HTML content.
-  - `action`: A function to be called when the menu item is clicked.
-  - `targetRoute` (optional): The target route for the menu item.
-  - `dropdownMenu` (optional): An array of sub-menu items with the same structure.
-- `logout` (optional): A function to be called when the user logs out.
-- `homeUrl`: A string representing the URL for the home page.
-- `profileUrl`: A string representing the URL for the profile page.
-- `onLeavingPage` (optional): A function to be called before navigating away from the current page, with the target route as an argument. that is an example here: [APE Example](https://bitbucket.org/product_admin/staffperformanceevaluationcycle-restapi-omnium/src/master/frontend/src/Layout/index.tsx).
-- `userName` (optional): A string representing the user's name, displayed next to the "Profile" menu item.
-- `pageTitle` (optional): A string representing the page title, displayed in the header.
-
-### Explanation of Code
-
-#### State and Refs:
-- `isMenuOpen`: Manages the state of the menu (open/closed).
-- `activeDropdown`: Manages the state of the active dropdown menu.
-- `headerRef` and `overlayRef`: Used for referencing the header and overlay elements.
-
-#### Helper Functions:
-- `onLogout`: Handles the logout functionality. If a logout function is provided, it is called; otherwise, it navigates to the home page.
-- `onProfile`: Navigates to the profile URL.
-- `onHome`: Navigates to the home URL.
-- `onToggleMenu`: Toggles the menu open and closed state.
-- `handleDropdownClick`: Toggles the active state of the dropdown menus.
-- `renderMenu`: Renders the menu items, including handling clicks for navigation and dropdown menus.