@inceptionbg/iui 2.0.5 → 2.0.6

package/src/types/IHeader.ts

@@ -0,0 +1,24 @@
+import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
+import { IButtonColor } from '../components/Button/Button';
+import { IMenuItem } from './IMenu';
+
+export interface IHeaderAction {
+  label: string;
+  icon?: IconDefinition;
+  iconRotation?: RotateProp;
+  to?: string;
+  onClick?: () => void;
+  solid?: boolean;
+  color?: IButtonColor;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+export type IHeaderUserMenuProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  userName?: string;
+  organizationName?: string;
+  showBadge?: boolean;
+  menuItems?: IMenuItem[];
+};

package/src/types/IInfo.ts

@@ -0,0 +1 @@
+export type IInfoType = 'success' | 'info' | 'warning' | 'danger';

package/src/types/IKeyboard.ts

@@ -0,0 +1,37 @@
+import { ITableDataItem } from './ITable';
+
+export interface IKeyboardAction {
+  key: string;
+  onAction: () => void;
+  ctrl?: boolean;
+  normalizedKey?: boolean;
+  onBulkAction?: (itemUuids: string[]) => void;
+  disabled?: boolean;
+}
+
+export interface ITableKeyboardActionsBase {
+  moveDisabled?: boolean;
+  editDisabled?: boolean;
+  delete?: {
+    enabled: boolean;
+    setItemToDeleteUuids: (itemUuids: string[]) => void;
+    onAction?: () => void;
+  };
+  additional?: (props: {
+    focusedRow: ITableDataItem | null;
+    isEditing: boolean;
+    isAdding: boolean;
+  }) => IKeyboardAction[];
+}
+export interface ITableKeyboardActionsProp extends ITableKeyboardActionsBase {
+  add?: {
+    isAdding: boolean;
+    setIsAdding: (item: boolean) => void;
+    enabled: boolean;
+  };
+  edit?: {
+    item: any | null;
+    setItem: (item: any | null) => void;
+    enabled: boolean;
+  };
+}

package/src/types/IMenu.ts

@@ -0,0 +1,18 @@
+import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
+import { MouseEventHandler } from 'react';
+
+export type IMenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export interface IMenuItem {
+  label: string;
+  icon?: IconDefinition;
+  iconRotation?: RotateProp;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  to?: string;
+  badge?: number;
+  disabled?: boolean;
+  hidden?: boolean;
+  withDevider?: boolean;
+  keepOpen?: boolean;
+  className?: string;
+}

package/src/types/IRouter.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+
+export interface IRoute {
+  path: string;
+  element: ReactElement;
+}

package/src/types/ISelect.ts

@@ -0,0 +1,52 @@
+import { Ref } from 'react';
+import { IValueLabel } from './IBasic';
+
+export interface ISelectData extends IValueLabel {
+  disabled?: boolean;
+  [id: string]: any;
+}
+
+interface BaseSelectProps {
+  variant: 'basic' | 'async' | 'async-creatable';
+  label?: string;
+  value?: any;
+  isMulti?: boolean;
+  onChange: (value: any) => void;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  className?: string;
+  minWidth?: number;
+  menuWidth?: 'fit-content' | 'max-content' | number;
+  autoFocus?: boolean;
+  isClearable?: boolean;
+  isOpen?: boolean;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void;
+  openDirection?: 'top' | 'bottom' | 'auto';
+  closeMenuOnSelect?: boolean;
+  noOptionsMessage?: string;
+  formatOptionLabel?: (value: any) => any;
+  ref?: Ref<HTMLInputElement>;
+}
+
+export interface BasicSelectProps extends BaseSelectProps {
+  variant: 'basic';
+  options: ISelectData[];
+}
+
+export interface AsyncSelectProps extends BaseSelectProps {
+  variant: 'async';
+  loadOptions: any;
+  defaultData?: ISelectData[];
+}
+
+export interface CreatableSelectProps extends BaseSelectProps {
+  variant: 'async-creatable';
+  loadOptions: any;
+  onCreate: (inputValue: string) => void;
+  defaultData?: ISelectData[];
+}

