[ONL-8283] Migrate remaining components (#1871)

* [ONL-8283] chore: Migrated leftovers to TS. * [ONL-8283] chore: Migrated file upload components to TS. * [ONL-8283] chore: Removed as keywords and mountAsTemplate calls. * [ONL-8283] docs: Updated docs and dead links. * 2.7.10 * [ONL-8283] pr: Addressed comments.
Ebury · Feb 23, 2024 · 2de00b2 · 2de00b2
1 parent 88701a6
commit 2de00b2
Show file tree

Hide file tree

Showing 55 changed files with 761 additions and 848 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Chameleon Components is Ebury's vue.js 3.X components library.
 The library is being used for our Vue projects at Ebury, and more components are added regularly.
 
-Also, check out the latest version deployed in [Storybook](https://chameleon.ebury.now.sh/).
+Also, check out the latest version deployed in [Storybook](https://chameleon-ebury.vercel.app/).
 
 1. [Vision](VISION.md)
 1. [Contributing](#contributing)
@@ -60,15 +60,15 @@ import { ComponentName } from '@ebury/chameleon-components';
 
 **NOTE!** If you are going to use `ec-phone-number-input`, you must host icons from `node_modules/svg-country-flags/png100px/` in your project.
 
-For example icon with path `node_modules/svg-country-flags/png100px/gb.png` should be available in your project by url `[your static prefix]icons/country-flags/100/gb.png`. 
+For example icon with path `node_modules/svg-country-flags/png100px/gb.png` should be available in your project by url `[your static prefix]icons/country-flags/100/gb.png`.
 Static prefix could be change by setting up respective `iconsStaticPrefix` property in `src/config.js`.
 
 ## Theming
 
 The components can use a custom theme. There are four color palettes used by the CSS, two of them can be adjusted via
 CSS variables, e.g. the default blue color is defined as `--ec-key-color-level-4` and can be configured via `--ec-theme-key-color-level-4`.
 
-Check out the list of possible variables in the [storybook colors story](https://chameleon.ebury.now.sh/?path=/story/css-colors-all).
+Check out the list of possible variables in the [storybook colors story](https://chameleon-ebury.vercel.app/?path=/story/css-colors--all).
 
 A few examples of a theme can be found in the [src/styles/themes/](src/styles/themes/) folder.
 
@@ -87,6 +87,10 @@ If you need to support every single locale on the planet, we recommend to polyfi
 
 [Vite](https://vitejs.dev/)
 
+### TypeScript
+
+[TypeScript](https://www.typescriptlang.org/)
+
 ### Storybook
 
 [Storybook](https://storybook.js.org/)
@@ -115,6 +119,8 @@ If you need to support every single locale on the planet, we recommend to polyfi
 
 ### Dependencies
 
+[VueUse](https://vueuse.org/)
+
 [flatpickr](https://flatpickr.js.org/)
 
 [focus-trap](https://focus-trap.github.io/focus-trap/)

diff --git a/VISION.md b/VISION.md
@@ -1,8 +1,8 @@
 # Vision
 
-Ebury Chameleon is developed thanks to the frontend expertise of the [Online team](https://fxsolutions.atlassian.net/wiki/spaces/TEAM/pages/119543461/ONL) members, Chameleon brings the components that Eburyonline needs to build the best online experience for the Ebury products.
+Ebury Chameleon is developed thanks to the frontend expertise of the Online team members, Chameleon brings the components that Eburyonline needs to build the best online experience for the Ebury products.
 
-The components from Chameleon are accessible through [https://chameleon.ebury.now.sh](https://chameleon.ebury.now.sh) and it's a live page where you can see all the components that the Online team has developed.
+The components from Chameleon are accessible through [https://chameleon-ebury.vercel.app/](https://chameleon-ebury.vercel.app/) and it's a live page where you can see all the components that the Online team has developed.
 
 This library is written in [Vue.js](https://vuejs.org/) and the UI components explorer is [Storybook](https://storybook.js.org), we follow the design guidelines from the UX/Design team with the help of utility-first styles library [TailwindCSS](http://tailwindcss.com).
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.7.9",
+  "version": "2.7.10",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

diff --git a/src/components/ec-alert/ec-alert.spec.ts b/src/components/ec-alert/ec-alert.spec.ts
@@ -1,6 +1,6 @@
-import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils';
+import type { ComponentMountingOptions } from '@vue/test-utils';
 import { mount } from '@vue/test-utils';
-import { type ComponentPublicInstance, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 
 import EcAlert from './ec-alert.vue';
 import type { AlertProps } from './types';
@@ -21,29 +21,6 @@ describe('EcAlert', () => {
     );
   }
 
-  function mountAlertAsTemplate(
-    template: string,
-    wrapperComponentOpts?: Record<string, unknown>,
-    mountOpts?: ComponentMountingOptions<typeof EcAlert>,
-  ) {
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-
-    const Component = defineComponent({
-      components: { EcAlert },
-      template,
-      ...wrapperComponentOpts,
-    });
-
-    return mount(
-      Component,
-      {
-        attachTo: element,
-        ...mountOpts,
-      },
-    );
-  }
-
   it('should render with custom attributes', () => {
     const wrapper = mountAlert({}, {
       attrs: {
@@ -86,14 +63,15 @@ describe('EcAlert', () => {
   });
 
   it('should dismiss the alert when user clicks on the dismiss icon', async () => {
-    const wrapper = mountAlertAsTemplate(
-      `<ec-alert v-model:open="isOpen" type="${AlertType.INFO}" title="Custom random" dismissable />`,
-      {
-        data() {
-          return { isOpen: true };
-        },
+    const Component = defineComponent({
+      components: { EcAlert },
+      data() {
+        return { isOpen: true };
       },
-    );
+      template: `<ec-alert v-model:open="isOpen" type="${AlertType.INFO}" title="Custom random" dismissable />`,
+    });
+
+    const wrapper = mount(Component);
 
     expect(wrapper.findByDataTest('ec-alert__dismiss-icon').exists()).toBe(true);
     await wrapper.findByDataTest('ec-alert__dismiss-icon').trigger('click');
@@ -113,14 +91,20 @@ describe('EcAlert', () => {
   });
 
   it('should dismiss or show the alert when we change the v-model', async () => {
-    const wrapper = mountAlertAsTemplate(
-      `<ec-alert v-model:open="isOpen" type="${AlertType.INFO}" title="Custom random" dismissable />`,
-      {
-        data() {
-          return { isOpen: true };
-        },
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+
+    const Component = defineComponent({
+      components: { EcAlert },
+      data() {
+        return { isOpen: true };
       },
-    ) as VueWrapper<ComponentPublicInstance<unknown, { isOpen: boolean }>>;
+      template: `<ec-alert v-model:open="isOpen" type="${AlertType.INFO}" title="Custom random" dismissable />`,
+    });
+
+    const wrapper = mount(Component, {
+      attachTo: element,
+    });
 
     expect(wrapper.vm.isOpen).toBe(true);
     expect(wrapper.isVisible()).toBe(true);

diff --git a/src/components/ec-btn/ec-btn.spec.ts b/src/components/ec-btn/ec-btn.spec.ts
@@ -182,10 +182,12 @@ describe('EcBtn', () => {
     });
 
     it('should render given HTML attributes', () => {
-      const wrapper = mountBtn({
-        formtarget: 'my-form',
-        name: 'test-name',
-      } as ButtonProps);
+      const wrapper = mountBtn({}, {
+        attrs: {
+          formtarget: 'my-form',
+          name: 'test-name',
+        },
+      });
 
       expect(wrapper.element).toMatchSnapshot();
     });
@@ -265,12 +267,12 @@ describe('EcBtn', () => {
 
   describe(':attrs', () => {
     it('should pass custom attributes', () => {
-      const wrapper = mountBtn(
-        {
+      const wrapper = mountBtn({}, {
+        attrs: {
           id: 'my-button',
           'data-test': 'my-custom-button',
-        } as ButtonProps,
-      );
+        },
+      });
 
       expect(wrapper.attributes('id')).toBe('my-button');
       expect(wrapper.attributes('data-test')).toBe('my-custom-button ec-btn');
@@ -279,11 +281,11 @@ describe('EcBtn', () => {
 
     it('should pass a custom event handler', () => {
       const clickSpy = vi.fn();
-      const wrapper = mountBtn(
-        {
+      const wrapper = mountBtn({}, {
+        attrs: {
           onClick: clickSpy,
-        } as ButtonProps,
-      );
+        },
+      });
 
       wrapper.findByDataTest('ec-btn').trigger('click');
       expect(clickSpy).toHaveBeenCalledTimes(1);

diff --git a/src/components/ec-button-group/ec-button-group.spec.ts b/src/components/ec-button-group/ec-button-group.spec.ts
@@ -11,19 +11,6 @@ function mountButtonGroup<TValue = string>(props: ButtonGroupProps<TValue>, moun
   });
 }
 
-function mountButtonGroupAsTemplate(template: string, props: Record<string, unknown>, wrapperComponentOpts: Record<string, unknown>, mountOpts?: ComponentMountingOptions<unknown>) {
-  const Component = defineComponent({
-    components: { EcButtonGroup },
-    template,
-    ...wrapperComponentOpts,
-  });
-
-  return mount<typeof Component, ComponentMountingOptions<typeof Component>>(Component, {
-    props,
-    ...mountOpts,
-  });
-}
-
 describe('EcButtonGroup', () => {
   describe(':props', () => {
     it(':items - should render the button group with two items all on outline', () => {
@@ -51,21 +38,22 @@ describe('EcButtonGroup', () => {
 
   describe('v-model', () => {
     it('should render the button group and change the value when you click on the current not selected', async () => {
-      const wrapper = mountButtonGroupAsTemplate(
-        '<ec-button-group v-model="value" :items="items"></ec-button-group>',
-        {},
-        {
-          data() {
-            return {
-              value: 'yes',
-              items: [
-                { text: 'Yes', value: 'yes' },
-                { text: 'No', value: 'no' },
-              ],
-            };
-          },
+      const Component = defineComponent({
+        components: { EcButtonGroup },
+        data() {
+          return {
+            value: 'yes',
+            items: [
+              { text: 'Yes', value: 'yes' },
+              { text: 'No', value: 'no' },
+            ],
+          };
         },
-      );
+        template: '<ec-button-group v-model="value" :items="items"></ec-button-group>',
+      });
+
+      const wrapper = mount(Component);
+
       expect(wrapper.vm.value).toBe('yes');
       expect(wrapper.findByDataTest('ec-button-group__btn-0').classes('ec-btn--outline')).toBe(false);
       expect(wrapper.findByDataTest('ec-button-group__btn-1').classes('ec-btn--outline')).toBe(true);
@@ -76,21 +64,21 @@ describe('EcButtonGroup', () => {
     });
 
     it('should render the button group without any selected and change the value when you click on the current not selected', async () => {
-      const wrapper = mountButtonGroupAsTemplate(
-        '<ec-button-group v-model="value" :items="items"></ec-button-group>',
-        {},
-        {
-          data() {
-            return {
-              value: '',
-              items: [
-                { text: 'Yes', value: 'yes' },
-                { text: 'No', value: 'no' },
-              ],
-            };
-          },
+      const Component = defineComponent({
+        components: { EcButtonGroup },
+        data() {
+          return {
+            value: '',
+            items: [
+              { text: 'Yes', value: 'yes' },
+              { text: 'No', value: 'no' },
+            ],
+          };
         },
-      );
+        template: '<ec-button-group v-model="value" :items="items"></ec-button-group>',
+      });
+
+      const wrapper = mount(Component);
 
       expect(wrapper.vm.value).toBe('');
       expect(wrapper.findByDataTest('ec-button-group__btn-0').classes('ec-btn--outline')).toBe(true);
@@ -102,21 +90,22 @@ describe('EcButtonGroup', () => {
     });
 
     it('should render the button group and not change when click on the disabled item', async () => {
-      const wrapper = mountButtonGroupAsTemplate(
-        '<ec-button-group v-model="value" :items="items"></ec-button-group>',
-        {},
-        {
-          data() {
-            return {
-              value: 'yes',
-              items: [
-                { text: 'Yes', value: 'yes' },
-                { text: 'No', value: 'no', disabled: true },
-              ],
-            };
-          },
+      const Component = defineComponent({
+        components: { EcButtonGroup },
+        data() {
+          return {
+            value: 'yes',
+            items: [
+              { text: 'Yes', value: 'yes' },
+              { text: 'No', value: 'no', disabled: true },
+            ],
+          };
         },
-      );
+        template: '<ec-button-group v-model="value" :items="items"></ec-button-group>',
+      });
+
+      const wrapper = mount(Component);
+
       expect(wrapper.vm.value).toBe('yes');
       expect(wrapper.findByDataTest('ec-button-group__btn-0').classes('ec-btn--outline')).toBe(false);
       expect(wrapper.findByDataTest('ec-button-group__btn-1').classes('ec-btn--outline')).toBe(true);