haszari
commented
4 years ago Here's a trimmed-down example component and story.
// index.js
/**
* @typedef QuantitySelector
*
* @param {Object} props Component props.
* @param {string} props.className CSS class(es).
* @param {number} props.quantity Value to display.
* @param {number} props.minimum Minimum value.
* @param {number} props.maximum Maximum value.
* @param {Function} props.onChange Called when the value changes.
* @param {string} props.itemName The item/value (e.g. product) that the quantity applies to - used for an accessibility message.
* @param {boolean} props.disabled Render the component as disabled and prevent user input.
* @return {*} QuantitySelector component markup.
*/
const QuantitySelector = ( {
className,
quantity = 1,
minimum = 1,
maximum,
onChange = () => null,
itemName = '',
disabled,
} ) => {
// .. component implementation
};
QuantitySelector.propTypes = {
className: PropTypes.string,
quantity: PropTypes.number,
minimum: PropTypes.number,
maximum: PropTypes.number,
onChange: PropTypes.func,
itemName: PropTypes.string,
disabled: PropTypes.bool,
};
export default QuantitySelector;// stories/index.js
import QuantitySelector from '../';
export default {
title: 'WooCommerce Blocks/@base-components/QuantitySelector',
component: QuantitySelector,
};
const Template = ( args ) => <QuantitySelector { ...args } />;
export const Primary = Template.bind( {} );
// Primary.args = {
// disabled: false,
// quantity: 1,
// itemName: 'widgets',
// };
shilman
imeredith
silouanwright
stale[bot]
yairEO
mbustosp
Describe the bug Hi there, sorry for the vague bug!
We've recently upgrade to Storybook 6.0 and we're keen to migrate our stories from
KnobstoControlsaddon, and the other cool stuff in essentials based on theargspattern, e.g. automatic docs.Our project uses React, so we're using Storybook-react. The project is WooCommerce Blocks, and there's an open PR dedicated to this: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3046
Our components include PropTypes declarations. Example component: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/51137ecb81da55c98cfc7bc5ed3dcd4e2aa75a8b/assets/js/base/components/quantity-selector/index.js
Note - we're planning on migrating to JSDoc typescript declarations (in our JS files - we're not using TypeScript lang). So if this is supported by Storybook we can switch to that. So far I can't get either option to work - the controls don't show up in Storybook unless I manually specify them via story.args prop.
Our project is quite complex and we have a custom webpack config. In the related branch / PR the webpack config is overridden using
webpackFinalconfig prop.With
--debug-webpackI've confirmed that the react-docgen plugin is in the config:How can I debug where it's going wrong, or ensure it has access to our prop declarations?
To Reproduce Sorry – I don't have a minimal reproduce repo.
Expected behavior Hoping to get this working, again apologies for the open-ended bug report.
Ideally we can nail down the flow of data into react-docgen and document exactly what's expected here, and how to diagnose problems.
System: Please paste the results of
npx sb@next infohere.Additional context