Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix for storybook to ensure all components render #11465

Merged
merged 2 commits into from Oct 27, 2023
Merged

Conversation

opr
Copy link
Contributor

@opr opr commented Oct 26, 2023

What

Fixes Storybook as not all components are rendering there despite the fix added in #11456.

It removes the babel-loader webpack loader that is included in storybook by default, for some reason this isn't parsing our files correctly. I followed the comment here: storybookjs/storybook#3346 (comment)

Why

After upgrading to webpack 5 storybook stopped working and in #11456 I added a fix, however some components still didn't show after this. It is due to the STORE_PAGES item in the allSettings object not being defined in the storybook context.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. Run npm run storybook
  2. Go to localhost:6006 and check all components load.
  3. Open the console, there is a warning but check that there are no errors.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

Before After

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Skipping

Required because storybook build fails because the STORE_PAGES is undefined in that context.
@opr opr added status: needs review tools Used for work on build or release tools. skip-changelog PRs that you don't want to appear in the changelog. labels Oct 26, 2023
@opr opr self-assigned this Oct 26, 2023
@woocommercebot woocommercebot requested a review from a team October 26, 2023 11:38
@github-actions
Copy link
Contributor

github-actions bot commented Oct 26, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-11465.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 523
  • Total errors: 2340

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: +3.46 kB (0%)

Total Size: 1.54 MB

