@webitel/ui-sdk 0.1.3 → 0.1.4-vite

package/package.json

@@ -1,45 +1,95 @@
-{
-  "name": "@webitel/ui-sdk",
-  "version": "0.1.3",
-  "private": false,
-  "main": "./dist/@webitel/ui-sdk.common.js",
-  "files": [
-    "dist/*",
-    "src/*",
-    "public/*",
-    "*.json",
-    "*.js"
-  ],
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-lib": "vue-cli-service build --target lib --name @webitel/ui-sdk ./src/install.js",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint --fix"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "css-loader": "^3.4.2",
-    "file-loader": "^5.0.2",
-    "url-loader": "^4.1.0",
-    "vue": "^2.6.11",
-    "vue-i18n": "^8.18.2",
-    "vue-multiselect": "^2.1.6",
-    "vuejs-datepicker": "^1.6.2"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-unit-jest": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "@webitel/ui-sdk",
+  "version": "0.1.4-vite",
+  "private": false,
+  "scripts": {
+    "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint --fix",
+    "build:app": "vue-cli-service build",
+    "prepare": "husky install",
+    "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
+    "publish-lib:testless": "npm run build && npm publish --access public",
+    "serve-lib": "vue-cli-service serve",
+    "styleguide": "vue-cli-service styleguidist",
+    "styleguide:build": "vue-cli-service styleguidist:build"
+  },
+  "main": "./dist/@webitel/ui-sdk.common.js",
+  "files": [
+    "dist/*",
+    "src/api/*",
+    "src/locale/*",
+    "src/composables/*",
+    "src/css/*",
+    "src/components/*",
+    "src/directives/*",
+    "src/enums/*",
+    "src/mixins/*",
+    "src/scripts/*",
+    "src/validators/*",
+    "src/modules/*",
+    "src/plugins/*",
+    "src/store/*",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
+    "@vue/compat": "^3.2.47",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
+    "@vuepic/vue-datepicker": "^4.4.0",
+    "@vueuse/components": "^10.5.0",
+    "clipboard-copy": "^4.0.1",
+    "core-js": "^3.6.5",
+    "csv-stringify": "^5.5.3",
+    "deep-copy": "^1.4.2",
+    "deep-equal": "^2.0.3",
+    "file-saver": "^2.0.2",
+    "is-valid-domain": "^0.1.6",
+    "jszip": "^3.5.0",
+    "jszip-utils": "^0.1.0",
+    "lodash": "^4.17.21",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "plyr": "3.6.2",
+    "query-string": "^8.1.0",
+    "sortablejs": "^1.15.0",
+    "tiny-emitter": "^2.1.0",
+    "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
+    "vue-multiselect": "^3.0.0-beta.1",
+    "vue-observe-visibility": "^2.0.0-alpha.1",
+    "vue-router": "^4.1.6",
+    "webitel-sdk": "^23.7.5"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-react": "^7.22.15",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/eslint-config-airbnb": "^6.0.0",
+    "@vue/test-utils": "^2.3.0",
+    "@vue/vue3-jest": "^29.2.2",
+    "bamboo-jest-reporter": "^1.0.3",
+    "eslint": "^8.14.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^8.7.1",
+    "husky": "^7.0.0",
+    "jest-environment-jsdom": "^29.4.3",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.6.0",
+    "svg-sprite-loader": "^6.0.11",
+    "vue-cli-plugin-styleguidist": "~4.72.4",
+    "vuex": "^4.1.0"
+  },
+  "overrides": {
+    "@vue/vue3-jest": "^29.2.2",
+    "vue": "^3.2.47",
+    "babel-jest": "^29.*",
+    "jest": "^29.*"
+  }
+}

