@webitel/ui-sdk 0.1.13 → 0.1.100

package/src/css/components/organisms/wt-table/_variables.scss

@@ -0,0 +1,16 @@
+
+:root {
+  --table-col-min-width: 140px;
+
+  --table-head-sort-arrow-margin: 10px;
+  --table-head-borer-bottom: 1px solid;
+  --table-head-borer-color: var(--main-outline-color);
+
+  --table-min-height: 24px; // 24px icon size + 2 paddings
+  --table-column-gap: 20px;
+  --table-row-padding: 10px;
+
+  --table-primary-color: var(--main-primary-color);
+  --table--hover-color: var(--main-secondary-accent-color);
+  --table-secondary-color: #F9F9F9; // zebra
+}

package/src/css/components/organisms/wt-table-actions/_variables.scss

@@ -0,0 +1,4 @@
+
+:root {
+  --table-actions-icon-gap: 20px;
+}

package/src/css/display-helpers/_display-helpers.scss

@@ -0,0 +1,21 @@
+.d-none {
+  display: none;
+}
+
+@media (#{$media} and #{$media-width-sm}) {
+  .d-none-sm {
+    display: none;
+  }
+  .d-block-sm {
+    display: block;
+  }
+}
+
+@media (#{$media} and #{$media-width-xs}) {
+  .d-none-xs {
+    display: none;
+  }
+  .d-block-xs {
+    display: block;
+  }
+}

