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 f6995810a02..08e9cc97484 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 @@ -225,18 +225,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) @@ -248,18 +239,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) @@ -372,7 +354,6 @@ jobs: regression_dir: << parameters.dir >> workflows: - version: 2 commitlint: jobs: - commitlint 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 f85a33242f7..00000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,88 +0,0 @@ -{ - "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": "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": ["tasks/*", "scripts/*"], - "rules": { - "no-console": ["off"] - } - } - ] -} diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e7a361d7b7f..8dd7724778a 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,5 +1 @@ -cem-react-wrapper.config.js @jianliao -scripts/cem-plugin-react-wrappers.js @jianliao -scripts/generate-icon-react-wrapper.js @jianliao -tasks/build-react.js @jianliao -* @adobe/swc-maintainers \ No newline at end of file +* @adobe/swc-maintainers diff --git a/tasks/build-preview-urls-comment.js b/.github/scripts/build-preview-urls-comment.js similarity index 100% rename from tasks/build-preview-urls-comment.js rename to .github/scripts/build-preview-urls-comment.js diff --git a/tasks/build-tachometer-comment.js b/.github/scripts/build-tachometer-comment.js similarity index 99% rename from tasks/build-tachometer-comment.js rename to .github/scripts/build-tachometer-comment.js index e111071a17b..c99442b9c12 100644 --- a/tasks/build-tachometer-comment.js +++ b/.github/scripts/build-tachometer-comment.js @@ -11,8 +11,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import fg from 'fast-glob'; import fs from 'fs'; + +import fg from 'fast-glob'; import prettyBytes from 'pretty-bytes'; const getTachometerResults = () => { @@ -156,7 +157,7 @@ export const buildTachometerComment = () => { const firefoxTables = results.firefox.map(buildTable); const chromeBody = chromeTables.length ? chromeTables.join(` - + `) : 'Currently, no packages are changed by this PR...'; const firefoxBody = firefoxTables.length diff --git a/tasks/comment-or-update.js b/.github/scripts/comment-or-update.js similarity index 100% rename from tasks/comment-or-update.js rename to .github/scripts/comment-or-update.js diff --git a/.github/workflows/browser-tests.yml b/.github/workflows/browser-tests.yml index 35db78e9bd1..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 @@ -93,7 +92,7 @@ jobs: uses: actions/github-script@v7 with: script: | - const { buildTachometerComment } = await import('${{ github.workspace }}/tasks/build-tachometer-comment.js'); + const { buildTachometerComment } = await import('${{ github.workspace }}/.github/scripts/build-tachometer-comment.js'); + const { commentOrUpdate } = await import('${{ github.workspace }}/.github/scripts/comment-or-update.js'); const body = buildTachometerComment(); - const { commentOrUpdate } = await import('${{ github.workspace }}/tasks/comment-or-update.js'); commentOrUpdate(github, context, '## Tachometer results', body); 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 89c2d8d15be..c34964e7991 100644 --- a/.github/workflows/preview-release.yml +++ b/.github/workflows/preview-release.yml @@ -30,6 +30,7 @@ jobs: yarn constraints --fix yarn version:update yarn install --refresh-lockfile + - name: Configure NPM for changeset publish env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} @@ -42,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/.github/workflows/urls-smoke-test.yml b/.github/workflows/urls-smoke-test.yml index db0c4d88f4e..6c787884cb5 100644 --- a/.github/workflows/urls-smoke-test.yml +++ b/.github/workflows/urls-smoke-test.yml @@ -39,10 +39,9 @@ jobs: uses: actions/github-script@v7 with: script: | - const { buildPreviewURLComment } = await import('${{ github.workspace }}/tasks/build-preview-urls-comment.js'); + const { buildPreviewURLComment, getDocPreviewURL } = await import('${{ github.workspace }}/.github/scripts/build-preview-urls-comment.js'); + const { commentOrUpdate } = await import('${{ github.workspace }}/.github/scripts/comment-or-update.js'); const body = buildPreviewURLComment(process.env.GITHUB_HEAD_REF); - const { getDocPreviewURL } = await import('${{ github.workspace }}/tasks/build-preview-urls-comment.js'); - const { commentOrUpdate } = await import('${{ github.workspace }}/tasks/comment-or-update.js'); commentOrUpdate(github, context, '## Branch preview', body); playwright-smoke-tests: diff --git a/.gitignore b/.gitignore index efba069794d..b545ae209b5 100644 --- a/.gitignore +++ b/.gitignore @@ -25,13 +25,15 @@ 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 packages/*/custom-elements.json packages/**/*.js -packages/**/spectrum-vars.json packages/**/*.js.map packages/**/*.d.ts packages/**/*.test-vrt.ts @@ -50,7 +52,6 @@ projects/**/*.d.ts tools/*/src/**/*.css.js tools/*/custom-elements.json -tools/**/spectrum-vars.json tools/**/*.js tools/**/*.js.map tools/**/*.d.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index df4a284abf3..0f80b0ec2ca 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,15 +1,10 @@ { "files.exclude": { "**/*.css.ts": { "when": "$(basename)" }, - "packages/*/src/spectrum-vars.json": true, - "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/PULL_REQUESTS.md b/PULL_REQUESTS.md index 7ed8ce641b9..66db842fbb6 100644 --- a/PULL_REQUESTS.md +++ b/PULL_REQUESTS.md @@ -102,7 +102,6 @@ Incomplete templates may delay the review process. - `breaking-change`: PR contains changes that break backward compatibility - `help-wanted`: Extra attention is needed on this PR - `on-hold`: PR needs more discussion. -- `Spectrum CSS`: An issue or pull request specific to the CSS being used by components. - `Component: [Name]`: PR effects this component - `auto-update`: Keep the base of the PR up-to-date with main automatically if there are no conflicts. diff --git a/RELEASE_PROCESS.md b/RELEASE_PROCESS.md index 5262f078338..00c76a0b7fe 100644 --- a/RELEASE_PROCESS.md +++ b/RELEASE_PROCESS.md @@ -2,22 +2,22 @@ Users with permissions in the `@spectrum-web-components` organization on NPM can follow these steps to create and publish a new version. -- [Prerequisites](#prerequisites) - - [Main successfully builds](#main-successfully-builds) - - [The correct version of Node is installed](#the-correct-version-of-node-is-installed) - - [Using Node Version Manager](#using-node-version-manager) - - [Manually checking](#manually-checking) - - [Troubleshooting](#troubleshooting) - - [Github Token is set up](#github-token-is-set-up) - - [Generate a Github token](#generate-a-github-token) - - [Logged in to NPM](#logged-in-to-npm) - - [NPM 2FA authenticator app](#npm-2fa-authenticator-app) -- [Releasing to NPM — the good stuff](#releasing-to-npm--the-good-stuff) - - [Troubleshooting](#troubleshooting-1) -- [Publishing the documentation site manually](#publishing-the-documentation-site-manually) - - [From GitHub](#from-github) - - [From the terminal](#from-the-terminal) - - [References](#references) +- [Prerequisites](#prerequisites) + - [Main successfully builds](#main-successfully-builds) + - [The correct version of Node is installed](#the-correct-version-of-node-is-installed) + - [Using Node Version Manager](#using-node-version-manager) + - [Manually checking](#manually-checking) + - [Troubleshooting](#troubleshooting) + - [Github Token is set up](#github-token-is-set-up) + - [Generate a Github token](#generate-a-github-token) + - [Logged in to NPM](#logged-in-to-npm) + - [NPM 2FA authenticator app](#npm-2fa-authenticator-app) +- [Releasing to NPM — the good stuff](#releasing-to-npm--the-good-stuff) + - [Troubleshooting](#troubleshooting-1) +- [Publishing the documentation site manually](#publishing-the-documentation-site-manually) + - [From GitHub](#from-github) + - [From the terminal](#from-the-terminal) + - [References](#references) ## Prerequisites @@ -94,13 +94,13 @@ If not logged in, run `npm login` to sign in to your account. 1. In your IDE search `': major` , `': minor`, `': patch` , based on the results in the order of this search list, the highest level takes precedence 1. exclude files: `.changeset/README.md` 4. Open your authenticator app to have it ready -5. Run`yarn changeset-publish` +5. Run`yarn publish:changeset` 6. Enter the one-time password from your authenticator for NPM. 1. Wait for a fresh password; a stale timer might cause issues. 7. After the SWC packages are released, the React Wrapper packages will be generated. 1. This multi-phase approach ensures that the wrapped packages share the same version as the standard packages. 8. Enter a new one-time password from your authenticator for NPM. -9. The `yarn changeset-publish` command will automatically commit the changes to main with a commit message of `chore: release new versions #publish` +9. The `yarn publish:changeset` command will automatically commit the changes to main with a commit message of `chore: release new versions #publish` 1. The docs site will publish automatically if the `#publish` string is included in the commit message and the check suite runs successfully. 10. Confirm the build on `main` passes @@ -108,8 +108,8 @@ If not logged in, run `npm login` to sign in to your account. If publishing fails with an error: -- Check the [list of tags](https://github.com/adobe/spectrum-web-components/tags) to see if new tags have been released for your publishing attempt. -- If they were, run `yarn changeset-publish` again. +- Check the [list of tags](https://github.com/adobe/spectrum-web-components/tags) to see if new tags have been released for your publishing attempt. +- If they were, run `yarn publish:changeset` again. --- diff --git a/cem-react-wrapper.config.js b/cem-react-wrapper.config.js index d5d46f396f6..17ff63cb247 100644 --- a/cem-react-wrapper.config.js +++ b/cem-react-wrapper.config.js @@ -10,12 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import reactWrapperPlugin from './scripts/cem-plugin-react-wrapper.js'; -import defineElementPlugin from './scripts/define-element-plugin.js'; import { readFileSync } from 'fs'; -import { resolve } from 'path'; +import { dirname, join } from 'path'; +import { fileURLToPath } from 'url'; + import yaml from 'js-yaml'; +import defineElementPlugin from './scripts/define-element-plugin.js'; +import reactWrapperPlugin from './scripts/cem-plugin-react-wrapper.js'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + export default { globs: ['**/sp-*.ts', '**/overlay-trigger.ts', '**/src/[A-Z]*.ts'], exclude: [ @@ -26,16 +31,15 @@ export default { 'node_modules/*', '**/*.dev.*', ], - outdir: '.', litelement: true, packagejson: false, plugins: [ defineElementPlugin(), reactWrapperPlugin({ exclude: ['StoryDecorator', 'TooltipOpenable'], - outDir: '../../react', + outDir: join(__dirname, 'react'), prettierConfig: yaml.load( - readFileSync(resolve('../../.prettierrc.yaml')) + readFileSync(join(__dirname, '.prettierrc.yaml')) ), }), ], diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index e1dbd6f5049..649b44e975b 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 3306505e04a..2109fc155f8 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -12,12 +12,12 @@ governing permissions and limitations under the License. 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 79534c9c82c..8c12c9e3c26 100644 --- a/package.json +++ b/package.json @@ -1,79 +1,71 @@ { "name": "@adobe/spectrum-web-components", + "homepage": "https://opensource.adobe.com/spectrum-web-components/", "version": "0.0.9", "private": true, - "description": "", + "description": "The official implementation of Spectrum CSS in Web Components.", "type": "module", + "license": "Apache-2.0", + "author": "Adobe", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, "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:component-inventory": "node ./tasks/build-component-inventory.js", - "build:confirm": "node ./tasks/confirm-build.js", "build:css": "wireit", - "build:css:watch": "wireit", - "build:react": "yarn gen-react-wrapper && node ./tasks/build-react.js && yarn 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-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", "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", "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables", - "create-git-tag": "node --no-warnings tasks/create-git-tag.js", - "custom-element-json": "node tasks/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", - "gen-react-wrapper": "node ./tasks/gen-react-wrapper.js", "icons": "wireit", "icons:ui": "wireit", "icons:workflow": "wireit", "lint": "git status --porcelain && git add . && lint-staged --allow-empty", - "new-package": "cd projects/templates && plop", - "postcustom-element-json": "node ./tasks/run-check-cem.js", - "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"", + "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", - "precustom-element-json": "node tasks/remove-custom-elements-json.js", - "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 verify-build-artifacts && yarn build:confirm", - "prestorybook": "wireit", - "prestorybook:build": "cem analyze --outdir storybook/", "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:", - "pretest:visual": "yarn build && yarn build", - "process-icons": "wireit", - "process-spectrum": "wireit", - "publish:react": "yarn changeset publish --no-git-tag --tag snapshot --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 ./tasks/test-changes.js", + "test:changed": "node ./scripts/test-changes.js", "test:ci": "yarn test:start", "test:create": "wireit", "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", @@ -81,14 +73,20 @@ "test:watch": "yarn test:watch:focus unit", "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --", "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --", - "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup", - "update:spectrum-css:cleanup": "yarn --ignore-scripts && yarn process-spectrum && yarn lint", - "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup", "verify-build-artifacts": "node ./scripts/verify-build-artifacts.js", "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/*", + "packages/*", + "projects/*", + "tools/*", + "react/*" + ], "devDependencies": { "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.5", @@ -104,7 +102,7 @@ "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.0.1", "@rollup/plugin-node-resolve": "^15.2.3", - "@sindresorhus/slugify": "^2.1.1", + "@sindresorhus/slugify": "^2.2.1", "@spectrum-web-components/eslint-plugin": "file:./linters/eslint", "@storybook/addon-a11y": "^8.6.12", "@storybook/addon-designs": "^8.2.1", @@ -145,6 +143,7 @@ "chromedriver": "^136.0.0", "colors": "^1.4.0", "common-tags": "^1.8.2", + "crypto": "^1.0.1", "custom-elements-manifest": "^2.0.0", "debounce": "^2.0.0", "deepmerge": "^4.2.2", @@ -154,12 +153,12 @@ "eslint-formatter-pretty": "^5.0.0", "eslint-plugin-import": "^2.26.0", "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", "express": "^4.16.4", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.3", "fs-extra": "^11.1.1", "geckodriver": "^4.3.0", "genversion": "^3.1.1", @@ -181,9 +180,9 @@ "pinst": "^3.0.0", "prettier": "^3.5.3", "prettier-plugin-package": "^1.3.0", - "pretty-bytes": "^6.1.1", + "pretty-bytes": "^7.0.0", "re-template-tag": "^2.0.1", - "rimraf": "^5.0.1", + "rimraf": "^6.0.1", "rollup": "^4.12.0", "sinon": "^17.0.1", "storybook": "^8.6.12", @@ -198,38 +197,128 @@ "wireit": "^0.14.3", "yargs": "^17.2.1" }, + "keywords": [ + "design-system", + "spectrum", + "adobe", + "adobe-spectrum", + "web components", + "web-components", + "lit-element", + "lit-html" + ], "wireit": { - "build:css:watch": { - "command": "node ./tasks/watch-css.js", - "service": true + "build": { + "dependencies": [ + "build:css", + "build:icons", + "build:ts", + "build:types" + ] }, - "build:css": { - "command": "node ./tasks/build-css.js", + "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": [ - "process-spectrum" + "build:ts" ], + "files": [ + "packages/**/*.ts", + "!packages/**/*.d.ts", + "!**/{stories,icons,elements}/**", + "tools/**/*.ts" + ], + "output": [ + "projects/documentation/custom-elements.json" + ] + }, + "build:css": { + "command": "yarn workspaces foreach --all --parallel --no-private --verbose run build:css", "files": [ "packages/**/*.css", "tools/**/*.css", - "tasks/build-css.js", - "tasks/css-tools.js" + "scripts/build-css.js" ], "output": [ "packages/**/*.css.ts", "tools/**/*.css.ts" + ] + }, + "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" ], - "clean": "if-file-deleted" + "output": [ + "packages/react/src/**/*.js", + "packages/react/src/**/*.js.map", + "packages/react/tsconfig-react-wrapper.json", + "packages/react/tsconfig.json" + ] }, - "build:ts:watch": { - "command": "node ./tasks/watch-packages.js", - "service": true + "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": { - "command": "node ./tasks/esbuild-packages.js", + "command": "node ./scripts/build-ts.js", "dependencies": [ - "process-icons", - "test:create", - "build:css" + "build:css", + "build:icons" ], "files": [ "packages/**/*.ts", @@ -243,8 +332,8 @@ "!projects/templates/**/*", "tools/**/*.ts", "!tools/**/*.d.ts", - "tasks/esbuild-packages.js", - "tasks/ts-tools.js", + "scripts/build-ts.js", + "scripts/ts-tools.js", "packages/**/exports.json", "tools/**/exports.json" ], @@ -274,15 +363,13 @@ "!test/visual/src/index.html", "!test/visual/wds-vrt.config.js", "!tools/base/src/version.js" - ], - "clean": "if-file-deleted" + ] }, "build:types": { "command": "tsc --build tsconfig-all.json --pretty", "dependencies": [ - "process-icons", - "test:create", - "build:css" + "build:css", + "build:icons" ], "files": [ "tsconfig-all.json", @@ -298,31 +385,45 @@ "tools/**/tsconfig.tsbuildinfo", "!**/local.d.ts", "!tools/base/src/version.d.ts" - ], - "clean": "if-file-deleted" - }, - "build:watch": { - "dependencies": [ - "build:css:watch", - "build:ts:watch" ] }, - "build": { + "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: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": [ "packages/icons-ui/bin/build.js", @@ -331,18 +432,16 @@ "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" - ], - "clean": "if-file-deleted" + ] }, - "icons:workflow": { + "build:icons:workflow": { + "clean": "if-file-deleted", "command": "yarn workspace @spectrum-web-components/icons-workflow build", "files": [ "!packages/icons-workflow/bin/build.js", @@ -358,100 +457,108 @@ "!packages/icons-workflow/src/custom-tag.ts", "!packages/icons-workflow/src/DefaultIcon.ts", "!packages/icons-workflow/bin/icons-mapping.json" + ] + }, + "storybook": { + "command": "storybook dev -p 8080 -c storybook", + "dependencies": [ + "build:cem", + "watch" ], - "clean": "if-file-deleted" + "service": true + }, + "storybook:build": { + "command": "storybook build -c storybook", + "env": { + "NODE_ENV": "production" + }, + "dependencies": [ + "build", + "build:cem:docs" + ] }, - "prestorybook": { - "command": "cem analyze --outdir storybook/", + "test:create": { + "clean": "if-file-deleted", + "command": "node test/visual/create.js", "files": [ - "packages/**/*.ts", - "tools/**/*.ts" + "packages/*/stories/*.stories.ts", + "tools/*/stories/*.stories.ts" ], "output": [ - "storybook/custom-elements.json" + "packages/*/test/*.test-vrt.ts", + "tools/*/test/*.test-vrt.ts" ] }, - "process-icons": { + "publish": { "dependencies": [ - "icons", - "icons:ui", - "icons:workflow" + "build", + "version", + "publish:tags", + "publish:react" ] }, - "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint", - "files": [ - "tasks/process-spectrum.js", - "packages/**/spectrum-config.js", - "tools/**/spectrum-config.js", - "node_modules/@spectrum-css/**/index-vars.css", - "scripts/generate-tokens.js", - "scripts/generate-tokens-wrapper.js", - "node_modules/@spectrum-css/**/*.css", - "scripts/spectrum-vars.js", - "tools/styles/package.json", - ".prettierrc.yaml", - ".stylelintrc.json" + "publish:tags": { + "dependencies": [ + "build", + "version" ], - "output": [ - "packages/*/src/spectrum-*.css", - "tools/*/src/spectrum-*.css", - "tools/styles/*.css", - "tools/styles/express/*.css", - "!tools/styles/scale-*.css", - "!tools/styles/theme-*.css", - "!tools/styles/express/scale-*.css", - "!tools/styles/express/theme-*.css" + "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" ], - "clean": false + "command": "sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"chore: commit React watch\" --no-verify" }, - "storybook": { - "command": "storybook dev -p 8080 -c storybook", - "service": true, + "publish:react:tag": { + "dependencies": [ + "publish:react:build" + ], + "command": "yarn changeset publish --no-git-tag --tag latest --no-push" + }, + "version": { "dependencies": [ - "build:watch", - "prestorybook" + "build" + ], + "command": "yarn changeset version && yarn lint:versions --fix && yarn install && git add ." + }, + "watch": { + "dependencies": [ + "watch:css", + "watch:ts" ] }, - "test:create": { - "command": "node test/visual/create.js", + "watch:css": { + "command": "node ./scripts/watch-css.js", + "dependencies": [ + "build:css" + ], "files": [ - "packages/*/stories/*.stories.ts", - "tools/*/stories/*.stories.ts" + "scripts/watch-css.js" ], - "output": [ - "packages/*/test/*.test-vrt.ts", - "tools/*/test/*.test-vrt.ts" + "service": true + }, + "watch:ts": { + "command": "node ./scripts/watch-packages.js", + "dependencies": [ + "build:ts" + ], + "files": [ + "scripts/watch-packages.js" ], - "clean": "if-file-deleted" + "service": true } }, - "workspaces": [ - "linters/*", - "packages/*", - "projects/*", - "tools/*", - "react/*" - ], "packageManager": "yarn@4.9.1", - "license": "Apache-2.0", - "author": "Adobe", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-web-components.git" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-web-components/issues" - }, - "keywords": [ - "design-system", - "spectrum", - "adobe", - "adobe-spectrum", - "web components", - "web-components", - "lit-element", - "lit-html" - ], - "homepage": "https://opensource.adobe.com/spectrum-web-components/" + "customElements": "custom-elements.json" } diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 32e66b32065..555e1779a86 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", @@ -80,9 +82,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/accordion": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/accordion/src/spectrum-config.js b/packages/accordion/src/spectrum-config.js deleted file mode 100644 index 57097ff6bfe..00000000000 --- a/packages/accordion/src/spectrum-config.js +++ /dev/null @@ -1,163 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Accordion'); -const converterItem = converterFor('spectrum-Accordion-item'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/accordion', - outPackage: 'accordion', - fileName: 'accordion', - excludeByComponents: [ - builder.class('spectrum-Accordion-item'), - builder.class('spectrum-Accordion-itemIndicator'), - builder.class('spectrum-Accordion-itemIconContainer'), - builder.class('spectrum-Accordion-itemHeading'), - builder.class('spectrum-Accordion-itemHeader'), - builder.class('spectrum-Accordion-itemContent'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-Accordion--compact', 'compact'], - ['spectrum-Accordion--spacious', 'spacious'], - ], - 'density' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Accordion--sizeS', 's'], - ['spectrum-Accordion--sizeL', 'l'], - ['spectrum-Accordion--sizeXL', 'xl'], - ], - 'size' - ), - ], - }, - { - inPackage: '@spectrum-css/accordion', - outPackage: 'accordion', - fileName: 'accordion-item', - excludeByComponents: [ - builder.class('spectrum-Accordion'), - builder.class('spectrum-Accordion--compact'), - builder.class('spectrum-Accordion--spacious'), - builder.class('spectrum-Accordion--sizeS'), - builder.class('spectrum-Accordion--sizeL'), - builder.class('spectrum-Accordion--sizeXL'), - ], - components: [ - converterItem.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToId( - 'spectrum-Accordion-itemHeading', - 'heading' - ), - converter.classToId('spectrum-Accordion-itemHeader', 'header'), - converter.classToId( - 'spectrum-Accordion-itemContent', - 'content' - ), - converter.classToClass( - 'spectrum-Accordion-itemIconContainer', - 'iconContainer' - ), - converter.classToClass( - 'spectrum-Accordion-itemIndicator', - 'indicator' - ), - { - find: builder.pseudoClass('first-of-type'), - replace: builder.pseudoClass('first-of-type'), - hoist: true, - }, - { - find: builder.pseudoClass('first-child'), - replace: builder.pseudoClass('first-child'), - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'first-of-type', - }, - ], - ], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'first-of-type', - }, - ], - ], - }, - hoist: true, - }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('hover'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.pseudoClass('focus'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('focus'), - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index b63318b7894..d7d9c876ba7 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/field-label": "1.6.0", "@spectrum-web-components/popover": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actionbar": "10.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/action-bar/src/spectrum-config.js b/packages/action-bar/src/spectrum-config.js deleted file mode 100644 index e853e02e8da..00000000000 --- a/packages/action-bar/src/spectrum-config.js +++ /dev/null @@ -1,48 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ActionBar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/actionbar', - outPackage: 'action-bar', - fileName: 'action-bar', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-ActionBar--flexible'), - converter.classToAttribute('spectrum-ActionBar--emphasized'), - converter.classToClass('spectrum-CloseButton', 'close-button'), - converter.classToClass('spectrum-ActionGroup', 'action-group'), - converter.classToClass('spectrum-FieldLabel', 'field-label'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionBar--sticky'], - ['spectrum-ActionBar--fixed'], - ], - 'variant' - ), - converter.classToId('spectrum-ActionBar-popover'), - ], - }, - ], -}; - -export default config; diff --git a/packages/action-button/package.json b/packages/action-button/package.json index f36b2cb8802..38864e635e2 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/icons-ui": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js deleted file mode 100644 index 829543400ea..00000000000 --- a/packages/action-button/src/spectrum-config.js +++ /dev/null @@ -1,270 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ActionButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/actionbutton', - outPackage: 'action-button', - fileName: 'action-button', - systemOverrides: true, - excludeByComponents: [ - { - type: 'type', - name: 'a', - }, - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-ActionButton--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToAttribute('is-selected', 'selected'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-active', 'active'), - converter.classToAttribute('spectrum-ActionButton--emphasized'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionButton--staticWhite', 'white'], - ['spectrum-ActionButton--staticBlack', 'black'], - ], - 'static-color' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ActionButton--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionButton--sizeXS', 'xs'], - ['spectrum-ActionButton--sizeS', 's'], - ['spectrum-ActionButton--sizeL', 'l'], - ['spectrum-ActionButton--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-ActionButton-hold', - 'hold-affordance' - ), - converter.classToClass( - 'spectrum-ActionButton-holdIcon', - 'hold-affordance' - ), - converter.classToId('spectrum-ActionButton-label'), - converter.classToSlotted('spectrum-ActionButton-icon', 'icon'), - { - find: [ - builder.class('spectrum-ActionButton-icon'), - builder.pseudoClass('only-child'), - ], - replace: [ - { - replace: builder.attribute('icon-only'), - hoist: false, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'attribute', - name: 'slot', - operation: { - operator: 'equal', - value: 'icon', - }, - }, - ], - }, - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionButton-icon'), - builder.combinator('+'), - builder.class('spectrum-ActionButton-label'), - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'name', - operation: { - operator: 'equal', - value: 'icon', - }, - }, - hoist: false, - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionButton-hold'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'dir', - operation: { - value: 'rtl', - operator: 'equal', - }, - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('hold-affordance'), - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-ActionButton--staticBlack', - }, - ], - [ - { - type: 'class', - name: 'spectrum-ActionButton--staticWhite', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - type: 'attribute', - name: 'static-color', - operation: { - operator: 'equal', - value: 'black', - }, - }, - ], - [ - { - type: 'attribute', - name: 'static-color', - operation: { - operator: 'equal', - value: 'white', - }, - }, - ], - ], - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/action-group/package.json b/packages/action-group/package.json index 9b9cada5f7d..e5b852c4dbb 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/reactive-controllers": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actiongroup": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/action-group/src/spectrum-config.js b/packages/action-group/src/spectrum-config.js deleted file mode 100644 index 42dce8fdc01..00000000000 --- a/packages/action-group/src/spectrum-config.js +++ /dev/null @@ -1,231 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ActionGroup'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/actiongroup', - outPackage: 'action-group', - fileName: 'action-group', - excludeByComponents: [ - builder.class('spectrum-ActionButton-label'), - builder.class('🤫'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-ActionGroup--vertical'), - converter.classToAttribute('spectrum-ActionGroup--compact'), - converter.classToAttribute('spectrum-ActionGroup--quiet'), - converter.classToAttribute('spectrum-ActionGroup--justified'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ActionGroup--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionGroup--sizeXS', 'xs'], - ['spectrum-ActionGroup--sizeS', 's'], - ['spectrum-ActionGroup--sizeL', 'l'], - ['spectrum-ActionGroup--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToSlotted('spectrum-ActionGroup-item'), - converter.notToAttribute('spectrum-ActionGroup--vertical'), - converter.notToAttribute('spectrum-ActionGroup--compact'), - converter.notToAttribute('spectrum-ActionGroup--quiet'), - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.class('is-selected'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.attribute('selected')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('hover')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('focus-visible'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.pseudoClass('focus-visible'), - ], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('last-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('last-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('first-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('first-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.combinator('+'), - builder.class('spectrum-ActionGroup-item'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.pseudoClass( - 'first-child' - ), - ], - ], - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-ActionGroup--vertical', - }, - ], - [ - { - type: 'class', - name: 'spectrum-ActionGroup--compact', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - type: 'attribute', - name: 'vertical', - operation: { - operator: 'equal', - value: 'true', - }, - }, - { - type: 'attribute', - name: 'compact', - operation: { - operator: 'equal', - value: 'true', - }, - }, - ], - ], - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index e5179b95c2b..c29dabcc954 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", @@ -74,9 +76,6 @@ "@spectrum-web-components/picker": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actionmenu": "7.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index e7b64b08093..44e128b95c7 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", @@ -68,9 +70,6 @@ "@spectrum-web-components/button": "1.6.0", "@spectrum-web-components/icons-workflow": "1.6.0" }, - "devDependencies": { - "@spectrum-css/alertbanner": "3.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/alert-banner/src/spectrum-config.js b/packages/alert-banner/src/spectrum-config.js deleted file mode 100644 index 5f2c2104c80..00000000000 --- a/packages/alert-banner/src/spectrum-config.js +++ /dev/null @@ -1,49 +0,0 @@ -/* -Copyright 2024 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-AlertBanner'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/alertbanner', - outPackage: 'alert-banner', - fileName: 'alert-banner', - systemOverrides: true, - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - ...converter.enumerateAttributes( - [ - ['spectrum-AlertBanner--info'], - ['spectrum-AlertBanner--negative'], - ], - 'variant' - ), - converter.classToClass('spectrum-AlertBanner-body'), - converter.classToClass('spectrum-AlertBanner-content'), - converter.classToClass('spectrum-AlertBanner-text'), - converter.classToSlotted('spectrum-Button', 'action'), - converter.classToClass('spectrum-AlertBanner-end'), - converter.classToClass('spectrum-AlertBanner-icon', 'type'), - ], - }, - ], -}; - -export default config; diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index 4d754c89e48..c165d9b04f1 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", @@ -72,9 +74,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/alertdialog": "4.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/alert-dialog/src/spectrum-config.js b/packages/alert-dialog/src/spectrum-config.js deleted file mode 100644 index f774c6a44f3..00000000000 --- a/packages/alert-dialog/src/spectrum-config.js +++ /dev/null @@ -1,52 +0,0 @@ -/* -Copyright 2023 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. -*/ -// @ts-check - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-AlertDialog'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/alertdialog', - outPackage: 'alert-dialog', - fileName: 'alert-dialog', - components: [ - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-AlertDialog--error'], - ['spectrum-AlertDialog--warning'], - ], - 'variant' - ), - converter.classToClass('spectrum-AlertDialog-header', 'header'), - converter.classToSlotted( - 'spectrum-AlertDialog-heading', - 'heading' - ), - converter.classToClass( - 'spectrum-AlertDialog-content', - 'content' - ), - converter.classToClass('spectrum-AlertDialog-grid', 'grid'), - converter.classToClass('spectrum-Icon', 'icon'), - ], - }, - ], -}; - -export default config; diff --git a/packages/asset/package.json b/packages/asset/package.json index f69fb6b7b4e..5d8057aa9ec 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", @@ -66,9 +68,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/asset": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/asset/src/spectrum-config.js b/packages/asset/src/spectrum-config.js deleted file mode 100644 index 8275554155a..00000000000 --- a/packages/asset/src/spectrum-config.js +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Asset'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/asset', - outPackage: 'asset', - fileName: 'asset', - components: [ - converter.classToHost(), - converter.classToSlotted('spectrum-Asset-image'), - converter.classToClass('spectrum-Asset-file'), - converter.classToClass('spectrum-Asset-folder'), - converter.classToClass('spectrum-Asset-folderBackground'), - converter.classToClass('spectrum-Asset-fileBackground'), - converter.classToClass('spectrum-Asset-fileOutline'), - converter.classToClass('spectrum-Asset-folderOutline'), - ], - }, - ], -}; - -export default config; diff --git a/packages/avatar/package.json b/packages/avatar/package.json index f243764b2cb..50c96cec7a4 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/avatar": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/avatar/src/spectrum-config.js b/packages/avatar/src/spectrum-config.js deleted file mode 100644 index 8de612bc2d7..00000000000 --- a/packages/avatar/src/spectrum-config.js +++ /dev/null @@ -1,52 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Avatar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/avatar', - outPackage: 'avatar', - fileName: 'avatar', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - converter.notToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-Avatar--size50', '50'], - ['spectrum-Avatar--size75', '75'], - ['spectrum-Avatar--size100', '100'], - ['spectrum-Avatar--size200', '200'], - ['spectrum-Avatar--size300', '300'], - ['spectrum-Avatar--size400', '400'], - ['spectrum-Avatar--size500', '500'], - ['spectrum-Avatar--size600', '600'], - ['spectrum-Avatar--size700', '700'], - ], - 'size' - ), - converter.classToClass('spectrum-Avatar-image'), - converter.classToClass('spectrum-Avatar-link'), - ], - }, - ], -}; - -export default config; diff --git a/packages/badge/package.json b/packages/badge/package.json index eeae849a8e2..b82af13506c 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/badge": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/badge/src/spectrum-config.js b/packages/badge/src/spectrum-config.js deleted file mode 100644 index f328de60f94..00000000000 --- a/packages/badge/src/spectrum-config.js +++ /dev/null @@ -1,149 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Badge'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/badge', - outPackage: 'badge', - fileName: 'badge', - excludeByComponents: [ - { - type: 'pseudo-class', - kind: 'hover', - }, - ], - components: [ - converter.classToHost(), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Badge--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Badge--sizeS', 's'], - ['spectrum-Badge--sizeL', 'l'], - ['spectrum-Badge--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - // semantic - ['spectrum-Badge--accent'], - ['spectrum-Badge--positive'], - ['spectrum-Badge--informative'], - ['spectrum-Badge--negative'], - ['spectrum-Badge--neutral'], - ['spectrum-Badge--notice'], - // non-semantic - ['spectrum-Badge--seafoam'], - ['spectrum-Badge--indigo'], - ['spectrum-Badge--purple'], - ['spectrum-Badge--fuchsia'], - ['spectrum-Badge--magenta'], - ['spectrum-Badge--yellow'], - ['spectrum-Badge--gray'], - ['spectrum-Badge--red'], - ['spectrum-Badge--orange'], - ['spectrum-Badge--chartreuse'], - ['spectrum-Badge--celery'], - ['spectrum-Badge--green'], - ['spectrum-Badge--cyan'], - ['spectrum-Badge--blue'], - ], - 'variant' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Badge--fixed-inline-start', 'inline-start'], - ['spectrum-Badge--fixed-inline-end', 'inline-end'], - ['spectrum-Badge--fixed-block-start', 'block-start'], - ['spectrum-Badge--fixed-block-end', 'block-end'], - ], - 'fixed' - ), - ...converter.enumerateAttributes( - [['spectrum-Badge--black-text', 'black']], - 'static-color' - ), - converter.classToClass('spectrum-Badge-label'), - converter.classToSlotted('spectrum-Badge-icon', 'icon'), - { - find: [ - { - type: 'class', - name: 'spectrum-Badge-icon--no-label', - }, - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'icon-only', - }, - hoist: false, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'universal', - }, - ], - }, - }, - ], - }, - { - find: [ - { - type: 'class', - name: 'spectrum-Badge-icon', - }, - { - type: 'combinator', - value: 'next-sibling', - }, - { - type: 'class', - name: 'spectrum-Badge-label', - }, - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'name', - operation: { - operator: 'equal', - value: 'icon', - }, - }, - hoist: false, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index bf042ee680b..e75cd3da78b 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", @@ -79,9 +81,6 @@ "@spectrum-web-components/link": "1.6.0", "@spectrum-web-components/menu": "1.6.0" }, - "devDependencies": { - "@spectrum-css/breadcrumb": "11.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/breadcrumbs/src/spectrum-config.js b/packages/breadcrumbs/src/spectrum-config.js deleted file mode 100644 index db4ab95f2fb..00000000000 --- a/packages/breadcrumbs/src/spectrum-config.js +++ /dev/null @@ -1,211 +0,0 @@ -/* -Copyright 2024 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Breadcrumbs'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/breadcrumb', - outPackage: 'breadcrumbs', - fileName: 'breadcrumbs', - hoistCustomPropertiesFrom: 'spectrum-Breadcrumbs', - excludeByComponents: [ - builder.class('spectrum-Breadcrumbs-itemSeparator'), - builder.class('spectrum-Breadcrumbs-itemLink'), - builder.class('spectrum-Breadcrumbs-item'), - ], - includeByWholeSelector: [ - /* .spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item */ - [ - builder.class('spectrum-Breadcrumbs--compact'), - builder.combinator(' '), - builder.class('spectrum-Breadcrumbs-item'), - ], - /* .spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type */ - [ - builder.class('spectrum-Breadcrumbs--compact'), - builder.combinator(' '), - builder.class('spectrum-Breadcrumbs-item'), - builder.pseudoClass('last-of-type'), - ], - ], - components: [ - converter.classToId('spectrum-Breadcrumbs', 'list'), - converter.classToAttribute('spectrum-Breadcrumbs--compact'), - { - find: [builder.class('spectrum-Breadcrumbs-item')], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-breadcrumb-item'), - ], - }, - }, - ], - }, - { - find: [builder.class('spectrum-Breadcrumbs--compact')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('compact')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.id('list'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Breadcrumbs-item'), - builder.pseudoClass('last-of-type'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('last-of-type')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - ], - }, - { - inPackage: '@spectrum-css/breadcrumb', - outPackage: 'breadcrumbs', - fileName: 'breadcrumbs-item', - excludeByComponents: [ - builder.class('spectrum-Breadcrumbs'), - builder.class('spectrum-Breadcrumbs--compact'), - builder.class('spectrum-Breadcrumbs--multiline'), - ], - components: [ - converter.classToHost('spectrum-Breadcrumbs-item'), - { - find: builder.pseudoClass('first-of-type'), - replace: builder.pseudoClass('first-of-type'), - hoist: true, - }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('hover'), - }, - ], - }, - { - find: [builder.pseudoClass('last-of-type')], - replace: [ - // :host(:not(.is-menu):last-of-type) - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-menu')]], - }, - hoist: true, - }, - { - replace: builder.pseudoClass('last-of-type'), - hoist: true, - }, - ], - hoist: true, - }, - converter.classToId( - 'spectrum-Breadcrumbs-itemSeparator', - 'separator' - ), - converter.classToId( - 'spectrum-Breadcrumbs-itemLink', - 'item-link' - ), - { - find: [builder.class('spectrum-ActionButton')], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.element('sp-action-menu')], - }, - }, - ], - }, - { - collapseSelector: true, - find: [ - builder.class('spectrum-ActionButton'), - builder.pseudoClass('disabled'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-action-menu'), - builder.attribute('disabled'), - ], - }, - }, - ], - }, - // :host([href]) -> #item-link[href] - { - hoist: false, - find: builder.attribute('href'), - replace: builder.attribute('href'), - }, - // :host([tabindex="0"]) -> #item-link[tabindex="0"] - { - hoist: false, - find: builder.attribute('tabindex'), - replace: builder.attribute('tabindex'), - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/button-group/package.json b/packages/button-group/package.json index afaacdb36cb..82ccf316359 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/button": "1.6.0" }, - "devDependencies": { - "@spectrum-css/buttongroup": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/button-group/src/spectrum-config.js b/packages/button-group/src/spectrum-config.js deleted file mode 100644 index c9b0f65b1e0..00000000000 --- a/packages/button-group/src/spectrum-config.js +++ /dev/null @@ -1,46 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ButtonGroup'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/buttongroup', - outPackage: 'button-group', - fileName: 'button-group', - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-ButtonGroup--vertical'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ButtonGroup--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ButtonGroup--sizeS', 's'], - ['spectrum-ButtonGroup--sizeL', 'l'], - ['spectrum-ButtonGroup--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToSlotted('spectrum-ButtonGroup-item'), - ], - }, - ], -}; - -export default config; diff --git a/packages/button/package.json b/packages/button/package.json index 95dca29f10c..6e22980a7a1 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", @@ -98,9 +100,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/button": "14.1.6" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js deleted file mode 100644 index 51482b40260..00000000000 --- a/packages/button/src/spectrum-config.js +++ /dev/null @@ -1,234 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Button'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/button', - outPackage: 'button', - fileName: 'button', - systemOverrides: true, - excludeByComponents: [ - builder.element('a'), - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - excludeByWholeSelector: [ - // Exclude content hiding selectors when `pending` - //.spectrum-Button[pending] .spectrum-Icon - [ - builder.class('spectrum-Button'), - builder.attribute('pending'), - builder.combinator(' '), - builder.class('spectrum-Icon'), - ], - //.spectrum-Button[pending] .spectrum-Button-label - [ - builder.class('spectrum-Button'), - builder.attribute('pending'), - builder.combinator(' '), - builder.class('spectrum-Button-label'), - ], - //.spectrum-Button.is-pending .spectrum-Icon - [ - builder.class('spectrum-Button'), - builder.class('is-pending'), - builder.combinator(' '), - builder.class('spectrum-Icon'), - ], - //.spectrum-Button.is-pending .spectrum-Button-label - [ - builder.class('spectrum-Button'), - builder.class('is-pending'), - builder.combinator(' '), - builder.class('spectrum-Button-label'), - ], - ], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Button--quiet'), - converter.classToAttribute('spectrum-Button--emphasized'), - converter.classToAttribute( - 'spectrum-Button--noWrap', - 'no-wrap' - ), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-pending', 'pending'), - converter.pseudoToAttribute('disabled', 'disabled'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute( - 'spectrum-Button--iconOnly', - 'icon-only' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Button--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--sizeS', 's'], - ['spectrum-Button--sizeL', 'l'], - ['spectrum-Button--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--accent'], - ['spectrum-Button--primary'], - ['spectrum-Button--secondary'], - ['spectrum-Button--negative'], - ], - 'variant' - ), - ...converter.enumerateAttributes( - [['spectrum-Button--fill'], ['spectrum-Button--outline']], - 'treatment' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--staticWhite', 'white'], - ['spectrum-Button--staticBlack', 'black'], - ], - 'static-color' - ), - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-Button--secondary', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - name: 'variant', - type: 'attribute', - operation: { - operator: 'equal', - value: 'secondary', - }, - }, - ], - ], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-Button--outline', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - name: 'treatment', - type: 'attribute', - operation: { - operator: 'equal', - value: 'outline', - }, - }, - ], - ], - }, - hoist: true, - }, - converter.classToId('spectrum-Button-label'), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - find: [ - builder.class('spectrum-Icon'), - builder.combinator('+'), - builder.class('spectrum-Button-label'), - ], - replace: [ - { - replace: builder.attribute('name', 'icon', 'equal'), - hoist: false, - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - hoist: false, - find: builder.pseudoClass('empty'), - replace: builder.attribute('hidden'), - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/card/package.json b/packages/card/package.json index 79d1e1ad3a7..9899b52c7db 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", @@ -73,9 +75,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/styles": "1.6.0" }, - "devDependencies": { - "@spectrum-css/card": "11.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/card/src/spectrum-config.js b/packages/card/src/spectrum-config.js deleted file mode 100644 index 47f56f0ff8f..00000000000 --- a/packages/card/src/spectrum-config.js +++ /dev/null @@ -1,74 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Card'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/card', - outPackage: 'card', - fileName: 'card', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-Card-body'), - converter.classToClass('spectrum-Card-header'), - converter.classToClass('spectrum-Card-title'), - converter.classToClass('spectrum-Card-subtitle'), - converter.classToClass('spectrum-Card-content'), - converter.classToClass( - 'spectrum-Card-quickActions', - 'checkbox-toggle' - ), - converter.classToClass('spectrum-Card-actions'), - converter.classToClass( - 'spectrum-Card-actionButton', - 'action-button' - ), - converter.classToClass('spectrum-Checkbox', 'checkbox'), - ...converter.enumerateAttributes( - [['spectrum-Card--quiet'], ['spectrum-Card--gallery']], - 'variant' - ), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-drop-target', 'drop-target'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Card--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Card--sizeS', 's'], - ['spectrum-Card--sizeL', 'l'], - ['spectrum-Card--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToAttribute('spectrum-Card--horizontal'), - converter.classToId('spectrum-Card-coverPhoto', 'cover-photo'), - converter.classToId('spectrum-Card-preview'), - converter.classToSlotted('spectrum-Card-footer', 'footer'), - converter.classToSlotted( - 'spectrum-Card-description', - 'description' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index a99a72898bd..d0434cfb227 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", @@ -77,9 +79,6 @@ "@spectrum-web-components/icons-ui": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/checkbox": "10.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/checkbox/src/spectrum-config.js b/packages/checkbox/src/spectrum-config.js deleted file mode 100644 index 5dfeb335dd2..00000000000 --- a/packages/checkbox/src/spectrum-config.js +++ /dev/null @@ -1,111 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Checkbox'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/checkbox', - outPackage: 'checkbox', - fileName: 'checkbox', - components: [ - converter.classToHost(), - converter.classToAttribute('is-indeterminate', 'indeterminate'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-readOnly', 'readonly'), - converter.classToAttribute('spectrum-Checkbox--emphasized'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Checkbox--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Checkbox--sizeS', 's'], - ['spectrum-Checkbox--sizeL', 'l'], - ['spectrum-Checkbox--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Checkbox-input'), - converter.classToId('spectrum-Checkbox-box'), - converter.classToId('spectrum-Checkbox-checkmark'), - converter.classToId('spectrum-Checkbox-partialCheckmark'), - converter.classToId('spectrum-Checkbox-label'), - { - find: [ - { - type: 'class', - name: 'focus-ring', - }, - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - hoist: false, - }, - ], - }, - { - find: [ - { - type: 'class', - name: 'is-invalid', - }, - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'invalid', - }, - emphasize: true, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index b56ab802a8d..7ee52eeacba 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", @@ -51,9 +52,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/clearbutton": "7.0.0-s2-foundations.16" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/clear-button/src/spectrum-config.js b/packages/clear-button/src/spectrum-config.js deleted file mode 100644 index 26cbd0dc3ec..00000000000 --- a/packages/clear-button/src/spectrum-config.js +++ /dev/null @@ -1,90 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ClearButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/clearbutton', - outPackage: 'clear-button', - fileName: 'clear-button', - components: [ - converter.classToHost(), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-ClearButton--cta'], - ['spectrum-ClearButton--primary'], - ['spectrum-ClearButton--secondary'], - ['spectrum-ClearButton--overBackground'], - ['spectrum-ClearButton--warning', 'negative'], - ], - 'variant' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ClearButton--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ClearButton--sizeS', 's'], - ['spectrum-ClearButton--sizeL', 'l'], - ['spectrum-ClearButton--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-Icon', 'icon'), - converter.classToClass('spectrum-ClearButton-fill'), - ], - excludeByComponents: [ - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/close-button/package.json b/packages/close-button/package.json index 35e8dde7d53..22ebbfe3735 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", @@ -51,9 +52,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/closebutton": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/close-button/src/spectrum-config.js b/packages/close-button/src/spectrum-config.js deleted file mode 100644 index 6943961c745..00000000000 --- a/packages/close-button/src/spectrum-config.js +++ /dev/null @@ -1,126 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-CloseButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/closebutton', - outPackage: 'close-button', - fileName: 'close-button', - components: [ - converter.classToHost(), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-keyboardFocused', 'focused'), - ...converter.enumerateAttributes( - [ - ['spectrum-CloseButton--staticWhite', 'white'], - ['spectrum-CloseButton--staticBlack', 'black'], - ], - 'static-color' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-CloseButton--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-CloseButton--sizeS', 's'], - ['spectrum-CloseButton--sizeL', 'l'], - ['spectrum-CloseButton--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-CloseButton-UIIcon', 'icon'), - { - hoist: true, - find: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - replace: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - name: 'disabled', - type: 'attribute', - }, - ], - ], - }, - hoist: true, - }, - ], - excludeByComponents: [ - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index 901831c4513..8a5ca33988e 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", @@ -87,10 +89,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/coachindicator": "3.0.0-s2-foundations.16", - "@spectrum-css/coachmark": "8.0.0-s2-foundations.17" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/coachmark/src/spectrum-config.js b/packages/coachmark/src/spectrum-config.js deleted file mode 100644 index 684edbfe357..00000000000 --- a/packages/coachmark/src/spectrum-config.js +++ /dev/null @@ -1,69 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-CoachMark'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/coachindicator', - outPackage: 'coachmark', - fileName: 'coach-indicator', - components: [ - converter.classToHost('spectrum-CoachIndicator'), - converter.classToClass('spectrum-CoachIndicator-ring', 'ring'), - converter.classToAttribute( - 'spectrum-CoachIndicator--quiet', - 'quiet' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-CoachIndicator--dark', 'black'], - ['spectrum-CoachIndicator--light', 'white'], - ], - 'static-color' - ), - ], - }, - { - inPackage: '@spectrum-css/coachmark', - outPackage: 'coachmark', - fileName: 'coachmark', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-CoachMark-ring'), - converter.classToClass('spectrum-CoachMark-buttongroup'), - converter.classToClass( - 'spectrum-CoachMark-buttongroup--mobile', - 'buttongroup-mobile' - ), - converter.classToClass('spectrum-CoachMark-menu'), - converter.classToClass('spectrum-CoachMark-image-wrapper'), - converter.classToClass('spectrum-CoachMark-image'), - converter.classToClass('spectrum-CoachMark-header'), - converter.classToClass('spectrum-CoachMark-content'), - converter.classToClass('spectrum-CoachMark-footer'), - converter.classToClass('spectrum-CoachMark-action-menu'), - converter.classToClass('spectrum-CoachMark-title'), - converter.classToClass('spectrum-CoachMark-step'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-area/package.json b/packages/color-area/package.json index a25f50c77de..8811942a64e 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", @@ -74,9 +76,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorarea": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-area/src/spectrum-config.js b/packages/color-area/src/spectrum-config.js deleted file mode 100644 index 1846d877aa6..00000000000 --- a/packages/color-area/src/spectrum-config.js +++ /dev/null @@ -1,45 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorArea'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorarea', - outPackage: 'color-area', - fileName: 'color-area', - excludeByComponents: [ - { - type: 'class', - name: 'spectrum-ColorHandle-color', - }, - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToClass('spectrum-ColorArea-slider'), - converter.classToClass('spectrum-ColorArea-handle'), - converter.classToClass('spectrum-ColorArea-gradient'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-field/package.json b/packages/color-field/package.json index 96488c13539..6051bda6eb4 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 aa8d78fd22c..e8c5c75680b 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", @@ -68,9 +70,6 @@ "@spectrum-web-components/color-loupe": "1.6.0", "@spectrum-web-components/opacity-checkerboard": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorhandle": "10.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-handle/src/spectrum-config.js b/packages/color-handle/src/spectrum-config.js deleted file mode 100644 index e64dbf6ed28..00000000000 --- a/packages/color-handle/src/spectrum-config.js +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorHandle'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorhandle', - outPackage: 'color-handle', - fileName: 'color-handle', - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToClass('spectrum-ColorHandle-inner'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index 46c1e9ea290..6718ab60e4f 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/opacity-checkerboard": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorloupe": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-loupe/src/spectrum-config.js b/packages/color-loupe/src/spectrum-config.js deleted file mode 100644 index a420afa4501..00000000000 --- a/packages/color-loupe/src/spectrum-config.js +++ /dev/null @@ -1,43 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorLoupe'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorloupe', - outPackage: 'color-loupe', - fileName: 'color-loupe', - excludeByComponents: [ - { - type: 'class', - name: '🤫', - }, - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToClass('spectrum-ColorLoupe-outer'), - converter.classToClass('spectrum-ColorLoupe-inner'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index a8adbeac2c5..38353ce3318 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", @@ -74,9 +76,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorslider": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-slider/src/spectrum-config.js b/packages/color-slider/src/spectrum-config.js deleted file mode 100644 index 7ecbdb57996..00000000000 --- a/packages/color-slider/src/spectrum-config.js +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorSlider'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorslider', - outPackage: 'color-slider', - fileName: 'color-slider', - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('spectrum-ColorSlider--vertical'), - converter.classToClass('spectrum-ColorSlider-checkerboard'), - converter.classToClass('spectrum-ColorSlider-gradient'), - converter.classToClass('spectrum-ColorSlider-slider'), - converter.classToClass('spectrum-ColorSlider-handle'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index 75a3db8b5ee..dbcdcd8a1d7 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", @@ -73,9 +75,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorwheel": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-wheel/src/spectrum-config.js b/packages/color-wheel/src/spectrum-config.js deleted file mode 100644 index 234c01f54e1..00000000000 --- a/packages/color-wheel/src/spectrum-config.js +++ /dev/null @@ -1,59 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorWheel'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorwheel', - outPackage: 'color-wheel', - fileName: 'color-wheel', - excludeByComponents: [ - builder.class('🤫'), - builder.class('spectrum-ColorWheel-ColorArea-handle'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-dragged', 'dragged'), - converter.classToClass('spectrum-ColorWheel-handle'), - converter.classToClass('spectrum-ColorWheel-slider'), - converter.classToClass('spectrum-ColorWheel-wheel'), - converter.classToClass('spectrum-ColorWheel-innerCircle'), - converter.classToClass('spectrum-ColorWheel-outerCircle'), - converter.classToClass('spectrum-ColorWheel-segment'), - converter.classToClass('spectrum-ColorWheel-border'), - converter.classToClass( - 'spectrum-ColorWheel-colorarea-container' - ), - converter.classToClass('spectrum-ColorWheel-inner'), - converter.classToSlotted( - 'spectrum-ColorWheel-gradient', - 'gradient' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 2904f53d5c5..d7864437179 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", @@ -73,11 +75,9 @@ "@spectrum-web-components/picker-button": "1.6.0", "@spectrum-web-components/popover": "1.6.0", "@spectrum-web-components/progress-circle": "1.6.0", + "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/textfield": "1.6.0" }, - "devDependencies": { - "@spectrum-css/combobox": "4.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts index b29542640a6..0062f7fd75f 100644 --- a/packages/combobox/src/Combobox.ts +++ b/packages/combobox/src/Combobox.ts @@ -585,11 +585,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/combobox/src/spectrum-config.js b/packages/combobox/src/spectrum-config.js deleted file mode 100644 index 976996abd04..00000000000 --- a/packages/combobox/src/spectrum-config.js +++ /dev/null @@ -1,156 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Combobox'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/combobox', - outPackage: 'combobox', - fileName: 'combobox', - components: [ - converter.classToHost(), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Combobox--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Combobox--sizeS', 's'], - ['spectrum-Combobox--sizeL', 'l'], - ['spectrum-Combobox--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToAttribute('spectrum-Combobox--quiet'), - converter.classToClass('spectrum-Combobox-progress-circle'), - converter.classToClass('spectrum-Combobox-button'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-loading', 'pending'), - converter.classToAttribute( - 'is-keyboardFocused', - 'keyboard-focused' - ), - converter.classToAttribute('is-disabled', 'disabled'), - { - find: [ - builder.class('spectrum-Combobox-button'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.pseudoClass('disabled')], - [builder.class('is-invalid')], - [builder.class('spectrum-PickerButton--quiet')], - ], - }, - ], - replace: [ - { - replace: builder.class('button'), - }, - { - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [builder.pseudoClass('disabled')], - [builder.class('is-invalid')], - [builder.attribute('quiet')], - ], - }, - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-focused')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('focused')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-invalid')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('invalid')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-keyboardFocused')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('keyboard-focused')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-disabled')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - converter.classToId('spectrum-Combobox-input'), - converter.classToId('spectrum-Combobox-textfield'), - converter.classToId('spectrum-Textfield', 'textfield'), - converter.classToClass( - 'spectrum-Textfield-validationIcon', - 'icon' - ), - ], - excludeByComponents: [ - { - type: 'class', - name: 'regex', - regex: /Datepicker/, - }, - builder.class('🤫'), - // builder.class('spectrum-PickerButton-fill'), - ], - }, - ], -}; - -export default config; diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json index 27a523dee02..2314c9c7b6b 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", @@ -71,9 +73,6 @@ "@spectrum-web-components/overlay": "1.6.0", "@spectrum-web-components/popover": "1.6.0" }, - "devDependencies": { - "@spectrum-css/contextualhelp": "5.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/contextual-help/src/spectrum-config.js b/packages/contextual-help/src/spectrum-config.js deleted file mode 100644 index f88fa7e1129..00000000000 --- a/packages/contextual-help/src/spectrum-config.js +++ /dev/null @@ -1,54 +0,0 @@ -/* -Copyright 2024 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ContextualHelp'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/contextualhelp', - outPackage: 'contextual-help', - fileName: 'contextual-help', - hoistCustomPropertiesFrom: 'spectrum-ContextualHelp', - excludeByComponents: [ - // No need to style the trigger, it is already styled by sp-button - builder.class('spectrum-ContextualHelp-button'), - builder.class('spectrum--large'), - ], - components: [ - // The min-width should be applied to the popover, not the :host - converter.classToClass('spectrum-ContextualHelp', 'popover'), - converter.classToClass('spectrum-ContextualHelp-popover'), - converter.classToSlotted( - 'spectrum-ContextualHelp-heading', - 'heading' - ), - converter.classToClass('spectrum-ContextualHelp-body'), - converter.classToSlotted( - 'spectrum-ContextualHelp-link', - 'link' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/dialog/package.json b/packages/dialog/package.json index f8ab5aff05c..7a3ae031cb8 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", @@ -90,9 +92,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/underlay": "1.6.0" }, - "devDependencies": { - "@spectrum-css/dialog": "11.0.0-s2-foundations.15" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/dialog/src/spectrum-config.js b/packages/dialog/src/spectrum-config.js deleted file mode 100644 index 9574df5abbb..00000000000 --- a/packages/dialog/src/spectrum-config.js +++ /dev/null @@ -1,111 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Dialog'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/dialog', - outPackage: 'dialog', - fileName: 'dialog', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Dialog--error'), - converter.classToAttribute('spectrum-Dialog--dismissable'), - converter.classToAttribute( - 'spectrum-Dialog--noDivider', - 'no-divider' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Dialog--small', 's'], - ['spectrum-Dialog--medium', 'm'], - ['spectrum-Dialog--large', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Dialog--fullscreen'], - ['spectrum-Dialog--fullscreenTakeover'], - ], - 'mode' - ), - converter.classToSlotted('spectrum-Dialog-heading', 'heading'), - converter.classToSlotted('spectrum-Dialog-hero', 'hero'), - converter.classToSlotted('*'), - converter.classToClass('spectrum-Dialog-grid'), - converter.classToClass('spectrum-Dialog-divider'), - converter.classToClass('spectrum-Dialog-content'), - converter.classToClass( - 'spectrum-Dialog-closeButton', - 'close-button' - ), - converter.classToClass('spectrum-Dialog-header'), - converter.classToClass('spectrum-Dialog-footer'), - converter.classToClass('spectrum-Dialog-typeIcon', 'type-icon'), - converter.classToClass('spectrum-Button'), - converter.classToClass( - 'spectrum-Dialog-buttonGroup', - 'button-group' - ), - converter.classToClass( - 'spectrum-Dialog-buttonGroup--noFooter', - 'button-group--noFooter' - ), - { - find: [ - builder.class('spectrum-Dialog-heading'), - builder.class('spectrum-Dialog-heading--noHeader'), - ], - replace: [ - { - replace: builder.class('no-header'), - }, - { - replace: builder.slotted('heading'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Dialog-heading'), - { - type: 'combinator', - value: 'next-sibling', - }, - builder.class('spectrum-Dialog-divider'), - ], - replace: [ - { - replace: builder.attribute('name', 'heading'), - hoist: false, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/divider/package.json b/packages/divider/package.json index b895e368bcd..9eb9ac173e9 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", @@ -66,9 +68,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/divider": "5.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/divider/src/spectrum-config.js b/packages/divider/src/spectrum-config.js deleted file mode 100644 index 42116661e10..00000000000 --- a/packages/divider/src/spectrum-config.js +++ /dev/null @@ -1,51 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Divider'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/divider', - outPackage: 'divider', - fileName: 'divider', - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Divider--vertical'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Divider--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Divider--sizeS', 's'], - ['spectrum-Divider--sizeL', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Divider--staticWhite', 'white'], - ['spectrum-Divider--staticBlack', 'black'], - ], - 'static-color' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 864681ea844..669c1dd11f4 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", @@ -66,9 +68,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/dropzone": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/dropzone/src/spectrum-config.js b/packages/dropzone/src/spectrum-config.js deleted file mode 100644 index 59406246c78..00000000000 --- a/packages/dropzone/src/spectrum-config.js +++ /dev/null @@ -1,39 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-DropZone'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/dropzone', - outPackage: 'dropzone', - fileName: 'dropzone', - components: [ - converter.classToHost(), - converter.classToAttribute('is-dragged', 'dragged'), - converter.classToAttribute('is-filled', 'filled'), - converter.classToSlotted( - 'spectrum-IllustratedMessage-illustration' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/field-group/package.json b/packages/field-group/package.json index 12a40150316..841349d8edc 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/help-text": "1.6.0" }, - "devDependencies": { - "@spectrum-css/fieldgroup": "6.0.0-s2-foundations.16" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/field-group/src/spectrum-config.js b/packages/field-group/src/spectrum-config.js deleted file mode 100644 index 460de36999b..00000000000 --- a/packages/field-group/src/spectrum-config.js +++ /dev/null @@ -1,84 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-FieldGroup'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/fieldgroup', - outPackage: 'field-group', - fileName: 'field-group', - hoistCustomPropertiesFrom: 'spectrum-FieldGroup', - excludeByComponents: [builder.class('spectrum-Checkbox')], - components: [ - converter.classToClass('spectrum-FieldGroup', 'group'), - converter.classToAttribute('spectrum-FieldGroup--horizontal'), - converter.classToAttribute('spectrum-FieldGroup--vertical'), - converter.classToClass( - 'spectrum-FieldGroupInputLayout', - 'group' - ), - { - find: [ - // .spectrum-FieldGroup-item:not(:last-child) - builder.class('spectrum-FieldGroup-item'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.pseudoClass('last-child')]], - }, - ], - replace: [ - //slot:not([name])::slotted(:not(:last-child)) - { - replace: builder.element('slot'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('name')]], - }, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.pseudoClass('last-child')], - ], - }, - ], - }, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/field-label/package.json b/packages/field-label/package.json index bce413a7708..a9a549ebeb0 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/fieldlabel": "10.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/field-label/src/spectrum-config.js b/packages/field-label/src/spectrum-config.js deleted file mode 100644 index b23388039de..00000000000 --- a/packages/field-label/src/spectrum-config.js +++ /dev/null @@ -1,73 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-FieldLabel'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/fieldlabel', - outPackage: 'field-label', - fileName: 'field-label', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-FieldLabel--left', 'start'], - ['spectrum-FieldLabel--right', 'end'], - ], - 'side-aligned' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-FieldLabel--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-FieldLabel--sizeS', 's'], - ['spectrum-FieldLabel--sizeL', 'l'], - ['spectrum-FieldLabel--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-FieldLabel-requiredIcon', - 'required-icon' - ), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - ], - excludeByComponents: [ - builder.class('spectrum-Form'), - builder.class('spectrum-Form-item'), - builder.class('spectrum-Form-itemLabel'), - builder.class('spectrum-Form--labelsAbove'), - builder.class('spectrum-Form-itemField'), - ], - }, - ], -}; - -export default config; diff --git a/packages/help-text/package.json b/packages/help-text/package.json index 0ec717bc437..4543be54e09 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", @@ -88,9 +90,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/helptext": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/help-text/src/spectrum-config.js b/packages/help-text/src/spectrum-config.js deleted file mode 100644 index 99cf58e52e0..00000000000 --- a/packages/help-text/src/spectrum-config.js +++ /dev/null @@ -1,64 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-HelpText'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/helptext', - outPackage: 'help-text', - fileName: 'help-text', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-HelpText--neutral'], - ['spectrum-HelpText--negative'], - ], - 'variant' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-HelpText--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-HelpText--sizeS', 's'], - ['spectrum-HelpText--sizeL', 'l'], - ['spectrum-HelpText--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-HelpText-text'), - converter.classToClass( - 'spectrum-HelpText-validationIcon', - 'icon' - ), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/icon/package.json b/packages/icon/package.json index f19cc6ac74e..4971ae4ec9c 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", @@ -90,9 +92,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/iconset": "1.6.0" }, - "devDependencies": { - "@spectrum-css/icon": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/icon/src/spectrum-config.js b/packages/icon/src/spectrum-config.js deleted file mode 100644 index 8e19630fa52..00000000000 --- a/packages/icon/src/spectrum-config.js +++ /dev/null @@ -1,115 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Icon'); - -/** - * - * @param {string} fileName - * @param {RegExp} regex - * @returns {import('../../../tasks/spectrum-css-converter').Conversion} - */ -const iconType = (fileName, regex) => ({ - inPackage: '@spectrum-css/icon', - outPackage: 'icon', - fileName, - requireComponentPresence: [ - /** @type {import('../../../tasks/spectrum-css-converter').SelectorComponentWithRegex} */ ({ - type: 'class', - regex, - }), - ], - components: [], -}); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/icon', - outPackage: 'icon', - fileName: 'icon', - requireComponentPresence: [ - /** @type {import('../../../tasks/spectrum-css-converter').SelectorComponentWithRegex} */ ({ - type: 'class', - regex: /spectrum-Icon/, - }), - ], - components: [ - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'root', - }, - ], - ], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'root', - }, - ], - ], - }, - hoist: true, - }, - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-Icon--sizeXXS', 'xxs'], - ['spectrum-Icon--sizeXS', 'xs'], - ['spectrum-Icon--sizeS', 's'], - ['spectrum-Icon--sizeM', 'm'], - ['spectrum-Icon--sizeL', 'l'], - ['spectrum-Icon--sizeXL', 'xl'], - ['spectrum-Icon--sizeXXL', 'xxl'], - ], - 'size' - ), - ], - excludeByComponents: [ - builder.element('svg'), - builder.element('img'), - ], - }, - iconType('icon-arrow', /^spectrum-UIIcon-Arrow/), - iconType('icon-asterisk', /^spectrum-UIIcon-Asterisk/), - iconType('icon-checkmark', /^spectrum-UIIcon-Checkmark/), - iconType('icon-chevron', /^spectrum-UIIcon-Chevron/), - iconType('icon-corner-triangle', /^spectrum-UIIcon-CornerTriangle/), - iconType('icon-cross', /^spectrum-UIIcon-Cross/), - iconType('icon-dash', /^spectrum-UIIcon-Dash/), - iconType('icon-double-gripper', /^spectrum-UIIcon-DoubleGripper/), - iconType('icon-single-gripper', /^spectrum-UIIcon-SingleGripper/), - iconType('icon-triple-gripper', /^spectrum-UIIcon-TripleGripper/), - ], -}; - -export default config; diff --git a/packages/icons-ui/bin/build.js b/packages/icons-ui/bin/build.js index 8e1fad516dc..2171a7933f0 100644 --- a/packages/icons-ui/bin/build.js +++ b/packages/icons-ui/bin/build.js @@ -14,401 +14,297 @@ governing permissions and limitations under the License. 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 = '@spectrum-css/ui-icons/dist/medium'; -const S2IConsPackageDir = '@spectrum-css/ui-icons-s2/dist/medium'; -const keepColors = ''; - -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'; - } +const S1IconsPackageDir = require.resolve('@spectrum-css/ui-icons'); // /dist/medium'; +const S2IconsPackageDir = require.resolve('@spectrum-css/ui-icons-s2'); // /dist/medium'; - if (id === 'UnLink') { - id = 'Unlink'; - } - if (id === 'TextStrikeThrough') { - id = 'TextStrikethrough'; - } +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', ''); - let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id); + // 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 (ComponentName === 'TextStrikeThrough') { - ComponentName = 'TextStrikethrough'; - } - if (ComponentName === 'UnLink') { - ComponentName = 'Unlink'; + 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); } + }); - 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; - } + return { + id, + ComponentName, + }; +} - $('*').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'); - } - }); - }); +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 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`; + let formatted = await linter.lintText(content).then((results) => { + if (results?.[0]?.errorCount > 0 && !results?.[0]?.output) { + return Promise.reject(`Error linting ${filePath}`); } - 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; - - } - } - `; - - 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 results?.[0]?.output; }); -} -const iconsV1 = ( - await fg(`${rootDir}/node_modules/${S1IConsPackageDir}/**.svg`) -).sort(); + formatted = await prettier.format(content, prettierConfig); -const iconsV2 = ( - await fg(`${rootDir}/node_modules/${S2IConsPackageDir}/**.svg`) -).sort(); + return fsp.writeFile(path.join(cwd, filePath), formatted, 'utf-8'); +} -const iconsV1NameList = iconsV1.map((i) => { - let id = path - .basename(i, '.svg') - .replace('S2_Icon_', '') - .replace('_20_N', '') - .replace('_22x20_N', ''); +async function buildIcon(filepath, folder, altIconList) { + // Read in our SVG file + const svg = await fsp.readFile(filepath, 'utf-8'); - if (id.search(/^Ad[A-Z]/) !== -1) { - id = id.replace(/^Ad/, ''); - id += 'Advert'; - } + const { id, ComponentName } = cleanFileName(filepath); - if (id === 'UnLink') { - id = 'Unlink'; - } - if (id === 'TextStrikeThrough') { - id = 'TextStrikethrough'; + // 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; } - let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id); - - if (ComponentName === 'TextStrikeThrough') { - ComponentName = 'TextStrikethrough'; - } - if (ComponentName === 'UnLink') { - ComponentName = 'Unlink'; - } + // 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', '...'); + } - return ComponentName; -}); -const iconsV2NameList = iconsV2.map((i) => { - let id = path - .basename(i, '.svg') - .replace('S2_Icon_', '') - .replace('_20_N', '') - .replace('_22x20_N', ''); + 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 (id.search(/^Ad[A-Z]/) !== -1) { - id = id.replace(/^Ad/, ''); - id += 'Advert'; + 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';`; } - if (id === 'UnLink') { - id = 'Unlink'; - } - if (id === 'TextStrikeThrough') { - id = 'TextStrikethrough'; + 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} + +/** + * @element ${iconElementName} + */ +export class Icon${ComponentName} extends IconBase { +protected override render(): TemplateResult { + setCustomTemplateLiteralTag(html); + + 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 9819c60d1b2..99c9cb758eb 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", - "fast-glob": "^3.2.12", - "fs": "^0.0.1-security", - "path": "^0.12.7", + "case": "^1.6.3", + "cheerio": "^1.0.0", + "fast-glob": "^3.3.3", "prettier": "^3.5.3" }, "types": "./src/index.d.ts", diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index e22cad65613..f199c26a92b 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,12 +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", - "@spectrum-css/icon": "9.1.0", - "case": "^1.6.1", - "cheerio": "^1.0.0-rc.2", - "fast-glob": "^3.2.12", - "fs": "^0.0.1-security", - "path": "^0.12.7", + "case": "^1.6.3", + "cheerio": "^1.0.0", + "fast-glob": "^3.3.3", "prettier": "^3.5.3" }, "types": "./src/index.d.ts", diff --git a/packages/icons/bin/build.js b/packages/icons/bin/build.js new file mode 100644 index 00000000000..37b0ba89e81 --- /dev/null +++ b/packages/icons/bin/build.js @@ -0,0 +1,88 @@ +#!/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 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 + const iconName = path.basename(srcPath, path.extname(srcPath)); + // regex will extract width, height and svg content into $1, $2 and $3 respectively + const regex = new RegExp( + /[\s|\n]*(.*?)[\s|\n]*<\/svg>/i + ); + + const content = fs.readFileSync(srcPath, 'utf8'); + + const match = content.match(regex); + + if (!match) { + // no matching result, bail + return; + } + const viewBox = match[1]; + const svgContent = match[2]; + // append the content to the target file handle + fs.writeSync( + fd, + `${svgContent}` + ); +}; + +/** + * @returns {Promise { + const srcPath = path.join(path.dirname(spectrumIconsPath), scale); + const outputPath = path.join( + __dirname, + '..', + 'src', + `icons-${scale}.svg.ts` + ); + + const outputFd = fs.openSync(outputPath, 'w'); + + fs.writeSync( + outputFd, + 'import { svg } from \'@spectrum-web-components/base\';\n\nexport default svg`' + ); + + fs.readdirSync(srcPath).forEach((iconFile) => { + processIcon(path.join(srcPath, iconFile), outputFd); + }); + + fs.writeSync(outputFd, '`;\n'); + fs.closeSync(outputFd); + }) + ).catch((error) => { + console.error('Error processing icons:', error); + }); +} + +await main(); diff --git a/packages/icons/package.json b/packages/icons/package.json index a04e72062ef..d08aa6ed6b3 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.6.0", "@spectrum-web-components/iconset": "1.6.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 13e31597c62..28ac10717ea 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -1,13 +1,3 @@ -/* -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 { 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 3a33433d1ed..7fed66817d8 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -1,13 +1,3 @@ -/* -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 { svg } from '@spectrum-web-components/base'; + export default svg``; diff --git a/packages/iconset/package.json b/packages/iconset/package.json index 1bb3a79b61a..32fa70dde2f 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 716f5ca90bd..84d2275710b 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/styles": "1.6.0" }, - "devDependencies": { - "@spectrum-css/illustratedmessage": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/illustrated-message/src/spectrum-config.js b/packages/illustrated-message/src/spectrum-config.js deleted file mode 100644 index 7c9b2da38e9..00000000000 --- a/packages/illustrated-message/src/spectrum-config.js +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-IllustratedMessage'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/illustratedmessage', - outPackage: 'illustrated-message', - fileName: 'illustratedmessage', - components: [ - converter.classToHost(), - converter.classToId('spectrum-IllustratedMessage-heading'), - converter.classToId('spectrum-IllustratedMessage-description'), - converter.classToId('spectrum-IllustratedMessage-illustration'), - ], - }, - ], -}; - -export default config; diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index a8754600f8f..75b1a634aa6 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/button": "1.6.0" }, - "devDependencies": { - "@spectrum-css/infieldbutton": "6.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/infield-button/src/spectrum-config.js b/packages/infield-button/src/spectrum-config.js deleted file mode 100644 index e241bfc0bb3..00000000000 --- a/packages/infield-button/src/spectrum-config.js +++ /dev/null @@ -1,85 +0,0 @@ -/* -Copyright 2023 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. -*/ -// @ts-check - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-InfieldButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/infieldbutton', - outPackage: 'infield-button', - fileName: 'infield-button', - components: [ - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-InfieldButton--sizeS', 's'], - ['spectrum-InfieldButton--sizeL', 'l'], - ['spectrum-InfieldButton--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-InfieldButton--right', 'end'], - ['spectrum-InfieldButton--left', 'start'], - ], - 'inline' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-InfieldButton--top', 'start'], - ['spectrum-InfieldButton--bottom', 'end'], - ], - 'block' - ), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('spectrum-InfieldButton--quiet'), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToClass('spectrum-InfieldButton-fill', 'fill'), - converter.classToSlotted('spectrum-InfieldButton-icon'), - ], - }, - ], -}; - -export default config; diff --git a/packages/link/package.json b/packages/link/package.json index 0d846a633ae..5805e35112a 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/link": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/link/src/spectrum-config.js b/packages/link/src/spectrum-config.js deleted file mode 100644 index f2bf7c573c4..00000000000 --- a/packages/link/src/spectrum-config.js +++ /dev/null @@ -1,189 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Link'); - -/** - * @returns {import('../../../tasks/spectrum-css-converter').ComplexSelectorConversion} - */ -const includeAnchor = (className, attribute, value) => ({ - find: [ - /** @type {import('lightningcss').SelectorComponent} */ ( - builder.class(className) - ), - ], - replace: [ - { - replace: /** @type {import('lightningcss').SelectorComponent} */ ({ - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute(attribute, value)], - }), - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.element('a'), - }, - ], -}); - -/** - * - * @param {string} pseudo - * @param {string} className - * @param {string} attribute - * @param {string} value - * @returns {import('../../../tasks/spectrum-css-converter').ComplexSelectorConversion} - */ -const includeAnchorWithPseudoClass = (pseudo, className, attribute, value) => { - const component = includeAnchor(className, attribute, value); - const pseudoComponent = - /** @type {import('lightningcss').SelectorComponent} */ ( - builder.pseudoClass(pseudo) - ); - component.find.push(pseudoComponent); - component.replace.push({ - replace: pseudoComponent, - }); - return component; -}; - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/link', - outPackage: 'link', - fileName: 'link', - hoistCustomPropertiesFrom: 'spectrum-Link', - components: [ - { - find: [ - builder.class('spectrum-Link'), - builder.pseudoClass('active'), - ], - replace: [], - }, - { - find: [ - builder.class('spectrum-Link'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: builder.element('a'), - }, - { - replace: builder.pseudoClass('hover'), - }, - ], - }, - includeAnchor('spectrum-Link--quiet', 'quiet'), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--quiet', - 'quiet' - ), - includeAnchor( - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchorWithPseudoClass( - 'active', - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchorWithPseudoClass( - 'focus', - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchor( - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchorWithPseudoClass( - 'active', - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchorWithPseudoClass( - 'focus', - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchor( - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - includeAnchorWithPseudoClass( - 'active', - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - includeAnchorWithPseudoClass( - 'focus', - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - { - find: builder.class('spectrum-Link'), - replace: builder.element('a'), - }, - converter.classToAttribute('spectrum-Link--quiet'), - converter.classToAttribute( - 'spectrum-Link--overBackground', - 'over-background' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/menu/package.json b/packages/menu/package.json index 41584bbb6dd..b38ff89455d 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", @@ -106,9 +108,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/menu": "9.2.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js deleted file mode 100644 index fa95a65473d..00000000000 --- a/packages/menu/src/spectrum-config.js +++ /dev/null @@ -1,652 +0,0 @@ -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Menu'); -/** - * @type { import('../../../tasks/spectrum-css-converter.js').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - // Menu Section Heading - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu-sectionHeading', - excludeByComponents: [ - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-Menu'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - ], - components: [ - converter.classToClass( - 'spectrum-Menu-sectionHeading', - 'header' - ), - ], - }, - { - // Menu Item - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu-item', - excludeByComponents: [ - builder.class('spectrum-Menu'), - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu-divider'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - ], - excludeByWholeSelector: [ - [ - builder.class('spectrum-Menu-item'), - builder.combinator(' '), - builder.class('spectrum-Menu-item'), - ], - ], - includeByWholeSelector: [ - [ - /** .spectrum-Menu .spectrum-Menu-itemIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon'), - ], - [ - /** .spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon--workflowIcon'), - ], - ], - components: [ - converter.classToHost('spectrum-Menu-item'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-active', 'active'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToId('spectrum-Menu-itemLabel', 'label'), - converter.classToClass('spectrum-Menu-chevron', 'chevron'), - converter.classToClass( - 'spectrum-Menu-chevron--withAdjacentIcon', - 'chevron--withAdjacentIcon' - ), - converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), - converter.classToClass( - 'spectrum-Menu-checkmark--withAdjacentIcon', - 'checkmark--withAdjacentIcon' - ), - converter.classToAttribute( - 'spectrum-Menu-item--drillIn', - 'has-submenu' - ), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-itemIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon'), - ], - replace: [ - { - replace: builder.slotted('icon'), - }, - ], - }, - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon--workflowIcon'), - ], - replace: [ - { - replace: builder.slotted('icon'), - }, - ], - }, - converter.classToSlotted('spectrum-Menu-itemIcon', 'icon'), - converter.classToSlotted( - 'spectrum-Menu-itemIcon--workflowIcon', - 'icon' - ), - converter.classToSlotted('spectrum-Menu-itemValue', 'value'), - { - find: [ - { - type: 'class', - name: 'spectrum-Menu-itemDescription', - }, - ], - replace: [ - { - replace: builder.attribute('name', 'description'), - hoist: false, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'universal', - }, - ], - }, - }, - ], - }, - converter.classToClass( - 'spectrum-menu-itemSelection', - 'menu-itemSelection' - ), - { - find: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - replace: builder.attribute('focused'), - }, - { - find: [builder.class('spectrum-Menu-itemLabel--wrapping')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'no-wrap', - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - find: [builder.class('spectrum-Menu-itemLabel--truncate')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'no-wrap', - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - collapseSelector: true, - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-disabled')]], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - { - find: [ - builder.class('spectrum-Menu-itemIcon'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.class('spectrum-Menu-chevron')], - [builder.class('spectrum-Menu-checkmark')], - ], - }, - ], - replace: [ - { - replace: builder.class('icon'), - }, - { - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [builder.class('chevron')], - [builder.class('checkmark')], - ], - }, - }, - ], - }, - ], - }, - { - // Menu Divider - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu-divider', - excludeByComponents: [ - builder.class('spectrum-menu-itemSelection'), - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - ], - excludeByWholeSelector: [ - [builder.class('spectrum-Menu')], - [ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu'), - ], - ], - includeByWholeSelector: [ - [ - builder.class('spectrum-Menu'), - builder.combinator('descendant'), - builder.class('spectrum-Menu-divider'), - ], - ], - components: [ - converter.classToHost('spectrum-Menu-divider'), - { - collapseSelector: true, - find: [ - builder.class('spectrum-Menu'), - builder.combinator('descendant'), - builder.class('spectrum-Menu-divider'), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - }, - }, - ], - }, - ], - }, - { - // Menu Checkmark - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'checkmark', - excludeByComponents: [ - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-Menu'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - ], - includeByWholeSelector: [ - [ - /** .spectrum-Menu .spectrum-Menu-checkmark */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-checkmark'), - ], - ], - components: [ - converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), - converter.classToClass( - 'spectrum-Menu-checkmark--withAdjacentIcon', - 'checkmark--withAdjacentIcon' - ), - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-checkmark */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-checkmark'), - ], - replace: [ - { - replace: builder.class('checkmark'), - }, - ], - }, - ], - }, - { - // Menu Chevron - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'chevron', - excludeByComponents: [ - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-Menu'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - ], - includeByWholeSelector: [ - [ - /** .spectrum-Menu .spectrum-Menu-chevron */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-chevron'), - ], - ], - components: [ - converter.classToClass('spectrum-Menu-chevron', 'chevron'), - converter.classToClass( - 'spectrum-Menu-chevron--withAdjacentIcon', - 'chevron--withAdjacentIcon' - ), - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-checkmark */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-chevron'), - ], - replace: [ - { - replace: builder.class('chevron'), - }, - ], - }, - ], - }, - { - // Menu - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu', - excludeByComponents: [ - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - builder.element('li'), - ], - includeByWholeSelector: [ - /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item */ - [ - builder.class('spectrum-Menu'), - builder.class('is-selectable'), - builder.combinator(' '), - builder.class('spectrum-Menu-item'), - ], - /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ - [ - builder.class('spectrum-Menu'), - builder.class('is-selectable'), - builder.combinator(' '), - builder.class('spectrum-Menu-item'), - builder.class('is-selected'), - ], - // [builder.class('spectrum-Menu-item')], - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-selectable', 'selects'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Menu--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Menu--sizeS', 's'], - ['spectrum-Menu--sizeL', 'l'], - ['spectrum-Menu--sizeXL', 'xl'], - ], - 'size' - ), - { - find: [builder.class('spectrum-Menu-item')], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.element('sp-menu-item')], - }, - }, - ], - }, - { - collapseSelector: true, - find: [ - builder.class('spectrum-Menu-item'), - builder.class('is-selected'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-menu-item'), - builder.attribute('selected'), - ], - }, - }, - ], - }, - { - find: [ - builder.element('li'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.class('spectrum-Menu-item')], - [builder.class('spectrum-Menu-divider')], - ], - }, - ], - replace: [ - { - replace: builder.element('li'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-menu-item'), - ], - }, - ], - [builder.class('menu-divider')], - ], - }, - }, - ], - }, - { - find: [ - builder.element('li'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.class('spectrum-Menu-item')], - [builder.class('spectrum-Menu-divider')], - ], - }, - builder.combinator('child'), - builder.class('spectrum-Menu-sectionHeading'), - ], - replace: [ - { - replace: builder.element('li'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-menu-item'), - ], - }, - ], - [builder.class('menu-divider')], - ], - }, - }, - { - replace: builder.combinator('child'), - }, - { - replace: builder.class('header'), - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index f589ee73dbd..000203d7dcc 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 bca8e577d78..42d159eb3ab 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", @@ -70,10 +72,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/meter": "0.0.0-s2-foundations.2", - "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/meter/src/spectrum-config.js b/packages/meter/src/spectrum-config.js deleted file mode 100644 index 4a27b5188d9..00000000000 --- a/packages/meter/src/spectrum-config.js +++ /dev/null @@ -1,107 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ProgressBar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/progressbar', - outPackage: 'meter', - fileName: 'progress-bar', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-ProgressBar-track'), - converter.classToClass('spectrum-ProgressBar-fill'), - converter.classToClass('spectrum-ProgressBar-label'), - converter.classToClass('spectrum-ProgressBar-percentage'), - converter.classToAttribute( - 'spectrum-ProgressBar--sideLabel', - 'side-label' - ), - converter.classToAttribute( - 'spectrum-ProgressBar--indeterminate' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressBar--staticBlack', 'black'], - ['spectrum-ProgressBar--staticWhite', 'white'], - ], - 'static-color' - ), - ], - excludeByComponents: [ - builder.class('spectrum-Meter--sizeS'), - builder.class('spectrum-Meter--sizeL'), - ], - }, - { - inPackage: '@spectrum-css/meter', - outPackage: 'meter', - fileName: 'meter', - components: [ - converter.classToHost(), - converter.classToHost('spectrum-Meter'), - ...converter.enumerateAttributes( - [ - ['spectrum-Meter--sizeS', 's'], - ['spectrum-Meter--sizeL', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['is-positive', 'positive'], - ['is-notice', 'notice'], - ['is-negative', 'negative'], - ], - 'variant' - ), - ], - }, - { - inPackage: '@spectrum-css/meter', - outPackage: 'meter', - fileName: 'meter', - components: [ - converter.classToHost(), - converter.classToHost('spectrum-Meter'), - ...converter.enumerateAttributes( - [ - ['spectrum-Meter--sizeS', 's'], - ['spectrum-Meter--sizeL', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['is-positive', 'positive'], - ['is-notice', 'notice'], - ['is-negative', 'negative'], - ], - 'variant' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/modal/package.json b/packages/modal/package.json index 21c8535473b..b5eb84a0981 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", @@ -52,9 +53,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/modal": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/modal/src/spectrum-config.js b/packages/modal/src/spectrum-config.js deleted file mode 100644 index c7b9bc94d16..00000000000 --- a/packages/modal/src/spectrum-config.js +++ /dev/null @@ -1,118 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Modal'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/modal', - outPackage: 'modal', - fileName: 'modal-wrapper', - components: [ - converter.classToHost('spectrum-Modal-wrapper'), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Modal--responsive'), - ], - excludeByComponents: [ - builder.class('spectrum-Modal'), - builder.class('spectrum-Modal--fullscreen'), - builder.class('spectrum-Modal--fullscreenTakeover'), - ], - }, - { - inPackage: '@spectrum-css/modal', - outPackage: 'modal', - fileName: 'modal', - hoistCustomPropertiesFrom: 'spectrum-Modal', - components: [ - { - find: [ - builder.class('spectrum-Modal--fullscreenTakeover'), - builder.class('is-open'), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('open')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.class('fullscreenTakeover'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Modal'), - builder.class('is-open'), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('open')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.class('modal'), - }, - ], - }, - { - find: [builder.class('spectrum-Modal--responsive')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('responsive')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.class('modal'), - }, - ], - }, - converter.classToClass('spectrum-Modal', 'modal'), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Modal--responsive'), - converter.classToClass('spectrum-Modal--fullscreen'), - converter.classToClass('spectrum-Modal--fullscreenTakeover'), - ], - excludeByComponents: [builder.class('spectrum-Modal-wrapper')], - }, - ], -}; - -export default config; diff --git a/packages/number-field/package.json b/packages/number-field/package.json index 60575547b6a..e6b4e5ab37a 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", @@ -74,8 +76,7 @@ "@spectrum-web-components/textfield": "1.6.0" }, "devDependencies": { - "@formatjs/intl-numberformat": "^8.3.5", - "@spectrum-css/stepper": "7.1.3" + "@formatjs/intl-numberformat": "^8.3.5" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/number-field/src/spectrum-config.js b/packages/number-field/src/spectrum-config.js deleted file mode 100644 index b4361c8c6ab..00000000000 --- a/packages/number-field/src/spectrum-config.js +++ /dev/null @@ -1,272 +0,0 @@ -/* -Copyright 2023 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. -*/ - -// @ts-check -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -// Prepopulate a converter with the base class name of the package in question. -const converter = converterFor('spectrum-Stepper'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/stepper', - outPackage: 'number-field', - fileName: 'number-field', - hoistCustomPropertiesFrom: 'spectrum-Stepper', - components: [ - { - find: builder.pseudoClass('hover'), - replace: builder.pseudoClass('hover'), - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-focused')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('focused')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-disabled')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-invalid')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('invalid')]], - }, - hoist: true, - }, - { - exactSelector: true, - find: [builder.class('spectrum-Stepper--quiet')], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - ], - }, - { - expandSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-disabled'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-focused'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('focused'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-keyboardFocused'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('keyboard-focused'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-focused'), - builder.class('is-invalid'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('focused'), - hoist: true, - }, - { - replace: builder.attribute('invalid'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-keyboardFocused'), - builder.class('is-invalid'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('keyboard-focused'), - hoist: true, - }, - { - replace: builder.attribute('invalid'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - converter.classToId('spectrum-Stepper', 'textfield'), - converter.classToAttribute('spectrum-Stepper--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute( - 'is-keyboardFocused', - 'keyboard-focused' - ), - converter.classToClass('spectrum-Stepper-buttons', 'buttons'), - converter.classToClass( - 'spectrum-Stepper-stepDown', - 'step-down' - ), - converter.classToClass( - 'spectrum-Stepper-textfield', - 'textfield' - ), - converter.classToClass('spectrum-Icon', 'stepper-icon'), - converter.classToClass('spectrum-Stepper-input', 'input'), - converter.classToClass('spectrum-Stepper-button', 'button'), - converter.classToClass( - 'spectrum-InfieldButton--top', - 'step-up' - ), - converter.classToClass( - 'spectrum-InfieldButton--bottom', - 'step-down' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Stepper--sizeS', 's'], - ['spectrum-Stepper--sizeM', 'm'], - ['spectrum-Stepper--sizeL', 'l'], - ['spectrum-Stepper--sizeXL', 'xl'], - ], - 'size' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/overlay/package.json b/packages/overlay/package.json index f8a6269fbb4..632855c5eb5 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 71c4d9b0446..87e3353dd73 100644 --- a/packages/overlay/src/OverlayStack.ts +++ b/packages/overlay/src/OverlayStack.ts @@ -40,15 +40,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 1b2a3d38e64..1564360a45a 100644 --- a/packages/overlay/src/fullSizePlugin.ts +++ b/packages/overlay/src/fullSizePlugin.ts @@ -11,11 +11,14 @@ governing permissions and limitations under the License. */ 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 24d6efb3676..b43536a07b0 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/icons-ui": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/pickerbutton": "6.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/picker-button/src/spectrum-config.js b/packages/picker-button/src/spectrum-config.js deleted file mode 100644 index e66907d6c16..00000000000 --- a/packages/picker-button/src/spectrum-config.js +++ /dev/null @@ -1,252 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-PickerButton'); - -/** - * @property {string} size - * @returns {import('../../../tasks/spectrum-css-converter').ComplexSelectorConversion[]} - */ -const convertSize = (size) => [ - { - collapseSelector: true, - find: [ - // .spectrum-PickerButton.spectrum-PickerButton--sizeS - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('root'), - }, - ], - }, - { - // .spectrum-PickerButton.spectrum-PickerButton--textuiicon.spectrum-PickerButton--sizeXL - collapseSelector: true, - find: [ - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--textuiicon'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - //:host([dir='ltr'][size='xl']) .root.textuiicon - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('textuiicon'), - }, - ], - }, - // .spectrum-PickerButton.spectrum-PickerButton--icononly.spectrum-PickerButton--sizeXL - { - collapseSelector: true, - find: [ - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--icononly'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - //:host([dir='ltr'][size='xl']) .root.textuiicon - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('spectrum-PickerButton--icononly'), - }, - ], - }, - // .spectrum-PickerButton.spectrum-PickerButton--uiicononly.spectrum-PickerButton--sizeXL - { - collapseSelector: true, - find: [ - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--uiicononly'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - //:host([dir='ltr'][size='xl']) .root.textuiicon - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('uiicononly'), - }, - ], - }, -]; - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/pickerbutton', - outPackage: 'picker-button', - fileName: 'picker-button', - components: [ - converter.classToClass('spectrum-PickerButton', 'root'), - converter.classToAttribute('is-focused', 'focused'), - { - find: [builder.pseudoClass('focus')], - replace: [ - { - replace: builder.pseudoClass('focus'), - hoist: false, - }, - ], - }, - { - find: [builder.pseudoClass('hover')], - replace: [ - { - replace: builder.pseudoClass('hover'), - hoist: false, - }, - ], - }, - { - find: [ - builder.class('spectrum-PickerButton'), - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - replace: [ - { - replace: builder.class('root'), - }, - { - replace: { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - }, - ], - }, - converter.pseudoToAttribute('disabled', 'disabled'), - ...convertSize('s'), - ...convertSize('m'), - ...convertSize('l'), - ...convertSize('xl'), - converter.notToAttribute('is-open', 'open'), - converter.classToAttribute('is-open', 'open'), - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.pseudoClass('disabled')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-invalid', 'invalid'), - converter.notToAttribute('is-invalid', 'invalid'), - ...converter.enumerateAttributes( - [ - ['spectrum-PickerButton--right'], - ['spectrum-PickerButton--left'], - ], - 'position' - ), - converter.classToAttribute('spectrum-PickerButton--rounded'), - converter.notToAttribute( - 'spectrum-PickerButton--rounded', - 'rounded' - ), - converter.classToAttribute( - 'spectrum-PickerButton--quiet', - 'quiet' - ), - converter.classToClass('spectrum-PickerButton--uiicononly'), - converter.classToClass('spectrum-PickerButton--textuiicon'), - ], - excludeByComponents: [ - builder.class('spectrum--medium'), - builder.class('spectrum--large'), - ], - }, - ], -}; - -export default config; diff --git a/packages/picker/package.json b/packages/picker/package.json index a54a451a20a..c326fec1710 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", @@ -103,9 +105,6 @@ "@spectrum-web-components/tooltip": "1.6.0", "@spectrum-web-components/tray": "1.6.0" }, - "devDependencies": { - "@spectrum-css/picker": "9.1.4" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/picker/src/spectrum-config.js b/packages/picker/src/spectrum-config.js deleted file mode 100644 index 9c4950da4a2..00000000000 --- a/packages/picker/src/spectrum-config.js +++ /dev/null @@ -1,124 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Picker'); -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/picker', - outPackage: 'picker', - fileName: 'picker', - hoistCustomPropertiesFrom: 'spectrum-Picker', - excludeByComponents: [builder.class('spectrum-Popover--bottom')], - components: [ - converter.classToId('spectrum-Picker', 'button'), - converter.classToAttribute('spectrum-Picker--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-loading', 'pending'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('is-focused', 'focused'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Picker--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Picker--sizeS', 's'], - ['spectrum-Picker--sizeL', 'l'], - ['spectrum-Picker--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-Picker-menuIcon', 'picker'), - converter.classToClass( - 'spectrum-Picker--sideLabel', - 'label-inline' - ), - converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), - converter.classToClass( - 'spectrum-ProgressCircle', - 'progress-circle' - ), - converter.classToClass('is-placeholder', 'placeholder'), - converter.classToClass( - 'spectrum-Picker-validationIcon', - 'validation-icon' - ), - converter.classToClass('spectrum-Picker-icon', 'icon'), - converter.classToId('spectrum-Picker-trigger', 'button'), - converter.classToClass('spectrum-Picker-label', 'label'), - converter.classToId('spectrum-Picker-popover', 'popover'), - { - expandSelector: true, - find: [builder.class('spectrum-Picker--quiet')], - replace: [ - { - replace: builder.attribute('quiet'), - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.id('button'), - }, - ], - }, - { - // prevents hoisting .focus-ring to :host as :focus-visible - find: [builder.class('focus-ring')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - { - // .spectrum-Picker .spectrum-Picker-icon - collapseSelector: true, - find: [ - builder.class('spectrum-Picker'), - builder.combinator('descendant'), - builder.class('spectrum-Picker-icon'), - ], - replace: [ - { - replace: builder.class('icon'), - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('spectrum-Picker--quiet')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('quiet')]], - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts index 4d58e553b32..a74e644096a 100644 --- a/packages/picker/test/index.ts +++ b/packages/picker/test/index.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/no-extraneous-dependencies */ /* Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); @@ -13,7 +12,6 @@ governing permissions and limitations under the License. import type { Picker } from '@spectrum-web-components/picker'; -// eslint-disable-next-line import/no-extraneous-dependencies import { aTimeout, elementUpdated, @@ -1515,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 34dac0a43c6..36233f3f7f6 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/overlay": "1.6.0" }, - "devDependencies": { - "@spectrum-css/popover": "8.2.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/popover/src/spectrum-config.js b/packages/popover/src/spectrum-config.js deleted file mode 100644 index c18099ff304..00000000000 --- a/packages/popover/src/spectrum-config.js +++ /dev/null @@ -1,50 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Popover'); -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/popover', - outPackage: 'popover', - fileName: 'popover', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Popover--withTip', 'tip'), - ...converter.enumerateAttributes( - [ - ['spectrum-Popover--top', 'top'], - ['spectrum-Popover--bottom', 'bottom'], - ['spectrum-Popover--left', 'left'], - ['spectrum-Popover--right', 'right'], - ], - 'placement', - 'substring' - ), - converter.classToId('spectrum-Popover-tip', 'tip'), - converter.classToClass( - 'spectrum-Popover-tip-triangle', - 'triangle' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index fd32d547eca..e1163e1246e 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", @@ -69,9 +71,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/progress-bar/src/spectrum-config.js b/packages/progress-bar/src/spectrum-config.js deleted file mode 100644 index 5d93081c9e4..00000000000 --- a/packages/progress-bar/src/spectrum-config.js +++ /dev/null @@ -1,77 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ProgressBar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/progressbar', - outPackage: 'progress-bar', - fileName: 'progress-bar', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-ProgressBar-track'), - converter.classToClass('spectrum-ProgressBar-fill'), - converter.classToClass('spectrum-ProgressBar-label'), - converter.classToClass('spectrum-ProgressBar-percentage'), - converter.classToAttribute( - 'spectrum-ProgressBar--sideLabel', - 'side-label' - ), - converter.classToAttribute('spectrum-ProgressBar-small'), - converter.classToAttribute( - 'spectrum-ProgressBar--indeterminate' - ), - converter.classToAttribute( - 'spectrum-ProgressBar--overBackground', - 'over-background' - ), - converter.classToAttribute('is-positive', 'positive'), - converter.classToAttribute('is-notice', 'notice'), - converter.classToAttribute('is-negative', 'negative'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ProgressBar--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressBar--sizeS', 's'], - ['spectrum-ProgressBar--sizeL', 'l'], - ['spectrum-ProgressBar--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressBar--staticBlack', 'black'], - ['spectrum-ProgressBar--staticWhite', 'white'], - ], - 'static-color' - ), - ], - excludeByComponents: [ - builder.class('spectrum-Meter--sizeS'), - builder.class('spectrum-Meter--sizeL'), - ], - }, - ], -}; - -export default config; diff --git a/packages/progress-circle/package.json b/packages/progress-circle/package.json index ae75e93c7bf..f8bd0ead0f7 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/progresscircle": "5.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/progress-circle/src/spectrum-config.js b/packages/progress-circle/src/spectrum-config.js deleted file mode 100644 index a8029e75903..00000000000 --- a/packages/progress-circle/src/spectrum-config.js +++ /dev/null @@ -1,65 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ProgressCircle'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/progresscircle', - outPackage: 'progress-circle', - fileName: 'progress-circle', - excludeByComponents: [ - builder.class('spectrum-ProgressCircle--medium'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute( - 'spectrum-ProgressCircle--indeterminate' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressCircle--small', 's'], - ['spectrum-ProgressCircle--large', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [['spectrum-ProgressCircle--staticWhite', 'white']], - 'static-color' - ), - converter.classToClass('spectrum-ProgressCircle-track'), - converter.classToClass('spectrum-ProgressCircle-fills'), - converter.classToClass('spectrum-ProgressCircle-fill'), - converter.classToClass('spectrum-ProgressCircle-fillMask1'), - converter.classToClass('spectrum-ProgressCircle-fillMask2'), - converter.classToClass('spectrum-ProgressCircle-fillSubMask1'), - converter.classToClass('spectrum-ProgressCircle-fillSubMask2'), - converter.classToClass( - 'spectrum-ProgressCircle--indeterminate-fill-submask-2', - 'fill-submask-2' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/radio/package.json b/packages/radio/package.json index 529a60af4f2..434f1000701 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", @@ -78,9 +80,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/radio": "10.0.0-s2-foundations.17" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/radio/src/spectrum-config.js b/packages/radio/src/spectrum-config.js deleted file mode 100644 index 6a199d6b15d..00000000000 --- a/packages/radio/src/spectrum-config.js +++ /dev/null @@ -1,143 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Radio'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/radio', - outPackage: 'radio', - fileName: 'radio', - components: [ - { - find: [builder.pseudoClass('focus')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - hoist: true, - }, - ], - }, - { - // .spectrum-Radio-input:focus-visible+.spectrum-Radio-button:after - find: [ - builder.class('spectrum-Radio-input'), - builder.pseudoClass('focus-visible'), - builder.combinator('+'), - builder.class('spectrum-Radio-button'), - builder.pseudoElement('after'), - ], - // :host(:focus-visible) #input + #button:after - replace: [ - { - replace: builder.id('input'), - }, - { - replace: builder.pseudoClass('focus-visible'), - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('button'), - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Radio-label'), - { - type: 'pseudo-class', - kind: 'lang', - }, - ], - replace: [ - { - replace: builder.id('label'), - }, - 'take', - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - { - find: builder.pseudoClass('active'), - hoist: true, - }, - converter.classToHost(), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.pseudoToAttribute('checked', 'checked'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-readOnly', 'readonly'), - converter.classToAttribute('spectrum-Radio--emphasized'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Radio--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Radio--sizeS', 's'], - ['spectrum-Radio--sizeL', 'l'], - ['spectrum-Radio--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Radio-input'), - converter.classToId('spectrum-Radio-button'), - converter.classToId('spectrum-Radio-label'), - { - find: [ - // .spectrum-Radio-button:after:dir(rtl) - builder.class('spectrum-Radio-button'), - builder.pseudoElement('after'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - // #button:dir(rtl):after - { - replace: builder.id('button'), - }, - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - builder.pseudoElement('after'), - ], - collapseSelector: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/search/package.json b/packages/search/package.json index 3535c121028..79f7f0d2d8c 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/textfield": "1.6.0" }, - "devDependencies": { - "@spectrum-css/search": "8.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js deleted file mode 100644 index 3be3e1e43ab..00000000000 --- a/packages/search/src/spectrum-config.js +++ /dev/null @@ -1,124 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Search'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/search', - outPackage: 'search', - fileName: 'search', - hoistCustomPropertiesFrom: 'spectrum-Search', - excludeByWholeSelector: [ - [ - builder.class('spectrum-Search'), - builder.class('spectrum-Search--sizeS'), - ], - [ - builder.class('spectrum-Search'), - builder.class('spectrum-Search--sizeXL'), - ], - [ - builder.class('spectrum-Search'), - builder.class('spectrum-Search--sizeL'), - ], - ], - components: [ - converter.classToId('spectrum-Search', 'textfield'), - converter.classToClass('spectrum-Search-input', 'input'), - converter.classToClass('spectrum-Icon', 'icon'), - converter.classToClass('spectrum-Search-icon', 'icon-search'), - converter.classToAttribute('spectrum-Search--quiet', 'quiet'), - converter.classToId('spectrum-Search-clearButton', 'button'), - converter.classToId('spectrum-Search-textfield', 'textfield'), - // Default to `size='m'` without needing the attribute - // converter.classToHost('spectrum-Search--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Search--sizeS', 's'], - ['spectrum-Search--sizeM', 'm'], - ['spectrum-Search--sizeL', 'l'], - ['spectrum-Search--sizeXL', 'xl'], - ], - 'size' - ), - { - find: [builder.class('spectrum-Search--sizeS')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 's'), - }, - ], - }, - { - find: [builder.class('spectrum-Search--sizeL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'l'), - }, - ], - }, - { - find: [builder.class('spectrum-Search--sizeXL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'xl'), - }, - ], - }, - - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('spectrum-Search--quiet')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('quiet')]], - }, - hoist: true, - }, - { - find: [builder.class('focus-ring')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 3006d6daf16..b076f67eb8d 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", @@ -88,9 +90,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/sidenav": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/sidenav/src/spectrum-config.js b/packages/sidenav/src/spectrum-config.js deleted file mode 100644 index 81db55f1956..00000000000 --- a/packages/sidenav/src/spectrum-config.js +++ /dev/null @@ -1,152 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Sidenav'); -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/sidenav', - outPackage: 'sidenav', - fileName: 'sidenav', - components: [ - converter.classToHost('spectrum-SideNav'), - converter.classToAttribute( - 'spectrum-SideNav--multiLevel', - 'multilevel' - ), - ], - excludeByComponents: [ - builder.class('spectrum-SideNav-item'), - builder.class('spectrum-SideNav-itemLink'), - builder.class('spectrum-SideNav-heading'), - ], - }, - { - inPackage: '@spectrum-css/sidenav', - outPackage: 'sidenav', - fileName: 'sidenav-item', - components: [ - converter.classToHost('spectrum-SideNav-item'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToId('spectrum-SideNav-itemLink', 'item-link'), - converter.classToId('spectrum-SideNav-link-text', 'link-text'), - converter.classToId('spectrum-SideNav', 'list'), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - // prevents hoisting .focus-ring to :host as :focus-visible - find: [builder.class('focus-ring')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - { - // .spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink - find: [ - builder.class('spectrum-SideNav--multiLevel'), - builder.combinator(' '), - builder.class('spectrum-SideNav-itemLink'), - ], - replace: [ - { - replace: builder.id('item-link'), - }, - { - replace: builder.attribute('data-level'), - hoist: false, - }, - ], - collapseSelector: true, - }, - { - // .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink - find: [ - builder.class('spectrum-SideNav--multiLevel'), - builder.combinator(' '), - builder.class('spectrum-SideNav'), - builder.combinator(' '), - builder.class('spectrum-SideNav-itemLink'), - ], - replace: [ - { - replace: builder.id('item-link'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.attribute('data-level', '0')], - ], - }, - hoist: false, - }, - ], - collapseSelector: true, - }, - { - // .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink - find: [ - builder.class('spectrum-SideNav--multiLevel'), - builder.combinator(' '), - builder.class('spectrum-SideNav'), - builder.combinator(' '), - builder.class('spectrum-SideNav'), - builder.combinator(' '), - builder.class('spectrum-SideNav-itemLink'), - ], - replace: [ - { - replace: builder.id('item-link'), - }, - { - replace: builder.attribute('data-level', '2'), - hoist: false, - }, - ], - collapseSelector: true, - }, - ], - excludeByWholeSelector: [ - [builder.class('spectrum-SideNav-heading')], - ], - }, - { - inPackage: '@spectrum-css/sidenav', - outPackage: 'sidenav', - fileName: 'sidenav-heading', - components: [ - converter.classToId('spectrum-SideNav-heading', 'heading'), - converter.classToId('spectrum-SideNav-heading', 'heading'), - converter.classToId('spectrum-SideNav', 'list'), - ], - excludeByComponents: [ - builder.class('spectrum-SideNav-item'), - builder.class('spectrum-SideNav-itemLink'), - builder.class('spectrum-SideNav--multiLevel'), - ], - }, - ], -}; - -export default config; diff --git a/packages/slider/package.json b/packages/slider/package.json index 998e7059ef3..58c4fd8cc5e 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", @@ -89,9 +91,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/theme": "1.6.0" }, - "devDependencies": { - "@spectrum-css/slider": "6.3.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/slider/src/spectrum-config.js b/packages/slider/src/spectrum-config.js deleted file mode 100644 index 4dd84bc8a84..00000000000 --- a/packages/slider/src/spectrum-config.js +++ /dev/null @@ -1,205 +0,0 @@ -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Slider'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/slider', - outPackage: 'slider', - fileName: 'slider', - hoistCustomPropertiesFrom: 'spectrum-Slider', - excludeByWholeSelector: [ - [ - builder.attribute('dir'), - builder.combinator(' '), - builder.attribute('dir'), - builder.combinator(' '), - builder.class('spectrum-Slider--range'), - builder.combinator(' '), - builder.class('spectrum-Slider-track'), - ], - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - { - exactSelector: true, - find: [builder.class('spectrum-Slider--tick')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'tick-labels', - }, - ], - }, - }, - ], - }, - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Slider--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Slider--sizeS', 's'], - ['spectrum-Slider--sizeL', 'l'], - ['spectrum-Slider--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Slider--color', 'color'], - ['spectrum-Slider--filled', 'filled'], - ['spectrum-Slider--ramp', 'ramp'], - ['spectrum-Slider--range', 'range'], - ['spectrum-Slider--tick', 'tick'], - ], - 'variant' - ), - { - find: [ - builder.class('spectrum-Slider-labelContainer'), - builder.combinator('+'), - builder.class('spectrum-Slider-controls'), - ], - replace: [ - { - replace: builder.id('label-container'), - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('track'), - }, - ], - }, - converter.classToId('spectrum-Slider-buffer', 'buffer'), - converter.classToId('spectrum-Slider-controls', 'controls'), - converter.classToId('spectrum-Slider-label', 'label'), - converter.classToId( - 'spectrum-Slider-labelContainer', - 'label-container' - ), - converter.classToId('spectrum-Slider-ramp', 'ramp'), - converter.classToId('spectrum-Slider-value', 'value'), - converter.classToClass('spectrum-Slider-handle', 'handle'), - converter.classToClass('spectrum-Slider-input', 'input'), - converter.classToClass('spectrum-Slider-tick', 'tick'), - converter.classToClass('spectrum-Slider-fill--right', 'offset'), - converter.classToClass('spectrum-Slider-fill', 'fill'), - converter.classToClass( - 'spectrum-Slider-tickLabel', - 'tickLabel' - ), - converter.classToClass('spectrum-Slider-ticks', 'ticks'), - converter.classToClass( - 'spectrum-Slider-trackContainer', - 'trackContainer' - ), - converter.classToClass( - 'spectrum-Slider-handleContainer', - 'handleContainer' - ), - converter.classToClass('spectrum-Slider-track', 'track'), - converter.classToClass('is-focused', 'handle-highlight'), - converter.classToClass('is-dragged', 'dragging'), - { - find: [ - builder.class('spectrum-Slider-controls'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'has', - selectors: [ - [ - builder.class( - 'spectrum-Slider-ticks' - ), - ], - ], - }, - ], - ], - }, - ], - replace: [ - { - replace: builder.id('controls'), - }, - { - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'has', - selectors: [ - [builder.class('ticks')], - ], - }, - ], - ], - }, - }, - ], - }, - { - find: [ - // .spectrum-Slider-handle:before:dir(rtl) - builder.class('spectrum-Slider-handle'), - builder.pseudoElement('before'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - // .handle:dir(rtl):before - { - replace: builder.class('handle'), - }, - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - builder.pseudoElement('before'), - ], - collapseSelector: true, - }, - ], - }, - ], -}; -export default config; diff --git a/packages/split-view/package.json b/packages/split-view/package.json index ce68c696d84..79f3a74a277 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", @@ -71,9 +73,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/splitview": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/split-view/src/spectrum-config.js b/packages/split-view/src/spectrum-config.js deleted file mode 100644 index 3e12e9c60a7..00000000000 --- a/packages/split-view/src/spectrum-config.js +++ /dev/null @@ -1,84 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-SplitView'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/splitview', - outPackage: 'split-view', - fileName: 'split-view', - hoistCustomPropertiesFrom: 'spectrum-SplitView', - components: [ - converter.classToHost('spectrum-SplitView'), - converter.classToAttribute('spectrum-SplitView--vertical'), - converter.classToId('spectrum-SplitView-splitter'), - converter.classToId('spectrum-SplitView-gripper'), - converter.classToSlotted('spectrum-SplitView-pane'), - { - find: [ - builder.class('spectrum-SplitView-splitter'), - builder.class('focus-ring'), - ], - replace: [ - { replace: builder.id('splitter') }, - { - replace: builder.pseudoClass('focus-visible'), - hoist: false, - }, - ], - }, - { - find: [ - builder.class('spectrum-SplitView-splitter'), - builder.class('is-draggable'), - ], - replace: [ - { replace: builder.id('splitter') }, - { - replace: builder.attribute('resizable'), - hoist: true, - }, - ], - }, - { - find: [ - builder.class('spectrum-SplitView-splitter'), - builder.class('is-draggable'), - builder.class('focus-ring'), - ], - replace: [ - { replace: builder.id('splitter') }, - { - replace: builder.attribute('resizable'), - hoist: true, - }, - { - replace: builder.pseudoClass('focus-visible'), - hoist: false, - }, - ], - }, - ], - }, - ], -}; diff --git a/packages/status-light/package.json b/packages/status-light/package.json index 21c2c64d891..e1cc87cdf7a 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", @@ -66,9 +68,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/statuslight": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/status-light/src/spectrum-config.js b/packages/status-light/src/spectrum-config.js deleted file mode 100644 index 864e6c03d48..00000000000 --- a/packages/status-light/src/spectrum-config.js +++ /dev/null @@ -1,81 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-StatusLight'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/statuslight', - outPackage: 'status-light', - fileName: 'status-light', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('spectrum-StatusLight--active'), - ...converter.enumerateAttributes( - [ - ['spectrum-StatusLight--negative', 'negative'], - ['spectrum-StatusLight--notice', 'notice'], - ['spectrum-StatusLight--positive', 'positive'], - ['spectrum-StatusLight--info', 'info'], - ['spectrum-StatusLight--neutral', 'neutral'], - ['spectrum-StatusLight--yellow', 'yellow'], - ['spectrum-StatusLight--fuchsia', 'fuchsia'], - ['spectrum-StatusLight--indigo', 'indigo'], - ['spectrum-StatusLight--seafoam', 'seafoam'], - ['spectrum-StatusLight--chartreuse', 'chartreuse'], - ['spectrum-StatusLight--magenta', 'magenta'], - ['spectrum-StatusLight--purple', 'purple'], - ['spectrum-StatusLight--celery', 'celery'], - ], - 'variant' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-StatusLight--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-StatusLight--sizeS', 's'], - ['spectrum-StatusLight--sizeL', 'l'], - ['spectrum-StatusLight--sizeXL', 'xl'], - ], - 'size' - ), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - { - exactSelector: true, - find: [builder.class('spectrum-StatusLight')], - replace: [ - { - replace: builder.attribute('dir'), - }, - ], - }, - ], - }, - ], -}; diff --git a/packages/swatch/package.json b/packages/swatch/package.json index 56703f68740..ce275629c64 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", @@ -82,10 +84,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/swatch": "7.0.0-s2-foundations.17", - "@spectrum-css/swatchgroup": "4.0.0-s2-foundations.15" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/swatch/src/spectrum-config.js b/packages/swatch/src/spectrum-config.js deleted file mode 100644 index 9dd8cab4e63..00000000000 --- a/packages/swatch/src/spectrum-config.js +++ /dev/null @@ -1,123 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Swatch'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/swatchgroup', - outPackage: 'swatch', - fileName: 'swatch-group', - hoistCustomPropertiesFrom: 'spectrum-SwatchGroup', - components: [ - converter.classToHost('spectrum-SwatchGroup'), - ...converter.enumerateAttributes( - [ - ['spectrum-SwatchGroup--compact', 'compact'], - ['spectrum-SwatchGroup--spacious', 'spacious'], - ], - 'density' - ), - ], - }, - { - inPackage: '@spectrum-css/swatch', - outPackage: 'swatch', - fileName: 'swatch', - hoistCustomPropertiesFrom: 'spectrum-Swatch', - excludeByComponents: [builder.class('🤫')], - components: [ - converter.classToHost('spectrum-Swatch'), - ...converter.enumerateAttributes( - [ - ['spectrum-Swatch--lightBorder', 'light'], - ['spectrum-Swatch--noBorder', 'none'], - ], - 'border' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Swatch--roundingNone', 'none'], - ['spectrum-Swatch--roundingFull', 'full'], - ], - 'rounding' - ), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-mixedValue', 'mixed-value'), - converter.classToAttribute('is-nothing', 'nothing'), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [['spectrum-Swatch--rectangle', 'rectangle']], - 'shape' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Swatch--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Swatch--sizeXS', 'xs'], - ['spectrum-Swatch--sizeS', 's'], - ['spectrum-Swatch--sizeL', 'l'], - ], - 'size' - ), - converter.classToClass('spectrum-Swatch-fill'), - converter.classToClass('spectrum-Swatch-disabledIcon'), - converter.classToClass('spectrum-Swatch-mixedValueIcon'), - converter.classToSlotted('spectrum-Swatch-image', 'image'), - { - find: [ - builder.class('spectrum-Swatch'), - builder.pseudoClass('focus-visible'), - builder.pseudoElement('after'), - ], - replace: [ - { - replace: builder.pseudoClass('host'), - }, - { - replace: builder.pseudoClass('focus-visible'), - hoist: true, - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - { - find: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [builder.class('spectrum-Swatch--rectangle')], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [[builder.attribute('shape', 'rectangle')]], - }, - hoist: true, - }, - ], - }, - ], -}; diff --git a/packages/switch/package.json b/packages/switch/package.json index d666201d6e5..909af64f3c6 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", @@ -68,9 +70,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/checkbox": "1.6.0" }, - "devDependencies": { - "@spectrum-css/switch": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/switch/src/spectrum-config.js b/packages/switch/src/spectrum-config.js deleted file mode 100644 index 12d81f0c78c..00000000000 --- a/packages/switch/src/spectrum-config.js +++ /dev/null @@ -1,73 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Switch'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/switch', - outPackage: 'switch', - fileName: 'switch', - components: [ - { - find: [ - builder.class('spectrum-Switch-input'), - builder.pseudoClass('focus-visible'), - ], - replace: [ - { - replace: builder.id('input'), - }, - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - { - find: builder.pseudoClass('active'), - replace: builder.pseudoClass('active'), - hoist: true, - }, - converter.classToHost(), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Switch--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Switch--sizeS', 's'], - ['spectrum-Switch--sizeL', 'l'], - ['spectrum-Switch--sizeXL', 'xl'], - ], - 'size' - ), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.pseudoToAttribute('checked', 'checked'), - converter.classToAttribute('spectrum-Switch--emphasized'), - converter.classToAttribute('spectrum-Switch--disabled'), - converter.classToId('spectrum-Switch-input'), - converter.classToId('spectrum-Switch-switch'), - converter.classToId('spectrum-Switch-label'), - ], - }, - ], -}; - -export default config; diff --git a/packages/table/package.json b/packages/table/package.json index d7dc13bb9ff..3fe9799e5ea 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", @@ -134,9 +136,6 @@ "@spectrum-web-components/icon": "1.6.0", "@spectrum-web-components/icons-ui": "1.6.0" }, - "devDependencies": { - "@spectrum-css/table": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/table/src/spectrum-config.js b/packages/table/src/spectrum-config.js deleted file mode 100644 index 433f587ff73..00000000000 --- a/packages/table/src/spectrum-config.js +++ /dev/null @@ -1,319 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Table'); -const converterCell = converterFor('spectrum-Table-cell'); -const converterHeadCell = converterFor('spectrum-Table-headCell'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table', - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Table--quiet'), - converter.classToAttribute('spectrum-Table--emphasized'), - ...converter.enumerateAttributes( - [ - ['spectrum-Table--sizeS', 's'], - ['spectrum-Table--sizeL', 'l'], - ['spectrum-Table--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [['spectrum-Table--compact'], ['spectrum-Table--spacious']], - 'density' - ), - ], - excludeByComponents: [ - builder.class('spectrum-Table-sortedIcon'), - builder.class('spectrum-Table-headCell'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!-)/, - }, - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-body', - components: [ - converter.classToHost('spectrum-Table-body'), - converter.classToAttribute('is-drop-target', 'drop-target'), - ], - excludeByComponents: [ - builder.class('spectrum-Table'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!b)/, - }, - builder.element('tbody'), - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-cell', - components: [ - converterCell.classToHost(), - ...converterCell.enumerateAttributes( - [ - ['spectrum-Table-cell--alignCenter', 'center'], - ['spectrum-Table-cell--alignRight', 'end'], - ], - 'align' - ), - converterCell.classToClass('spectrum-Table-cell--divider'), - converterCell.classToAttribute('is-focused', 'focused'), - ], - excludeByComponents: [ - builder.class('spectrum-Table'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!cell)/, - }, - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-checkbox-cell', - components: [ - converterHeadCell.classToAttribute( - 'spectrum-Table-headCell', - 'head-cell' - ), - converter.classToAttribute('is-sortable', 'sortable'), - converter.classToAttribute('is-focused', 'focused'), - converter.pseudoToAttribute('active', 'active'), - { - find: [builder.class('spectrum-Table-cell')], - replace: [ - //:host(:not([head-cell])) - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.attribute('head-cell')], - ], - }, - ], - }, - }, - ], - }, - { - find: [builder.class('spectrum-Table-checkboxCell')], - replace: [ - //:host(:host) for increased specificity, to be higher than [head-cell] selectors. - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'pseudo-class', - kind: 'host', - }, - ], - }, - }, - ], - }, - { - find: [builder.class('spectrum-Table-checkbox')], - replace: [ - { - replace: { - type: 'type', - name: 'sp-checkbox', - }, - }, - ], - }, - ], - excludeByComponents: [ - builder.class('spectrum-Table'), - // Also include all Table-cell and Table-headCell classes. - // They are converted to selectors with or without the [head-cell] attribute. - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!checkbox|headCell|cell)/, - }, - builder.class('is-sortable'), - // Unneeded cell modifier classes (align*, collapsible, divider). - { - type: 'class', - regex: /spectrum-Table-cell--/, - name: 'regex', - }, - builder.element('div'), - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-head', - components: [converter.classToHost('spectrum-Table-head')], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-head$/, - }, - ], - excludeByComponents: [builder.attribute('role')], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-head-cell', - components: [ - converterHeadCell.classToHost(), - converterHeadCell.classToAttribute('is-sortable', 'sortable'), - converterHeadCell.classToAttribute('is-focused', 'focused'), - converterHeadCell.pseudoToAttribute('active', 'active'), - ...converterHeadCell.enumerateAttributes( - [ - ['is-sorted-asc', 'asc'], - ['is-sorted-desc', 'desc'], - ], - 'sort-direction' - ), - converterHeadCell.classToClass( - 'spectrum-Table-sortedIcon', - 'sortedIcon' - ), - ], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(headCell|sortedIcon)$/, - }, - ], - excludeByComponents: [ - { - type: 'class', - regex: /spectrum-Table--/, - name: 'regex', - }, - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-row', - components: [ - converter.classToHost('spectrum-Table-row'), - { - find: builder.pseudoClass('first-child'), - replace: builder.pseudoClass('first-child'), - hoist: true, - }, - { - find: builder.pseudoClass('last-child'), - replace: builder.pseudoClass('last-child'), - hoist: true, - }, - converter.classToAttribute( - 'spectrum-Table-row--emphasized', - 'emphasized' - ), - converter.classToAttribute('is-drop-target', 'drop-target'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToSlotted('spectrum-Table-cell'), - { - find: [ - builder.class('spectrum-Table-cell'), - builder.pseudoClass('first-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('first-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-Table-cell'), - builder.pseudoClass('last-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('last-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - ], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-row/, - }, - ], - excludeByComponents: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table--/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Table$/, - }, - builder.element('tbody'), - ], - }, - ], -}; - -export default config; diff --git a/packages/tabs/package.json b/packages/tabs/package.json index f357dfd9f3f..6f10e59349c 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", @@ -101,9 +103,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tabs": "6.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tabs/src/spectrum-config.js b/packages/tabs/src/spectrum-config.js deleted file mode 100644 index 434eb3ee1a0..00000000000 --- a/packages/tabs/src/spectrum-config.js +++ /dev/null @@ -1,395 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Tabs'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/tabs', - outPackage: 'tabs', - fileName: 'tabs', - components: [ - { - // .spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator) - find: [ - builder.class('spectrum-Tabs--horizontal'), - builder.combinator(' '), - builder.class('spectrum-Tabs-item'), - builder.combinator('+'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.class( - 'spectrum-Tabs-selectionIndicator' - ), - ], - ], - }, - ], - replace: [ - //:host([direction^='horizontal']) ::slotted(:not([slot])):not(.spectrum-Tabs-selectionIndicator) - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - builder.attribute( - 'direction', - 'horizontal', - 'prefix' - ), - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.pseudoClass( - 'first-child' - ), - ], - ], - }, - ], - }, - }, - ], - collapseSelector: true, - }, - { - exactSelector: true, - find: [builder.class('spectrum-Tabs--quiet')], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - ], - }, - { - expandSelector: true, - find: [builder.class('spectrum-Tabs--horizontal')], - replace: [ - { - replace: builder.attribute( - 'direction', - 'horizontal', - 'prefix' - ), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - expandSelector: true, - find: [builder.class('spectrum-Tabs--vertical')], - replace: [ - { - replace: builder.attribute( - 'direction', - 'vertical', - 'prefix' - ), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - expandSelector: true, - find: [builder.class('spectrum-Tabs--vertical-right')], - replace: [ - { - replace: builder.attribute( - 'direction', - 'vertical-right', - 'prefix' - ), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - collapseSelector: true, - find: [ - builder.class('spectrum-Tabs-item'), - builder.combinator('+'), - { type: 'universal' }, - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.class( - 'spectrum-Tabs-selectionIndicator' - ), - ], - ], - }, - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.attribute('slot')], - ], - }, - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'first-child', - }, - ], - ], - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - converter.classToId('spectrum-Tabs', 'list'), - converter.classToAttribute('spectrum-Tabs--compact'), - converter.classToAttribute('spectrum-Tabs--quiet'), - converter.classToAttribute('spectrum-Tabs--emphasized'), - converter.classToId( - 'spectrum-Tabs-selectionIndicator', - 'selection-indicator' - ), - { - find: builder.class('spectrum-Tabs-item'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('slot')]], - }, - ], - }, - }, - { - find: builder.class('is-selected'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.attribute('selected'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('slot')]], - }, - ], - }, - }, - { - find: builder.class('is-disabled'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.attribute('disabled'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('slot')]], - }, - ], - }, - }, - ], - excludeByComponents: [ - builder.class('spectrum-Tabs-itemLabel'), - builder.class('spectrum-Icon'), - builder.pseudoClass('hover'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Tabs--size/, - }, - ], - excludeByWholeSelector: [ - [builder.class('spectrum-Tabs-item')], - [ - builder.class('spectrum-Tabs-item'), - builder.pseudoElement('before'), - ], - [ - builder.class('spectrum-Tabs-item'), - builder.class('focus-ring'), - builder.pseudoElement('before'), - ], - [ - builder.class('spectrum-Tabs-item'), - builder.pseudoClass('focus-visible'), - ], - [ - builder.class('spectrum-Tabs-item'), - builder.pseudoClass('focus-visible'), - builder.pseudoElement('before'), - ], - [ - // .spectrum-Tabs .is-selected:focus - builder.class('spectrum-Tabs'), - builder.combinator(' '), - builder.class('is-selected'), - builder.pseudoClass('focus'), - ], - [ - // .spectrum-Tabs .is-selected:focus-visible - builder.class('spectrum-Tabs'), - builder.combinator(' '), - builder.class('is-selected'), - builder.pseudoClass('focus-visible'), - ], - ], - }, - { - inPackage: '@spectrum-css/tabs', - outPackage: 'tabs', - fileName: 'tab', - components: [ - // .spectrum-Icon+.spectrum-Tabs-itemLabel - // slot[name='icon'] + #item-label - { - find: [ - builder.class('spectrum-Icon'), - builder.combinator('+'), - builder.class('spectrum-Tabs-itemLabel'), - ], - replace: [ - { - replace: builder.attribute('name', 'icon'), - hoist: false, - }, - ], - }, - converter.classToHost('spectrum-Tabs-item'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToId('spectrum-Tabs-itemLabel', 'item-label'), - converter.classToSlotted('spectrum-Icon', 'icon'), - ], - excludeByComponents: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Tabs--/, - }, - builder.class('spectrum-Tabs'), - builder.class('spectrum-Tabs-selectionIndicator'), - ], - }, - { - inPackage: '@spectrum-css/tabs', - outPackage: 'tabs', - fileName: 'tabs-sizes', - components: [ - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Tabs--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Tabs--sizeS', 's'], - ['spectrum-Tabs--sizeL', 'l'], - ['spectrum-Tabs--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Tabs', 'list'), - ], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Tabs--size/, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/tags/package.json b/packages/tags/package.json index 923b6e5ae75..ba288fd9e9d 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", @@ -79,10 +81,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tag": "10.1.0", - "@spectrum-css/taggroup": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tags/src/spectrum-config.js b/packages/tags/src/spectrum-config.js deleted file mode 100644 index e460aa7db17..00000000000 --- a/packages/tags/src/spectrum-config.js +++ /dev/null @@ -1,112 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Tag'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/taggroup', - outPackage: 'tags', - fileName: 'tags', - components: [ - converter.classToHost('spectrum-TagGroup'), - { - find: builder.class('spectrum-TagGroup-item'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'universal', - }, - ], - }, - }, - ], - }, - { - inPackage: '@spectrum-css/tag', - outPackage: 'tags', - fileName: 'tag', - components: [ - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - { - find: builder.pseudoClass('focus-visible'), - hoist: true, - }, - converter.classToHost(), - converter.classToAttribute('is-emphasized', 'emphasized'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute( - 'spectrum-Tag--removable', - 'deletable' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Tag--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Tag--sizeS', 's'], - ['spectrum-Tag--sizeL', 'l'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-Tag-clearButton', - 'clear-button' - ), - converter.classToClass('spectrum-ClearButton', 'clear-button'), - converter.classToClass('spectrum-Tag-itemLabel', 'label'), - converter.classToSlotted('spectrum-Avatar', 'avatar'), - converter.classToSlotted('spectrum-Tag-itemIcon', 'icon'), - ], - }, - ], -}; - -export default config; diff --git a/packages/textfield/package.json b/packages/textfield/package.json index 39396c60ae5..3219d8591a1 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", @@ -71,9 +73,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/textfield": "8.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/textfield/src/spectrum-config.js b/packages/textfield/src/spectrum-config.js deleted file mode 100644 index fec9c085e58..00000000000 --- a/packages/textfield/src/spectrum-config.js +++ /dev/null @@ -1,158 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Textfield'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/textfield', - outPackage: 'textfield', - fileName: 'textfield', - hoistCustomPropertiesFrom: 'spectrum-Textfield', - excludeByComponents: [builder.class('🤫')], - components: [ - converter.classToId('spectrum-Textfield', 'textfield'), - converter.classToClass('spectrum-Textfield-input', 'input'), - { - find: [ - builder.class('spectrum-Textfield-input'), - builder.class('focus-ring'), - ], - replace: [ - { replace: builder.class('input') }, - { replace: builder.pseudoClass('focus-visible') }, - ], - hoist: false, - }, - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Textfield--sizeM'), - { - find: [builder.class('spectrum-Textfield--sizeS')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 's'), - }, - ], - }, - { - find: [builder.class('spectrum-Textfield--sizeL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'l'), - }, - ], - }, - { - find: [builder.class('spectrum-Textfield--sizeXL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'xl'), - }, - ], - }, - { - // .spectrum-Textfield--quiet:after - find: [ - builder.class('spectrum-Textfield--quiet'), - builder.pseudoElement('after'), - ], - // :host([quiet]) #textfield:after { - replace: [ - { - replace: builder.attribute('quiet'), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - { - // .spectrum-Textfield--quiet.is-keyboardFocused:after - find: [ - builder.class('spectrum-Textfield--quiet'), - builder.class('is-keyboardFocused'), - builder.pseudoElement('after'), - ], - // :host([quiet][focused]) #textfield:after - replace: [ - { - replace: builder.attribute('quiet'), - }, - { - replace: builder.attribute('focused'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - ...converter.enumerateAttributes( - [ - ['spectrum-Textfield--sizeS', 's'], - ['spectrum-Textfield--sizeL', 'l'], - ['spectrum-Textfield--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-Textfield-validationIcon', - 'icon' - ), - converter.classToClass( - 'spectrum-Textfield-icon', - 'icon-workflow' - ), - converter.classToClass('spectrum-Search-icon', 'icon-search'), - converter.classToAttribute('spectrum-Textfield--multiline'), - converter.classToAttribute('spectrum-Textfield--quiet'), - converter.classToAttribute( - 'spectrum-Textfield--grows', - 'grows' - ), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-keyboardFocused', 'focused'), - converter.classToAttribute('is-valid', 'valid'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-readOnly', 'readonly'), - ], - }, - ], -}; diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index 163f41e7005..3b4d175fac9 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", @@ -67,9 +69,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/opacity-checkerboard": "1.6.0" }, - "devDependencies": { - "@spectrum-css/thumbnail": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/thumbnail/src/spectrum-config.js b/packages/thumbnail/src/spectrum-config.js deleted file mode 100644 index 78fbfe179ec..00000000000 --- a/packages/thumbnail/src/spectrum-config.js +++ /dev/null @@ -1,58 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Thumbnail'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/thumbnail', - outPackage: 'thumbnail', - fileName: 'thumbnail', - components: [ - converter.classToHost(), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('spectrum-Thumbnail--cover'), - converter.classToAttribute('spectrum-Thumbnail-layer'), - ...converter.enumerateAttributes( - [ - ['spectrum-Thumbnail--size50', '50'], - ['spectrum-Thumbnail--size75', '75'], - ['spectrum-Thumbnail--size100', '100'], - ['spectrum-Thumbnail--size200', '200'], - ['spectrum-Thumbnail--size300', '300'], - ['spectrum-Thumbnail--size400', '400'], - ['spectrum-Thumbnail--size500', '500'], - ['spectrum-Thumbnail--size600', '600'], - ['spectrum-Thumbnail--size700', '700'], - ['spectrum-Thumbnail--size800', '800'], - ['spectrum-Thumbnail--size900', '900'], - ['spectrum-Thumbnail--size1000', '1000'], - ], - 'size' - ), - converter.classToClass('spectrum-Thumbnail-background'), - converter.classToClass('spectrum-Thumbnail-image-wrapper'), - converter.classToClass('spectrum-Thumbnail-layer-inner'), - converter.classToSlotted('spectrum-Thumbnail-image'), - ], - }, - ], -}; diff --git a/packages/toast/package.json b/packages/toast/package.json index 5f2c23ba410..0cb2b16942c 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/toast": "11.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/toast/src/spectrum-config.js b/packages/toast/src/spectrum-config.js deleted file mode 100644 index a48395267bf..00000000000 --- a/packages/toast/src/spectrum-config.js +++ /dev/null @@ -1,91 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Toast'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/toast', - outPackage: 'toast', - fileName: 'toast', - components: [ - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-Toast--negative'], - ['spectrum-Toast--positive'], - ['spectrum-Toast--info'], - ['spectrum-Toast--error'], - ['spectrum-Toast--warning'], - ['spectrum-Toast--success'], - ], - 'variant' - ), - converter.classToClass('spectrum-Toast-body'), - converter.classToClass('spectrum-Toast-buttons'), - converter.classToClass('spectrum-Toast-content'), - converter.classToClass('spectrum-Toast-typeIcon', 'type'), - converter.classToClass('spectrum-Toast-closeButton'), - { - find: [ - // .spectrum-Toast-body .spectrum-Button:dir(rtl) - builder.class('spectrum-Toast-body'), - builder.combinator(' '), - builder.class('spectrum-Button'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - // .body ::slotted([slot='action']:dir(rtl)) - { - replace: builder.class('body'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.attribute('slot', 'action'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - }, - }, - ], - collapseSelector: true, - }, - converter.classToSlotted('spectrum-Button', 'action'), - ], - }, - ], -}; - -export default config; diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 094c07353f5..aae6c35e23f 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", @@ -73,9 +75,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tooltip": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tooltip/src/spectrum-config.js b/packages/tooltip/src/spectrum-config.js deleted file mode 100644 index 02dd45d53ed..00000000000 --- a/packages/tooltip/src/spectrum-config.js +++ /dev/null @@ -1,168 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Tooltip'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/tooltip', - outPackage: 'tooltip', - fileName: 'tooltip', - excludeByComponents: [builder.class('u-tooltip-showOnHover')], - components: [ - converter.classToId('spectrum-Tooltip', 'tooltip'), - converter.classToAttribute('is-open', 'open'), - { - find: [builder.class('spectrum-Tooltip--top')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'top', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--bottom')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'bottom', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--left')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'left', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--right')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'right', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--info')], - replace: [ - { - replace: builder.attribute('variant', 'info'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--positive')], - replace: [ - { - replace: builder.attribute('variant', 'positive'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--negative')], - replace: [ - { - replace: builder.attribute('variant', 'negative'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - converter.classToId('spectrum-Tooltip-label'), - converter.classToId('spectrum-Tooltip-tip'), - converter.classToSlotted('spectrum-Tooltip-typeIcon', 'icon'), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - ], - }, - ], -}; diff --git a/packages/top-nav/package.json b/packages/top-nav/package.json index dc45fcae0e6..50e97fe2dc8 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 d86e56e0918..2b2ca994cd1 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", @@ -70,9 +72,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/underlay": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tray": "5.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts index 34aedf74489..b9297f73ed3 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/tray/src/spectrum-config.js b/packages/tray/src/spectrum-config.js deleted file mode 100644 index 4692c05b3e6..00000000000 --- a/packages/tray/src/spectrum-config.js +++ /dev/null @@ -1,72 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor(''); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/tray', - outPackage: 'tray', - fileName: 'tray-wrapper', - components: [ - converter.classToHost('spectrum-Tray-wrapper'), - converter.classToAttribute('is-open', 'open'), - ], - excludeByComponents: [builder.class('spectrum-Tray')], - }, - { - inPackage: '@spectrum-css/tray', - outPackage: 'tray', - fileName: 'tray', - hoistCustomPropertiesFrom: 'spectrum-Tray', - components: [ - { - find: [ - builder.class('spectrum-Tray'), - builder.class('is-open'), - ], - replace: [ - { - replace: builder.attribute('open'), - hoist: true, - }, - { - replace: { - type: 'combinator', - value: 'descendant', - }, - }, - { - replace: builder.class('tray'), - }, - ], - }, - converter.classToClass('spectrum-Tray', 'tray'), - converter.classToSlotted('spectrum-Dialog'), - converter.classToAttribute('is-open', 'open'), - ], - excludeByComponents: [builder.class('spectrum-Tray-wrapper')], - }, - ], -}; - -export default config; diff --git a/packages/underlay/package.json b/packages/underlay/package.json index d3f15946796..ba541c0aec0 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", @@ -66,9 +68,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/underlay": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/underlay/src/spectrum-config.js b/packages/underlay/src/spectrum-config.js deleted file mode 100644 index 3f74919f915..00000000000 --- a/packages/underlay/src/spectrum-config.js +++ /dev/null @@ -1,35 +0,0 @@ -// @ts-check -/* -Copyright 2023 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 { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Underlay'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/underlay', - outPackage: 'underlay', - fileName: 'underlay', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - ], - }, - ], -}; - -export default config; diff --git a/projects/css-custom-vars-viewer/package.json b/projects/css-custom-vars-viewer/package.json index 7800b773191..1b8412c5d56 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/content/guides/adding-component.md b/projects/documentation/content/guides/adding-component.md index 65d9b61acc1..f948cbddde5 100644 --- a/projects/documentation/content/guides/adding-component.md +++ b/projects/documentation/content/guides/adding-component.md @@ -10,11 +10,6 @@ slug: developing-component This guide explains the techniques involved in the ongoing development a Spectrum control as a spectrum-web-components. -The components in spectrum-web-components are based on the CSS definitions in -spectrum-css. Typically, component -implementations contain very little code. The CSS from the `spectrum-css` -project typically specifies most, if not all, of the presentation details. - ## What is a web component? According to webcomponents.org, @@ -29,7 +24,6 @@ web components are: In order to add a new component to this library, you will need to develop a working knowledge of the following technologies: -- Spectrum CSS: A CSS implementation of the Spectrum design language - Web Components: Standards based method for adding new HTML tags to a browser - Shadow DOM: The part of the Web Component spec that allows for encapsulation of component styles and child nodes - lit-element: A simple base class for creating fast, lightweight web components @@ -45,81 +39,7 @@ the heart of a web component. It isolates the component from the styles and DOM of the containing page. While this offers many benefits, it also means that we must structure our CSS very differently. -The CSS from the spectrum-css project -is intended to be installed globally on a web page. Using it in the context of a -web component requires that we modify it. To facilitate that, this project comes -with a config-driven processor that can transform the Spectrum CSS into a format -that can be consumed in a web component. - -The first step is to create a directory and a `spectrum-config.js` file for your -new component. This config file contains information about the structure of -the web component in relation to the Spectrum CSS classes. - -Below is a fragment of the `spectrum-config.js` file for `sp-button`. - -```javascript -const config = { - conversions: [ - { - inPackage: '@spectrum-css/button', - outPackage: 'button', - fileName: 'button', - excludeByComponents: [builder.element('a')], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Button--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.pseudoToAttribute('disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--sizeS', 's'], - ['spectrum-Button--sizeM', 'm'], - ['spectrum-Button--sizeL', 'l'], - ['spectrum-Button--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Button-label'), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - find: [ - builder.class('spectrum-Icon'), - builder.combinator('+'), - builder.class('spectrum-Button-label'), - ], - replace: [ - { - replace: builder.attribute('name', 'icon', 'equal'), - hoist: false, - }, - builder.combinator('+'), - builder.id('label'), - ], - }, - { - hoist: false, - find: builder.pseudoClass('empty'), - replace: builder.attribute('hidden'), - }, - ], - }, - ], -}; -``` - -If we wanted to create a button component using this config file, the steps would be as -follows: - -1. Make the directory `src/components/button` -2. In that new directory, create a `spectrum-config.js` - file with the above contents -3. Run the command `yarn process-spectrum` to create the CSS file - -When you do the above, the config-driven processor -will look in the `spectrum-css` project -for the matching CSS file. -It will parse that file and restructure the CSS as per the configuration -instructions. +For more information on how to structure your CSS, see the [Styling](/guides/styling-components) guide. ## Structure of a Spectrum Web Component @@ -143,214 +63,6 @@ structure that looks like this. If anything here looks unfamiliar, it is probably a good time to do some reading about web components. -You can compare this markup with the reference markup in the `spectrum-css` documentation - -### Host Class Mapping - -We need to determine what the main CSS class is for our component in the -original `spectrum-css`. In the case of `sp-button`, we can see that the -top-level class is `.Spectrum-Button`. We then need to determine where we want -that CSS to be applied. In many cases, you will want that CSS to be applied to -the actual web component via the `:host` selector. That is the default behaviour -of the conversion script. In this case, we wanted to preserve all of the default -behaviour of the `button` element in HTML. So, we want the main CSS to be -applied to our `