package/src/api/axios/generateInstance.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+// 'X-Webitel-Access' ~ 'X-Access-Token'
+const generateInstance = ({ interceptors } = {}) => {
+  const instance = axios.create({
+    baseURL: process ? process.env.VUE_APP_API_URL : import.meta.env.VITE_API_URL,
+    headers: {
+      'X-Webitel-Access': localStorage.getItem('access-token') || '',
+    },
+  });
+
+  if (interceptors) {
+    const { request, response } = interceptors;
+    if (request) {
+      request.forEach((interceptor) => instance.interceptors.request.use(...interceptor));
+    }
+    if (response) {
+      response.forEach((interceptor) => instance.interceptors.response.use(...interceptor));
+    }
+  }
+
+  return instance;
+};
+
+export default generateInstance;

package/src/api/defaults/getDefaultGetListResponse/getDefaultGetListResponse.js

@@ -0,0 +1,6 @@
+const getDefaultGetListResponse = ({} = {}) => ({
+  items: [],
+  next: false,
+});
+
+export default getDefaultGetListResponse;

package/src/api/defaults/getDefaultGetParams/getDefaultGetParams.js

@@ -0,0 +1,9 @@
+const getDefaultGetParams = ({
+  page = 1,
+  size = 10,
+                             } = {}) => ({
+  page,
+  size,
+});
+
+export default getDefaultGetParams;

package/src/api/defaults/index.js

@@ -0,0 +1,7 @@
+import getDefaultGetParams from './getDefaultGetParams/getDefaultGetParams';
+import getDefaultGetListResponse from './getDefaultGetListResponse/getDefaultGetListResponse';
+
+export {
+  getDefaultGetParams,
+  getDefaultGetListResponse,
+};

package/src/api/interceptors/request/updateToken.interceptor.js

@@ -0,0 +1,10 @@
+const updateTokenInterceptor = [
+  (config) => {
+    config.headers['X-Webitel-Access'] = localStorage.getItem('access-token')
+      || '';
+    return config;
+  },
+  (error) => Promise.reject(error),
+];
+
+export default updateTokenInterceptor;

package/src/api/interceptors/response/handleUnauthorized.interceptor.js

@@ -0,0 +1,12 @@
+const handleUnauthorizedInterceptor = [
+  (response) => response,
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      console.warn('intercepted 401');
+      localStorage.removeItem('access-token');
+    }
+    return Promise.reject(error);
+  },
+];
+
+export default handleUnauthorizedInterceptor;

package/src/api/transformers/applyTransform.js

@@ -0,0 +1,8 @@
+const applyTransform = (target, transformers, { debug = false } = {}) => {
+  return transformers.reduce((result, transformer, index) => {
+    if (debug) console.info(`applyTransform debug on step ${index}`, result);
+    return transformer(result);
+  }, target);
+};
+
+export default applyTransform;

package/src/api/transformers/camelToSnake/camelToSnake.transformer.js

@@ -0,0 +1,4 @@
+import { objCamelToSnake } from '../../../scripts/caseConverters';
+
+const camelToSnakeTransformer = (skipKeys) => (obj) => objCamelToSnake(obj, skipKeys);
+export default camelToSnakeTransformer;

package/src/api/transformers/generateUrl/generateUrl.transformer.js

@@ -0,0 +1,13 @@
+import qs from 'query-string';
+
+const generateUrlTransformer = (baseUrl) => (params) => {
+  const stringifyOptions = {
+    skipEmptyString: true,
+    skipNull: true,
+  };
+
+  const url = `${baseUrl}?${qs.stringify(params, stringifyOptions)}`;
+  return url;
+};
+
+export default generateUrlTransformer;

package/src/api/transformers/index.js

@@ -0,0 +1,23 @@
+import applyTransform from './applyTransform';
+import log from './log/log.transformer';
+import merge from './merge/merge.transformer';
+import starToSearch from './starToSearch/starToSearch.transformer';
+import camelToSnake from './camelToSnake/camelToSnake.transformer';
+import snakeToCamel from './snakeToCamel/snakeToCamel.transformer';
+import notify from './notify/notify.transformer';
+import sanitize from './sanitize/sanitize.transformer';
+import generateUrl from './generateUrl/generateUrl.transformer';
+import mergeEach from './mergeEach/mergeEach.transformer';
+
+export default applyTransform;
+export {
+  log,
+  merge,
+  notify,
+  starToSearch,
+  camelToSnake,
+  snakeToCamel,
+  sanitize,
+  generateUrl,
+  mergeEach,
+};

