@inceptionbg/iui 1.0.0

package/src/icons/solid/faPrint.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fas";
+const iconName = "print";
+const width = 512;
+const height = 512; 
+const unicode = "f02f";
+const svgPathData =
+  "M448 192H64C28.65 192 0 220.7 0 256v96c0 17.67 14.33 32 32 32h32v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h32c17.67 0 32-14.33 32-32V256C512 220.7 483.3 192 448 192zM384 448H128v-96h256V448zM432 296c-13.25 0-24-10.75-24-24c0-13.27 10.75-24 24-24s24 10.73 24 24C456 285.3 445.3 296 432 296zM128 64h229.5L384 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C387.4 3.375 379.2 0 370.8 0H96C78.34 0 64 14.33 64 32v128h64V64z";
+
+export const faPrint: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/icons/solid/faRotateRight.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fas";
+const iconName = "rotate-right";
+const width = 512;
+const height = 512;
+const unicode = "f2f9";
+const svgPathData =
+  "M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z";
+
+export const faRotateRight: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/icons/solid/faXmark.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fas";
+const iconName = "xmark";
+const width = 320;
+const height = 512;
+const unicode = "f00d";
+const svgPathData =
+  "M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z";
+
+export const faXmark: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/index.ts

@@ -0,0 +1,186 @@
+import clsx from "clsx";
+import moment from "moment";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+// import { ToastContainer } from "react-toastify";
+import "./styles/iui.scss";
+// import "react-toastify/dist/ReactToastify.min.css";
+import type {
+  IAnyObject,
+  IStringObject,
+  IBooleanObject,
+  ISimpleObject,
+  ISimpleObjectWithCode,
+  ISimpleObjectWithCodeNew,
+  IValueLabel,
+} from "./types/IBasic";
+import type { IError } from "./types/IError";
+import type { ITab } from "./types/ITab";
+import type {
+  IPagination,
+  IServerSidePagination,
+  ITable,
+  ITableColumn,
+  ITableDataItem,
+  ITableEditRow,
+  ITableFilter,
+  ITableFilterData,
+  ITableFilterItem,
+  ITableSort,
+} from "./types/ITable";
+import type { ISidebarItem } from "./types/ISidebar";
+import type { ISelectData } from "./types/ISelect";
+// import type { IFormWrapper } from "./Elements/Wrappers/FormWrapper";
+// import type { IPageWrapper } from "./Elements/Wrappers/PageWrapper";
+// import {
+//   checkIfExpired,
+//   dateAddDays,
+//   formatDate,
+//   formatDateAndTime,
+//   formatTime,
+//   formatYearMonth,
+//   getCurrentDateFormattedYMD,
+//   getDaysLeft,
+// } from "./utils/DateUtils";
+// import { formatCurrency, formatCurrencyNoDecimals } from "./utils/NumberUtils";
+// // // import { apiResponseHandler } from "./utils/ApiResponseHandler";
+// // import { toastError, toastSuccess } from "./utils/Toasts";
+// import { maxChar } from "./utils/StringUtils";
+// import {
+//   deleteEmptyProps,
+//   deleteEmptyPropsIncludingArray,
+//   deleteProps,
+//   getActiveFilterNumber,
+//   getVisibleColumnsIds,
+// } from "./utils/ObjectUtils";
+import { Accordions } from "./Elements/Accordions/Accordions";
+import { Alert } from "./Elements/Alert/Alert";
+// import { NotificationBadge } from "./Elements/Badge/NotificationBadge";
+// import { PillBadge } from "./Elements/Badge/PillBadge";
+import { Button } from "./Elements/Button/Button";
+import { IconButton } from "./Elements/Button/IconButton";
+// import { Card } from "./Elements/Card/Card";
+// import { PreLoginCard } from "./Elements/Card/PreLoginCard";
+// import { Dialog } from "./Elements/Dialog/Dialog";
+import { Collapse } from "./Elements/Helper/Collapse";
+import { NoAccessInfo } from "./Elements/Helper/NoAccessInfo";
+// import { Checkbox } from "./Elements/Inputs/Checkbox";
+// import { DateInput } from "./Elements/Inputs/DateInput/DateInput";
+// import { LargeTextInput } from "./Elements/Inputs/LargeTextInput";
+// import { NumberInput } from "./Elements/Inputs/NumberInput";
+// import { PasswordInput } from "./Elements/Inputs/PasswordInput";
+// import { Radio } from "./Elements/Inputs/Radio";
+// import { TextInput } from "./Elements/Inputs/TextInput";
+// import { Select } from "./Elements/Inputs/Selects/Select";
+// import { SelectAsyncPaginate } from "./Elements/Inputs/Selects/SelectAsyncPaginate";
+// import {
+//   FullScreenLoader,
+//   LazyLoader,
+//   Loader,
+// } from "./Elements/Loader/Loader";
+// import { Menu } from "./Elements/Menu/Menu";
+// import { MenuItem } from "./Elements/Menu/MenuItem";
+// import { Sidebar } from "./Elements/Sidebar/Sidebar";
+// import { SetTableFilter } from "./Elements/Table/Components/SetTableFilter";
+// import { Table } from "./Elements/Table/Table";
+// import { TableFooter } from "./Elements/Table/Components/TableFooter";
+// import { Tabs } from "./Elements/Tabs/Tabs";
+import { Tooltip } from "./Elements/Tooltip/Tooltip";
+// import { ConditionalWrapper } from "./Elements/Wrappers/ConditionalWrapper";
+// import { FullPageWrapper } from "./Elements/Wrappers/FullPageWrapper";
+// import { FormWrapper } from "./Elements/Wrappers/FormWrapper";
+// import { PageWrapper } from "./Elements/Wrappers/PageWrapper";
+// import { ItemActionsMenu } from "./Elements/Table/Components/Edit/ItemActionsMenu";
+// import { ItemEditOptionsButtons } from "./Elements/Table/Components/Edit/ItemEditOptionsButtons";
+// import { TableEditRow } from "./Elements/Table/Components/Edit/TableEditRow";
+
+export {
+  //   ToastContainer,
+  Accordions,
+  Alert,
+  //   PillBadge,
+  //   NotificationBadge,
+  Button,
+  IconButton,
+  //   Card,
+  //   PreLoginCard,
+  //   Dialog,
+  Collapse,
+  NoAccessInfo,
+  //   Checkbox,
+  //   DateInput,
+  //   LargeTextInput,
+  //   NumberInput,
+  //   PasswordInput,
+  //   Radio,
+  //   TextInput,
+  //   Select,
+  //   SelectAsyncPaginate,
+  //   FullScreenLoader,
+  //   LazyLoader,
+  //   Loader,
+  //   Menu,
+  //   MenuItem,
+  //   Sidebar,
+  //   SetTableFilter,
+  //   ItemActionsMenu,
+  //   ItemEditOptionsButtons,
+  //   Table,
+  //   TableEditRow,
+  //   TableFooter,
+  //   Tabs,
+  Tooltip,
+  //   ConditionalWrapper,
+  //   FullPageWrapper,
+  //   FormWrapper,
+  //   PageWrapper,
+};
+export {
+  IAnyObject,
+  IStringObject,
+  IBooleanObject,
+  ISimpleObject,
+  ISimpleObjectWithCode,
+  ISimpleObjectWithCodeNew,
+  IValueLabel,
+  IError,
+  ITab,
+  IPagination,
+  IServerSidePagination,
+  ITable,
+  ITableColumn,
+  ITableDataItem,
+  ITableEditRow,
+  ITableFilter,
+  ITableFilterData,
+  ITableFilterItem,
+  ITableSort,
+  ISidebarItem,
+  ISelectData,
+  // IFormWrapper,
+  // IPageWrapper,
+};
+
+// export {
+//   checkIfExpired,
+//   dateAddDays,
+//   formatDate,
+//   formatDateAndTime,
+//   formatTime,
+//   formatYearMonth,
+//   getCurrentDateFormattedYMD,
+//   getDaysLeft,
+//   formatCurrency,
+//   formatCurrencyNoDecimals,
+//   deleteEmptyProps,
+//   deleteEmptyPropsIncludingArray,
+//   deleteProps,
+//   getActiveFilterNumber,
+//   getVisibleColumnsIds,
+//   // apiResponseHandler,
+//   // toastError,
+//   // toastSuccess,
+//   maxChar,
+// };
+
+export { clsx, moment, FontAwesomeIcon };

