@inceptionbg/iui 2.0.11 → 2.0.12

package/src/components/Table/components/templates/TableTemplates.tsx

@@ -0,0 +1,81 @@
+import { useState, type FC } from 'react';
+import { IconButton } from '../../../Button/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useTableContext } from '../../contexts/TableContext';
+import { faBookmark, faBookmarkSlash } from '../../../../assets/icons';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { Pullover } from '../../../Pullover/Pullover';
+
+export const TableTemplates: FC = () => {
+  const { t } = useTranslation();
+  const { templates } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('Templates')}
+        icon={faBookmark}
+        active={control.isOpen}
+        onClick={onOpen}
+        size="s"
+        variant="outlined"
+      />
+
+      <Pullover
+        control={control}
+        header={{
+          title: t('Templates'),
+          onSearch: templates?.setSearch,
+        }}
+        // onFormSubmit={() => {
+        //   const data = deleteEmptyPropsIncludingArray(searchData);
+        //   onSearch?.(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
+        //   onClose();
+        // }}
+        footer={{
+          confirmButton: {
+            label: t('ApplyTemplate'),
+            type: 'submit',
+          },
+          additionalButton: {
+            label: t('ResetTemplate'),
+            icon: faBookmarkSlash,
+            onClick: () => {
+              //   setSearchData?.(defaultSearch);
+              //   onSearch?.(defaultSearch);
+              //   onClose();
+            },
+            // disabled: defaultSearch
+            //   ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
+            //   : Object.keys(searchData).length === 0,
+          },
+        }}
+        // contentClassName="iui-filters-list"
+        onCloseCallback={() => templates?.setSearch?.('')}
+        size="w600"
+      >
+        Templates
+        {templates?.items.map(item => (
+          <div key={item.uuid}>{item.name}</div>
+        ))}
+      </Pullover>
+    </>
+    // <Menu
+    //   isOpen={isMenuOpen}
+    //   onClose={onMenuClose}
+    //   renderButton={ref => (
+    //     <Tooltip label={t('Templates')} ref={ref}>
+    //       <IconButton
+    //         icon={faBookmark}
+    //         active={isMenuOpen}
+    //         onClick={onMenuOpen}
+    //         size="s"
+    //         variant="outlined"
+    //       />
+    //     </Tooltip>
+    //   )}
+    //   items={templates?.menuItems}
+    // />
+  );
+};

