Support multivariate flags (#5)

* supports multi variate

* add multivariate component

* update readme

* update flow version

* fix test case name

Author: Brianzchen

README.md

@@ -88,9 +88,33 @@ This is the simplest way to render a feature flagged component when you don't ne
 | deprecation  | boolean | false | By default if the flag evaluates to true, the child component will render. But you may want to do the reverse and enable an older version of a feature if the flag is false, which can be done by setting this prop to true |
 | fallback | React.Node | null | If async mode is enabled, fallback will be rendered when the flags have not yet been defined
 
+### LdMultivariate
+
+If your flag returns you a multivariate value, you can use this component instead of LdFeature. Which instead of rendering `React.Node` as the children, it instead expects a function that will be passed the multivariate value.
+
+```js
+return (
+  <LdMultivariate feature="my-feature">
+    {(variation) => {
+      if (variation === 'yes') return <YesComp />
+      if (variation === 'no') return <NoComp />
+      return <MaybeComp />
+    }}
+  </LdMultivariate>
+)
+```
+
+children: (variation: any) => React.Node,
+  feature: string,
+
+| Props  | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| children* | (variation: any) => React.Node | undefined | Render prop that will be passed the resulting variation that expects a React component to be returned  |
+| feature*  | string | undefined | The name of the feature flag |
+
 ### useLdFlag
 
-Alternatively to `LdFeature`, you may want to use hooks instead which can be helpful when you want to decide if you want to render a feature programmatically or you want to evaluate multiple flags together instead of nesting a large tree of components.
+Alternatively to `LdFeature` or `LdMultivariate`, you may want to use hooks instead which can be helpful when you want to decide if you want to render a feature programmatically or you want to evaluate multiple flags together instead of nesting a large tree of components.
 
 | Props  | Type | Default | Description |
 | ------ | ---- | ------- | ----------- |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ld",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Connects a Launch Darkly client with a react tree",
   "main": "lib/index.js",
   "repository": "git@github.com:Tabcorp/react-ld.git",
@@ -35,7 +35,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "4.0.0",
-    "flow-bin": "^0.131.0",
+    "flow-bin": "^0.132.0",
     "flow-copy-source": "2.0.9",
     "husky": "^4.2.5",
     "jest": "^26.4.0",

src/Context.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 export type FlagsT = {|
-  [string]: boolean,
+  [string]: any,
 |}
 
 export type ContextT = {|

src/LdFeature.js

@@ -21,7 +21,7 @@ const LdFeature = ({
 
   if (!flags) return fallback;
 
-  const isEnabled = flags[feature];
+  const isEnabled = !!flags[feature];
   if (!isEnabled && !deprecation) return null;
   if (isEnabled && deprecation) return null;
 

src/LdMultivariate.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from 'react';
+
+import Context from './Context';
+
+type Props = {|
+  children: (variation: any) => React.Node,
+  feature: string,
+|};
+
+const LdMultiVariate = ({
+  children,
+  feature,
+}: Props): React.Node => {
+  const client = React.useContext(Context);
+  const { flags } = client;
+
+  const variation = flags?.[feature];
+
+  return children(variation);
+};
+
+export default LdMultiVariate;

src/LdMultivariate.spec.js

@@ -0,0 +1,44 @@
+// @flow
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import { LdProvider, LdMultivariate } from '.';
+
+describe('<LdMultivariate', () => {
+  it('renders the render prop', (done) => {
+    const hook = jest.fn();
+    const fakeClient = {
+      on: () => {},
+      allFlags: jest.fn(() => ({
+        enableTest: 'test',
+      })),
+      waitForInitialization: jest.fn(() => new Promise((resolve) => {
+        resolve();
+        hook();
+      })),
+    };
+    const App = () => (
+      <div data-testid="element">
+        <LdMultivariate feature="enableTest">
+          {(variation) => {
+            if (variation === 'test') return '123';
+            return '234';
+          }}
+        </LdMultivariate>
+      </div>
+    );
+
+    const { getByTestId } = render(
+      <LdProvider
+        client={fakeClient}
+      >
+        <App />
+      </LdProvider>,
+    );
+
+    waitFor(() => expect(hook).toHaveBeenCalled()).then(() => {
+      expect(getByTestId('element').textContent).toBe('123');
+      done();
+    });
+  });
+});

src/LdProvider.js

@@ -45,7 +45,7 @@ const LdProvider = ({
       setFlags(client.allFlags());
     });
     client.on('change', (settings: SettingsT) => {
-      setFlags((pFlags) => ({
+      setFlags((pFlags: SettingsT) => ({
         ...pFlags,
         ...mapToCurrentFlags(settings),
       }));

src/index.js

@@ -2,4 +2,5 @@
 export { default as Context } from './Context';
 export { default as LdProvider } from './LdProvider';
 export { default as LdFeature } from './LdFeature';
+export { default as LdMultivariate } from './LdMultivariate';
 export { default as useLdFlag } from './useLdFlag';

src/useLdFlag.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import LdContext from './Context';
 
-export default function useLdFlag(name: string, fallback?: boolean = false): boolean {
+export default function useLdFlag<T = boolean>(name: string, fallback: T): T {
   const { flags } = React.useContext(LdContext);
   const feature = flags?.[name];
 

src/useLdFlag.spec.js

@@ -80,4 +80,45 @@ describe('useLdFlag', () => {
       done();
     });
   });
+
+  it('can return multivariate value', (done) => {
+    const hook = jest.fn();
+    const fakeClient = {
+      on: (key, callback) => {
+        if (key === 'ready') {
+          callback();
+        }
+      },
+      allFlags: jest.fn(() => ({
+        enableTest: 'string',
+      })),
+      waitForInitialization: jest.fn(() => new Promise((resolve) => {
+        resolve();
+        hook();
+      })),
+    };
+    const App = () => {
+      const enableTest: string = useLdFlag<string>('enableTest', '');
+
+      return (
+        <div data-testid="element">
+          {enableTest}
+        </div>
+      );
+    };
+
+    const wrapper = render(
+      <LdProvider
+        client={fakeClient}
+        async
+      >
+        <App />
+      </LdProvider>,
+    );
+
+    waitFor(() => expect(hook).toHaveBeenCalled()).then(() => {
+      expect(wrapper.getByTestId('element').textContent).toBe('string');
+      done();
+    });
+  });
 });