OHRM5X-1888: Upgrade oxd dependencies

.github/workflows/linting.yml

@@ -7,7 +7,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
       - name: Install npm dependencies
         run: yarn install
       - name: Lint

.github/workflows/publish.yml

@@ -10,11 +10,11 @@ jobs:
     if: github.repository == 'orangehrm/oxd'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Check version already published

.github/workflows/storybook.yml

@@ -7,7 +7,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
       - name: Install npm dependencies
         run: yarn install
       - name: Build Storybook

.github/workflows/unit-tests.yml

@@ -7,15 +7,20 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+
       - name: Install npm dependencies
         run: yarn install
 
       - name: Unit tests
         run: yarn workspace oxd-components test:unit --coverage
 
       - name: Upload jest coverage
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: jest-coverage
           path: components/coverage

.gitignore

@@ -1,7 +1,12 @@
 .DS_Store
 node_modules
 /build
-
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # local env files
 .env.local

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-3.3.0.cjs

README.md

@@ -1,16 +1,17 @@
 ## Orange eXperience Design
-orange experience design is a component library that based OrangeHRM 5.x version 
 
- Copyright (C) 2020 OrangeHRM Inc., http://www.orangehrm.com/
+orange experience design is a component library that based OrangeHRM 5.x version
+
+Copyright (C) 2020 OrangeHRM Inc., http://www.orangehrm.com/
 
 OXD is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-### Technology Stack 
-* Vue3 
-* Sass - Component styling  
-* Jest - componnet unit tests 
-* Story Book 
+### Technology Stack
 
+- Vue3
+- Sass - Component styling
+- Jest - componnet unit tests
+- Story Book
 
 ### Prerequisites
 
