services/web/frontend/stories/docs/feature-flags.mdx
import { Canvas, Controls, Meta } from '@storybook/blocks' import * as FormatCurrency from './format-currency.stories'
<Meta title="Storybook Guideline / Feature flags" />You can wrap your story with the withSplitTests utility to add split test variants to your Storybook stories, so you can toggle feature flags directly in the Storybook UI. See withSplitTests on GitHub.
splitTestsArgTypes object.export const splitTestsArgTypes = {
'local-ccy-format': {
description: 'Use local currency formatting',
control: { type: 'radio' },
options: ['default', 'enabled'],
},
}
withSplitTests.Import withSplitTests and Meta from '@storybook/react' in your stories.
export default {
...config,
...withSplitTests(config, ['local-ccy-format']),
}
Resulting stories will have added controls to define the variants of the split tests.
<div> <Canvas of={FormatCurrency.Story} /> <Controls of={FormatCurrency.Story} /> </div>