package/src/api/transformers/log/log.transformer.js

@@ -0,0 +1,6 @@
+const logTransformer = (arg) => {
+  console.log(arg);
+  return arg;
+};
+
+export default logTransformer;

package/src/api/transformers/merge/merge.transformer.js

@@ -0,0 +1,5 @@
+import merge from 'deepmerge';
+
+const mergeTransformer = (...args) => (main) => merge.all([...args, main]);
+
+export default mergeTransformer;

package/src/api/transformers/mergeEach/mergeEach.transformer.js

@@ -0,0 +1,8 @@
+import merge from 'deepmerge';
+
+const mergeEachTransformer = (...args) => (main) => main.map((item) => merge.all([
+  ...args,
+  item,
+]));
+
+export default mergeEachTransformer;

package/src/api/transformers/notify/notify.transformer.js

@@ -0,0 +1,32 @@
+import eventBus from '../../../scripts/eventBus';
+
+const notifyTransformer = (notificationObject) => {
+  /*
+  if passed arg is function, then this notification - static content,
+  predefined before actual transformer is called in applyTransform flow
+   */
+  if (typeof notificationObject === 'function') {
+    /*
+    so, create a callback which will send notification with params, passed to it
+     */
+    const callback = ({ type, text }) => eventBus.$emit('notification', { type, text });
+
+    /*
+    and, then, return a function, which will be called in main applyTransform flow,
+    calling passed arg function with callback, and returning actual notify payload
+     */
+    return (payload) => {
+      notificationObject({ callback });
+      return payload;
+    };
+  }
+  if (notificationObject instanceof Error) {
+    eventBus.$emit('notification', {
+      type: 'error',
+      text: notificationObject.response?.data?.detail || notificationObject.response?.data?.message || notificationObject,
+    });
+  }
+  return notificationObject;
+};
+
+export default notifyTransformer;

package/src/api/transformers/sanitize/sanitize.transformer.js

@@ -0,0 +1,12 @@
+const sanitizeTransformer = (fieldsToSend) => (item) => {
+  return Object.keys(item).reduce((sanitizedItem, key) => {
+    if (fieldsToSend.indexOf(key) === -1) return sanitizedItem;
+
+    return {
+      ...sanitizedItem,
+      [key]: item[key],
+    };
+  }, {});
+};
+
+export default sanitizeTransformer;

package/src/api/transformers/snakeToCamel/snakeToCamel.transformer.js

@@ -0,0 +1,4 @@
+import { objSnakeToCamel } from '../../../scripts/caseConverters';
+
+const snakeToCamelTransformer = (skipKeys) => (obj) => objSnakeToCamel(obj, skipKeys);
+export default snakeToCamelTransformer;

package/src/api/transformers/starToSearch/starToSearch.transformer.js

@@ -0,0 +1,12 @@
+import deepcopy from 'deep-copy';
+import get from 'lodash/get';
+import updateObject from '../../../scripts/updateObject';
+
+const starToSearchTransformer = (path = 'search') => (params) => {
+  const copy = deepcopy(params);
+  const value = get(copy, path);
+  if (!value || value.slice(-1) === '*') return copy;
+  return updateObject({ obj: copy, path, value: `${value}*` });
+};
+
+export default starToSearchTransformer;

package/src/components/index.js

