Update/storybook commands to use wireit (#51701)

* Integrated wireit to storybook

* Attempt at integrating wireit

* Update wireit dependencies for storybook package

* Add changelog

* Remove unneeded --if-present and regex in pnpm command

* Remove unneeded dependency for storybook build command

* Add missing dependency in blocks storybook build script

.github/workflows/storybook-pages.yml

@@ -26,7 +26,7 @@ jobs:
                   install: true
 
             - name: Build Storybook
-              run: pnpm --filter='@woocommerce/storybook' build-storybook --quiet
+              run: pnpm --filter='@woocommerce/storybook' build
               env:
                   STORYBOOK_COMPOSITION_PATH_PREFIX: /woocommerce
 

plugins/woocommerce-blocks/package.json

@@ -74,9 +74,11 @@
 		"reformat-files": "prettier --ignore-path .eslintignore --write \"**/*.{js,jsx,json,ts,tsx}\"",
 		"rimraf": "./node_modules/rimraf/bin.js",
 		"start": "rimraf build/* && cross-env BABEL_ENV=default CHECK_CIRCULAR_DEPS=true webpack --watch",
-		"storybook": "storybook dev  -c ./storybook -p 6006 --ci",
+		"storybook": "pnpm watch:build:project:storybook",
-		"storybook:build": "BABEL_ENV=development storybook build  -c ./storybook -o ./storybook/dist",
+		"storybook:build": "pnpm build:project:storybook",
 		"storybook:deploy": "rimraf ./storybook/dist/* && pnpm run storybook:build && gh-pages -d ./storybook/dist",
+		"build:project:storybook": "wireit",
+		"watch:build:project:storybook": "wireit",
 		"test:js": "wp-scripts test-unit-js --config tests/js/jest.config.json",
 		"test:debug": "ndb .",
 		"test:e2e": "sh ./bin/check-env.sh && pnpm playwright test --config=tests/e2e/playwright.config.ts",
@@ -391,10 +393,33 @@
 				"dependencyOutputs"
 			]
 		},
+		"build:project:storybook": {
+			"command": "storybook build  -c ./storybook -o ./storybook/dist",
+			"env": {
+				"BABEL_ENV": "development"
+			},
+			"files": [
+				"storybook/webpack.config.js",
+				"bin/webpack-*.js",
+				"storybook/main.js",
+				"storybook/preview.js",
+				"storybook/style.scss"
+			],
+			"output": [
+				"storybook/dist"
+			],
+			"dependencies": [
+				"dependencyOutputs"
+			]
+		},
 		"watch:build:project:bundle": {
 			"command": "webpack --watch",
 			"service": true
 		},
