7f44458418
* 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> |
||
|---|---|---|
| .. | ||
| block-title | ||
| error-placeholder | ||
| grid-content-control | ||
| grid-layout-control | ||
| heading-toolbar | ||
| icons | ||
| product-attribute-term-control | ||
| product-category-control | ||
| product-control | ||
| product-orderby-control | ||
| product-preview | ||
| product-tag-control | ||
| products-control | ||
| text-toolbar-button | ||
| toggle-button-control | ||
| utils | ||
| view-switcher | ||
| README.md | ||
README.md
Components
These are shared components used by the blocks. If there's a component that is more universally useful, it should go into @woocommerce/components– these components are specific to the Gutenberg context.
The *-control components here are designed to exist in the InspectorControls sidebar, or in a Placeholder component for the "edit state" of a block.
GridContentControl
A combination of toggle controls for content visibility in product grids.
GridLayoutControl
A combination of range controls for product grid layout settings.
ProductOrderbyControl
A pre-configured SelectControl for product orderby settings.
ProductPreview
Display a preview for a given product.
ProductAttributeTermControl
A component using SearchListControl to show product attributes as selectable options. Only allows for selecting attribute terms from one attribute at a time (multiple terms can be selected).
ProductCategoryControl
A component using SearchListControl to show product categories as selectable options. Options are displayed in hierarchy. Can select multiple categories.
ProductControl
A component using SearchListControl to show products as selectable options. Only one product can be selected at a time.
ProductsControl
A component using SearchListControl to show products as selectable options. Multiple products can be selected at once.
Icons
These are a collection of custom icons used by the blocks or components, usually from Material.
Utilities
There are some functions that work across components, these have been extracted into this utilities folder.
Block Title
A block that is responsible for showing the title for some of our blocks.