@@ -1,60 +1,118 @@
-import Vue from 'vue';
-import WtIcon from './atoms/wt-icon/wt-icon.vue';
-import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
-import WtButton from './atoms/wt-button/wt-button.vue';
-import WtBadge from './atoms/wt-badge/wt-badge.vue';
-import WtDivider from './atoms/wt-divider/wt-divider.vue';
-import WtTooltip from './atoms/wt-tooltip/wt-tooltip.vue';
-import WtLabel from './atoms/wt-label/wt-label.vue';
-import WtLoader from './atoms/wt-loader/wt-loader.vue';
-
-import WtCheckbox from './molecules/wt-checkbox/wt-checkbox.vue';
-import WtDatepicker from './molecules/wt-datepicker/wt-datepicker.vue';
-import WtDatetimepicker from './molecules/wt-datetimepicker/wt-datetimepicker.vue';
-import WtIconBtn from './molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from './molecules/wt-input/wt-input.vue';
-import WtNotification from './molecules/wt-notification/wt-notification.vue';
-import WtPopup from './molecules/wt-popup/wt-popup.vue';
-import WtRadio from './molecules/wt-radio/wt-radio.vue';
-import WtSearchBar from './molecules/wt-search-bar/wt-search-bar.vue';
-import WtSelect from './molecules/wt-select/wt-select.vue';
-import WtSwitcher from './molecules/wt-switcher/wt-switcher.vue';
-import WtTabs from './molecules/wt-tabs/wt-tabs.vue';
-import WtTimeInput from './molecules/wt-time-input/wt-time-input.vue';
-import WtTextarea from './molecules/wt-textarea/wt-textarea.vue';
-import WtTimepicker from './molecules/wt-timepicker/wt-timepicker.vue';
-
-import WtPagination from './organisms/wt-pagination/wt-pagination.vue';
+import WtAvatar from './wt-avatar/wt-avatar.vue';
+import WtBadge from './wt-badge/wt-badge.vue';
+import WtIcon from './wt-icon/wt-icon.vue';
+import WtIndicator from './wt-indicator/wt-indicator.vue';
+import WtInputInfo from './wt-input-info/wt-input-info.vue';
+import WtButton from './wt-button/wt-button.vue';
+import WtChip from './wt-chip/wt-chip.vue';
+import WtDivider from './wt-divider/wt-divider.vue';
+import WtTooltip from './wt-tooltip/wt-tooltip.vue';
+import WtRoundedAction from './wt-rounded-action/wt-rounded-action.vue';
+import WtLoader from './wt-loader/wt-loader.vue';
+import WtContextMenu from './wt-context-menu/wt-context-menu.vue';
+import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
+import WtDatepicker from './wt-datepicker/wt-datepicker.vue';
+import WtIconBtn from './wt-icon-btn/wt-icon-btn.vue';
+import WtInput from './wt-input/wt-input.vue';
+import WtNotification from './wt-notification/wt-notification.vue';
+import WtPopup from './wt-popup/wt-popup.vue';
+import WtProgressBar from './wt-progress-bar/wt-progress-bar.vue';
+import WtRadio from './wt-radio/wt-radio.vue';
+import WtSearchBar from './wt-search-bar/wt-search-bar.vue';
+import WtSelect from './wt-select/wt-select.vue';
+import WtSlider from './wt-slider/wt-slider.vue';
+import WtSwitcher from './wt-switcher/wt-switcher.vue';
+import WtTabs from './wt-tabs/wt-tabs.vue';
+import WtTagsInput from './wt-tags-input/wt-tags-input.vue';
+import WtTimeInput from './wt-time-input/wt-time-input.vue';
+import WtTextarea from './wt-textarea/wt-textarea.vue';
+import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
+import WtLabel from './wt-label/wt-label.vue';
+import WtButtonSelect from './wt-button-select/wt-button-select.vue';
+import WtHint from './wt-hint/wt-hint.vue';
+import WtCopyAction from './wt-copy-action/wt-copy-action.vue';
+import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
+import WtItemLink from './wt-item-link/wt-item-link.vue';
+import WtDummy from './wt-dummy/wt-dummy.vue';
+import WtAppHeader from './wt-app-header/wt-app-header.vue';
+import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
+import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
+import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
+import WtErrorPage from './wt-error-page/wt-error-page.vue';
+import WtHeadline from './wt-headline/wt-headline.vue';
+import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
+import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
+import WtNotificationsBar from './wt-notifications-bar/wt-notifications-bar.vue';
+import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
+import WtPagination from './wt-pagination/wt-pagination.vue';
+import WtPlayer from './wt-player/wt-player.vue';
+import WtStatusSelect from './wt-status-select/wt-status-select.vue';
+import WtTable from './wt-table/wt-table.vue';
+import WtTableActions from './wt-table-actions/wt-table-actions.vue';
+import WtTableColumnSelect from './wt-table-column-select/wt-table-column-select.vue';
+import WtIconAction from './wt-icon-action/wt-icon-action.vue';
+import WtPageHeader from './wt-page-header/wt-page-header.vue';
+import WtStepper from './wt-stepper/wt-stepper.vue';
+import WtExpansionPanel
+  from './wt-expansion-panel/wt-expansion-panel.vue';
 
 const Components = {
+  WtAvatar,
+  WtBadge,
   WtIcon,
+  WtIndicator,
   WtInputInfo,
   WtButton,
-  WtBadge,
+  WtChip,
   WtDivider,
   WtTooltip,
   WtLabel,
   WtLoader,
+  WtRoundedAction,
   WtCheckbox,
   WtDatepicker,
-  WtDatetimepicker,
   WtIconBtn,
   WtInput,
+  WtHint,
   WtNotification,
   WtPopup,
+  WtProgressBar,
   WtRadio,
   WtSearchBar,
   WtSelect,
+  WtSlider,
   WtSwitcher,
   WtTabs,
+  WtTagsInput,
   WtTimeInput,
   WtTimepicker,
   WtTextarea,
+  WtAppHeader,
+  WtHeadline,
+  WtHeadlineNav,
+  WtNavigationBar,
+  WtAppNavigator,
+  WtFiltersPanelWrapper,
+  WtHeaderActions,
+  WtErrorPage,
+  WtNotificationsBar,
+  WtPageWrapper,
   WtPagination,
+  WtPlayer,
+  WtStatusSelect,
+  WtTable,
+  WtTableActions,
+  WtTableColumnSelect,
+  WtButtonSelect,
+  WtContextMenu,
+  WtCopyAction,
+  WtLoadBar,
+  WtIconAction,
+  WtPageHeader,
+  WtItemLink,
+  WtDummy,
+  WtStepper,
+  WtExpansionPanel,
 };
 
