From a8f46f1d754ad285e5fff647c7aef10614a01b75 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Tue, 14 May 2024 10:18:17 +0200
Subject: [PATCH] [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
---
 .../web/.storybook/utils/with-split-tests.tsx | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 services/web/.storybook/utils/with-split-tests.tsx

diff --git a/services/web/.storybook/utils/with-split-tests.tsx b/services/web/.storybook/utils/with-split-tests.tsx
new file mode 100644
index 0000000000..79b115360b
--- /dev/null
+++ b/services/web/.storybook/utils/with-split-tests.tsx
@@ -0,0 +1,37 @@
+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]
+        : []),
+    ],
+  }
+}