overleaf/services/web/.storybook/utils/with-split-tests.tsx
Antoine Clausse a8f46f1d75 [web] Add with-split-tests util for storybook (#17809)
* Add `with-split-tests` util for storybook

It wraps storybook in a SplitTest context provider with configurable variant values. And it adds controls for them in the storybook UI

* Define `splitTestsArgTypes` in `withSplitTests`

* Revert "Add `with-split-tests` util for storybook"

This reverts commit 3ff351ac

* Edit stories: remove SplitTestProvider and add more digits to amounts

* Create `addon-split-tests` to manage split-tests from Storybook

* Add a `splitTests` parameter to define individual Stories relevant split-tests

* Revert "Add a `splitTests` parameter to define individual Stories relevant split-tests"

This reverts commit 6cbf62729a3d682d695c36e11a86bd576cb7aec1.

* Revert "Create `addon-split-tests` to manage split-tests from Storybook"

This reverts commit d0734a1773c96860e82d81fd62fc9034e2b6e41c.

* Revert "Revert "Add `with-split-tests` util for storybook""

This reverts commit 407fc39b

* Improve types of price-summary.stories.tsx

Co-authored-by: Alf Eaton <alf.eaton@overleaf.com>

---------

Co-authored-by: Alf Eaton <alf.eaton@overleaf.com>
GitOrigin-RevId: bcf3d9f317590a00fb633851ef36146eb800fcfc
2024-05-15 08:04:38 +00:00

37 lines
1 KiB
TypeScript

import type { Meta } from '@storybook/react'
import _ from 'lodash'
import { SplitTestContext } from '../../frontend/js/shared/context/split-test-context'
export const splitTestsArgTypes = {
'local-ccy-format-v2': {
description: 'Use local currency formatting',
control: { type: 'radio' },
options: ['default', 'enabled'],
},
}
export const withSplitTests = (
story: Meta,
splitTests: (keyof typeof splitTestsArgTypes)[] = []
): Meta => {
return {
...story,
argTypes: { ...story.argTypes, ..._.pick(splitTestsArgTypes, splitTests) },
decorators: [
(Story, { args }) => {
const splitTestVariants = _.pick(args, splitTests)
const value = { splitTestVariants, splitTestInfo: {} }
return (
<SplitTestContext.Provider value={value}>
<Story />
</SplitTestContext.Provider>
)
},
...(story.decorators
? Array.isArray(story.decorators)
? story.decorators
: [story.decorators]
: []),
],
}
}