package/src/types/ITab.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+export interface ITab {
+  value: string;
+  label: string;
+  icon?: any;
+  component: ReactNode;
+  disabled?: boolean;
+  hidden?: boolean;
+}

package/src/types/ITable.ts

@@ -0,0 +1,249 @@
+import {
+  Dispatch,
+  FunctionComponent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  RefObject,
+  SetStateAction,
+} from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IAnyObject, ISimpleObject } from './IBasic';
+import { ITableKeyboardActionsBase } from './IKeyboard';
+
+export interface ITable {
+  columns: ITableColumn[];
+  setColumns?: (data: ITableColumn[]) => void;
+  withColumnsSearch?: boolean;
+  customHeader?: ITableColumn[][];
+  data: ITableDataItem[];
+  sumRows?: ITableDataItem[];
+  isLoading?: boolean;
+  serverSidePagination?: IServerSidePagination;
+  customPagination?: {
+    defaultLimit?: number;
+    customLimit?: number[];
+  };
+  selectedRowUuid?: string;
+  footerAction?: {
+    icon?: IconDefinition;
+    onClick: () => void;
+  };
+  headerWrap?: boolean;
+  hideFooter?: boolean;
+  noTotalRows?: boolean;
+  showLastBorder?: boolean;
+  filterData?: ITableFilterData;
+  sortData?: ITableSortData;
+  printData?: IPrintData;
+  customPrintData?: ICustomPrintData;
+  additionsalOptions?: ReactNode;
+  rowSelect?: {
+    selectedRows: Set<string>;
+    setSelectedRows: Dispatch<SetStateAction<Set<string>>>;
+    actions: ITableSelectedActions[];
+  };
+  className?: string;
+  rowHeight?: 'xs' | 's' | 'm';
+  maxHeight?: string;
+  editable?: {
+    selectedItem?: any;
+    setSelectedItem?: (item: any) => void;
+    defaultDataValue?: any;
+    EditableRow?: FunctionComponent<ITableEditRow>;
+    onSubmit: (data: any, onSubmitCallback: () => void) => void;
+    addDisabled?: boolean;
+    addLabel?: string;
+    inputFocusRef?: RefObject<any>;
+    keepEditOnSubmit?: boolean;
+  };
+  keyboard?: {
+    enabled: boolean;
+    actions: ITableKeyboardActionsBase;
+  };
+  templates?: {
+    identifier: string;
+    data: IReportTemplateData;
+    setTemplateName?: (templateName: string) => void;
+    onClearFilters: () => void;
+    allowPublicCreate?: boolean;
+  };
+}
+
+export interface ITableColumn {
+  id: string;
+  label?: string | ReactElement;
+  labelForFilter?: string;
+  align?: 'center' | 'left' | 'right' | 'justify' | undefined;
+  hidden?: boolean;
+  unavailable?: boolean;
+  width?: string;
+  minWidth?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  break?: boolean;
+  color?: 'secondary';
+  sortOptions?: {
+    asc: string;
+    desc: string;
+    label: string;
+  };
+  code?: string;
+}
+
+export interface ITableDataItem {
+  uuid: string;
+  onRowClick?: (event?: MouseEvent<HTMLTableRowElement>) => void;
+  className?: string;
+  item?: Record<string, any>;
+  disableSelect?: boolean;
+  cells: {
+    [id: string]: {
+      value: any;
+      align?: ITableColumn['align'];
+      className?: string;
+      onClick?: (event?: MouseEvent<HTMLTableCellElement>) => void;
+      link?: boolean;
+      tooltip?: string;
+      span?: number;
+      unclickable?: boolean;
+      printValue?: string;
+    };
+  };
+  extendable?: {
+    element: ReactElement;
+    isLoading?: boolean;
+  };
+}
+
+export interface ITableFilterData {
+  columns: string[];
+  filters: ITableFilter;
+  activeFilterNo?: number;
+  additionalFilters?: ReactElement;
+  search: IAnyObject;
+  searchData: IAnyObject;
+  setSearchData: (search: IAnyObject) => void;
+  onSubmit: (search: IAnyObject) => void;
+  resetData?: IAnyObject;
+  excludeFromSearch?: string[];
+}
+
+export interface ITableFilterItem {
+  label: string;
+  field: ReactElement;
+  resetField: () => void;
+}
+export interface ITableFilter {
+  [id: string]: ITableFilterItem;
+}
+
+export interface ITableSortData {
+  sort: string;
+  setSort: (sort: string) => void;
+  sortOptions: ITableSort[];
+  menuSize?: 's' | 'm' | 'l';
+}
+export interface ITableSort {
+  label: string;
+  asc: string;
+  desc: string;
+}
+
+export interface ITableColumnsData {
+  columns: ITableColumn[];
+  setColumns: (columns: ITableColumn[]) => void;
+  withSearch?: boolean;
+}
+export interface ITableSelectedActions {
+  label: string;
+  onClick: (selected: Set<string>) => void;
+  hidden?: boolean;
+  disabled?: boolean;
+  clearSelected?: boolean;
+}
+///// PRINT /////
+export interface IBasePrintData {
+  label: string;
+  organization?: {
+    name?: string;
+    taxId?: string;
+    registrationNumber?: string;
+    jbkjs?: string;
+    email?: string;
+  };
+  filters?: {
+    basic?: { label: string; value?: string }[];
+    date?: { label: string; from?: string; to?: string }[];
+  };
+  saveXlsx?: () => void;
+}
+export interface ICustomPrintData extends IBasePrintData {
+  content: ReactNode;
+}
+export interface IPrintData extends IBasePrintData {
+  optionalNode?: {
+    aboveTable?: ReactNode;
+    bellowTable?: ReactNode;
+  };
+  customHeader?: ITableColumn[][];
+  excludeColumns?: string[];
+  getPrintData: (pagination: IPagination) => Promise<{ data: any[]; totalRows?: number }>;
+  formatPrintData: (data: any) => ITableDataItem[];
+  totals?: ITableDataItem;
+}
+///////////////
+
+export interface IPagination {
+  limit: number;
+  offset: number;
+}
+export interface IServerSidePagination {
+  limit: number;
+  offset: number;
+  setLimit: Dispatch<SetStateAction<number>>;
+  setOffset: Dispatch<SetStateAction<number>>;
+  totalRows: number;
+}
+
+export interface ITableEditRow {
+  columns: ITableColumn[];
+  data: any;
+  setData: (data: any) => void;
+  item?: any;
+  clearItem: () => void;
+  defaultDataValue?: any;
+  inputFocusRef?: RefObject<any>;
+}
+
+export interface IReportTemplate {
+  uuid: string;
+  name: string;
+  identifier: string;
+  filterValues?: IReportTemplateFilterValue[];
+  columns: string[];
+  organization?: ISimpleObject;
+  subsystem?: string; // IModuleId;
+  sorts?: string[];
+  isPublic?: boolean;
+  isDefault?: boolean;
+  order?: number;
+  createdAt?: string;
+  createdBy?: ISimpleObject;
+}
+
+export interface IReportTemplateFilterValue {
+  filter: string;
+  value: string;
+  name?: string;
+  type: 'STRING' | 'ARRAY' | 'OBJECT' | 'BOOLEAN';
+}
+
+export interface IReportTemplateData {
+  searchData: IAnyObject;
+  visibleColumns?: string[];
+  sorts?: string[];
+}
+
+export const tableStandardLimit = [5, 10, 25, 50, 100];
+export const tableCustomLimit1000 = [...tableStandardLimit, 1000];

