From 03a0aad1cc1241dbcfba601f5207b06c0248fd5e Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Sun, 12 Jan 2025 22:47:49 -0800 Subject: [PATCH] build: create a private package for shared eslint configs (#11240) ## Summary - Create a new package in `packages/eslint-config-calcite` that contains shared ESLint configurations for importing in other packages. - Setup the components and design-tokens packages to use the new shared ESLint configs. - Add typescript-eslint coverage to our github scripts - Check css files in lint-staged (previously it was only scss) - Disable [`no-unexpected-newline`](https://archive.eslint.org/docs/6.0.0/rules/no-unexpected-multiline), which [conflicts with prettier](https://github.com/prettier/eslint-config-prettier/issues/32) - Various other cleanup, such as formatting json files in `.vscode/` and removing cspell ignore comments in favor of dictionary additions.. - Run `npm run lint` so unrelated changes don't appear in subsequent PRs --- .github/scripts/addCalcitePackageLabel.js | 1 + .github/scripts/eslint.config.cjs | 36 +-- .github/scripts/omitPrFromChangelog.js | 2 +- .github/scripts/trackMilestoneEstimates.js | 2 +- .lintstagedrc.js | 2 +- CODE_OF_CONDUCT.md | 2 +- package-lock.json | 29 +-- package.json | 6 +- packages/calcite-components/eslint.config.mjs | 206 +----------------- .../src/tests/commonTests/themed.ts | 2 +- .../calcite-components/src/utils/text.tsx | 2 + .../support/generateSupportedBrowsersJSON.ts | 1 - .../calcite-components/tsconfig-eslint.json | 2 +- .../calcite-design-tokens/eslint.config.mjs | 124 +---------- packages/calcite-design-tokens/src/$config.ts | 1 - packages/calcite-design-tokens/support/run.ts | 2 +- .../helpers/createCalciteTokenFiles.spec.ts | 2 +- .../registerCalciteTransformers.ts | 1 - .../support/token-transformer/sd-run.ts | 8 +- .../styleDictionary/formatter/css.ts | 5 +- .../styleDictionary/formatter/docs.ts | 5 +- .../styleDictionary/formatter/javascript.ts | 1 - .../styleDictionary/formatter/scss.ts | 8 +- .../formatter/utils/formatExtraOutput.ts | 15 +- .../formatter/utils/formatTokens.ts | 4 +- .../formatter/utils/getReferenceFromValue.ts | 2 +- .../formatter/utils/handleBreakpoint.ts | 5 +- .../formatter/utils/handleColor.ts | 1 + .../formatter/utils/handleStringValue.ts | 2 +- .../formatter/utils/handleTypography.ts | 6 +- .../styleDictionary/parser/calcite/index.ts | 1 - .../parser/utils/expandComposites.ts | 2 +- .../attributes/attributePlatformName.ts | 1 - .../transformer/name/nameCamelCase.ts | 1 - .../transformer/name/nameKebabCase.ts | 1 - .../transformer/name/nameSet.ts | 5 +- .../transformer/name/nameSpacePath.ts | 2 +- .../styleDictionary/transformer/utils.ts | 11 +- .../transformer/utils/parseTokenPath.ts | 3 +- .../value/valueAlignFontWeightAndStyle.ts | 1 - .../transformer/value/valueColorCss.ts | 1 + .../value/valueFontFamilyFallbacks.ts | 1 - .../transformer/value/valueToREM.ts | 2 +- .../transformer/value/valueToUnitless.ts | 2 +- .../styleDictionary/formatterArguments.ts | 3 +- .../support/types/styleDictionary/options.ts | 1 - .../styleDictionary/registerFunctions.ts | 1 - .../types/tokenStudio/designTokenTypes.ts | 1 - .../types/tokenStudio/expandOptions.ts | 8 +- .../support/types/tokenStudio/fontWeight.ts | 6 - .../support/types/tokenTypes/typography.ts | 2 +- packages/eslint-config-calcite/LICENSE.md | 13 ++ packages/eslint-config-calcite/core.js | 140 ++++++++++++ packages/eslint-config-calcite/jsx.js | 50 +++++ packages/eslint-config-calcite/package.json | 18 ++ .../dict-calcite-design-system.txt | 6 + 56 files changed, 323 insertions(+), 445 deletions(-) create mode 100644 packages/eslint-config-calcite/LICENSE.md create mode 100644 packages/eslint-config-calcite/core.js create mode 100644 packages/eslint-config-calcite/jsx.js create mode 100644 packages/eslint-config-calcite/package.json diff --git a/.github/scripts/addCalcitePackageLabel.js b/.github/scripts/addCalcitePackageLabel.js index 92f4873e04a..abdfe18e043 100644 --- a/.github/scripts/addCalcitePackageLabel.js +++ b/.github/scripts/addCalcitePackageLabel.js @@ -24,6 +24,7 @@ module.exports = async ({ github, context }) => { github, context, label: package, + // eslint-disable-next-line @cspell/spellchecker -- hex color color: "BFBEAF", description: `Issues specific to the @esri/${package} package.`, }); diff --git a/.github/scripts/eslint.config.cjs b/.github/scripts/eslint.config.cjs index 07fd46bc801..6205e01f351 100644 --- a/.github/scripts/eslint.config.cjs +++ b/.github/scripts/eslint.config.cjs @@ -1,24 +1,24 @@ -const cspellPlugin = require("@cspell/eslint-plugin"); -const eslint = require("@eslint/js"); const globals = require("globals"); +const eslint = require("@eslint/js"); +const tseslint = require("typescript-eslint"); +const cspellPlugin = require("@cspell/eslint-plugin"); -module.exports = [ - eslint.configs.recommended, - { - files: ["**/*.{c,m,}js"], - plugins: { "@cspell": cspellPlugin }, +module.exports = tseslint.config({ + files: ["**/*.{c,m,}js"], + extends: [eslint.configs.recommended, tseslint.configs.recommended], + plugins: { "@cspell": cspellPlugin }, - languageOptions: { - ecmaVersion: 2021, - sourceType: "commonjs", - globals: { - ...globals.node, - }, + languageOptions: { + ecmaVersion: 2021, + sourceType: "commonjs", + globals: { + ...globals.node, }, + }, - rules: { - "comma-dangle": "off", - "@cspell/spellchecker": ["warn", {}], - }, + rules: { + "comma-dangle": "off", + "@cspell/spellchecker": ["warn", {}], + "@typescript-eslint/no-require-imports": "off", }, -]; +}); diff --git a/.github/scripts/omitPrFromChangelog.js b/.github/scripts/omitPrFromChangelog.js index 3c68f7a46e1..dafcb2ee62d 100644 --- a/.github/scripts/omitPrFromChangelog.js +++ b/.github/scripts/omitPrFromChangelog.js @@ -40,6 +40,6 @@ module.exports = async ({ github, context }) => { body: newPullRequestBody, }); } else { - console.log(`The \`no changleog entry\` label is not present on this PR.`); + console.log(`The \`no changelog entry\` label is not present on this PR.`); } }; diff --git a/.github/scripts/trackMilestoneEstimates.js b/.github/scripts/trackMilestoneEstimates.js index 34c7287c3ad..8cf5dcb9a15 100644 --- a/.github/scripts/trackMilestoneEstimates.js +++ b/.github/scripts/trackMilestoneEstimates.js @@ -34,7 +34,7 @@ module.exports = async ({ github, context, core }) => { }; const issues = await github.paginate(github.rest.issues.listForRepo, { - // @ts-ignore milestone.number is valid: https://docs.github.com/en/rest/issues/issues#list-repository-issues--parameters + // @ts-expect-error milestone.number is valid: https://docs.github.com/en/rest/issues/issues#list-repository-issues--parameters milestone: milestone.number, owner: owner, repo: repo, diff --git a/.lintstagedrc.js b/.lintstagedrc.js index fd6a2cc4452..70b8414a7bb 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -1,5 +1,5 @@ module.exports = { "*.{json,html,yml}": ["prettier --write"], - "*.scss": ["stylelint --fix", "prettier --write"], + "*.{s,}css": ["stylelint --fix", "prettier --write"], "*.md": ["prettier --write", "markdownlint --fix"], }; diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 177da02cf99..1e285214719 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -27,7 +27,7 @@ Inappropriate/unacceptable behavior is anything hurtful that interferes with oth - Foul or obscene language - Stalking - Sharing graphic or derogatory pictures, drawings, or cartoons -- _Ad hominem_ or personal attacks and insults +- *Ad hominem* or personal attacks and insults - Unwanted or offensive letters or poems - Offensive email, voicemail messages, or social media postings - Personal threats diff --git a/package-lock.json b/package-lock.json index 7664ce3cb9f..61a3c72cff5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,6 @@ "@cspell/dict-pokemon": "1.0.0", "@cspell/dict-scientific-terms-us": "3.0.5", "@cspell/eslint-plugin": "8.17.1", - "@eslint/compat": "1.2.4", - "@eslint/eslintrc": "3.2.0", "@eslint/js": "9.17.0", "@esri/calcite-base": "1.2.0", "@octokit/webhooks-types": "7.6.1", @@ -2043,24 +2041,6 @@ "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } }, - "node_modules/@eslint/compat": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.4.tgz", - "integrity": "sha512-S8ZdQj/N69YAtuqFt7653jwcvuUj131+6qGLUyDqfDg1OIoBQ66OCuXC473YQfO2AaxITTutiRQiDwoo7ZLYyg==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "peerDependencies": { - "eslint": "^9.10.0" - }, - "peerDependenciesMeta": { - "eslint": { - "optional": true - } - } - }, "node_modules/@eslint/config-array": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz", @@ -2175,6 +2155,10 @@ "resolved": "packages/calcite-ui-icons", "link": true }, + "node_modules/@esri/eslint-config-calcite": { + "resolved": "packages/eslint-config-calcite", + "link": true + }, "node_modules/@esri/eslint-plugin-calcite-components": { "resolved": "packages/eslint-plugin-calcite-components", "link": true @@ -35041,6 +35025,11 @@ "node": ">=12" } }, + "packages/eslint-config-calcite": { + "name": "@esri/eslint-config-calcite", + "version": "0.0.0", + "license": "SEE LICENSE.md" + }, "packages/eslint-plugin-calcite-components": { "name": "@esri/eslint-plugin-calcite-components", "version": "2.0.0-next.4", diff --git a/package.json b/package.json index 760c2c0468b..cf02729acdc 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "build": "turbo run build --log-order=stream", "clean": "turbo run clean --log-order=stream && git clean -fd", "lint": "concurrently \"npm:lint:*\" \"turbo run lint --log-order=stream\"", - "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"{,documentation}/*.md\" --fix --dot --ignore-path .gitignore", + "lint:md": "prettier --write \"*.md\" >/dev/null && markdownlint --fix \"*.md\"", "lint:yml": "prettier --write \".github/**/*.yml\" >/dev/null", "lint:js": "eslint -c .github/scripts/eslint.config.cjs --fix .github/scripts/ && prettier --write \".github/**/*.{c,m,}js\" >/dev/null", - "lint:json": "prettier --write \"*.json\" >/dev/null", + "lint:json": "prettier --write \"{.vscode,}/*.json\" >/dev/null", "version:latest": "./support/release.sh version", "publish:latest": "./support/release.sh publish", "version:next": "./support/release.sh version next", @@ -39,8 +39,6 @@ "@cspell/dict-pokemon": "1.0.0", "@cspell/dict-scientific-terms-us": "3.0.5", "@cspell/eslint-plugin": "8.17.1", - "@eslint/compat": "1.2.4", - "@eslint/eslintrc": "3.2.0", "@eslint/js": "9.17.0", "@esri/calcite-base": "1.2.0", "@octokit/webhooks-types": "7.6.1", diff --git a/packages/calcite-components/eslint.config.mjs b/packages/calcite-components/eslint.config.mjs index e23e858e7a5..ce8e007875c 100644 --- a/packages/calcite-components/eslint.config.mjs +++ b/packages/calcite-components/eslint.config.mjs @@ -1,133 +1,29 @@ -import path from "node:path"; -import { fileURLToPath } from "node:url"; -import cspellPlugin from "@cspell/eslint-plugin"; -import eslint from "@eslint/js"; +import calciteCoreConfig from "@esri/eslint-config-calcite/core.js"; +import calciteJsxConfig from "@esri/eslint-config-calcite/jsx.js"; import calcitePlugin from "@esri/eslint-plugin-calcite-components"; import vitestPlugin from "@vitest/eslint-plugin"; -import prettierConfig from "eslint-config-prettier"; -import * as importPlugin from "eslint-plugin-import"; -import jsdocPlugin from "eslint-plugin-jsdoc"; -import reactPlugin from "eslint-plugin-react"; -import unicornPlugin from "eslint-plugin-unicorn"; import globals from "globals"; import tseslint from "typescript-eslint"; -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); - export default tseslint.config( { ignores: ["**/dist", "**/docs", "**/hydrate", "**/*.d.ts"], }, - prettierConfig, - { - files: ["**/*.{ts,tsx,mjs,cjs}"], - extends: [eslint.configs.recommended, tseslint.configs.recommended, jsdocPlugin.configs["flat/recommended"]], + extends: [calciteCoreConfig, calciteJsxConfig], plugins: { "@esri/calcite-components": calcitePlugin, - "@cspell": cspellPlugin, - import: importPlugin, - unicorn: unicornPlugin, }, languageOptions: { - ecmaVersion: 2021, - sourceType: "module", - parser: tseslint.parser, parserOptions: { - tsconfigRootDir: __dirname, + tsconfigRootDir: import.meta.dirname, project: ["tsconfig-eslint.json"], }, }, - settings: { - jsdoc: { - ignoreInternal: true, - ignorePrivate: true, - }, - }, - rules: { - "@cspell/spellchecker": ["warn", {}], - - "@typescript-eslint/method-signature-style": ["error", "property"], - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-unnecessary-type-assertion": "error", - "@typescript-eslint/explicit-module-boundary-types": [ - "error", - { - allowArgumentsExplicitlyTypedAsAny: true, - allowedNames: [ - "connectedCallback", - "disconnectedCallback", - "componentWillRender", - "componentDidRender", - "componentWillLoad", - "componentDidLoad", - "componentWillUpdate", - "componentDidUpdate", - "render", - ], - }, - ], - - "import/no-dynamic-require": [ - "error", - { - esmodule: true, - }, - ], - "import/order": [ - "error", - { - "newlines-between": "never", - }, - ], - - "jsdoc/check-param-names": "off", - "jsdoc/require-jsdoc": "off", - "jsdoc/require-param-description": "off", - "jsdoc/require-param-type": "off", - "jsdoc/require-property-type": "off", - "jsdoc/require-returns": "off", - "jsdoc/require-returns-description": "off", - "jsdoc/require-returns-type": "off", - "jsdoc/check-tag-names": "off", - "jsdoc/tag-lines": [ - "error", - "any", - { - startLines: 1, - }, - ], - "jsdoc/no-restricted-syntax": [ - "error", - { - contexts: [ - { - context: "any", - comment: 'JsdocBlock:has(JsdocTag[tag="required"]):has(JsdocTag[tag="deprecated"])', - message: - "A property cannot be required and deprecated. Use `component#warnIfMissingRequiredProp` to handle required messaging.", - }, - ], - }, - ], - - curly: "error", - "one-var": ["error", "never"], - "no-eval": "error", - "no-implied-eval": "error", - "no-new-func": "error", - "no-unneeded-ternary": "error", - "no-multiple-empty-lines": [ - "error", - { - max: 1, - }, - ], "no-restricted-imports": [ "error", { @@ -140,7 +36,6 @@ export default tseslint.config( ], }, ], - radix: ["error", "as-needed"], "@esri/calcite-components/no-dynamic-createelement": "warn", "@esri/calcite-components/strict-boolean-attributes": "error", @@ -155,91 +50,6 @@ export default tseslint.config( message: "Use keydown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", }, ], - - "unicorn/prefer-ternary": "error", - "unicorn/prevent-abbreviations": [ - "error", - { - allowList: { - e2ePage: true, - }, - - extendDefaultReplacements: false, - - replacements: { - e: { - error: true, - event: true, - }, - }, - - checkProperties: false, - checkFilenames: false, - }, - ], - }, - }, - - { - files: ["**/*.tsx"], - ...reactPlugin.configs.flat?.recommended, - settings: { - react: { - pragma: "h", - }, - }, - rules: { - "react/jsx-props-no-spreading": "error", - "react/jsx-sort-props": "error", - "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error", - "react/self-closing-comp": "error", - "react/forbid-component-props": [ - "warn", - { - forbid: [ - { - propName: "onKeyPress", - message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", - }, - { - propName: "onKeyUp", - message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", - }, - ], - }, - ], - "react/forbid-dom-props": [ - "warn", - { - forbid: [ - { - propName: "onKeyPress", - message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", - }, - { - propName: "onKeyUp", - message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc).", - }, - ], - }, - ], - }, - }, - - { - files: ["**/*.{m,c,}js"], - extends: [tseslint.configs.disableTypeChecked], - rules: { - // turn off other type-aware rules - "other-plugin/typed-rule": "off", - // turn off rules that don't apply to JS code - "@typescript-eslint/explicit-function-return-type": "off", - }, - languageOptions: { - globals: { - module: "writable", - }, }, }, @@ -253,6 +63,7 @@ export default tseslint.config( }, rules: { "vitest/expect-expect": "off", + "@esri/calcite-components/no-dynamic-createelement": "off", }, languageOptions: { globals: { @@ -262,11 +73,4 @@ export default tseslint.config( }, }, }, - - { - files: ["**/*.e2e.ts", "src/tests/**/*"], - rules: { - "@esri/calcite-components/no-dynamic-createelement": "off", - }, - }, ); diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts index dc4b8119d20..15a758ee1e8 100644 --- a/packages/calcite-components/src/tests/commonTests/themed.ts +++ b/packages/calcite-components/src/tests/commonTests/themed.ts @@ -174,7 +174,7 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component } /** - * @deprecatd use FindSelector instead + * @deprecated use FindSelector instead */ type ElementMatcher = { attribute: string; value: string }; diff --git a/packages/calcite-components/src/utils/text.tsx b/packages/calcite-components/src/utils/text.tsx index e53081816a3..371720e0304 100644 --- a/packages/calcite-components/src/utils/text.tsx +++ b/packages/calcite-components/src/utils/text.tsx @@ -9,8 +9,10 @@ const CSS = { * * Items using this in their rendering should include the `text-highlight-item` mixin from `includes.scss` in their styles. * + * @param text.text * @param text * @param pattern + * @param text.pattern */ export function highlightText({ text, diff --git a/packages/calcite-components/support/generateSupportedBrowsersJSON.ts b/packages/calcite-components/support/generateSupportedBrowsersJSON.ts index f7a6448e720..cfbcfd48890 100755 --- a/packages/calcite-components/support/generateSupportedBrowsersJSON.ts +++ b/packages/calcite-components/support/generateSupportedBrowsersJSON.ts @@ -16,4 +16,3 @@ process.exit(1); } })(); - diff --git a/packages/calcite-components/tsconfig-eslint.json b/packages/calcite-components/tsconfig-eslint.json index 693cb7d06c1..5258eb17cc4 100755 --- a/packages/calcite-components/tsconfig-eslint.json +++ b/packages/calcite-components/tsconfig-eslint.json @@ -1,5 +1,5 @@ { "extends": "./tsconfig-base", - "include": [".storybook/*", "**/*", "**/*.config.js", "eslint.config.mjs"], + "include": [".storybook/*", "**/*", "**/*.config.js", "eslint.config.mjs", "**/.*.cjs"], "exclude": ["**/[!_]*assets*/**", "dist", "hydrate", "docs"] } diff --git a/packages/calcite-design-tokens/eslint.config.mjs b/packages/calcite-design-tokens/eslint.config.mjs index 076c78cba18..ed40decd682 100644 --- a/packages/calcite-design-tokens/eslint.config.mjs +++ b/packages/calcite-design-tokens/eslint.config.mjs @@ -1,16 +1,7 @@ -import cspellPlugin from "@cspell/eslint-plugin"; -import eslint from "@eslint/js"; -import tseslint from "typescript-eslint"; -import * as importPlugin from "eslint-plugin-import"; +import calciteCoreConfig from "@esri/eslint-config-calcite/core.js"; import prettierConfig from "eslint-config-prettier"; import jestPlugin from "eslint-plugin-jest"; -import jsdocPlugin from "eslint-plugin-jsdoc"; -import unicornPlugin from "eslint-plugin-unicorn"; -import path from "node:path"; -import { fileURLToPath } from "node:url"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); +import tseslint from "typescript-eslint"; export default tseslint.config( { @@ -20,125 +11,22 @@ export default tseslint.config( prettierConfig, { - files: ["**/*.{ts,tsx,mjs,cjs}"], - extends: [ - eslint.configs.recommended, - tseslint.configs.recommended, - jsdocPlugin.configs["flat/recommended"], - jestPlugin.configs["flat/recommended"], - ], - - plugins: { - "@cspell": cspellPlugin, - import: importPlugin, - unicorn: unicornPlugin, - }, + extends: [calciteCoreConfig, jestPlugin.configs["flat/recommended"]], languageOptions: { - globals: { - ...jestPlugin.environments.globals.globals, - }, - - parser: tseslint.parser, - ecmaVersion: 2021, - sourceType: "module", - parserOptions: { - tsconfigRootDir: __dirname, + tsconfigRootDir: import.meta.dirname, project: ["tsconfig-eslint.json"], }, - }, - - settings: { - jsdoc: { - ignoreInternal: true, - ignorePrivate: true, + globals: { + ...jestPlugin.environments.globals.globals, }, }, rules: { - "@cspell/spellchecker": ["warn", {}], - - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-unused-vars": "error", - "@typescript-eslint/no-unnecessary-type-assertion": "error", - "@typescript-eslint/explicit-module-boundary-types": [ - "error", - { - allowArgumentsExplicitlyTypedAsAny: true, - }, - ], - - "import/no-dynamic-require": [ - "error", - { - esmodule: true, - }, - ], - - "jsdoc/check-tag-names": "off", - "jsdoc/require-jsdoc": "off", - "jsdoc/require-param-type": "off", - "jsdoc/require-returns-type": "off", - "jsdoc/tag-lines": [ - "error", - "any", - { - startLines: 1, - }, - ], - "jest/expect-expect": "off", "jest/no-export": "warn", - - curly: "error", "lines-between-class-members": ["error", "always"], - "one-var": ["error", "never"], - "no-eval": "error", - "no-new-func": "error", - "no-unneeded-ternary": "error", - "no-implied-eval": "error", - "no-multiple-empty-lines": [ - "error", - { - max: 1, - }, - ], - - "unicorn/prefer-ternary": "error", - "unicorn/prevent-abbreviations": [ - "error", - { - allowList: { - e2ePage: true, - }, - extendDefaultReplacements: false, - replacements: { - e: { - error: true, - event: true, - }, - }, - checkProperties: false, - checkFilenames: false, - }, - ], - }, - }, - - { - files: ["**/*.{m,c,}js"], - extends: [tseslint.configs.disableTypeChecked], - rules: { - // turn off other type-aware rules - "other-plugin/typed-rule": "off", - // turn off rules that don't apply to JS code - "@typescript-eslint/explicit-function-return-type": "off", - }, - languageOptions: { - globals: { - module: "writable", - }, }, }, ); diff --git a/packages/calcite-design-tokens/src/$config.ts b/packages/calcite-design-tokens/src/$config.ts index b91778cd2ee..c46b70a1048 100644 --- a/packages/calcite-design-tokens/src/$config.ts +++ b/packages/calcite-design-tokens/src/$config.ts @@ -1,6 +1,5 @@ import { dirname, resolve } from "path"; import { fileURLToPath } from "url"; - import { CalciteTokenTransformConfig } from "../support/types/config.js"; import { Platform } from "../support/types/platform.js"; import { globalTokens, coreTokens } from "./index.js"; diff --git a/packages/calcite-design-tokens/support/run.ts b/packages/calcite-design-tokens/support/run.ts index 515808e5667..c5298579bcc 100644 --- a/packages/calcite-design-tokens/support/run.ts +++ b/packages/calcite-design-tokens/support/run.ts @@ -1,6 +1,6 @@ // @ts-strict-ignore -import { run as styleDictionaryRunner } from "./token-transformer/sd-run.js"; import { config } from "../src/$config.js"; +import { run as styleDictionaryRunner } from "./token-transformer/sd-run.js"; import { CalciteTokenTransformConfig } from "./types/config.js"; const runConfig: CalciteTokenTransformConfig = config; diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts index bfa2d6110b0..b7f76743c93 100644 --- a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts +++ b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.spec.ts @@ -1,7 +1,7 @@ import { dirname, resolve } from "path"; import { fileURLToPath } from "url"; -import { createCalciteTokenFiles } from "./createCalciteTokenFiles.js"; import { ConfigOptions } from "../../types/config.js"; +import { createCalciteTokenFiles } from "./createCalciteTokenFiles.js"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts index e4814aa8abf..bea7704c80d 100644 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts @@ -1,6 +1,5 @@ import { Core as StyleDictionary } from "style-dictionary"; import { registerTransforms } from "@tokens-studio/sd-transforms"; - import { registerAttributePlatformNames } from "./styleDictionary/transformer/attributes/attributePlatformName.js"; import { registerCustomJSONParser } from "./styleDictionary/parser/calcite/index.js"; import { registerFilterSource } from "./styleDictionary/filter/filterSource.js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts index 86d54b04378..7c93e88ff3b 100644 --- a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts +++ b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts @@ -1,17 +1,15 @@ +import { normalize, sep } from "path"; import { default as StyleDictionary } from "style-dictionary"; - -import { registerCalciteTransformers } from "./registerCalciteTransformers.js"; -import { filterSource } from "./styleDictionary/filter/filterSource.js"; import { fileExtension } from "../types/fileExtensions.js"; import { Platform, PlatformFormats, PlatformUnion, TypescriptPlatform } from "../types/platform.js"; - import { CalciteConfigStyleDictionaryRunner } from "../types/config.js"; import { Options } from "../types/styleDictionary/options.js"; import { PlatformOptions } from "../types/styleDictionary/platform.js"; import { File } from "../types/styleDictionary/file.js"; +import { registerCalciteTransformers } from "./registerCalciteTransformers.js"; +import { filterSource } from "./styleDictionary/filter/filterSource.js"; import { transformations } from "./styleDictionary/transformer/utils.js"; import { format } from "./styleDictionary/formatter/utils.js"; -import { normalize, sep } from "path"; const destination = (name: string, format: PlatformFormats) => `${name}${fileExtension[format]}`; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts index 573ff0c18ce..544317d50e5 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts @@ -1,11 +1,10 @@ // @ts-strict-ignore +import { EOL } from "os"; import sd, { Core as StyleDictionary } from "style-dictionary"; import prettierSync from "@prettier/sync"; - +import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js"; import { formatTokens } from "./utils/formatTokens.js"; import { formatExtraOutput } from "./utils/formatExtraOutput.js"; -import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; export const formatCssPlatform: CalledFormatterFunction = (args) => { const { file, dictionary } = args; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts index 769ae6c2c9b..3234b4823dc 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts @@ -1,10 +1,9 @@ // @ts-strict-ignore +import { dirname, relative, resolve } from "path"; +import { fileURLToPath } from "url"; import { Core as StyleDictionary } from "style-dictionary"; import prettierSync from "@prettier/sync"; - import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments"; -import { dirname, relative, resolve } from "path"; -import { fileURLToPath } from "url"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts index 908782e6d2f..705239f8e38 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/javascript.ts @@ -1,7 +1,6 @@ // @ts-strict-ignore import styleDictionary, { Core as StyleDictionary } from "style-dictionary"; import prettierSync from "@prettier/sync"; - import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments"; export const formatJsPlatform: CalledFormatterFunction = (args) => { diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts index 4f48c6ca5ca..b6045918b62 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts @@ -1,12 +1,10 @@ // @ts-strict-ignore +import { EOL } from "os"; import sd, { Core as StyleDictionary } from "style-dictionary"; - -import { formatTokens } from "./utils/formatTokens.js"; -import { formatExtraOutput } from "./utils/formatExtraOutput.js"; import prettierSync from "@prettier/sync"; - import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; +import { formatTokens } from "./utils/formatTokens.js"; +import { formatExtraOutput } from "./utils/formatExtraOutput.js"; export const formatScssPlatform: CalledFormatterFunction = (args) => { const { file, dictionary } = args; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts index 52d7b1bf8ab..224787c55cc 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts @@ -2,7 +2,6 @@ import { writeFileSync } from "fs"; import { resolve } from "path"; import prettierSync from "@prettier/sync"; - import { Platform } from "../../../../types/platform.js"; import { Options } from "../../../../types/styleDictionary/options.js"; import { DeepKeyTokenMap } from "../../../../types/tokenStudio/designTokenTypes.js"; @@ -17,12 +16,12 @@ export function formatExtraOutput( const ensureIfArray = (x: any) => (Array.isArray(x) ? x : x); if (index) { - let parser; + let parser: string; // Set output switch (args.platform) { case "css": case "scss": - case "sass": + case "sass": { const imports = index.import ? index.import.map((imp) => typeof imp === "string" @@ -67,14 +66,16 @@ export function formatExtraOutput( ...(mixins || []), ].filter((t) => t); break; + } case "docs": case "js": - case "es6": + case "es6": { const exports = index.export?.map((exp) => typeof exp === "string" ? `export * from "${exp}";` : `export * as ${exp[1]} from "${exp[0]}";`, ); outputFiles[index.name] = [...exports].filter((t) => t); break; + } default: break; } @@ -87,12 +88,14 @@ export function formatExtraOutput( break; case "sass": parser = "scss"; + break; case "es6": case "js": parser = "babel"; break; case "docs": parser = "json"; + break; default: break; } @@ -105,8 +108,8 @@ export function formatExtraOutput( Object.entries(outputObject).forEach(([fileName, outputList]) => { const absoluteFilePath = resolve(args.buildPath, fileName); - let format; - let parser; + let format: string; + let parser: string; switch (args.platform) { case Platform.CSS: diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts index 1dda30cdaab..444462d9d8e 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatTokens.ts @@ -1,12 +1,12 @@ // @ts-strict-ignore import { Dictionary } from "../../../../types/styleDictionary/dictionary.js"; +import { ExpandableTokenTypes } from "../../../../types/tokenStudio/designTokenTypes.js"; +import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; import { handleColor } from "./handleColor.js"; import { handleStringValueTokens } from "./handleStringValue.js"; import { handleTypography } from "./handleTypography.js"; import { sortByReference } from "./sortByReference.js"; -import { ExpandableTokenTypes } from "../../../../types/tokenStudio/designTokenTypes.js"; import { handleBreakpoint } from "./handleBreakpoint.js"; -import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; export type FormattedTokens = Record)[]>; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts index 0ce0dce38e8..8821f62a225 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/getReferenceFromValue.ts @@ -1,8 +1,8 @@ // @ts-strict-ignore import { Dictionary } from "style-dictionary/types/Dictionary.js"; import { PlatformOptions } from "../../../../types/styleDictionary/platform.js"; -import { createTokenReference } from "./createTokenReference.js"; import { hexToRgb } from "../../transformer/utils/hexToRGBA.js"; +import { createTokenReference } from "./createTokenReference.js"; export function getReferencesFromValue( originalValue: string, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts index e8bc1ab2877..0ceb7e1e9ce 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleBreakpoint.ts @@ -1,14 +1,13 @@ // @ts-strict-ignore +import { EOL } from "os"; import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms"; - import { Dictionary } from "../../../../types/styleDictionary/dictionary.js"; import { TransformedToken } from "../../../../types/styleDictionary/transformedToken.js"; import { TokenBreakpointContextUnion } from "../../../../types/tokenTypes/breakpointContext.js"; -import { handleStringValueTokens } from "./handleStringValue.js"; import { Platform } from "../../../../types/platform.js"; import { transformNamesKebabCase } from "../../transformer/name/nameKebabCase.js"; import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; +import { handleStringValueTokens } from "./handleStringValue.js"; export function handleBreakpoint( token: TransformedToken, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts index 7e2d4512f5b..b4080a5eac8 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleColor.ts @@ -28,6 +28,7 @@ export function handleColor( case "sass": case "es6": acc[contextKey] = handleStringValueTokens(alteredToken, dictionary, args); + break; default: break; } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts index 58240c14bd5..4d467cdba23 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleStringValue.ts @@ -1,9 +1,9 @@ // @ts-strict-ignore import { TransformedToken } from "style-dictionary/types/TransformedToken.js"; import { Dictionary } from "style-dictionary/types/Dictionary.js"; -import { getReferencesFromValue } from "./getReferenceFromValue.js"; import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; import { FormattingRules } from "../utils.js"; +import { getReferencesFromValue } from "./getReferenceFromValue.js"; export function handleStringValueTokens( token: TransformedToken, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts index 6178b416ee3..aa45687c419 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/handleTypography.ts @@ -1,12 +1,11 @@ // @ts-strict-ignore +import { EOL } from "os"; import { kebabCase } from "change-case"; - import { TransformedToken } from "../../../../types/styleDictionary/transformedToken.js"; import { getTypographyReferences } from "../typography/utils.js"; import { addSCSSImportByRef } from "../typography/scss.js"; import { Platform } from "../../../../types/platform.js"; import { MappedFormatterArguments } from "../../../../types/styleDictionary/formatterArguments.js"; -import { EOL } from "os"; export function handleTypography(token: TransformedToken, args: MappedFormatterArguments): string { const strObj = Object.keys(token.value).reduce((acc, typeKey) => { @@ -25,7 +24,7 @@ export function handleTypography(token: TransformedToken, args: MappedFormatterA return `.${token.name} {${EOL}\t${Object.keys(strObj).join(`${EOL}\t`)}${EOL}}`; case Platform.SCSS: - case Platform.SASS: + case Platform.SASS: { const tokenSchemeExtensionExtendToken = (token.original.extensions && token.original.extensions["calcite.extends"]) as string | undefined; const extraIncludes = @@ -35,6 +34,7 @@ export function handleTypography(token: TransformedToken, args: MappedFormatterA const mixinLines = [].concat(extraIncludes || [], Object.keys(strObj)); return `@mixin ${token.name} {${EOL}\t${mixinLines.join(`${EOL}\t`)}${EOL}}`; + } default: return; } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts index ecce3ec4c3b..db440899210 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/calcite/index.ts @@ -1,6 +1,5 @@ import { Core as StyleDictionary } from "style-dictionary"; import { ParserOptions } from "style-dictionary/types/Parser.js"; - import { addFontStyles } from "../utils/add-font-styles.js"; import { expandComposites } from "../utils/expandComposites.js"; import { expand } from "../../../../types/tokenStudio/expandOptions.js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts index 8e87b821ddb..3e92df98dda 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/parser/utils/expandComposites.ts @@ -3,7 +3,6 @@ * This is a copy/extension of @tokens-studio/sd-transforms/dist/parsers/expand-composites.js but now with better types! */ -import { resolveReference } from "./resolveRelevance.js"; import { typeMap } from "../../../../types/tokenTypes/typeMaps.js"; import { TransformOptions } from "../../../../types/styleDictionary/transformOptions.js"; import { @@ -13,6 +12,7 @@ import { SingleToken, } from "../../../../types/tokenStudio/designTokenTypes.js"; import { ExpandFilter } from "../../../../types/tokenStudio/expandOptions.js"; +import { resolveReference } from "./resolveRelevance.js"; export function expandToken(compToken: SingleToken, isShadow = false): SingleToken { if (typeof compToken.value !== "object") { diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts index 3eb0f51e65d..a9db1a5a3be 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts @@ -1,6 +1,5 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; - import { Platform, PlatformUnion } from "../../../../types/platform.js"; import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { transformNamesSet } from "../name/nameSet.js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts index 4d8ecabb3f3..76bafe74f74 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameCamelCase.ts @@ -1,7 +1,6 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; import { camelCase } from "change-case"; - import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { parseTokenPath } from "../utils/parseTokenPath.js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts index 391eb98f5a0..172b7d8556d 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameKebabCase.ts @@ -1,7 +1,6 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; import { kebabCase } from "change-case"; - import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { parseTokenPath } from "../utils/parseTokenPath.js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts index 54ce2caf5b7..a7df51cfea1 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts @@ -1,12 +1,11 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; - import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; +import { createTokenReference } from "../../formatter/utils/createTokenReference.js"; +import { Platform } from "../../../../types/platform.js"; import { transformNamesKebabCase } from "./nameKebabCase.js"; import { transformNamesCamelCase } from "./nameCamelCase.js"; import { transformNamesJoinPath } from "./nameJoinPath.js"; -import { createTokenReference } from "../../formatter/utils/createTokenReference.js"; -import { Platform } from "../../../../types/platform.js"; export const transformNamesSet: CalledTransformerFunction = (token, args) => { const { diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts index 5d3e72a4b3b..54d38f813ca 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSpacePath.ts @@ -1,8 +1,8 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; +import { capitalCase } from "change-case"; import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { parseTokenPath } from "../utils/parseTokenPath.js"; -import { capitalCase } from "change-case"; export const transformNamesSpacePath: CalledTransformerFunction = (token, args) => { const tokenPath = parseTokenPath( diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts index c14e42ce596..fa05cbb3bfc 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts @@ -1,14 +1,13 @@ import { Transform as SdTransform } from "style-dictionary/types/Transform.js"; import { Named as SdNamed } from "style-dictionary/types/_helpers.js"; - -import { attributePlatformNames } from "./attributes/attributePlatformName.js"; -import { nameCamelCase } from "./name/nameCamelCase.js"; -import { nameKebabCase } from "./name/nameKebabCase.js"; -import { nameSpacePath } from "./name/nameSpacePath.js"; import { PlatformOptions } from "../../../types/styleDictionary/platform.js"; import { PlatformUnion } from "../../../types/platform.js"; import { PossibleRegistryArgs } from "../../../types/styleDictionary/registerFunctions.js"; import { TransformedToken } from "../../../types/styleDictionary/transformedToken.js"; +import { attributePlatformNames } from "./attributes/attributePlatformName.js"; +import { nameCamelCase } from "./name/nameCamelCase.js"; +import { nameKebabCase } from "./name/nameKebabCase.js"; +import { nameSpacePath } from "./name/nameSpacePath.js"; import { valueAlignFontWeightAndStyles } from "./value/valueAlignFontWeightAndStyle.js"; import { valueAssetToken } from "./value/valueAssetToken.js"; import { valueStringWrapper } from "./value/valueStringWrapper.js"; @@ -42,8 +41,6 @@ export const globalTransformations = [ export const styles = [ ...globalTransformations, "ts/descriptionToComment", - // This transformer name comes from Token Studio transformers - // eslint-disable-next-line @cspell/spellchecker "ts/size/css/letterspacing", "ts/shadow/css/shorthand", valueAssetToken, diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts index 35d36f29b19..0c08691be0f 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils/parseTokenPath.ts @@ -17,7 +17,7 @@ export const parseTokenPath = (path: string[]): string[] => { case "default": case "semantic": continue; - default: + default: { const priorPathSection = parsedPath.pop(); if (p.length > 0) { @@ -40,6 +40,7 @@ export const parseTokenPath = (path: string[]): string[] => { } break; + } } } return parsedPath; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts index fe72f39b764..98b7c3e85e3 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueAlignFontWeightAndStyle.ts @@ -3,7 +3,6 @@ import { Core as StyleDictionary } from "style-dictionary"; import { Matcher } from "style-dictionary/types/Matcher.js"; import { TransformedToken } from "style-dictionary/types/TransformedToken.js"; import { TokenTypes } from "@tokens-studio/types"; - import { fontWeightReg } from "../../parser/utils/transformFontWeights.js"; import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { FontWeight } from "../../../../types/tokenStudio/fontWeight.js"; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts index f4c7432e3fd..3b6d6ae0c95 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueColorCss.ts @@ -14,6 +14,7 @@ function deeplyNestedColorValue(val) { if (val.includes("rgba") || color.getAlpha() === 0) { const hexMatch = val.match(/#[\w\d]{3,6}/g); + // eslint-disable-next-line no-useless-escape -- escaping '.' to match a period instead of any character const opacityMatch = val.match(/[\d\.]+(?=\))/); if (hexMatch) { color = Color(hexMatch[0]); diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts index 93197781b59..cefb7d98981 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts @@ -3,7 +3,6 @@ import { Core as StyleDictionary } from "style-dictionary"; import { Matcher } from "style-dictionary/types/Matcher.js"; import { TransformedToken } from "style-dictionary/types/TransformedToken.js"; import { TokenTypes } from "@tokens-studio/types"; - import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; export const matcher: Matcher = (token: TransformedToken) => { diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts index c381b455613..5cc61d0540e 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; -import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { Matcher } from "style-dictionary/types/Matcher.js"; +import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; export const matcher: Matcher = (token) => { const matchingRegex = /dimension/g; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts index 87210686688..3f8b3971e61 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts @@ -1,7 +1,7 @@ // @ts-strict-ignore import { Core as StyleDictionary } from "style-dictionary"; -import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { Matcher } from "style-dictionary/types/Matcher.js"; +import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; export const matcher: Matcher = (token) => { const matchingRegex = /lineHeight/g; diff --git a/packages/calcite-design-tokens/support/types/styleDictionary/formatterArguments.ts b/packages/calcite-design-tokens/support/types/styleDictionary/formatterArguments.ts index 11598ff4f13..60d733cbc11 100644 --- a/packages/calcite-design-tokens/support/types/styleDictionary/formatterArguments.ts +++ b/packages/calcite-design-tokens/support/types/styleDictionary/formatterArguments.ts @@ -1,8 +1,7 @@ import { Named as SdNamed } from "style-dictionary/types/_helpers.js"; import { Format as SdFormat, FormatterArguments as SdFormatterArguments } from "style-dictionary/types/Format.js"; - -import { Dictionary } from "./dictionary"; import { calledFormatterFunction } from "../../token-transformer/styleDictionary/formatter/utils"; +import { Dictionary } from "./dictionary"; import { PossibleRegistryArgs } from "./registerFunctions"; import { Options } from "./options"; import { PlatformOptions } from "./platform"; diff --git a/packages/calcite-design-tokens/support/types/styleDictionary/options.ts b/packages/calcite-design-tokens/support/types/styleDictionary/options.ts index 5bdeecd8314..e5f1af5deaf 100644 --- a/packages/calcite-design-tokens/support/types/styleDictionary/options.ts +++ b/packages/calcite-design-tokens/support/types/styleDictionary/options.ts @@ -1,5 +1,4 @@ import { Options as SdOptions } from "style-dictionary/types/Options"; - import { PlatformUnion, Platforms } from "../platform"; import { CalciteExpansionFiles } from "../config"; diff --git a/packages/calcite-design-tokens/support/types/styleDictionary/registerFunctions.ts b/packages/calcite-design-tokens/support/types/styleDictionary/registerFunctions.ts index 85f734fc054..bb72a65a1b5 100644 --- a/packages/calcite-design-tokens/support/types/styleDictionary/registerFunctions.ts +++ b/packages/calcite-design-tokens/support/types/styleDictionary/registerFunctions.ts @@ -1,6 +1,5 @@ // @ts-strict-ignore import { Matcher } from "style-dictionary/types/Matcher.js"; - import { CalledTransformerFunction, TransformerTypeUnion, diff --git a/packages/calcite-design-tokens/support/types/tokenStudio/designTokenTypes.ts b/packages/calcite-design-tokens/support/types/tokenStudio/designTokenTypes.ts index 6c7c4730df3..6e96432f422 100644 --- a/packages/calcite-design-tokens/support/types/tokenStudio/designTokenTypes.ts +++ b/packages/calcite-design-tokens/support/types/tokenStudio/designTokenTypes.ts @@ -22,7 +22,6 @@ import { SingleTextDecorationToken, SingleColorToken, } from "@tokens-studio/types"; - import { SingleColorSchemeToken } from "../tokenTypes/colorScheme.js"; import { SingleTypographyToken } from "../tokenTypes/typography.js"; diff --git a/packages/calcite-design-tokens/support/types/tokenStudio/expandOptions.ts b/packages/calcite-design-tokens/support/types/tokenStudio/expandOptions.ts index d00591af982..0f27456a0e7 100644 --- a/packages/calcite-design-tokens/support/types/tokenStudio/expandOptions.ts +++ b/packages/calcite-design-tokens/support/types/tokenStudio/expandOptions.ts @@ -1,7 +1,7 @@ import { SingleBorderToken, SingleBoxShadowToken, SingleCompositionToken } from "@tokens-studio/types"; import { SingleColorSchemeToken } from "../tokenTypes/colorScheme.js"; -import { ExpandableTokenTypes, SingleToken } from "./designTokenTypes.js"; import { SingleTypographyToken } from "../tokenTypes/typography.js"; +import { ExpandableTokenTypes, SingleToken } from "./designTokenTypes.js"; export type ExpandOptions = { [ExpandableTokenTypes.TYPOGRAPHY]?: boolean | SingleTypographyToken; @@ -22,8 +22,6 @@ export const expand: ExpandOptions = { export type ExpandFilter = (token: T, filePath: string) => boolean; -// This name comes from @token-studio/sd-transforms -// eslint-disable-next-line @cspell/spellchecker export type Expandables = | SingleCompositionToken | SingleTypographyToken @@ -31,12 +29,8 @@ export type Expandables = | SingleBoxShadowToken | SingleColorSchemeToken; -// This name comes from @token-studio/sd-transforms -// eslint-disable-next-line @cspell/spellchecker export declare const expandablesAsStringsArr: string[]; -// This name comes from @token-studio/sd-transforms -// eslint-disable-next-line @cspell/spellchecker export type ExpandablesAsStrings = (typeof expandablesAsStringsArr)[number]; export interface TransformOptions { expand?: ExpandOptions | false; diff --git a/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts b/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts index a2016418293..cf5c461a9d8 100644 --- a/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts +++ b/packages/calcite-design-tokens/support/types/tokenStudio/fontWeight.ts @@ -2,8 +2,6 @@ export const FontWeight = { black: 900, bold: 700, - // This font weight name comes from token studio transformers - // eslint-disable-next-line @cspell/spellchecker buch: 400, demi: 600, demibold: 600, @@ -16,8 +14,6 @@ export const FontWeight = { hairline: 1, halbfett: 600, heavy: 900, - // This font weight name comes from token studio transformers - // eslint-disable-next-line @cspell/spellchecker kraeftig: 500, kräftig: 500, leicht: 300, @@ -28,8 +24,6 @@ export const FontWeight = { semibold: 600, super: 900, thin: 100, - // This font weight name comes from token studio transformers - // eslint-disable-next-line @cspell/spellchecker ultabold: 800, ultra: 1000, ultralight: 200, diff --git a/packages/calcite-design-tokens/support/types/tokenTypes/typography.ts b/packages/calcite-design-tokens/support/types/tokenTypes/typography.ts index 93f2d2f70e9..7220c76d6a7 100644 --- a/packages/calcite-design-tokens/support/types/tokenTypes/typography.ts +++ b/packages/calcite-design-tokens/support/types/tokenTypes/typography.ts @@ -1,6 +1,6 @@ import { TokenTypographyValue as TsTokenTypographyValue } from "@tokens-studio/types"; -import { SingleGenericToken } from "./genericToken.js"; import { ExpandableTokenTypes } from "../tokenStudio/designTokenTypes.js"; +import { SingleGenericToken } from "./genericToken.js"; export type TokenTypographyValue = TsTokenTypographyValue & { fontStyle?: string }; diff --git a/packages/eslint-config-calcite/LICENSE.md b/packages/eslint-config-calcite/LICENSE.md new file mode 100644 index 00000000000..37d072da0e3 --- /dev/null +++ b/packages/eslint-config-calcite/LICENSE.md @@ -0,0 +1,13 @@ +# Licensing + +COPYRIGHT © 2025 Esri + +All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. + +This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice. + +See use restrictions at + +For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA + +email: diff --git a/packages/eslint-config-calcite/core.js b/packages/eslint-config-calcite/core.js new file mode 100644 index 00000000000..2ff0ebaed3f --- /dev/null +++ b/packages/eslint-config-calcite/core.js @@ -0,0 +1,140 @@ +import cspellPlugin from "@cspell/eslint-plugin"; +import eslint from "@eslint/js"; +import prettierConfig from "eslint-config-prettier"; +import * as importPlugin from "eslint-plugin-import"; +import jsdocPlugin from "eslint-plugin-jsdoc"; +import unicornPlugin from "eslint-plugin-unicorn"; +import tseslint from "typescript-eslint"; + +export default tseslint.config( + prettierConfig, + + { + files: ["**/*.{ts,tsx,mjs,cjs}"], + extends: [eslint.configs.recommended, tseslint.configs.recommended, jsdocPlugin.configs["flat/recommended"]], + plugins: { + "@cspell": cspellPlugin, + import: importPlugin, + unicorn: unicornPlugin, + }, + + languageOptions: { + ecmaVersion: 2021, + sourceType: "module", + parser: tseslint.parser, + }, + + settings: { + jsdoc: { + ignoreInternal: true, + ignorePrivate: true, + }, + }, + + rules: { + "@cspell/spellchecker": ["warn", {}], + + "@typescript-eslint/method-signature-style": ["error", "property"], + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unnecessary-type-assertion": "error", + "@typescript-eslint/explicit-module-boundary-types": [ + "error", + { + allowArgumentsExplicitlyTypedAsAny: true, + allowedNames: [ + "connectedCallback", + "disconnectedCallback", + "componentWillRender", + "componentDidRender", + "componentWillLoad", + "componentDidLoad", + "componentWillUpdate", + "componentDidUpdate", + "render", + ], + }, + ], + + + "import/no-dynamic-require": [ + "error", + { + esmodule: true, + }, + ], + "import/order": [ + "error", + { + "newlines-between": "never", + }, + ], + + "jsdoc/check-param-names": "off", + "jsdoc/require-jsdoc": "off", + "jsdoc/require-param-description": "off", + "jsdoc/require-param-type": "off", + "jsdoc/require-property-type": "off", + "jsdoc/require-returns": "off", + "jsdoc/require-returns-description": "off", + "jsdoc/require-returns-type": "off", + "jsdoc/check-tag-names": "off", + "jsdoc/tag-lines": [ + "error", + "any", + { + startLines: 1, + }, + ], + "jsdoc/no-restricted-syntax": [ + "error", + { + contexts: [ + { + context: "any", + comment: 'JsdocBlock:has(JsdocTag[tag="required"]):has(JsdocTag[tag="deprecated"])', + message: + "A property cannot be required and deprecated. Use `component#warnIfMissingRequiredProp` to handle required messaging.", + }, + ], + }, + ], + + curly: "error", + "one-var": ["error", "never"], + "no-eval": "error", + "no-implied-eval": "error", + "no-new-func": "error", + "no-unneeded-ternary": "error", + "no-unexpected-multiline": "off", // conflicts with prettier - https://github.com/prettier/eslint-config-prettier/issues/32 + "no-multiple-empty-lines": [ + "error", + { + max: 1, + }, + ], + radix: ["error", "as-needed"], + + "unicorn/prefer-ternary": "error", + "unicorn/prevent-abbreviations": [ + "error", + { + allowList: { + e2ePage: true, + }, + + extendDefaultReplacements: false, + + replacements: { + e: { + error: true, + event: true, + }, + }, + + checkProperties: false, + checkFilenames: false, + }, + ], + }, + }, +); diff --git a/packages/eslint-config-calcite/jsx.js b/packages/eslint-config-calcite/jsx.js new file mode 100644 index 00000000000..621d7f6d894 --- /dev/null +++ b/packages/eslint-config-calcite/jsx.js @@ -0,0 +1,50 @@ +import reactPlugin from "eslint-plugin-react"; +import tseslint from "typescript-eslint"; + +export default tseslint.config({ + files: ["**/*.{t,j}sx"], + ...reactPlugin.configs.flat?.recommended, + settings: { + react: { + pragma: "h", + }, + }, + rules: { + "react/jsx-props-no-spreading": "error", + "react/jsx-sort-props": "error", + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", + "react/self-closing-comp": "error", + "react/forbid-component-props": [ + "warn", + { + forbid: [ + { + propName: "onKeyPress", + message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", + }, + { + propName: "onKeyUp", + message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", + }, + ], + }, + ], + "react/forbid-dom-props": [ + "warn", + { + forbid: [ + { + propName: "onKeyPress", + message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", + }, + { + propName: "onKeyUp", + message: "Use onKeyDown instead for consistent interaction behavior (e.g., closing, moving focus, etc).", + }, + ], + }, + ], + }, +}); + diff --git a/packages/eslint-config-calcite/package.json b/packages/eslint-config-calcite/package.json new file mode 100644 index 00000000000..48f52b77f9d --- /dev/null +++ b/packages/eslint-config-calcite/package.json @@ -0,0 +1,18 @@ +{ + "name": "@esri/eslint-config-calcite", + "version": "0.0.0", + "private": true, + "type": "module", + "description": "The shared ESLint config for Esri's Calcite Design System", + "homepage": "https://developers.arcgis.com/calcite-design-system/", + "repository": { + "type": "git", + "url": "git+https://github.com/Esri/calcite-design-system.git", + "directory": "packages/eslint-config-calcite" + }, + "license": "SEE LICENSE.md", + "files": [ + "core.js", + "jsx.js" + ] +} diff --git a/support/dictionaries/dict-calcite-design-system.txt b/support/dictionaries/dict-calcite-design-system.txt index e95d2e1c3f9..af92d5be7c8 100644 --- a/support/dictionaries/dict-calcite-design-system.txt +++ b/support/dictionaries/dict-calcite-design-system.txt @@ -37,6 +37,7 @@ autofilled Bézier camelcase greeking +greyscale lowercased Steffen signifiers @@ -91,15 +92,20 @@ xsmall xxsmall ## style dictionary transforms for tokens studio +Expandables +buch demi dreiviertelfett +letterspacing extrafett extraleicht extralight fett halbfett +kraeftig kräftig leicht +ultabold ## svg svgs