[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