woocommerce/plugins/woocommerce-blocks/storybook/main.js

29 lines
847 B
JavaScript
Raw Normal View History

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-30 20:59:14 +00:00
module.exports = {
stories: [
// WooCommerce Blocks stuff (anywhere in repo!)
'../assets/js/**/stories/*.@(js|jsx|ts|tsx)',
'../packages/**/stories/*.@(js|jsx|ts|tsx)',
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-30 20:59:14 +00:00
],
addons: [
'@storybook/addon-essentials',
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-30 20:59:14 +00:00
'@storybook/addon-a11y',
'@storybook/addon-links',
'storybook-addon-react-docgen',
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-30 20:59:14 +00:00
],
features: {
babelModeV7: true,
emotionAlias: false,
},
// webpackFinal field was added in following PR: https://github.com/woocommerce/woocommerce-blocks/pull/7514
// This fixes "storybook build issue" related to framer-motion library.
// Solution is from this commment: https://github.com/storybookjs/storybook/issues/16690#issuecomment-971579785
webpackFinal: async ( config ) => {
config.module.rules.push( {
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
} );
return config;
},
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-30 20:59:14 +00:00
};