Filename Size Change
build/active-filters-frontend.js 6.66 kB +94 B (+1%)
build/all-products-frontend.js 9.95 kB +90 B (+1%)
build/all-products.js 39.9 kB +96 B (0%)
build/all-reviews.js 7.94 kB +107 B (+1%)
build/attribute-filter-frontend.js 19.9 kB +82 B (0%)
build/attribute-filter.js 11.3 kB +100 B (+1%)
build/breadcrumbs.js 2.12 kB +86 B (+4%)
build/cart-frontend.js 29 kB +76 B (0%)
build/cart.js 39.6 kB +105 B (0%)
build/checkout-frontend.js 30.6 kB +82 B (0%)
build/checkout.js 42.7 kB +102 B (0%)
build/collection-filters.js 1.72 kB +83 B (+5%) 🔍
build/featured-category.js 13.6 kB +93 B (+1%)
build/featured-product.js 13.8 kB +91 B (+1%)
build/filter-wrapper-frontend.js 14.6 kB +90 B (+1%)
build/handpicked-products.js 7.32 kB +98 B (+1%)
build/legacy-template.js 7.83 kB +94 B (+1%)
build/mini-cart-component-frontend.js 30.8 kB +80 B (0%)
build/mini-cart-contents.js 16 kB +101 B (+1%)
build/mini-cart.js 6.09 kB +92 B (+2%)
build/page-content-wrapper.js 1.94 kB +87 B (+5%) 🔍
build/price-filter-frontend.js 7.93 kB +77 B (+1%)
build/price-filter.js 7.51 kB +93 B (+1%)
build/product-collection.js 13.5 kB +97 B (+1%)
build/product-gallery-large-image-next-previous.js 4.23 kB +82 B (+2%)
build/product-gallery-large-image.js 2.45 kB +87 B (+4%)
build/product-gallery-pager.js 3.47 kB +89 B (+3%)
build/product-gallery-thumbnails.js 3.88 kB +84 B (+2%)
build/product-gallery.js 9.49 kB +90 B (+1%)
build/product-query.js 11.6 kB +96 B (+1%)
build/rating-filter-frontend.js 18.8 kB +72 B (0%)
build/reviews-by-category.js 11.5 kB +106 B (+1%)
build/reviews-by-product.js 12.8 kB +107 B (+1%)
build/reviews-frontend.js 6.61 kB +85 B (+1%)
build/single-product.js 11.1 kB +74 B (+1%)
build/stock-filter-frontend.js 18.9 kB +83 B (0%)
build/wc-blocks-data.js 19.7 kB +100 B (+1%)
build/wc-shipping-method-pickup-location.js 29.4 kB +106 B (0%)
ℹ️ View Unchanged
Filename Size
build/3810-frontend.js 18.3 kB
build/4124-frontend.js 23.9 kB
build/8280-frontend.js 8.48 kB
build/active-filters-rtl.css 1.68 kB
build/active-filters-wrapper-frontend.js 6.88 kB
build/active-filters-wrapper-rtl.css 1.53 kB
build/active-filters-wrapper.css 1.53 kB
build/active-filters.css 1.68 kB
build/active-filters.js 6.04 kB
build/add-to-cart-form-rtl.css 375 B
build/add-to-cart-form.css 373 B
build/all-products-rtl.css 4.53 kB
build/all-products.css 4.53 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21 kB
build/attribute-filter-wrapper-rtl.css 1.65 kB
build/attribute-filter-wrapper.css 1.65 kB
build/attribute-filter.css 4.01 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss-rtl.css 2.97 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss.css 2.97 kB
build/blocks-checkout.js 33.9 kB
build/blocks-components.js 8.53 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 268 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.55 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.36 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 273 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 9.23 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 20.5 kB
build/cart-blocks/cart-order-summary-style.js 341 B
build/cart-blocks/cart-totals-frontend.js 290 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 367 B
build/cart-blocks/empty-cart-style.js 365 B
build/cart-blocks/filled-cart-frontend.js 605 B
build/cart-blocks/filled-cart-style.js 333 B
build/cart-blocks/order-summary-coupon-form-frontend.js 20.8 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 20.9 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 346 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 20.5 kB
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 456 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.62 kB
build/cart-blocks/proceed-to-checkout-style.js 1.08 kB
build/cart-rtl.css 9.23 kB
build/cart.css 9.22 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.69 kB
build/checkout-blocks/actions-frontend.js 8.11 kB
build/checkout-blocks/actions-style.js 1.01 kB
build/checkout-blocks/billing-address-frontend.js 9.91 kB
build/checkout-blocks/billing-address-style.js 630 B
build/checkout-blocks/contact-information-frontend.js 1.7 kB
build/checkout-blocks/contact-information-style.js 653 B
build/checkout-blocks/express-payment-frontend.js 5.84 kB
build/checkout-blocks/fields-frontend.js 297 B
build/checkout-blocks/fields-style.js 271 B
build/checkout-blocks/order-note-frontend.js 674 B
build/checkout-blocks/order-summary-cart-items-frontend.js 6.47 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 20.9 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 20.9 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 20.5 kB
build/checkout-blocks/order-summary-shipping-frontend.js 20.5 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 342 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 456 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 14.5 kB
build/checkout-blocks/payment-style.js 509 B
build/checkout-blocks/pickup-options-frontend.js 11.2 kB
build/checkout-blocks/pickup-options-style.js 480 B
build/checkout-blocks/shipping-address-frontend.js 9.87 kB
build/checkout-blocks/shipping-address-style.js 517 B
build/checkout-blocks/shipping-method-frontend.js 1.96 kB
build/checkout-blocks/shipping-method-style.js 1.43 kB
build/checkout-blocks/shipping-methods-frontend.js 19 kB
build/checkout-blocks/shipping-methods-style.js 456 B
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 1.02 kB
build/checkout-blocks/totals-frontend.js 334 B
build/checkout-blocks/totals-style.js 301 B
build/checkout-rtl.css 8.46 kB
build/checkout.css 8.45 kB
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.63 kB
build/collection-price-filter-frontend.js 577 B
build/collection-price-filter-rtl.css 1.28 kB
build/collection-price-filter.css 1.28 kB
build/collection-price-filter.js 3.43 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.17 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.37 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.43 kB
build/mini-cart-contents-block/empty-cart-frontend.js 374 B
build/mini-cart-contents-block/empty-cart-style.js 378 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 288 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.95 kB
build/mini-cart-contents-block/items-frontend.js 247 B
build/mini-cart-contents-block/items-style.js 251 B
build/mini-cart-contents-block/products-table-frontend.js 8.58 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.21 kB
build/mini-cart-contents.css 3.2 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.44 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.57 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.55 kB
build/order-confirmation-billing-wrapper.js 1.5 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.57 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.9 kB
build/order-confirmation-shipping-address-rtl.css 399 B
build/order-confirmation-shipping-address.css 398 B
build/order-confirmation-shipping-address.js 1.55 kB
build/order-confirmation-shipping-wrapper.js 1.5 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.54 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.75 kB
build/order-confirmation-totals-rtl.css 594 B
build/order-confirmation-totals-wrapper.js 1.79 kB
build/order-confirmation-totals.css 593 B
build/order-confirmation-totals.js 2.16 kB
build/packages-style-rtl.css 5.08 kB
build/packages-style.css 5.08 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 8.08 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.11 kB
build/product-add-to-cart-rtl.css 1.37 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.35 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-best-sellers.js 7.04 kB
build/product-button-frontend.js 4.93 kB
build/product-button-interactivity-frontend.js 8.48 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.64 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.58 kB
build/product-category.js 7.97 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 638 B
build/product-gallery-large-image-frontend.js 585 B
build/product-gallery-rtl.css 1.15 kB
build/product-gallery.css 1.15 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.53 kB
build/product-new.js 7.3 kB
build/product-on-sale.js 7.29 kB
build/product-price-frontend.js 2.81 kB
build/product-price-rtl.css 644 B
build/product-price.css 643 B
build/product-price.js 2.33 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.71 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.05 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.65 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.52 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.6 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.19 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.35 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.87 kB
build/product-tag.js 7.5 kB
build/product-template-rtl.css 536 B
build/product-template.css 535 B
build/product-template.js 2.79 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.04 kB
build/product-top-rated.js 7.57 kB
build/products-by-attribute.js 8.02 kB
build/rating-filter-rtl.css 4.08 kB
build/rating-filter-wrapper-frontend.js 19.7 kB
build/rating-filter-wrapper-rtl.css 1.73 kB
build/rating-filter-wrapper.css 1.73 kB
build/rating-filter.css 4.07 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 19.9 kB
build/stock-filter-wrapper-rtl.css 1.49 kB
build/stock-filter-wrapper.css 1.49 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.42 kB
build/store-notices.js 1.67 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.18 kB
build/wc-blocks-editor-style-rtl.css 7.18 kB
build/wc-blocks-editor-style.css 7.17 kB
build/wc-blocks-google-analytics.js 1.16 kB
build/wc-blocks-jetpack-woocommerce-analytics.js 750 B
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.74 kB
build/wc-blocks-rtl.css 2.47 kB
build/wc-blocks-shared-context.js 850 B
build/wc-blocks-shared-hocs.js 1.4 kB
build/wc-blocks-vendors.js 61.7 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 2.61 kB
build/wc-interactivity.js 10.7 kB
build/wc-payment-method-bacs.js 406 B
build/wc-payment-method-cheque.js 401 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 437 B
build/wc-settings.js 2.4 kB

compressed-size-action

Copy link
Contributor

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything looks perfect!. Storybook now has all the components. 🎉

It was a great pairing session. Thank you so much!

@github-actions github-actions bot added this to the 11.5.0 milestone Oct 27, 2023
@opr opr merged commit 5902def into trunk Oct 27, 2023
40 checks passed
@opr opr deleted the fix/storybook-again branch October 27, 2023 09:05
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog. tools Used for work on build or release tools.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants