@inceptionbg/iui 2.0.4 → 2.0.6

package/src/index.ts

@@ -0,0 +1,324 @@
+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 { ToastContainer } from 'react-toastify';
+
+import type { IFormWrapper } from './components/Wrappers/FormWrapper';
+import type {
+  DeepPartial,
+  IAnyObject,
+  IBooleanObject,
+  ISimpleObject,
+  ISimpleObjectWithCode,
+  IStringObject,
+  IValueLabel,
+} from './types/IBasic';
+import type { IKeyboardAction } from './types/IKeyboard';
+import type { IMenuItem, IMenuPlacement } from './types/IMenu';
+import type { IError } from './types/IError';
+import type { ISelectData } from './types/ISelect';
+import type { ITab } from './types/ITab';
+import type {
+  IPagination,
+  IServerSidePagination,
+  ITable,
+  ITableColumn,
+  ITableDataItem,
+  ITableEditRow,
+  ITableFilter,
+  ITableFilterData,
+  ITableFilterItem,
+  ITableSort,
+} from './types/ITable';
+import type { ITreeItem } from './types/ITree';
+import type { IHeaderAction, IHeaderUserMenuProps } from './types/IHeader';
+import { tableCustomLimit1000 } from './types/ITable';
+
+import type { IRoute } from './types/IRouter';
+import { Router } from './components/Router/Router';
+
+import { Accordions } from './components/Accordions/Accordions';
+import { Alert, IAlertProps } from './components/Alert/Alert';
+import { DotBadge } from './components/Badge/DotBadge';
+import { NotificationBadge } from './components/Badge/NotificationBadge';
+import { PillBadge } from './components/Badge/PillBadge';
+import { Button } from './components/Button/Button';
+import { IconButton } from './components/Button/IconButton';
+import { Dashboard } from './components/Dashboard/Dashboard';
+import { DashboardWidget } from './components/Dashboard/DashboardWidget';
+import { FastLinksWidget } from './components/Dashboard/FastLinksWidget/FastLinksWidget';
+import { DeleteItemDialog } from './components/Dialog/DeleteItemDialog';
+import { Dialog } from './components/Dialog/Dialog';
+import { Collapse } from './components/Helper/Collapse';
+import { Checkbox } from './components/Inputs/Checkbox';
+import { CurrencyInput } from './components/Inputs/CurrencyInput';
+import { DateInput } from './components/Inputs/DateInput/DateInput';
+import { TimeInput } from './components/Inputs/TimeInput/TimeInput';
+import { TextAreaInput } from './components/Inputs/TextAreaInput';
+import { NumberInput } from './components/Inputs/NumberInput';
+import { PasswordInput } from './components/Inputs/PasswordInput';
+import { Radio } from './components/Inputs/Radio';
+import { RadioLarge } from './components/Inputs/RadioLarge';
+import { SearchInput } from './components/Inputs/SearchInput';
+import {
+  Select,
+  SelectAsyncPaginate,
+  SelectCreatable,
+} from './components/Inputs/Selects/Select';
+import { TextInput } from './components/Inputs/TextInput';
+import { FullScreenLoader, LazyLoader, Loader } from './components/Loader/Loader';
+import { Menu } from './components/Menu/Menu';
+import { MenuItem } from './components/Menu/MenuItem';
+import { ItemActionsMenu } from './components/Table/Components/Edit/ItemActionsMenu';
+import { ItemEditOptionsButtons } from './components/Table/Components/Edit/ItemEditOptionsButtons';
+import { TableEditRow } from './components/Table/Components/Edit/TableEditRow';
+import { FilterItem } from './components/Table/Components/FilterItem';
+import { SetTableFilter } from './components/Table/Components/SetTableFilter';
+import { TableFooter } from './components/Table/Components/TableFooter';
+import { Table } from './components/Table/Table';
+import { TablePrint } from './components/Table/Components/Print/TablePrint';
+import { Tabs } from './components/Tabs/Tabs';
+import { Tooltip } from './components/Tooltip/Tooltip';
+import { Tree } from './components/Tree/Tree';
+import { ConditionalWrapper } from './components/Wrappers/ConditionalWrapper';
+import { FormWrapper } from './components/Wrappers/FormWrapper';
+import { PageLayout } from './components/Wrappers/PageLayout';
+
+import {
+  checkIfExpired,
+  dateAddDays,
+  formatDate,
+  formatDateAndTime,
+  formatDateYMD,
+  formatTime,
+  formatYearMonth,
+  getCurrentDateFormatted,
+  getCurrentDateFormattedYMD,
+  getDaysLeft,
+} from './utils/DateUtils';
+import {
+  calculateFilesSize,
+  dataURLtoFile,
+  downloadFile,
+  downloadDocumentFile,
+  getBase64FromFile,
+  getBase64FromUrl,
+  getExtensionFromFilename,
+  getFileFromUrl,
+  rotateBase64Image,
+  sizeInBytesPretty,
+  splitBase64File,
+} from './utils/fileUtils';
+import { inputPattern } from './utils/InputPatternValidation';
+import {
+  getActiveOrgUuid,
+  getDefaultOrgUuid,
+  lsGet,
+  lsRemove,
+  lsSet,
+  setActiveOrgUuid,
+  setDefaultOrgUuid,
+} from './utils/LocalStorageHelper';
+import {
+  formatCurrency,
+  formatCurrencyNoDecimals,
+  formatDecimalNumber,
+} from './utils/NumberUtils';
+import {
+  areStringArraysEqual,
+  compareArrayItemsIndex,
+  convertBooleanObjectToArray,
+  convertArrayToBooleanObject,
+  deepCopy,
+  deleteEmptyProps,
+  deleteEmptyPropsIncludingArray,
+  deleteProps,
+  deletePropsThatEndsWith,
+  intersectArrays,
+} from './utils/ObjectUtils';
+import {
+  convertReportTemplateFilterToSearch,
+  convertSearchToReportTemplateFilter,
+  getActiveFilterNumber,
+  getPrintColumns,
+  getVisibleColumnsIds,
+  setTemplateData,
+} from './utils/TableUtils';
+import { rootDir } from './utils/RootDir';
+import { getInputHelperText, getInputMinMaxPattern, maxChar } from './utils/StringUtils';
+import { toastError, toastSuccess } from './utils/Toasts';
+import { parseUrlSearch } from './utils/UrlUtils';
+import { i18nIUILatin } from './utils/i18n/i18nIUILatin';
+import { i18nIUICyrilic } from './utils/i18n/i18nIUICyrilic';
+import { i18nIUIMe } from './utils/i18n/i18nIUIMe';
+
+import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate';
+import { useHideZendesk } from './hooks/useZendesk';
+import { useOnEsc } from './hooks/useOnEsc';
+import { useDialogObserver } from './components/Dialog/hooks/useDialogObserver';
+import { useTableSelect } from './components/Table/hooks/useTableSelect';
+import { useIsMenuOpen } from './hooks/useIsMenuOpen';
+
+export { Router, type IRoute };
+
+export {
+  Accordions,
+  Alert,
+  Button,
+  Checkbox,
+  CurrencyInput,
+  Collapse,
+  ConditionalWrapper,
+  DateInput,
+  Dashboard,
+  DashboardWidget,
+  FastLinksWidget,
+  DeleteItemDialog,
+  Dialog,
+  DotBadge,
+  FilterItem,
+  FormWrapper,
+  FullScreenLoader,
+  IconButton,
+  ItemActionsMenu,
+  ItemEditOptionsButtons,
+  TextAreaInput,
+  LazyLoader,
+  Loader,
+  Menu,
+  MenuItem,
+  NotificationBadge,
+  NumberInput,
+  PageLayout,
+  PasswordInput,
+  PillBadge,
+  Radio,
+  RadioLarge,
+  SearchInput,
+  Select,
+  SelectAsyncPaginate,
+  SelectCreatable,
+  SetTableFilter,
+  Table,
+  TablePrint,
+  TableEditRow,
+  TableFooter,
+  tableCustomLimit1000,
+  Tabs,
+  TextInput,
+  TimeInput,
+  ToastContainer,
+  Tooltip,
+  Tree,
+};
+
+export {
+  useHideZendesk,
+  useOnEsc,
+  useDefaultTemplate,
+  useDialogObserver,
+  useTableSelect,
+  useIsMenuOpen,
+};
+
+export type {
+  IAlertProps,
+  DeepPartial,
+  IAnyObject,
+  IBooleanObject,
+  IKeyboardAction,
+  IMenuItem,
+  IMenuPlacement,
+  IError,
+  IFormWrapper,
+  IHeaderAction,
+  IHeaderUserMenuProps,
+  IPagination,
+  ISelectData,
+  IServerSidePagination,
+  ISimpleObject,
+  ISimpleObjectWithCode,
+  IStringObject,
+  ITab,
+  ITable,
+  ITableColumn,
+  ITableDataItem,
+  ITableEditRow,
+  ITableFilter,
+  ITableFilterData,
+  ITableFilterItem,
+  ITableSort,
+  ITreeItem,
+  IValueLabel,
+  IconDefinition,
+};
+
+export { i18nIUICyrilic, i18nIUILatin, i18nIUIMe };
+
+export {
+  areStringArraysEqual,
+  checkIfExpired,
+  compareArrayItemsIndex,
+  convertBooleanObjectToArray,
+  convertArrayToBooleanObject,
+  dateAddDays,
+  deepCopy,
+  deleteEmptyProps,
+  deleteEmptyPropsIncludingArray,
+  deleteProps,
+  deletePropsThatEndsWith,
+  formatCurrency,
+  formatCurrencyNoDecimals,
+  formatDate,
+  formatDateAndTime,
+  formatDateYMD,
+  formatDecimalNumber,
+  formatTime,
+  formatYearMonth,
+  convertReportTemplateFilterToSearch,
+  convertSearchToReportTemplateFilter,
+  getActiveFilterNumber,
+  getCurrentDateFormatted,
+  getCurrentDateFormattedYMD,
+  getDaysLeft,
+  getInputHelperText,
+  getInputMinMaxPattern,
+  getPrintColumns,
+  setTemplateData,
+  getVisibleColumnsIds,
+  inputPattern,
+  intersectArrays,
+  maxChar,
+  parseUrlSearch,
+  rootDir,
+  toastError,
+  toastSuccess,
+};
+
+export {
+  calculateFilesSize,
+  dataURLtoFile,
+  downloadFile,
+  downloadDocumentFile,
+  getBase64FromFile,
+  getBase64FromUrl,
+  getExtensionFromFilename,
+  getFileFromUrl,
+  rotateBase64Image,
+  sizeInBytesPretty,
+  splitBase64File,
+};
+
+export {
+  getActiveOrgUuid,
+  getDefaultOrgUuid,
+  lsGet,
+  lsRemove,
+  lsSet,
+  setActiveOrgUuid,
+  setDefaultOrgUuid,
+};
+
+export { DragDropContext, Draggable, Droppable, FontAwesomeIcon, clsx, dayjs };

