chore(storybook,ui-icons): clean-up and preparations for nx build (#2364)

fix(ui-icons): combined SVG output fix for store (#2364)

Author: castastrophe

.storybook/postcss.config.js

@@ -1,4 +1,4 @@
-const { resolve, relative, basename, sep } = require("path");
+const { resolve, basename } = require("path");
 const { existsSync } = require("fs");
 const warnCleaner = require("postcss-warn-cleaner");
 
@@ -61,9 +61,20 @@ module.exports = (ctx) => {
 		 * If a path has a package.json, we can assume it's a component and
 		 * we want to leverage the correct plugins for it.
 		 */
-		const { devDependencies } = require(pkgPath);
+		const {
+			peerDependencies = {},
+			devDependencies = {},
+			dependencies = {}
+		} = require(pkgPath);
+
+		const deps = [...new Set([
+			...Object.keys(peerDependencies),
+			...Object.keys(dependencies),
+			...Object.keys(devDependencies),
+		])];
+
 		if (
-			Object.keys(devDependencies).includes("@spectrum-css/component-builder")
+			deps.includes("@spectrum-css/vars")
 		) {
 			plugins.push(...legacyBuilder.processors);
 		} else {

components/assetlist/package.json

@@ -21,7 +21,7 @@
   "peerDependencies": {
     "@spectrum-css/checkbox": ">=7.0.0",
     "@spectrum-css/icon": ">=4",
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/tokens": ">=13"
   },
   "devDependencies": {
     "@spectrum-css/checkbox": "^8.0.3",

components/dropzone/package.json

@@ -29,7 +29,6 @@
     "@spectrum-css/illustratedmessage": "^6.0.30",
     "@spectrum-css/link": "^4.0.74",
     "@spectrum-css/tokens": "^13.0.5",
-    "@spectrum-css/vars": "^9.0.8",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

components/icon/stories/icon.stories.js

@@ -1,7 +1,7 @@
 // Import the component markup template
 import { Template } from "./template";
 
-import { workflowIcons, uiIcons } from "./utilities.js";
+import { uiIcons, workflowIcons } from "./utilities.js";
 
 export default {
 	title: "Components/Icon",
@@ -50,7 +50,17 @@ export default {
 				type: { summary: "string" },
 				category: "Content",
 			},
-			options: uiIcons,
+			options: [
+				...uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)),
+				"ArrowRight",
+				"ArrowLeft",
+				"ArrowUp",
+				"ArrowDown",
+				"ChevronRight",
+				"ChevronLeft",
+				"ChevronUp",
+				"ChevronDown",
+			],
 			control: "select",
 			if: { arg: "setName", eq: "ui" },
 		},
@@ -80,10 +90,10 @@ export default {
 	},
 };
 
-export const Default = (args) =>
-	Template({
-		...args,
-		iconName: args.iconName ?? args.uiIconName,
-		setName: args.setName ?? (args.uiIconName ? "ui" : "workflow"),
-	});
+export const Default = (args) => Template({
+	...args,
+	iconName: args.iconName ?? args.uiIconName,
+	setName: args.setName ?? (args.uiIconName ? "ui" : "workflow"),
+});
+
 Default.args = {};

components/icon/stories/template.js

@@ -1,7 +1,7 @@
-import { html } from "lit";
+import { html, svg } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 
 import { fetchIconSVG, uiIcons, workflowIcons } from "./utilities.js";
 
@@ -93,7 +93,9 @@ export const Template = ({
 		setName = "workflow";
 	} else if (uiIcons.includes(idKey.replace(/\d{2,3}$/, ""))) {
 		setName = "ui";
-	} else if (!setName) {
+	}
+
+	if (!setName) {
 		console.warn(
 			`Icon: Could not determine the icon set for the provided icon name: ${idKey}.`
 		);
@@ -126,7 +128,7 @@ export const Template = ({
 
 	// If we found an icon above, return that value with the appended class list
 	if (icon) {
-		return html`${unsafeHTML(
+		return svg`${unsafeSVG(
 			icon.replace(
 				/^<svg(.*)>/,
 				`<svg class="${Object.entries(classList)
@@ -159,7 +161,7 @@ export const Template = ({
 		console.warn(e);
 	}
 
-	return html` <svg
+	return svg`<svg
 		class=${classMap(classList)}
 		id=${ifDefined(id)}
 		style=${ifDefined(inlineStyle)}

components/icon/stories/utilities.js

@@ -35,16 +35,16 @@ export const fetchIconSVG = ({
 			icon = require(`!!raw-loader!@adobe/spectrum-css-workflow-icons/dist/${
 				scale !== "medium" ? `24` : `18`
 			}/${iconName}.svg`);
-			if (icon) return icon.default ?? icon;
+			if (icon) return (icon.default ?? icon).trim();
 		} catch (e) {}
 	}
 
 	// Check the ui kit for icon set if not yet found
 	try {
-		icon = require(`!!raw-loader!@spectrum-css/ui-icons/${
+		icon = require(`!!raw-loader!@spectrum-css/ui-icons/dist/${
 			scale ? scale : "medium"
 		}/${iconName}.svg`);
-		if (icon) return icon.default ?? icon;
+		if (icon) return (icon.default ?? icon).trim();
 	} catch (e) {}
 
 	return;

components/miller/package.json

@@ -22,7 +22,7 @@
     "@spectrum-css/assetlist": ">=3",
     "@spectrum-css/checkbox": ">=7.0.0",
     "@spectrum-css/icon": ">=4",
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/tokens": ">=13"
   },
   "devDependencies": {
     "@spectrum-css/assetlist": "^5.0.3",

ui-icons/svgo.config.js

@@ -18,34 +18,29 @@ module.exports = ({
           removeDesc: false,
           removeTitle: false,
           removeViewBox,
+          removeHiddenElems: false,
           removeUnusedNS: false,
         },
       },
     },
-    clean
-      ? {
-        name: 'removeAttrs',
-        params: {
-          attrs: ['class', 'data-name', 'id'],
-        },
-      }
-      : undefined,
-    idPrefix
-      ? {
-        name: 'prefixIds',
-        params: { delim: '-', prefix: idPrefix, prefixClassNames: false },
-      }
-      : undefined,
-    classPrefix
-      ? {
-        name: 'prefixIds',
-        params: {
-          delim: '--',
-          prefix: classPrefix,
-          prefixClassNames: true,
-          prefixIds: false,
-        },
-      }
-      : undefined,
-  ].filter(Boolean),
+    ...(clean ? [{
+      name: 'removeAttrs',
+      params: {
+        attrs: ['class', 'data-name', 'id'],
+      },
+    }] : []),
+    ...(idPrefix ? [{
+      name: 'prefixIds',
+      params: { delim: '-', prefix: idPrefix, prefixClassNames: false },
+    }] : []),
+    ...(classPrefix ? [{
+      name: 'prefixIds',
+      params: {
+        delim: '--',
+        prefix: classPrefix,
+        prefixClassNames: true,
+        prefixIds: false,
+      },
+    } ] : []),
+  ],
 });