Stories imported in MDX ignore args and parameters

[jonhuteau]

Describe the bug

I'm upgrading my Storybook from 6.0.0-beta.37 to 6.0.0-beta.39.

As mentioned in release notes, multiple files with same title aren't allowed anymore. So I'm trying to merge theses files.

To give you some context, here are my files:

• 1 file named chart.stories.js, which defines a component playground and only available in story mode
• 1 file named chart.stories.mdx which exposes component showcase with some pre-made options/customizations + props table

chart.stories.js

import AaChart from '../src/chart'

export const playground = (args) => ({
  components: { AaChart },
  props: Object.keys(args),
  template: '<aa-chart :options="options" width="100%" height="300px" />',
})

playground.args = {
  options: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
    }],
  },
}

playground.parameters = {
  controls: { expanded: true },
  previewTabs: {
    'storybook/docs/panel': { hidden: true },
  },
  options: {
    showPanel: true,
    selectedPanel: 'storybookjs/knobs/panel',
  },
  // Disable "docs" tab
  docs: { page: null },
  // Force redirect to default story view
  viewMode: 'story',
  jest: ['chart.spec.js'],
}

chart.stories.mdx

import {
    Meta, 
    Story, 
    Props, 
    Preview, 
    Description, 
} from '@storybook/addon-docs/blocks';

import AaChart from '../src/chart'

import * as stories from './chart.stories.js';

import AaChartBasic from './chart-basic.stories.vue'
// Temp fix until it's possible to handle source code in a better way
import AaChartBasicRaw from '!!raw-loader!./chart-basic.stories.vue'

import AaChartComplex from './chart-complex.stories.vue'
// Temp fix until it's possible to handle source code in a better way
import AaChartComplexRaw from '!!raw-loader!./chart-complex.stories.vue'

<Meta
  title='Packages/Modules/Chart'
  component={AaChart}
  parameters={{ 'viewMode': 'docs' }}
  argTypes={{
    options: { control: 'object' },
  }}
 />

# AaChart

> Package `@aramisauto/facade.modules.chart`

## Basic

<Preview>
    <Story name='Basic' parameters={{ docs: { source: { code: AaChartBasicRaw } } }}>{{
      components: { AaChartBasic },
      template: '<aa-chart-basic />',
    }}</Story>
</Preview>

## Complex

<Preview>
    <Story name='Complex' parameters={{ docs: { source: { code: AaChartComplexRaw } } }}>{{
      components: { AaChartComplex },
      template: '<aa-chart-complex />',
    }}</Story>
</Preview>

<Story name="Playground" parameters={{...stories.playground.parameters}} args={{...stories.playground.args}}>
    {args => stories.playground(args)}
</Story>

## Props

<Props of={AaChart} />

I'm able to see each stories defined in MDX file but I need to define parameters and args arguments on Story tag

<Story name="Playground" parameters={stories.playground.parameters} args={stories.playground.args}>
    {args => stories.playground(args)}
</Story>

Another point I'd like to report is that before, when multiple files where allowed, I didn't had "Playground" story in Docs tab. Now I'm seeing this story while it's defined as "story only" mode

To Reproduce
Steps to reproduce the behavior:

1. Create 1 stories.js file and 1 stories.mdx file
2. In JS file, define some args/parameters
3. Import JS file in MDX file
   import * as stories from './foo.stories.js';
4. Define a story from JS file in MDX

   <Story name="Foo">
       {args => stories.foo(args)}
   </Story>
   

5. Args should be something like an empty object or something you didn't define

Expected behavior

If I define args/parameters in JS story file, I want SB to take these values without having to set args/parameters properties on <Story> tag

System:

$ npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 12.18.1 - /usr/bin/node
    npm: 6.14.5 - /usr/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
  npmPackages:
    @storybook/addon-a11y: ^6.0.0-beta.39 => 6.0.0-beta.39 
    @storybook/addon-controls: ^6.0.0-beta.39 => 6.0.0-beta.39 
    @storybook/addon-docs: ^6.0.0-beta.39 => 6.0.0-beta.39 
    @storybook/addon-jest: ^6.0.0-beta.39 => 6.0.0-beta.39 
    @storybook/addon-viewport: ^6.0.0-beta.39 => 6.0.0-beta.39 
    @storybook/addons: ^6.0.0-beta.39 => 6.0.0-beta.39 
    @storybook/vue: ^6.0.0-beta.39 => 6.0.0-beta.39 

Additional context

I tried to add a primary file responsible of exporting stories with this content

import AaChart from '../src/chart'

export default {
  title: 'Packages/Modules/Chart',
  component: AaChart,
  argTypes: {
    options: { control: 'object' },
  },
}

export * from './chart.stories.mdx'
export * from './chart.stories.js'

It throws me an Unexpected default export without title: {"includeStories":["basic","complex"],"parameters":{"docs":{}}}.
So I guess it's because my files are beeing loaded with *.stories.@(js|mdx).

If I rename to something like chart.(js|mdx), only JS file is loaded

[shilman]

Thanks @jonhuteau ! Will try to give it a look this weekend

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.21 containing PR #11752 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.