feat(icon,ui-icons)!: migrate the icon compiler to a distinct package

BREAKING CHANGE:
 - icon will no longer contain SVG assets

Author: castastrophe

.github/actions/file-diff/index.js

@@ -113,19 +113,12 @@ async function run() {
 				if (hasDiff) {
 					// If a diff path was provided and the component folder doesn't exist,
 					// report that the compiled assets were removed
-					if (!existsSync(join(diffPath, "components", name))) {
+					if (
+						!existsSync(join(diffPath, "components", name)) ||
+						(totalSize === 0 && totalDiffSize > 0)
+					) {
 						data.push("🚨 package deleted/moved/renamed");
-						summaryTable.push(data);
-						return;
-					}
-
-					if (totalSize > 0 && totalDiffSize === 0) {
-						data.push("⚠️ assets deleted/moved/renamed");
-						summaryTable.push(data);
-						return;
-					}
-
-					if (totalSize === 0 && totalDiffSize > 0) {
+					} else if (totalSize > 0 && totalDiffSize === 0) {
 						data.push("🎉 new package");
 					} else {
 						data.push(printChange(totalDiffSize - totalSize));

.github/workflows/compare-results.yml

@@ -73,17 +73,17 @@ jobs:
               shell: bash
               run: yarn install --frozen-lockfile --cache-folder .cache/yarn
 
-            - name: Download build artifacts for head ${{ inputs.head-sha }}
+            - name: Download build artifacts for head
               uses: actions/download-artifact@v3
               with:
                   name: ubuntu-latest-node18-compiled-assets-${{ inputs.head-sha }}
-                  path: ${{ github.workspace }}/${{ inputs.head-sha }}/components
+                  path: ${{ github.workspace }}/${{ inputs.head-sha }}
 
-            - name: Download build artifacts for base ${{ inputs.base-sha }}
+            - name: Download build artifacts for base
               uses: actions/download-artifact@v3
               with:
                   name: ubuntu-latest-node18-compiled-assets-${{ inputs.base-sha }}
-                  path: ${{ github.workspace }}/${{ inputs.base-sha }}/components
+                  path: ${{ github.workspace }}/${{ inputs.base-sha }}
 
             - name: Compare compiled output file size
               id: compare
@@ -92,7 +92,10 @@ jobs:
               with:
                   path: ${{ github.workspace }}/${{ inputs.head-sha }}/
                   diff-path: ${{ github.workspace }}/${{ inputs.base-sha }}/
-                  file-glob-pattern: components/*/dist/**
+                  file-glob-pattern: |
+                    components/*/dist/**
+                    tokens/dist/**
+                    ui-icons/dist/**
                   token: ${{ secrets.GITHUB_TOKEN }}
 
     fetch-build-artifacts:
@@ -161,16 +164,13 @@ jobs:
               uses: actions/cache@v3
               with:
                   path: |
-                      components/*/dist/**
+                    components/*/dist/**
+                    tokens/dist/**
+                    ui-icons/dist/**
                   key: ${{ steps.derive-key.outputs.key }}
 
-            - name: Build components
-              if: ${{ matrix.branch == inputs.base-sha && steps.cache-build.outputs.cache-hit != 'true' }}
-              shell: bash
-              run: yarn build
-
-            - name: Build components
-              if: ${{ matrix.branch == inputs.head-sha && steps.cache-build.outputs.cache-hit != 'true' }}
+            - name: Build
+              if: ${{ steps.cache-build.outputs.cache-hit != 'true' }}
               shell: bash
               run: yarn build
 
@@ -179,7 +179,9 @@ jobs:
               uses: actions/upload-artifact@v3
               with:
                   path: |
-                      ${{ github.workspace }}/components/*/dist/**
+                    ${{ github.workspace }}/components/*/dist/**
+                    ${{ github.workspace }}/tokens/dist/**
+                    ${{ github.workspace }}/ui-icons/dist/**
                   name: ${{ steps.derive-key.outputs.key }}
                   # this is important, it lets us catch if the build failed silently
                   # by alterting us that no compiled assets were generated

.storybook/main.js

@@ -8,7 +8,6 @@ const componentPkgs = readdirSync(componentsPath, {
 	.map((dirent) => dirent.name);
 module.exports = {
 	stories: [
-		"../components/*/stories/*.stories.mdx",
 		"../components/*/stories/*.stories.@(js|jsx|ts|tsx)",
 	],
 	rootDir: "../",

.storybook/package.json

@@ -9,9 +9,9 @@
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
     "@spectrum-css/expressvars": "^3.0.9",
-    "@spectrum-css/icon": "^4.0.5",
     "@spectrum-css/site": "^4.0.2",
     "@spectrum-css/tokens": "^13.0.5",
+    "@spectrum-css/ui-icons": "^0.0.0",
     "@spectrum-css/vars": "^9.0.8"
   },
   "devDependencies": {

README.md

@@ -149,13 +149,13 @@ For most use cases, you'll want to use `spectrum-css-icons.svg` so you have supp
 ```js
 <script src="node_modules/loadicons/index.js"></script>
 <script>
-  loadIcons('node_modules/@spectrum-css/icon/dist/spectrum-css-icons.svg');
+  loadIcons('node_modules/@spectrum-css/ui-icons/dist/spectrum-css-icons.svg');
 </script>
 ```
 
 Based on which scales you'll be using, you can choose to load different files:
 
-- `@spectrum-css/icon/dist/spectrum-css-icons.svg` - Both medium and large icons for responsive UIs that support both `.spectrum--medium` and `.spectrum--large`
+- `@spectrum-css/ui-icons/dist/spectrum-css-icons.svg` - Both medium and large icons for responsive UIs that support both `.spectrum--medium` and `.spectrum--large`
 - `@spectrum-css/icon/dist/spectrum-css-icons-medium.svg` - Medium icons only, supports `.spectrum--medium` only
 - `@spectrum-css/icon/dist/spectrum-css-icons-large.svg` - Large icons only, supports `.spectrum--large` only
 

components/icon/README.md

@@ -1,3 +1,3 @@
 # `@spectrum-css/icon`
 
-The icons component contains all UI icons used for components as well as the CSS for UI and workflow icons.
+The icons component contains the CSS for UI and workflow icons.