fix: remove storybook assets from shipped output (#3369)

adobe · Nov 5, 2024 · 9c49505 · 9c49505
1 parent 5358f5a
commit 9c49505
Show file tree

Hide file tree

Showing 85 changed files with 194 additions and 251 deletions.
diff --git a/.changeset/fifty-bottles-teach.md b/.changeset/fifty-bottles-teach.md
@@ -0,0 +1,86 @@
+---
+"@spectrum-css/floatingactionbutton": minor
+"@spectrum-css/opacitycheckerboard": minor
+"@spectrum-css/illustratedmessage": minor
+"@spectrum-css/coachindicator": minor
+"@spectrum-css/contextualhelp": minor
+"@spectrum-css/progresscircle": minor
+"@spectrum-css/dropindicator": minor
+"@spectrum-css/infieldbutton": minor
+"@spectrum-css/actionbutton": minor
+"@spectrum-css/pickerbutton": minor
+"@spectrum-css/actiongroup": minor
+"@spectrum-css/alertbanner": minor
+"@spectrum-css/alertdialog": minor
+"@spectrum-css/buttongroup": minor
+"@spectrum-css/clearbutton": minor
+"@spectrum-css/closebutton": minor
+"@spectrum-css/colorhandle": minor
+"@spectrum-css/colorslider": minor
+"@spectrum-css/inlinealert": minor
+"@spectrum-css/logicbutton": minor
+"@spectrum-css/progressbar": minor
+"@spectrum-css/statuslight": minor
+"@spectrum-css/swatchgroup": minor
+"@spectrum-css/actionmenu": minor
+"@spectrum-css/breadcrumb": minor
+"@spectrum-css/colorloupe": minor
+"@spectrum-css/colorwheel": minor
+"@spectrum-css/datepicker": minor
+"@spectrum-css/fieldgroup": minor
+"@spectrum-css/fieldlabel": minor
+"@spectrum-css/pagination": minor
+"@spectrum-css/typography": minor
+"@spectrum-css/accordion": minor
+"@spectrum-css/actionbar": minor
+"@spectrum-css/assetcard": minor
+"@spectrum-css/assetlist": minor
+"@spectrum-css/coachmark": minor
+"@spectrum-css/colorarea": minor
+"@spectrum-css/splitview": minor
+"@spectrum-css/textfield": minor
+"@spectrum-css/thumbnail": minor
+"@spectrum-css/calendar": minor
+"@spectrum-css/checkbox": minor
+"@spectrum-css/combobox": minor
+"@spectrum-css/dropzone": minor
+"@spectrum-css/helptext": minor
+"@spectrum-css/steplist": minor
+"@spectrum-css/taggroup": minor
+"@spectrum-css/treeview": minor
+"@spectrum-css/underlay": minor
+"@spectrum-css/divider": minor
+"@spectrum-css/popover": minor
+"@spectrum-css/sidenav": minor
+"@spectrum-css/stepper": minor
+"@spectrum-css/tooltip": minor
+"@spectrum-css/avatar": minor
+"@spectrum-css/button": minor
+"@spectrum-css/dialog": minor
+"@spectrum-css/miller": minor
+"@spectrum-css/picker": minor
+"@spectrum-css/rating": minor
+"@spectrum-css/search": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/swatch": minor
+"@spectrum-css/switch": minor
+"@spectrum-css/asset": minor
+"@spectrum-css/badge": minor
+"@spectrum-css/modal": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/table": minor
+"@spectrum-css/toast": minor
+"@spectrum-css/card": minor
+"@spectrum-css/dial": minor
+"@spectrum-css/icon": minor
+"@spectrum-css/link": minor
+"@spectrum-css/menu": minor
+"@spectrum-css/page": minor
+"@spectrum-css/site": minor
+"@spectrum-css/tabs": minor
+"@spectrum-css/tray": minor
+"@spectrum-css/well": minor
+"@spectrum-css/tag": minor
+---
+
+Remove the storybook assets from the shipped output for components
diff --git a/.storybook/blocks/PropertiesTable.jsx b/.storybook/blocks/PropertiesTable.jsx
@@ -1,10 +1,10 @@
-import "@spectrum-css/table";
+import "@spectrum-css/table/dist/index.css";
 
 import { DocsContext, useOf } from "@storybook/blocks";
-import { ResetWrapper } from "@storybook/components";
 import { NAVIGATE_URL } from "@storybook/core-events";
 import { styled } from "@storybook/theming";
 import React, { useContext } from 'react';
+import { ThemeContainer } from "./ThemeContainer.jsx";
 import { Body, Code, LinkableHeading } from "./Typography.jsx";
 
 export const Table = styled.table`
@@ -32,7 +32,7 @@ export const PropertiesTable = () => {
 	if (!metadata?.modifiers || !metadata?.modifiers.length) return;
 
 	return (
-		<ResetWrapper>
+		<ThemeContainer color="light" display="contents">
 			<LinkableHeading id="modifiable-properties" size="m">
 				<a aria-hidden="true" href="#modifiable-properties" tabIndex="-1" target="_self" onClick={() => {
 					context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
@@ -61,6 +61,6 @@ export const PropertiesTable = () => {
 					))}
 				</tbody>
 			</Table>
-		</ResetWrapper>
+		</ThemeContainer>
 	);
 };
diff --git a/.storybook/blocks/ThemeContainer.jsx b/.storybook/blocks/ThemeContainer.jsx
@@ -7,7 +7,7 @@ import "@spectrum-css/tokens/dist/index.css";
 const Container = styled.section`
     color: var(--spectrum-neutral-content-color-default);
     background-color: var(--spectrum-background-layer-1-color);
-    display: flex;
+    display: ${props => props.display ?? "flex" };
     padding-inline: 48px 24px;
     padding-block: 60px;
     flex-direction: column;

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,3 +1,12 @@
+import fs from "fs";
+import path from "path";
+
+// Get a list of all the folders in the components directory
+const componentDir = path.resolve(__dirname, "../components");
+const components = fs.readdirSync(componentDir, { withFileTypes: true })
+	.filter(dirent => dirent.isDirectory() && fs.existsSync(path.resolve(componentDir, dirent.name, "package.json")))
+	.map(dirent => dirent.name);
+
 export default {
 	stories: [
 		{
@@ -17,7 +26,7 @@ export default {
 		},
 	],
 	rootDir: "../",
-	staticDirs: ["../assets", "./assets/images"],
+	staticDirs: ["./assets"],
 	addons: [
 		{
 			name: "@storybook/addon-essentials",
@@ -27,9 +36,16 @@ export default {
 				viewport: false,
 				// Don't need backgrounds b/c this is handled by the color contexts.
 				backgrounds: false,
+				// Configure separately
+				docs: false,
+			},
+		},
+		{
+			name: "@storybook/addon-docs",
+			options: {
 				// Enables JSX support in MDX for projects that aren't configured to handle the format.
 				configureJSX: true,
-				// Support markdown in MDX files.
+				// Support markdown in MDX files
 				transcludeMarkdown: true,
 			},
 		},
@@ -55,7 +71,7 @@ export default {
 		const { mergeConfig } = await import("vite");
 
 		return mergeConfig(config, {
-			publicDir: "../assets",
+			publicDir: "./assets",
 			build: {
 				sourcemap: configType === "DEVELOPMENT",
 				manifest: true,
@@ -64,6 +80,9 @@ export default {
 			css: {
 				devSourcemap: configType === "DEVELOPMENT",
 			},
+			resolve: {
+				alias: components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
+			}
 		});
 	},
 	framework: {

diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/actionbar/package.json b/components/actionbar/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/asset/package.json b/components/asset/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/assetcard/package.json b/components/assetcard/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/assetlist/package.json b/components/assetlist/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/avatar/package.json b/components/avatar/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/badge/package.json b/components/badge/package.json
@@ -21,15 +21,13 @@
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./metadata/metadata.json",
 		"./metadata/*": "./metadata/*",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",
 	"files": [
 		"dist/*",
 		"*.md",
 		"package.json",
-		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {