@inceptionbg/iui 2.0.5 → 2.0.6

package/src/styles/components/_table.scss

@@ -0,0 +1,270 @@
+@use '../variables/bp';
+
+$pagination-color: rgba(0, 0, 0, 0.8);
+
+table {
+  border-spacing: 0px;
+  border-collapse: collapse;
+}
+.iui-table {
+  //// Header ////
+  thead {
+    z-index: 2;
+    background-color: #f9fafb;
+  }
+  th {
+    padding: 0;
+    border-left: var(--border);
+    border-right: var(--border);
+
+    font-weight: 400;
+    p {
+      font-size: 12px;
+    }
+  }
+  .table-container {
+    overflow: auto;
+    // scroll-snap-type: y mandatory;
+  }
+  .sticky-header {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+  }
+  .border-row {
+    height: 1px;
+    background-color: #dfe1eb;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  //// Body ////
+  // tbody.no-last-border tr:last-child td {
+  //   border: none;
+  // }
+  // Row
+  tr {
+    // scroll-snap-align: start;
+    &.clickable:hover,
+    &.selected {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.focused {
+      background-color: var(--primary-o10);
+    }
+    &.loading {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+  // Cell
+  th,
+  td {
+    // 1px solid #f2f4f7;
+    // Cell colors
+    &.secondary {
+      background-color: rgba(0, 0, 0, 0.04);
+      // border-bottom: 1px solid #d3d3d3;
+    }
+  }
+  td {
+    border: var(--border);
+    // border-bottom: var(--border);
+    font-size: 14px;
+    box-sizing: border-box;
+    height: 52px;
+    padding: 7px 16px;
+    &.s {
+      height: 40px;
+      padding: 2px 16px;
+    }
+    &.xs {
+      height: 30px;
+      padding: 2px 16px;
+    }
+  }
+  .clickable-column:hover {
+    background-color: var(--primary-o10) !important;
+  }
+
+  //// Footer ////
+
+  .table-footer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 52px;
+    padding: 8px;
+    font-size: var(--fs-m);
+    box-sizing: border-box;
+  }
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: $pagination-color;
+    p,
+    // select,
+    .offset-input {
+      font-size: 12px !important;
+    }
+    p {
+      white-space: nowrap;
+    }
+    .separator {
+      height: 16px;
+      width: 1px;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+    select {
+      appearance: none;
+      color: $pagination-color;
+      background: none;
+      border: none;
+      text-align: right;
+      cursor: pointer;
+      padding: 0 8px;
+      user-select: none;
+      margin-left: 8px;
+      margin-right: 16px;
+    }
+    .offset-input {
+      width: 40px;
+      input {
+        font-size: 12px !important;
+        height: 24px;
+        text-align: center;
+        padding: 0 5px;
+      }
+    }
+
+    @media #{bp.$mobile} {
+      flex-direction: column;
+      align-items: end;
+    }
+  }
+
+  @media #{bp.$portrait} {
+    tbody,
+    tr {
+      display: block;
+    }
+    tr {
+      padding: 20px 0;
+    }
+    td {
+      display: flex;
+      align-items: center;
+      height: unset !important;
+      text-align: left;
+    }
+    thead {
+      display: none;
+    }
+    tbody tr td {
+      &:before {
+        content: attr(data-th);
+        font-weight: bold;
+        text-align: left;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+
+.iui-table-filter {
+  .iui-dialog-content {
+    padding: 0;
+    margin: 8px 0;
+  }
+  .filters-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    .search-input {
+      max-width: 250px;
+    }
+  }
+  .table-filter-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    // .label {
+    //   width: 150px;
+    // }
+    .field {
+      //   display: inline-flex;
+      //   margin: 0 8px;
+      // width: 100%;
+      flex: 1;
+    }
+  }
+}
+
+.dual-list-container {
+  .dual-list-content {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 12px;
+  }
+  .list-box {
+    border: var(--border);
+    border-radius: 16px;
+    padding: 10px;
+    user-select: none;
+    & > .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      font-size: 12px;
+      svg {
+        color: rgba(0, 0, 0, 0.6);
+        margin-left: 1rem;
+      }
+      &:hover {
+        background-color: var(--primary-o10);
+      }
+      &:active {
+        background-color: var(--primary-o25);
+      }
+    }
+  }
+  .exchange-icon {
+    display: flex;
+    align-items: center;
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+
+.edit-row {
+  background: var(--neutral-100);
+  td {
+    padding: 4px !important;
+    // padding: 0 !important;
+  }
+  .iui-input-wrapper-field {
+    border: none;
+    border-radius: 0;
+    // height: 51px;
+    box-shadow: none !important;
+  }
+}
+.primary-row {
+  background-color: rgba(var(--primary-rgb), 0.15);
+}
+.secondary-row {
+  background-color: #f1f1f1;
+}
+
+.table-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+}

package/src/styles/components/_tabs.scss

@@ -0,0 +1,33 @@
+.iui-tabs {
+  display: flex;
+  overflow: auto;
+  border-bottom: var(--border);
+  padding-bottom: 4px;
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+}
+.iui-tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 2px solid white;
+  color: var(--neutral-400);
+  user-select: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 12px 12px 8px;
+  svg {
+    font-size: 15px;
+  }
+  &:hover:not(.disabled) {
+    color: var(--text);
+  }
+  &.selected:not(.disabled) {
+    border-color: var(--primary);
+    color: var(--primary);
+  }
+}
+.iui-tab-content {
+  padding: 8px;
+}

package/src/styles/components/_tooltip.scss

@@ -0,0 +1,48 @@
+$tooltip-bg: var(--neutral-700);
+
+.tooltip-container {
+  position: fixed;
+  border-radius: 8px;
+  background: $tooltip-bg;
+  color: var(--text-inverse);
+  font-size: 12px;
+  font-weight: bold;
+  padding: 8px 16px;
+  text-align: center;
+  z-index: 1001;
+  transition: 0.3s opacity;
+  &:not(.visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+.tooltip {
+  position: relative;
+  height: 100%;
+  white-space: pre-line;
+  .arrow {
+    position: absolute;
+    border: 8px solid $tooltip-bg;
+    z-index: 1001;
+    &.top {
+      top: calc(100% + 8px);
+      left: calc(50% - 8px);
+      border-color: $tooltip-bg transparent transparent transparent;
+    }
+    &.bottom {
+      bottom: calc(100% + 8px);
+      left: calc(50% - 8px);
+      border-color: transparent transparent $tooltip-bg transparent;
+    }
+    &.left {
+      top: calc(50% - 8px);
+      left: calc(100% + 16px);
+      border-color: transparent transparent transparent $tooltip-bg;
+    }
+    &.right {
+      top: calc(50% - 8px);
+      right: calc(100% + 16px);
+      border-color: transparent $tooltip-bg transparent transparent;
+    }
+  }
+}

package/src/styles/components/_tree.scss

@@ -0,0 +1,21 @@
+.tree-item {
+  min-height: 28px;
+  padding: 4px 0;
+  .extendable-icon {
+    width: 28px;
+    .rotate {
+      transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) all;
+      &.rotate90 {
+        transform: rotate(90deg);
+      }
+    }
+  }
+  .tree-item-name {
+    padding: 4px;
+    &:hover,
+    &.active {
+      background-color: var(--primary-o25);
+      border-radius: 4px;
+    }
+  }
+}

package/src/styles/components/_widget.scss

@@ -0,0 +1,90 @@
+.widget-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-auto-flow: dense;
+  gap: 60px;
+  .grid-span2 {
+    grid-column: span 2;
+  }
+  .grid-span3 {
+    grid-column: span 3;
+  }
+  .grid-span4 {
+    grid-column: span 4;
+  }
+  @media (min-width: 1500px) and (max-width: 1800px) {
+    grid-template-columns: 1fr 1fr 1fr;
+    .grid-span4 {
+      grid-column: span 3;
+    }
+  }
+  @media (min-width: 1150px) and (max-width: 1499px) {
+    grid-template-columns: 1fr 1fr;
+    .grid-span3,
+    .grid-span4 {
+      grid-column: span 2;
+    }
+  }
+  @media (max-width: 1149px) {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+}
+
+.dashboard-widget {
+  background: var(--white);
+  box-shadow: var(--container-shadow);
+  padding: 30px;
+  color: #000;
+  border-radius: var(--container-radius);
+  width: inherit;
+  h1 {
+    margin: 15px 0;
+  }
+  .widget-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--primary-o10);
+    color: var(--primary);
+    height: 48px;
+    width: 48px;
+    border-radius: 10px;
+    svg {
+      height: 22px;
+      width: 22px;
+    }
+  }
+  &.warning {
+    border: 10px solid var(--warning);
+    padding: 20px;
+    .widget-icon {
+      color: var(--danger);
+    }
+  }
+  &.info {
+    border: 10px solid var(--primary);
+    padding: 20px;
+  }
+}
+
+.short-links-widget {
+  font-size: var(--fs-m);
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    li {
+      margin: 0;
+      padding: 15px 5px;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid silver;
+      }
+    }
+  }
+}

