@inceptionbg/iui 1.0.0

package/src/styles/iui.scss

@@ -0,0 +1,28 @@
+@import "./iui/common/variables";
+@import "./iui/common/typography";
+@import "./iui/common/animations";
+@import "./iui/common/maps/align";
+@import "./iui/common/maps/spacing";
+@import "./iui/common/helpers/base";
+@import "./iui/common/helpers/color";
+@import "./iui/common/helpers/display";
+@import "./iui/common/helpers/size";
+
+@import "./iui/components/accordions";
+@import "./iui/components/badge";
+@import "./iui/components/card";
+@import "./iui/components/dialog";
+@import "./iui/components/header";
+@import "./iui/components/input";
+@import "./iui/components/loader";
+@import "./iui/components/menu";
+@import "./iui/components/notifications";
+@import "./iui/components/page";
+@import "./iui/components/portal";
+@import "./iui/components/print";
+@import "./iui/components/scrollbar";
+@import "./iui/components/selectInput";
+@import "./iui/components/sidebar";
+@import "./iui/components/smallComponents";
+@import "./iui/components/table";
+@import "./iui/components/tabs";

package/src/styles/red-variables.scss

@@ -0,0 +1,9 @@
+:root {
+  --primary: rgb(var(--primary-rgb));
+  --primary-rgb: 237, 26, 59;
+  --primary-light: #ef314f;
+  //  --primary-light25: #f1536c;
+  --primary-dark10: #c50f2c;
+  --primary-dark: #b60e28;
+  --secondary: #ff9500;
+}

package/src/types/IBasic.ts

@@ -0,0 +1,31 @@
+export interface IAnyObject {
+  [id: string]: any;
+}
+
+export interface IStringObject {
+  [id: string]: string;
+}
+
+export interface IBooleanObject {
+  [id: string]: boolean;
+}
+
+export interface ISimpleObject {
+  uuid: string;
+  name: string;
+}
+
+export interface ISimpleObjectWithCode extends ISimpleObject {
+  code: string;
+}
+
+export interface ISimpleObjectWithCodeNew {
+  uuid?: string;
+  name?: string;
+  code?: string;
+}
+
+export interface IValueLabel {
+  value: any;
+  label: string;
+}

package/src/types/IError.ts

@@ -0,0 +1,4 @@
+export interface IError {
+  errorMessage: string;
+  errorCode?: string;
+}

package/src/types/IHeaderAction.ts

@@ -0,0 +1,12 @@
+import { IconDefinition, RotateProp } from "@fortawesome/fontawesome-svg-core";
+
+export interface IHeaderAction {
+  label: string;
+  icon?: IconDefinition;
+  iconRotation?: RotateProp;
+  to?: string;
+  onClick?: () => void;
+  primary?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+}

package/src/types/ISelect.ts

@@ -0,0 +1,6 @@
+import { IValueLabel } from "./IBasic";
+
+export interface ISelectData extends IValueLabel {
+  disabled?: boolean;
+  [id: string]: any;
+}

package/src/types/ISidebar.ts

