feat: update to Storybook v7 (#1935)

* chore(storybook): upgrade to v7

* fix: added storybook build and removed build-storybook

* chore: updated storybook addons with v7

* chore: updated main.js and preview.js with s7

* fix: actions errors fix

* chore: updated Readme

* chore: updated stories with withActions decorators for actions handler for s7

* chore: updated changelog

* fix: withActions decorators

* fix: reverted changes on stories

* fix: addon status version bump

* fix: updated changelog

* chore: updated makeDecorator in decorators

* chore: migration to storybook 7 readme update

* fix: identation fixes

* fix: identation fixes

* fix: remove postcss from features

* fix: temp fix on disabling lazy loading in webpack 5

* fix: actions not firing

* docs: add boolean arg to colorloupe story

* chore: update to latest storybook releases

---------

Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

Author: 4 people

components/calendar/stories/template.js

@@ -114,16 +114,16 @@ export const Template = ({
 			.map((_val, idx) =>
 				new Array(DOW.length).fill(0).map((_v, i) => {
 					const thisDay = idx * DOW.length + i + 1 - firstDOWInMonth;
+					const isOutsideMonth =
+						displayedDate.getDate() < 1 ||
+						displayedDate.getDate() > lastDateInMonth;
 					/* Determine if this entry exists within this month or the next or prev month */
 					let thisMonth = !isOutsideMonth
 						? displayedMonth
 						: displayedMonth + (thisDay < 1 ? -1 : 1);
 					/* Determine if the displayed date is in this year or the previous one */
 					let thisYear = displayedYear;
 
-					const isOutsideMonth =
-						displayedDate.getDate() < 1 ||
-						displayedDate.getDate() > lastDateInMonth;
 					if (isOutsideMonth) {
 						if (thisMonth < 0) {
 							thisMonth = 11;

components/colorloupe/stories/colorloupe.stories.js

@@ -21,6 +21,7 @@ export default {
 	},
 	args: {
 		rootClass: "spectrum-ColorLoupe",
+    isOpen: true,
 	},
 	parameters: {
 		actions: {

tools/preview/CHANGELOG.md

@@ -404,4 +404,4 @@ Co-authored-by: castastrophe <castastrophe@users.noreply.github.com>
 
 🗓 2022-12-13
 
-**Note:** Version bump only for package @spectrum-css/preview
+**Note:** Version bump only for package @spectrum-css/preview

tools/preview/README.md

@@ -57,7 +57,7 @@ Storybook leverages webpack for bundling and we have updated it with the followi
   }
   ```
 
-We are leaning on Storybook's `@storybook/web-components` framework configuration as our stories rely on lit-html for dynamic attribute assignment.
+We are leaning on Storybook's `@storybook/web-components-webpack5` framework configuration as our stories rely on lit-html for dynamic attribute assignment.
 
 ## Add-ons
 
@@ -338,3 +338,139 @@ You can pass any supported [chromatic flag](https://www.chromatic.com/docs/cli#c
 Runs will generate a JUnit XML file with build results (`chromatic-build-{buildNumber}.xml`). This file should not be committed and is part of the .gitignore rules.
 
 Running without publishing to Chromatic? Add the `--dry-run` flag. Need more information to debug a run? Try the `--diagnostics` flag (writes process context information to `chromatic-diagnostics.json`).
+
+
+
+# Migration to Storybook 7.0(Draft)
+
+
+## Updates:
+---
+`*` Added support for handler actions with ```withActions``` on each stories which have action handlers.
+
+Example:
+```js
+import globalThis from 'global';
++ import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    label: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+export const Basic = {
+  parameters: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
+  },
++  decorators: [withActions],
+};
+```
+
+`*` Upgraded to ```Webpack 5``` for improved bundling and performance from ```webpack 4```
+
+`*` @storybook addons dependencies are upgraded to v7 from v6
+```js
+"@storybook/addon-docs": "^7.0.12",
+"@storybook/addon-essentials": "^7.0.12",
+"@storybook/api": "^7.0.12",
+"@storybook/client-api": "^7.0.12",
+"@storybook/components": "^7.0.12",
+"@storybook/core-events": "^7.0.12",
+"@storybook/manager-api": "^7.0.12",
+"@storybook/preview-api": "^7.0.12",
+"@storybook/theming": "^7.0.12",
+"@storybook/web-components-webpack5": "^7.0.12",
+"@whitespace/storybook-addon-html": "^5.1.4",
+```
+
+`*` Added a new "Controls" addon for interactive component props editing.
+
+`*` Introduced a new "Docs-only" mode for isolating component documentation.
+
+`*` Improved the addon ecosystem with new and updated addons.
+
+
+<br></br>
+## Breaking Changes:
+---
+`*` client-api is deperacted and preview-api is introduced
+
+```js
+ - import { useEffect } from '@storybook/client-api';
+ + import { useEffect } from '@storybook/preview-api';
+```
+
+`*` @storybook/addons is deperacted and replaced with @storybook/manager-api
+
+```js
+ - import { addons } from '@storybook/addons';
+ + import { addons } from '@storybook/manager-api';
+```
+
+`*` ```@storybook-webcomponents``` is deprecated. ```@storybook/web-components-webpack'``` is added with webpack 5 support.
+
+```js
+ - framework: '@storybook/web-components',
+ + framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {
+      fastRefresh: true,
+      builder: { lazyCompilation: true },
+    },
+  },
+
+```
+
+`*` Docs is now added to every component on the sidebar with the below code in Storybook 7
+```js
+  docs: {
+    autodocs: true, 
+    defaultName: 'Docs',
+  },
+```
+
+`*` preview.js is exported as default in Storybook 7
+
+```js
+- export const parameters = {
+- actions: { argTypesRegex: '^on[A-Z].*' },
+- };
+
++ export default {
++  parameters: {
++    actions: { argTypesRegex: '^on[A-Z].*' },
++  },
++ };
+```
+## Deprecations(Addons):
+---
+
+`*` ```"@storybook/client-api"``` is deprecated
+
+`*` ```"@storybook/addons"``` is deprecated
+
+
+## Bug Fixes:
+---
+`*` Fixed various issues related to performance, rendering, and compatibility.
+
+`*` Resolved problems with the Storybook UI, including layout glitches and navigation bugs.
+
+`*` Fixed bugs in calender storybook
+
+
+## Improvements:
+---
+`*` Improved the overall performance and stability of the Storybook development environment.
+
+`*` Enhanced the documentation with updated examples and guides.
+
+`*` Optimized the build process for faster bundling and reduced file sizes.
+
+`*` Upgraded dependencies to their latest versions for improved compatibility and security.
+
+---

tools/preview/decorators/contextsWrapper.js

@@ -1,43 +1,47 @@
-import { useEffect } from "@storybook/client-api";
+import { useEffect, makeDecorator } from "@storybook/preview-api";
 
 /**
  * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework>
  * @description Global properties added to each component; determines what stylesheets are loaded
  **/
-export const withContextWrapper = (StoryFn, context) => {
-	const { args, argTypes } = context;
-
-	const getDefaultValue = (type) => {
-		if (!type) return null;
-		if (type.defaultValue) return type.defaultValue;
-		return type.options ? type.options[0] : null;
-	};
-
-	// This property informs which context stylesheets to source
-	//    but does not source a stylesheet for itself
-	/** @type boolean */
-	const isExpress = args.express
-		? args.express
-		: getDefaultValue(argTypes.express);
-	/** @type string */
-	const color = args.color ? args.color : getDefaultValue(argTypes.color);
-	/** @type string */
-	const scale = args.scale ? args.scale : getDefaultValue(argTypes.scale);
-
-	const colors = argTypes.color.options;
-	const scales = argTypes.scale.options;
-
-	useEffect(() => {
-		document.body.classList.toggle("spectrum--express", isExpress);
-
-		for (const c of colors) {
-			document.body.classList.toggle(`spectrum--${c}`, c === color);
-		}
-
-		for (const s of scales) {
-			document.body.classList.toggle(`spectrum--${s}`, s === scale);
-		}
-	}, [color, scale, isExpress]);
-
-	return StoryFn(context);
-};
+export const withContextWrapper = makeDecorator({
+	name: "withContextWrapper",
+	parameterName: "context",
+	wrapper: (StoryFn, context) => {
+		const { args, argTypes } = context;
+
+		const getDefaultValue = (type) => {
+			if (!type) return null;
+			if (type.defaultValue) return type.defaultValue;
+			return type.options ? type.options[0] : null;
+		};
+
+		// This property informs which context stylesheets to source
+		//    but does not source a stylesheet for itself
+		/** @type boolean */
+		const isExpress = args.express
+			? args.express
+			: getDefaultValue(argTypes.express);
+		/** @type string */
+		const color = args.color ? args.color : getDefaultValue(argTypes.color);
+		/** @type string */
+		const scale = args.scale ? args.scale : getDefaultValue(argTypes.scale);
+
+		const colors = argTypes.color.options;
+		const scales = argTypes.scale.options;
+
+		useEffect(() => {
+			document.body.classList.toggle("spectrum--express", isExpress);
+
+			for (const c of colors) {
+				document.body.classList.toggle(`spectrum--${c}`, c === color);
+			}
+
+			for (const s of scales) {
+				document.body.classList.toggle(`spectrum--${s}`, s === scale);
+			}
+		}, [color, scale, isExpress]);
+
+		return StoryFn(context);
+	},
+});