package/src/types/ITree.ts

@@ -0,0 +1,6 @@
+export interface ITreeItem {
+  uuid: string;
+  name: string;
+  code?: string;
+  children?: ITreeItem[];
+}

package/src/utils/DateUtils.ts

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+
+type inputDate = string | Date | dayjs.Dayjs;
+
+export const formatDate = (date?: inputDate) =>
+  date ? dayjs(date).format(`DD.MM.YYYY.`) : '/';
+export const formatDateYMD = (date: inputDate) => dayjs(date).format(`YYYY-MM-DD`);
+
+export const formatDateAndTime = (date?: inputDate, withSeconds?: boolean) =>
+  date ? dayjs(date).format(`DD.MM.YYYY. HH:mm${withSeconds ? ':ss' : ''}`) : '/';
+
+export const formatTime = (date?: inputDate, withSeconds?: boolean) =>
+  date ? dayjs(date).format(`HH:mm${withSeconds ? ':ss' : ''}`) : '/';
+
+export const dateAddDays = (date: inputDate, addDays: number) =>
+  dayjs(date).add(addDays, 'days').toISOString();
+
+export const checkIfExpired = (date?: inputDate) =>
+  date ? dayjs().isAfter(dayjs(date)) : false;
+
+export const getCurrentDateFormatted = () => dayjs().format('DD.MM.YYYY.').toString();
+export const getCurrentDateFormattedYMD = () => dayjs().format('YYYY-MM-DD').toString();
+
+export const getDaysLeft = (date?: inputDate) => dayjs(date).diff(new Date(), 'days');
+
+export const formatYearMonth = (year: number, month: number) =>
+  `${year}-${month < 10 ? `0${month}` : month}`;
+
+// export const getDayInputRegex = (max: number) =>
+//   `(0[1-9]|1[0-9]|2[0-${max === 28 ? "8" : "9"}]${
+//     max > 29 && `|3[0${max > 30 && "-1"}]`
+//   })`;

