feat: export LDProvider context to be able to use Launchdarkly with storybook

[soupette]

Requirements

• [X] I have added test coverage for new or changed functionality
• [X] I have followed the repository's pull request submission guidelines
• x ] I have validated my changes against all supported platform versions

Related issues

https://github.com/launchdarkly/react-client-sdk/issues/30

Describe the solution you've provided

This PR exports the react context provider used in the LDProvider component in order to support integration with storybook when using components that depends on the useFlags hook.

Why it is needed?

Well, component driven development and integration with storybook is a common practice however Launchdarkly does not export any MockProvider to be able to work storybook and mocking all requests with MSW can be bit too much. On the other side by exporting the react context developers can create their own storybook decorator to make LD working.

Describe alternatives you've considered

None

Additional context

Add any other context about the pull request here.

[kinyoklion]

Hello @soupette,

Thank you for the contribution. I have some reservations though. I think that if we export the context type, then we will have to consider any breaking changes to that type a breaking change to the SDK and thus require a major version.

The React SDK supports providing an LDClient and I think that an LDClient with bootstrap would provide the required functionality. Or, alternatively, you could mock the LDClient as the React SDK only depends on its interface.

  const WrapApp = withLDProvider({
    ldClient, // A mocked client could go here.
    clientSideID: process.env.REACT_APP_LD_CLIENT_SIDE_ID ?? '',
    context,
  })(App);

  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
  root.render(
    <React.StrictMode>
      <WrapApp />
    </React.StrictMode>,
  );

I noticed in testing that this doesn't currently work with asyncWithLDProvider, so I am going to look into that.

Thank you, Ryan

[kinyoklion]

Example of just bootstrap without mocking:

  const LDProvider = await asyncWithLDProvider({
    clientSideID: process.env.REACT_APP_LD_CLIENT_SIDE_ID ?? '',
    context,
    options: {sendEvents:false, fetchGoals: false, streaming: false, bootstrap: {
      devTestFlag: true
    }}
  });

[kinyoklion]

Aside from above suggestions I think that https://github.com/launchdarkly/react-client-sdk/pull/313 could also be used.