mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-23 17:19:37 +02:00
8acb7af2b9
* Add foundations and migrations docs * Add storybook/addon-designs version 8.2.1 * Test Figma link * Refactor Modal stories * Create figmaDesignUrl * Create foundations * Create feature flags docs * Create Storybook builds docs * Add storybook/addon-designs version 8.2.1 * Test Figma link * Add an example of Story with split-tests within the Storybook guidelines (#27260) * Add FormatCurrency demo in feature-flags.mdx * Add syntax highlight to code samples * Update stories with figmaDesignUrl * Figma access token * Use OLButton * Hide control for children and footer * Add primitive colors * Use useSplitTest instead * Update cloud builds docs with `storybook-push-trigger` * Make Foundations the default story --------- Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com> GitOrigin-RevId: 0729759803f190d89cf543d087eea86265b725f1
41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
import { Canvas, Controls, Meta } from '@storybook/blocks';
|
|
import * as FormatCurrency from './format-currency.stories'
|
|
|
|
<Meta title="Storybook Guideline / Feature flags" />
|
|
|
|
# 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](https://github.com/overleaf/internal/blob/main/services/web/.storybook/utils/with-split-tests.tsx).
|
|
|
|
1. Define your split test argTypes:
|
|
Add your split test configurations to the `splitTestsArgTypes` object.
|
|
|
|
```js
|
|
export const splitTestsArgTypes = {
|
|
'local-ccy-format': {
|
|
description: 'Use local currency formatting',
|
|
control: { type: 'radio' },
|
|
options: ['default', 'enabled'],
|
|
},
|
|
}
|
|
```
|
|
2. Wrap your story with `withSplitTests`.
|
|
|
|
Import `withSplitTests` and `Meta` from '@storybook/react' in your stories.
|
|
|
|
```js
|
|
export default {
|
|
...config,
|
|
...withSplitTests(config, ['local-ccy-format']),
|
|
}
|
|
```
|
|
|
|
## Example
|
|
|
|
Resulting stories will have added controls to define the variants of the split tests.
|
|
|
|
<div>
|
|
<Canvas of={FormatCurrency.Story} />
|
|
<Controls of={FormatCurrency.Story} />
|
|
</div>
|