package/src/styles/App.scss

@@ -0,0 +1,25 @@
+// .App {
+// height: 2000px;
+// width: 2000px;
+// background-color: #e6e7f0;
+// }
+.height-150 {
+  height: 150px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.user-box {
+  display: flex;
+  padding: 20px 10px 0 16px;
+  .user-info {
+    white-space: nowrap;
+  }
+  p {
+    font-size: 12px;
+  }
+}
+.user-box-menu {
+  min-width: 255px;
+}

package/src/styles/iui/common/_animations.scss

@@ -0,0 +1,56 @@
+@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 spin {
+//   from {
+//     transform: rotate(0deg);
+//   }
+//   to {
+//     transform: rotate(360deg);
+//   }
+// }
+
+// animation: spin infinite 20s linear;

package/src/styles/iui/common/_typography.scss

@@ -0,0 +1,76 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
+// @import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;0,900;1,400&display=swap");
+
+* {
+  font-family: 'Roboto', sans-serif;
+}
+// .full-page-container * {
+//   font-family: "Source Serif Pro", serif;
+// }
+
+p,
+h1,
+h2,
+h3,
+h5 {
+  margin: 0;
+}
+p {
+  font-size: $fs-m;
+}
+h1 {
+  font-size: 20px;
+  font-weight: 900;
+}
+h5 {
+  font-size: 48px;
+  font-weight: 900;
+}
+
+.fs-10 {
+  font-size: 10px !important;
+}
+.fs-12 {
+  font-size: 12px !important;
+}
+.fs-13 {
+  font-size: 13px !important;
+}
+.fs-15 {
+  font-size: 15px !important;
+}
+.fs-32 {
+  font-size: 32px !important;
+}
+
+.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;
+}
+.link {
+  color: var(--primary-dark) !important;
+  text-decoration: underline !important;
+  &.inactive {
+    opacity: 0.5;
+  }
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+  &:hover:not(:disabled) {
+    color: var(--primary) !important;
+    opacity: 1;
+  }
+  cursor: pointer;
+}

package/src/styles/iui/common/_variables.scss

@@ -0,0 +1,56 @@
+:root {
+  --primary: rgb(var(--primary-rgb));
+  --primary-rgb: 18, 108, 136;
+  --primary-o10: rgba(var(--primary-rgb), 0.1);
+  --primary-o25: rgba(var(--primary-rgb), 0.25);
+  --primary-light: #309dbf;
+  --primary-dark: #004459;
+  // --primary-dark10: #10617a;
+  --secondary: #ff9500;
+  --secondary-light: #ffaa33;
+  --secondary-dark: #ca5502;
+
+  --background-dark: #f2f3f7;
+
+  --success: #4caf50;
+  --info: #03a9f4;
+  --warning: #ff9500;
+  --error: #f44336;
+
+  --success01: #edf7ed;
+  --info01: #e5f6fd;
+  --warning01: #fff3e4;
+  --error01: #ffeae9;
+
+  --success03: #c9e7ca;
+  --info03: #b3e5fc;
+  --warning03: #ffe0b2;
+  --error03: #fcc6c2;
+}
+
+$input-radius: 4px;
+$container-radius: 25px;
+$container-radius-bottom: 0 0 25px 25px;
+$container-shadow: 0px 0px 5px rgba(180, 177, 177, 0.5);
+$deep-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+
+$table-border: 1px solid rgba(224, 224, 224, 1);
+
+/////// SIZES ////////
+$fs-xs: 10px;
+$fs-s: 12px;
+$fs-m: 13px;
+
+/////// BREAKPOINTS ////////
+$bp-mobile: 'screen and (max-width: 700px)';
+// $bp-tablet: 'screen and (min-width: 701px) and (max-width: 1023px)';
+$bp-mt: 'screen and (max-width: 1023px)';
+$bp-desktop: 'screen and (min-width: 1024px)';
+$portrait: 'screen and (orientation: portrait)';
+// $landscape: 'screen and (orientation: landscape)';
+
+/////// HEADER - SIDEBAR ///////
+
+$header-height: 50px;
+$app-transition: cubic-bezier(0.685, 0.0473, 0.346, 1);

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

@@ -0,0 +1,32 @@
+body {
+  margin: 0;
+}
+*:focus-visible {
+  outline: none !important;
+}
+a {
+  text-decoration: none;
+  color: unset;
+  -webkit-user-drag: none;
+}
+
+.clickable {
+  cursor: pointer;
+  transition: background-color 250ms;
+  &:disabled,
+  &.disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+}
+
+.hover-primary:hover {
+  background-color: rgba(var(--primary-rgb), 0.1);
+}
+.hover-gray:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.no-border {
+  border: none !important;
+}

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

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

package/src/styles/iui/common/helpers/_display.scss

@@ -0,0 +1,54 @@
+.hidden {
+  display: none !important;
+}
+.block {
+  display: block !important;
+}
+.relative {
+  position: relative !important;
+}
+
+.flex {
+  display: flex;
+  &.column {
+    flex-direction: column;
+  }
+  &.center {
+    align-items: center;
+    justify-content: center;
+  }
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}
+.inline-flex {
+  display: inline-flex;
+}
+.flex-grow {
+  flex-grow: 1 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-3 {
+  gap: 1rem;
+}
+.gap-4 {
+  gap: 1.5rem;
+}
+.gap-5 {
+  gap: 3rem;
+}
+.grid {
+  display: grid;
+  &.fr-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  // &.fr-3 {
+  //   grid-template-columns: 1fr 1fr 1fr;
+  // }
+}

package/src/styles/iui/common/helpers/_size.scss

@@ -0,0 +1,17 @@
+.full-screen {
+  height: 100vh;
+  width: 100vw;
+}
+.full-width {
+  width: 100%;
+}
+.half-width {
+  width: 50%;
+}
+.width-fit {
+  width: fit-content;
+}
+
+.full-height {
+  height: 100%;
+}

package/src/styles/iui/common/maps/_align.scss

@@ -0,0 +1,24 @@
+$aligns: (center, left, right);
+$justifies: (
+  center: center,
+  left: left,
+  right: right,
+  around: space-around,
+  between: space-between,
+  evenly: space-evenly,
+);
+
+@each $key in $aligns {
+  .text-#{$key} {
+    text-align: $key !important;
+  }
+  .align-#{$key} {
+    align-items: $key !important;
+  }
+}
+
+@each $key, $value in $justifies {
+  .justify-#{$key} {
+    justify-content: $value !important;
+  }
+}

