@webitel/ui-sdk 0.1.1 → 0.1.2-vue3

package/package.json

@@ -1,44 +1,79 @@
-{
-  "name": "@webitel/ui-sdk",
-  "version": "0.1.1",
-  "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",
-    "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.2-vue3",
+  "private": false,
+  "scripts": {
+    "serve-lib": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
+    "build:app": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint --fix",
+    "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
+    "publish-lib:testless": "npm run build && npm publish --access public",
+    "prepare": "husky install"
+  },
+  "main": "./dist/@webitel/ui-sdk.common.js",
+  "files": [
+    "dist/*",
+    "src/locale/*",
+    "src/css/*",
+    "src/components/*",
+    "src/enums/*",
+    "src/mixins/*",
+    "src/scripts/*",
+    "src/modules/*",
+    "src/plugins/*",
+    "src/store/*",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@vue/compat": "^3.2.47",
+    "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",
+    "floating-vue": "^2.0.0-beta.20",
+    "jszip": "^3.5.0",
+    "jszip-utils": "^0.1.0",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "plyr": "3.6.2",
+    "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
+    "vue-multiselect": "^3.0.0-beta.1",
+    "vue-observe-visibility": "^1.0.0",
+    "vue-router": "^4.1.6",
+    "vuejs-datepicker": "^1.6.2",
+    "webitel-sdk": "^0.1.157"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.17.0",
+    "@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",
+    "vuex": "^4.1.0"
+  },
+  "overrides": {
+    "@vue/vue3-jest": "^29.2.2",
+    "vue": "^3.2.47",
+    "babel-jest": "^29.*",
+    "jest": "^29.*"
+  }
+}

package/src/components/atoms/wt-avatar/__tests__/wt-avatar.spec.js

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

package/src/components/atoms/wt-avatar/wt-avatar.vue

@@ -0,0 +1,102 @@
+<template>
+  <div
+    class="wt-avatar"
+    :class="[`wt-avatar--size-${size}`]"
+  >
+    <wt-badge
+      v-if="badge"
+      :color-variable="badgeColorVar"
+      :icon-badge="isDnd ? 'dnd' : null"
+    ></wt-badge>
+    <img
+      class="wt-avatar__img"
+      :src="imgSrc"
+      alt="avatar"
+    >
+  </div>
+</template>
+
+<script>
+import defaultAvatar from '../../../assets/components/atoms/wt-avatar/default-avatar.svg';
+import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum';
+
+export default {
+  name: 'wt-avatar',
+  props: {
+    src: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: 'md',
+      options: ['md'],
+    },
+    badge: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: String,
+      options: AbstractUserStatus,
+      default: AbstractUserStatus.OFFLINE,
+    },
+  },
+  computed: {
+    imgSrc() {
+      return this.src || defaultAvatar;
+    },
+    isDnd() {
+      return this.status === AbstractUserStatus.DND;
+    },
+    badgeColorVar() {
+      switch (this.status) {
+        case AbstractUserStatus.ACTIVE: return 'online-color';
+        case AbstractUserStatus.DND: return 'dnd-color';
+        case AbstractUserStatus.BUSY: return 'busy-color';
+        case AbstractUserStatus.OFFLINE: return 'offline-color';
+        default: return 'offline-color';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-avatar {
+    position: relative;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    user-select: none;
+
+    &__img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    &--size-xs {
+      width: var(--avatar-size--size-xs);
+      height: var(--avatar-size--size-xs);
+    }
+
+    &--size-sm {
+      width: var(--avatar-size--size-sm);
+      height: var(--avatar-size--size-sm);
+    }
+
+    &--size-md {
+      width: var(--avatar-size--size-md);
+      height: var(--avatar-size--size-md);
+    }
+
+    &--size-lg {
+      width: var(--avatar-size--size-lg);
+      height: var(--avatar-size--size-lg);
+    }
+
+    &--size-xl {
+      width: var(--avatar-size--size-xl);
+      height: var(--avatar-size--size-xl);
+    }
+  }
+</style>

package/src/components/atoms/wt-badge/__tests__/wt-badge.spec.js

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

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -1,15 +1,52 @@
 <template>
-  <span class="wt-badge">
-    <slot></slot>
-  </span>
+  <aside
+    class="wt-badge"
+    :class="{ 'wt-badge--outside': outside }"
+    :style="{ background: iconBadge ? `url(${this.showIconBadge})` : `var(--${colorVariable})` }"
+  ></aside>
 </template>
 
 <script>
-  export default {
-    name: 'wt-badge',
-  };
+import BadgeDnd from '../../../assets/icons/badge-dnd.svg';
+
+export default {
+  name: 'wt-badge',
+  props: {
+    colorVariable: {
+      type: String,
+      default: 'false-color',
+      description: 'see all available colors in webitel-ui docs',
+    },
+    outside: {
+      type: Boolean,
+      default: false,
+    },
+    iconBadge: {
+      type: String,
+    },
+  },
+  computed: {
+    showIconBadge() {
+      switch (this.iconBadge) {
+        case 'dnd': return BadgeDnd;
+        default: return null;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import '../../../css/components/atoms/wt-badge/wt-badge';
+  .wt-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--wt-badge-size);
+    height: var(--wt-badge-size);
+    border-radius: 50%;
+
+    &--outside {
+      transform: translate(100%, -100%);
+    }
+  }
 </style>

package/src/components/atoms/wt-button/__tests__/WtButton.spec.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import WtButton from '../wt-button.vue';
+import WtLoader from '../../wt-loader/wt-loader.vue';
+
+describe('WtButton', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtButton);
+    expect(wrapper.classes('wt-button')).toBe(true);
+  });
+
+  it('renders a button content via default slot', () => {
+    const content = 'button content';
+    const wrapper = shallowMount(WtButton, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-button').text()).toBe(content);
+  });
+
+  it('renders button spinner', () => {
+    const wrapper = shallowMount(WtButton, {
+      propsData: {
+        loading: true,
+      },
+    });
+    expect(wrapper.findComponent(WtLoader).exists()).toBe(true);
+  });
+});