package/src/styles/pages/_fullScreenPage.scss

@@ -0,0 +1,64 @@
+@use '../variables/bp';
+
+#content {
+  grid-area: content;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+#img {
+  grid-area: img;
+  align-self: flex-end;
+  width: 100%;
+}
+#actions {
+  grid-area: actions;
+  align-self: flex-start;
+  padding-top: 24px;
+}
+
+.full-screen-page {
+  height: 100dvh;
+  width: 100dvw;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    'content img'
+    'actions .';
+  align-items: center;
+  align-content: center;
+  gap: 32px;
+  padding: 64px 128px;
+}
+.img-403 {
+  font-size: 200px;
+  color: var(--danger);
+  text-align: center;
+  font-weight: 700;
+}
+
+@media #{bp.$mobile} {
+  .full-screen-page {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr auto;
+    grid-template-areas:
+      'img'
+      'content'
+      'actions';
+    padding: 16px;
+  }
+  #content {
+    align-self: flex-start;
+    gap: 16px;
+  }
+  #actions {
+    align-self: flex-end;
+  }
+  .iui-btn {
+    width: 100%;
+  }
+  .img-403 {
+    font-size: 150px;
+  }
+}

package/src/styles/variables/_bp.scss

@@ -0,0 +1,5 @@
+$mobile: 'screen and (max-width: 500px)';
+$not-mobile: 'screen and (min-width: 501px)';
+$mobileTablet: 'screen and (max-width: 1023px)';
+$desktop: 'screen and (min-width: 1024px)';
+$portrait: 'screen and (orientation: portrait)';