@@ -0,0 +1,29 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+export interface ISidebarItem {
+  label: string;
+  icon: IconDefinition;
+  to?: string;
+  content?: ISidebarSubItem[];
+  menu?: {
+    content: ISidebarSubItem[];
+    openedMenu: string;
+    setOpenedMenu: (label: string) => void;
+  };
+  hidden?: boolean;
+  badge?: number;
+  addUrl?: string;
+  collapsed?: boolean;
+}
+
+export interface ISidebarSubItem {
+  label: string;
+  to?: string;
+  content?: ISidebarItem[];
+  hidden?: boolean;
+  tooltip?: string;
+  badge?: number;
+  addUrl?: string;
+  primary?: boolean;
+  collapsed?: boolean;
+}

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,210 @@
+import {
+  Dispatch,
+  FunctionComponent,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+  RefObject,
+  SetStateAction,
+} from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IAnyObject } from './IBasic';
+
+export interface ITable {
+  columns: ITableColumn[];
+  setColumns?: (data: ITableColumn[]) => void;
+  firstHeaderRow?: ITableColumn[];
+  secondHeaderRow?: ITableColumn[];
+  data: ITableDataItem[];
+  totals?: ITableDataItem;
+  isLoading?: boolean;
+  loaderLogo?: string;
+  serverSidePagination?: IServerSidePagination;
+  customPagination?: {
+    defaultLimit?: number;
+    customLimit?: number[];
+  };
+  selectedRowUuid?: string;
+  footerAction?: {
+    icon?: IconDefinition;
+    onClick: () => void;
+  };
+  headerWrap?: boolean;
+  hideFooter?: boolean;
+  showLastBorder?: boolean;
+  filterData?: ITableFilterData;
+  sortData?: ITableSortData;
+  printData?: IPrintData;
+  additionsalOptions?: ReactNode;
+  selectedOptions?: ReactNode;
+  translations?: ITableTranslations;
+  className?: string;
+  editable?: {
+    selectedItem: any;
+    setSelectedItem: (item: any) => void;
+    defaultDataValue?: any;
+    EditableRow?: FunctionComponent<ITableEditRow>;
+    onSubmit: (data: any, onSubmitCallback?: () => void) => void;
+    disabled?: boolean;
+    inputFocusRef?: RefObject<any>;
+  };
+}
+
+export interface ITableColumn {
+  id: string;
+  label?: string;
+  align?: 'center' | 'left' | 'right' | 'justify' | undefined;
+  hidden?: boolean;
+  unavailable?: boolean;
+  width?: string;
+  minWidth?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  break?: boolean;
+  sortOptions?: {
+    asc: string;
+    desc: string;
+    label: string;
+  };
+}
+
+export interface ITableDataItem {
+  uuid: string;
+  onRowClick?: MouseEventHandler<HTMLTableRowElement>;
+  className?: string;
+  cells: {
+    [id: string]: {
+      value: any;
+      align?: ITableColumn['align'];
+      className?: string;
+      onClick?: MouseEventHandler<HTMLTableCellElement>;
+      link?: boolean;
+      tooltip?: string;
+      span?: number;
+      unclickable?: boolean;
+    };
+  };
+  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 {
+  [id: string]: {
+    label: string;
+    asc: string;
+    desc: string;
+  };
+}
+
+export interface ITableColumnsData {
+  columns: ITableColumn[];
+  setColumns: (data: any) => void;
+}
+export interface IPrintData {
+  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 }[];
+  };
+  getPrintData: (pagination: IPagination) => Promise<IAnyObject>;
+  formatPrintData: (data: any) => ITableDataItem[];
+  saveXlsx?: () => void;
+  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 ITableTranslations {
+  noDataText?: string;
+  pagination?: {
+    rowsPerPage: string;
+    of: string;
+    allResults: string;
+    page: string;
+  };
+  Sort?: string;
+  filter?: {
+    Filter?: string;
+    ResetFilter?: string;
+    Search?: string;
+    Delete?: string;
+  };
+  print?: {
+    Print?: string;
+    PrintExport?: string;
+    TaxId?: string;
+    RegistrationNumber?: string;
+    PrintDate?: string;
+    from?: string;
+    to?: string;
+    SaveXlsx?: string;
+  };
+  Cancel?: string;
+  Confirm?: string;
+  columns?: {
+    Columns?: string;
+    DragDropListsInfo?: string;
+    HiddenColumns?: string;
+    SelectedColumns?: string;
+  };
+  editable?: {
+    Actions?: string;
+  };
+}

package/src/types/custom.d.ts

@@ -0,0 +1,9 @@
+declare module "*.png" {
+  const value: string;
+  export = value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export = value;
+}

package/src/utils/DateUtils.ts

