graphql-engine/frontend/libs/nx/storybook-addon-console-env/README.md

nx-storybook-addon-console-env

This library contains a Storybook addon allowing to modify some Hasura console env variables (window.__env), the addon uses Storybook global variables under the hood to modify and inject console variables.

What is it for?

Addon

This addon adds a Console env tab in Storybook addons tabs.

It displays and allows to modify some console env vars (for now isAdminSet and consoleType) and reloads stories to emulate each type of console or login status.

Stories parameter

It is possible to add parameters to stories (for now isAdminSet and consoleType) to force those variables, otherwise, default variables values are used.

How it works

Some console env vars (for now isAdminSet and consoleType) are stored as Storybook globals variables and are displayed/modified thanks to this addon.

When a console env global variables is updated (through a user interaction in the UI or a story parameter):

• the URL search parameters are updates with the global variables values,
• a reload of the iFrame containing the story is triggered.

A script in preview-body.html will extract the variables from the URL and build the proper window.__env object, then console globals are correctly initialized.

Setup

To manipulate console env variables from Storybook UI, you need to:

• install the addon,

Install addon

Add reference to addon in your .storybook/main.ts file.

const config: StorybookConfig = {
  ...
  addons: [
    ...
    'storybook-addon-console-env',
    ...
  ],
  ...
};

export default config;

Testing

This addon is tested thanks to Chromatic snapshots. No interaction test has been implemented yet, as the play function cannot interact with addons control.