diff --git a/docs/ui/eslint.config.js b/docs/ui/eslint.config.js new file mode 100644 index 00000000..a55af9fc --- /dev/null +++ b/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.' + } + ] + } + } +]; diff --git a/docs/ui/moon.yml b/docs/ui/moon.yml index 0162616c..00052bf3 100644 --- a/docs/ui/moon.yml +++ b/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 diff --git a/docs/ui/package.json b/docs/ui/package.json index 0dd68cba..ffbfbad7 100644 --- a/docs/ui/package.json +++ b/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", diff --git a/docs/ui/src/index.js b/docs/ui/src/index.js index de40f71b..4e65e92a 100644 --- a/docs/ui/src/index.js +++ b/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))); diff --git a/docs/ui/src/js/addBulkDialog.js b/docs/ui/src/js/addBulkDialog.js index cbd5a14a..805921f6 100644 --- a/docs/ui/src/js/addBulkDialog.js +++ b/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}; diff --git a/docs/ui/src/js/addColorsFromImage.js b/docs/ui/src/js/addColorsFromImage.js index 8a291513..35c7e73a 100644 --- a/docs/ui/src/js/addColorsFromImage.js +++ b/docs/ui/src/js/addColorsFromImage.js @@ -127,6 +127,4 @@ function validFileType(file) { window.addColorsFromImage = addColorsFromImage; -module.exports = { - addColorsFromImage -}; +export {addColorsFromImage}; diff --git a/docs/ui/src/js/addFromURL.js b/docs/ui/src/js/addFromURL.js index 6ffd104e..b5cc919b 100644 --- a/docs/ui/src/js/addFromURL.js +++ b/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}; diff --git a/docs/ui/src/js/addLightnessBulkDialog.js b/docs/ui/src/js/addLightnessBulkDialog.js index 9cfa4971..d8f0cda0 100644 --- a/docs/ui/src/js/addLightnessBulkDialog.js +++ b/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}; diff --git a/docs/ui/src/js/addScaleBulkDialog.js b/docs/ui/src/js/addScaleBulkDialog.js index e91f6ba4..e294b437 100644 --- a/docs/ui/src/js/addScaleBulkDialog.js +++ b/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}; diff --git a/docs/ui/src/js/bulkConvertDialog.js b/docs/ui/src/js/bulkConvertDialog.js index 2381a67a..fc05decb 100644 --- a/docs/ui/src/js/bulkConvertDialog.js +++ b/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}; diff --git a/docs/ui/src/js/colorDetailsPanel.js b/docs/ui/src/js/colorDetailsPanel.js index 2e6e8637..48318790 100644 --- a/docs/ui/src/js/colorDetailsPanel.js +++ b/docs/ui/src/js/colorDetailsPanel.js @@ -653,4 +653,4 @@ function showColorDetails(e, colorId) { }); } -module.exports = {showColorDetails}; +export {showColorDetails}; diff --git a/docs/ui/src/js/colorScale.js b/docs/ui/src/js/colorScale.js index 759f76bf..382c09a0 100644 --- a/docs/ui/src/js/colorScale.js +++ b/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}; diff --git a/docs/ui/src/js/colorScaleDiverging.js b/docs/ui/src/js/colorScaleDiverging.js index 57d4301b..1ebd60c7 100644 --- a/docs/ui/src/js/colorScaleDiverging.js +++ b/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}; diff --git a/docs/ui/src/js/colorScaleQualitative.js b/docs/ui/src/js/colorScaleQualitative.js index ca1e1b0a..b03bbae5 100644 --- a/docs/ui/src/js/colorScaleQualitative.js +++ b/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 ? `