package/src/pages/NoAccessPage.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { Button } from '../components/Button/Button';
+
+const NoAccessPage: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="full-screen-page">
+      <div id="content">
+        <h1>{t('NoAccessPage')}</h1>
+        <p className="subtitle">{t('NoAccessPageInfo')}</p>
+      </div>
+      <p id="img" className="img-403">
+        403
+      </p>
+      <div id="actions">
+        <Link to="/">
+          <Button label={t('ReturnToHomepage')} />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NoAccessPage;

package/src/pages/NotFoundPage.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router';
+import { Button } from '../components/Button/Button';
+import notFoundImg from '../assets/images/not-found.svg';
+
+const NotFoundPage: FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="full-screen-page">
+      <div id="content">
+        <h1>{t('PageNotFound')}</h1>
+        <p className="subtitle">{t('PageNotFoundInfo')}</p>
+      </div>
+      <img id="img" src={notFoundImg} alt="404" />
+      <div id="actions">
+        <Link to="/">
+          <Button label={t('ReturnToHomepage')} />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

package/src/styles/App.scss

@@ -0,0 +1,43 @@
+@use './variables/variables';
+
+@use './common/typography';
+@use './common/animations';
+@use './common/maps/align';
+@use './common/maps/spacing';
+@use './common/maps/text';
+
+@use './common/helpers/base';
+@use './common/helpers/color';
+@use './common/helpers/display';
+@use './common/helpers/size';
+
+@use './components/accordions';
+@use './components/alert';
+@use './components/badge';
+@use './components/button';
+@use './components/card';
+// @use './components/menu-v2';
+@use './components/dialog';
+@use './components/form';
+@use './components/header';
+@use './components/input';
+@use './components/inputCheckbox';
+@use './components/inputDateTime';
+@use './components/inputRadio';
+@use './components/inputSelect';
+@use './components/loader';
+@use './components/menu';
+@use './components/page';
+@use './components/portal';
+@use './components/print';
+@use './components/pullover';
+@use './components/scrollbar';
+@use './components/sidebar';
+@use './components/smallComponents';
+@use './components/table';
+@use './components/tabs';
+@use './components/tooltip';
+@use './components/tree';
+@use './components/widget';
+
+@use './pages/fullScreenPage';

