refactor(docs/ui): migrate to ES modules and add ESLint enforcement

docs/ui/eslint.config.js

@@ -0,0 +1,42 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const globals = require('globals');
+
+module.exports = [
+  {
+    files: ['src/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: globals.browser
+    },
+    rules: {
+      // Disallow the comma operator (sequences), which obscures intent and is
+      // easy to accidentally wrap in extra parentheses. Use separate statements.
+      'no-sequences': 'error',
+
+      // Enforce ES module syntax so the codebase stays consistent with the
+      // ESM-only @adobe/leonardo-contrast-colors package.
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'CallExpression[callee.name="require"]',
+          message: 'Use import statements instead of require().'
+        },
+        {
+          selector: 'AssignmentExpression[left.object.name="module"][left.property.name="exports"]',
+          message: 'Use export statements instead of module.exports.'
+        }
+      ]
+    }
+  }
+];

docs/ui/moon.yml

@@ -100,6 +100,12 @@ tasks:
       - '@globs(sources)'
     outputs:
       - '@globs(output)'
+  lint:
+    command: 'eslint src/'
+    platform: node
+    inputs:
+      - 'src/**/*.js'
+      - eslint.config.js
   deploySite:
     command: 'gh-pages -d dist'
     platform: node

docs/ui/package.json

@@ -98,6 +98,8 @@
   },
   "devDependencies": {
     "buffer": "^5.5.0||^6.0.0",
+    "eslint": "^10.0.0",
+    "eslint-plugin-import": "^2.32.0",
     "gh-pages": "^3.2.3",
     "highlight.js": "^11.2.0",
     "parcel": "^2.12.0",

docs/ui/src/index.js

@@ -74,17 +74,6 @@ import {throttle, sanitizeQueryString} from './js/utils';
 import {openPanelTab, openTab, openAppTab, openSideNavItem} from './js/tabs';
 import toggleTooltip from './js/tooltip';
 
-const {readFileSync} = require('fs');
-const posthtml = require('posthtml');
-const options = {
-  /* see available options below */
-};
-
-posthtml()
-  .use(require('posthtml-modules')(options))
-  .process(readFileSync('src/index.html', 'utf8'))
-  .then((result) => result);
-
 // Redirect for URL parameters
 let url = new URL(window.location);
 let params = new URLSearchParams(sanitizeQueryString(url.search.slice(1)));

docs/ui/src/js/addBulkDialog.js

@@ -82,8 +82,4 @@ window.addBulk = addBulk;
 window.cancelBulk = cancelBulk;
 window.bulkItemColorInput = bulkItemColorInput;
 
-module.exports = {
-  addBulk,
-  bulkItemColorInput,
-  cancelBulk
-};
+export {addBulk, bulkItemColorInput, cancelBulk};

docs/ui/src/js/addColorsFromImage.js

@@ -127,6 +127,4 @@ function validFileType(file) {
 
 window.addColorsFromImage = addColorsFromImage;
 
-module.exports = {
-  addColorsFromImage
-};
+export {addColorsFromImage};

docs/ui/src/js/addFromURL.js

@@ -76,8 +76,4 @@ window.addFromURLDialog = addFromURLDialog;
 window.cancelURL = cancelURL;
 window.addFromURL = addFromURL;
 
-module.exports = {
-  addFromURL,
-  addFromURLDialog,
-  cancelURL
-};
+export {addFromURL, addFromURLDialog, cancelURL};

docs/ui/src/js/addLightnessBulkDialog.js

@@ -61,8 +61,4 @@ window.addLightnessBulk = addLightnessBulk;
 window.cancelLightnessBulk = cancelLightnessBulk;
 window.bulkLightnessInput = bulkLightnessInput;
 
-module.exports = {
-  addLightnessBulk,
-  bulkLightnessInput,
-  cancelLightnessBulk
-};
+export {addLightnessBulk, bulkLightnessInput, cancelLightnessBulk};

docs/ui/src/js/addScaleBulkDialog.js

@@ -111,8 +111,4 @@ window.addScaleBulk = addScaleBulk;
 window.cancelScaleBulk = cancelScaleBulk;
 window.bulkScaleItemColorInput = bulkScaleItemColorInput;
 
-module.exports = {
-  addScaleBulk,
-  bulkScaleItemColorInput,
-  cancelScaleBulk
-};
+export {addScaleBulk, bulkScaleItemColorInput, cancelScaleBulk};

docs/ui/src/js/bulkConvertDialog.js

@@ -14,9 +14,8 @@ import {round} from './utils';
 import {contrast} from '@adobe/leonardo-contrast-colors';
 import {saveAs} from 'file-saver';
 
-const simpleColorConverter = require('simple-color-converter');
-
-const chroma = require('chroma-js');
+import simpleColorConverter from 'simple-color-converter';
+import chroma from 'chroma-js';
 import {extendChroma} from './chroma-plus';
 extendChroma(chroma);
 
@@ -185,8 +184,4 @@ window.bulkConvert = bulkConvert;
 window.cancelBulkConvert = cancelBulkConvert;
 window.bulkItemConvertColorInput = bulkItemConvertColorInput;
 
-module.exports = {
-  bulkConvert,
-  bulkItemConvertColorInput,
-  cancelBulkConvert
-};
+export {bulkConvert, bulkItemConvertColorInput, cancelBulkConvert};

docs/ui/src/js/colorDetailsPanel.js

@@ -653,4 +653,4 @@ function showColorDetails(e, colorId) {
   });
 }
 
