diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 55e72e9adb8..143fdb8e2ee 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.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 diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index cff2a33769e..21549f172e7 100644 --- a/plugins/woocommerce-blocks/package.json +++ b/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:build": "BABEL_ENV=development storybook build -c ./storybook -o ./storybook/dist", + "storybook": "pnpm watch:build:project:storybook", + "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": [ diff --git a/plugins/woocommerce/changelog/update-storybook-commands-to-use-wireit b/plugins/woocommerce/changelog/update-storybook-commands-to-use-wireit new file mode 100644 index 00000000000..8602707cc96 --- /dev/null +++ b/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. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f578ea68b4..ca48ebe2ade 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/tools/storybook/.storybook/main.js b/tools/storybook/.storybook/main.js index e6215c719a7..77d8555c3ef 100644 --- a/tools/storybook/.storybook/main.js +++ b/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 = ( diff --git a/tools/storybook/package.json b/tools/storybook/package.json index 1c1d7a1e1b5..dc0a68e3d81 100644 --- a/tools/storybook/package.json +++ b/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", - "postbuild-storybook": "cp ../../plugins/woocommerce-blocks/storybook/dist/iframe.html ./storybook-static/assets/woocommerce-blocks", - "build-woocommerce": "pnpm --filter=@woocommerce/plugin-woocommerce build", - "build-woocommerce-blocks-storybook": "pnpm --filter=@woocommerce/block-library storybook:build", - "preinstall": "npx only-allow pnpm", - "storybook": "pnpm build-woocommerce && ./import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true storybook dev -c ./.storybook -p 6007 --ci", - "storybook-rtl": "USE_RTL_STYLE=true pnpm storybook" + "build": "pnpm --if-present --workspace-concurrency=Infinity --stream --filter=\"$npm_package_name...\" '/^build:project:storybook$/'", + "build:project": "pnpm --if-present '/^build:project:.*$/'", + "build:project:storybook": "wireit", + "watch:build": "pnpm --if-present --workspace-concurrency=Infinity --filter=\"$npm_package_name...\" --parallel '/^watch:build:project:storybook$/'", + "watch:build:project": "pnpm --if-present '/^watch:build:project:.*$/'", + "watch:build:project:storybook": "wireit", + "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" + ] + } } }