How can I use a story in another story without copy & pasting it?

[damontgomery]

We have a use case for building demo pages out of existing components / stories. It would be nice not to have to copy & paste.

This is possible in Storybook, but no documentation exists for web components.

See https://storybook.js.org/docs/react/workflows/stories-for-multiple-components.

[damontgomery]

I have been able to get a version of this working, but it looks a little odd. I'll try to point out the key pieces. Wondering if there is a better way. :)

import { html, TemplateResult } from 'lit';
import { unsafeHTML } from 'lit-html/directives/unsafe-html';
import './example-component';

const configuration = {
  title: 'Example/Example',
  component: 'example-component',
  argTypes: {
    exampleSlot: {
      name: 'slot="example"',
      description: '...',
      table: {
        category: 'Slots',
      },
      control: { type: 'text' },
    },
  },
  args: {
    exampleSlot: `
      <div slot="example">hello world</div>
    `,
  },
};

export default configuration;

const Template = (customArguments = {}): TemplateResult => {
  const args = {
    ...configuration.args,
    ...customArguments,
  };

  return html`
    <example-component>
      ${unsafeHTML(args.exampleSlot ?? '')}
    </example-component>
  `;
};

export const ExampleStory = (customArguments = {}) => Template(customArguments);

export const ExampleStoryWithCustomArguments = () => Template({
  exampleSlot: `
      <div slot="example">something different</div>
    `,
});

import { html } from 'lit';
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';

import { ExampleStory } from '../../../components/example-component/example-component.stories';

<Meta title="Page Demos/Demo Page" />

<Canvas>
  <Story name="Demo page">
    html`
      ${ExampleStory()}
      ${ExampleStory({exampleSlot: `<div slot="example">customized here</div>`})}
    `
  </Story>
</Canvas>

Details

A story needs to be a function. The Template.bind({}) pattern with Template.args copies the function object and then changes the arguments. I couldn't get this to see the arguments when importing a story, maybe something is missing.

So, I made a wrapper that was simpler? and more explicit.

export const ExampleStory = (customArguments = {}) => Template(customArguments);

This takes an optional object of arguments which are combined in the template. This allows us to call the story from another story and get the a copy of that story since it's all contained in one function.

In the story, this does the combining.

const Template = (customArguments = {}): TemplateResult => {
  const args = {
    ...configuration.args,
    ...customArguments,
  };

 // ...
}

It's the same for all stories and supports autocomplete.

Instead of exporting the configuration straight up, I found I needed to save it to a variable and then use

export default configuration;

This let me access the object in the Template().

Summary

• Create configuration object and then export as default
• Set args in the configuration to set defaults
• Pass custom arguments into the template as an object and combine with defaults
• Use args.argument in the Template instead of argument
• Define stories as functions which can optionally receive custom arguments

You can remove defaults by setting them to null

{ exampleSlot: null }

Issues / Challenges

Storybook sometimes claims that controls are not configured for the stories, but the controls are shown and they work. If they don't right away, you may need to restart storybook.

[damontgomery]

I ran into an issue with this pattern.

export const ExampleStory = (customArguments = {}) => Template(customArguments);

export const ExampleStoryWithCustomArguments = () => Template({
  exampleSlot: `
      <div slot="example">something different</div>
    `,
});

3 things we'd like to have working:

• Story works on its own story
• Story controls work
• Story works in another story with defaults

Essentially, the first case works as expected. The second, doesn't.

This is what I was able to get working, but it is clunky. I'm not sure how much of an issue that is though because we have yet to find a use case for loading a non-default story in another story. We usually load the default and pass in the customizations.

const ExampleStoryWithCustomArguments = ExampleStory.bind({});

ExampleStoryWithCustomArguments.args = {
  exampleSlot: `
    <div slot="example">something different</div>
  `,
}

export { ExampleStoryWithCustomArguments };

Then call it in another story with

${ExampleStoryWithCustomArguments(ExampleStoryWithCustomArguments.args)}

I tried a few others solutions.

export const ExampleStoryWithCustomArguments = (customArguments = {}) => Template({
  ...customArguments,
  exampleSlot: `
    <div slot="example">something different</div>
  `,
});

This works except that you cannot override the example slot. You can override any arguments that are defaults. This is a little confusing in the Storybook UI. This is mitigated by the fact that you can still use the story that uses all the defaults to mess around.

I think what is happening here is that Storybook always passes in the combined defaults + control changes as the argument to the story function. At that point, we don't really know which is used and we only want to set our per-story default if it hasn't been changed by controls.

Choose first

• Controls override
• Per-story default
• Component default

[damontgomery]

A little more digging this is what I was able to come up with.

• Define the configuration as a variable so we can reference it.
• Always define argTypes so controls work.
• If the story is called with no arguments, use the default configuration arguments. This is a little redundant, but makes TypeScript happy.
• Use default arguments for the component with the passed arguments on top.

import { html, TemplateResult } from 'lit';
import './outline-example';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';

const configuration = {
  title: 'Content/Example',
  component: 'outline-example',
  // This is important so that the controls show up consistently.
  argTypes: {
    mySlot: {
      description: 'My slot.',
      control: { type: 'text' },
    },
  },
  // These values are used if the story is loaded from another story without any arguments.
  args: {
    mySlot: `<div slot="my-slot">Hello World</div>`,
  },
};

export default configuration;

// If the story is called from another story without any arguments, the default arguments are loaded from the configuration object.
const Template = (args = configuration.args): TemplateResult => {
  // If the story is called with only some arguments defined, include all the other defaults too so you only need to specify overrides.
  args = {
    ...configuration.args,
    ...args,
  };

  return html`
    <outline-example>
      ${unsafeHTML(args.mySlot ?? '')}
    </outline-example>
  `;
};

export const MyStory = Template.bind({});

export const MyStoryWithOverrides = Template.bind({});

MyStoryWithOverrides.args = {
  mySlot: `<div slot="my-slot">Overridden Slot</div>`,
};

You can call this from another story with:

Use all defaults.

${MyStory()}

Override value.

${MyStory({ mySlot: `` })}

Call story with values defined on the story and not the defaults:

${MyStoryWithOverrides(MyStoryWithOverrides.args)}

This more or less follows the pattern in https://storybook.js.org/docs/react/writing-stories/args.

I think the use case for non-default stories is there, but not sure how to tackle this. I think Storybook is using MyStory.args and combining, then calling, but not sure how you do that in another story. Since we are calling it with something, leaving it empty needs to pull defaults from somewhere are it's not clear where we can pull them from so that different stories use different defaults.

I feel like the approach listed above is pretty close to the Storybook documentation, which I like. I was a little confused about exports and passing arguments before.

wrapping Template() didn't seem to do anything and that makes sense to me now. The exports { MyStory } sort of makes sense. That isn't needed, you can define the export in the export const MyStory ... and then modify the properties at that point and it still exports with the properties.

[damontgomery]

This works, but I wasn't able to figure a way to make this load and be editable from the Storybook controls.

The above works if inside a template. However, to be editable as a string in Storybook, we've used this pattern,

titleSlot: `<div slot="example--title">Hello world</div>`,
// ...
${unsafeHTML(args.titleSlot ?? '')}

If you set titleSlot: MyStory() you get an object and it's printed as an object. If you include it as-is without unsafeHTML, it renders, but isn't editable in Storybook.

[himerus]

This is fascinating. I need to dive into this as I'm really in need of the same/similar pattern for another client we'd like to showcase page prototypes in Storybook.