refactor(ui-icons): s2 migration of assets

adobe · Apr 30, 2024 · 9c8bad0 · 9c8bad0
1 parent ae7aedd
commit 9c8bad0
Show file tree

Hide file tree

Showing 169 changed files with 1,627 additions and 1,137 deletions.
diff --git a/.env.example b/.env.example
@@ -18,3 +18,5 @@ WATCH_MODE=true
 NX_VERBOSE_LOGGING=false
 NX_SKIP_NX_CACHE=false
 NX_PERF_LOGGING=false
+
+ARTIFACTORY_API_TOKEN=${ARTIFACTORY_API_TOKEN:-$ARTIFACTORY_API_KEY}
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -33,19 +33,15 @@ you are good to go!
 All submissions should come in the form of pull requests and need to be reviewed
 by project committers.
 
+**Important:** This project uses node >= 20 and yarn 4.1.1.
+
 Start by [forking](https://help.github.com/articles/fork-a-repo/) the repo, then [clone](https://help.github.com/articles/cloning-a-repository/) your fork:
 
 ```shell
 git clone git@github.com:yourusername/spectrum-css.git
 ```
 
-Set up a branch for your feature or bug fix, push it to your fork, and set up a remote for the upstream repo:
-
-```shell
-git checkout -b feat-my-awesome-new-feature
-git push -u origin feat-my-awesome-new-feature
-git remote add upstream git@github.com:adobe/spectrum-css.git
-```
+### Setup
 
 To ensure your Node environment is always aligned with the project, we strongly recommend using [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating). Once you have nvm installed, you can run:
 
@@ -55,10 +51,16 @@ nvm use
 
 This will ensure the correct version of node is installed and used for the project. You always want to run nvm use when you first clone the project and whenever you switch branches.
 
-Install [yarn](https://yarnpkg.com/en/docs/install):
+If you have not already done so, enable [corepack](https://yarnpkg.com/getting-started/install). Corepack is the tool that manages the package version for yarn.
 
 ```shell
-brew install yarn || curl -o- -L https://yarnpkg.com/install.sh | bash
+corepack enable
+```
+
+Before running an install, run the setup script; this script runs `nvm use` and exports any available authorization tokens.
+
+```shell
+bash ./tasks/setup.sh
 ```
 
 Install dependencies:
@@ -67,7 +69,13 @@ Install dependencies:
 yarn install
 ```
 
-**Important:** Requires >= Node 18.8.1 and Yarn 1.22.0.
+Set up a branch for your feature or bug fix, push it to your fork, and set up a remote for the upstream repo:
+
+```shell
+git checkout -b feat-my-awesome-new-feature
+git push -u origin feat-my-awesome-new-feature
+git remote add upstream git@github.com:adobe/spectrum-css.git
+```
 
 To generate a new component, run the generator:
 
@@ -103,7 +111,7 @@ git merge upstream/main
 Run your updates through the formatter which will automatically fix any linting issues. Note that this is also handled on commit via lint-staged so running this manually is only necessary if you used a `--no-verify` flag on any of your commits.
 
 ```shell
-nx affected --target format
+yarn nx affected --target format
 ```
 
 Review your changes and any possible conflicts and push to your fork:

diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,13 @@
 dist
 dist-site
+
 !tokens/dist
+!ui-icons/dist
 
 # Recommended update re:https://docs.netlify.com/integrations/frameworks/eleventy/
 **/node_modules/**
 
 temp
-.npmrc*
 .nx
 .env
 .tmp

diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-medium.md b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md
@@ -1,7 +1,7 @@
-| Component size token                              | Alias token (if available)    | Global token                 | Value |
-|---------------------------------------------------|-------------------------------|------------------------------|-------|
-| --spectrum-corner-radius-medium-size-extra-small   |                               | --spectrum-corner-radius-300 | 6px   |
-| --spectrum-corner-radius-medium-size-small         |                               | --spectrum-corner-radius-400 | 7px   |
-| --spectrum-corner-radius-medium-size-medium        | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px   |
-| --spectrum-corner-radius-medium-size-large         |                               | --spectrum-corner-radius-600 | 9px   |
-| --spectrum-corner-radius-medium-size-extra-large   | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px  |
+| Component size token                             | Alias token (if available)              | Global token                 | Value |
+| ------------------------------------------------ | --------------------------------------- | ---------------------------- | ----- |
+| --spectrum-corner-radius-medium-size-extra-small |                                         | --spectrum-corner-radius-300 | 6px   |
+| --spectrum-corner-radius-medium-size-small       |                                         | --spectrum-corner-radius-400 | 7px   |
+| --spectrum-corner-radius-medium-size-medium      | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px   |
+| --spectrum-corner-radius-medium-size-large       |                                         | --spectrum-corner-radius-600 | 9px   |
+| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default  | --spectrum-corner-radius-700 | 10px  |
diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-small.md b/.storybook/foundations/corner-rounding/component-size-tokens-small.md
@@ -1,6 +1,6 @@
-| Component size token                              | Alias token (if available)    | Global token                 | Value |
-|---------------------------------------------------|-------------------------------|------------------------------|-------|
-| --spectrum-corner-radius-small-size-small         |                               | --spectrum-corner-radius-75  | 3px   |
-| --spectrum-corner-radius-small-size-medium        | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px   |
-| --spectrum-corner-radius-small-size-large         |                               | --spectrum-corner-radius-200 | 5px   |
-| --spectrum-corner-radius-small-size-extra-large   |                               | --spectrum-corner-radius-300 | 6px   |
+| Component size token                            | Alias token (if available)             | Global token                 | Value |
+| ----------------------------------------------- | -------------------------------------- | ---------------------------- | ----- |
+| --spectrum-corner-radius-small-size-small       |                                        | --spectrum-corner-radius-75  | 3px   |
+| --spectrum-corner-radius-small-size-medium      | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px   |
+| --spectrum-corner-radius-small-size-large       |                                        | --spectrum-corner-radius-200 | 5px   |
+| --spectrum-corner-radius-small-size-extra-large |                                        | --spectrum-corner-radius-300 | 6px   |
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -1,71 +1,71 @@
 {
-  "name": "@spectrum-css/preview",
-  "version": "10.0.0",
-  "description": "A Spectrum CSS preview",
-  "license": "Apache-2.0",
-  "author": "Adobe",
-  "homepage": "https://opensource.adobe.com/spectrum-css/preview",
-  "main": "main.js",
-  "files": [
-    "*.js",
-    "*.md",
-    "*.mdx",
-    "assets",
-    "decorators",
-    "deprecated",
-    "foundations",
-    "guides"
-  ],
-  "scripts": {
-    "build": "storybook build --config-dir . --output-dir ./storybook-static"
-  },
-  "dependencies": {
-    "@adobe/spectrum-css-workflow-icons": "^1.5.4",
-    "@spectrum-css/tokens": "^14.0.0-next.6",
-    "@spectrum-css/ui-icons": "^1.1.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@chromaui/addon-visual-tests": "^1.0.0",
-    "@etchteam/storybook-addon-status": "^4.2.4",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-actions": "^8.0.6",
-    "@storybook/addon-console": "^3.0.0",
-    "@storybook/addon-designs": "^8.0.0",
-    "@storybook/addon-docs": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/components": "^8.0.6",
-    "@storybook/core-events": "^8.0.6",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.6",
-    "@storybook/preview-api": "^8.0.6",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.6",
-    "@storybook/web-components-webpack5": "^8.0.6",
-    "@whitespace/storybook-addon-html": "^6.0.4",
-    "chromatic": "^11.3.0",
-    "file-loader": "^6.2.0",
-    "lit": "^3.1.2",
-    "lodash-es": "^4.17.21",
-    "postcss": "^8.4.35",
-    "postcss-loader": "^8.1.1",
-    "postcss-pseudo-classes": "^0.4.0",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "source-map-loader": "^5.0.0",
-    "storybook": "^8.0.6",
-    "style-loader": "4.0.0",
-    "webpack": "^5.91.0"
-  },
-  "keywords": [
-    "adobe",
-    "css",
-    "design system",
-    "spectrum",
-    "storybook"
-  ]
+	"name": "@spectrum-css/preview",
+	"version": "10.0.0",
+	"description": "A Spectrum CSS preview",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/preview",
+	"main": "main.js",
+	"files": [
+		"*.js",
+		"*.md",
+		"*.mdx",
+		"assets",
+		"decorators",
+		"deprecated",
+		"foundations",
+		"guides"
+	],
+	"scripts": {
+		"build": "storybook build --config-dir . --output-dir ./storybook-static"
+	},
+	"dependencies": {
+		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
+		"@spectrum-css/tokens": "workspace:^",
+		"@spectrum-css/ui-icons": "workspace:^"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.24.4",
+		"@chromaui/addon-visual-tests": "^1.0.0",
+		"@etchteam/storybook-addon-status": "^4.2.4",
+		"@storybook/addon-a11y": "^8.0.9",
+		"@storybook/addon-actions": "^8.0.9",
+		"@storybook/addon-console": "^3.0.0",
+		"@storybook/addon-designs": "^8.0.0",
+		"@storybook/addon-docs": "^8.0.9",
+		"@storybook/addon-essentials": "^8.0.9",
+		"@storybook/addon-interactions": "^8.0.9",
+		"@storybook/blocks": "^8.0.9",
+		"@storybook/components": "^8.0.9",
+		"@storybook/core-events": "^8.0.9",
+		"@storybook/jest": "^0.2.3",
+		"@storybook/manager-api": "^8.0.9",
+		"@storybook/preview-api": "^8.0.9",
+		"@storybook/testing-library": "^0.2.2",
+		"@storybook/theming": "^8.0.9",
+		"@storybook/web-components-webpack5": "^8.0.9",
+		"@whitespace/storybook-addon-html": "^6.0.4",
+		"chromatic": "^11.3.0",
+		"file-loader": "^6.2.0",
+		"lit": "^3.1.3",
+		"lodash-es": "^4.17.21",
+		"postcss": "^8.4.35",
+		"postcss-loader": "^8.1.1",
+		"postcss-pseudo-classes": "^0.4.0",
+		"prettier": "^3.2.5",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-syntax-highlighter": "^15.5.0",
+		"source-map-loader": "^5.0.0",
+		"storybook": "^8.0.9",
+		"style-loader": "4.0.0",
+		"webpack": "^5.91.0"
+	},
+	"keywords": [
+		"adobe",
+		"css",
+		"design system",
+		"spectrum",
+		"storybook"
+	]
 }
diff --git a/.storybook/project.json b/.storybook/project.json
@@ -23,13 +23,7 @@
 			}
 		},
 		"build": {
-			"dependsOn": [
-				"^build",
-				{
-					"target": "build",
-					"projects": "ui-icons"
-				}
-			],
+			"dependsOn": ["^build"],
 			"inputs": [
 				"{projectRoot}/assets",
 				"{projectRoot}/decorators",
@@ -60,13 +54,7 @@
 		},
 		"start": {
 			"cache": true,
-			"dependsOn": [
-				"^build",
-				{
-					"target": "build",
-					"projects": "ui-icons"
-				}
-			],
+			"dependsOn": ["^build"],
 			"inputs": [
 				"{projectRoot}/assets",
 				"{projectRoot}/decorators",

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,5 +1,31 @@
 cacheFolder: ./.yarn/cache
+nodeLinker: node-modules # todo: test pnp or pnpm mode
+yarnPath: .yarn/releases/yarn-4.1.1.cjs
+changesetIgnorePatterns:
+  - "**/*.stories.{js,ts}"
+  - "**/stories/*.{js,ts}"
+defaultSemverRangePrefix: "^"
+enableColors: true
+enableTelemetry: false
+injectEnvironmentFiles:
+  - ".env?"
 
-nodeLinker: node-modules
+## Default settings for yarn init packages
+initScope: "spectrum-css"
+initFields:
+  author: Adobe
+  license: "Apache-2.0"
+  bugs.url: "https://github.com/adobe/spectrum-css/issues"
+  main: "dist/index.css"
+  publishConfig.access: "public"
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+npmPublishAccess: "public"
+npmPublishRegistry: "https://npm.pkg.github.com"
+npmAlwaysAuth: false
+
+npmScopes:
+  a4u:
+    npmRegistryServer: "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-a4u-release/"
+    npmAlwaysAuth: true
+    npmAuthToken: ${ARTIFACTORY_API_TOKEN:-}
+    npmAuthIdent: ${NPM_EMAIL}:${NPM_AUTH}