Commit Graph

12 Commits

Author SHA1 Message Date
Thomas Roberts 1a4968fa66 Fix for storybook to ensure all components render (https://github.com/woocommerce/woocommerce-blocks/pull/11465) 2023-10-27 02:05:43 -07:00
Alexandre Lara 3ecd34e01a Upgrade webpack to version 5 (https://github.com/woocommerce/woocommerce-blocks/pull/8013)
* Upgrade terser-webpack-plugin to version 4.2.3

* Upgrade webpack-bundle-analyzer to 4.7.0

* Upgrade to Webpack version 5

* Upgrade @wordpress/dependency-extraction-webpack-plugin to 4.6.0

* Upgrade dependency copy-webpack-plugin to version 11.0.0

* Upgrade dependency terser-webpack-plugin to version 5.3.6

* Replace webpack-rtl-plugin with the new @automattic/webpack-rtl-plugin

* Replace module.issuer with the new ModuleGraph API

There is a warning appearing in the console when running the application. This is due to the fact that the module.issuer has been deprecated on Webpack 5 and replaced with the new ModuleGraph API. This commit replaces the deprecated API with the new one.

* Upgrade babel and babel plugins to latest version

* Replace jsonpFunction with the new uniqueName property

Add a unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''.

* Replace cacheDirectory inline configuration with options.cacheDirectory

* Upgrade @wordpress/e2e-tests dependency to version 5.6.0

* Remove babel-plugin-transform-react-jsx dependency

Remove babel-plugin-transform-react-jsx dependency because it is already included in @wordpress/babel-preset-default

* Remove unnecessary Babel dependencies

Remove some unnecessary babel dependencies that are already included in the @babel/preset-env package.

* Upgrade puppeteer dependency to version 16.2.0

* Remove caret from package.json dependencies

* Fix Storybook build error

This commit fixes the Storybook build error that was being caused because of Storybook by default uses Webpack 4, but since we are currently upgrading our webpack to version 5, we need to install some required dependencies and also explicitly tell Storybook to use Webpack 5.

* Fix package-lock.json after merging with trunk

* Add own webpack-rtl-plugin implementation to the project

Before upgrading Webpack to version 5, we were using the original `webpack-rtl-plugin` released by Romain Berger; unfortunately, this plugin is not compatible with Webpack 5, so we replaced it with `@automattic/webpack-rtl-plugin`. The problem is that `@automattic/webpack-rtl-plugin` by default generates files with the '.rtl.css' suffix and does not provide a way to change that.

This commit adds our own implementation of the `webpack-rtl-plugin` (adapted from `@automattic/webpack-rtl-plugin`) that is compatible with Webpack 5 and allows us to change the suffix of the generated files to follow the recommended way defined by Wordpress (https://codex.wordpress.org/Right-to-Left_Language_Support)

* Change conditional clause to be multiline

* Fix package-lock.json after merge with trunk

* Fix package-lock.json after merge with trunk

* Rename files to fix ESLint errors

This commit renames files that have the .js extension but contain JSX code. This is causing ESLint to throw errors because by default our Eslint configuration expects only files with the .jsx extension to contain JSX code.

* Fix package-lock.json file

* Add is-plain-obj module to the transformIgnorePatterns of jest config

* Update package-lock.json

* Fix package-lock.json

* Upgrade @wordpress/i18n dependency to version 4.31.0

* Update package-lock.json

* Update composer lock file

* Fix Webpack config for Webpack 5

* Add the package-lock.json

* Remove unsupported config from webpack

* Fix error with Webpack build

* Add wait for network idle to the tests

* Attempt to fix e2e test

* Restore promise.all

* Upgrade puppeteer to v17.1.3

* Upgrade expect-puppeteer

* Update expect-puppeteer

* Downgrade expect-puppeteer

* Revert "Upgrade puppeteer to v17.1.3"

This reverts commit 61ed52a56f131961f3970b6fb22cdd8b540bada3.

* Upgrade Puppeteer to version 17.1.3

* Fix executionContext.frame is not a function error

* Fix e2e tests

* Remove isExperimentalBuild from Product Gallery inner blocks

* Upgrade Webpack and Webpack-cli to latest version

* Upgrade postcss and mini-css plugins

* Fix error with mini-cart block

* Fix styling error with filter blocks

* Fix issue when running unit tests

* Fix storybook script not loading

* Fix a11y issue in Storybook

* Fix error when multiple isExperimentalBuild was being used

* Prevent error when layout is not present in the attributes object

* Update `chunkIds` to `named` in Webpack

* Add cache groups to the Webpack configs
2023-09-20 17:31:52 -03:00
Lucio Giannotta 35adae3fa4 Add Storybook documentation and remove deprecated knobs (https://github.com/woocommerce/woocommerce-blocks/pull/5407)
* Remove Storybook knobs

They are now fully replaced by controls

* Update Storybook to 6.4.9
* Add Storybook documentation and VSCode snippets
* Add VSCode snippets
* Convert stories from checkout packages and include them in Storybook
2021-12-21 18:08:57 +01:00
M. L. Giannotta 91c2ca2143 Migrate storybook entries of QuantitySelector component (https://github.com/woocommerce/woocommerce-blocks/pull/5370)
* Add experimental Emotion11 compatibility

Revert the changes introduced in woocommerce/woocommerce-blocks#5354. The team over at Storybook
has recently implemented a workaround to enable Emotion11 compatibility
in 6.x releases.

See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

* Add `QuantitySelector` property docs and migrate stories

*Note:* Because of a Storybook bug, the number input on the control panel of the
story, is not going to get updated by the component.

See: https://github.com/storybookjs/storybook/issues/15924
2021-12-15 17:03:02 +01:00
M. L. Giannotta 1c837c0de7 Fix conflict between Storybook and `@emotion/styled@11.x` (https://github.com/woocommerce/woocommerce-blocks/pull/5354)
Resolve the alias for `@emotion/styled` to the root of the module in Storybook
WebPack config.

Fixes woocommerce/woocommerce-blocks#5353
2021-12-10 17:08:23 +01:00
Albert Juhé Lluveras 29dd816e1d Fix storybook after TS changes (https://github.com/woocommerce/woocommerce-blocks/pull/3938) 2021-03-09 10:54:38 +01:00
Mike Jolley 8da192a73f Update Storybook and alias `wordpress-components` (https://github.com/woocommerce/woocommerce-blocks/pull/3878)
* Update storybook

* Add alias for wordpress-components

* update package lock
2021-03-04 16:58:10 +00:00
Albert Juhé Lluveras 02174c5431 Add stories to Cart & Checkout totals components (https://github.com/woocommerce/woocommerce-blocks/pull/3533)
* Add stories to Cart & Checkout totals components

* Create @woocommerce/knobs alias

* Update TotalsFooterItem default values so they are in line with other stories
2020-12-14 09:15:50 +01:00
Albert Juhé Lluveras ff2f135e7e Make stylesheets order consistent between build and dev (https://github.com/woocommerce/woocommerce-blocks/pull/2818)
* Add specific webpack config for styles

* Remove style.scss file from story

* Fix storybook

* Extract progressbarplugin config

* Add back ignore-loader

* Fix styling entries

* Cleanup

* Simplify webpack-entries.js

* Add appropiate exclude handles to styling config

* Add back MergeExtractFilesPlugin

* Unify style entries suffix

* Fix experimental flag

* Replace MergeExtractFiles plugin with RemoveFiles

* Prevent duplicate reviews frontend scripts

* Fix unnecessary files being created

* Remove editor.js file generate by MiniCssExtractPlugin

* Remove CSS generation from payment methods config

* Remove unnecessary config

* Simplify styling entries name

* Cleanup

* Refactor webpack-entries
2020-07-22 14:05:56 +02:00
Albert Juhé Lluveras adfecb4259 Split up webpack files for better readability (https://github.com/woocommerce/woocommerce-blocks/pull/2817)
* Split up webpack files for better readability

* Fix storybook

* Fix tests

* update progress-bar-webpack-plugin and implement better feedback

- updates progress-bar-webpack-plugin to latest version which includes more granular output of what webpack event is being processed.
- Improve asset build complete summary to include what build was completed.

* remove unnecessary s suffix

* Add back package-lock

Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-07-07 11:05:06 +02:00
Darren Ethier ad4c981793 Add validation context provider and implement validation for shipping country and coupons. (https://github.com/woocommerce/woocommerce-blocks/pull/1972)
* add errormessage handling to countryinput (along with storybook)

* add types for react

* Add validation context and implement

* implement validation context for country field validation

* tweak ValidationInputError so that it can receive property name for getting error from

* improve storybook webpack config to pull from tsconfig.json

* update storybook story to cover changes with context

* Wrap Checkout Provider with Validation Context Provider

* add screen-reader-text style to storybook

* add styles for input error validation to text input

* improve styling for ValidationInputError component

* add validation error handling to TotalsCouponCode component

And story

* make sure errors are cleared on successful receive/remove item

* dispatch loading cancellation on catching errors

This is needed because loading would be cancelled before the error is thrown so any error handling after the thrown error will not be able to rely on loading.

* implement validation setting for coupon errors

* add error color to labels on inputs too

* fix borders back and force border color

* remove extra structure and improve validation error with alignment for coupon code

* add aria-describedby for text inputs

* add back in validation context provider to fix rebase issue

* rework validation so it works for both checkout and cart

* Some styling tweaks

* more style fixes

* remove unnecessary method

* make sure new function is included in context defaults

* package.lock update? seems harmless so rolling with it.
2020-03-17 12:45:33 +01:00
Rua Haszard 7f44458418 Basic storybook implementation (https://github.com/woocommerce/woocommerce-blocks/pull/1636)
* install & configure storybook (via magic npx script)

* fix indentation in storybook generated files

* eslint ignore generated storybook files (for now at least)

* unhide storybook folder, consistent with Gutenberg project

* demo story for one of our components (with no css/styles)

* hack in scss webpack config & add story for button:
- fixes scss imports breaking storybook build
- note scss / styling doesn't work yet
+ organise our component stories into folder

* git ignore storybook-static build folder

* pin dependencies for storybook

* piggy-back off main webpack config for storybook module.rules (for scss)

* use gutenberg (wp-components) styles in storybook

* use system font for storybook, consistent with wp-admin/gberg and reasonable default for components in front end

* add --ci flag to prevent storybook opening new browser tab…
- see also https://github.com/storybookjs/storybook/issues/6201

* rename default stories to Default (following Gutenberg pattern)

* add story for ErrorPlaceholder

* failing ProductPreview story (committing to PR as an example for discussion)

* storybook for components/icons

* fix aliased dependencies in components for storybook:
append our webpack aliases to storybook webpack config

* basic story for PriceSlider (looks right but interaction broken)

* fix PriceSlider user interaction:
- PriceSlider expects client to handle onChange and pass in new min/max

* add comment about priceslider max/min (todoish)

* remove default stories from storybook scaffolding

* organise stories by module (aka folder in codebase)

* package-lock update after rebase

* remove unnecessary ignores (default stories are gone)

* delete experimental/risky/broken stories:
- icons components are changing in woocommerce/woocommerce-blocks#1644
- we need to refactor/do more work to get ProductPreview working (settings globals)

* remove unnecessary import

* clarify PriceSlider component intended usage comment in story

* remove redundant wrapper divs from stories

* add common storybook addons (used by Gutenberg storybook)

* rebuild package.lock after rebase

* remove unnecessary wrapper div

* package fixes after rebase

* add configuration for storybook source loader

* add decorators for a11y and knobs plugins

* remove unnecessary react import & import useState from WP

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-01-31 09:59:14 +13:00