package/src/utils/InputPatternValidation.ts

@@ -0,0 +1,12 @@
+export const inputPattern = {
+  taxId: '^\\d{9}$',
+  businessCode: '^\\d{8}$',
+  umcn: '^\\d{13}$',
+  idCardNumber: '^\\d{9}$',
+  phoneNumber: '^\\d{8,9}$',
+  port: '^\\d{4}$',
+  year: '^\\d{4}$',
+  number: '^\\d*$',
+  strongPassword: '^.*(?=.{8,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).*$',
+  // email: '\\S+@\\S+\\.\\S+',
+};

package/src/utils/LocalStorageHelper.ts

@@ -0,0 +1,24 @@
+type LocalStorageItem =
+  | 'activeUser'
+  | 'token'
+  | 'refreshToken'
+  | 'logInWay'
+  | 'nextUrl'
+  | 'codeVerifier'
+  | 'language';
+
+export const lsGet = (key: LocalStorageItem) => localStorage.getItem(key);
+export const lsSet = (key: LocalStorageItem, value: string) =>
+  localStorage.setItem(key, value);
+export const lsRemove = (key: LocalStorageItem) => localStorage.removeItem(key);
+
+// Organization
+
+export const getDefaultOrgUuid = () =>
+  localStorage.getItem(`${lsGet('activeUser')}-defaultOrg`) as string;
+export const setDefaultOrgUuid = (organizationUuid: string) =>
+  localStorage.setItem(`${lsGet('activeUser')}-defaultOrg`, organizationUuid);
+export const getActiveOrgUuid = () =>
+  localStorage.getItem(`${lsGet('activeUser')}-activeOrg`) as string;
+export const setActiveOrgUuid = (organizationUuid: string) =>
+  localStorage.setItem(`${lsGet('activeUser')}-activeOrg`, organizationUuid);

package/src/utils/NumberUtils.ts

@@ -0,0 +1,21 @@
+// export const toNumberOrZero = (value?: string | number) => (!!value ? +value : 0);
+
+export const formatCurrency = (
+  number?: string | number,
+  minimumFractionDigits?: number,
+  maximumFractionDigits?: number
+) =>
+  Number(number ?? 0).toLocaleString('sr-RS', {
+    minimumFractionDigits: minimumFractionDigits ?? 2,
+    maximumFractionDigits: maximumFractionDigits ?? minimumFractionDigits ?? 2,
+  });
+
+export const formatCurrencyNoDecimals = (number?: string | number) =>
+  // number?.toString().replace(',', '.') ?? 0;
+  Number(number ?? 0).toLocaleString('sr-RS');
+
+export const formatDecimalNumber = (number?: string | number) =>
+  number?.toString().replace('.', ',') ?? 0;
+
+// export const roundTwoDecimals = (value?: string | number) =>
+//   !!value ? Math.round(+value * 100) / 100 : 0;

