Merge pull request #645 from bjester/nodejs-upgrade

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

.eslintrc.js

@@ -1,18 +1,23 @@
-const esLintConfig = require('kolibri-tools/.eslintrc');
+const esLintConfig = require('kolibri-format/.eslintrc');
 
-// Vuetify's helper attributes use hyphens and they would
-// not be recognized if auto-formatted to camel case
-esLintConfig.rules['vue/attribute-hyphenation'] = 0;
-
-// This rule conflicts with Nuxt page naming
-esLintConfig.rules['kolibri/vue-filename-and-component-name-match'] = 0;
+const nuxtDocsRules = {
+  // Vuetify's helper attributes use hyphens and they would
+  // not be recognized if auto-formatted to camel case
+  'vue/attribute-hyphenation': 0,
+  // This rule conflicts with Nuxt page naming
+  'vue/no-reserved-component-names': 0,
+  // This rule conflicts with Nuxt page naming
+  'kolibri/vue-filename-and-component-name-match': 0,
+  // max-len rules are unhelpful for documentation
+  'max-len': 0,
+  'vue/max-len': 0,
+};
 
-// This rule is currently disabled in kolibri-tools/.eslintrc
-esLintConfig.rules['vue/require-default-prop'] = 1;
+esLintConfig.overrides.push({
+  files: ['docs/**/*.vue'],
+  rules: nuxtDocsRules,
+});
 