package/src/styles/variables/_variables.scss

@@ -0,0 +1,130 @@
+:root {
+  /////// COLORS ////////
+  --primary-100: #e7f2f9;
+  --primary-200: #c2deed;
+  --primary-300: #86c0df;
+  --primary-400: #1375aa;
+  --primary-500: #0f5f8a;
+  --primary-600: #0b4b6f;
+  --primary-700: #093858;
+
+  --neutral-100: #edf0f2;
+  --neutral-200: #e3e8ee;
+  --neutral-300: #bac5ce;
+  --neutral-400: #8f9aa8;
+  --neutral-500: #667085;
+  --neutral-600: #545f78;
+  --neutral-700: #3a4764;
+  // --neutral-800: #253050;
+  --neutral-t: rgba(16, 24, 40, 0.5);
+
+  --info-100: #e0ecfc;
+  --info-200: #9fcaff;
+  --info-300: #6babf7;
+  --info-400: #448fe6;
+  --info-500: #2f7bd0;
+  --info-600: #2261a7;
+  --info-700: #13457c;
+  // --info-800: #143962;
+
+  --success-100: #d3f1da;
+  --success-200: #b9e2c8;
+  --success-300: #44c379;
+  --success-400: #33a865;
+  --success-500: #2f8653;
+  --success-600: #2d7248;
+  --success-700: #28593a;
+  // --success-800: #223e2b;
+
+  --warning-100: #fef0c7;
+  --warning-200: #e8b275;
+  --warning-300: #e79d47;
+  --warning-400: #ee9528;
+  --warning-500: #d17f14;
+  --warning-600: #b17a42;
+  --warning-700: #845d30;
+  // --warning-800: #694a26;
+
+  --danger-100: #fceae8;
+  --danger-200: #f7d7d4;
+  --danger-300: #dc776f;
+  --danger-400: #de4f45;
+  --danger-500: #d92d20;
+  --danger-600: #c5261b;
+  --danger-700: #a11b12;
+  // --danger-800: #83120c;
+
+  --primary: var(--primary-500);
+  --neutral: var(--neutral-500);
+  --info: var(--info-500);
+  --success: var(--success-500);
+  --warning: var(--warning-500);
+  --danger: var(--danger-500);
+
+  --white: #ffffff;
+  --text: var(--neutral-700);
+  --text-inverse: var(--white);
+  --text-disabled: var(--neutral-400);
+  --background-disabled: var(--neutral-100);
+  --neutral-hover: var(--neutral-200);
+  --border-color: var(--neutral-300);
+
+  --link: #126c88;
+  --link-alt: #004459;
+
+  /////// SIZES ////////
+  // --fs-xs: 10px;
+  // --fs-s: 12px;
+  --fs-m: 14px;
+  // --fs-l: 16px;
+
+  /////// OTHER ////////
+  --header-height: 60px;
+  --border: 1px solid var(--border-color);
+  --sidebar-width: 260px;
+  --sidebar-collapsed-width: 54px;
+
+  --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);
+}
+
+[data-theme='MTS'] {
+  --primary-100: hsl(351, 77%, 95%);
+  --primary-200: hsl(351, 85%, 90%);
+  --primary-300: hsl(351, 71%, 75%);
+  --primary-400: hsl(351, 80%, 65%);
+  --primary-500: hsl(351, 85%, 52%);
+  --primary-600: hsl(351, 85%, 44%);
+  --primary-700: hsl(351, 85%, 35%);
+
+  --neutral-100: hsl(351, 0%, 94%);
+  --neutral-200: hsl(351, 0%, 91%);
+  --neutral-300: hsl(351, 0%, 77%);
+  --neutral-400: hsl(351, 0%, 61%);
+  --neutral-500: hsl(351, 0%, 46%);
+  --neutral-600: hsl(351, 0%, 40%);
+  --neutral-700: hsl(351, 0%, 31%);
+  --neutral-t: rgba(16, 24, 40, 0.5);
+
+  --primary: var(--primary-500);
+  --neutral: var(--neutral-500);
+
+  --text: var(--neutral-700);
+  --text-disabled: var(--neutral-400);
+  --background-disabled: var(--neutral-100);
+  --neutral-hover: var(--neutral-200);
+  --border-color: var(--neutral-200);
+
+  --secondary: #ff9500;
+}
+[data-theme='PPL'] {
+  --primary-rgb: 0, 144, 223;
+  // --primary: rgb(var(--primary-rgb));
+  // --primary-o10: rgba(var(--primary-rgb), 0.1);
+  // --primary-o25: rgba(var(--primary-rgb), 0.25);
+  --primary-light: #309dbf;
+  --primary-dark: #004459;
+}

package/src/types/Base/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/types/IBasic.ts

@@ -0,0 +1,31 @@
+export type DeepPartial<T> = T extends Array<infer U>
+  ? Array<DeepPartial<U>>
+  : T extends object
+  ? { [P in keyof T]?: DeepPartial<T[P]> }
+  : T;
+
+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 IValueLabel {
+  value: any;
+  label: string;
+}

package/src/types/IError.ts

@@ -0,0 +1,5 @@
+export interface IError {
+  errorMessage: string;
+  errorCode?: string;
+  values?: Record<string, string>;
+}