package/src/utils/ObjectUtils.ts

@@ -0,0 +1,85 @@
+import { IBooleanObject } from '../types/IBasic';
+
+export const deleteProps = <T extends Record<string, any>>(
+  obj: T,
+  props: (keyof T)[]
+) => {
+  const newObj = { ...obj };
+  props.forEach(prop => delete newObj[prop]);
+  return newObj as Partial<T>;
+};
+
+export const deletePropsThatEndsWith = <T extends Record<string, any>>(
+  obj: T,
+  endsWith: string
+) => {
+  const newObj = { ...obj };
+  for (const prop in newObj) {
+    if (prop.endsWith(endsWith)) {
+      delete newObj[prop];
+    }
+  }
+  return newObj;
+};
+
+export const deleteEmptyProps = <T extends Record<string, any>>(obj: T): T =>
+  Object.entries(obj).reduce(
+    (updatedObj, [key, value]) =>
+      [null, undefined, ''].includes(value)
+        ? updatedObj
+        : ((updatedObj[key as keyof T] = value), updatedObj),
+    {} as T
+  );
+
+export const deleteEmptyPropsIncludingArray = <T extends Record<string, any>>(
+  obj: T
+): T =>
+  Object.entries(obj).reduce(
+    (updatedObj, [key, value]) =>
+      [null, undefined, ''].includes(value) || (Array.isArray(value) && !value.length)
+        ? updatedObj
+        : ((updatedObj[key as keyof T] = value), updatedObj),
+    {} as T
+  );
+
+export const convertBooleanObjectToArray = (obj: IBooleanObject) =>
+  Object.keys(obj).filter(key => obj[key]);
+
+export const convertArrayToBooleanObject = (arr?: string[]) =>
+  arr ? arr.reduce((acc: IBooleanObject, item) => ({ ...acc, [item]: true }), {}) : {};
+
+export const deepCopy = (el: any[] | object) => JSON.parse(JSON.stringify(el));
+
+export const areStringArraysEqual = (arr1: string[], arr2: string[]) =>
+  JSON.stringify(arr1) === JSON.stringify(arr2);
+
+export const compareArrayItemsIndex = <T>(
+  array: T[] | readonly T[],
+  item1: T,
+  comparison: 'greaterThan' | 'greaterThanOrEqualTo' | 'lessThan' | 'lessThanOrEqualTo',
+  item2: T
+): boolean => {
+  const index1 = array.indexOf(item1);
+  const index2 = array.indexOf(item2);
+  return (
+    // Check if items exist in array
+    index1 >= 0 &&
+    index2 >= 0 &&
+    // Compare items location in the array
+    (comparison === 'greaterThan'
+      ? index1 > index2
+      : comparison === 'greaterThanOrEqualTo'
+      ? index1 >= index2
+      : comparison === 'lessThan'
+      ? index1 < index2
+      : index1 <= index2)
+  );
+};
+
+export const intersectArrays = <T>(
+  arr1: any[] | readonly T[],
+  arr2: any[] | readonly T[]
+) => {
+  const set2 = new Set(arr2);
+  return (arr1 as T[]).filter(item => set2.has(item));
+};

package/src/utils/RootDir.ts

@@ -0,0 +1 @@
+export const rootDir = (document.getElementById('root') as HTMLElement) ?? document.body;

package/src/utils/StringUtils.ts

@@ -0,0 +1,18 @@
+export const maxChar = (str = '', maxLength = 30) =>
+  str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
+
+export const getInputHelperText = (
+  t: any,
+  min?: string | number,
+  max?: string | number
+) =>
+  max
+    ? min === max
+      ? t('CharNumber', { number: min })
+      : t('CharRange', { from: min || 1, to: max })
+    : min
+    ? t('CharMin', { from: min })
+    : undefined;
+
+export const getInputMinMaxPattern = (min?: string | number, max?: string | number) =>
+  `^.{${min || 0},${max || ''}}$`;