@@ -50,4 +51,5 @@ yarn lint
 ```
 
 ### License
+
 GNU General Public License

components/.browserslistrc

@@ -1,6 +1,4 @@
-ie >= 11
-edge >= 13
-firefox >= 5
-opera >= 12
-safari >= 5
-chrome >= 56
+> 1%
+last 2 versions
+not dead
+not ie 11

components/.eslintrc.js

@@ -5,10 +5,11 @@ module.exports = {
   },
   extends: [
     'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'eslint:recommended',
     '@vue/typescript/recommended',
-    '@vue/prettier',
-    '@vue/prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
   ],
   parserOptions: {
     ecmaVersion: 2020,

components/jest.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
   },
   coverageReporters: ['html'],
+  transformIgnorePatterns: ['/node_modules/(?!nanoid)'],
 };

components/package.json

@@ -1,46 +1,44 @@
 {
   "name": "oxd-components",
-  "version": "1.0.8",
+  "version": "1.0.9-alpha.1",
   "license": "GPL-3.0",
   "scripts": {
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --mode production",
     "tsc": "tsc"
   },
   "dependencies": {
-    "@revolist/vue3-datagrid": "^3.0.96",
+    "@revolist/vue3-datagrid": "^3.2.17",
     "bootstrap-icons": "^1.3.0",
     "chart.js": "^3.9.1",
-    "core-js": "^3.6.5",
+    "core-js": "^3.26.1",
     "date-fns": "^2.22.1",
-    "mitt": "^2.1.0",
-    "nanoid": "^3.2.0",
-    "vue": "^3.2.2"
+    "mitt": "^3.0.0",
+    "nanoid": "^4.0.0",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.19",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.13",
-    "@vue/cli-plugin-unit-jest": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^2.0.0-0",
-    "csstype": "^3.0.6",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.5.0",
-    "prettier": "^1.19.1",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "svg-sprite-loader": "^5.2.1",
-    "svg-transform-loader": "^2.0.13",
-    "svgo-loader": "^2.2.1",
-    "typescript": "~4.1.5",
-    "vue-jest": "^5.0.0-0"
+    "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/cli-plugin-unit-jest": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/test-utils": "^2.0.0",
+    "@vue/vue3-jest": "^27.0.0",
+    "babel-jest": "^27.0.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "jest": "^27.1.0",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "ts-jest": "^27.0.4",
+    "typescript": "~4.5.5"
   }
 }

components/src/composables/useEventBus.ts

@@ -48,7 +48,7 @@ class EventBus {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   $emit(name: string, data: any) {
     if (this.queue[name]) {
-      this.queue[name].forEach(function(callback) {
+      this.queue[name].forEach(function (callback) {
         callback(data);
       });
     }

components/src/composables/useField.ts

@@ -45,9 +45,9 @@ export default function useField(fieldContext: {
 
     processing.value = true;
     const allValidations = Promise.all(
-      fieldContext.rules.map(func => {
+      fieldContext.rules.map((func) => {
         return new Promise<boolean>((resolve, reject) => {
-          Promise.resolve(func(fieldContext.modelValue.value)).then(valid => {
+          Promise.resolve(func(fieldContext.modelValue.value)).then((valid) => {
             if (valid === true) {
               resolve(valid);
             } else if (typeof valid === 'string') {
@@ -72,7 +72,7 @@ export default function useField(fieldContext: {
             errors: [],
           });
         })
-        .catch(error => {
+        .catch((error) => {
           if (typeof error === 'string') {
             resolve({
               cid: cid.value,
@@ -90,7 +90,7 @@ export default function useField(fieldContext: {
 
   const startWatcher = () => {
     watchHandler = watch(fieldContext.modelValue, () => {
-      validate().then(result => {
+      validate().then((result) => {
         form.addError(result);
       });
     });

components/src/composables/useFormValidation.ts

@@ -40,13 +40,13 @@ export default function useFormValidation(isLoading: Ref<boolean>) {
 
   const searchErrors = (id: string) => {
     if (isLoading.value === true) return [];
-    return formState.errorbag.filter(item => {
+    return formState.errorbag.filter((item) => {
       return item.cid === id;
     });
   };
 
   const purgeErrors = (id: string) => {
-    formState.errorbag = formState.errorbag.filter(item => item.cid !== id);
+    formState.errorbag = formState.errorbag.filter((item) => item.cid !== id);
   };
 
   const addError = (errorField: ErrorField) => {
@@ -55,7 +55,7 @@ export default function useFormValidation(isLoading: Ref<boolean>) {
   };
 
   const registerField = (field: FormField) => {
-    const i = formState.fieldset.findIndex(item => {
+    const i = formState.fieldset.findIndex((item) => {
       return unref(item.cid) === unref(field.cid);
     });
     if (i === -1) {
@@ -66,7 +66,7 @@ export default function useFormValidation(isLoading: Ref<boolean>) {
   const unregisterField = (field: FormField) => {
     purgeErrors(unref(field.cid));
 
-    const i = formState.fieldset.findIndex(item => {
+    const i = formState.fieldset.findIndex((item) => {
       return unref(item.cid) === unref(field.cid);
     });
     if (i > -1) {
@@ -75,20 +75,20 @@ export default function useFormValidation(isLoading: Ref<boolean>) {
   };
 
   const validate = () => {
-    return Promise.all(formState.fieldset.map(field => field.validate()))
-      .then(results => {
-        results.map(errorField => {
+    return Promise.all(formState.fieldset.map((field) => field.validate()))
+      .then((results) => {
+        results.map((errorField) => {
           addError(errorField);
         });
       })
-      .catch(reject => {
+      .catch((reject) => {
         // eslint-disable-next-line no-console
         console.error(reject);
       });
   };
 
   const reset = () => {
-    formState.fieldset.map(field => field.reset());
+    formState.fieldset.map((field) => field.reset());
     formState.errorbag = [];
   };
 

components/src/composables/useResize.ts

@@ -24,15 +24,17 @@ export interface State {
   height: number;
 }
 
-export default function useResize(domElem: Ref<HTMLElement>) {
+export default function useResize(
+  domElem: Ref<HTMLElement | null | undefined>,
+) {
   const state: State = reactive({
     width: 0,
     height: 0,
   });
 
   const setElementSize = () => {
-    state.width = domElem.value.clientWidth;
-    state.height = domElem.value.clientHeight;
+    state.width = domElem.value?.clientWidth || 0;
+    state.height = domElem.value?.clientHeight || 0;
   };
 
   onMounted(async () => {

components/src/core/components/Alert/Alert.vue

@@ -23,10 +23,12 @@
   <div v-if="show" :class="classes" role="alert">
     <div :class="contentClasses">
       <oxd-icon :name="iconName" class="oxd-alert-content-icon" />
+
       <oxd-text tag="p" class="oxd-alert-content-text">
         {{ message }}
       </oxd-text>
     </div>
+
     <div class="oxd-alert-action">
       <slot></slot>
     </div>
@@ -35,11 +37,12 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue';
-import {AlertType, TYPE_DEFAULT, TYPES, ICON_MAP} from './types';
 import Text from '@ohrm/oxd/core/components/Text/Text.vue';
 import Icon from '@ohrm/oxd/core/components/Icon/Icon.vue';
+import {AlertType, TYPE_DEFAULT, TYPES, ICON_MAP} from './types';
+
 export default defineComponent({
-  name: 'oxd-alert',
+  name: 'OxdAlert',
 
   components: {
     'oxd-text': Text,
@@ -49,8 +52,9 @@ export default defineComponent({
   props: {
     type: {
       type: String,
+      required: false,
       default: TYPE_DEFAULT,
-      validator: function(value: AlertType) {
+      validator: function (value: AlertType) {
         return TYPES.indexOf(value) !== -1;
       },
     },
@@ -61,9 +65,11 @@ export default defineComponent({
     icon: {
       type: String,
       required: false,
+      default: null,
     },
     show: {
       type: Boolean,
+      required: false,
       default: false,
     },
   },