refactor(many): convert ui-scripts to TypeScript and add tests

package.json

@@ -118,7 +118,7 @@
     "git-raw-commits>dargs": "Force dargs@7.0.0 (CommonJS) for git-raw-commits@3.0.0 used by lerna. pnpm hoisting was causing ESM dargs@8.1.0 to be resolved instead, breaking 'pnpm run bump' with 'TypeError: dargs is not a function'"
   },
   "engines": {
-    "node": ">=22",
+    "node": ">=22.18.0",
     "npm": "Use pnpm instead.",
     "pnpm": ">=10"
   },

packages/command-utils/lib/index.js

@@ -76,7 +76,7 @@ class Command {
 /**
  * @param bin {string}  The binary name, e.g. `pwd`
  * @param args {string[]} command arguments
- * @param envVars {Object.<string, string>} Environment variables
+ * @param [envVars] {Object.<string, string>} Environment variables
  */
 function getCommand(bin, args, envVars) {
   return new Command(bin, args, envVars)

packages/pkg-utils/lib/get-changed-packages.js

@@ -26,6 +26,10 @@ const path = require('path')
 const getPackages = require('./get-packages')
 const childProcess = require('child_process')
 
+/**
+ * @param [commitIsh] {string}
+ * @param [allPackages] {any[]}
+ */
 module.exports = function getChangedPackages(
   commitIsh = 'HEAD^1',
   allPackages

packages/pkg-utils/lib/get-package.js

@@ -27,14 +27,17 @@ const path = require('path')
 const readPkgUp = require('read-pkg-up')
 const Package = require('@lerna/package').Package
 
+/**
+ * @param [options] {readPkgUp.NormalizeOptions}
+ */
 exports.getPackage = function getPackage(options) {
   const result = readPackage(options)
   return new Package(result.packageJson, path.dirname(result.path))
 }
 
 /**
  * Reads a package.json
- * @param options {readPkgUp.NormalizeOptions}
+ * @param [options] {readPkgUp.NormalizeOptions}
  * @returns {readPkgUp.NormalizedPackageJson}
  */
 exports.getPackageJSON = function getPackageJSON(options) {

packages/ui-codemods/package.json

@@ -16,7 +16,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false",
-    "generate:versioned-exports": "node --experimental-strip-types scripts/generateVersionedExports.ts"
+    "generate:versioned-exports": "node scripts/generateVersionedExports.ts"
   },
   "license": "MIT",
   "dependencies": {

packages/ui-codemods/scripts/generateVersionedExports.ts

@@ -24,7 +24,7 @@
 
 /**
  * Generates a list of all versioned components based on the @instructure/ui meta package
- * Run with: node --experimental-strip-types scripts/generateVersionedExports.ts
+ * Run with: node scripts/generateVersionedExports.ts
  * from the packages/ui-codemods directory.
  */
 

packages/ui-scripts/lib/__node_tests__/create-component-version.test.ts

@@ -0,0 +1,75 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { fuzzyMatch } from '../commands/create-component-version.ts'
+
+const components = [
+  { label: '', dir: '', pkg: 'ui-buttons', name: 'Button', versions: ['v1'] },
+  { label: '', dir: '', pkg: 'ui-text', name: 'Text', versions: ['v1'] },
+  { label: '', dir: '', pkg: 'ui-tabs', name: 'Tabs', versions: ['v1', 'v2'] },
+  {
+    label: '',
+    dir: '',
+    pkg: 'ui-buttons',
+    name: 'IconButton',
+    versions: ['v1']
+  }
+]
+
+describe('fuzzyMatch', () => {
+  it('matches when the query is a substring of pkg or name', () => {
+    expect(
+      fuzzyMatch(components, 'button')
+        .map((c) => c.name)
+        .sort()
+    ).toEqual(['Button', 'IconButton'])
+  })
+
+  it('matches characters in order even when they are not contiguous', () => {
+    const matches = fuzzyMatch(components, 'utt').map((c) => c.name)
+    expect(matches).toContain('Button')
+  })
+
+  it('is case-insensitive', () => {
+    expect(
+      fuzzyMatch(components, 'BUTTON')
+        .map((c) => c.name)
+        .sort()
+    ).toEqual(['Button', 'IconButton'])
+  })
+
+  it('returns an empty array when no component matches', () => {
+    expect(fuzzyMatch(components, 'xyz')).toEqual([])
+  })
+
+  it('returns every component for an empty query string', () => {
+    expect(fuzzyMatch(components, '')).toHaveLength(components.length)
+  })
+
+  it('considers both pkg and name when scoring (ordered chars)', () => {
+    const matches = fuzzyMatch(components, 'tabt').map((c) => c.name)
+    expect(matches).toContain('Tabs')
+  })
+})

packages/ui-scripts/lib/__node_tests__/createFile.test.ts

@@ -0,0 +1,87 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { describe, it, expect, afterEach } from 'vitest'
+import {
+  existsSync,
+  mkdtempSync,
+  readFileSync,
+  rmSync,
+  writeFileSync
+} from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import createFile from '../build/buildThemes/createFile.ts'
+
+describe('createFile', () => {
+  let dir: string
+
+  afterEach(() => {
+    if (dir) rmSync(dir, { recursive: true, force: true })
+  })
+
+  it('writes a file with the license header prepended to the content', async () => {
+    dir = mkdtempSync(join(tmpdir(), 'create-file-')) + '/'
+    const target = dir + 'output.ts'
+
+    await createFile(target, 'export const x = 1')
+
+    const written = readFileSync(target, 'utf-8')
+    expect(written).toContain('The MIT License (MIT)')
+    expect(written).toContain('export const x = 1')
+    expect(written.indexOf('The MIT License')).toBeLessThan(
+      written.indexOf('export const x = 1')
+    )
+  })
+
+  it('creates missing parent directories', async () => {
+    dir = mkdtempSync(join(tmpdir(), 'create-file-')) + '/'
+    const target = dir + 'deeply/nested/output.ts'
+
+    await createFile(target, 'hello')
+
+    expect(existsSync(target)).toBe(true)
+  })
+
+  it('overwrites an existing file at the same path', async () => {
+    dir = mkdtempSync(join(tmpdir(), 'create-file-')) + '/'
+    const target = dir + 'output.ts'
+
+    writeFileSync(target, 'old content', 'utf-8')
+
+    await createFile(target, 'new content')
+
+    const written = readFileSync(target, 'utf-8')
+    expect(written).toContain('new content')
+    expect(written).not.toContain('old content')
+  })
+
+  it('does not throw when the target does not already exist', async () => {
+    dir = mkdtempSync(join(tmpdir(), 'create-file-')) + '/'
+    const target = dir + 'output.ts'
+
+    // The function tries to unlink first — ENOENT must be swallowed
+    await expect(createFile(target, 'hello')).resolves.not.toThrow()
+  })
+})

packages/ui-scripts/lib/__node_tests__/generate-custom-index.test.ts

@@ -0,0 +1,108 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import generateCustomIndex from '../icons/generate-custom-index.ts'
+
+describe('generateCustomIndex', () => {
+  let dir: string
+
+  afterEach(() => {
+    if (dir) rmSync(dir, { recursive: true, force: true })
+    vi.restoreAllMocks()
+  })
+
+  function setupFixtures() {
+    dir = mkdtempSync(join(tmpdir(), 'gen-custom-')) + '/'
+    mkdirSync(dir + 'svg/Custom', { recursive: true })
+    writeFileSync(
+      dir + 'svg/Custom/ai-info.svg',
+      '<svg viewBox="0 0 24 24"><path d="M0,0" fill="currentColor"/></svg>'
+    )
+    writeFileSync(
+      dir + 'svg/Custom/canvas-logo.svg',
+      '<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="8"/></svg>'
+    )
+    vi.spyOn(process, 'cwd').mockReturnValue(dir.slice(0, -1))
+    vi.spyOn(console, 'log').mockImplementation(() => {})
+  }
+
+  it('writes one InstUIIcon export per SVG file', () => {
+    setupFixtures()
+    generateCustomIndex()
+    const content = readFileSync(
+      dir + 'src/generated/custom/index.tsx',
+      'utf-8'
+    )
+    const exportCount = (content.match(/^export const /gm) || []).length
+    expect(exportCount).toBe(2)
+  })
+
+  it('converts kebab-case filenames to PascalCase icon names', () => {
+    setupFixtures()
+    generateCustomIndex()
+    const content = readFileSync(
+      dir + 'src/generated/custom/index.tsx',
+      'utf-8'
+    )
+    expect(content).toContain('export const AiInfoInstUIIcon')
+    expect(content).toContain('export const CanvasLogoInstUIIcon')
+  })
+
+  it('forwards the SVG viewBox to wrapCustomIcon', () => {
+    setupFixtures()
+    generateCustomIndex()
+    const content = readFileSync(
+      dir + 'src/generated/custom/index.tsx',
+      'utf-8'
+    )
+    expect(content).toContain(
+      "wrapCustomIcon(AiInfoPaths, 'AiInfo', '0 0 24 24')"
+    )
+    expect(content).toContain(
+      "wrapCustomIcon(CanvasLogoPaths, 'CanvasLogo', '0 0 32 32')"
+    )
+  })
+
+  it('rewrites fill="currentColor" to ={color} so consumers can theme the icon', () => {
+    setupFixtures()
+    generateCustomIndex()
+    const content = readFileSync(
+      dir + 'src/generated/custom/index.tsx',
+      'utf-8'
+    )
+    expect(content).toContain('fill={color}')
+    expect(content).not.toContain('fill="currentColor"')
+  })
+
+  it('throws if the svg/Custom directory does not exist', () => {
+    dir = mkdtempSync(join(tmpdir(), 'gen-custom-')) + '/'
+    vi.spyOn(process, 'cwd').mockReturnValue(dir.slice(0, -1))
+    vi.spyOn(console, 'log').mockImplementation(() => {})
+    expect(() => generateCustomIndex()).toThrow(/SVG directory not found/)
+  })
+})