package/src/styles/common/_animations.scss

@@ -0,0 +1,64 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes scale-in {
+  0% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// @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 auto-fill {
+  to {
+    font-size: 13px;
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes temp-disable-pointer {
+  0% {
+    pointer-events: none;
+  }
+  99% {
+    pointer-events: none;
+  }
+  100% {
+    pointer-events: auto;
+  }
+}

package/src/styles/common/_typography.scss

@@ -0,0 +1,88 @@
+@use '../variables/bp';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,900&display=swap');
+
+* {
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  color: var(--text);
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+p {
+  font-size: var(--fs-m);
+}
+h1 {
+  font-size: 60px;
+  line-height: 1.1;
+}
+h2 {
+  font-size: 48px;
+}
+h2 {
+  font-size: 36px;
+}
+h3 {
+  font-size: 24px;
+}
+
+.bold {
+  font-weight: bold !important;
+}
+.italic {
+  font-style: italic !important;
+}
+
+.new-line {
+  white-space: pre-line !important;
+}
+.no-wrap {
+  white-space: nowrap !important;
+}
+.word-break {
+  word-break: break-word !important;
+}
+
+.subtitle {
+  font-size: 20px;
+  color: var(--neutral-600);
+  white-space: pre-line;
+}
+.link {
+  color: var(--link) !important;
+  text-decoration: underline !important;
+  &.inactive {
+    opacity: 0.5;
+  }
+  &:not(:disabled) {
+    cursor: pointer;
+    &:hover {
+      color: var(--link-alt) !important;
+      opacity: 1;
+    }
+  }
+}
+
+@media #{bp.$mobile} {
+  h1 {
+    font-size: 36px;
+    line-height: 1.2;
+  }
+  h2 {
+    font-size: 24px;
+  }
+  h2 {
+    font-size: 20px;
+  }
+  h3 {
+    font-size: 16px;
+  }
+}

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

@@ -0,0 +1,55 @@
+body {
+  margin: 0;
+  width: 100%;
+}
+
+#root {
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+  &:focus-visible {
+    outline: none !important;
+  }
+}
+
+button {
+  all: unset;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: unset;
+  -webkit-user-drag: none;
+}
+
+.clickable {
+  cursor: pointer;
+  transition: background-color 250ms;
+  &:disabled,
+  &.disabled {
+    opacity: 0.4;
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+  }
+}
+.no-overflow {
+  overflow: hidden;
+}
+.overflow-auto {
+  overflow: auto;
+}
+
+.hover-primary:hover {
+  background-color: var(--primary-100);
+}
+.hover-neutral:hover {
+  background-color: var(--neutral-hover);
+}
+
+.no-border {
+  border: none !important;
+}

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

@@ -0,0 +1,7 @@
+.c-primary {
+  color: var(--primary) !important;
+}
+
+// .b-white {
+//   background: var(--white);
+// }