-// max-len rules are unhelpful for documentation
-esLintConfig.rules['max-len'] = 0;
-esLintConfig.rules['vue/max-len'] = 0;
 
 // Allow nuxt resources to be found
 esLintConfig.settings['import/resolver'].nuxt = {

.git-blame-ignore-revs

@@ -0,0 +1,5 @@
+# Run this command to always ignore formatting commits in `git blame`
+# git config blame.ignoreRevsFile .git-blame-ignore-revs
+
+# Applied updated linting for kolibri-format to codebase
+cf75a89979022d1f30666613d1a324e9a8da189a

.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/npm-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '10.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
       - run: npm publish
         env:

.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,4 +21,10 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+
+# dev playground
 docs/pages/playground.vue
+
+# env
+.envrc
+.python-version

.prettierrc.js

@@ -1 +1 @@
-module.exports = require('kolibri-tools/.prettierrc');
+module.exports = require('kolibri-format/.prettierrc');

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/definitions.scss

@@ -4,5 +4,6 @@ $code-color: #696680;
 $link-color: #368d74;
 $link-hover-color: #26614d;
 $selection-color: #badbd2;
-$basic-transition: color 0.25s ease, fill 0.25s ease;
+$basic-transition: color 0.25s ease,
+  fill 0.25s ease;
 $nav-width: 260px;

docs/assets/main.scss

@@ -26,6 +26,7 @@ code {
 
 a code {
   color: $link-color;
+
   &:hover {
     color: $link-hover-color;
   }
@@ -43,6 +44,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

@@ -14,7 +14,11 @@
       />
     </DocsInternalLink>
     <!-- hidden target to account for variable height of header -->
-    <a :id="anchorId" :href="anchor" class="offset-target">#</a>
+    <a
+      :id="anchorId"
+      :href="anchor"
+      class="offset-target"
+    >#</a>
   </div>
 
 </template>
@@ -30,10 +34,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/DocsColorBlock.vue

@@ -1,9 +1,15 @@
 <template>
 
   <div class="block-wrapper">
-    <div class="color-block" :style="{ backgroundColor: value }"></div>
+    <div
+      class="color-block"
+      :style="{ backgroundColor: value }"
+    ></div>
     <div class="code name">
-      <code>{{ name }}</code><DocsAnchorTarget v-if="definition" :anchor="anchor" />
+      <code>{{ name }}</code><DocsAnchorTarget
+        v-if="definition"
+        :anchor="anchor"
+      />
     </div>
     <div class="code value">
       <DocsInternalLink
@@ -15,7 +21,10 @@
       <code v-else-if="isToken">{{ tokenSource }}</code>
       <code v-else>{{ value }}</code>
     </div>
-    <p v-if="$slots.default" class="description">
+    <p
+      v-if="$slots.default"
+      class="description"
+    >
       <slot></slot>
     </p>
   </div>

docs/common/DocsDoNot.vue

@@ -1,18 +1,20 @@
 <template>
 
   <div>
-    <div v-if="$slots.do" class="show">
-      <div class="header">
-        <span class="do mark">✔</span> Do
-      </div>
+    <div
+      v-if="$slots.do"
+      class="show"
+    >
+      <div class="header"><span class="do mark">✔</span> Do</div>
       <div class="content">
         <slot name="do"></slot>
       </div>
     </div>
-    <div v-if="$slots.not" class="show">
-      <div class="header">
-        <span class="mark not">✘</span> Don't
-      </div>
+    <div
+      v-if="$slots.not"
+      class="show"
+    >
+      <div class="header"><span class="mark not">✘</span> Don't</div>
       <div class="content">
         <slot name="not"></slot>
       </div>

docs/common/DocsExternalLink.vue

@@ -2,7 +2,16 @@
 
   <!-- eslint-disable -->
   <!-- prevent line from wrapping so that icon displays correctly -->
-  <a :href="href" target="_blank"><template v-if="text">{{ text }}</template><template v-else><slot></slot></template><KIcon icon="openNewTab" class="pop" disableColor /></a>
+  <a
+    :href="href"
+    target="_blank"
+    ><template v-if="text">{{ text }}</template
+    ><template v-else><slot></slot></template
+    ><KIcon
+      icon="openNewTab"
+      class="pop"
+      disableColor
+  /></a>
   <!-- eslint-enable -->
 
 </template>

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

@@ -1,15 +1,19 @@
 <template>
 
-  <a :href="linkUrl" target="_blank">
+  <a
+    :href="linkUrl"
+    target="_blank"
+  >
     <svg
       class="logo"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title>GitHub</title>
-      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-    </svg><span>{{ linkText }}</span>
+      <path
+        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+      /></svg><span>{{ linkText }}</span>
   </a>
 
 </template>
@@ -20,10 +24,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 +84,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

@@ -1,9 +1,15 @@
 <template>
 
-  <section :style="style" class="section-wrapper">
+  <section
+    :style="style"
+    class="section-wrapper"
+  >
     <h2 v-if="title">
       {{ title }}
-      <DocsAnchorTarget v-if="anchor" :anchor="anchor" />
+      <DocsAnchorTarget
+        v-if="anchor"
+        :anchor="anchor"
+      />
     </h2>
     <slot></slot>
   </section>
@@ -13,7 +19,7 @@
 
 <script>
 
-  const consola = require('consola');
+  import consola from 'consola';
 
   export default {
     name: 'DocsPageSection',

docs/common/DocsPageTemplate/BranchLink.vue

@@ -6,11 +6,12 @@
       :href="linkUrl"
       :text="linkText"
     />
-    <span v-else>
-      Local environment
-    </span>
+    <span v-else> Local environment </span>
     <span>|</span>
-    <DocsGithubLink text="Release notes" href="https://github.com/learningequality/kolibri-design-system/releases" />
+    <DocsGithubLink
+      text="Release notes"
+      href="https://github.com/learningequality/kolibri-design-system/releases"
+    />
   </div>
 
 </template>

docs/common/DocsPageTemplate/Header.vue

@@ -1,10 +1,16 @@
 <template>
 
-  <div class="header" :class="{ scrolled }">
+  <div
+    class="header"
+    :class="{ scrolled }"
+  >
     <div>
       <h1 class="header-text">
         <span :class="{ code: codeStyle }">{{ title }}</span>
-        <a href="#" @click="scrollToTop">
+        <a
+          href="#"
+          @click="scrollToTop"
+        >
           <file-svg
             src="../../assets/link.svg"
             class="icon-link"
@@ -15,10 +21,20 @@
       </h1>
       <BranchLink style="float: right" />
     </div>
-    <div style="clear: both;"></div>
-    <ul v-if="sections.length" class="nav">
-      <li v-for="(section, i) in sections" :key="i" class="nav-item">
-        <DocsInternalLink :href="section.anchor" :text="section.title" />
+    <div style="clear: both"></div>
+    <ul
+      v-if="sections.length"
+      class="nav"
+    >
+      <li
+        v-for="(section, i) in sections"
+        :key="i"
+        class="nav-item"
+      >
+        <DocsInternalLink
+          :href="section.anchor"
+          :text="section.title"
+        />
       </li>
     </ul>
   </div>

docs/common/DocsPageTemplate/SideNav/NavLink.vue

@@ -11,7 +11,7 @@
     v-else
     class="block enabled-link"
     :href="page.path"
-    :class="{ currentPage, code: page.isCode }"
+    :class="{ 'current-page': currentPage, code: page.isCode }"
   >
     {{ page.title }}
   </a>
@@ -74,7 +74,7 @@
     }
   }
 
-  .currentPage {
+  .current-page {
     color: black;
     background-color: $border-color;