package/src/components/Table/hooks/useTablePrint.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { IGetPrintData, IPrintData } from '../../../types/ITable';
+import { usePopupControl } from '../../../hooks/usePopupControl';
+
+type Props<T> = {
+  getPrintData: IGetPrintData<T>;
+  totalRows?: number;
+};
+
+const limit = 1000;
+const defaultData = { items: [], totalRows: 0 };
+
+export const useTablePrint = <T>({
+  getPrintData,
+  totalRows: initialTotalRows = 0,
+}: Props<T>) => {
+  const printPopupControl = usePopupControl();
+
+  const [data, setData] = useState<{ items: T[]; totalRows: number }>(defaultData);
+  const [offset, setOffset] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (printPopupControl.control.isOpen) {
+      setIsLoading(true);
+      setOffset(0);
+    }
+    return () => {
+      setIsLoading(false);
+      setData(defaultData);
+      setOffset(0);
+    };
+  }, [printPopupControl.control.isOpen]);
+
+  useEffect(() => {
+    if (printPopupControl.control.isOpen) {
+      getPrintData({
+        pagination: { limit, offset },
+        noTotalRows: !!initialTotalRows || offset > 0,
+      })
+        .then(({ items, totalRows: newTotalRows }) => {
+          setData(prevState => {
+            const newData = offset === 0 ? items : prevState.items.concat(items);
+            const totalRows =
+              newTotalRows || initialTotalRows || prevState.totalRows || 0;
+
+            if (items?.length === limit) {
+              setOffset(offset => offset + 1);
+            } else {
+              setIsLoading(false);
+            }
+
+            return { items: newData, totalRows };
+          });
+        })
+        .catch(() => setIsLoading(false));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [printPopupControl.control.isOpen, initialTotalRows, offset]);
+
+  const loaded = data.items.length;
+  const progress = data.totalRows ? (loaded / data.totalRows) * 100 : 0;
+
+  const printData: Pick<
+    IPrintData<T>,
+    'printPopupControl' | 'isLoading' | 'progress' | 'items'
+  > = {
+    printPopupControl,
+    isLoading,
+    progress,
+    items: data.items ?? [],
+  };
+
+  return printData;
+};

package/src/index.ts

@@ -22,6 +22,7 @@ import type { IError } from './types/IError';
 import type { ISelectData } from './types/ISelect';
 import type { ITab } from './types/ITab';
 import type {
+  IGetPrintData,
   IPagination,
   IPaginationControl,
   ITable,
@@ -70,7 +71,9 @@ import {
   SelectCreatable,
 } from './components/Inputs/Selects/Select';
 import { TextInput } from './components/Inputs/TextInput';
+import { List } from './components/List/List';
 import { FullScreenLoader, LazyLoader, Loader } from './components/Loader/Loader';
+import { ProgressBar } from './components/Loader/ProgressBar';
 import { Menu } from './components/Menu/Menu';
 import { MenuItem } from './components/Menu/MenuItem';
 // import { ItemActionsMenu } from './components/Table/Components/Edit/ItemActionsMenu';
@@ -97,6 +100,7 @@ import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate'
 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 { useTableSelect } from './components/Table/hooks/useTableSelect';
 import { useTableSort } from './components/Table/hooks/useTableSort';
@@ -196,12 +200,14 @@ export {
   TextAreaInput,
   LazyLoader,
   Loader,
+  List,
   Menu,
   MenuItem,
   NotificationBadge,
   NumberInput,
   PageLayout,
   PasswordInput,
+  ProgressBar,
   Pullover,
   PillBadge,
   Radio,
@@ -230,6 +236,7 @@ export {
   useTableEdit,
   useTableFilterFields,
   useTablePagination,
+  useTablePrint,
   useTableSearch,
   useTableSelect,
   useTableSort,
@@ -267,6 +274,7 @@ export type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  IGetPrintData,
   ITreeItem,
   IValueLabel,
   IconDefinition,

package/src/styles/App.scss

@@ -25,11 +25,13 @@
 @use './components/inputDateTime';
 @use './components/inputRadio';
 @use './components/inputSelect';
+@use './components/list';
 @use './components/loader';
 @use './components/menu';
 @use './components/page';
 @use './components/portal';
 @use './components/print';
+@use './components/progressBar';
 @use './components/pullover';
 @use './components/scrollbar';
 @use './components/sidebar';

package/src/styles/common/_animations.scss

@@ -24,20 +24,14 @@
   }
 }
 
-// @keyframes linear-progress {
-//   0% {
-//     background-size: 200% 100%;
-//     background-position: left -31.25% top 0%;
-//   }
-//   50% {
-//     background-size: 800% 100%;
-//     background-position: left -49% top 0%;
-//   }
-//   100% {
-//     background-size: 400% 100%;
-//     background-position: left -102% top 0%;
-//   }
-// }
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
 
 @keyframes auto-fill {
   to {

package/src/styles/common/helpers/_base.scss

@@ -49,7 +49,3 @@ a {
 .hover-neutral:hover {
   background-color: var(--neutral-hover);
 }
-
-.no-border {
-  border: none !important;
-}

package/src/styles/components/_header.scss

@@ -21,6 +21,7 @@
   }
 }
 
+///// Modules /////
 .module-name {
   display: flex;
   align-items: center;
@@ -32,15 +33,25 @@
     background-color: var(--neutral-hover);
   }
 }
-.module-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  padding: 8px;
-  border-radius: 8px;
-  .menu-item-label {
-    font-weight: 600;
+.modules-menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 8px !important;
+  @media #{bp.$mobile} {
+    grid-template-columns: 1fr;
+  }
+  .module-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    .menu-item-label {
+      font-weight: 600;
+      white-space: pre-line;
+      text-align: center;
+    }
   }
 }
 .module-item .menu-item-icon,
@@ -59,6 +70,7 @@
   }
 }
 
+///// User Box /////
 .user-box {
   display: flex;
   align-items: center;

package/src/styles/components/_list.scss

@@ -0,0 +1,40 @@
+.iui-list {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .iui-list-item {
+    border: var(--border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    p {
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .iui-list-item-desc {
+      display: flex;
+      line-height: 1.5;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--neutral);
+      margin-top: 4px;
+    }
+    &.disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    &:not(.disabled) {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--neutral-hover);
+      }
+      &.active {
+        background-color: var(--primary);
+        color: var(--text-inverse);
+        .iui-list-item-desc {
+          color: var(--neutral-300);
+        }
+      }
+    }
+  }
+}

