[Bug]: Reusing stories does not handle default args or mappings

[DEfusion]

Describe the bug

Say I have a story like so, using default args and mapping:

import { createButton } from './Button';
import { createButtons } from './Buttons';

export default {
  title: 'Example/Buttons',
  tags: ['autodocs'],
  render: (args) => createButtons(args),
  args: {
    children: 'basic',
  },
  argTypes: {
    children: {
      mapping: {
        basic: [
          createButton({ label: 'Button', primary: true }),
          createButton({ label: 'Button' })
        ]
      }
    }
  },
};

export const Primary = {};

I want to reuse the Primary story in another so following the docs I do something like so:

import { createButtons } from './Buttons';
import * as ButtonsStories from './Buttons.stories';

export default {
  title: 'Example/Composes',
  tags: ['autodocs'],
  render: (args) => {
    const wrapper = document.createElement('div');
    wrapper.appendChild(createButtons(args.buttonArgs));
    return wrapper;
  },
};

export const Primary = { args: { buttonArgs: ButtonsStories.Primary.args } };

The default arg value for children is not present.

If the Buttons story I'm trying to compose does define the children argument like so:

export const WithChildren = { args: { children: 'basic' } };

When I try to compose it the value of children is the string "basic" not the mapped value.

Reproduction link

https://stackblitz.com/edit/github-glatzagq

Reproduction steps

1. Go to above link
2. Click on the Composes stories
3. See they don't compose the Buttons stories as expected

System

Storybook Environment Info:

  System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.volta/tools/image/node/20.15.0/bin/node
    Yarn: 4.5.0 - ~/.volta/tools/image/yarn/4.5.0/bin/yarn <----- active
    npm: 10.7.0 - ~/.volta/tools/image/node/20.15.0/bin/npm
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 18.2
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7 
    @storybook/addon-interactions: ^8.4.7 => 8.4.7 
    @storybook/addon-themes: ^8.4.7 => 8.4.7 
    @storybook/blocks: ^8.4.7 => 8.4.7 
    @storybook/test: ^8.4.7 => 8.4.7 
    @storybook/test-runner: ^0.21.0 => 0.21.0 
    @storybook/web-components: ^8.4.7 => 8.4.7 
    @storybook/web-components-vite: ^8.4.7 => 8.4.7 
    chromatic: ^11.20.2 => 11.20.2 
    eslint-plugin-storybook: ^0.11.1 => 0.11.1 
    storybook: ^8.4.7 => 8.4.7 
    storybook-addon-pseudo-states: ^4.0.2 => 4.0.2

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a bug in how story composition handles default args and arg mappings. To fix: 1. Modify processCSFFile in code/lib/csf-tools/src/CsfFile.ts to include default args and argTypes when processing composed stories 2. Update story composition logic in code/lib/preview-api/src/modules/store/csf/composeStories.ts to: - Merge default args from parent story - Apply arg mappings from parent story's argTypes - Preserve the mapping chain when composing stories Example implementation: ts // In composeStories.ts const composeStory = (story, meta, globalConfig) => { const parentArgs = meta.args || {}; const parentArgTypes = meta.argTypes || {}; return { ...story, args: { ...parentArgs, ...story.args, }, argTypes: { ...parentArgTypes, ...story.argTypes } }; };

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[valentinpalkovic]

Hi @DEfusion

Thank you for opening the issue.

I can't follow you though.

// Primary.args = {}
export const Primary = { args: { buttonArgs: ButtonsStories.Primary.args } };

In the first example, Primary.args is an empty array and you are not reusing the meta information from the first story; therefore, there is no default arg set.

WithChildren.args = { children: 'basic' }
export const WithChildren = {
  args: { buttonArgs: ButtonsStories.WithChildren.args },
};

In the second example the children is correctly set to basic. In your Composed.stories.ts file you don't re-apply or reconfigure the meta section appropriately and therefore the mapping is missing.

[DEfusion]

Hi @valentinpalkovic,

Thanks for your response, that makes sense.

So for the first problem it should be:
export const Primary = { args: { buttonArgs: { ...ButtonsStories.default.args, ...ButtonsStories.Primary.args } } };

For the second I'd need to copy the children mapping from ButtonsStories.

To prevent things getting too complex I've quickly done this:

const composeStoryArgs = ({ source, story }) => {
  const args = { ...source.default.args, ...story.args };
  const argTypes = { ...source.default.argTypes, ...story.argTypes };

  Object.keys(args).forEach((key) => {
    if (argTypes[key] && argTypes[key].mapping) {
      args[key] = argTypes[key].mapping[args[key]];
    }
  });

  return args;
}

export const Primary = { args: { buttonArgs: composeStoryArgs({ source: ButtonsStories, story: ButtonsStories.Primary }) } };

export const WithChildren = { args: { buttonArgs: composeStoryArgs({ source: ButtonsStories, story: ButtonsStories.WithChildren }) } };

However it'd be nice to be able to just get the output from a story and reuse that if possible. I also haven't tried this in my actual storybook yet but I suspect that this will then trigger the other issue I was having which required me to use mappings in my stories.