@@ -0,0 +1,30 @@
+import moment from 'moment/moment';
+
+export const formatDate = (date?: string) =>
+  date ? moment(date).format(`DD.MM.YYYY.`) : '/';
+export const formatDateYMD = (date: string | Date) => moment(date).format(`yyyy-MM-DD`);
+
+export const formatDateAndTime = (date?: string, withSeconds?: boolean) =>
+  date ? moment(date).format(`DD.MM.YYYY. HH:mm${withSeconds ? ':ss' : ''}`) : '/';
+
+export const formatTime = (date?: string, withSeconds?: boolean) =>
+  date ? moment(date).format(`HH:mm${withSeconds ? ':ss' : ''}`) : '/';
+
+export const dateAddDays = (date: string, addDays: number) =>
+  moment(date).add(addDays, 'days').toISOString();
+
+export const checkIfExpired = (date?: string) =>
+  date ? moment(new Date()) > moment(date) : true;
+
+export const getCurrentDateFormatted = () => moment().format('DD.MM.YYYY.').toString();
+export const getCurrentDateFormattedYMD = () => moment().format('yyyy-MM-DD').toString();
+
+export const getDaysLeft = (date?: string) => moment(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/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 || 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,49 @@
+import { IAnyObject } from "../types/IBasic";
+import { ITableColumn } from "../types/ITable";
+
+export const deleteProps = (obj: any, props: string[]) => {
+  let newObj = { ...obj };
+  props.forEach((e) => delete newObj[e]);
+  return newObj;
+};
+
+export const deleteEmptyProps = (obj: IAnyObject) =>
+  Object.entries(obj).reduce(
+    (a: any, [k, v]) =>
+      [null, undefined, ""].includes(v) ? a : ((a[k] = v), a),
+    {}
+  );
+
+export const deleteEmptyPropsIncludingArray = (obj: IAnyObject) =>
+  Object.entries(obj).reduce(
+    (a: any, [k, v]) =>
+      [null, undefined, ""].includes(v) || (Array.isArray(v) && !v.length)
+        ? a
+        : ((a[k] = v), a),
+    {}
+  );
+
+export const getActiveFilterNumber = (obj: any) => Object.keys(obj).length;
+
+export const getPrintColumns = (tableCols: ITableColumn[]) =>
+  tableCols.reduce(
+    (arr: string[], col) =>
+      col.hidden || col.unavailable ? arr : arr.concat(col.id),
+    []
+  );
+
+export const getVisibleColumnsIds = (
+  tableCols: ITableColumn[],
+  isPrint?: boolean
+) =>
+  tableCols.reduce(
+    (arr: string[], col) =>
+      col.hidden ||
+      col.unavailable ||
+      (isPrint && ["select", "icons", "actions"].includes(col.id))
+        ? arr
+        : arr.concat(col.id),
+    []
+  );
+
+export const deepCopy = (el: any[] | object) => JSON.parse(JSON.stringify(el));

package/src/utils/StringUtils.ts

@@ -0,0 +1,2 @@
+export const maxChar = (str = '', maxLength = 30) =>
+  str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;

package/src/utils/Toasts.ts

@@ -0,0 +1,6 @@
+import { toast } from "react-toastify";
+
+export const toastSuccess = (message: string) => toast.success(message);
+export const toastError = (message: string) => toast.error(message, { autoClose: false });
+// export const toastInfo = (message: string) => toast.info(message);
+// export const toastWarn = (message: string) => toast.warn(message);

package/src/utils/icons.ts

@@ -0,0 +1,11 @@
+import { faCircleCheck } from "../icons/regular/faCircleCheck";
+import { faCircleExclamation } from "../icons/regular/faCircleExclamation";
+import { faCircleInfo } from "../icons/regular/faCircleInfo";
+import { faTriangleExclamation } from "../icons/regular/faTriangleExclamation";
+
+export const infoIcons = {
+  error: faCircleExclamation,
+  success: faCircleCheck,
+  info: faCircleInfo,
+  warning: faTriangleExclamation,
+};

package/src/utils/index.ts

@@ -0,0 +1,41 @@
+import {
+  checkIfExpired,
+  dateAddDays,
+  formatDate,
+  formatDateAndTime,
+  formatTime,
+  formatYearMonth,
+  getCurrentDateFormattedYMD,
+  getDaysLeft,
+} from "./DateUtils";
+import { formatCurrency, formatCurrencyNoDecimals } from "./NumberUtils";
+import {
+  deleteEmptyProps,
+  deleteEmptyPropsIncludingArray,
+  deleteProps,
+  getActiveFilterNumber,
+  getVisibleColumnsIds,
+} from "./ObjectUtils";
+import { maxChar } from "./StringUtils";
+
+export {
+  checkIfExpired,
+  dateAddDays,
+  formatDate,
+  formatDateAndTime,
+  formatTime,
+  formatYearMonth,
+  getCurrentDateFormattedYMD,
+  getDaysLeft,
+  formatCurrency,
+  formatCurrencyNoDecimals,
+  deleteEmptyProps,
+  deleteEmptyPropsIncludingArray,
+  deleteProps,
+  getActiveFilterNumber,
+  getVisibleColumnsIds,
+  // apiResponseHandler,
+  // toastError,
+  // toastSuccess,
+  maxChar,
+};