-module.exports = {showColorDetails};
+export {showColorDetails};

docs/ui/src/js/colorScale.js

@@ -172,8 +172,4 @@ window.addColorScale = addColorScale;
 window.addColorScaleUpdate = addColorScaleUpdate;
 window.themeDeleteItem = themeDeleteItem;
 
-module.exports = {
-  addColorScale,
-  addColorScaleUpdate,
-  themeDeleteItem
-};
+export {addColorScale, addColorScaleUpdate, themeDeleteItem};

docs/ui/src/js/colorScaleDiverging.js

@@ -22,7 +22,7 @@ import {createSamples} from './createSamples';
 import {createDemos} from './createDemos';
 import {createPanelReportTable} from './createPanelReportTable';
 
-const chroma = require('chroma-js');
+import chroma from 'chroma-js';
 
 function colorScaleDiverging(scaleType = 'diverging') {
   /**
@@ -212,6 +212,4 @@ function colorScaleDiverging(scaleType = 'diverging') {
   });
 }
 
-module.exports = {
-  colorScaleDiverging
-};
+export {colorScaleDiverging};

docs/ui/src/js/colorScaleQualitative.js

@@ -15,9 +15,9 @@ import {throttle, capitalizeFirstLetter, cssColorToRgb, simulateCvd, getDifferen
 import {createColorWheel, updateColorWheel, updateColorDots} from './colorWheel';
 import {createDemos} from './createDemos';
 
-const chroma = require('chroma-js');
+import chroma from 'chroma-js';
 import {extendChroma} from './chroma-plus';
-const DeltaE = require('delta-e');
+import DeltaE from 'delta-e';
 
 extendChroma(chroma);
 
@@ -448,7 +448,8 @@ function showColors(arr, dest, panel = false) {
       if (dest === 'cvdSafeColors') {
         swatch.innerHTML = `${color}`;
         let button = document.createElement('button');
-        ((button.className = _qualitativeScale.keeperColors.indexOf(color) >= 0 ? 'saveColorToKeepers showSvg' : 'saveColorToKeepers'), (button.style.color = contrast < 4.5 ? '#ffffff' : '#000000'));
+        button.className = _qualitativeScale.keeperColors.indexOf(color) >= 0 ? 'saveColorToKeepers showSvg' : 'saveColorToKeepers';
+        button.style.color = contrast < 4.5 ? '#ffffff' : '#000000';
         button.innerHTML =
           _qualitativeScale.keeperColors.indexOf(color) >= 0
             ? `<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Locked">
@@ -471,7 +472,8 @@ function showColors(arr, dest, panel = false) {
       }
       if (dest === 'qualitative_selectedColors') {
         let button = document.createElement('button');
-        ((button.className = 'saveColorToKeepers'), (button.style.color = contrast < 4.5 ? '#ffffff' : '#000000'));
+        button.className = 'saveColorToKeepers';
+        button.style.color = contrast < 4.5 ? '#ffffff' : '#000000';
         button.innerHTML = `<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
           <use xlink:href="#spectrum-icon-18-Delete"></use>
         </svg>`;
@@ -627,6 +629,4 @@ function eliminateLowContrastFromSet(set, background, ratio) {
   return newSet;
 }
 
-module.exports = {
-  colorScaleQualitative
-};
+export {colorScaleQualitative};

docs/ui/src/js/colorScaleSequential.js

@@ -21,7 +21,7 @@ import {createSamples} from './createSamples';
 import {createDemos} from './createDemos';
 import {createPanelReportTable} from './createPanelReportTable';
 
-const chroma = require('chroma-js');
+import chroma from 'chroma-js';
 
 function colorScaleSequential(scaleType = 'sequential') {
   let defaultBackgroundColor;
@@ -187,6 +187,4 @@ function colorScaleSequential(scaleType = 'sequential') {
   });
 }
 
-module.exports = {
-  colorScaleSequential
-};
+export {colorScaleSequential};

docs/ui/src/js/colorWheel.js

@@ -19,7 +19,7 @@ import {createHtmlElement, createSvgElement} from './createHtmlElement';
 import {polarColorPath} from './polarColorPath';
 import {convertToCartesian, removeElementsByClass, throttle} from './utils';
 import {create3dModel} from './create3dModel';
-const chroma = require('chroma-js');
+import chroma from 'chroma-js';
 import {extendChroma} from './chroma-plus';
 extendChroma(chroma);
 
@@ -394,13 +394,4 @@ if (colorWheelMode) {
   });
 }
 
-module.exports = {
-  updateColorDots,
-  getColorWheelSize,
-  getConvertedColorCoodrindates,
-  createColorWheelDots,
-  createColorWheel,
-  getSmallestWindowDimension,
-  shiftValue,
-  updateColorWheel
-};
+export {updateColorDots, getColorWheelSize, getConvertedColorCoodrindates, createColorWheelDots, createColorWheel, getSmallestWindowDimension, shiftValue, updateColorWheel};

docs/ui/src/js/compareColors.js

@@ -13,7 +13,7 @@ import * as Leo from '@adobe/leonardo-contrast-colors';
 import {round, simulateCvd, getDifference, capitalizeFirstLetter, alphaBlend, colorPickerInput} from './utils';
 import {createTable} from './createTable';
 
-const DeltaE = require('delta-e');
+import DeltaE from 'delta-e';
 
 const minimumThreshold = 11;
 
@@ -244,6 +244,4 @@ document.getElementById('compareColorOne_picker').addEventListener('input', colo
 document.getElementById('compareColorTwo_picker').addEventListener('input', colorPickerInput);
 document.getElementById('complianceLevel').addEventListener('change', levelSelect);
 
-module.exports = {
-  compareColors
-};
+export {compareColors};

docs/ui/src/js/convertColors.js

@@ -12,9 +12,8 @@ governing permissions and limitations under the License.
 import {round, colorPickerInput} from './utils';
 import {createTable} from './createTable';
 
-const simpleColorConverter = require('simple-color-converter');
-
-const chroma = require('chroma-js');
+import simpleColorConverter from 'simple-color-converter';
+import chroma from 'chroma-js';
 import {extendChroma} from './chroma-plus';
 extendChroma(chroma);
 
@@ -143,6 +142,4 @@ document.getElementById('convertColorOne_picker').addEventListener('input', colo
 window.convertColor = convertColor;
 window.colorPickerInput = colorPickerInput;
 
-module.exports = {
-  convertColor
-};
+export {convertColor};

docs/ui/src/js/create3dModel.js

@@ -295,6 +295,4 @@ function createMinMaxDataForPlot(mode) {
   return dataArray;
 }
 
-module.exports = {
-  create3dModel
-};
+export {create3dModel};

docs/ui/src/js/createBaseScaleOptions.js

@@ -47,6 +47,4 @@ baseSelect.addEventListener('change', function (e) {
   createOutputParameters();
 });
 
-module.exports = {
-  baseScaleOptions
-};
+export {baseScaleOptions};

docs/ui/src/js/createChart.js

@@ -493,7 +493,4 @@ function createColorChart(data, yLabel, xLabel, dest, yMin, yMax, colors, scaleT
   }
 }
 
-module.exports = {
-  createChart,
-  createColorChart
-};
+export {createChart, createColorChart};

docs/ui/src/js/createDemos.js

@@ -50,6 +50,4 @@ function createDemos(scaleType, colors) {
   }, 300);
 }
 
-module.exports = {
-  createDemos
-};
+export {createDemos};

docs/ui/src/js/createHtmlElement.js

@@ -57,7 +57,4 @@ function createSvgElement({element, id, className, attributes, styles, textConte
   dest.appendChild(el);
 }
 
-module.exports = {
-  createHtmlElement,
-  createSvgElement
-};
+export {createHtmlElement, createSvgElement};

docs/ui/src/js/createInterpolationCharts.js

@@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import * as d3 from './d3';
+import d3 from './d3';
 import {createColorChart, createChart} from './createChart';
 import {filterNaN, getChannelsAndFunction} from './utils';
 import chroma from 'chroma-js';
@@ -122,4 +122,4 @@ function createInterpolationCharts(colors, mode, scaleType = 'theme') {
   });
 }
 
-module.exports = {createInterpolationCharts};
+export {createInterpolationCharts};

docs/ui/src/js/createOutputColors.js

@@ -290,7 +290,4 @@ function createDetailOutputColors(colorName) {
   dest.appendChild(wrapper);
 }
 
-module.exports = {
-  createOutputColors,
-  createDetailOutputColors
-};
+export {createOutputColors, createDetailOutputColors};

docs/ui/src/js/createOutputParameters.js

@@ -152,6 +152,4 @@ function createTokensOutput() {
 outputFormatPicker.addEventListener('change', createOutputParameters);
 createOutputParameters();
 
-module.exports = {
-  createOutputParameters
-};
+export {createOutputParameters};

docs/ui/src/js/createPaletteCharts.js

@@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import * as d3 from './d3';
+import d3 from './d3';
 import {_theme} from './initialTheme';
 import {createScale} from '@adobe/leonardo-contrast-colors';
 import {createColorChart} from './createChart';
@@ -156,7 +156,4 @@ if (modePicker) {
   });
 }
 
-module.exports = {
-  createPaletteCharts,
-  createPaletteInterpolationCharts
-};
+export {createPaletteCharts, createPaletteInterpolationCharts};