Node.js upgrade to v18 along with dependency upgrades and linting fixes

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 10.x
+          node-version: 18.x
 
       - name: Cache Node.js modules
         uses: actions/cache@v4

.github/workflows/tests.yml

@@ -25,7 +25,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '10.x'
+        node-version: '18.x'
     - name: Cache Node.js modules
       uses: actions/cache@v4
       with:

.gitignore

@@ -21,3 +21,7 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+
+# env
+.envrc
+.python-version

dev_docs/01_getting_started.md

@@ -4,8 +4,8 @@ The design system has two primary parts, the UI component library [`/lib`](../li
 
 ## Prerequisites
 
-- Node.js 10.x (see [Node Version Manager](https://github.com/nvm-sh/nvm))
-- Yarn 1.x
+- Node.js 18.x (see [Node Version Manager](https://github.com/nvm-sh/nvm))
+- Yarn >=1.22.22
 
 ## Troubleshooting
 

docs/assets/main.scss

@@ -27,6 +27,7 @@ code {
 
 a code {
   color: $link-color;
+
   &:hover {
     color: $link-hover-color;
   }
@@ -44,6 +45,7 @@ a {
 
   &:hover {
     color: $link-hover-color;
+
     svg {
       fill: $link-hover-color;
     }
@@ -70,6 +72,7 @@ html {
 html {
   box-sizing: border-box;
 }
+
 *,
 *::before,
 *::after {

docs/common/DocsAnchorTarget.vue

@@ -30,10 +30,12 @@
         required: true,
         validator(value) {
           if (!value.startsWith('#')) {
+            // eslint-disable-next-line no-console
             console.error(`'anchor' prop value '${value}' must start with a '#'`);
             return false;
           }
           if (!value.match(/^#[\w\-.:]*$/)) {
+            // eslint-disable-next-line no-console
             console.error(`'anchor' prop value '${value}' invalid`);
             return false;
           }

docs/common/DocsFilter/index.vue

@@ -70,6 +70,7 @@
     font-size: 12px;
     border: 1px solid $border-color;
     border-radius: 4px;
+
     &::placeholder {
       color: $border-color;
     }

docs/common/DocsGithubLink.vue

@@ -20,10 +20,12 @@
   function validator(value) {
     if (typeof value === 'string') {
       if (value.startsWith('#')) {
+        // eslint-disable-next-line no-console
         console.error(`PR or issue number '${value}' should not start with a '#'`);
         return false;
       }
       if (!value.match(/^\d+$/)) {
+        // eslint-disable-next-line no-console
         console.error(`PR or issue number '${value}' invalid`);
         return false;
       }
@@ -78,12 +80,14 @@
           return `https://github.com/learningequality/kolibri-design-system/pull/${this.pull}`;
         if (this.issue)
           return `https://github.com/learningequality/kolibri-design-system/issues/${this.issue}`;
+        // eslint-disable-next-line no-console
         console.error(`No URL, PR, or issue provided`);
         return undefined;
       },
     },
     mounted() {
       if (this.pull && this.issue) {
+        // eslint-disable-next-line no-console
         console.warn("Pass either 'pull' or 'issue', not both");
       }
     },

docs/common/DocsPageSection.vue

@@ -13,7 +13,7 @@
 
 <script>
 
-  const consola = require('consola');
+  import consola from 'consola';
 
   export default {
     name: 'DocsPageSection',

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -55,7 +55,7 @@
         return termList(this.filterText);
       },
       visibleTableOfContents() {
-        let toc = [];
+        const toc = [];
         for (const section of tableOfContents) {
           // if the section title matches, add the entire thing
           if (matches(this.terms, section.title)) {

docs/pages/principles.vue

@@ -61,6 +61,7 @@
   .description {
     font-size: 18px;
   }
+
   li {
     font-size: 14px;
     color: #616161;

jest.conf/fileMock.js

@@ -1,3 +1,3 @@
 // As recommended by https://jestjs.io/docs/en/webpack#handling-static-assets
 
-module.exports = 'test-file-stub';
+export default 'test-file-stub';

jest.conf/index.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 
 const moduleNameMapper = {
   '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$': path.resolve(
@@ -12,10 +12,12 @@ module.exports = {
   moduleFileExtensions: ['js', 'json', 'vue'],
   moduleNameMapper,
   testEnvironment: 'jsdom',
-  testURL: 'http://kolibri.time',
+  testEnvironmentOptions: {
+    url: 'http://kolibri.time',
+  },
   transform: {
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.js$': require.resolve('babel-jest'),
+    '^.+\\.vue$': require.resolve('vue-jest'),
   },
   snapshotSerializers: ['jest-serializer-vue'],
   globals: {

jest.conf/setup.js

@@ -3,6 +3,9 @@ import '@testing-library/jest-dom';
 import * as Aphrodite from 'aphrodite';
 import * as AphroditeNoImportant from 'aphrodite/no-important';
 
+// eslint-disable-next-line import/no-unresolved
+import 'mock-match-media/jest-setup';
+
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VueIntl from 'vue-intl';

jest.conf/testUtils.js

@@ -1,4 +1,3 @@
-import 'mock-match-media/jest-setup.cjs';
 import { setMedia } from 'mock-match-media';
 
 export const resizeWindow = (width, height = 768) => {

lib/KDateRange/KDateInput.vue

@@ -6,15 +6,15 @@
         :ref="inputRef"
         :value="value"
         type="date"
-        pattern="\d{4}-\d{2}-\d{2}" 
+        pattern="\d{4}-\d{2}-\d{2}"
         :label="legendText"
         autoComplete="off"
         :invalid="Boolean(errorMessage)"
         :showInvalidText="Boolean(errorMessage)"
         :invalidText="errorMessage"
         :floatingLabel="false"
         @input="handleInput"
-      />  
+      />
       <span class="k-date-vhidden">
         <span v-if="value" :id="inputId">
           {{ dateDescription }}
@@ -28,9 +28,10 @@
 
 <script>
 
-  import { v4 as uuidv4 } from 'uuid';
   import KTextBox from '../KTextbox';
 
+  let uuid = 0;
+
   export default {
     name: 'KDateInput',
     components: {
@@ -54,6 +55,11 @@
         default: null,
       },
     },
+    data() {
+      return {
+        uuid: 0,
+      };
+    },
     computed: {
       dateDescription() {
         if (this.value) {
@@ -74,13 +80,14 @@
       },
       inputId() {
         if (this.value) {
-          return `DateDesc_${uuidv4()
-            .split('-')
-            .pop()}`;
+          return `DateDesc_${this.uuid}`;
         }
         return '';
       },
     },
+    beforeCreate() {
+      this.uuid = String(uuid++);
+    },
     mounted() {
       this.$nextTick(() => {
         const inputs = document.querySelectorAll('input[type = date]');
@@ -148,4 +155,4 @@
     }
   }
 
-</style>
+</style>

lib/KDropdownMenu.vue

@@ -174,9 +174,9 @@
         const lastChild = menuElements[menuElements.length - 1];
         const popoverIsOpen = popover.clientWidth > 0 && popover.clientHeight > 0;
         // set current element and its siblings
-        let focusedElement = document.activeElement;
-        let sibling = focusedElement.nextElementSibling;
-        let prevSibling = focusedElement.previousElementSibling;
+        const focusedElement = document.activeElement;
+        const sibling = focusedElement.nextElementSibling;
+        const prevSibling = focusedElement.previousElementSibling;
 
         // manage rotating through the options using arrow keys
         // UP arrow: .keyCode is depricated and should used only as a fallback

lib/KIcon/index.vue

@@ -76,6 +76,7 @@
     },
     mounted() {
       if (KolibriIcons[this.icon].fixedColor && this.color) {
+        // eslint-disable-next-line no-console
         console.error(
           `KIcon: ${this.icon} color property will not be applied because the icon has a fixed color.`
         );

lib/KImg/__tests__/KImg.spec.js

@@ -1,17 +1,20 @@
 import { shallowMount } from '@vue/test-utils';
 import KImg from '../';
 
-function makeWrapper({ propsData = {} } = {}) {
-  return shallowMount(KImg, { propsData });
+function makeWrapper(opts) {
+  return shallowMount(KImg, opts);
 }
 
 describe('KImg', () => {
   it(`renders without any errors when a valid 'src' and 'altText' are provided`, () => {
+    const error = jest.fn();
     const wrapper = makeWrapper({
       propsData: { src: '/le-logo.svg', altText: 'LE logo' },
+      listeners: { error },
     });
 
     expect(wrapper.exists()).toBe(true);
+    expect(error).not.toHaveBeenCalled();
 
     const img = wrapper.find('img');
     expect(img.exists()).toBe(true);
@@ -20,20 +23,26 @@ describe('KImg', () => {
   });
 
   it(`throws an error when no 'altText' is provided`, () => {
-    expect(() =>
-      makeWrapper({
-        propsData: { src: '/le-logo.svg', altText: undefined },
-      })
-    ).toThrow();
+    const error = jest.fn();
+    makeWrapper({
+      propsData: { src: '/le-logo.svg', altText: undefined },
+      listeners: { error },
+    });
+    expect(error).toHaveBeenCalled();
+    expect(error.mock.calls[0][0]).toBeInstanceOf(Error);
+    expect(error.mock.calls[0][0].message).toBe(
+      'Missing required prop - provide altText or indicate isDecorative'
+    );
   });
 
   describe(`when no 'altText' is provided and it is a decorative image`, () => {
     it(`does not throw an error`, () => {
-      expect(() =>
-        makeWrapper({
-          propsData: { src: '/le-logo.svg', altText: undefined, isDecorative: true },
-        })
-      ).not.toThrow();
+      const error = jest.fn();
+      makeWrapper({
+        propsData: { src: '/le-logo.svg', altText: undefined, isDecorative: true },
+        listeners: { error },
+      });
+      expect(error).not.toHaveBeenCalled();
     });
 
     it(`sets 'alt' attribute to an empty string`, () => {
@@ -46,32 +55,38 @@ describe('KImg', () => {
   });
 
   it(`throws an error when 'aspectRatio' has an invalid format`, () => {
-    expect(() =>
-      makeWrapper({
-        propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16/9' },
-      })
-    ).toThrow();
+    const error = jest.fn();
+    makeWrapper({
+      propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16/9' },
+      listeners: { error },
+    });
+    expect(error).toHaveBeenCalled();
+    expect(error.mock.calls[0][0]).toBeInstanceOf(Error);
+    expect(error.mock.calls[0][0].message).toBe('Invalid aspect ratio provided: 16/9');
   });
 
   it(`doesn't throw an error when 'aspectRatio' has a valid format`, () => {
-    expect(() =>
-      makeWrapper({
-        propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16:9' },
-      })
-    ).not.toThrow();
+    const error = jest.fn();
+    makeWrapper({
+      propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16:9' },
+      listeners: { error },
+    });
+    expect(error).not.toHaveBeenCalled();
   });
 
-  it(`emits an 'error' event when there is an error in loading the image`, () => {
+  it(`emits an 'error' event when there is an error in loading the image`, async () => {
+    const error = jest.fn();
     const wrapper = makeWrapper({
       propsData: { src: '/le-logo.svg', altText: 'LE logo' },
+      listeners: { error },
     });
 
     // Manually trigger the onError method to simulate the image load failure
-    wrapper.vm.onError(new Event('error'));
+    const e = new Event('error');
+    wrapper.vm.onError(e);
 
-    // Check if the "error" event has been emitted with the DOM event payload
-    const emittedEvent = wrapper.emitted().error;
-    expect(emittedEvent).toBeTruthy();
-    expect(emittedEvent[0][0]).toBeInstanceOf(Event);
+    expect(error).toHaveBeenCalled();
+    expect(error.mock.calls[0][0]).toBeInstanceOf(Event);
+    expect(error.mock.calls[0][0]).toEqual(e);
   });
 });