build: align tooling with s2-foundations branch

Author: castastrophe

.github/workflows/release.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - spectrum-two
+      - s2-foundations-redux
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

.storybook/blocks/index.js

@@ -18,3 +18,4 @@ export * from "./PropertiesTable.jsx";
 export * from "./Swatches.jsx";
 export * from "./ThemeContainer.jsx";
 export * from "./Typography.jsx";
+

.storybook/foundations/corner-rounding/template.js

@@ -1,6 +1,5 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-
 import "./index.css";
 
 const getSizeModifier = (size) => {

.storybook/foundations/drop-shadow/drop-shadow.stories.js

@@ -7,7 +7,11 @@ export default {
 	description:
 		"Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.",
 	component: "Drop shadow",
+<<<<<<< HEAD
 	tags: ["!dev"],
+=======
+	tags: ["foundation"],
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 };
 
 const DropShadowSwatch = ({
@@ -19,9 +23,15 @@ const DropShadowSwatch = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${variant}-drop-shadow`]:
+<<<<<<< HEAD
 					typeof variant !== "undefined" && !!isDropShadow,
 				[`${rootClass}--${variant}-box-shadow`]:
 					typeof variant !== "undefined" && !isDropShadow,
+=======
+					typeof variant !== undefined && !!isDropShadow,
+				[`${rootClass}--${variant}-box-shadow`]:
+					typeof variant !== undefined && !isDropShadow,
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 			})}
 		></div>
 `;

.storybook/main.js

@@ -4,7 +4,11 @@ import remarkGfm from 'remark-gfm';
 
 // Get a list of all the folders in the components directory
 const componentDir = path.resolve(__dirname, "../components");
+<<<<<<< HEAD
 const components = fs.readdirSync(componentDir, { withFileTypes: true })
+=======
+const components = fs.readdirSync("../components", { withFileTypes: true })
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	.filter(dirent => dirent.isDirectory() && fs.existsSync(path.resolve(componentDir, dirent.name, "package.json")))
 	.map(dirent => dirent.name);
 
@@ -22,7 +26,11 @@ export default {
 		},
 		{
 			directory: "./foundations",
+<<<<<<< HEAD
 			files: "*/*.@(stories.js|mdx)",
+=======
+			files: "**/*.@(stories.js|mdx)",
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 			titlePrefix: "Foundations",
 		},
 		{
@@ -53,6 +61,20 @@ export default {
 		{
 			name: "@storybook/addon-docs",
 			options: {
+<<<<<<< HEAD
+=======
+				// Don't need viewports b/c the medium/large contexts are used to support scaling.
+				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: {
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 				// Enables JSX support in MDX for projects that aren't configured to handle the format.
 				configureJSX: true,
 				// Support markdown in MDX files
@@ -91,6 +113,7 @@ export default {
 
 		return mergeConfig(config, {
 			publicDir: "./assets",
+<<<<<<< HEAD
 			// Add dependencies to pre-optimization
 			optimizeDeps: {
 				include: [
@@ -100,6 +123,8 @@ export default {
 					"@storybook/components",
 				],
 			},
+=======
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 			build: {
 				sourcemap: configType === "DEVELOPMENT",
 				manifest: true,
@@ -113,6 +138,7 @@ export default {
 			}
 		});
 	},
+<<<<<<< HEAD
 	build: {
 		test: {
 			disabledAddons: [
@@ -131,13 +157,23 @@ export default {
 		reactDocgen: 'react-docgen',
 		// Not using typescript so disable the check
 		check: false,
+=======
+	framework: {
+		name: "@storybook/web-components-vite",
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	},
 	features: {
 		/* Code splitting flag; load stories on-demand */
 		storyStoreV7: true,
 		/* Builds stories.json to help with on-demand loading */
 		buildStoriesJson: true,
 	},
+<<<<<<< HEAD
+=======
+	docs: {
+		defaultName: "Docs",
+	},
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	refs: {
 		"web-components": {
 			title: "Spectrum web components",

.storybook/manager.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 
 import { addons } from "@storybook/manager-api";
 import { create } from "@storybook/theming";
@@ -11,6 +12,15 @@ import pkg from "./package.json";
 
 import "./assets/index.css";
 
+=======
+import "@spectrum-css/tokens/dist/index.css";
+import { addons } from "@storybook/manager-api";
+import { create } from "@storybook/theming";
+import "./assets/index.css";
+import logo from "./assets/logo.svg";
+import pkg from "./package.json";
+
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 const root = document.body ?? document.documentElement;
 if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium");
 
@@ -69,6 +79,12 @@ addons.setConfig({
 	}),
 	sidebar: {
 		showRoots: false,
+<<<<<<< HEAD
 		renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚",
+=======
+		filters: {
+			patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)),
+		},
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	},
 });

.storybook/package.json

@@ -1,10 +1,18 @@
 {
 	"name": "@spectrum-css/preview",
+<<<<<<< HEAD
 	"version": "11.0.1-next.1",
 	"description": "A Spectrum CSS preview",
 	"license": "Apache-2.0",
 	"author": "Adobe",
 	"homepage": "https://opensource.adobe.com/spectrum-css/",
+=======
+	"version": "11.0.0",
+	"description": "A Spectrum CSS preview",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/preview",
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	"type": "module",
 	"exports": {
 		".": "./preview.js",
@@ -25,6 +33,7 @@
 	},
 	"module": "main.js",
 	"scripts": {
+<<<<<<< HEAD
 		"build": "cross-env NODE_ENV=development storybook build --stats-json --config-dir ."
 	},
 	"dependencies": {
@@ -60,12 +69,59 @@
 		"npm-registry-fetch": "^18.0.2",
 		"postcss": "^8.5.0",
 		"prettier": "^3.4.2",
+=======
+		"build": "cross-env NODE_ENV=development storybook build --config-dir . --output-dir ./storybook-static"
+	},
+	"dependencies": {
+		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
+		"@adobe/spectrum-tokens": "13.0.0-beta.52",
+		"@spectrum-css/actionbutton": "workspace:^",
+		"@spectrum-css/button": "workspace:^",
+		"@spectrum-css/table": "workspace:^",
+		"@spectrum-css/tokens": "workspace:^",
+		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",
+		"@spectrum-css/typography": "workspace:^",
+		"@spectrum-css/ui-icons": "workspace:^",
+		"@spectrum-css/underlay": "workspace:^"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.26.0",
+		"@chromaui/addon-visual-tests": "^1.0.0",
+		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@storybook/addon-a11y": "^8.4.6",
+		"@storybook/addon-actions": "^8.4.6",
+		"@storybook/addon-console": "^3.0.0",
+		"@storybook/addon-designs": "^8.0.4",
+		"@storybook/addon-docs": "^8.4.6",
+		"@storybook/addon-essentials": "^8.4.6",
+		"@storybook/addon-interactions": "^8.4.6",
+		"@storybook/blocks": "^8.4.6",
+		"@storybook/builder-vite": "^8.4.6",
+		"@storybook/components": "^8.4.6",
+		"@storybook/core-events": "^8.4.6",
+		"@storybook/manager-api": "^8.4.6",
+		"@storybook/preview-api": "^8.4.6",
+		"@storybook/testing-library": "^0.2.2",
+		"@storybook/theming": "^8.4.6",
+		"@storybook/web-components-vite": "^8.4.6",
+		"@whitespace/storybook-addon-html": "^6.1.1",
+		"chromatic": "^11.18.1",
+		"lit": "^3.2.1",
+		"lodash-es": "^4.17.21",
+		"npm-registry-fetch": "^18.0.2",
+		"postcss": "^8.4.49",
+		"prettier": "^3.2.5",
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-syntax-highlighter": "^15.6.1",
 		"remark-gfm": "^4.0.0",
 		"rollup-plugin-postcss-lit": "^2.1.0",
+<<<<<<< HEAD
 		"storybook": "^8.4.7",
+=======
+		"storybook": "^8.4.6",
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 		"vite": "^5.4.11"
 	},
 	"keywords": [

.storybook/preview.js

@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 
+=======
+import { setConsoleOptions } from "@storybook/addon-console";
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 import {
 	withActions,
 	withArgEvents,
@@ -7,6 +11,7 @@ import {
 	withLanguageWrapper,
 	withReducedMotionWrapper,
 	withTestingPreviewWrapper,
+<<<<<<< HEAD
 	withTextDirectionWrapper,
 } from "./decorators";
 import { FontLoader, IconLoader } from "./loaders";
@@ -19,6 +24,35 @@ import "@spectrum-css/bundle";
 
 // Import the custom base styles
 import "./assets/base.css";
+=======
+	withTextDirectionWrapper
+} from "./decorators";
+import {
+	FontLoader,
+	IconLoader,
+} from "./loaders";
+import modes from "./modes";
+import DocumentationTemplate from "./templates/DocumentationTemplate.mdx";
+import {
+	argTypes,
+	globalTypes
+} from "./types";
+
+import "./assets/base.css";
+
+window.global = window;
+
+const panelExclude = setConsoleOptions({}).panelExclude || [];
+setConsoleOptions({
+	panelExclude: [
+		...panelExclude,
+		/deprecated/,
+		/TypeError/,
+		/postcss/,
+		/stylelint/,
+	],
+});
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 
 /** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */
 export const parameters = {
@@ -58,7 +92,11 @@ export const parameters = {
 		sort: "requiredFirst",
 	},
 	html: {
+<<<<<<< HEAD
 		root: "[data-html-preview]:first-of-type > *",
+=======
+		root: "[data-html-preview]:first-of-type",
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 		removeComments: true,
 		prettier: {
 			tabWidth: 2,
@@ -71,7 +109,10 @@ export const parameters = {
 		},
 	},
 	docs: {
+<<<<<<< HEAD
 		defaultName: "Docs",
+=======
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 		page: DocumentationTemplate,
 		story: { inline: true },
 		source: {
@@ -88,12 +129,21 @@ export const parameters = {
 				color: "#fff",
 				description: "Should not be used and will not receive updates.",
 			},
+			deprecated: {
+				background: "rgb(211,21,16)",
+				color: "#fff",
+				description: "Should not be used and will not receive updates.",
+			},
 		},
 	},
 	// Set an empty object to avoid the "undefined" value in the ComponentDetails doc block
 	packageJson: {},
 	// A list of published npm tags that should not appear in the ComponentDetails doc block
+<<<<<<< HEAD
 	ignoredTags: ["beta"],
+=======
+	ignoredTags: ["beta", "next"],
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 };
 
 export default {
@@ -115,6 +165,13 @@ export default {
 		withActions,
 		withIconSpriteSheet,
 	],
+<<<<<<< HEAD
 	loaders: [FontLoader, IconLoader],
+=======
+	loaders: [
+		FontLoader,
+		IconLoader,
+	],
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	tags: ["autodocs", "dev"],
 };

components/buttongroup/package.json

@@ -17,10 +17,18 @@
 		".": "./dist/index.css",
 		"./*.md": "./*.md",
 		"./dist/*": "./dist/*",
+<<<<<<< HEAD
 		"./index.css": "./dist/index.css",
 		"./metadata.json": "./dist/metadata.json",
 		"./package.json": "./package.json",
 		"./stories/*": "./stories/*"
+=======
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./metadata/metadata.json",
+		"./metadata/*": "./metadata/*",
+		"./package.json": "./package.json"
+>>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
 	},
 	"main": "dist/index.css",
 	"files": [