@webitel/ui-sdk 0.1.1 → 0.1.2-vite

package/src/components/wt-tooltip/wt-tooltip.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    :class="{
+      'wt-tooltip--contrast': contrast,
+      'wt-tooltip--visible': isVisible,
+     }"
+    class="wt-tooltip"
+  >
+    <div
+      ref="activator"
+      class="wt-tooltip__activator"
+    >
+      <slot name="activator"></slot>
+    </div>
+    <wt-tooltip-floating
+      v-if="isVisible"
+      ref="floating"
+      class="wt-tooltip__floating"
+      v-clickaway="hideTooltip"
+      :class="[popperClass]"
+      :style="floatingStyles"
+      :triggers="popperTriggers"
+      @show="showTooltip"
+      @hide="hideTooltip"
+    >
+      <slot v-bind="{ hide: hideTooltip }"></slot>
+    </wt-tooltip-floating>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, onMounted, watch,
+} from 'vue';
+import {
+  useFloating, autoPlacement, shift, flip, offset, autoUpdate,
+} from '@floating-ui/vue';
+import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions';
+import WtTooltipFloating from './_internals/wt-tooltip-floating.vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  contrast: {
+    type: Boolean,
+    default: false,
+  },
+  placement: {
+    type: String,
+    default: 'auto',
+  },
+  popperTriggers: {
+    type: Array,
+    default: () => [],
+  },
+  triggers: {
+    type: Array,
+    default: () => ['hover', 'focus', 'touch'],
+  },
+  popperClass: {
+    type: String,
+    default: '',
+  },
+});
+
+const activator = ref(null);
+const floating = ref(null);
+
+const isVisible = ref(false);
+
+const showTooltip = (event = {}) => {
+  if (isVisible.value) return;
+  isVisible.value = true;
+
+  // https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/components/Popper.ts#L884
+  event.usedByTooltip = true;
+};
+
+const hideTooltip = (event = {}) => {
+  if (event.usedByTooltip) return;
+  isVisible.value = false;
+};
+
+// https://floating-ui.com/docs/misc#clipping
+const { floatingStyles } = useFloating(activator, floating, {
+  placement: props.placement === 'auto' ? null : props.placement,
+  strategy: 'fixed', // https://floating-ui.com/docs/computeposition#strategy
+  // https://floating-ui.com/docs/middleware
+
+  /* WE SHOULD USE v-if INSTEAD OF OPACITY VISIBILITY
+  TOGGLE BECAUSE OF PERFORMANCE ISSUES, RELATED TO USAGE OF AUTO_UPDATE OF POSITIONS
+  */
+  whileElementsMounted: autoUpdate, // https://floating-ui.com/docs/vue#anchoring
+  middleware: [
+    shift(), offset(4),
+    props.placement === 'auto' ? autoPlacement() : flip(),
+  ],
+});
+
+useTooltipTriggerSubscriptions({
+  target: activator,
+  triggers: props.triggers,
+  show: showTooltip,
+  hide: hideTooltip,
+});
+
+watch(props.visible, (value) => {
+  if (value) showTooltip();
+  else hideTooltip();
+});
+
+onMounted(() => {
+  if (props.visible) showTooltip();
+});
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-tooltip {
+  display: inline-block;
+  height: fit-content;
+
+  &__activator {
+    line-height: 0;
+  }
+
+  .wt-tooltip-floating {
+    @extend %typo-body-2;
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    color: var(--contrast-color);
+    background: var(--main-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+    z-index: 1000;
+  }
+
+  &--contrast {
+    .wt-tooltip-floating {
+      color: var(--main-color);
+      background: var(--contrast-color);
+    }
+  }
+}
+</style>

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -0,0 +1,14 @@
+import { useCachedInterval } from '../useCachedInterval';
+
+describe('useCachedInterval', () => {
+  it('subscribe', (done) => {
+    const callback = jest.fn();
+    const { subscribe } = useCachedInterval({ timeout: 10 });
+    subscribe(callback);
+    expect(callback).toHaveBeenCalledTimes(1);
+    setTimeout(() => {
+      expect(callback).toHaveBeenCalledTimes(2);
+      done();
+    }, 10);
+  });
+});

package/src/composables/useCachedInterval/useCachedInterval.js

@@ -0,0 +1,21 @@
+import { onBeforeUnmount } from 'vue';
+import preventHiddenPageCallsDecorator
+  from '../../scripts/preventHiddenPageCallsDecorator';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useCachedInterval = ({
+                             timeout,
+                             localStorageKey = 'auto-refresh',
+                           }) => {
+  let interval = null;
+
+  onBeforeUnmount(() => {
+    if (interval) clearInterval(interval);
+  });
+  const subscribe = (callback) => {
+    const _timeout = timeout || +localStorage.getItem(localStorageKey) || 5 * 60 * 1000;
+    callback();
+    interval = setInterval(preventHiddenPageCallsDecorator(callback), _timeout);
+  };
+  return { subscribe };
+};

package/src/composables/useDestroyableSortable/useDestroyableSortable.js

@@ -0,0 +1,66 @@
+import Sortable from 'sortablejs';
+import {
+  ref,
+  nextTick,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+
+/**
+ * @param elRef
+ * @param options
+ * @returns {{reloadSortable: Ref<UnwrapRef<boolean>>}}
+ *
+ * @description initializes Sortable on passed element ref and reinitializes it after each reorder
+ *
+ * WHY TO REINITIALIZE SORTABLE AFTER EACH ARRAY REORDER?
+ * Sortable and Vue both changing DOM so that there are collisions
+ * because both Vue and Sortable try to put element to the position. So element is put incorrectly.
+ *
+ * There are 2 vue packages for sortable (vue 2 and vue 3), but I had encountered issues when tried to use them.
+ * Also, it seems to me that they aren't supported now :(
+ *
+ * So that I decided to reinitialize Sortable each time order changes to represent it correctly.
+ * Bad decision, but I haven't come up with a better one
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export function useDestroyableSortable(elRef, options) {
+  let sortable = null;
+
+  const reloadSortable = ref(false);
+
+  function destroySortable() {
+    return sortable.destroy();
+  }
+
+  function initSortable() {
+    const replaceSortable = async () => {
+      if (!sortable) return;
+      destroySortable();
+      reloadSortable.value = true;
+      await nextTick();
+      reloadSortable.value = false;
+      await nextTick();
+      initSortable();
+    };
+
+    sortable = Sortable.create(elRef.value, {
+      ...options,
+      onEnd: async (e) => {
+        if (options.onEnd) options.onEnd(e);
+        await replaceSortable();
+      },
+    });
+  }
+
+  onMounted(() => {
+    initSortable();
+  });
+
+  onUnmounted(() => {
+    destroySortable();
+  });
+
+  return { reloadSortable };
+}

package/src/composables/useRepresentableAgentPauseCause/__tests__/useRepresentableAgentPauseCause.spec.js

@@ -0,0 +1,83 @@
+import {
+  useRepresentableAgentPauseCause,
+} from '../useRepresentableAgentPauseCause';
+
+
+describe('useRepresentableAgentPauseCause', () => {
+  it('correctly computes duration', () => {
+    const pauseCauses = { value: [{ durationMin: 10, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].duration).toBe('00:10');
+  });
+  it('isOverflow with limit = 0 returns false', () => {
+    const pauseCauses = { value: [{ durationMin: 10, limitMin: 0 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration < limit returns false', () => {
+    const pauseCauses = { value: [{ durationMin: 10, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration > limit returns true', () => {
+    const pauseCauses = { value: [{ durationMin: 14, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(true);
+  });
+
+  it('isOverflow with duration = limit returns false', () => {
+    const pauseCauses = { value: [{ durationMin: 12, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+
+  it('correctly computes progressColor', () => {
+    const pauseCauses = { value: [{ durationMin: 10, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+
+  it('correctly computes progressColor with duration > limit', () => {
+    const pauseCauses = { value: [{ durationMin: 14, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('danger');
+  });
+
+  it('correctly computes progressColor with duration < limit', () => {
+    const pauseCauses = { value: [{ durationMin: 3, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('success');
+  });
+
+it('correctly computes progressColor with duration = limit', () => {
+  const pauseCauses = { value: [{ durationMin: 12, limitMin: 12 }] };
+  const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+
+  it('correctly computes limit', () => {
+    const pauseCauses = { value: [{ durationMin: 12, limitMin: 12 }] };
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].limit).toBe('00:12');
+  });
+});

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+import convertDuration from '../../scripts/convertDuration';
+
+const prettifyPauseCauseDuration = (min) => {
+  const SEC_IN_MIN = 60;
+  const secDuration = convertDuration(min * SEC_IN_MIN);
+  return secDuration.slice(0, -3);
+};
+
+const isDurationOverflow = ({ durationMin, limitMin }) => {
+  return (durationMin > limitMin) && limitMin !== 0;
+};
+
+const duration = ({ durationMin, limitMin }) => {
+  return isDurationOverflow({ durationMin, limitMin })
+    ? `-${prettifyPauseCauseDuration(durationMin - limitMin)}`
+    : prettifyPauseCauseDuration(durationMin);
+};
+
+const pauseCauseProgressColor = ({ durationMin, limitMin }) => {
+  if (isDurationOverflow({ durationMin, limitMin })) return 'danger';
+  if (durationMin <= (limitMin * 0.75)) return 'success';
+  return 'primary';
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useRepresentableAgentPauseCause = (pauseCauses) => {
+  const representablePauseCause = computed(() => pauseCauses.value.map((pauseCause) => ({
+    ...pauseCause,
+    duration: duration(pauseCause),
+    progressColor: pauseCauseProgressColor(pauseCause),
+    isOverflow: isDurationOverflow(pauseCause),
+    limit: prettifyPauseCauseDuration(pauseCause.limitMin),
+  })));
+
+  return { representablePauseCause };
+};

package/src/css/main.scss

@@ -1,69 +1,72 @@
-// @import "./fonts";
-//@import "./utils/variables";
-//@import "./utils/helper-classes";
-@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 'styleguide/styleguide';
+@import 'styleguide/display-helpers/display-helpers';
+
+@include wt-placeholder;
+
+: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 {
+  @extend %typo-body-1;
+
+  min-height: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+//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;
+}
+
+// https://github.com/Akryum/floating-vue/issues/488
+.v-popper__arrow-container {
+  display: none;
+}

package/src/css/styleguide/_styleguide.scss

@@ -0,0 +1,9 @@
+@import './scroll';
+@import 'border-radius/border-radius';
+@import 'typography/typography';
+@import 'colors/colors';
+@import 'elevations/elevations';
+@import 'spacings/spacings';
+@import 'viewport-breakpoints/viewport-breakpoints';
+@import 'transitions/transitions';
+@import 'placeholder/placeholder';

package/src/css/styleguide/border-radius/_border-radius.scss

@@ -0,0 +1,4 @@
+:root {
+  --border-radius: var(--spacing-2xs);
+  --border-radius--pill: 50px;
+}