package/src/css/fonts/_fonts.scss

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'Montserrat Semi';
+  src: url('../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat Regular';
+  src: url('../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+}

package/src/css/main.scss

@@ -1,66 +1,68 @@
-@import "./styleguide/styleguide";
-@import "components/components";
-
-:root {
-  --transition: 0.2s;
-  --border-radius: 5px;
-
-  --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
-}
-
-@mixin width-fit-content {
-  width: fit-content;
-  width: -moz-fit-content;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-  height: 100%;
-  margin: 0;
-  font-family: 'Montserrat Regular', monospace;
-  font-size: 100%;
-}
-
-//main {
-//  min-height: 100%;
-//  height: 100%;
-//}
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-  font-weight: normal;
-}
-
-//reset ul styles
-ul {
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-iframe {
-  border: none;
-  outline: none;
-}
-
-button {
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline-color: #000;
-  cursor: pointer;
-}
-
-a {
-  color: #000;
-  text-decoration: none;
-}
-
-.hidden {
-  opacity: 0;
-  pointer-events: none;
+@import 'sizes/sizes';
+@import 'display-helpers/display-helpers';
+@import 'styleguide/styleguide';
+@import 'transitions/transitions';
+@import 'components/components';
+
+:root {
+  --transition: 0.2s;
+
+  --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+@mixin width-fit-content {
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: 'Montserrat Regular', monospace;
+  font-size: 100%;
+}
+
+//main {
+//  min-height: 100%;
+//  height: 100%;
+//}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+  font-weight: normal;
+}
+
+//reset ul styles
+ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+iframe {
+  border: none;
+  outline: none;
+}
+
+button {
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline-color: #000;
+  cursor: pointer;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+.hidden {
+  opacity: 0;
+  pointer-events: none;
 }

package/src/css/shadows/_shadows.scss

@@ -0,0 +1,7 @@
+:root {
+  --shadow-style-down-50: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-style-down-100: 0px 0px 1px rgba(0, 0, 0, 0.15), inset 1px 1px 1px rgba(0, 0, 0, 0.05), inset 0px 0px 8px rgba(0, 0, 0, 0.1);
+  --shadow-style-up-50: 1px 1px 2px rgba(0, 0, 0, 0.08), inset 1px 1px 1px #FFFFFF, inset -1px -1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-style-up-100: 1px 1px 2px rgba(0, 0, 0, 0.05), -1px -1px 5px #FFFFFF, inset 1px 1px 1px #FFFFFF, inset -1px -1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-style-font: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}

package/src/css/sizes/_sizes.scss

@@ -0,0 +1,2 @@
+@import 'viewport-breakpoints';
+@import 'spacing';

package/src/css/sizes/_spacing.scss

@@ -0,0 +1,33 @@
+//@import './viewport-breakpoints';
+
+:root {
+  // Start point
+  --_spacing-multiplicity: 4px;
+
+  // Spacings
+  --spacing--xs: calc(var(--_spacing-multiplicity) * 1);
+  --spacing--sm: calc(var(--_spacing-multiplicity) * 2);
+  --spacing--md: calc(var(--_spacing-multiplicity) * 3);
+  --spacing--lg: calc(var(--_spacing-multiplicity) * 4);
+  --spacing--xl: calc(var(--_spacing-multiplicity) * 5);
+  --spacing--2xl: calc(var(--_spacing-multiplicity) * 6);
+  --spacing--3xl: calc(var(--_spacing-multiplicity) * 7);
+
+  // Border radius
+  --border-radius: var(--spacing--xs);
+
+  // DEPRECATED
+  --component-padding: var(--spacing--lg);
+  --component-spacing: var(--spacing--lg);
+  --icon-spacing: var(--spacing--sm);
+
+  //@media (#{$media} and #{$media-width-sm}) {
+  //  --component-padding: 10px;
+  //  --component-spacing: 10px;
+  //}
+  //
+  //@media (#{$media} and #{$media-width-xs}) {
+  //  --component-padding: 10px;
+  //  --component-spacing: 1px;
+  //}
+}

package/src/css/sizes/_viewport-breakpoints.scss

@@ -0,0 +1,20 @@
+/*
+xl: @media only screen and (min-width: $viewport-xl) {}
+lg: @media only screen and (max-width: $viewport-xl) {}
+md: @media only screen and (max-width: $viewport-lg) {}
+sm: @media only screen and (max-width: $viewport-md) {}
+xs: @media only screen and (max-width: $viewport-sm) {}
+ */
+
+$viewport-xl: 1440px;
+$viewport-lg: 1280px;
+$viewport-md: 992px;
+$viewport-sm: 600px;
+
+$media: #{'only screen'};
+$media-width-xl: #{'min-width: '} $viewport-xl;
+$media-width-lg: #{'max-width: '} $viewport-xl;
+$media-width-md: #{'max-width: '} $viewport-lg;
+$media-width-sm: #{'max-width: '} $viewport-md;
+$media-width-xs: #{'max-width: '} $viewport-sm;
+

package/src/css/styleguide/{styleguide.scss → _styleguide.scss}

@@ -1,3 +1,4 @@
-@import './scroll';
-@import '../typography/typography';
-@import '../colors/colors';
+@import './scroll';
+@import '../typography/typography';
+@import '../colors/colors';
+@import '../shadows/shadows';

package/src/css/styleguide/scroll.scss

@@ -1,40 +1,43 @@
-:root {
-  --scrollbar-width: 4px;
-  --scrollbar-thumb-width: 4px;
-  --scrollbar-bg-color: var(--main-ouline-color);
-  --scrollbar-thumb-color: var(--main-accent-color);
-  --scrollbar-border-radius: 7px;
-}
-
-%wt-scrollbar {
-  // scrollbar itself
-  &::-webkit-scrollbar {
-    width: var(--scrollbar-width);
-    height: var(--scrollbar-width);
-    background-color: var(--scrollbar-bg-color);
-    cursor: pointer;
-  }
-
-  // scrollable element
-  &::-webkit-scrollbar-thumb {
-    width: var(--scrollbar-thumb-width);
-    height: var(--scrollbar-thumb-width);
-    background-color: var(--scrollbar-thumb-color);
-    border-radius: var(--scrollbar-border-radius);
-  }
-}
-
-%wt-distant-scrollbar {
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 18px;
-  }
-  &::-webkit-scrollbar-thumb {
-    height: 2px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-    background-color: var(--scrollbar-thumb-color);
-    border-radius: var(--scrollbar-border-radius);
-   // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
-  }
-}
+:root {
+  --scrollbar-width: 5px;
+  --scrollbar-height: 5px;
+  --scrollbar-thumb-width: 5px;
+  --scrollbar-bg-color: var(--main-color);
+  --scrollbar-thumb-color: var(--secondary-color);
+  --scrollbar-border-radius: var(--border-radius);
+}
+
+%wt-scrollbar {
+  // scrollbar itself
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+    height: var(--scrollbar-height);
+    background-color: var(--scrollbar-bg-color);
+    cursor: pointer;
+    border-radius: 50%; // dont overlay borders
+  }
+
+  // scrollable element
+  &::-webkit-scrollbar-thumb {
+    width: var(--scrollbar-thumb-width);
+    height: var(--scrollbar-thumb-height);
+    background-color: var(--scrollbar-thumb-color);
+    border-radius: var(--scrollbar-border-radius);
+  }
+}
+
+%wt-distant-scrollbar {
+  &::-webkit-scrollbar {
+    width: 14px;
+    height: 18px;
+    background-color: var(--scrollbar-bg-color);
+  }
+  &::-webkit-scrollbar-thumb {
+    height: 2px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    background-color: var(--scrollbar-thumb-color);
+    border-radius: var(--scrollbar-border-radius);
+   // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+  }
+}

package/src/css/transitions/_transitions.scss

@@ -0,0 +1 @@
+@import "./fade/fade";

package/src/css/transitions/fade/_fade.scss

@@ -0,0 +1,8 @@
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity var(--transition);
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}

package/src/css/typography/_typography.scss

@@ -1,72 +1,72 @@
-
-%typo-heading-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 24px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 18px;
-  }
-  line-height: 24px;
-}
-
-%typo-strong-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-strong-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-strong-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}
-
-%typo-body-lg {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-body-md {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-body-sm {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}
+
+%typo-heading-lg {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 24px;
+  }
+  line-height: 30px;
+}
+
+%typo-heading-md {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 20px;
+  }
+  line-height: 30px;
+}
+
+%typo-heading-sm {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 18px;
+  }
+  line-height: 24px;
+}
+
+%typo-strong-lg {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 14px;
+  }
+  line-height: 18px;
+}
+
+%typo-strong-md {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 12px;
+  }
+  line-height: 14px;
+}
+
+%typo-strong-sm {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 10px;
+  }
+  line-height: 12px;
+}
+
+%typo-body-lg {
+  font: {
+    family: 'Montserrat Regular', monospace;
+    size: 14px;
+  }
+  line-height: 18px;
+}
+
+%typo-body-md {
+  font: {
+    family: 'Montserrat Regular', monospace;
+    size: 12px;
+  }
+  line-height: 14px;
+}
+
+%typo-body-sm {
+  font: {
+    family: 'Montserrat Regular', monospace;
+    size: 10px;
+  }
+  line-height: 12px;
+}

