Storybook Addon LaunchDarkly


Use LaunchDarkly in your Storybook stories.

Disclamer

This is not official storybook addon.
I made this because LD won't for years https://github.com/launchdarkly/react-client-sdk/issues/30.

I can't actively handle the issues which is not in my usecase. and won't because LD officials won't help.

Install

yarn

``
yarn add --dev storybook-addon-launchdarkly
`

npm

`
npm install -D storybook-addon-launchdarkly
`

Add the addon to your configuration in .storybook/main.js

`js
module.exports = {
...config,
addons: [
...your addons
"storybook-addon-launchdarkly",
],
};
`

Writing your stories with flags

`jsx
import Example from '.';

const meta = {
component: Example,
} satisfies Meta;
export default meta;

export const Default: StoryObj = {
parameters: {
launchdarkly: {
flags: {
testFlag: true,
},
},
},
};
`

Writing your test with flagged stories

Because composeStory dosen't handdle addons, you need to setup.
check this comment for referrence.

`js
// setupFile.js
import { setProjectAnnotations } from '@storybook/react';
import globalConfig from '../.storybook/preview';
import addonLaunchdarklyConfig from 'storybook-addon-launchdarkly/preview';

setProjectAnnotations({
...globalConfig,
decorators: [
...globalConfig.decorators,
// not loaded automatically in preset, must add this manually for @storybook/testing-react to pick it up
...addonLaunchdarklyConfig.decorators,
],
});
`

`tsx
// Example.test.tsx
import { composeStories } from '@storybook/react';
import { render, screen } from '@testing-library/react';
import * as stories from './Example.stories';

describe('Example', () => {
const { True, False } = composeStories(stories);

test('flag shoud be True', async () => {
render();

expect(screen.queryByText('True')).not.toBeNull();
expect(screen.queryByText('False')).toBeNull();
});

test('flag shoud be False', async () => {
render();

expect(screen.queryByText('True')).toBeNull();
expect(screen.queryByText('False')).not.toBeNull();
});
});
``

Example StoryBook

https://kodai3.github.io/storybook-addon-launchdarkly