+		"watch:build:project:storybook": {
+			"command": "storybook dev  -c ./storybook -p 6006 --ci",
+			"service": true
+		},
 		"dependencyOutputs": {
 			"allowUsuallyExcludedPaths": true,
 			"files": [

plugins/woocommerce/changelog/update-storybook-commands-to-use-wireit

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Update storybook commands for WooCommerce Blocks to use wireit.

pnpm-lock.yaml

@@ -5043,6 +5043,12 @@ importers:
       '@storybook/theming':
         specifier: 7.6.19
         version: 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@woocommerce/admin-library':
+        specifier: workspace:*
+        version: link:../../plugins/woocommerce-admin
+      '@woocommerce/block-library':
+        specifier: workspace:*
+        version: link:../../plugins/woocommerce-blocks
       '@woocommerce/eslint-plugin':
         specifier: workspace:*
         version: link:../../packages/js/eslint-plugin
@@ -21713,7 +21719,7 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
-      react: 18.2.0
+      react: ^17.0.2
 
   react-number-format@4.9.3:
     resolution: {integrity: sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==}
@@ -21903,7 +21909,7 @@ packages:
   react-with-direction@1.4.0:
     resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
     peerDependencies:
-      react: ^0.14 || ^15 || ^16
+      react: ^17.0.2
       react-dom: ^0.14 || ^15 || ^16
 
   react-with-styles-interface-css@4.0.3:

tools/storybook/.storybook/main.js

@@ -26,7 +26,14 @@ module.exports = {
 	],
 	refs: ( config, { configType } ) => {
 		if ( configType === 'DEVELOPMENT' ) {
-			return {};
+			// WooCommerce Blocks gets automatically on port 6006 run when you run pnpm --filter=@woocommerce/storybook watch:build
+			return {
+				'woocommerce-blocks': {
+					expanded: false,
+					title: 'WooCommerce Blocks',
+					url: 'http://localhost:6006',
+				},
+			};
 		}
 
 		let pathPrefix = (

tools/storybook/package.json

@@ -11,13 +11,15 @@
 	"author": "Automattic",
 	"license": "GPL-3.0-or-later",
 	"scripts": {
-		"build-storybook": "pnpm build-woocommerce && pnpm build-woocommerce-blocks-storybook && ./import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true storybook build -c ./.storybook",
+		"build": "pnpm --if-present --workspace-concurrency=Infinity --stream --filter=\"$npm_package_name...\" '/^build:project:storybook$/'",
-		"postbuild-storybook": "cp ../../plugins/woocommerce-blocks/storybook/dist/iframe.html ./storybook-static/assets/woocommerce-blocks",
+		"build:project": "pnpm --if-present '/^build:project:.*$/'",
-		"build-woocommerce": "pnpm --filter=@woocommerce/plugin-woocommerce build",
+		"build:project:storybook": "wireit",
-		"build-woocommerce-blocks-storybook": "pnpm --filter=@woocommerce/block-library storybook:build",
+		"watch:build": "pnpm --if-present --workspace-concurrency=Infinity --filter=\"$npm_package_name...\" --parallel '/^watch:build:project:storybook$/'",
-		"preinstall": "npx only-allow pnpm",
+		"watch:build:project": "pnpm --if-present '/^watch:build:project:.*$/'",
-		"storybook": "pnpm build-woocommerce && ./import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true storybook dev -c ./.storybook -p 6007 --ci",
+		"watch:build:project:storybook": "wireit",
-		"storybook-rtl": "USE_RTL_STYLE=true pnpm storybook"
+		"copy-blocks-storybook-iframe": "cp ../../plugins/woocommerce-blocks/storybook/dist/iframe.html ./storybook-static/assets/woocommerce-blocks",
+		"storybook-rtl": "USE_RTL_STYLE=true pnpm storybook",
+		"preinstall": "npx only-allow pnpm"
 	},
 	"engines": {
 		"node": "^20.11.1",
@@ -48,6 +50,8 @@
 		"@storybook/react": "7.6.19",
 		"@storybook/react-webpack5": "7.6.19",
 		"@storybook/theming": "7.6.19",
+		"@woocommerce/admin-library": "workspace:*",
+		"@woocommerce/block-library": "workspace:*",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"react": "18.3.x",
 		"react-dom": "18.3.x",
@@ -55,5 +59,58 @@
 		"typescript": "5.3.x",
 		"webpack": "^5.89.0",
 		"wireit": "0.14.3"
+	},
+	"wireit": {
+		"build:project:storybook": {
+			"command": "storybook build -c ./.storybook --quiet && pnpm run copy-blocks-storybook-iframe",
+			"env": {
+				"STORYBOOK": "true",
+				"BABEL_ENV": "storybook"
+			},
+			"clean": "if-file-deleted",
+			"files": [
+				".storybook/*.{js,jsx,ts,tsx,html}",
+				"import-wp-css-storybook.sh",
+				"../../packages/js/components/src/**/stories/*.story.@(js|tsx)",
+				"../../packages/js/experimental/src/**/stories/*.story.@(js|tsx)",
+				"../../packages/js/onboarding/src/**/stories/*.story.@(js|tsx)",
+				"../../packages/js/product-editor/src/**/*.(stories|story).@(js|tsx)",
+				"../../plugins/woocommerce-admin/client/**/stories/*.story.@(js|tsx)"
+			],
+			"output": [
+				"storybook-static"
+			],
+			"dependencies": [
+				"import-wp-css-for-storybook",
+				"dependencyOutputs"
+			]
+		},
+		"watch:build:project:storybook": {
+			"command": "storybook dev -c ./.storybook -p 6007 --ci",
+			"service": true,
+			"env": {
+				"STORYBOOK": "true",
+				"BABEL_ENV": "storybook"
+			},
+			"dependencies": [
+				"import-wp-css-for-storybook",
+				"dependencyOutputs"
+			]
+		},
+		"import-wp-css-for-storybook": {
+			"command": "./import-wp-css-storybook.sh",
+			"output": [
+				"wordpress"
+			]
+		},
+		"dependencyOutputs": {
+			"allowUsuallyExcludedPaths": true,
+			"files": [
+				"node_modules/@woocommerce/eslint-plugin/configs",
+				"node_modules/@woocommerce/eslint-plugin/rules",
+				"node_modules/@woocommerce/eslint-plugin/index.js",
+				"package.json"
+			]
+		}
 	}
 }