stories.preview.(jsx,tsx,js,ts) #

This file is an ES module that applies to all stories.

You can control the way stories are rendered and add global decorators, parameters, and more.

Create a stories.preview.(jsx,tsx,js,ts) file with the extension related to your need (JSX or not, TS or not)

• Use it to define global code (CSS import or globals definitions)

// import global style sheet, or load and add stylesheet to the document
import 'https://unpkg.com/@picocss/pico@latest/css/pico.min.css`
...
// import esm module via bare imports or CDN.
import { foo } from 'bar'
foo.init()
...
// override globals (i.e. mocking) (window or globaThis)
globalThis.fetch = async (req, opts)=> {
  // mock the fetch globally
  return Promise.resolve({
    json: () => Promise.resolve({})
  })
};

• Use it to define global decorators, parameters for all stories

i.e. React

import React from 'react';

export const parameters = {
  layout: 'centered',
};

export const decorators = [
  (Story) => {
    return (
      <div style={{ border: '5px solid red' }}>
        <Story />
      </div>
    );
  },
];

i.e. Lit

import { html } from 'lit';

export const parameters = {
  layout: 'centered',
};

export const decorators = [
  (Story) => {
    return html`<div style="border:5px solid red">${Story()}</div> `;
  },
];

It serves the same purpose as the .storybook/preview.js

Its named exports serve as a base for stories story format

As in parameters, decorators, args, play ...

And can be overriden/enriched at story file level or story level.

N.B.: Story context takes precedence on the hierachy.