package/src/styles/components/_loader.scss

@@ -35,8 +35,10 @@
 }
 
 .empty-loader {
-  height: 60px;
   width: 100%;
+  .loader {
+    min-height: fit-content;
+  }
 }
 
 .full-page-loader {

package/src/styles/components/_menu.scss

@@ -22,6 +22,24 @@
 }
 
 .iui-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  user-select: none;
+  .menu-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text);
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+  .menu-item-label {
+    width: 100%;
+  }
   &.clickable:hover:not(:disabled):not(.disabled):not(.active) {
     background-color: var(--neutral-hover);
   }
@@ -29,30 +47,13 @@
     transition: none;
     background-color: var(--primary);
     color: var(--text-inverse);
-    .menu-item-content .menu-item-icon {
+    .menu-item-icon {
       color: var(--text-inverse);
     }
   }
   &.with-devider:not(:last-child) {
     border-bottom: var(--border);
   }
-  .menu-item-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    user-select: none;
-    .menu-item-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text);
-      svg {
-        height: 16px;
-        width: 16px;
-      }
-    }
-  }
   .menu-item-badge {
     top: -3px;
     right: -3px;

package/src/styles/components/_print.scss

@@ -1,14 +1,6 @@
-.iui-print-dialog {
-  position: absolute;
-  z-index: 2000;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  min-height: 100vh;
-  width: 100%;
-  animation: fade-in 200ms forwards;
-  & > .content {
+.iui-print {
+  padding: 0 !important;
+  & > .print-content {
     background: #fefefe;
     padding: 10px 50px 60px 50px;
     p,
@@ -24,46 +16,17 @@
       margin-bottom: 5px;
     }
   }
-  @media print {
-    .content {
-      padding: 0;
-    }
-  }
-}
-.iui-print-actions {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 50px;
-  background-color: #fefefe;
-  box-shadow: var(--container-shadow);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .print-table {
-  @media print and (orientation: landscape) {
-    width: 842pt;
-  }
-  @media print and (orientation: portrait) {
-    width: 595pt;
-  }
-  // font-size: 10pt;
+  border-spacing: 0px;
+  border-collapse: collapse;
   thead tr {
     background: #f1f1f1;
   }
-  th {
-    padding: 5px;
-    border: 1px solid silver;
-    p {
-      // font-size: 10pt;
-      padding: 4px 8px !important;
-    }
-  }
+  th,
   td {
-    padding: 3px;
+    padding: 4px;
     border: 1px solid silver;
   }
 }
@@ -72,14 +35,41 @@
   @page {
     margin: 6.5mm;
   }
+
+  @media (orientation: landscape) {
+    .iui-print {
+      width: 842pt;
+    }
+  }
+  @media (orientation: portrait) {
+    .iui-print {
+      width: 595pt;
+    }
+  }
+  .pullover {
+    position: static !important;
+    overflow: visible !important;
+  }
+  .iui-print {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    background: white !important;
+    overflow: visible !important;
+    .print-content {
+      padding: 0 !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+  }
   #root,
   .no-print {
-    display: none;
+    display: none !important;
   }
   body {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
-    //   overflow: visible !important;
+    overflow: visible !important;
   }
   tbody td {
     white-space: pre-wrap !important;

package/src/styles/components/_progressBar.scss

@@ -0,0 +1,83 @@
+.progress-bar-container {
+  width: 100%;
+  max-width: 400px;
+  margin: auto;
+}
+
+.progress-label {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: var(--text);
+}
+
+.progress-bar-bg {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  background: var(--neutral-200);
+  border-radius: 16px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-bar-fill {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary-400) 0%, var(--primary-600) 100%);
+  transition: width 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
+  overflow: hidden;
+
+  // Subtle shimmer animation to show activity
+  &.loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 80%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.3) 50%,
+      transparent 100%
+    );
+    animation: shimmer 2s ease-in-out infinite;
+  }
+}
+
+.progress-bar-text {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--text);
+  border-radius: 32px;
+  padding: 0 8px;
+  pointer-events: none;
+  z-index: 1;
+  position: relative;
+
+  // White text overlay that shows only where progress bar is
+  &::after {
+    content: var(--progress-text, '');
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    clip-path: polygon(
+      0 0,
+      var(--progress-clip, 0%) 0%,
+      var(--progress-clip, 0%) 100%,
+      0 100%
+    );
+    transition: clip-path 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
+  }
+}