Configuring defaults for imported variants

There are cases where you will want to have defaults applied to all variants, for example if you need a custom :selector for all your stories.

How to set it up

This can be set up in the configuration screen associated to your Storybook, which can be accessed from the main screen:

You’ll see the following empty configuration out-of-the-box:

Available options

defaultImportConfiguration

Follows the same configuration as the variantPropertiesAPI. VariantProperties of components will be merge into this one.

viewports

List of viewports brakepoints for the :viewport simulated state.

Can be in the form of width only (in pixels):

{
  "viewports": {
    "desktop": 1440,
    "mobile": 390
  }
}

or with width and height:

{
  "viewports": {
    "desktop": {
      "width": 1920,
      "height": 1080,
    },
    "mobile": {
      "width": 390,
      "height": 800,
    }
  }
}

Use cases

Import all your stories with a custom :selector

{
  "defaultImportConfiguration": {
    "initArgs": {
      ":selector": ".my-provider-class :first-child"
    }
  }
}

Create an additional variant theme for all imported components

This will import two different stylesheets present in your Storybook and create different variants

{
  "defaultImportConfiguration": {
    "initArgs": {},
    "variantProperties": [
      {
        "fromArg": ":css",
        "name": "theme",
        "values": [
          {
            "name": "dark",
            "argValue": "<link rel=\"stylesheet\" href=\"/css/dark.css\">"
          },
          {
            "name": "light",
            "argValue": "<link rel=\"stylesheet\" href=\"/css/light.css\">"
          }
        ]
      }
    ]
  }
}