package/src/enums/AgentStatus/AgentStatus.enum.js

@@ -0,0 +1,6 @@
+export default Object.freeze({
+  ONLINE: 'online',
+  PAUSE: 'pause',
+  OFFLINE: 'offline',
+  BREAK_OUT: 'break_out',
+});

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-multi-spaces */
+
+const AdminSections = Object.freeze({
+  // DIRECTORY
+  LICENSE: 'license',                   // permissions: add
+  USERS: 'users',                       // scope: users
+  DEVICES: 'devices',                   // scope: devices
+
+  // ROUTING
+  FLOW: 'flow',                          // scope: flow
+  DIALPLAN: 'dialplan',                  // scope: acr_routing
+  GATEWAYS: 'gateways',                  // scope: gateways
+  CHAT_GATEWAYS: 'chat-gateways',        // scope: chats
+
+  // LOOKUPS
+  BLACKLIST: 'blacklist',                // scope: cc_list
+  REGIONS: 'regions',                    // scope: lookups
+  CALENDARS: 'calendars',                // scope: calendars
+  COMMUNICATIONS: 'communications',      // scope: lookups
+  PAUSE_CAUSE: 'pause-cause',            // scope: lookups
+  MEDIA: 'media',                        // scope: media_file
+
+  // CONTACT CENTER
+  SKILLS: 'skills',                     // scope: lookups
+  AGENTS: 'agents',                      // scope: cc_agent
+  BUCKETS: 'buckets',                    // scope: cc_bucket
+  QUEUES: 'queues',                      // scope: cc_queue
+  MEMBERS: 'members',                    // scope: cc_queue
+  RESOURCE_GROUPS: 'resource-groups',    // scope: cc_resource_group
+  RESOURCES: 'resources',               // scope: cc_resource
+  TEAMS: 'teams',                       // scope: cc_team
+
+  // INTEGRATIONS
+  STORAGE: 'storage',                   // scope: storage_profile
+
+  // PERMISSIONS
+  OBJECTS: 'objects',                // permissions: add
+  ROLES: 'roles',                   // scope: roles
+});
+
+export default AdminSections;

package/src/enums/WebitelApplications/SupervisorSections.enum.js

@@ -0,0 +1,7 @@
+const SupervisorSections = Object.freeze({
+  QUEUES: 'queues',
+  AGENTS: 'agents',
+  ACTIVE_CALLS: 'activeCalls',
+});
+
+export default SupervisorSections;

package/src/enums/WebitelApplications/WebitelApplications.enum.js

@@ -0,0 +1,10 @@
+const WebitelApplications = Object.freeze({
+  ADMIN: 'admin',
+  AGENT: 'agent',
+  SUPERVISOR: 'supervisor',
+  HISTORY: 'history',
+  AUDIT: 'audit',
+  ANALYTICS: 'grafana',
+});
+
+export default WebitelApplications;