-Object.keys(Components).forEach((name) => {
-  Vue.component(name, Components[name]);
-});
-
 export default Components;

package/src/components/on-demand/wt-cc-agent-status-timers/__tests__/wt-cc-agent-status-timers.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import WtCcAgentStatusTimers from '../wt-cc-agent-status-timers.vue';
+
+describe('WtCcAgentStatusTimers', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCcAgentStatusTimers, {
+      props: {
+        status: {
+          online: 123,
+          pause: 123,
+          offline: 123,
+        },
+      },
+    });
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+  it('renders component with empty status prop', () => {
+    const wrapper = shallowMount(WtCcAgentStatusTimers, {
+      props: { status: {} },
+    });
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+});

package/src/components/on-demand/wt-cc-agent-status-timers/wt-cc-agent-status-timers.vue

@@ -0,0 +1,48 @@
+<template>
+  <article class="wt-cc-agent-status-timers">
+    <wt-indicator
+      color="disabled"
+      :text="status.offline"
+      :size="size"
+    ></wt-indicator>
+    <wt-indicator
+      color="success"
+      :text="status.online"
+      :size="size"
+    ></wt-indicator>
+    <wt-indicator
+      color="primary"
+      :text="status.pause"
+      :size="size"
+    ></wt-indicator>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * @description Status object
+   * @type {Object}
+   * @property {String} offline
+   * @property {String} online
+   * @property {String} pause
+   */
+  status: {
+    type: Object,
+    required: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    options: ['sm', 'md'],
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-agent-status-timers {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/components/transitions/__tests__/ExpandTransition.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import ExpandTransition from '../wt-expand-transition.vue';
+
+describe('ExpandTransition', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(ExpandTransition);
+    expect(wrapper.exists()).toBe(true);
+  });
+});