OHRM5X-1888: Fix eslint and typescript issues

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/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,9 +37,10 @@
 
 <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: 'OxdAlert',
 
@@ -49,6 +52,7 @@ export default defineComponent({
   props: {
     type: {
       type: String,
+      required: false,
       default: TYPE_DEFAULT,
       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,
     },
   },

components/src/core/components/Button/Button.vue

@@ -61,26 +61,34 @@ export default defineComponent({
     },
     displayType: {
       type: String,
+      required: false,
       default: TYPE_MAIN,
       validator: function (value: ButtonType) {
         return TYPES.indexOf(value) !== -1;
       },
     },
     size: {
       type: String,
+      required: false,
       default: SIZE_MEDIUM,
       validator: function (value: ButtonSize) {
         return SIZES.indexOf(value) !== -1;
       },
     },
     style: {
       type: Object,
+      required: false,
+      default: () => ({}),
     },
     iconName: {
       type: String,
+      required: false,
+      default: null,
     },
     iconRightName: {
       type: String,
+      required: false,
+      default: null,
     },
   },
 

components/src/core/components/Button/GlassButton.vue

@@ -38,16 +38,19 @@ export default defineComponent({
     label: {
       type: String,
       required: false,
+      default: null,
     },
     disabled: {
       type: Boolean,
+      required: false,
       default: false,
     },
     icon: {
       type: String,
       required: false,
+      default: null,
       validator: function (value: GlassIconType) {
-        return GLASS_ICON_TYPES.indexOf(value) !== -1;
+        return GLASS_ICON_TYPES.indexOf(value) !== -1 || value === null;
       },
     },
   },

components/src/core/components/Button/Icon.vue

@@ -58,21 +58,25 @@ export default defineComponent({
     },
     withContainer: {
       type: Boolean,
+      required: false,
       default: true,
     },
     disabled: {
       type: Boolean,
+      required: false,
       default: false,
     },
     displayType: {
       type: String,
+      required: false,
       default: null,
       validator: function (value: ButtonType) {
         return !value || ICON_TYPES.indexOf(value) !== -1;
       },
     },
     iconType: {
       type: String,
+      required: false,
       default: TYPE_BOOTSTRAP,
       validator: (value: string) => {
         return TYPES.indexOf(value) !== -1;

components/src/core/components/Buzz/BuzzPostInput.vue

@@ -61,25 +61,33 @@ interface TextAreaInputEvent extends InputEvent {
 
 export default defineComponent({
   name: 'OxdBuzzPostInput',
+
   components: {
     'oxd-text': Text,
   },
+
   inheritAttrs: false,
+
   props: {
     modelValue: {
       type: String,
+      required: false,
       default: null,
     },
     disabled: {
       type: Boolean,
+      required: false,
       default: false,
     },
     rules: {
       type: Array as PropType<Rule[]>,
+      required: false,
       default: () => [],
     },
   },
+
   emits: ['update:modelValue'],
+
   setup(props, context) {
     const focused = ref(false);
     const textArea = ref<HTMLTextAreaElement>();

components/src/core/components/Calendar/Calendar.vue

@@ -30,6 +30,7 @@ import {
   rearrangeWeek,
 } from '../../../utils/date';
 import {enGB} from 'date-fns/locale';
+import type {Locale} from 'date-fns';
 import {CalendarDayAttributes, CalendarEvent} from './types';
 import {
   computed,
@@ -46,19 +47,23 @@ import CalendarController from '@ohrm/oxd/core/components/Calendar/CalendarContr
 
 export default defineComponent({
   name: 'OxdCalendar',
+
   props: {
     modelValue: {
       type: Object as PropType<Date>,
+      required: false,
       default: () => {
         return freshDate();
       },
     },
     firstDayOfWeek: {
       type: Number,
+      required: false,
       default: 0, // 0 | 1 | 2 | 3 | 4 | 5 | 6 => 0 represents Sunday
     },
     years: {
       type: Array,
+      required: false,
       default: () => {
         return Array.from(
           {length: getYear(new Date()) - 1969},
@@ -68,35 +73,43 @@ export default defineComponent({
     },
     locale: {
       type: Object as PropType<Locale>,
-      default: enGB,
+      required: false,
+      default: () => enGB,
     },
     monthFormat: {
       type: String,
+      required: false,
       default: 'wide',
     },
     months: {
       type: Array,
+      required: false,
       default: () => [],
     },
     dayFormat: {
       type: String,
+      required: false,
       default: 'narrow',
     },
     days: {
       type: Array,
+      required: false,
       default: () => [],
     },
     dayAttributes: {
       type: Array as PropType<CalendarDayAttributes[]>,
+      required: false,
       default: () => [],
     },
     events: {
       type: Array as PropType<CalendarEvent[]>,
+      required: false,
       default: () => [],
     },
   },
 
   emits: ['update:modelValue', 'selectMonth', 'selectYear'],
+
   setup(props, context) {
     const selectedDate = computed(() => {
       return props.modelValue
@@ -115,7 +128,7 @@ export default defineComponent({
 
       if (days.length === 0) {
         days = new Array(7).fill('').map((...[, index]) => {
-          return (props.locale as Locale).localize.day(index, {
+          return (props.locale as Locale).localize?.day(index, {
             width: props.dayFormat,
           });
         });
@@ -131,7 +144,7 @@ export default defineComponent({
         return props.months;
       } else {
         return new Array(12).fill('').map((...[, index]) => {
-          return (props.locale as Locale).localize.month(index, {
+          return (props.locale as Locale).localize?.month(index, {
             width: props.monthFormat,
           });
         });

components/src/core/components/Calendar/CalendarController.vue

@@ -57,11 +57,13 @@ import CalendarDropdown from '@ohrm/oxd/core/components/Calendar/CalendarDropdow
 
 export default defineComponent({
   name: 'OxdCalendarController',
+
   components: {
     'oxd-text': Text,
     'oxd-icon': Icon,
     'oxd-calendar-dropdown': CalendarDropdown,
   },
+
   props: {
     modelValue: {
       type: Object,
@@ -76,7 +78,9 @@ export default defineComponent({
       required: true,
     },
   },
+
   emits: ['update:modelValue'],
+
   computed: {
     currentMonth(): number {
       const {month} = this.modelValue;
@@ -87,6 +91,7 @@ export default defineComponent({
       return this.years.findIndex((v) => v === year);
     },
   },
+
   methods: {
     calculateMonth(value: number) {
       const {month, year} = this.modelValue;

components/src/core/components/Calendar/CalendarDropdown.vue

@@ -70,8 +70,10 @@ export default defineComponent({
     selected: {
       type: Number,
       required: false,
+      default: -1,
     },
   },
+
   emits: ['select'],
 
   data() {
@@ -84,7 +86,7 @@ export default defineComponent({
     openSubmenu() {
       this.isActive = true;
       this.$nextTick(() => {
-        const elm = this.$refs[`oxd-cal-ref-${this.selected}`];
+        const elm = this.$refs[`oxd-cal-ref-${this.selected}`] as HTMLElement;
         elm && this.scrollToView(elm);
       });
     },
@@ -93,7 +95,7 @@ export default defineComponent({
         this.isActive = false;
       }
     },
-    onSelectOption(option) {
+    onSelectOption(option: number) {
       this.$emit('select', option);
     },
     scrollToView(elm: HTMLElement) {