OHRM5X-959: Update workflow commands, lint fixes

orangehrm · Jan 12, 2023 · c18c074 · c18c074
1 parent 4dc40e4
commit c18c074
Show file tree

Hide file tree

Showing 50 changed files with 670 additions and 399 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -4,6 +4,8 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 module.exports = {
   root: true,
   extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
@@ -12,4 +14,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
   },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
 };
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
@@ -15,4 +15,4 @@ jobs:
       - name: Install npm dependencies
         run: yarn install
       - name: Lint
-        run: yarn workspace oxd-components lint
+        run: yarn lint
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -15,4 +15,4 @@ jobs:
       - name: Install npm dependencies
         run: yarn install
       - name: Build Storybook
-        run: yarn workspace oxd-storybook build
+        run: yarn build:storybook
diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
@@ -17,7 +17,7 @@ jobs:
         run: yarn install
 
       - name: Unit tests
-        run: yarn workspace oxd-components test:unit --coverage
+        run: yarn test:unit --coverage
 
       - name: Upload jest coverage
         uses: actions/upload-artifact@v3

diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Coverage report
+src/coverage/*
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.12",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.27.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.2.6",

diff --git a/src/components/Alert/stories/AlertContainer.vue b/src/components/Alert/stories/AlertContainer.vue
@@ -28,37 +28,41 @@
     >
       <oxd-button
         size="medium"
-        displayType="ghost-success"
+        display-type="ghost-success"
         label="No, Cancel"
       />
-      <oxd-button size="medium" displayType="success" label="Yes, Delete" />
+      <oxd-button size="medium" display-type="success" label="Yes, Delete" />
     </oxd-alert>
 
     <oxd-alert
       :show="true"
       type="warn"
       message="Are you sure you want to continue?"
     >
-      <oxd-button size="medium" displayType="ghost-warn" label="No, Cancel" />
-      <oxd-button size="medium" displayType="warn" label="Yes, Delete" />
+      <oxd-button size="medium" display-type="ghost-warn" label="No, Cancel" />
+      <oxd-button size="medium" display-type="warn" label="Yes, Delete" />
     </oxd-alert>
 
     <oxd-alert
       :show="true"
       type="error"
       message="Are you sure you want to continue?"
     >
-      <oxd-button size="medium" displayType="ghost-danger" label="No, Cancel" />
-      <oxd-button size="medium" displayType="danger" label="Yes, Delete" />
+      <oxd-button
+        size="medium"
+        display-type="ghost-danger"
+        label="No, Cancel"
+      />
+      <oxd-button size="medium" display-type="danger" label="Yes, Delete" />
     </oxd-alert>
 
     <oxd-alert
       :show="true"
       type="info"
       message="Are you sure you want to continue?"
     >
-      <oxd-button size="medium" displayType="ghost-info" label="No, Cancel" />
-      <oxd-button size="medium" displayType="info" label="Yes, Delete" />
+      <oxd-button size="medium" display-type="ghost-info" label="No, Cancel" />
+      <oxd-button size="medium" display-type="info" label="Yes, Delete" />
     </oxd-alert>
   </div>
 </template>
@@ -68,7 +72,7 @@ import Alert from '@/components/Alert/Alert.vue';
 import Button from '@/components/Button/Button.vue';
 
 export default {
-  name: 'alert-container-example',
+  name: 'AlertContainerExample',
   components: {
     'oxd-alert': Alert,
     'oxd-button': Button,

diff --git a/src/components/CardTable/stories/ActionCardTable.story.vue b/src/components/CardTable/stories/ActionCardTable.story.vue
@@ -22,20 +22,23 @@
 
 <template>
   <oxd-card-table
+    v-model:selected="checkedItems"
     :selector="selector"
     :headers="headers"
     :items="items"
-    @click="onClick"
     :selectable="true"
-    v-model:selected="checkedItems"
-    rowDecorator="oxd-table-decorator-card"
+    row-decorator="oxd-table-decorator-card"
+    @click="onClick"
   />
 </template>
 
 <script>
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       selector: {
@@ -102,10 +105,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);

diff --git a/src/components/CardTable/stories/CardTable.story.vue b/src/components/CardTable/stories/CardTable.story.vue
@@ -23,16 +23,16 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="selectable"
       :disabled="disabled"
       :clickable="false"
       :loading="isLoading"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
   </div>
 </template>
@@ -41,6 +41,18 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
+
+  props: {
+    selectable: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+    },
+  },
   data() {
     return {
       selector: {
@@ -56,25 +68,6 @@ export default {
     };
   },
 
-  props: {
-    selectable: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-  },
-
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
-  methods: {
-    onClick(e) {
-      console.log(e);
-    },
-  },
-
   created() {
     this.isLoading = true;
     // simulate async data fetch
@@ -90,6 +83,12 @@ export default {
       this.isLoading = false;
     }, 2000);
   },
+
+  methods: {
+    onClick(e) {
+      console.log(e);
+    },
+  },
 };
 </script>
 

diff --git a/src/components/CardTable/stories/CardTableJobs.story.vue b/src/components/CardTable/stories/CardTableJobs.story.vue
@@ -23,14 +23,14 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
   </div>
 </template>
@@ -39,6 +39,9 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       selector: {
@@ -101,10 +104,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);

diff --git a/src/components/CardTable/stories/CardTableLangStringList.story.vue b/src/components/CardTable/stories/CardTableLangStringList.story.vue
@@ -34,7 +34,7 @@
       :items="items"
       :selectable="false"
       :clickable="false"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
     />
   </div>
   <div class="orangehrm-table-footer"></div>
@@ -46,6 +46,10 @@ import Button from '@/components/Button/Button.vue';
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-button': Button,
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       headers: [
@@ -113,11 +117,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-button': Button,
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     actionsRenderer(index, item, header, row) {
       const edit = {

diff --git a/src/components/CardTable/stories/CardTableLeavelist.story.vue b/src/components/CardTable/stories/CardTableLeavelist.story.vue
@@ -23,13 +23,13 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
     />
   </div>
 </template>
@@ -38,6 +38,9 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       headers: [
@@ -94,10 +97,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     cellRenderer(index, item, header, row) {
       const accept = {

diff --git a/src/components/CardTable/stories/CardTableLeavelistAlt.story.vue b/src/components/CardTable/stories/CardTableLeavelistAlt.story.vue
@@ -22,13 +22,13 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
     />
   </div>
 </template>
@@ -39,6 +39,9 @@ import Textarea from '@/components/Input/Textarea/Textarea.vue';
 import SelectInput from '@/components/Input/Select/SelectInput.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       headers: [
@@ -99,10 +102,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     actionsRenderer() {
       return {