[ONL-8197] Migrate composables (#1831)

* [ONL-8197] chore: Migrated composables to TS.

* [ONL-8197] fix: Check types when running CI.

* [ONL-8197] fix: Updated enums references.

* [ONL-8197] chore: Export EcSorting type

* [ONL-8197] fix: Prevent ec-tooltip mocks mocking types.

* [ONL-8197] pr: Addressed comments.

* 2.6.3

.github/workflows/ci.yml

@@ -25,5 +25,7 @@ jobs:
         run: CYPRESS_INSTALL_BINARY=0 npm ci
       - name: Lint
         run: npm run lint:no-fix
+      - name: TS
+        run: npm run types
       - name: Test
         run: npm run test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
@@ -27,11 +27,12 @@
     "test:visual:ci": "npm run build-storybook-run & wait-on http://localhost:42475/ && npm run test:visual:all",
     "test:visual:all": "cypress run --browser chrome --headless --config video=false,videosFolder=tests/integration/videos/chrome/,trashAssetsBeforeRuns=true && cypress run --browser firefox --headless --config video=false,videosFolder=tests/integration/videos/firefox/,trashAssetsBeforeRuns=false",
     "prebuild-storybook": "npm run icons",
-    "build-storybook": "vue-tsc --noEmit && storybook build -o .out",
+    "build-storybook": "vue-tsc && storybook build -o .out",
     "build-storybook-run": "npm run build-storybook && live-server --port=42475 .out",
     "prestart": "npm run icons",
-    "start": "vue-tsc --noEmit --watch & storybook dev -p 42475",
+    "start": "vue-tsc --watch & storybook dev -p 42475",
     "serve": "npm run start",
+    "types": "vue-tsc",
     "prerelease": "npm run lint && npm run test",
     "release": "npm version patch && git tag -d v$(npm view . version) && npm publish && git push",
     "git-tag": "git tag v$(npm view . version) && git push origin v$(npm view . version)"

src/components/ec-currency-input/ec-currency-input.vue

@@ -114,7 +114,7 @@
 import { computed, ref, useAttrs } from 'vue';
 
 import VEcTooltip from '../../directives/ec-tooltip';
-import * as TooltipPlacement from '../../enums/tooltip-placement';
+import { TooltipPlacement } from '../../directives/ec-tooltip/types';
 import { getUid } from '../../utils/uid';
 import EcAmountInput from '../ec-amount-input';
 import EcDropdown from '../ec-dropdown';

src/components/ec-dropdown-search/ec-dropdown-search.vue

@@ -156,7 +156,7 @@ import {
 
 import useConfig from '../../composables/use-ec-config';
 import VEcTooltip from '../../directives/ec-tooltip';
-import { ARROW_DOWN, ARROW_UP } from '../../enums/key-code';
+import { KeyCode } from '../../enums';
 import { removeDiacritics } from '../../utils/diacritics';
 import EcIcon from '../ec-icon';
 import EcLoading from '../ec-loading';
@@ -503,18 +503,18 @@ function setOverflowHeight() {
 
 // keyboard navigation (UP, DOWN arrows)
 function onArrowUpKeyDown() {
-  onArrowKey(ARROW_UP);
+  onArrowKey(KeyCode.ARROW_UP);
 }
 
 function onArrowDownKeyDown() {
-  onArrowKey(ARROW_DOWN);
+  onArrowKey(KeyCode.ARROW_DOWN);
 }
 
 function onArrowKey(key) {
   let nextItem;
 
   if (selectedItemIndex.value >= 0) {
-    if (key === ARROW_DOWN) {
+    if (key === KeyCode.ARROW_DOWN) {
       nextItem = filteredItems.value.find((item, i) => !item.disabled && i > selectedItemIndex.value);
     } else {
       const reversedItems = filteredItems.value.slice(0, selectedItemIndex.value).reverse();

src/components/ec-modal/ec-modal.vue

@@ -111,7 +111,7 @@ import {
   computed, onBeforeUnmount, ref, useSlots, watch, watchEffect,
 } from 'vue';
 
-import * as KeyCode from '../../enums/key-code';
+import { KeyCode } from '../../enums';
 import EcBtn from '../ec-btn';
 import { ButtonCategory } from '../ec-btn/types';
 import EcIcon from '../ec-icon';

src/components/ec-smart-table/ec-smart-table.story.js

@@ -4,8 +4,7 @@ import {
   computed, markRaw, onBeforeUnmount, ref,
 } from 'vue';
 
-import { SortDirection } from '../../enums';
-import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
+import { SortDirection, SortDirectionCycle } from '../../enums';
 import EcDateRangeFilter from '../ec-date-range-filter';
 import EcIcon from '../ec-icon';
 import EcOptionCard from '../ec-option-card';

src/components/ec-smart-table/ec-smart-table.vue

@@ -149,8 +149,7 @@ import {
 
 import useEcPagination from '../../composables/use-ec-pagination';
 import useEcSorting from '../../composables/use-ec-sorting';
-import { SortDirection } from '../../enums';
-import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
+import { SortDirectionCycle } from '../../enums';
 import EcIcon from '../ec-icon';
 import { IconName } from '../ec-icon/types';
 import EcLoading from '../ec-loading';
@@ -184,11 +183,8 @@ const props = defineProps({
   filter: Object,
   isMultiSort: Boolean,
   sortCycle: {
-    type: Array,
+    type: Number,
     default: () => SortDirectionCycle.LOWEST_FIRST,
-    validator(directions) {
-      return directions.every(direction => direction === SortDirection.ASC || direction === SortDirection.DESC);
-    },
   },
   additionalPayload: Object,
   isFetching: Boolean,

src/components/ec-table-pagination/ec-table-pagination.vue

@@ -104,16 +104,16 @@
 </template>
 
 <script setup>
-defineOptions({
-  inheritAttrs: false,
-});
-
 import { computed } from 'vue';
 
-import { DEFAULT_PAGE_SIZE, PAGE_SIZES } from '../../enums/pagination';
+import { DEFAULT_PAGE_SIZE, PAGE_SIZES } from '../../composables/use-ec-pagination';
 import EcDropdownSearch from '../ec-dropdown-search';
 import EcIcon from '../ec-icon';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   page: {
     type: Number,

src/composables/use-ec-pagination/index.ts

@@ -0,0 +1 @@
+export { default, DEFAULT_PAGE_SIZE, PAGE_SIZES } from './use-ec-pagination';

src/composables/use-ec-pagination/use-ec-pagination.spec.js → src/composables/use-ec-pagination/use-ec-pagination.spec.ts

@@ -1,24 +1,21 @@
-import { DEFAULT_PAGE_SIZE, PAGE_SIZES } from '../../enums/pagination';
-import useEcPagination from './use-ec-pagination';
+import useEcPagination, { DEFAULT_PAGE_SIZE, PAGE_SIZES } from './use-ec-pagination';
 
 describe('useEcPagination', () => {
   it('should initialise properly', () => {
-    const { page, numberOfItems, paginate } = useEcPagination();
+    const { page, numberOfItems } = useEcPagination();
 
     expect(page.value).toBe(1);
     expect(numberOfItems.value).toBe(DEFAULT_PAGE_SIZE);
-    expect(typeof paginate).toBe('function');
   });
 
   it('should initialise with given options', () => {
-    const { page, numberOfItems, paginate } = useEcPagination({
+    const { page, numberOfItems } = useEcPagination({
       initialPage: 42,
       initialNumberOfItems: 5,
     });
 
     expect(page.value).toBe(42);
     expect(numberOfItems.value).toBe(5);
-    expect(typeof paginate).toBe('function');
   });
 
   it('should throw an error if number of items is invalid', () => {
@@ -37,18 +34,18 @@ describe('useEcPagination', () => {
     expect(numberOfItems.value).toBe(20);
   });
 
-  it('should ignore null values when paginate call updates only the page', () => {
+  it('should ignore undefined values when paginate call updates only the page', () => {
     const { page, numberOfItems, paginate } = useEcPagination();
 
-    paginate(42, null);
+    paginate(42, undefined);
     expect(page.value).toBe(42);
     expect(numberOfItems.value).toBe(10);
   });
 
-  it('should ignore null values when paginate call updates only the number of items', () => {
+  it('should ignore undefined values when paginate call updates only the number of items', () => {
     const { page, numberOfItems, paginate } = useEcPagination();
 
-    paginate(null, 42);
+    paginate(undefined, 42);
     expect(page.value).toBe(1);
     expect(numberOfItems.value).toBe(42);
   });

src/composables/use-ec-pagination/use-ec-pagination.js → src/composables/use-ec-pagination/use-ec-pagination.ts

@@ -1,19 +1,23 @@
 import { ref, unref } from 'vue';
 
-import { DEFAULT_PAGE_SIZE, PAGE_SIZES } from '../../enums/pagination';
+export const PAGE_SIZES = [5, 10, 50, 100];
+export const DEFAULT_PAGE_SIZE = 10;
 
 export default function useEcPagination({
   initialPage = 1,
   initialNumberOfItems = DEFAULT_PAGE_SIZE,
-} = {}) {
+}: Partial<{
+  initialPage: number,
+  initialNumberOfItems: number,
+}> = {}) {
   if (!PAGE_SIZES.includes(initialNumberOfItems)) {
     throw new Error(`Invalid number of items: ${initialNumberOfItems}. Expecting one of: ${PAGE_SIZES}`);
   }
 
   const page = ref(unref(initialPage));
   const numberOfItems = ref(unref(initialNumberOfItems));
 
-  function paginate(newPage, newNumberOfItems) {
+  function paginate(newPage?: number, newNumberOfItems?: number) {
     page.value = newPage ?? page.value;
     numberOfItems.value = newNumberOfItems ?? numberOfItems.value;
   }

src/composables/use-ec-sorting/index.js → src/composables/use-ec-sorting/index.ts

@@ -1 +1,2 @@
+export * as types from './types';
 export { default } from './use-ec-sorting';

src/composables/use-ec-sorting/types.ts

@@ -0,0 +1,12 @@
+import type { SortDirection, SortDirectionCycle } from '../../enums';
+
+export interface Sorting {
+  direction?: SortDirection,
+  column: string,
+}
+
+export interface SortingOptions {
+  initialSorts?: Sorting[],
+  isMultiSort?: boolean,
+  sortCycle?: SortDirectionCycle,
+}

src/composables/use-ec-sorting/use-ec-sorting.spec.js → src/composables/use-ec-sorting/use-ec-sorting.spec.ts

@@ -1,13 +1,12 @@
-import { SortDirection } from '../../enums';
-import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
+import { SortDirection, SortDirectionCycle } from '../../enums';
+import type { SortingOptions } from './types';
 import useEcSorting from './use-ec-sorting';
 
 describe('useEcSorting', () => {
   it('should initialise properly', () => {
-    const { sorts, sortBy } = useEcSorting();
+    const { sorts } = useEcSorting({});
 
     expect(sorts.value).toEqual([]);
-    expect(typeof sortBy).toBe('function');
   });
 
   it('should accept initial sorts', () => {
@@ -22,17 +21,9 @@ describe('useEcSorting', () => {
     ]);
   });
 
-  it('should validate given sort cycle', () => {
-    expect(() => {
-      useEcSorting({
-        sortCycle: ['HI', 'LO'],
-      });
-    }).toThrow('Invalid sortCycle: HI,LO');
-  });
-
   describe('multi sort', () => {
     describe('with default sort cycle: asc -> desc', () => {
-      function initUseEcSorting(opts) {
+      function initUseEcSorting(opts?: Partial<SortingOptions>) {
         return useEcSorting({ isMultiSort: true, ...opts });
       }
 
@@ -125,7 +116,7 @@ describe('useEcSorting', () => {
     });
 
     describe('with default sort cycle: desc -> asc', () => {
-      function initUseEcSorting(opts) {
+      function initUseEcSorting(opts?: Partial<SortingOptions>) {
         return useEcSorting({
           isMultiSort: true,
           sortCycle: SortDirectionCycle.HIGHEST_FIRST,
@@ -221,7 +212,7 @@ describe('useEcSorting', () => {
 
   describe('single sort', () => {
     describe('with default sort cycle: asc -> desc', () => {
-      function initUseEcSorting(opts) {
+      function initUseEcSorting(opts?: Partial<SortingOptions>) {
         return useEcSorting({ isMultiSort: false, ...opts });
       }
 
@@ -258,7 +249,7 @@ describe('useEcSorting', () => {
     });
 
     describe('with default sort cycle: desc -> asc', () => {
-      function initUseEcSorting(opts) {
+      function initUseEcSorting(opts?: Partial<SortingOptions>) {
         return useEcSorting({
           isMultiSort: false,
           sortCycle: SortDirectionCycle.HIGHEST_FIRST,