Commit Graph

14 Commits

Author SHA1 Message Date
M. L. Giannotta 5524c0aa91 Storybook and TS migration of `PriceSlider` component (https://github.com/woocommerce/woocommerce-blocks/pull/5253) (https://github.com/woocommerce/woocommerce-blocks/pull/5293)
* Add full documentation to the component props in Storybook
* Fix `FormattedMonetaryAmount` TypeScript errors

Since this component is passing on props to `NumberFormat`,
it needs to extend all of its original props, except for `onValueChange`
which we wrap in order to accept only `number`s.

* Convert `constrainRangeSliderValues` to TypeScript
* Add docs to `Currency` types
* Convert `PriceSlider` to TypeScript

*Note:* All TypeScript errors were fixed during the conversion,
except for the IE workaround which wasn't clear to me at this time.
Opened an issue: woocommerce/woocommerce-blocks#5276

* Fix Price Slider story (https://github.com/woocommerce/woocommerce-blocks/pull/5253)
* Migrate stories for `ProductName` to latest Storybook

Also add props documentation and add named export.
2021-12-15 17:54:49 +01:00
M. L. Giannotta 703051b1bc Storybook and TS migration of some cart checkout components (https://github.com/woocommerce/woocommerce-blocks/pull/5324)
* Migrate stories for `ProductName` to latest Storybook. Also add props
documentation and add named export.
* Migrate `TotalsFooterItem` to TypeScript and latest Storybook
* Add a `LooselyMustHave` utility type.
* Export `allSettings` so that they can be manipulated in stories and tests

* Implement a way to easily define and reuse Storybook controls

Implement a currency control for a common use-case of selecting currencies.
It currently implements EUR and USD as they have different properties.

* Migrate `TotalsDiscount` to TypeScript and implement stories
* Migrate `TotalsCoupon` to TypeScript and fix stories
* Change Coupon name within Storybook
* Nicer handling of removal of a coupon from Storybook

It now dynamically calculates the discount from the actual coupons.
2021-12-15 17:30:17 +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
M. L. Giannotta 7e9f8c822d Migrate Storybook to 6.4.0 and enable auto-detection of controls (https://github.com/woocommerce/woocommerce-blocks/pull/5249) (https://github.com/woocommerce/woocommerce-blocks/pull/5264)
* Migrate Storybook to 6.4.0 and enable auto-detection of controls (https://github.com/woocommerce/woocommerce-blocks/pull/5249)

Previously our Babel configuration conflicted with the one provided by
default by Storybook, making us unable to leverage the automatic
detection of properties from both JS and TS components to create
controls (formerly known as knobs).

Upgrading to 6.4.0 fixes a bug that makes it easier to work with
Babel configurations. Also done here:

* Removed a few deprecated addons in favor of the replacement ones
bundled within Storybook Essentials.
* Add auto-detection of certain control types depending on the property names
* Add support for TS stories

More context: https://github.com/storybookjs/storybook/issues/12292

* Use `react-docgen` only in development environments

This should reduce production bundle size dramatically. The only
problem here is that Storybook runs its `build` command with the
`NODE_ENV` set to `production`. For this reason, we change the
script to provide `BABEL_ENV` set to `development` to still make sure
the correct configuration is loaded, while trying to reduce any
side-effects on changing the whole `NODE_ENV`.
2021-12-01 12:28:27 +01:00
Mike Jolley dbbb99d55e Move Block Type Settings into Block Type Classes (https://github.com/woocommerce/woocommerce-blocks/pull/4059)
* BLOCK SETTINGS: Remove unused constants/settings

* AssetDataRegistry: Helpers to check for settings that exist, and registering page ID/permalinks

* Move checkout and cart block settings to checkout and cart blocktypes

* Move isShippingCalculatorEnabled to cart block

* Remove HAS_DARK_EDITOR_STYLE_SUPPORT and IS_SHIPPING_CALCULATOR_ENABLED in favour of getSetting

* Move displayCartPricesIncludingTax to blocktypes, and implement getSetting

* Move block settings to core settings and blocktypes

* Fix namespace usage

* Move review settings

* move tag settings

* Keep productCount in core data

* Move min and default height

* Improve storePages code

* Move attributes to attribute filter block type

* Move $word_count_type outside of settings array

* Remove unneeded setting in preview data (shippingCostRequiresAddress)

* Move min/max settings dependency from GridLayoutControl to Blocks themselves and use getSettings

* DEFAULT_COLUMNS and ROWS to settings

* Move product columns/rows to block types

* Add grid settings to AllProducts block

* Correct default rows

* correct min rows default

* Move hasDarkEditorStyleSupport

* Move hideOutOfStockItems to block type settings

* Move build settings to inline script dependency

* Pass data through asset api and move restApiRoutes

* Export all core settings as constants

* Remove WORD_COUNT_TYPE from core settings

* Move some other core settings to assets

* Update constants

* Make settings use TypeScript

* Update CURRENT_USER_IS_ADMIN usage

* WORD_COUNT_TYPE

* REST_API_ROUTES

* REVIEW_RATINGS_ENABLED and SHOW_AVATARS

* Remove REVIEW_RATINGS_ENABLED and SHOW_AVATARS constants

* Remove MIN_HEIGHT

* Remove DEFAULT_HEIGHT

* PLACEHOLDER_IMG_SRC

* LIMIT_TAGS

* HAS_PRODUCTS

* HOME_URL

* HAS_TAGS

* COUPONS_ENABLED

* SHIPPING_ENABLED

* TAXES_ENABLED

* DISPLAY_ITEMIZED_TAXES

* SHIPPING_COST_REQUIRES_ADDRESS

* SHIPPING_STATES and SHIPPING_COUNTRIES

* STORE_PAGES

* ALLOWED_COUNTRIES

* ALLOWED_STATES

* SHIPPING_METHODS_EXIST

* PAYMENT_GATEWAY_SORT_ORDER

* CHECKOUT_SHOW_LOGIN_REMINDER

* CHECKOUT_ALLOWS_GUEST and CHECKOUT_ALLOWS_SIGNUP

* ATTRIBUTES

* DISPLAY_CART_PRICES_INCLUDING_TAX

* DISPLAY_CART_PRICES_INCLUDING_TAX

* update build for TS files

* fix build dir

* Move blocks build config params

* Move placeholderImgSrc to core settings

* Move rest api hydration hoc to shared hocs and provide it restApiRoutes directly to avoid asset data registration

* Move wordCountType to abstract block

* Remove WORD_COUNT_TYPE in favour of getSetting

* Move IS_LARGE_CATALOG and PRODUCT_COUNT to abstract block type and use getSetting inline

* Add wcBlocksConfig

* fix tests

* Remove unused $asset_data_registry

* remove console.log

* Move build settings to abstract block

* Trigger build again

* Move hydration back to regular hocs for compatibility with trunk (merge conflict)

* Removed wcSharedHocsConfig

* esc home url

* Update search fixture

* Update search snap

* 40000 timeout

* hasProducts -> productCount

* Product Count is part of blocks config

* update mocks

* Use version comparison to determine if batching is enabled

* Change isWpVersion

* scrollTo button
2021-04-22 12:37:27 +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
Mike Jolley 8c98c1eaac Support for multiple fee rows in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/3678)
* Inject the routes controller

* Cart totals need to be calculated on cart routes or fees will be missing

* Add fees to schema and response

* Add fees to useStoreCart

* Fix styling of multiple fee rows

* Fix test shape
2021-01-13 16:57:42 +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