package/src/styles/iui/common/maps/_spacing.scss

@@ -0,0 +1,78 @@
+// Margin and Padding
+$spacers: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 1rem,
+  4: 1.5rem,
+  5: 3rem,
+);
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $length in $spacers {
+    .#{$abbrev}-#{$size} {
+      #{$prop}: $length !important;
+    }
+    .#{$abbrev}t-#{$size},
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-top: $length !important;
+    }
+    .#{$abbrev}r-#{$size},
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-right: $length !important;
+    }
+    .#{$abbrev}b-#{$size},
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-bottom: $length !important;
+    }
+    .#{$abbrev}l-#{$size},
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-left: $length !important;
+    }
+  }
+}
+
+// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+@each $size, $length in $spacers {
+  @if $size != 0 {
+    .m-n#{$size} {
+      margin: -$length !important;
+    }
+    .mt-n#{$size},
+    .my-n#{$size} {
+      margin-top: -$length !important;
+    }
+    .mr-n#{$size},
+    .mx-n#{$size} {
+      margin-right: -$length !important;
+    }
+    .mb-n#{$size},
+    .my-n#{$size} {
+      margin-bottom: -$length !important;
+    }
+    .ml-n#{$size},
+    .mx-n#{$size} {
+      margin-left: -$length !important;
+    }
+  }
+}
+
+// Some special margin utils
+.m-auto {
+  margin: auto !important;
+}
+.mt-auto,
+.my-auto {
+  margin-top: auto !important;
+}
+.mr-auto,
+.mx-auto {
+  margin-right: auto !important;
+}
+.mb-auto,
+.my-auto {
+  margin-bottom: auto !important;
+}
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}