[Add on: Viewport] How should I reset viewport between stories?

[lancegliser]

Summary

I'm trying out a pattern to work with my designer in Chromatic. Create a component, create a story with a default. For each device we support create a new story using parameters.viewport. Got that working and resetting back to no device on the default by adding: parameters.viewport: { defaultViewport: "responsive" } in preview.tsx.

But, it comes with a warning in the console:

Cannot find "defaultViewport" of "responsive" in addon-viewport configs, please check the "viewports" setting in the configuration.

That's the default value though, per docs: https://storybook.js.org/docs/essentials/viewport

Is there some other method I should be using to reset viewport on non-specialized stories?

Additional information

No response

Create a reproduction

No response

[enix79]

Hey @lancegliser, I found the answer here: #27073 (comment)

export default {
  title: '...,
  parameters: {
    viewport: {
      defaultViewport: 'reset'
    }
  }
};

[lancegliser]

Thank you for taking a bit to answer! It's much appreciated over a holiday.

[lancegliser]

Forgot I'd posted this. A came on a solution a while ago with the advent of initialGlobals for viewport in preview.tsx.

const preview: Preview = {
  parameters: {
    initialGlobals: {
      viewport: { value: undefined },
    },
  },
}

My stories now just do this:

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof ErrorGraphic> = {
  component: ErrorGraphic,
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
  tags: ["autodocs"],
  parameters: {
    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    type: {
      options: ["unrecoverable", "not-found", "server"],
    },
  },
  args: {
    type: "unrecoverable",
  },
};

export default meta;
type Story = StoryObj<typeof ErrorGraphic>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Unrecoverable: Story = {
  // More on args: https://storybook.js.org/docs/react/writing-stories/args
  args: {},
};

export const UnrecoverableSmallMobile: Story = {
  globals: {
    viewport: { value: "mobile1", isRotated: false },
  },
};