@inceptionbg/iui 2.0.15 → 2.0.17

package/src/index.ts

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { ToastContainer } from 'react-toastify';
 
 import type { IFormWrapper } from './components/Wrappers/FormWrapper';
@@ -17,14 +17,21 @@ import type {
 } from './types/IBasic';
 import type { IKeyboardAction } from './types/IKeyboard';
 import type { IMenuItem, IMenuPlacement } from './types/IMenu';
-import type { PopupControlRef, IPopupControl } from './types/IPopup';
+import type { IPopupControlRef, IPopupControl, ILocalPopupControl } from './types/IPopup';
 import type { IError } from './types/IError';
+import type {
+  INotification,
+  // INotificationType,
+  // INotificationValueKey,
+} from './types/INotifications';
+import type { INotificationsProps } from './components/Header/Components/Notifications';
 import type { ISelectData } from './types/ISelect';
 import type { ITab } from './types/ITab';
 import type {
   IGetPrintData,
   IPagination,
   IPaginationControl,
+  IPrintData,
   ITable,
   ITableColumn,
   ITableDataActions,
@@ -34,6 +41,7 @@ import type {
   ITableFilter,
   ITableFilterData,
   ITableFilterItem,
+  ITableItemDeleteData,
   ITableSort,
   ITableTemplateData,
   IReportTemplate,
@@ -95,6 +103,7 @@ import { Pullover } from './components/Pullover/Pullover';
 
 ///// TABLE /////
 import { Table } from './components/Table/Table';
+import { CreateTemplateDialog } from './components/Table/components/templates/CreateTemplateDialog';
 // import { ItemEditOptionsButtons } from './components/Table/Components/Edit/ItemEditOptionsButtons';
 // import { TableEditRow } from './components/Table/Components/Edit/TableEditRow';
 // import { FilterItem } from './components/Table/Components/FilterItem';
@@ -107,7 +116,10 @@ import { useTableEdit } from './components/Table/hooks/useTableEdit';
 import { useTableFilterFields } from './components/Table/hooks/useTableFilterFields';
 import { useTablePagination } from './components/Table/hooks/useTablePagination';
 import { useTablePrint } from './components/Table/hooks/useTablePrint';
-import { useTableSearch } from './components/Table/hooks/useTableSearch';
+import {
+  useTableSearch,
+  type ITableSearchProps,
+} from './components/Table/hooks/useTableSearch';
 import { useTableSelect } from './components/Table/hooks/useTableSelect';
 import { useTableSort } from './components/Table/hooks/useTableSort';
 
@@ -234,6 +246,7 @@ export {
 
 export {
   Table,
+  CreateTemplateDialog,
   // SetTableFilter,
   // GridTable,
   // TablePrint,
@@ -259,18 +272,22 @@ export type {
   IKeyboardAction,
   IMenuItem,
   IMenuPlacement,
-  PopupControlRef,
-  IPopupControl as IPopupControl,
+  IPopupControlRef as PopupControlRef,
+  IPopupControl,
+  ILocalPopupControl,
   IError,
   IFormWrapper,
   IHeaderAction,
   IHeaderUserMenuProps,
+  INotification,
+  INotificationsProps,
   IPagination,
   ISelectData,
   IPaginationControl,
   ISimpleObject,
   ISimpleObjectWithCode,
   IStringObject,
+  IPrintData,
   ITab,
   ITable,
   ITableColumn,
@@ -280,7 +297,9 @@ export type {
   ITableEdit,
   ITableFilter,
   ITableFilterData,
+  ITableSearchProps,
   ITableFilterItem,
+  ITableItemDeleteData,
   ITableSort,
   ITableTemplateData,
   IReportTemplate,

package/src/styles/App.scss

@@ -29,6 +29,7 @@
 @use './components/list';
 @use './components/loader';
 @use './components/menu';
+@use './components/notifications';
 @use './components/page';
 @use './components/portal';
 @use './components/print';

package/src/styles/components/_badge.scss

@@ -15,9 +15,15 @@
   padding: 0 4px;
   &.primary {
     color: var(--text-inverse);
-    border: 2px solid white;
+    border: 2px solid var(--background);
     background-color: var(--primary);
   }
+  &.header-btn-badge {
+    border: 1px solid var(--primary);
+    background-color: var(--danger);
+    right: 4px;
+    top: 4px;
+  }
   // SIZES
   &.s {
     font-size: 10px;
@@ -36,6 +42,7 @@
   border-radius: 20px;
   width: fit-content;
   font-size: 12px;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
   &.success {
     background-color: var(--success-200);
   }

package/src/styles/components/_header.scss

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px 0 8px;
+  padding-left: 8px;
   box-sizing: border-box;
   z-index: 2;
   .header-button {
@@ -20,8 +20,14 @@
     circle {
       fill: var(--white);
     }
+    svg {
+      height: 24px !important;
+      width: 24px !important;
+      color: var(--white);
+    }
     &:hover,
     &.active {
+      // background-color: var(--primary-600);
       background-color: var(--neutral-hover);
       circle {
         fill: var(--primary);
@@ -91,6 +97,10 @@
   gap: 8px;
   height: var(--header-height);
   position: relative;
+  border-radius: 32px;
+  padding-left: 8px;
+  // margin-left: -8px;
+  padding-right: 24px;
   cursor: pointer;
   user-select: none;
   -webkit-user-drag: none;
@@ -118,13 +128,13 @@
       text-overflow: ellipsis;
     }
   }
-  .user-badge {
-    min-height: 10px;
-    max-height: 10px;
-    min-width: 10px;
-    max-width: 10px;
-    background: var(--danger);
-    border-radius: 50px;
+  .user-notif-badge {
+    border: 1px solid var(--primary);
+    background-color: var(--danger);
+    right: -5px;
+  }
+  &:hover {
+    background-color: var(--primary-600);
   }
 }
 .header-user-menu {

package/src/styles/components/_list.scss

@@ -35,7 +35,7 @@
       cursor: default;
       opacity: 0.5;
     }
-    &:not(.disabled) {
+    &.clickable:not(.disabled) {
       cursor: pointer;
       &:hover {
         background-color: var(--neutral-hover);

package/src/styles/components/_notifications.scss

@@ -0,0 +1,71 @@
+.notification-button svg {
+  color: var(--primary);
+  .fa-secondary {
+    opacity: 1;
+    fill: #ffaa33;
+    stroke: #544417;
+    stroke-width: 30px;
+    stroke-opacity: 0.5;
+  }
+}
+
+.notifications {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100dvh - var(--header-height) - 40px);
+  padding: 16px;
+  max-width: min(500px, 90vw);
+  .notifications-content-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+    .iui-input-container {
+      width: unset;
+    }
+  }
+  .notifications-options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    border-bottom: var(--border);
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+  }
+  .notifications-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .notification {
+    cursor: default;
+    padding: 12px;
+    border-radius: 8px;
+    .notification-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 16px;
+      .title {
+        color: var(--primary-dark);
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .date {
+        color: var(--neutral);
+        font-size: 11px;
+        margin: 4px 0;
+      }
+    }
+    .desc {
+      font-size: 13px;
+    }
+    &:hover:not(:has(button:hover:not(:disabled))) {
+      background-color: var(--neutral-100);
+    }
+  }
+}

package/src/styles/components/_page.scss

@@ -48,6 +48,7 @@
   min-height: 55px;
   max-height: 55px;
   box-shadow: var(--container-shadow);
+  z-index: 10;
 
   @media #{bp.$mobileTablet} {
     .breadcrumbs {

package/src/styles/components/_pullover.scss

@@ -22,7 +22,6 @@ $fixedWidth: (500, 600);
       display: flex;
       flex-direction: column;
       height: 100dvh;
-      overflow: auto;
       overscroll-behavior: none;
     }
   }
@@ -74,6 +73,7 @@ $fixedWidth: (500, 600);
     z-index: 2;
   }
   .pullover-header {
+    padding-right: 16px;
     justify-content: space-between;
     .search-input {
       width: min(250px, 50vw);

package/src/styles/components/_sidebar.scss

@@ -21,14 +21,12 @@
     right: -16px;
     border-radius: 50%;
     background-color: white;
-    height: 32px;
-    width: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.15s ease-in-out;
     border: 1px solid var(--primary);
-    z-index: 2;
+    z-index: 11;
     &:active {
       transform: translateY(2px);
     }

package/src/styles/components/_table.scss

@@ -9,6 +9,8 @@ table {
   thead {
     z-index: 2;
     background-color: var(--neutral-100);
+    // background-color: var(--primary);
+    // color: var(--text-inverse);
     tr:first-child th {
       border-top: var(--borderlight);
     }
@@ -16,13 +18,15 @@ table {
   th {
     padding: 4px 12px;
     font-weight: bold;
+    height: 40px;
     p {
       font-size: 12px;
     }
   }
   .table-container {
     overflow: auto;
-    scroll-snap-type: y proximity;
+    // scroll-snap-type: x proximity;
+    // scroll-snap-type: y proximity;
     // box-shadow: var(--container-shadow);
     &::-webkit-scrollbar {
       width: 8px;
@@ -33,19 +37,32 @@ table {
     top: 0;
     z-index: 1;
   }
-
   //// Body ////
   // Row
-  tr {
-    scroll-snap-align: start;
-  }
+  // tr,
+  // td {
+  //   scroll-snap-align: start;
+  // }
   tbody tr {
     &.clickable:hover,
     &.selected {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: #f2f2f2;
+      .sticky-column {
+        background-color: #f2f2f2;
+      }
+    }
+    &:has(.iui-icon-btn:hover),
+    &:has(a:hover) {
+      background-color: transparent !important;
+      .sticky-column {
+        background-color: var(--background) !important;
+      }
     }
     &.focused {
       background-color: var(--primary-100);
+      .sticky-column {
+        background-color: var(--primary-100);
+      }
     }
     &.loading {
       opacity: 0.5;
@@ -65,6 +82,7 @@ table {
     font-size: 14px;
     height: 48px;
     padding: 6px 12px;
+    // background-color: var(--background);
     &.s {
       height: 40px;
       padding: 2px 12px;
@@ -74,8 +92,8 @@ table {
       padding: 2px 12px;
     }
   }
-  .clickable-column:hover {
-    background-color: var(--primary-o10) !important;
+  .clickable-cell:hover {
+    background-color: var(--primary-100) !important;
   }
   // Item Actions
   .table-item-actions {
@@ -134,13 +152,30 @@ table {
   }
 
   @media #{bp.$landscape} {
+    thead {
+      box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2);
+    }
     td,
     th {
       border-right: var(--border-light);
       &:first-child:not(.not-first-cell) {
         border-left: var(--border-light);
       }
+      &.sticky-column {
+        position: sticky;
+        left: 0;
+        transition: background-color 250ms;
+        // box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2);
+      }
+    }
+    th.sticky-column {
+      top: 0;
+      background-color: var(--neutral-100);
     }
+    td.sticky-column {
+      background-color: var(--background);
+    }
+
     .select-col,
     .actions-col {
       padding: 0;
@@ -204,49 +239,73 @@ table {
 .table-sort-item {
   flex-direction: row-reverse;
 }
-// .dual-list-container {
-//   .dual-list-content {
-//     display: grid;
-//     grid-template-columns: 1fr auto 1fr;
-//     gap: 12px;
-//   }
-//   .list-box {
-//     border: var(--border-light);
-//     border-radius: 16px;
-//     padding: 10px;
-//     user-select: none;
-//     & > .item {
-//       display: flex;
-//       justify-content: space-between;
-//       align-items: center;
-//       padding: 8px;
-//       font-size: 12px;
-//       svg {
-//         color: rgba(0, 0, 0, 0.6);
-//         margin-left: 1rem;
-//       }
-//       &:hover {
-//         background-color: var(--primary-o10);
-//       }
-//       &:active {
-//         background-color: var(--primary-o25);
-//       }
-//     }
-//   }
-//   .exchange-icon {
-//     display: flex;
-//     align-items: center;
-//     svg {
-//       height: 20px;
-//       width: 20px;
-//     }
-//   }
-// }
+
+.column-pullover {
+  .pullover-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .dual-list-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .dual-list-content {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      grid-template-rows: auto auto 1fr;
+      gap: 16px 12px;
+      flex: 1;
+      min-height: 0;
+    }
+    .list-box {
+      border: var(--border-light);
+      border-radius: 8px;
+      padding: 8px;
+      user-select: none;
+      overflow-y: auto;
+
+      & > .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        font-size: 14px;
+        svg {
+          color: var(--text);
+          margin-left: 1rem;
+        }
+        &:hover {
+          background-color: var(--primary-o10);
+        }
+        &:active {
+          background-color: var(--primary-o25);
+        }
+        &.dragging {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          background-color: #fff !important;
+        }
+      }
+    }
+    .exchange-icon {
+      display: flex;
+      align-items: center;
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+}
 
 .edit-row {
   background: var(--neutral-100);
   td {
-    padding: 4px;
+    &.editable {
+      padding: 4px;
+    }
     .iui-input-wrapper-field {
       // border: none;
       // border-radius: 0;
@@ -258,16 +317,10 @@ table {
   }
 }
 
-// .primary-row {
-//   background-color: var(--primary-100);
-// }
+.primary-row {
+  background-color: var(--primary-100);
+}
+
 // .secondary-row {
 //   background-color: #f1f1f1;
 // }
-
-// .table-options {
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-//   padding: 8px;
-// }

package/src/styles/variables/_variables.scss

@@ -112,8 +112,17 @@
   --neutral-700: hsl(351, 0%, 31%);
   --neutral-t: rgba(16, 24, 40, 0.5);
 
+  // --danger-100: #fceae8;
+  // --danger-200: #f7d7d4;
+  // --danger-300: #dc776f;
+  // --danger-400: #de4f45;
+  // --danger-500: #d92d20;
+  // --danger-600: #c5261b;
+  // --danger-700: #a11b12;
+
   --primary: var(--primary-500);
   --neutral: var(--neutral-500);
+  --danger: var(--danger-500);
 
   --text: var(--neutral-700);
   --text-disabled: var(--neutral-400);

package/src/types/IHeader.ts

@@ -22,7 +22,7 @@ export type IHeaderUserMenuProps = {
   userName?: string;
   organizationName?: string;
   menuItems: IMenuItem[];
-  showBadge?: boolean;
+  inviteCount?: number;
   controls: {
     myAccountControl: IPopupControl;
     changeOrgControl: IPopupControl;

package/src/types/IKeyboard.ts

@@ -13,11 +13,6 @@ export interface IKeyboardAction {
 export interface ITableKeyboardActionsBase {
   moveDisabled?: boolean;
   editDisabled?: boolean;
-  delete?: {
-    enabled: boolean;
-    setItemToDeleteUuids: (itemUuids: string[]) => void;
-    onAction?: () => void;
-  };
   additional?: (props: {
     focusedRow: ITableDataItem | null;
     isEditing: boolean;

package/src/types/IMenu.ts

@@ -1,5 +1,5 @@
-import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
-import { MouseEventHandler } from 'react';
+import type { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
+import type { MouseEventHandler } from 'react';
 
 export type IMenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 

package/src/types/INotifications.ts

@@ -0,0 +1,15 @@
+export interface INotification {
+  uuid: string;
+  type: INotificationType;
+  values?: {
+    key: string;
+    value: string;
+    url?: string;
+    format?: 'TRANSLATE' | 'DATE' | 'DATE_TIME';
+  }[];
+  seen: boolean;
+  event: string;
+  organization?: string;
+  createdAt: string;
+}
+export type INotificationType = 'WEB' | 'EMAIL';

package/src/types/IPopup.ts

@@ -1,12 +1,12 @@
 import { RefObject } from 'react';
 
-export interface PopupControlRef {
+export interface IPopupControlRef {
   onOpen: () => void;
   onClose: () => void;
 }
 
 export interface ILocalPopupControl {
-  controlRef: RefObject<PopupControlRef | null>;
+  controlRef: RefObject<IPopupControlRef | null>;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
 }