From d5aeffd4c8e8254f6a3f0b29c718bfde9b07654d Mon Sep 17 00:00:00 2001 From: TaraT Date: Fri, 9 May 2025 14:54:08 +0530 Subject: [PATCH 1/2] chore: update styling guide (#5437) * chore: add styling guide * chore: remove spectrum-config and update other docs * fix: update yarn new-package to not depend on spectrum-css * chore: update styling guide * chore: remove formating from plopfile --- projects/documentation/content/guides/generating-components.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/documentation/content/guides/generating-components.md b/projects/documentation/content/guides/generating-components.md index ba3648b95a9..ca5a0cefc36 100644 --- a/projects/documentation/content/guides/generating-components.md +++ b/projects/documentation/content/guides/generating-components.md @@ -22,8 +22,6 @@ _Note_ that your component name should be provided in kebab case and should rela - [new-component-name] - src - index.ts - - spectrum-[new-component-name].css - - [new-component-name]-overrides.css - [new-component-name].css - [NewComponentName].ts - stories From 4d432edd0aa12a75ad73d124f256b810c0261187 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Thu, 15 May 2025 18:02:52 -0400 Subject: [PATCH 2/2] chore: script clean-up for packages and tokens[swc-808] --- .changeset/config.json | 7 +- .circleci/config.yml | 36 +- .eslintrc.cjs | 103 +++ .eslintrc.json | 157 ----- .github/CODEOWNERS | 2 +- .github/workflows/browser-tests.yml | 3 +- .github/workflows/chromatic-vrt.yml | 4 +- .github/workflows/preview-release.yml | 2 - .github/workflows/publish-docs-site.yml | 13 +- .gitignore | 3 + .vscode/settings.json | 12 +- INVENTORY.md | 106 --- custom-elements-manifest.config.js | 11 +- lint-staged.config.js | 4 +- package.json | 315 ++++++--- packages/accordion/package.json | 4 +- packages/action-bar/package.json | 4 +- packages/action-button/package.json | 4 +- packages/action-group/package.json | 4 +- packages/action-menu/package.json | 4 +- packages/alert-banner/package.json | 4 +- packages/alert-dialog/package.json | 4 +- packages/asset/package.json | 4 +- packages/avatar/package.json | 4 +- packages/badge/package.json | 4 +- packages/breadcrumbs/package.json | 4 +- packages/button-group/package.json | 4 +- packages/button/package.json | 4 +- packages/card/package.json | 4 +- packages/checkbox/package.json | 4 +- packages/clear-button/package.json | 3 +- packages/close-button/package.json | 3 +- packages/coachmark/package.json | 4 +- packages/color-area/package.json | 4 +- packages/color-field/package.json | 4 +- packages/color-handle/package.json | 4 +- packages/color-loupe/package.json | 4 +- packages/color-slider/package.json | 4 +- packages/color-wheel/package.json | 4 +- packages/combobox/package.json | 4 +- packages/combobox/src/Combobox.ts | 6 +- packages/contextual-help/package.json | 4 +- packages/dialog/package.json | 4 +- packages/divider/package.json | 4 +- packages/dropzone/package.json | 4 +- packages/field-group/package.json | 4 +- packages/field-label/package.json | 4 +- packages/help-text/package.json | 4 +- packages/icon/package.json | 4 +- packages/icons-ui/bin/build.js | 624 ++++++++---------- packages/icons-ui/package.json | 10 +- packages/icons-workflow/package.json | 10 +- .../icons/bin/build.js | 75 ++- packages/icons/package.json | 9 +- packages/icons/src/icons-large.svg.ts | 1 + packages/icons/src/icons-medium.svg.ts | 1 + packages/iconset/package.json | 3 +- packages/illustrated-message/package.json | 4 +- packages/infield-button/package.json | 4 +- packages/link/package.json | 4 +- packages/menu/package.json | 4 +- packages/menu/stories/menu.stories.ts | 2 +- packages/meter/package.json | 4 +- packages/modal/package.json | 3 +- packages/number-field/package.json | 4 +- packages/overlay/package.json | 4 +- packages/overlay/src/OverlayStack.ts | 9 - packages/overlay/src/fullSizePlugin.ts | 5 +- packages/picker-button/package.json | 4 +- packages/picker/package.json | 4 +- packages/picker/test/index.ts | 71 -- packages/popover/package.json | 4 +- packages/progress-bar/package.json | 4 +- packages/progress-circle/package.json | 4 +- packages/radio/package.json | 4 +- packages/search/package.json | 4 +- packages/sidenav/package.json | 4 +- packages/slider/package.json | 4 +- packages/split-view/package.json | 4 +- packages/status-light/package.json | 4 +- packages/swatch/package.json | 4 +- packages/switch/package.json | 4 +- packages/table/package.json | 4 +- packages/tabs/package.json | 4 +- packages/tags/package.json | 4 +- packages/textfield/package.json | 4 +- packages/thumbnail/package.json | 4 +- packages/toast/package.json | 4 +- packages/tooltip/package.json | 4 +- packages/top-nav/package.json | 4 +- packages/tray/package.json | 4 +- packages/tray/src/Tray.ts | 2 +- packages/underlay/package.json | 4 +- projects/css-custom-vars-viewer/package.json | 2 +- projects/documentation/package.json | 6 +- .../scripts/copy-component-docs.js | 2 - .../scripts/gather-spectrum-urls.js | 80 --- projects/story-decorator/package.json | 3 +- scripts/build-css.js | 38 +- scripts/confirm-build.js | 146 ++-- scripts/create-git-tag.js | 33 - scripts/css-tools.js | 40 +- scripts/define-element-plugin.js | 1 + scripts/get-changed-packages.js | 147 +++++ storybook/main.js | 2 +- test/benchmark/helpers.ts | 24 +- tools/base/package.json | 3 +- tools/bundle/package.json | 3 +- tools/grid/package.json | 4 +- tools/opacity-checkerboard/package.json | 3 +- tools/reactive-controllers/package.json | 4 +- tools/shared/package.json | 4 +- tools/styles/package.json | 3 +- tools/theme/package.json | 4 +- tools/truncated/package.json | 4 +- yarn.lock | 142 ++-- 116 files changed, 1295 insertions(+), 1262 deletions(-) create mode 100755 .eslintrc.cjs delete mode 100755 .eslintrc.json delete mode 100644 INVENTORY.md rename scripts/process-icons.js => packages/icons/bin/build.js (54%) delete mode 100644 projects/documentation/scripts/gather-spectrum-urls.js delete mode 100644 scripts/create-git-tag.js mode change 100644 => 100755 scripts/css-tools.js create mode 100644 scripts/get-changed-packages.js diff --git a/.changeset/config.json b/.changeset/config.json index f5fa800e2ae..dc9a7738f1b 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,7 +6,12 @@ "repo": "adobe/spectrum-web-components" } ], - "commit": false, + "commit": [ + "@changesets/cli/commit", + { + "message": "chore: release new versions #publish" + } + ], "fixed": [["@spectrum-web-components/*"]], "linked": [], "access": "public", diff --git a/.circleci/config.yml b/.circleci/config.yml index 8752edea572..f4a7f4c39be 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -22,14 +22,14 @@ commands: downstream: steps: - checkout - # - restore_cache: - # keys: - # - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }} - # - restore_cache: - # keys: - # - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}- + - restore_cache: + keys: + - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }} + - restore_cache: + keys: + - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}- - run: - name: Installing Dependencies + name: Installing dependencies command: | corepack enable yarn --immutable @@ -199,18 +199,9 @@ jobs: executor: node steps: - downstream - - run: - name: Generate Custom Elements Manifest - command: yarn docs:analyze - - run: - name: Move CEM to Storybook directory - command: cp projects/documentation/custom-elements.json storybook/ - run: name: Build documentation - command: yarn docs:build - - run: - name: Build Storybook - command: yarn storybook:build + command: yarn docs:preview - run: echo '/* /index.html 200' > projects/documentation/dist/_redirects - run: | branch=$(git symbolic-ref --short HEAD) @@ -222,18 +213,9 @@ jobs: steps: - downstream - - run: - name: Generate Custom Elements Manifest - command: yarn docs:analyze - - run: - name: Move CEM to Storybook directory - command: cp projects/documentation/custom-elements.json storybook/ - run: name: Build documentation - command: yarn docs:build - - run: - name: Build Storybook - command: yarn storybook:build + command: yarn docs:ci - run: echo '/* /index.html 200' > projects/documentation/dist/_redirects - run: | branch=$(git symbolic-ref --short HEAD) diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100755 index 00000000000..f636cd56cf7 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,103 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +/* +Copyright 2025 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 path = require('path'); + +module.exports = { + root: true, + plugins: [ + '@typescript-eslint', + 'notice', + '@spectrum-web-components', + 'import', + 'require-extensions', + ], + env: { + browser: true, + node: true, + es6: true, + }, + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + }, + rules: { + curly: ['error', 'all'], + 'no-debugger': 2, + 'no-console': [ + 'error', + { + allow: ['warn', 'error'], + }, + ], + 'import/extensions': [ + 'error', + 'ignorePackages', + { + ts: 'never', + }, + ], + 'import/prefer-default-export': 'off', + '@spectrum-web-components/prevent-argument-names': [ + 'error', + ['e', 'ev', 'evt', 'err'], + ], + 'notice/notice': [ + 'error', + { + mustMatch: 'Copyright [0-9]{0,4} Adobe. All rights reserved.', + templateFile: path.join(__dirname, 'config/license.js'), + }, + ], + 'sort-imports': [ + 'error', + { + ignoreCase: true, + ignoreDeclarationSort: true, + ignoreMemberSort: false, + allowSeparatedGroups: false, + }, + ], + 'lit-a11y/click-events-have-key-events': [ + 'error', + { + allowList: [ + 'sp-button', + 'sp-action-button', + 'sp-checkbox', + 'sp-radio', + 'sp-switch', + 'sp-menu-item', + 'sp-clear-button', + 'sp-underlay', + ], + }, + ], + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:prettier/recommended', + 'plugin:lit-a11y/recommended', + 'plugin:require-extensions/recommended', + ], + overrides: [ + { + files: ['scripts/*'], + rules: { + 'no-console': ['off'], + }, + }, + ], +}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100755 index aa11c502e2a..00000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,157 +0,0 @@ -{ - "env": { - "browser": true, - "es6": true, - "node": true - }, - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:prettier/recommended", - "plugin:lit-a11y/recommended", - "plugin:require-extensions/recommended" - ], - "overrides": [ - { - "extends": ["plugin:jsonc/recommended-with-jsonc"], - "files": ["*.json"], - "parser": "jsonc-eslint-parser", - "rules": { - "jsonc/sort-keys": [ - "warn", - { - "hasProperties": ["type"], - "order": [ - "$schema", - "name", - "version", - "private", - "description", - "license", - "author", - "maintainers", - "contributors", - "homepage", - "repository", - "bugs", - "type", - "exports", - "main", - "module", - "browser", - "man", - "preferGlobal", - "bin", - "files", - "directories", - "scripts", - "config", - "sideEffects", - "types", - "typings", - "workspaces", - "resolutions", - "dependencies", - "bundleDependencies", - "bundledDependencies", - "peerDependencies", - "peerDependenciesMeta", - "optionalDependencies", - "devDependencies", - "keywords", - "engines", - "engineStrict", - "os", - "cpu", - "publishConfig" - ], - "pathPattern": ".*" // Hits the all properties - }, - { - "order": { "type": "asc" }, - "pathPattern": ".*" - } - ], - "notice/notice": "off" - } - }, - { - "files": ["scripts/*"], - "rules": { - "no-console": ["off"] - } - }, - { - "files": ["react/**/*.ts"], - "rules": { - "@typescript-eslint/no-explicit-any": "off" - } - } - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": 2020, - "sourceType": "module" - }, - "plugins": [ - "@typescript-eslint", - "notice", - "@spectrum-web-components", - "import", - "require-extensions" - ], - "root": true, - "rules": { - "@spectrum-web-components/prevent-argument-names": [ - "error", - ["e", "ev", "evt", "err"] - ], - "curly": ["error", "all"], - "import/extensions": [ - "error", - "ignorePackages", - { - "ts": "never" - } - ], - "import/prefer-default-export": "off", - "lit-a11y/click-events-have-key-events": [ - "error", - { - "allowList": [ - "sp-button", - "sp-action-button", - "sp-checkbox", - "sp-radio", - "sp-switch", - "sp-menu-item", - "sp-clear-button", - "sp-underlay" - ] - } - ], - "no-console": [ - "error", - { - "allow": ["warn", "error"] - } - ], - "no-debugger": 2, - "notice/notice": [ - "error", - { - "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", - "templateFile": "config/license.js" - } - ], - "sort-imports": [ - "error", - { - "allowSeparatedGroups": false, - "ignoreCase": true, - "ignoreDeclarationSort": true, - "ignoreMemberSort": false - } - ] - } -} diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 1d080556663..8dd7724778a 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1 @@ -* @adobe/swc-maintainers +* @adobe/swc-maintainers diff --git a/.github/workflows/browser-tests.yml b/.github/workflows/browser-tests.yml index a6e0a3c3fb9..0b15283b2d7 100644 --- a/.github/workflows/browser-tests.yml +++ b/.github/workflows/browser-tests.yml @@ -31,8 +31,7 @@ jobs: fetch-depth: 0 # Get full history - name: Fetch main branch - run: | - git fetch origin main:main + run: git fetch origin main:main - name: Setup Job and Install Dependencies uses: ./.github/actions/setup-job diff --git a/.github/workflows/chromatic-vrt.yml b/.github/workflows/chromatic-vrt.yml index a88d2cfb6d9..7ded4c8eeb2 100644 --- a/.github/workflows/chromatic-vrt.yml +++ b/.github/workflows/chromatic-vrt.yml @@ -36,7 +36,7 @@ jobs: uses: ./.github/actions/setup-job - name: Generate Custom Elements Manifest - run: yarn docs:analyze + run: yarn docs:cem - name: Move CEM to Storybook directory run: cp projects/documentation/custom-elements.json storybook/ @@ -51,7 +51,7 @@ jobs: exitOnceUploaded: true onlyChanged: true traceChanged: true - untraced: '.github/actions/*/package.json' + untraced: 'projects/*/package.json' diagnostics: true # Lets VRT pass without running so as not to waste snapshots skip: ${{ inputs.skip }} diff --git a/.github/workflows/preview-release.yml b/.github/workflows/preview-release.yml index 82c1c2f5c35..c34964e7991 100644 --- a/.github/workflows/preview-release.yml +++ b/.github/workflows/preview-release.yml @@ -43,6 +43,4 @@ jobs: run: | git add . git commit -am "chore: publish preview snapshot version" - yarn prepublishOnly yarn changeset publish --no-git-tag --tag preview - git reset --hard HEAD^ diff --git a/.github/workflows/publish-docs-site.yml b/.github/workflows/publish-docs-site.yml index eabbacb14bf..d7ee1c14a5a 100644 --- a/.github/workflows/publish-docs-site.yml +++ b/.github/workflows/publish-docs-site.yml @@ -19,17 +19,8 @@ jobs: - name: Setup Job and Install Dependencies uses: ./.github/actions/setup-job - - name: Generate Custom Elements Manifest - run: yarn docs:analyze - - - name: Move CEM to Storybook directory - run: cp projects/documentation/custom-elements.json storybook/ - - - name: Build documentation - run: yarn docs:production - - - name: Build Storybook - run: yarn storybook:build + - name: Build production documentation + run: yarn docs:ci - name: Add redirects to documentation run: echo '/* /index.html 200' > projects/documentation/dist/_redirects diff --git a/.gitignore b/.gitignore index b3636fdf35d..c639730010a 100644 --- a/.gitignore +++ b/.gitignore @@ -26,7 +26,10 @@ lib # build artifacts custom-elements.json +!packages/icons/bin/build.js +!packages/icons-ui/bin/build.js !packages/icons-workflow/bin/build.js + !packages/icons-workflow/src/DefaultIcon.ts packages/*/src/**/*.css.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 580c31fe239..0f80b0ec2ca 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,14 +1,10 @@ { "files.exclude": { "**/*.css.ts": { "when": "$(basename)" }, - "packages/**/*.js.map": true, - "packages/**/*.js": { "when": "$(basename).ts" }, - "packages/**/*.dev.js": { "when": "$(basename).js" }, - "packages/**/*.d.ts": { "when": "$(basename).ts" }, - "tools/**/*.js.map": true, - "tools/**/*.js": { "when": "$(basename).ts" }, - "tools/**/*.dev.js": { "when": "$(basename).js" }, - "tools/**/*.d.ts": { "when": "$(basename).ts" }, + "**/*.js.map": true, + "**/*.js": { "when": "$(basename).ts" }, + "**/*.dev.js": { "when": "$(basename).js" }, + "**/*.d.ts": { "when": "$(basename).ts" }, "**/*.test-vrt.ts": true }, "typescript.tsdk": "node_modules/typescript/lib", diff --git a/INVENTORY.md b/INVENTORY.md deleted file mode 100644 index 5241862ad92..00000000000 --- a/INVENTORY.md +++ /dev/null @@ -1,106 +0,0 @@ -# Component Inventory - -Availability of [Spectrum](https://spectrum.adobe.com) components in [Spectrum CSS](https://opensource.adobe.com/spectrum-css/) -and [Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/). - -| Component | Design tokens (86) | CSS (76) | Web Components (59) | -| ------------------- | ------------------ | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -| accordion | ✅ | [📄](https://opensource.adobe.com/spectrum-css/accordion.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/accordion) | -| actionbar | ✅ | [📄](https://opensource.adobe.com/spectrum-css/actionbar.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/action-bar) | -| actionbutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/actionbutton.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/action-button) | -| actiongroup | ✅ | [📄](https://opensource.adobe.com/spectrum-css/actiongroup.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/action-group) | -| actionmenu | | [📄](https://opensource.adobe.com/spectrum-css/actionmenu.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/action-menu) | -| alertbanner | ✅ | | | -| artboard | ✅ | | | -| asset | ✅ | [📄](https://opensource.adobe.com/spectrum-css/asset.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/asset) | -| assetcard | | [📄](https://opensource.adobe.com/spectrum-css/assetcard.html) | ❌ | -| assetlist | ✅ | [📄](https://opensource.adobe.com/spectrum-css/assetlist.html) | ❌ | -| avatar | ✅ | [📄](https://opensource.adobe.com/spectrum-css/avatar.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/avatar) | -| badge | ✅ | [📄](https://opensource.adobe.com/spectrum-css/badge.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/badge) | -| body | ✅ | | | -| bottomnavigation | ✅ | | | -| breadcrumb | ✅ | [📄](https://opensource.adobe.com/spectrum-css/breadcrumb.html) | ❌ | -| button | ✅ | [📄](https://opensource.adobe.com/spectrum-css/button-staticcolor.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/button) | -| buttongroup | ✅ | [📄](https://opensource.adobe.com/spectrum-css/buttongroup.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/button-group) | -| calendar | ✅ | [📄](https://opensource.adobe.com/spectrum-css/calendar.html) | ❌ | -| card | ✅ | [📄](https://opensource.adobe.com/spectrum-css/card.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/card) | -| checkbox | ✅ | [📄](https://opensource.adobe.com/spectrum-css/checkbox.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/checkbox) | -| clearbutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/clearbutton.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/clear-button) | -| closebutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/closebutton.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/close-button) | -| coachmark | ✅ | [📄](https://opensource.adobe.com/spectrum-css/coachmark.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/coachmark) | -| code | ✅ | | | -| colorarea | ✅ | [📄](https://opensource.adobe.com/spectrum-css/colorarea.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/color-area) | -| colorhandle | ✅ | [📄](https://opensource.adobe.com/spectrum-css/colorhandle.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/color-handle) | -| colorloupe | ✅ | [📄](https://opensource.adobe.com/spectrum-css/colorloupe.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/color-loupe) | -| colorslider | ✅ | [📄](https://opensource.adobe.com/spectrum-css/colorslider.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/color-slider) | -| colorwheel | ✅ | [📄](https://opensource.adobe.com/spectrum-css/colorwheel.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/color-wheel) | -| combobox | ✅ | | | -| cyclebutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/cyclebutton.html) | ❌ | -| detail | ✅ | | | -| dial | ✅ | [📄](https://opensource.adobe.com/spectrum-css/dial.html) | ❌ | -| dialog | ✅ | [📄](https://opensource.adobe.com/spectrum-css/dialog.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/dialog) | -| divider | ✅ | [📄](https://opensource.adobe.com/spectrum-css/divider.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/divider) | -| drag | ✅ | | | -| dragbar | ✅ | | | -| dragthumb | ✅ | | | -| drawer | ✅ | | | -| dropindicator | ✅ | [📄](https://opensource.adobe.com/spectrum-css/dropindicator.html) | ❌ | -| dropzone | ✅ | [📄](https://opensource.adobe.com/spectrum-css/dropzone.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/dropzone) | -| fieldgroup | | [📄](https://opensource.adobe.com/spectrum-css/fieldgroup.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/field-group) | -| fieldlabel | ✅ | [📄](https://opensource.adobe.com/spectrum-css/form.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/field-label) | -| heading | ✅ | | | -| helptext | ✅ | [📄](https://opensource.adobe.com/spectrum-css/helptext.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/help-text) | -| icon | | | [📄](https://opensource.adobe.com/spectrum-web-components/components/icon) | -| illustratedmessage | ✅ | [📄](https://opensource.adobe.com/spectrum-css/illustratedmessage.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/illustrated-message) | -| infieldbutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/infieldbutton.html) | ❌ | -| inlinealert | ✅ | [📄](https://opensource.adobe.com/spectrum-css/inlinealert.html) | ❌ | -| inputgroup | | [📄](https://opensource.adobe.com/spectrum-css/datepicker.html) | ❌ | -| label | ✅ | | | -| link | ✅ | [📄](https://opensource.adobe.com/spectrum-css/link.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/link) | -| listitem | ✅ | | | -| logicbutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/logicbutton.html) | ❌ | -| menu | | [📄](https://opensource.adobe.com/spectrum-css/menu.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/menu) | -| meter | ✅ | | | -| miller | | [📄](https://opensource.adobe.com/spectrum-css/miller.html) | ❌ | -| millercolumn | ✅ | | | -| modal | | [📄](https://opensource.adobe.com/spectrum-css/modal.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/modal) | -| opacitycheckerboard | ✅ | | | -| page | | [📄](https://opensource.adobe.com/spectrum-css/page.html) | ❌ | -| pagination | ✅ | [📄](https://opensource.adobe.com/spectrum-css/pagination-listing.html) | ❌ | -| panel | ✅ | | | -| picker | ✅ | [📄](https://opensource.adobe.com/spectrum-css/picker.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/picker) | -| pickerbutton | ✅ | [📄](https://opensource.adobe.com/spectrum-css/pickerbutton.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/picker-button) | -| popover | ✅ | [📄](https://opensource.adobe.com/spectrum-css/popover.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/popover) | -| progressbar | ✅ | [📄](https://opensource.adobe.com/spectrum-css/progressbar.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/progress-bar) | -| progresscircle | ✅ | [📄](https://opensource.adobe.com/spectrum-css/progresscircle.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/progress-circle) | -| radio | ✅ | [📄](https://opensource.adobe.com/spectrum-css/radio.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/radio) | -| radiogroup | ✅ | | | -| rating | ✅ | [📄](https://opensource.adobe.com/spectrum-css/rating.html) | ❌ | -| scrollbar | ✅ | | | -| search | ✅ | [📄](https://opensource.adobe.com/spectrum-css/search.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/search) | -| searchwithin | ✅ | [📄](https://opensource.adobe.com/spectrum-css/searchwithin.html) | ❌ | -| sidenav | ✅ | [📄](https://opensource.adobe.com/spectrum-css/sidenav.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/sidenav) | -| slider | ✅ | [📄](https://opensource.adobe.com/spectrum-css/slider.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/slider) | -| splitview | | [📄](https://opensource.adobe.com/spectrum-css/splitview.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/split-view) | -| statuslight | ✅ | [📄](https://opensource.adobe.com/spectrum-css/statuslight.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/status-light) | -| steplist | ✅ | [📄](https://opensource.adobe.com/spectrum-css/steplist.html) | ❌ | -| stepper | | [📄](https://opensource.adobe.com/spectrum-css/stepper.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/number-field) | -| stepperbutton | ✅ | | | -| swatch | | [📄](https://opensource.adobe.com/spectrum-css/swatch.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/swatch) | -| swatchgroup | | [📄](https://opensource.adobe.com/spectrum-css/swatchgroup.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/swatch) | -| switch | ✅ | [📄](https://opensource.adobe.com/spectrum-css/switch.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/switch) | -| tabbar | ✅ | | | -| table | ✅ | [📄](https://opensource.adobe.com/spectrum-css/table.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/table) | -| tabs | ✅ | [📄](https://opensource.adobe.com/spectrum-css/tabs.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/tabs) | -| tag | ✅ | [📄](https://opensource.adobe.com/spectrum-css/tag.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/tags) | -| taggroup | ✅ | [📄](https://opensource.adobe.com/spectrum-css/taggroup.html) | ❌ | -| textarea | ✅ | | | -| textfield | ✅ | [📄](https://opensource.adobe.com/spectrum-css/textfield.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/textfield) | -| thumbnail | ✅ | [📄](https://opensource.adobe.com/spectrum-css/thumbnail.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/thumbnail) | -| toast | ✅ | [📄](https://opensource.adobe.com/spectrum-css/toast.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/toast) | -| tooltip | ✅ | [📄](https://opensource.adobe.com/spectrum-css/tooltip.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/tooltip) | -| tray | ✅ | [📄](https://opensource.adobe.com/spectrum-css/tray.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/tray) | -| treeview | ✅ | [📄](https://opensource.adobe.com/spectrum-css/treeview.html) | ❌ | -| typography | | [📄](https://opensource.adobe.com/spectrum-css/typography.html) | [📄](https://opensource.adobe.com/spectrum-web-components/components/styles) | -| underlay | | | [📄](https://opensource.adobe.com/spectrum-web-components/components/underlay) | -| well | ✅ | [📄](https://opensource.adobe.com/spectrum-css/well.html) | ❌ | diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 365d5acb588..2610d848123 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -14,13 +14,7 @@ import { moduleFileExtensionsPlugin } from 'cem-plugin-module-file-extensions'; import defineElementPlugin from './scripts/define-element-plugin.js'; export default { - globs: [ - '**/sp-*.ts', - '**/overlay-trigger.ts', - '**/src/[A-Z]*.ts', - '**/src/elements/[A-Z]*.ts', - '**/tools/shared/src/*.ts', - ], + litelement: true, exclude: [ '**/*.d.ts', '**/stories/**', @@ -28,8 +22,5 @@ export default { 'node_modules/*', '**/*.dev.*', ], - outdir: '.', - litelement: true, - packagejson: false, plugins: [moduleFileExtensionsPlugin(), defineElementPlugin()], }; diff --git a/lint-staged.config.js b/lint-staged.config.js index d501e98afe2..6cf2c7e81d2 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -12,12 +12,12 @@ export default { '*.css': [ - 'stylelint --fix --cache --allow-empty-input', 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + 'stylelint --fix --cache --allow-empty-input', ], '*.ts': [ - 'eslint --fix --format pretty --cache --no-error-on-unmatched-pattern --quiet', 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + 'eslint --fix --cache --no-error-on-unmatched-pattern --quiet', ], '{packages,tools}/*/src/**/!(*.css).ts': ['yarn lit-analyzer'], 'package.json': () => [ diff --git a/package.json b/package.json index bb03beeb096..34708d23703 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { "private": true, "name": "@adobe/spectrum-web-components", + "homepage": "https://opensource.adobe.com/spectrum-web-components/", "version": "0.0.9", - "description": "Spectrum Web Components are a set of reusable, accessible, and customizable web components following the design language of Adobe Spectrum.", + "description": "The official implementation of Spectrum CSS in Web Components.", + "type": "module", "license": "Apache-2.0", "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-web-components/", "repository": { "type": "git", "url": "https://github.com/adobe/spectrum-web-components.git" @@ -13,34 +14,35 @@ "bugs": { "url": "https://github.com/adobe/spectrum-web-components/issues" }, - "type": "module", + "engines": { + "node": ">=20", + "yarn": ">=4.6.0" + }, "scripts": { "analyze": "lit-analyzer \"{packages,tools}/*/src/**/!(*.css).ts\"", + "analyze:components": "cem analyze --config ./custom-elements-manifest.config.js --litelement", + "build:components:css": "node ./scripts/build-css.js", "build": "wireit", - "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo", "build:confirm": "node ./scripts/confirm-build.js", "build:css": "wireit", - "build:css:watch": "wireit", - "build:react": "rimraf react && node ./scripts/build-react.js && tsc --build tsconfig-react-wrapper.json", - "build:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json", + "build:cem": "wireit", + "build:cem:docs": "wireit", + "build:icons": "wireit", + "build:react": "wireit", + "build:tests": "wireit", "build:ts": "wireit", - "build:ts:watch": "wireit", "build:types": "wireit", "build:watch": "wireit", "changeset-snapshot-publish": "yarn prepublishOnly && yarn changeset version --snapshot snapshot && yarn constraints --fix && yarn install --refresh-lockfile && yarn version:update && yarn changeset publish --no-git-tag --tag snapshot", "changeset-publish": "yarn prepublishOnly && yarn changeset version && yarn constraints --fix && yarn install --refresh-lockfile && yarn version:update && yarn changeset publish --no-git-tag && yarn push-to-remote && yarn create-git-tag && yarn postpublish", "changelog:global": "node ./scripts/update-global-changelog.js", "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables", - "create-git-tag": "node --no-warnings ./scripts/create-git-tag.js", - "custom-element-json": "node ./scripts/custom-element-json.js", - "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement", "docs:build": "yarn workspace documentation build", - "docs:ci": "yarn docs:analyze && run-p docs:production storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", - "docs:preview": "yarn docs:analyze && run-p docs:build storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", + "docs:ci": "yarn build:cem:docs && run-p docs:production storybook:build:docs && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", + "docs:preview": "yarn build:cem:docs && run-p docs:build storybook:build:docs && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", "docs:production": "yarn workspace documentation build:production", "docs:review": "alex packages/**/*.md", "docs:start": "yarn workspace documentation serve --watch", - "find": "test -f custom-elements.json", "icons": "wireit", "icons:ui": "wireit", "icons:workflow": "wireit", @@ -48,24 +50,15 @@ "new-package": "yarn workspace swc-templates plop", "postinstall": "husky || true && patch-package", "postpack": "pinst --enable", - "postpublish": "yarn prepublish:react && yarn publish:react && yarn postpublish:react", - "postpublish:react": "git reset --hard HEAD^ && git prune && rimraf react", - "preeleventy": "yarn docs:analyze", "prepack": "pinst --disable", - "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify", - "prepublishOnly": "rimraf react && yarn build && yarn custom-element-json && yarn build:confirm && yarn changelog:global", - "prestorybook": "wireit", - "prestorybook:build": "cem analyze --outdir storybook/", + "prepublishOnly": "rimraf react && yarn build && yarn custom-element-json && yarn verify-build-artifacts && yarn build:confirm", "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:", - "pretest:visual": "yarn build && yarn build", - "process-icons": "wireit", - "publish:react": "yarn changeset publish --no-git-tag --tag latest --no-push", - "push-to-remote": "git add . && git commit -m \"chore: release new versions #publish\" && git push", + "publish": "wireit", + "publish:snapshot": "yarn prepublishOnly && yarn changeset version --snapshot latest && genversion --esm --semi tools/base/src/version.js && yarn lint:versions --fix && yarn install && git add . && yarn changeset publish --no-git-tag --tag snapshot", "start": "yarn storybook", "storybook": "wireit", - "storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook", - "storybook:quick": "run-p build:watch storybook:run", - "storybook:run": "web-dev-server --config wds-storybook.config.js", + "storybook:build": "wireit", + "storybook:build:docs": "cem analyze --outdir storybook/ && NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook", "test": "yarn test:focus unit", "test:bench": "yarn build:tests && node test/benchmark/cli.js", "test:changed": "node ./scripts/test-changes.js", @@ -74,7 +67,7 @@ "test:errors": "yarn test | grep -A 32 ❌", "test:focus": "yarn build && yarn test:ci --group", "test:start": "web-test-runner", - "test:visual": "yarn test:visual:ci", + "test:visual": "yarn build && yarn test:visual:ci", "test:visual:ci": "yarn test:start --group", "test:visual:clean": "yarn test:visual:clean:baseline && yarn test:visual:clean:current", "test:visual:clean:baseline": "rimraf test/visual/screenshots-baseline", @@ -84,7 +77,9 @@ "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --", "version:update": "genversion --verbose --semi --esm ./tools/base/src/version.js", "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js", - "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link" + "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link", + "watch": "wireit", + "watch:ts": "wireit" }, "workspaces": [ "linters/*", @@ -160,7 +155,7 @@ "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsonc": "^2.20.1", "eslint-plugin-lit-a11y": "^2.2.2", - "eslint-plugin-notice": "^0.9.10", + "eslint-plugin-notice": "^1.0.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-require-extensions": "^0.1.3", "eslint-plugin-storybook": "^0.8.0", @@ -215,42 +210,119 @@ "lit-element", "lit-html" ], - "engines": { - "node": ">=20", - "yarn": ">=4.6.0" - }, "wireit": { "build": { "dependencies": [ + "build:css", + "build:icons", "build:ts", "build:types" ] }, + "build:cem": { + "command": "yarn workspaces foreach --all --parallel --no-private --verbose run analyze", + "dependencies": [ + "build:css", + "build:icons" + ], + "files": [ + "packages/**/*.ts", + "!packages/clear-button/**/*.ts", + "!packages/close-button/**/*.ts", + "!packages/modal/**/*.ts", + "!packages/iconset/**/*.ts", + "tools/grid/**/*.ts", + "tools/theme/**/*.ts", + "tools/trucated/**/*.ts", + "tools/reactive-controllers/**/*.ts", + "projects/story-decorator/**/*.ts" + ], + "outputs": [ + "packages/*/custom-elements.json", + "!packages/clear-button/custom-elements.json", + "!packages/close-button/custom-elements.json", + "!packages/modal/custom-elements.json", + "!packages/iconset/custom-elements.json", + "tools/grid/custom-elements.json", + "tools/theme/custom-elements.json", + "tools/trucated/custom-elements.json", + "tools/reactive-controllers/custom-elements.json", + "projects/story-decorator/custom-elements.json" + ] + }, + "build:cem:docs": { + "command": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/{stories,icons,elements}/**\" --outdir projects/documentation --litelement", + "dependencies": [ + "build:ts" + ], + "files": [ + "packages/**/*.ts", + "!packages/**/*.d.ts", + "!**/{stories,icons,elements}/**", + "tools/**/*.ts" + ], + "output": [ + "projects/documentation/custom-elements.json" + ] + }, "build:css": { - "clean": "if-file-deleted", - "command": "node ./scripts/build-css.js", + "command": "yarn workspaces foreach --all --parallel --no-private --verbose run build:css", "files": [ "packages/**/*.css", "tools/**/*.css", - "scripts/build-css.js", - "scripts/css-tools.js" + "scripts/build-css.js" ], "output": [ "packages/**/*.css.ts", "tools/**/*.css.ts" ] }, - "build:css:watch": { - "command": "node ./scripts/watch-css.js", - "service": true + "build:react": { + "clean": "if-file-deleted", + "command": "rimraf react && node ./scripts/build-react.js && tsc --build tsconfig-react-wrapper.json", + "files": [ + "packages/react/src/**/*.ts", + "packages/react/src/**/*.js", + "packages/react/tsconfig-react-wrapper.json", + "packages/react/tsconfig.json", + "scripts/build-react.js" + ], + "output": [ + "packages/react/src/**/*.js", + "packages/react/src/**/*.js.map", + "packages/react/tsconfig-react-wrapper.json", + "packages/react/tsconfig.json" + ] + }, + "build:tests": { + "command": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json", + "files": [ + "test/**/*.ts", + "test/**/*.js", + "!test/visual/create.js", + "!test/visual/review.js", + "!test/visual/rollup.config.js", + "!test/visual/src/review.js", + "!test/visual/src/index.html", + "!test/visual/wds-vrt.config.js" + ], + "output": [ + "test/**/*.js", + "test/**/*.js.map", + "!test/visual/create.js", + "!test/visual/review.js", + "!test/visual/rollup.config.js", + "!test/visual/src/review.js", + "!test/visual/src/index.html", + "!test/visual/wds-vrt.config.js" + ] }, "build:ts": { "clean": "if-file-deleted", "command": "node ./scripts/build-ts.js", "dependencies": [ - "process-icons", - "test:create", - "build:css" + "build:css", + "build:icons" ], "files": [ "packages/**/*.ts", @@ -265,6 +337,7 @@ "tools/**/*.ts", "!tools/**/*.d.ts", "scripts/build-ts.js", + "scripts/ts-tools.js", "packages/**/exports.json", "tools/**/exports.json" ], @@ -302,9 +375,8 @@ "clean": "if-file-deleted", "command": "tsc --build tsconfig-all.json --pretty", "dependencies": [ - "process-icons", - "test:create", - "build:css" + "build:css", + "build:icons" ], "files": [ "tsconfig-all.json", @@ -322,22 +394,42 @@ "!tools/base/src/version.d.ts" ] }, - "build:watch": { + "build:validate": { + "command": "node ./scripts/verify-build-artifacts.js", + "dependencies": [ + "build:ts", + "build:types" + ], + "files": [ + "packages/**/*.ts", + "tools/**/*.ts", + "scripts/verify-build-artifacts.js" + ], + "outputs": [] + }, + "build:icons": { + "command": "eslint \"packages/icons*/src/*/*.ts\" --fix --cache", "dependencies": [ - "build:css:watch", - "build:ts:watch" + "build:icons:scales", + "build:icons:ui", + "build:icons:workflow" ] }, - "icons": { - "command": "node ./scripts/process-icons.js && yarn lint", + "build:icons:scales": { + "clean": "if-file-deleted", + "command": "yarn workspace @spectrum-web-components/icons build", "files": [ - "scripts/process-icons.js" + "packages/icons/bin/build.js", + "packages/icons/packages.json", + "node_modules/@spectrum-css/ui-icons/dist/medium/**.svg", + "node_modules/@spectrum-css/ui-icons/dist/large/**.svg" ], "output": [ - "packages/**/*.svg.ts" + "packages/icons/src/icons-medium.svg.ts", + "packages/icons/src/icons-large.svg.ts" ] }, - "icons:ui": { + "build:icons:ui": { "clean": "if-file-deleted", "command": "yarn workspace @spectrum-web-components/icons-ui build", "files": [ @@ -347,17 +439,15 @@ "node_modules/@spectrum-css/ui-icons-s2/dist/medium/**.svg" ], "output": [ - "packages/icons-ui/**/*.ts", - "!packages/icons-ui/**/*.d.ts", - "!packages/icons-ui/stories/**/*.ts", "packages/icons-ui/stories/icon-manifest.ts", - "!packages/icons-ui/test/**/*.ts", + "packages/icons-ui/src/**/*.ts", + "!packages/icons-ui/src/**/*.d.ts", "!packages/icons-ui/src/index.ts", "!packages/icons-ui/src/custom-tag.ts", "!packages/icons-workflow/src/DefaultIcon.ts" ] }, - "icons:workflow": { + "build:icons:workflow": { "clean": "if-file-deleted", "command": "yarn workspace @spectrum-web-components/icons-workflow build", "files": [ @@ -376,31 +466,24 @@ "!packages/icons-workflow/bin/icons-mapping.json" ] }, - "prestorybook": { - "command": "cem analyze --outdir storybook/", - "files": [ - "packages/**/*.ts", - "tools/**/*.ts" - ], - "output": [ - "storybook/custom-elements.json" - ] - }, - "process-icons": { - "dependencies": [ - "icons", - "icons:ui", - "icons:workflow" - ] - }, "storybook": { "command": "storybook dev -p 8080 -c storybook", "dependencies": [ - "build:watch", - "prestorybook" + "build:cem", + "watch" ], "service": true }, + "storybook:build": { + "command": "storybook build -c storybook", + "env": { + "NODE_ENV": "production" + }, + "dependencies": [ + "build", + "build:cem:docs" + ] + }, "test:create": { "clean": "if-file-deleted", "command": "node test/visual/create.js", @@ -412,7 +495,77 @@ "packages/*/test/*.test-vrt.ts", "tools/*/test/*.test-vrt.ts" ] + }, + "publish": { + "dependencies": [ + "build", + "version", + "publish:tags", + "publish:react" + ] + }, + "publish:tags": { + "dependencies": [ + "build", + "version" + ], + "command": "yarn changeset publish && git push -f --follow-tags" + }, + "publish:react": { + "command": "git reset --hard HEAD^ && git prune && rimraf react", + "dependencies": [ + "build", + "version", + "publish:tags", + "publish:react:build", + "publish:react:tag" + ] + }, + "publish:react:build": { + "dependencies": [ + "build:react" + ], + "command": "sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"chore: commit React watch\" --no-verify" + }, + "publish:react:tag": { + "dependencies": [ + "publish:react:build" + ], + "command": "yarn changeset publish --no-git-tag --tag latest --no-push" + }, + "version": { + "dependencies": [ + "build" + ], + "command": "yarn changeset version && yarn lint:versions --fix && yarn install && git add ." + }, + "watch": { + "dependencies": [ + "watch:css", + "watch:ts" + ] + }, + "watch:css": { + "command": "node ./scripts/watch-css.js", + "dependencies": [ + "build:css" + ], + "files": [ + "scripts/watch-css.js" + ], + "service": true + }, + "watch:ts": { + "command": "node ./scripts/watch-packages.js", + "dependencies": [ + "build:ts" + ], + "files": [ + "scripts/watch-packages.js" + ], + "service": true } }, - "packageManager": "yarn@4.9.1" + "packageManager": "yarn@4.9.1", + "customElements": "custom-elements.json" } diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 47ea06f8557..d08be343884 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -51,7 +51,9 @@ } }, "scripts": { - "test": "karma start --coverage" + "test": "karma start --coverage", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/accordion", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index f9967f27df2..77b2e49e852 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/action-bar", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/action-button/package.json b/packages/action-button/package.json index 9583feb49d1..d6dfaf9c404 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/action-button", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/action-group/package.json b/packages/action-group/package.json index f00680a6f06..50a71471ef2 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "karma start --coverage" + "test": "karma start --coverage", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/action-group", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index fa170977a82..10ed68d39fa 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -44,7 +44,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/action-menu", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index d4bb923765d..7cfdf50503d 100644 --- a/packages/alert-banner/package.json +++ b/packages/alert-banner/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/alert-banner", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index c735108f588..3d20bd15c5a 100644 --- a/packages/alert-dialog/package.json +++ b/packages/alert-dialog/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/alert-dialog", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/asset/package.json b/packages/asset/package.json index 6420f3500f0..d3647ace5ef 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/asset", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/avatar/package.json b/packages/avatar/package.json index 7466812b400..8a1bad62387 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/avatar", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/badge/package.json b/packages/badge/package.json index 9af4d2aa98d..de0b62f624c 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/badge", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index c5a98d3154d..06c2c48497a 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -50,7 +50,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/breadcrumbs", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/button-group/package.json b/packages/button-group/package.json index 1bbfa3c36c8..eca29ec94b1 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/button-group", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/button/package.json b/packages/button/package.json index 929a266a105..6c7c210881c 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -66,7 +66,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/button", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/card/package.json b/packages/card/package.json index bb5b93836e2..3a1c4de7ade 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/card", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index b4d9c5a6e42..1ebd299871f 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -49,7 +49,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/checkbox", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index f32986661fb..3c784a7d295 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -26,7 +26,8 @@ "./src/clear-button.css.js": "./src/clear-button.css.js" }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/close-button/package.json b/packages/close-button/package.json index e2f75ae7792..72aee47e3a2 100644 --- a/packages/close-button/package.json +++ b/packages/close-button/package.json @@ -26,7 +26,8 @@ "./src/close-button.css.js": "./src/close-button.css.js" }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index f43c6db50ae..d53a89dbe96 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -55,7 +55,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/coachmark", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/color-area/package.json b/packages/color-area/package.json index ff484170191..8fdd9ad97b7 100644 --- a/packages/color-area/package.json +++ b/packages/color-area/package.json @@ -45,7 +45,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/color-area", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/color-field/package.json b/packages/color-field/package.json index 52f70ccf09c..e7d4efaf7e6 100644 --- a/packages/color-field/package.json +++ b/packages/color-field/package.json @@ -40,7 +40,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/color-field", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index c3f03438752..f8378377b64 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/color-handle", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index 52c679ccab2..49c73709faf 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/color-loupe", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index e9e86c76f20..68359f06822 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -45,7 +45,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/color-slider", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index 6c9bc27a58e..606b3cda66f 100644 --- a/packages/color-wheel/package.json +++ b/packages/color-wheel/package.json @@ -45,7 +45,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/color-wheel", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 70414aa2947..1eb316c9167 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/combobox", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts index 48eb87ccc23..859ca252765 100644 --- a/packages/combobox/src/Combobox.ts +++ b/packages/combobox/src/Combobox.ts @@ -596,11 +596,7 @@ export class Combobox extends Textfield { } } - protected override updated( - changed: PropertyValues< - this & { optionEls: MenuItem[]; activeDescendant: MenuItem } - > - ): void { + protected override updated(changed: Map): void { if (changed.has('open') && !this.pending) { this.manageListOverlay(); } diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json index 3d13db524e1..16d35247c78 100644 --- a/packages/contextual-help/package.json +++ b/packages/contextual-help/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/contextual-help", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/dialog/package.json b/packages/dialog/package.json index 3b4e51d2baa..0de795e9ab6 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -57,7 +57,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/dialog", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/divider/package.json b/packages/divider/package.json index f92ebfeda17..0f3f48071af 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/divider", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 0737f352012..947fce53aee 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/dropzone", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/field-group/package.json b/packages/field-group/package.json index 43e78c30473..b586f1c3b81 100644 --- a/packages/field-group/package.json +++ b/packages/field-group/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/field-group", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/field-label/package.json b/packages/field-label/package.json index ac95d80f476..cdbb8729e8d 100644 --- a/packages/field-label/package.json +++ b/packages/field-label/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/field-label", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/help-text/package.json b/packages/help-text/package.json index f7b5161a8d5..79574b9eeaf 100644 --- a/packages/help-text/package.json +++ b/packages/help-text/package.json @@ -61,7 +61,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/help-text", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/icon/package.json b/packages/icon/package.json index 86b37d81066..e3769fa2615 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -64,7 +64,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/icon", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/icons-ui/bin/build.js b/packages/icons-ui/bin/build.js index 3d46d62adaf..f136003667d 100644 --- a/packages/icons-ui/bin/build.js +++ b/packages/icons-ui/bin/build.js @@ -14,401 +14,297 @@ import fs from 'fs'; import fg from 'fast-glob'; import path from 'path'; +import { fileURLToPath } from 'url'; +import { createRequire } from 'module'; + import { load } from 'cheerio'; import prettier from 'prettier'; +import eslint from 'eslint'; import Case from 'case'; -import { fileURLToPath } from 'url'; +const prettierConfig = { + printWidth: 100, + tabWidth: 2, + useTabs: false, + semi: true, + singleQuote: true, + trailingComma: 'all', + bracketSpacing: true, + jsxBracketSameLine: false, + arrowParens: 'avoid', + parser: 'typescript', +}; + +const fsp = fs.promises; const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); +const rootDir = path.join(__dirname, '..'); -const rootDir = path.join(__dirname, '../../../'); - -const disclaimer = ` -/* -Copyright 2020 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 S1IconsPackageDir = require.resolve('@spectrum-css/ui-icons'); // /dist/medium'; +const S2IconsPackageDir = require.resolve('@spectrum-css/ui-icons-s2'); // /dist/medium'; -const S1IConsPackageDir = '@spectrum-css/ui-icons/dist/medium'; -const S2IConsPackageDir = '@spectrum-css/ui-icons-s2/dist/medium'; -const keepColors = ''; +function cleanFileName(filepath) { + // Clean up the file name to get the id + let id = path + .basename(filepath, '.svg') + .replace('S2_Icon_', '') + .replace('_20_N', '') + .replace('_22x20_N', ''); -if (!fs.existsSync(`${rootDir}packages/icons-ui/src`)) { - fs.mkdirSync(`${rootDir}packages/icons-ui/src`); -} -if (!fs.existsSync(`${rootDir}packages/icons-ui/src/icons`)) { - fs.mkdirSync(`${rootDir}packages/icons-ui/src/icons`); -} -if (!fs.existsSync(`${rootDir}packages/icons-ui/src/icons-s2`)) { - fs.mkdirSync(`${rootDir}packages/icons-ui/src/icons-s2`); -} -if (!fs.existsSync(`${rootDir}packages/icons-ui/src/elements`)) { - fs.mkdirSync(`${rootDir}packages/icons-ui/src/elements`); -} -if (!fs.existsSync(`${rootDir}packages/icons-ui/icons`)) { - fs.mkdirSync(`${rootDir}packages/icons-ui/icons`); -} -fs.writeFileSync( - path.join(rootDir, 'packages', 'icons-ui', 'src', 'icons.ts'), - disclaimer, - 'utf-8' -); -fs.writeFileSync( - path.join(rootDir, 'packages', 'icons-ui', 'src', 'icons-s2.ts'), - disclaimer, - 'utf-8' -); -const manifestPath = path.join( - rootDir, - 'packages', - 'icons-ui', - 'stories', - 'icon-manifest.ts' -); -fs.writeFileSync(manifestPath, disclaimer, 'utf-8'); -let manifestImports = `import { - html, - TemplateResult -} from '@spectrum-web-components/base';\r\n`; -let manifestListings = `\r\nexport const iconManifest = [\r\n`; - -const defaultIconImport = `import { DefaultIcon as AlternateIcon } from '../DefaultIcon.js';\r\n`; - -async function buildIcons(icons, tag, iconsNameList) { - icons.forEach((i) => { - const svg = fs.readFileSync(i, 'utf-8'); - let id = path - .basename(i, '.svg') - .replace('S2_Icon_', '') - .replace('_20_N', '') - .replace('_22x20_N', ''); - if (id.search(/^Ad[A-Z]/) !== -1) { - id = id.replace(/^Ad/, ''); - id += 'Advert'; - } + // If the id starts with Ad and is followed by a capital letter, replace it with an empty string + // and add Advert to the end of the id + if (id.search(/^Ad[A-Z]/) !== -1) { + id = id.replace(/^Ad/, ''); + id += 'Advert'; + } - if (id === 'UnLink') { - id = 'Unlink'; - } - if (id === 'TextStrikeThrough') { - id = 'TextStrikethrough'; + let ComponentName; + + // Spelling correction for the component names + [ + { + from: 'Github', + to: 'GitHub', + }, + { + from: 'TextStrikeThrough', + to: 'TextStrikethrough', + }, + { + from: 'UnLink', + to: 'Unlink', + }, + ].forEach(({ from, to }) => { + if (Case.pascal(id) === from) { + ComponentName = to; + id = to; + } else { + ComponentName = Case.pascal(id); } + }); - let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id); + return { + id, + ComponentName, + }; +} - if (ComponentName === 'TextStrikeThrough') { - ComponentName = 'TextStrikethrough'; - } - if (ComponentName === 'UnLink') { - ComponentName = 'Unlink'; - } +async function formatAndWrite(filePath, content, { cwd = rootDir } = {}) { + const linter = new eslint.ESLint({ + cwd: path.join(rootDir, '..', '..'), + useEslintrc: true, + overrideConfigFile: path.join(rootDir, '..', '..', '.eslintrc.cjs'), + fix: true, + }); - const $ = load(svg, { - xmlMode: true, - }); - const title = Case.capital(id); - const fileName = `${id}.ts`; - const location = path.join( - rootDir, - 'packages/icons-ui/src', - tag, - fileName - ); - - if (!Number.isNaN(Number(ComponentName[0]))) { - return; + let formatted = await linter.lintText(content).then((results) => { + if (results?.[0]?.errorCount > 0 && !results?.[0]?.output) { + return Promise.reject(`Error linting ${filePath}`); } - $('*').each((index, el) => { - if (el.name === 'svg') { - $(el).attr('aria-hidden', '...'); - $(el).attr('role', 'img'); - if (keepColors !== 'keep') { - $(el).attr('fill', 'currentColor'); - } - $(el).attr('aria-label', '...'); - $(el).removeAttr('id'); - $(el).attr('width', '...'); - $(el).attr('height', '...'); - } - if (el.name === 'defs') { - $(el).remove(); - } - Object.keys(el.attribs).forEach((x) => { - if (x === 'class') { - $(el).removeAttr(x); - } - if (keepColors !== 'keep' && x === 'stroke') { - $(el).attr(x, 'currentColor'); - } - if (keepColors !== 'keep' && x === 'fill') { - $(el).attr(x, 'currentColor'); - } - }); - }); - - const iconLiteral = ` - ${disclaimer} - - import {tag as html, TemplateResult} from '../custom-tag.js'; - - export {setCustomTemplateLiteralTag} from '../custom-tag.js'; - export const ${ComponentName}Icon = ({ - width = 24, - height = 24, - hidden = false, - title = '${title}', - } = {},): string | TemplateResult => { - return html\`${$('svg') - .toString() - .replace( - 'aria-hidden="..."', - "aria-hidden=${hidden ? 'true' : 'false'}" - ) - .replace('width="..."', 'width="${width}"') - .replace('height="..."', 'height="${height}"') - .replace('aria-label="..."', 'aria-label="${title}"')}\`; - } - `; - - prettier - .format(iconLiteral, { - printWidth: 100, - tabWidth: 2, - useTabs: false, - semi: true, - singleQuote: true, - trailingComma: 'all', - bracketSpacing: true, - jsxBracketSameLine: false, - arrowParens: 'avoid', - parser: 'typescript', - }) - .then((icon) => { - fs.writeFileSync(location, icon, 'utf-8'); - }); - - const exportString = `export {${ComponentName}Icon} from './${tag}/${id}.js';\r\n`; - fs.appendFileSync( - path.join(rootDir, 'packages', 'icons-ui', 'src', tag + '.ts'), - exportString, - 'utf-8' - ); - - const iconElementName = `sp-icon-${Case.kebab(ComponentName)}`; - - const currenVersionIconImport = `import { ${ComponentName}Icon as CurrentIcon } from '../${tag}/${id}.js';\r\n`; - - // check if the icon is present in the other version - let otherVersionIconImport = defaultIconImport; - - if (iconsNameList.includes(ComponentName)) { - const alternateTag = tag === 'icons' ? 'icons-s2' : 'icons'; - otherVersionIconImport = `import { ${ComponentName}Icon as AlternateIcon } from '../${alternateTag}/${id}.js';\r\n`; - } + return results?.[0]?.output; + }); - const spectrumVersion = tag === 'icons' ? 1 : 2; - - const iconElement = ` - ${disclaimer} - - import { - html, - TemplateResult - } from '@spectrum-web-components/base'; - import { - IconBase - } from '@spectrum-web-components/icon'; - import { - setCustomTemplateLiteralTag - } from '../custom-tag.js'; - - ${currenVersionIconImport} - ${otherVersionIconImport} - - /** - * @element ${iconElementName} - */ - export class Icon${ComponentName} extends IconBase { - protected override render(): TemplateResult { - setCustomTemplateLiteralTag(html); - - if(this.spectrumVersion === ${spectrumVersion}){ - return CurrentIcon({ hidden: !this.label, title: this.label }) as TemplateResult; - } - return AlternateIcon({ hidden: !this.label, title: this.label }) as TemplateResult; + formatted = await prettier.format(content, prettierConfig); - } - } - `; - - prettier - .format(iconElement, { - printWidth: 100, - tabWidth: 2, - useTabs: false, - semi: true, - singleQuote: true, - trailingComma: 'all', - bracketSpacing: true, - jsxBracketSameLine: false, - arrowParens: 'avoid', - parser: 'typescript', - }) - .then((iconElementFile) => { - fs.writeFileSync( - path.join( - rootDir, - 'packages', - 'icons-ui', - 'src', - 'elements', - `Icon${id}.ts` - ), - iconElementFile, - 'utf-8' - ); - }); - - const iconRegistration = ` - ${disclaimer} - - import { Icon${ComponentName} } from '../src/elements/Icon${id}.js'; - import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; - - defineElement('${iconElementName}', Icon${ComponentName}); - - declare global { - interface HTMLElementTagNameMap { - '${iconElementName}': Icon${ComponentName}; - } - } - `; - - prettier - .format(iconRegistration, { - printWidth: 100, - tabWidth: 2, - useTabs: false, - semi: true, - singleQuote: true, - trailingComma: 'all', - bracketSpacing: true, - jsxBracketSameLine: false, - arrowParens: 'avoid', - parser: 'typescript', - }) - .then((iconRegistrationFile) => { - fs.writeFileSync( - path.join( - rootDir, - 'packages', - 'icons-ui', - 'icons', - `${iconElementName}.ts` - ), - iconRegistrationFile, - 'utf-8' - ); - }); - - const importStatement = `\r\nimport '@spectrum-web-components/icons-ui/icons/${iconElementName}.js';`; - const metadata = `{name: '${Case.sentence( - ComponentName - )}', tag: '<${iconElementName}>', story: (size: string): TemplateResult => html\`<${iconElementName} size=\$\{size\}>\`},\r\n`; - manifestImports += importStatement; - manifestListings += metadata; - }); + return fsp.writeFile(path.join(cwd, filePath), formatted, 'utf-8'); } -const iconsV1 = ( - await fg(`${rootDir}/node_modules/${S1IConsPackageDir}/**.svg`) -).sort(); +async function buildIcon(filepath, folder, altIconList) { + // Read in our SVG file + const svg = await fsp.readFile(filepath, 'utf-8'); -const iconsV2 = ( - await fg(`${rootDir}/node_modules/${S2IConsPackageDir}/**.svg`) -).sort(); + const { id, ComponentName } = cleanFileName(filepath); -const iconsV1NameList = iconsV1.map((i) => { - let id = path - .basename(i, '.svg') - .replace('S2_Icon_', '') - .replace('_20_N', '') - .replace('_22x20_N', ''); - - if (id.search(/^Ad[A-Z]/) !== -1) { - id = id.replace(/^Ad/, ''); - id += 'Advert'; + // If the first character of the ComponentName is a number, skip it + // This is to avoid issues with the component name being a number + // and causing issues with the import statement + if (!Number.isNaN(Number(ComponentName.charAt(0)))) { + return; } - if (id === 'UnLink') { - id = 'Unlink'; - } - if (id === 'TextStrikeThrough') { - id = 'TextStrikethrough'; - } + // Initializing cheerio for parsing the SVG + const $ = load(svg, { xmlMode: true }); + + $('*').each((_, el) => { + if (el.name === 'svg') { + $(el).attr('aria-hidden', '...'); + $(el).attr('role', 'img'); + $(el).attr('fill', 'currentColor'); + $(el).attr('aria-label', '...'); + $(el).removeAttr('id'); + $(el).attr('width', '...'); + $(el).attr('height', '...'); + } - let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id); + if (el.name === 'defs') { + $(el).remove(); + } + Object.keys(el.attribs).forEach((x) => { + if (x === 'class') { + $(el).removeAttr(x); + } + if (x === 'stroke') { + $(el).attr(x, 'currentColor'); + } + if (x === 'fill') { + $(el).attr(x, 'currentColor'); + } + }); + }); - if (ComponentName === 'TextStrikeThrough') { - ComponentName = 'TextStrikethrough'; - } - if (ComponentName === 'UnLink') { - ComponentName = 'Unlink'; + const svgString = $('svg') + .toString() + .replace( + 'aria-hidden="..."', + "aria-hidden=${hidden ? 'true' : 'false'}" + ) + .replace('width="..."', 'width="${width}"') + .replace('height="..."', 'height="${height}"') + .replace('aria-label="..."', 'aria-label="${title}"'); + + const iconElementName = `sp-icon-${Case.kebab(ComponentName)}`; + let otherVersionIconImport = `import { DefaultIcon as AlternateIcon } from '../DefaultIcon.js';`; + + // check if the icon is present in the other version + if (altIconList.includes(ComponentName)) { + const alternateTag = folder === 'icons' ? 'icons-s2' : 'icons'; + otherVersionIconImport = `import { ${ComponentName}Icon as AlternateIcon } from '../${alternateTag}/${id}.js';`; } - return ComponentName; -}); -const iconsV2NameList = iconsV2.map((i) => { - let id = path - .basename(i, '.svg') - .replace('S2_Icon_', '') - .replace('_20_N', '') - .replace('_22x20_N', ''); + return Promise.all([ + formatAndWrite( + path.join('src', folder, `${id}.ts`), + ` +import { tag as html, TemplateResult } from '../custom-tag.js'; +export { setCustomTemplateLiteralTag } from '../custom-tag.js'; +export const ${ComponentName}Icon = ({ +width = 24, +height = 24, +hidden = false, +title = '${Case.capital(id)}', +} = {}): string | TemplateResult => html\`${svgString}\`;` + ), + formatAndWrite( + path.join('src', 'elements', `Icon${id}.ts`), + ` +import { html, TemplateResult } from '@spectrum-web-components/base'; +import { IconBase } from '@spectrum-web-components/icon'; +import { setCustomTemplateLiteralTag } from '../custom-tag.js'; +import { ${ComponentName}Icon as CurrentIcon } from '../${folder}/${id}.js'; +${otherVersionIconImport} - if (id.search(/^Ad[A-Z]/) !== -1) { - id = id.replace(/^Ad/, ''); - id += 'Advert'; - } +/** + * @element ${iconElementName} + */ +export class Icon${ComponentName} extends IconBase { +protected override render(): TemplateResult { + setCustomTemplateLiteralTag(html); - if (id === 'UnLink') { - id = 'Unlink'; - } - if (id === 'TextStrikeThrough') { - id = 'TextStrikethrough'; + if(this.spectrumVersion === ${folder === 'icons' ? 1 : 2}){ + return CurrentIcon({ hidden: !this.label, title: this.label }) as TemplateResult; } + return AlternateIcon({ hidden: !this.label, title: this.label }) as TemplateResult; +} +} +` + ), + // Write the icon registration to a file + formatAndWrite( + path.join('icons', `${iconElementName}.ts`), + ` +import { Icon${ComponentName} } from '../src/elements/Icon${id}.js'; +import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; + +defineElement('${iconElementName}', Icon${ComponentName}); + +declare global { +interface HTMLElementTagNameMap { + '${iconElementName}': Icon${ComponentName}; +} +} +` + ), + ]).then(() => ({ + // Push the icon registration to the manifest + imports: `import '@spectrum-web-components/icons-ui/icons/${iconElementName}.js';`, + listing: `{ name: '${Case.sentence(ComponentName)}', tag: '<${iconElementName}>', story: (size: string): TemplateResult => html\`<${iconElementName} size=\$\{size\}>\` }`, + exports: `export {${ComponentName}Icon} from './${folder}/${id}.js';`, + })); +} - let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id); +async function buildIconSet(iconList, setName, altIconList) { + return Promise.all( + iconList.map((icon) => buildIcon(icon, setName, altIconList)) + ).then(async (results) => + formatAndWrite( + path.join('src', `${setName}.ts`), + ` +export { setCustomTemplateLiteralTag } from './custom-tag.js'; +${results.map((result) => result.exports).join('\n')}` + ).then(() => results) + ); +} - if (ComponentName === 'TextStrikeThrough') { - ComponentName = 'TextStrikethrough'; - } - if (ComponentName === 'UnLink') { - ComponentName = 'Unlink'; - } +async function main() { + // Start by creating the directories for the icons + await Promise.all( + ['src/icons', 'src/icons-s2', 'src/elements', 'icons'].map((dir) => { + const dirPath = path.join(rootDir, dir); + if (!fs.existsSync(dirPath)) { + fs.mkdirSync(dirPath, { recursive: true }); + } + }) + ); + + const iconsV1 = ( + await fg('**.svg', { + cwd: path.join(path.dirname(S1IconsPackageDir), 'medium'), + absolute: true, + }) + )?.sort(); + + const iconsV2 = ( + await fg('**.svg', { + cwd: path.join(path.dirname(S2IconsPackageDir), 'medium'), + absolute: true, + }) + )?.sort(); + + const v1Results = buildIconSet( + iconsV1, + 'icons', + iconsV2?.map((i) => { + const { ComponentName } = cleanFileName(i); + return ComponentName; + }) + ); + + const v2Results = buildIconSet( + iconsV2, + 'icons-s2', + iconsV1?.map((i) => { + const { ComponentName } = cleanFileName(i); + return ComponentName; + }) + ); + + const results = (await Promise.all([v1Results, v2Results]))?.flat(); + + // Write the icon manifest to a file + return formatAndWrite( + path.join('stories', 'icon-manifest.ts'), + ` +import { html, TemplateResult } from '@spectrum-web-components/base'; +${results.map((result) => result.imports).join('\n')} + +export const iconManifest = [ +${results.map((result) => result.listing).join(',\n')} +];` + ); +} - return ComponentName; +await main().catch((error) => { + console.error(error); + process.exit(1); }); - -await buildIcons(iconsV1, 'icons', iconsV2NameList); -await buildIcons(iconsV2, 'icons-s2', iconsV1NameList); - -const exportString = `\r\nexport { setCustomTemplateLiteralTag } from './custom-tag.js';\r\n`; -fs.appendFileSync( - path.join(rootDir, 'packages', 'icons-ui', 'src', 'icons.ts'), - exportString, - 'utf-8' -); - -fs.appendFileSync( - manifestPath, - `${manifestImports}${manifestListings}];\r\n`, - 'utf-8' -); diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index f367c05a436..22b2975356a 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -26,7 +26,9 @@ "./package.json": "./package.json" }, "scripts": { - "build": "node ./bin/build.js" + "build": "node ./bin/build.js", + "analyze": "yarn analyze:components --globs $INIT_CWD/icons/sp-*.ts $INIT_CWD/src/elements/[A-Z]*.ts --outdir packages/icons-ui", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", @@ -57,11 +59,9 @@ "devDependencies": { "@spectrum-css/ui-icons": "^1.1.2", "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10", - "case": "^1.6.1", - "cheerio": "^1.0.0-rc.2", + "case": "^1.6.3", + "cheerio": "^1.0.0", "fast-glob": "^3.3.3", - "fs": "^0.0.1-security", - "path": "^0.12.7", "prettier": "^3.5.3" }, "types": "./src/index.d.ts", diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index e957a6f9a15..0576a786967 100644 --- a/packages/icons-workflow/package.json +++ b/packages/icons-workflow/package.json @@ -27,7 +27,9 @@ }, "scripts": { "build": "node ./bin/build.js", - "build-icons-mapping": "node ./bin/build-icons-mapping.js" + "build-icons-mapping": "node ./bin/build-icons-mapping.js", + "analyze": "yarn analyze:components --globs $INIT_CWD/icons/sp-*.ts $INIT_CWD/src/elements/[A-Z]*.ts --outdir packages/icons-workflow", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", @@ -57,11 +59,9 @@ "devDependencies": { "@adobe/spectrum-css-workflow-icons": "1.7.0", "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@4.1.0", - "case": "^1.6.1", - "cheerio": "^1.0.0-rc.2", + "case": "^1.6.3", + "cheerio": "^1.0.0", "fast-glob": "^3.3.3", - "fs": "^0.0.1-security", - "path": "^0.12.7", "prettier": "^3.5.3" }, "types": "./src/index.d.ts", diff --git a/scripts/process-icons.js b/packages/icons/bin/build.js similarity index 54% rename from scripts/process-icons.js rename to packages/icons/bin/build.js index 6fc9adea6e9..37b0ba89e81 100644 --- a/scripts/process-icons.js +++ b/packages/icons/bin/build.js @@ -15,8 +15,10 @@ import path from 'path'; import fs from 'fs'; import { fileURLToPath } from 'url'; +import { createRequire } from 'module'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); const processIcon = (srcPath, fd) => { // get icon name from filename @@ -43,47 +45,44 @@ const processIcon = (srcPath, fd) => { ); }; -// where is spectrum-css? -// TODO: use resolve package to find node_modules -const spectrumIconsPath = path.resolve( - path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - 'ui-icons', - 'dist' - ) -); +/** + * @returns {Promise { - console.log(`processing scale ${scaleKey}...`); + return Promise.all( + ['medium', 'large'].map(async (scale) => { + const srcPath = path.join(path.dirname(spectrumIconsPath), scale); + const outputPath = path.join( + __dirname, + '..', + 'src', + `icons-${scale}.svg.ts` + ); - const srcPath = path.join(spectrumIconsPath, scaleKey); - const outputPath = path.join( - __dirname, - '..', - 'packages', - 'icons', - 'src', - `icons-${scaleKey}.svg.ts` - ); - let outputFd = fs.openSync(outputPath, 'w'); + const outputFd = fs.openSync(outputPath, 'w'); - fs.writeSync( - outputFd, - 'import { svg } from \'@spectrum-web-components/base\'; export default svg`' - ); + fs.writeSync( + outputFd, + 'import { svg } from \'@spectrum-web-components/base\';\n\nexport default svg`' + ); - fs.readdirSync(srcPath).forEach((iconFile) => { - const srcIconPath = path.join(srcPath, iconFile); - console.log(`\ticon ${iconFile}`); - processIcon(srcIconPath, outputFd); - }); + fs.readdirSync(srcPath).forEach((iconFile) => { + processIcon(path.join(srcPath, iconFile), outputFd); + }); - fs.writeSync(outputFd, '`;'); - fs.closeSync(outputFd); -}); + fs.writeSync(outputFd, '`;\n'); + fs.closeSync(outputFd); + }) + ).catch((error) => { + console.error('Error processing icons:', error); + }); +} -console.log('complete.'); +await main(); diff --git a/packages/icons/package.json b/packages/icons/package.json index 92119e09121..eeee9b3dfdf 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -55,12 +55,16 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "build": "node ./bin/build.js", + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/icons", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", "**/*.js", "**/*.js.map", + "!bin/", "custom-elements.json", "!stories/", "!test/" @@ -81,6 +85,9 @@ "@spectrum-web-components/base": "1.7.0", "@spectrum-web-components/iconset": "1.7.0" }, + "devDependencies": { + "@spectrum-css/ui-icons": "^1.1.2" + }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "deprecationNotice": "@spectrum-web-components/icons is deprecated and will be removed in an upcoming release.", diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts index c24942eab2d..74193d1af16 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -10,4 +10,5 @@ * governing permissions and limitations under the License. */ import { svg } from '@spectrum-web-components/base'; + export default svg``; diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index 4790ea4d69d..931d356b876 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -10,4 +10,5 @@ * governing permissions and limitations under the License. */ import { svg } from '@spectrum-web-components/base'; + export default svg``; diff --git a/packages/iconset/package.json b/packages/iconset/package.json index 1db67276895..083f6a482d6 100644 --- a/packages/iconset/package.json +++ b/packages/iconset/package.json @@ -43,7 +43,8 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index bbff4c80cb0..6c3cad3d544 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/illustrated-message", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index efd55b2564a..8d7b02871c3 100644 --- a/packages/infield-button/package.json +++ b/packages/infield-button/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/infield-button", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/link/package.json b/packages/link/package.json index 79644284e66..c1f11f297c0 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/link", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/menu/package.json b/packages/menu/package.json index 3875054a3cb..4fbec564da4 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -72,7 +72,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/menu", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index bebe33f6148..2a63eded829 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.stories.ts @@ -467,7 +467,7 @@ export const menuWithValueSlots = (): TemplateResult => { headersAndIcons.storyName = 'Dynamic MenuItems'; export const dynamicRemoval = (): TemplateResult => { - const removeItem = async function (event: FocusEvent) { + const removeItem = async function (event: FocusEvent): Promise { await (event.target as MenuItem)?.updateComplete; (event.target as MenuItem)?.remove(); }; diff --git a/packages/meter/package.json b/packages/meter/package.json index ea905be837a..3638c7f3c11 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -42,7 +42,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/meter", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/modal/package.json b/packages/modal/package.json index 863dd9fdc42..0ab21a6bcea 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -27,7 +27,8 @@ "./src/modal.css.js": "./src/modal.css.js" }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/number-field/package.json b/packages/number-field/package.json index e2790da346b..2cbf511dc73 100644 --- a/packages/number-field/package.json +++ b/packages/number-field/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/number-field", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/overlay/package.json b/packages/overlay/package.json index b0500e5a3a8..e039ddc2ba0 100644 --- a/packages/overlay/package.json +++ b/packages/overlay/package.json @@ -141,7 +141,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/overlay-trigger.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/overlay", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/overlay/src/OverlayStack.ts b/packages/overlay/src/OverlayStack.ts index 4c174840f20..0a1bff6c995 100644 --- a/packages/overlay/src/OverlayStack.ts +++ b/packages/overlay/src/OverlayStack.ts @@ -41,15 +41,6 @@ class OverlayStack { } private handleScroll = (event: Event): void => { - // Only handle document/body level scrolls - // Skip any component scrolls - if ( - event.target !== document && - event.target !== document.documentElement && - event.target !== document.body - ) { - return; - } // Update positions of all open overlays this.stack.forEach((overlay) => { if (overlay.open) { diff --git a/packages/overlay/src/fullSizePlugin.ts b/packages/overlay/src/fullSizePlugin.ts index 569f02df401..cb82fd42fc6 100644 --- a/packages/overlay/src/fullSizePlugin.ts +++ b/packages/overlay/src/fullSizePlugin.ts @@ -11,11 +11,14 @@ */ import { detectOverflow, + Middleware, MiddlewareArguments, MiddlewareReturn, } from '@floating-ui/dom'; -export const fullSize = (options: { padding: number } = { padding: 0 }) => ({ +export const fullSize = ( + options: { padding: number } = { padding: 0 } +): Middleware => ({ name: 'fullSize', async fn(middlewareArguments: MiddlewareArguments): Promise< MiddlewareReturn & { diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index 5ce8d897175..58289a2f53d 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/picker-button", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/picker/package.json b/packages/picker/package.json index e45dcdadd4e..12f643ca39f 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -65,7 +65,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/picker", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts index 11cff9310dd..31466e7ac47 100644 --- a/packages/picker/test/index.ts +++ b/packages/picker/test/index.ts @@ -12,7 +12,6 @@ import type { Picker } from '@spectrum-web-components/picker'; -// eslint-disable-next-line import/no-extraneous-dependencies import { aTimeout, elementUpdated, @@ -1514,76 +1513,6 @@ export function runPickerTests(): void { 'Waiting for picker to remain open after scroll' ); - expect(picker.open).to.be.true; - }); - it('ignores component scrolling but handles document scrolling', async () => { - const scrollSpy = spy(document, 'dispatchEvent'); - - const el = await fixture(html` -
-
-
Scrollable content
-
- - Option 1 - Option 2 - Option 3 - -
- `); - - const picker = el.querySelector('sp-picker') as Picker; - const scrollableContainer = el.querySelector( - '#scrollable-container' - ) as HTMLElement; - - await elementUpdated(picker); - - const opened = oneEvent(picker, 'sp-opened'); - picker.click(); - await opened; - - expect(picker.open).to.be.true; - - scrollSpy.resetHistory(); - - scrollableContainer.scrollTop = 50; - - await aTimeout(50); - - const componentScrollUpdateCount = scrollSpy - .getCalls() - .filter( - (call) => - call.args[0] instanceof CustomEvent && - call.args[0].type === 'sp-update-overlays' - ).length; - - scrollSpy.resetHistory(); - - if (document.scrollingElement) { - document.scrollingElement.scrollTop = 100; - } - - await aTimeout(50); - - const documentScrollUpdateCount = scrollSpy - .getCalls() - .filter( - (call) => - call.args[0] instanceof CustomEvent && - call.args[0].type === 'sp-update-overlays' - ).length; - - scrollSpy.restore(); - - expect(componentScrollUpdateCount).to.equal(0); - - expect(documentScrollUpdateCount).to.be.greaterThan(0); - expect(picker.open).to.be.true; }); }); diff --git a/packages/popover/package.json b/packages/popover/package.json index 2a88520313e..409f118c3b2 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/popover", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index 9ef3ee57269..898a7178502 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/progress-bar", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/progress-circle/package.json b/packages/progress-circle/package.json index e6f251c7e64..a2b0d9616f3 100644 --- a/packages/progress-circle/package.json +++ b/packages/progress-circle/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/progress-circle", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/radio/package.json b/packages/radio/package.json index 5d2c4cfe269..8bfcc3dc111 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -49,7 +49,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/radio", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/search/package.json b/packages/search/package.json index 5ff50df5068..6613c8818b4 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/search", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 6275013b989..3ec2fca2085 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -61,7 +61,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/sidenav", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/slider/package.json b/packages/slider/package.json index 3102557f6c8..2d7eb5a0f2f 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -57,7 +57,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/slider", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/split-view/package.json b/packages/split-view/package.json index 22800bce091..54c92d756a5 100644 --- a/packages/split-view/package.json +++ b/packages/split-view/package.json @@ -45,7 +45,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/split-view", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/status-light/package.json b/packages/status-light/package.json index 176ca1ca1aa..7f319ed6195 100644 --- a/packages/status-light/package.json +++ b/packages/status-light/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/status-light", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/swatch/package.json b/packages/swatch/package.json index 9d80922f896..58c6c47064a 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -51,7 +51,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/swatch", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/switch/package.json b/packages/switch/package.json index 03dad3944c7..79ae3e64a53 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -42,7 +42,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/switch", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/table/package.json b/packages/table/package.json index 38575d847f5..044d7065a52 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -104,7 +104,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/table", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 8ae120e88bc..9aa207073eb 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -70,7 +70,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/tabs", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/tags/package.json b/packages/tags/package.json index 2e8bbc4b688..947e9cc6e82 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -51,7 +51,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/tags", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/textfield/package.json b/packages/textfield/package.json index c636e848ddd..b8262f824ca 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/textfield", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index 38e06e5c0e4..365df20e433 100644 --- a/packages/thumbnail/package.json +++ b/packages/thumbnail/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/thumbnail", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/toast/package.json b/packages/toast/package.json index fceb2a79b04..1e74cd5dc7e 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/toast", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index cdc35a4401f..7d01c90cee6 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -45,7 +45,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/tooltip", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/top-nav/package.json b/packages/top-nav/package.json index 774e0733d72..87543eb13a2 100644 --- a/packages/top-nav/package.json +++ b/packages/top-nav/package.json @@ -48,7 +48,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/top-nav", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/tray/package.json b/packages/tray/package.json index 4dc88d76b0a..fb56e9ab4c0 100644 --- a/packages/tray/package.json +++ b/packages/tray/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/tray", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts index 901910c9380..8f0df36ec20 100644 --- a/packages/tray/src/Tray.ts +++ b/packages/tray/src/Tray.ts @@ -50,7 +50,7 @@ export class Tray extends SpectrumElement { private transitionPromise = Promise.resolve(); - private resolveTransitionPromise = () => {}; + private resolveTransitionPromise = (): void => {}; @query('.tray') private tray!: HTMLDivElement; diff --git a/packages/underlay/package.json b/packages/underlay/package.json index f3538e64755..ab9e0986d20 100644 --- a/packages/underlay/package.json +++ b/packages/underlay/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir packages/underlay", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/projects/css-custom-vars-viewer/package.json b/projects/css-custom-vars-viewer/package.json index f734d5cb059..d858fc7cc72 100644 --- a/projects/css-custom-vars-viewer/package.json +++ b/projects/css-custom-vars-viewer/package.json @@ -18,7 +18,7 @@ "yarn": ">=1.16.0" }, "scripts": { - "analyze": "cem analyze --litelement", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir projects/css-custom-vars-viewer", "build": "yarn parse-json && tsc && npm run analyze -- --exclude dist", "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore", "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore", diff --git a/projects/documentation/package.json b/projects/documentation/package.json index 9594a49f07a..b6fb9b4ae15 100644 --- a/projects/documentation/package.json +++ b/projects/documentation/package.json @@ -202,9 +202,6 @@ ], "clean": "if-file-deleted", "dependencies": [ - { - "script": "../css-custom-vars-viewer/:build" - }, { "script": "../../:build" } @@ -222,7 +219,6 @@ "../../tools/**/args.js", "../../tools/**/template.js", "scripts/gather-wcd-urls.js", - "scripts/gather-spectrum-urls.js", "scripts/gather-storybook-urls.js", "scripts/copy-component-docs.js", "scripts/component-template-parts.js" @@ -239,7 +235,7 @@ ], "dependencies": [ { - "script": "../../:docs:analyze", + "script": "../../:build:cem:docs", "cascade": false } ] diff --git a/projects/documentation/scripts/copy-component-docs.js b/projects/documentation/scripts/copy-component-docs.js index 8c6887ebf03..c4f4e45cba2 100644 --- a/projects/documentation/scripts/copy-component-docs.js +++ b/projects/documentation/scripts/copy-component-docs.js @@ -22,7 +22,6 @@ import { overviewDestinationTemplate, overviewPartialTemplate, } from './component-template-parts.js'; -import { gatherUrls } from './gather-spectrum-urls.js'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); @@ -291,7 +290,6 @@ export async function processREADME(mdPath) { } async function main() { - gatherUrls(); fs.mkdirSync(componentDestinationPath, { recursive: true }); fs.mkdirSync(toolDestinationPath, { recursive: true }); fs.mkdirSync(partialPath, { recursive: true }); diff --git a/projects/documentation/scripts/gather-spectrum-urls.js b/projects/documentation/scripts/gather-spectrum-urls.js deleted file mode 100644 index 3f50c40ea4f..00000000000 --- a/projects/documentation/scripts/gather-spectrum-urls.js +++ /dev/null @@ -1,80 +0,0 @@ -#!/usr/bin/env node - -/** - * Copyright 2025 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. - */ - -import fg from 'fast-glob'; -import fs from 'fs'; -import path from 'path'; -import { fileURLToPath } from 'url'; -import { gatherDemoURLs as gatherPackageNames } from './gather-wcd-urls.js'; -import { gatherStorybookURLs } from './gather-storybook-urls.js'; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const projectDir = path.resolve(__dirname, '..', '..', '..'); -const targetDir = path.resolve( - projectDir, - 'projects/documentation/content/_data' -); -const targetFile = path.resolve(targetDir, 'spectrumURLs.js'); - -const packageNameCorrections = { - tag: 'tags', -}; - -/** - * @todo Analyze and remove if not necessary. This currently returns nothing since Spectrum CSS does not use YAML files anymore. - * Also with removing Spectrum CSS as a dependency this will need to be updated or removed. - */ -export const gatherUrls = async () => { - const packageNames = await gatherPackageNames(); - const flatPackageNames = packageNames.map((name) => name.replace('-', '')); - await gatherStorybookURLs(packageNames); - const links = {}; - for (const readmePath of await fg([ - `../../node_modules/@spectrum-css/**/metadata/*.yml`, - ])) { - const cssPackageName = readmePath.split('/').at(-3); - const packageName = - packageNames[ - flatPackageNames.findIndex((name) => name === cssPackageName) - ] || - packageNameCorrections[cssPackageName] || - cssPackageName; - const readme = fs.readFileSync(readmePath, 'utf8'); - if (readme === null) { - return; - } - const [url] = - readme.match(/https:\/\/spectrum.adobe.com\/[^\n|\)]+/) || []; - if (url) { - links[packageName] = url; - } - } - - const data = `/** - * Copyright 2025 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. - */ - -export const urls = ${JSON.stringify(links, null, ' ')}; -`; - - fs.writeFileSync(targetFile, data, 'utf8'); -}; diff --git a/projects/story-decorator/package.json b/projects/story-decorator/package.json index 05240753c5b..77226b12cf3 100644 --- a/projects/story-decorator/package.json +++ b/projects/story-decorator/package.json @@ -52,7 +52,8 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir projects/story-decorator" }, "files": [ "**/*.d.ts", diff --git a/scripts/build-css.js b/scripts/build-css.js index 508f2a4139d..cc6487bd89f 100755 --- a/scripts/build-css.js +++ b/scripts/build-css.js @@ -12,28 +12,28 @@ * governing permissions and limitations under the License. */ +import path from 'path'; import fg from 'fast-glob'; import 'colors'; -import { processCSS } from './css-tools.js'; +import { log, processCSS } from './css-tools.js'; -async function buildCSS() { - const promises = []; - for (const cssPath of await fg([ - './packages/*/src/**/*.css', - './tools/*/src/*.css', - './tools/*/src/**/*.css', - ])) { - promises.push( - processCSS(cssPath) - .then(() => console.log(`Processed ${cssPath.yellow}`)) - .catch((error) => - console.error(`Error processing ${cssPath}`, error) - ) - ); - } - - return Promise.all(promises); +async function main({ cwd = process.env.INIT_CWD ?? process.cwd() } = {}) { + return fg(['src/**/*.css', 'src/*.css'], { cwd }).then((cssPaths) => + Promise.all( + cssPaths.map((cssPath) => + processCSS(path.join(cwd, cssPath)) + .then(() => console.log(cssPath.yellow + ' bundled')) + .catch((error) => { + log.fail(`Failed to process ${cssPath.yellow}`); + console.error(error); + }) + ) + ).catch((error) => { + log.fail('Failed to process CSS files'); + console.error(error); + }) + ); } -await buildCSS(); +main(); diff --git a/scripts/confirm-build.js b/scripts/confirm-build.js index 1116eb2eb08..f0109e91704 100644 --- a/scripts/confirm-build.js +++ b/scripts/confirm-build.js @@ -14,60 +14,70 @@ import fs from 'fs'; import path from 'path'; +import { fileURLToPath } from 'url'; import glob from 'fast-glob'; import 'colors'; -async function verifyCustomElementsJson() { - // Components that don't need their own custom-elements.json manifest - const customElementsIgnoreList = new Set([ - 'packages/modal', - 'packages/iconset', - 'packages/clear-button', - 'packages/close-button', - ]); +const __dirname = path.dirname(fileURLToPath(import.meta.url)); - const packages = glob.sync('packages/*/', { onlyDirectories: true }); - const checks = packages.map(async (pkg) => { - const pkgPath = pkg.replace(/\/$/, ''); - if (customElementsIgnoreList.has(pkgPath)) { - return; - } - const customElementsPath = path.join(pkg, 'custom-elements.json'); - if (!fs.existsSync(customElementsPath)) { - throw new Error(`Missing custom-elements.json in ${pkg}`); +async function verifyVersionJs() { + // If that file is missing, we can't verify the version + // (also something is probably broken...) + if (!fs.existsSync(path.join(__dirname, '..', 'tools/base/package.json'))) { + return Promise.reject( + `❌ Failed to find the ${'tools/base/package.json'.cyan} file` + ); + } + + const basePackageJson = await import('../tools/base/package.json', { + with: { type: 'json' }, + }).catch((error) => { + if (error.code === 'ERR_MODULE_NOT_FOUND') { + return Promise.reject( + `❌ Failed to find the ${'tools/base/package.json'.cyan} file` + ); } - }); - return Promise.all(checks); -} + return Promise.reject( + `❌ Failed to load the ${'tools/base/package.json'.cyan} file` + ); + }); -function verifyVersionJs() { - let basePackageJson; - try { - basePackageJson = JSON.parse( - fs.readFileSync('tools/base/package.json', 'utf8') + // If that file is missing, we can't verify the version + // (also something is probably broken...) + if ( + !fs.existsSync(path.join(__dirname, '..', 'tools/base/src/version.js')) + ) { + return Promise.reject( + `❌ Failed to find the ${'tools/base/src/version.js'.cyan} file` ); - } catch (error) { - throw new Error('Failed to read tools/base/package.json'); } - const versionJsPath = 'tools/base/src/version.js'; - if (!fs.existsSync(versionJsPath)) { - throw new Error('version.js file is missing'); - } + // Fetching our "source-of-truth" version (managed by genversion tool) + const { version } = await import('../tools/base/src/version.js').catch( + (error) => { + if (error.code === 'ERR_MODULE_NOT_FOUND') { + return Promise.reject( + `❌ Failed to find the ${'tools/base/src/version.js'.cyan} file` + ); + } - const versionContent = fs.readFileSync(versionJsPath, 'utf8'); - const versionMatch = versionContent.match(/version = ['"]([^'"]+)['"]/); + return Promise.reject( + `❌ Failed to load the ${'tools/base/src/version.js'.cyan} file` + ); + } + ); - if (!versionMatch) { - throw new Error('Could not find version in version.js'); + if (!version || typeof version !== 'string') { + return Promise.reject( + `❌ Invalid or missing version in ${'tools/base/src/version.js'.cyan}` + ); } - const versionJs = versionMatch[1]; - if (versionJs !== basePackageJson.version) { - throw new Error( - `Version mismatch: version.js (${versionJs}) does not match tools/base/package.json (${basePackageJson.version})` + if (version !== basePackageJson?.version) { + return Promise.reject( + `❌ Version mismatch: version.js (${version}) does not match ${'tools/base/package.json'.cyan} (${basePackageJson.version})` ); } } @@ -127,25 +137,45 @@ async function verifyBuildArtifacts() { } async function main() { - try { - console.log('Verifying custom-elements.json files...'.cyan); - await verifyCustomElementsJson(); - - console.log('Verifying version.js...'.cyan); - verifyVersionJs(); - - console.log('Verifying build artifacts...'.cyan); - await verifyBuildArtifacts(); - - console.log('All build artifacts verified successfully'.green.bold); - process.exit(0); - } catch (error) { - console.error( - 'Build artifact verification failed:'.red.bold, - error.message.red - ); - process.exit(1); - } + return Promise.all([ + verifyVersionJs() + .catch((error) => { + console.error( + 'Version.js verification failed:'.red.bold, + error.message + ); + process.exit(1); + }) + .then(() => { + console.log('✅ Version.js verified successfully'.green.bold); + }), + verifyBuildArtifacts() + .catch((error) => { + console.error( + 'Build artifact verification failed:'.red.bold, + error.message.red + ); + process.exit(1); + }) + .then(() => { + console.log( + '✅ Build artifacts verified successfully'.green.bold + ); + }), + ]) + .catch((error) => { + console.error( + 'An error occurred during verification:'.red.bold, + error.message.red + ); + process.exit(1); + }) + .then(() => { + console.log( + '✅ All verifications completed successfully'.green.bold + ); + process.exit(0); + }); } main(); diff --git a/scripts/create-git-tag.js b/scripts/create-git-tag.js deleted file mode 100644 index f4aa6f55b34..00000000000 --- a/scripts/create-git-tag.js +++ /dev/null @@ -1,33 +0,0 @@ -#!/usr/bin/env node - -/** - * Copyright 2025 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. - */ - -import { execSync } from 'child_process'; -import pkg from '@spectrum-web-components/button/package.json' with { type: 'json' }; - -const version = pkg.version; - -try { - // Check if the tag already exists - execSync(`git rev-parse v${version}`, { stdio: 'ignore' }); - console.log(`Tag v${version} already exists.`); -} catch (error) { - console.log(`Creating tag v${version}...`); - execSync(`git tag -a v${version} -m "Release v${version}"`, { - stdio: 'inherit', - }); - console.log(`Tag v${version} created successfully.`); - console.log(`Pushing tag v${version} to remote...`); - execSync(`git push origin v${version}`, { stdio: 'inherit' }); - console.log(`Tag v${version} pushed successfully.`); -} diff --git a/scripts/css-tools.js b/scripts/css-tools.js old mode 100644 new mode 100755 index 8eadce54eb9..dda5cbaf898 --- a/scripts/css-tools.js +++ b/scripts/css-tools.js @@ -14,20 +14,28 @@ import path from 'path'; import fs from 'fs'; -import { bundleAsync } from 'lightningcss'; import { fileURLToPath } from 'url'; import { createRequire } from 'node:module'; + +import fg from 'fast-glob'; +import { bundleAsync } from 'lightningcss'; +import eslint from 'eslint'; import { stripIndent } from 'common-tags'; import 'colors'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const fsp = fs.promises; const require = createRequire(import.meta.url); -const log = { +export const log = { success: (message) => console.log(`${'✓'.green} ${message}`), fail: (message) => console.log(`${'✗'.red} ${message}`), }; +const linter = new eslint.ESLint({ + fix: true, +}); + const getPackagePath = (packageName) => { let filepath; @@ -58,13 +66,6 @@ const wrapCSSResult = (content) => { `; }; -const licensePath = path.resolve(__dirname, '..', 'config', 'license.js'); -let header = ''; -if (fs.existsSync(licensePath)) { - header = fs.readFileSync(licensePath, 'utf8'); - header = header.replace('<%= YEAR %>', new Date().getFullYear()); -} - /** * Processes a CSS file using lightningcss, minifies it, and outputs a TypeScript module. * The output module includes license headers and wraps the CSS in a template literal. @@ -92,17 +93,22 @@ export const processCSS = async (cssPath) => { }, }, }) - .then(({ code }) => { - log.success(cssPath.yellow + ' bundled successfully'); + .then(async ({ code }) => { + // Before writing, lint the new ts file + const content = wrapCSSResult(code); + const lintResult = await linter.lintText(content); + + if (!lintResult?.[0]?.output || lintResult.errorCount > 0) { + if (lintResult.errorCount > 0) { + console.error(lintResult.results[0].messages); + } + + return Promise.reject(new Error('Linting failed')); + } - fs.writeFileSync( - `${cssPath}.ts`, - header + wrapCSSResult(code), - 'utf-8' - ); + return fsp.writeFile(`${cssPath}.ts`, lintResult[0].output); }) .catch((er) => { - log.fail(cssPath.yellow + ' failed to bundle'); console.error(er); }); }; diff --git a/scripts/define-element-plugin.js b/scripts/define-element-plugin.js index 001ff6d05e8..24e465deb13 100644 --- a/scripts/define-element-plugin.js +++ b/scripts/define-element-plugin.js @@ -14,6 +14,7 @@ import { resolveModuleOrPackageSpecifier } from '@custom-elements-manifest/analy /** * Resolve the use of `defineElement()` as if it were `customElements.define()` + * @type {import('@custom-elements-manifest/analyzer').Plugin} */ export default function defineElementPlugin() { return { diff --git a/scripts/get-changed-packages.js b/scripts/get-changed-packages.js new file mode 100644 index 00000000000..7bab231532e --- /dev/null +++ b/scripts/get-changed-packages.js @@ -0,0 +1,147 @@ +#!/usr/bin/env node + +/** + * Copyright 2025 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. + */ + +import { execSync } from 'child_process'; +import { existsSync, readdirSync, readFileSync } from 'fs'; +import path from 'path'; + +import yargs from 'yargs'; +import { hideBin } from 'yargs/helpers'; + +const { browser = 'chrome' } = yargs(hideBin(process.argv)).argv; + +/** + * Get package names from changeset files that don't exist in the main branch + * @returns {Array} Array of package names without the @spectrum-web-components/ prefix + */ +export const getChangedPackages = () => { + let changedPackages = []; + const changesetDir = '.changeset'; + + try { + // Check if .changeset directory exists + if (!existsSync(changesetDir)) { + console.log('No .changeset directory found'); + return []; + } + + // 1. Get list of changeset files in main branch + console.log('Fetching changeset files from main branch...'); + let mainChangesetFiles = []; + try { + // Make sure main branch is available + execSync('git fetch origin main:main', { stdio: 'pipe' }); + + // Get list of changeset files in main + const mainChangesetOutput = execSync( + 'git ls-tree -r --name-only main .changeset/', + { encoding: 'utf8' } + ); + + mainChangesetFiles = mainChangesetOutput + .split('\n') + .filter((file) => file.endsWith('.md')) + .map((file) => path.basename(file)); + + console.log( + `Found ${mainChangesetFiles.length} changeset files in main branch.` + ); + } catch (gitError) { + console.warn( + `Warning: Could not get changeset files from main: ${gitError.message}` + ); + mainChangesetFiles = []; + } + + // 2. Get all .md files in the current .changeset directory + const currentChangesetFiles = readdirSync(changesetDir).filter( + (file) => file.endsWith('.md') && file.toLowerCase() !== 'readme.md' + ); + + console.log( + `Found ${currentChangesetFiles.length} changeset files in current branch.` + ); + + // 3. Filter out files that exist in main branch + const newChangesetFiles = currentChangesetFiles.filter( + (file) => !mainChangesetFiles.includes(file) + ); + + console.log( + `Found ${newChangesetFiles.length} new changeset files not in main branch.` + ); + + // 4. Process each new changeset file + const packages = new Set(); + + newChangesetFiles.forEach((file) => { + const filePath = path.join(changesetDir, file); + try { + const content = readFileSync(filePath, 'utf8'); + + // Extract package names using regex + const packageRegex = + /'@spectrum-web-components\/([a-z0-9-]+)'\s*:\s*(major|minor|patch)/g; + let match; + + while ((match = packageRegex.exec(content)) !== null) { + const packageName = match[1]; + // Filter out icons packages and projects + if ( + !packageName.startsWith('icons-') && + !packageName.includes('projects') + ) { + packages.add(packageName); + } + } + } catch (readError) { + console.error(`Error reading ${file}:`, readError.message); + } + }); + + changedPackages = Array.from(packages); + console.log( + `Found ${changedPackages.length} changed packages in new changesets.` + ); + } catch (error) { + console.error('Error processing changeset files:', error.message); + } + + return changedPackages; +}; + +const testChangedPackages = () => { + const packages = getChangedPackages(); + + if (packages.length) { + console.log( + `Running tachometer on the following packages: ${packages.join( + ', ' + )}` + ); + + execSync('yarn build:tests'); + + execSync( + `yarn test:bench --browser ${browser} -j -p ${packages.join(' ')}`, + { + stdio: 'inherit', + } + ); + } else { + console.log('There are no packages with changes to test against.'); + } +}; + +testChangedPackages(); diff --git a/storybook/main.js b/storybook/main.js index 0ae17e1aed2..6a1af0c85d5 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -51,7 +51,7 @@ export default { ? { 'design-system': { title: 'Spectrum CSS', - url: 'https://opensource.adobe.com/spectrum-css/preview/', + url: 'https://opensource.adobe.com/spectrum-css/', expanded: false, // Optional, true by default }, } diff --git a/test/benchmark/helpers.ts b/test/benchmark/helpers.ts index 8350cd01f5c..0e7f7946cda 100644 --- a/test/benchmark/helpers.ts +++ b/test/benchmark/helpers.ts @@ -10,11 +10,11 @@ * governing permissions and limitations under the License. */ -import { html, LitElement, render, TemplateResult } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/scale-large.js'; +import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/theme-lightest.js'; +import { html, LitElement, render, TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; declare global { interface Window { @@ -158,12 +158,18 @@ export const measureFixtureCreation = async ( const results = await Promise.all( updates.map((el) => (el as LitElement).updateComplete) ); - updates = results.reduce((acc, result, index) => { - if (!result) { - acc.push(updates[index]); - } - return acc; - }, [] as Element[]); + updates = results.reduce( + (acc, result, index) => { + if (!result) { + acc.push( + updates[index] as Element & + Record<'updateComplete', unknown> + ); + } + return acc; + }, + [] as (Element & Record<'updateComplete', unknown>)[] + ); } } diff --git a/tools/base/package.json b/tools/base/package.json index 50faaaec18e..4c3b728c206 100644 --- a/tools/base/package.json +++ b/tools/base/package.json @@ -96,7 +96,8 @@ } }, "scripts": { - "test": "karma start --coverage" + "test": "karma start --coverage", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 010a4faf42d..d65dd5b543b 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -43,7 +43,8 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/grid/package.json b/tools/grid/package.json index c269938adce..b655906abfb 100644 --- a/tools/grid/package.json +++ b/tools/grid/package.json @@ -45,7 +45,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir tools/grid", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json index 0511314f14d..d2627cac2ee 100644 --- a/tools/opacity-checkerboard/package.json +++ b/tools/opacity-checkerboard/package.json @@ -28,7 +28,8 @@ "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js" }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/reactive-controllers/package.json b/tools/reactive-controllers/package.json index 32d201baa87..5882efeb47e 100644 --- a/tools/reactive-controllers/package.json +++ b/tools/reactive-controllers/package.json @@ -67,7 +67,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/src/[A-Z]*.ts --outdir tools/reactive-controllers", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/shared/package.json b/tools/shared/package.json index c54031398e0..501386608eb 100644 --- a/tools/shared/package.json +++ b/tools/shared/package.json @@ -83,7 +83,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/src/*.ts --outdir tools/shared", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/styles/package.json b/tools/styles/package.json index edc9ac2f308..71370e60245 100755 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -97,7 +97,8 @@ "./tokens-v2/spectrum/custom-light-vars.css": "./tokens-v2/light-vars.css" }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "build:css": "yarn build:components:css" }, "files": [ "**/*.css", diff --git a/tools/theme/package.json b/tools/theme/package.json index 20e85afefaf..845b1da9649 100755 --- a/tools/theme/package.json +++ b/tools/theme/package.json @@ -266,7 +266,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir tools/theme", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/tools/truncated/package.json b/tools/truncated/package.json index 5c568c82dce..504a8ba1128 100644 --- a/tools/truncated/package.json +++ b/tools/truncated/package.json @@ -41,7 +41,9 @@ } }, "scripts": { - "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1", + "analyze": "yarn analyze:components --globs $INIT_CWD/sp-*.ts $INIT_CWD/src/[A-Z]*.ts --outdir tools/truncated", + "build:css": "yarn build:components:css" }, "files": [ "**/*.d.ts", diff --git a/yarn.lock b/yarn.lock index 58af04b0e39..5ae1a3d5bfc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -272,7 +272,7 @@ __metadata: eslint-plugin-import: "npm:^2.26.0" eslint-plugin-jsonc: "npm:^2.20.1" eslint-plugin-lit-a11y: "npm:^2.2.2" - eslint-plugin-notice: "npm:^0.9.10" + eslint-plugin-notice: "npm:^1.0.0" eslint-plugin-prettier: "npm:^5.1.3" eslint-plugin-require-extensions: "npm:^0.1.3" eslint-plugin-storybook: "npm:^0.8.0" @@ -6840,11 +6840,9 @@ __metadata: "@spectrum-web-components/base": "npm:1.7.0" "@spectrum-web-components/icon": "npm:1.7.0" "@spectrum-web-components/iconset": "npm:1.7.0" - case: "npm:^1.6.1" - cheerio: "npm:^1.0.0-rc.2" + case: "npm:^1.6.3" + cheerio: "npm:^1.0.0" fast-glob: "npm:^3.3.3" - fs: "npm:^0.0.1-security" - path: "npm:^0.12.7" prettier: "npm:^3.5.3" languageName: unknown linkType: soft @@ -6857,11 +6855,9 @@ __metadata: "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@4.1.0" "@spectrum-web-components/base": "npm:1.7.0" "@spectrum-web-components/icon": "npm:1.7.0" - case: "npm:^1.6.1" - cheerio: "npm:^1.0.0-rc.2" + case: "npm:^1.6.3" + cheerio: "npm:^1.0.0" fast-glob: "npm:^3.3.3" - fs: "npm:^0.0.1-security" - path: "npm:^0.12.7" prettier: "npm:^3.5.3" languageName: unknown linkType: soft @@ -6870,6 +6866,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-web-components/icons@workspace:packages/icons" dependencies: + "@spectrum-css/ui-icons": "npm:^1.1.2" "@spectrum-web-components/base": "npm:1.7.0" "@spectrum-web-components/iconset": "npm:1.7.0" languageName: unknown @@ -12394,7 +12391,7 @@ __metadata: languageName: node linkType: hard -"case@npm:^1.6.1": +"case@npm:^1.6.3": version: 1.6.3 resolution: "case@npm:1.6.3" checksum: 10c0/43fcbb1dff1c4add94dd2bc98bd923d6616f10bff6959adf686d192c3db7d7ced35410761e1ac94cc4a1f5c41c86406ad79d390805539e421e8a77e553f67223 @@ -12596,18 +12593,22 @@ __metadata: languageName: node linkType: hard -"cheerio@npm:^1.0.0-rc.2": - version: 1.0.0-rc.12 - resolution: "cheerio@npm:1.0.0-rc.12" +"cheerio@npm:^1.0.0": + version: 1.0.0 + resolution: "cheerio@npm:1.0.0" dependencies: cheerio-select: "npm:^2.1.0" dom-serializer: "npm:^2.0.0" domhandler: "npm:^5.0.3" - domutils: "npm:^3.0.1" - htmlparser2: "npm:^8.0.1" - parse5: "npm:^7.0.0" + domutils: "npm:^3.1.0" + encoding-sniffer: "npm:^0.2.0" + htmlparser2: "npm:^9.1.0" + parse5: "npm:^7.1.2" parse5-htmlparser2-tree-adapter: "npm:^7.0.0" - checksum: 10c0/c85d2f2461e3f024345b78e0bb16ad8e41492356210470dd1e7d5a91391da9fcf6c0a7cb48a9ba8820330153f0cedb4d0a60c7af15d96ecdb3092299b9d9c0cc + parse5-parser-stream: "npm:^7.1.2" + undici: "npm:^6.19.5" + whatwg-mimetype: "npm:^4.0.0" + checksum: 10c0/d0e16925d9c36c879edfaef1c0244c866375a4c7b8d6ccd7ae0ad42da7d26263ea1a3c17b9a1aa5965918deeff2d40ac2e7223824f8e6eca972df3b81316a09f languageName: node linkType: hard @@ -15107,6 +15108,17 @@ __metadata: languageName: node linkType: hard +"domutils@npm:^3.1.0": + version: 3.2.2 + resolution: "domutils@npm:3.2.2" + dependencies: + dom-serializer: "npm:^2.0.0" + domelementtype: "npm:^2.3.0" + domhandler: "npm:^5.0.3" + checksum: 10c0/47938f473b987ea71cd59e59626eb8666d3aa8feba5266e45527f3b636c7883cca7e582d901531961f742c519d7514636b7973353b648762b2e3bedbf235fada + languageName: node + linkType: hard + "dot-case@npm:^3.0.4": version: 3.0.4 resolution: "dot-case@npm:3.0.4" @@ -15331,6 +15343,16 @@ __metadata: languageName: node linkType: hard +"encoding-sniffer@npm:^0.2.0": + version: 0.2.0 + resolution: "encoding-sniffer@npm:0.2.0" + dependencies: + iconv-lite: "npm:^0.6.3" + whatwg-encoding: "npm:^3.1.1" + checksum: 10c0/b312e0d67f339bec44e021e5210ee8ee90d7b8f9975eb2c79a36fd467eb07709e88dcf62ee20f62ee0d74a13874307d99557852a2de9b448f1e3fb991fc68257 + languageName: node + linkType: hard + "encoding@npm:^0.1.13": version: 0.1.13 resolution: "encoding@npm:0.1.13" @@ -15400,7 +15422,7 @@ __metadata: languageName: node linkType: hard -"entities@npm:^4.4.0": +"entities@npm:^4.4.0, entities@npm:^4.5.0": version: 4.5.0 resolution: "entities@npm:4.5.0" checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250 @@ -16661,16 +16683,16 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-notice@npm:^0.9.10": - version: 0.9.10 - resolution: "eslint-plugin-notice@npm:0.9.10" +"eslint-plugin-notice@npm:^1.0.0": + version: 1.0.0 + resolution: "eslint-plugin-notice@npm:1.0.0" dependencies: find-root: "npm:^1.1.0" - lodash: "npm:^4.17.15" + lodash: "npm:^4.17.21" metric-lcs: "npm:^0.1.2" peerDependencies: eslint: ">=3.0.0" - checksum: 10c0/05b45467299d050242045e75073429c6ab6e4826bc53aba9aa15f5736782d102a6ac15aa4f36c9f564d10c04dd3f7cf4e46cff4f2a555f1b4cb828f3d533852a + checksum: 10c0/40b162fea014efad8e24c38f58c84729cf0ce0ee7a21fdb79ccfde9c2f5d219e4e74e7729679b6321400b34cc80c51beb00a46ba03a7c13265ceab573262f9ea languageName: node linkType: hard @@ -18304,13 +18326,6 @@ __metadata: languageName: node linkType: hard -"fs@npm:^0.0.1-security": - version: 0.0.1-security - resolution: "fs@npm:0.0.1-security" - checksum: 10c0/e0c0b585ec6f7483d63d067215d9d6bb2e0dba5912060d32554c8e566a0e22ee65e4c2a2b0567476efbbfb47682554b4711d69cab49950d01f227a3dfa7d671a - languageName: node - linkType: hard - "fsevents@npm:2.3.2": version: 2.3.2 resolution: "fsevents@npm:2.3.2" @@ -19715,6 +19730,18 @@ __metadata: languageName: node linkType: hard +"htmlparser2@npm:^9.1.0": + version: 9.1.0 + resolution: "htmlparser2@npm:9.1.0" + dependencies: + domelementtype: "npm:^2.3.0" + domhandler: "npm:^5.0.3" + domutils: "npm:^3.1.0" + entities: "npm:^4.5.0" + checksum: 10c0/394f6323efc265bbc791d8c0d96bfe95984e0407565248521ab92e2dc7668e5ceeca7bc6ed18d408b9ee3b25032c5743368a4280d280332d782821d5d467ad8f + languageName: node + linkType: hard + "http-assert@npm:^1.3.0": version: 1.5.0 resolution: "http-assert@npm:1.5.0" @@ -19976,7 +20003,7 @@ __metadata: languageName: node linkType: hard -"iconv-lite@npm:0.6.3": +"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.3": version: 0.6.3 resolution: "iconv-lite@npm:0.6.3" dependencies: @@ -26429,6 +26456,15 @@ __metadata: languageName: node linkType: hard +"parse5-parser-stream@npm:^7.1.2": + version: 7.1.2 + resolution: "parse5-parser-stream@npm:7.1.2" + dependencies: + parse5: "npm:^7.0.0" + checksum: 10c0/e236c61000d38ecad369e725a48506b051cebad8abb00e6d4e8bff7aa85c183820fcb45db1559cc90955bdbbdbd665ea94c41259594e74566fff411478dc7fcb + languageName: node + linkType: hard + "parse5@npm:5.1.0": version: 5.1.0 resolution: "parse5@npm:5.1.0" @@ -26686,16 +26722,6 @@ __metadata: languageName: node linkType: hard -"path@npm:^0.12.7": - version: 0.12.7 - resolution: "path@npm:0.12.7" - dependencies: - process: "npm:^0.11.1" - util: "npm:^0.10.3" - checksum: 10c0/f795ce5438a988a590c7b6dfd450ec9baa1c391a8be4c2dea48baa6e0f5b199e56cd83b8c9ebf3991b81bea58236d2c32bdafe2c17a2e70c3a2e4c69891ade59 - languageName: node - linkType: hard - "pathe@npm:^1.1.1, pathe@npm:^1.1.2": version: 1.1.2 resolution: "pathe@npm:1.1.2" @@ -28103,7 +28129,7 @@ __metadata: languageName: node linkType: hard -"process@npm:^0.11.1, process@npm:^0.11.10": +"process@npm:^0.11.10": version: 0.11.10 resolution: "process@npm:0.11.10" checksum: 10c0/40c3ce4b7e6d4b8c3355479df77aeed46f81b279818ccdc500124e6a5ab882c0cc81ff7ea16384873a95a74c4570b01b120f287abbdd4c877931460eca6084b3 @@ -32941,6 +32967,13 @@ __metadata: languageName: node linkType: hard +"undici@npm:^6.19.5": + version: 6.21.3 + resolution: "undici@npm:6.21.3" + checksum: 10c0/294da109853fad7a6ef5a172ad0ca3fb3f1f60cf34703d062a5ec967daf69ad8c03b52e6d536c5cba3bb65615769bf08e5b30798915cbccdddaca01045173dda + languageName: node + linkType: hard + "unenv@npm:^1.9.0": version: 1.10.0 resolution: "unenv@npm:1.10.0" @@ -33574,15 +33607,6 @@ __metadata: languageName: node linkType: hard -"util@npm:^0.10.3": - version: 0.10.4 - resolution: "util@npm:0.10.4" - dependencies: - inherits: "npm:2.0.3" - checksum: 10c0/d29f6893e406b63b088ce9924da03201df89b31490d4d011f1c07a386ea4b3dbe907464c274023c237da470258e1805d806c7e4009a5974cd6b1d474b675852a - languageName: node - linkType: hard - "util@npm:^0.12.4, util@npm:^0.12.5": version: 0.12.5 resolution: "util@npm:0.12.5" @@ -34244,6 +34268,15 @@ __metadata: languageName: node linkType: hard +"whatwg-encoding@npm:^3.1.1": + version: 3.1.1 + resolution: "whatwg-encoding@npm:3.1.1" + dependencies: + iconv-lite: "npm:0.6.3" + checksum: 10c0/273b5f441c2f7fda3368a496c3009edbaa5e43b71b09728f90425e7f487e5cef9eb2b846a31bd760dd8077739c26faf6b5ca43a5f24033172b003b72cf61a93e + languageName: node + linkType: hard + "whatwg-fetch@npm:^3.5.0": version: 3.6.2 resolution: "whatwg-fetch@npm:3.6.2" @@ -34251,6 +34284,13 @@ __metadata: languageName: node linkType: hard +"whatwg-mimetype@npm:^4.0.0": + version: 4.0.0 + resolution: "whatwg-mimetype@npm:4.0.0" + checksum: 10c0/a773cdc8126b514d790bdae7052e8bf242970cebd84af62fb2f35a33411e78e981f6c0ab9ed1fe6ec5071b09d5340ac9178e05b52d35a9c4bcf558ba1b1551df + languageName: node + linkType: hard + "whatwg-url@npm:^11.0.0": version: 11.0.0 resolution: "whatwg-url@npm:11.0.0"