Single Story Hoisting isn't working

[sluther]

Describe the bug
Single story hoisting isn't working

Expected behavior
I expect the single story to be hoisted as described in the documentation

Screenshots

Code snippets

import { SimpleButton as SimpleButtonComponent } from './SimpleButton';

export default {
  title: 'Example/SimpleButton',
  component: SimpleButtonComponent,
  argTypes: {
    // backgroundColor: { control: 'color' },
    onClick: {},
  },
};

const Template = (args) => ({
  // Components used in your story `template` are defined in the `components` object
  components: { SimpleButtonComponent },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: '<simple-button v-bind="args" />',
});

export const SimpleButton = Template.bind({});
SimpleButton.args = {
  primary: true,
  label: 'Button',
};

System
Environment Info:

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.13.1/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
Browsers:
Chrome: 89.0.4389.90
Firefox: 69.0.3
Safari: 14.0.3
npmPackages:
@storybook/addon-actions: ^6.2.0-rc.7 => 6.2.0-rc.9
@storybook/addon-essentials: ^6.2.0-rc.7 => 6.2.0-rc.9
@storybook/vue3: ^6.2.0-rc.7 => 6.2.0-rc.9

[ghengeveld]

Your names don't match. Story exports are "title cased" to get the name, in this case Simple Button. Your component name (from title) is SimpleButton. Note the missing space.

Try title: 'Example/Simple Button'

Or if you don't want the space, try SimpleButton.name = "SimpleButton"

Admittedly this is confusing. I wonder if we should consider the raw export name as well.

At very least we can update the docs with an example that reflects this scenario.

[sluther]

That fixed it, thanks!

I do see this warning in the console now, though:

[HMR] bundle 'preview' has 2 warnings
./src/components/SimpleButton.stories.js 31:13-34"export 'SimpleButton' (imported as 'SimpleButtonComponent') was not found in './SimpleButton'./src/components/SimpleButton.stories.js 42:29-50"export 'SimpleButton' (imported as 'SimpleButtonComponent') was not found in './SimpleButton'

Any ideas?

[sluther]

Okay, it turns out that you must use default exports with Vue i.e.:

import SimpleButtonComponent from './SimpleButton';

export default {
  title: 'Example/SimpleButton',
  component: SimpleButtonComponent,
  argTypes: {
    // backgroundColor: { control: 'color' },
    onClick: {},
  },
};

const Template = (args) => ({
  // Components used in your story `template` are defined in the `components` object
  components: { SimpleButtonComponent },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: '<simple-button v-bind="args" />',
});

export const SimpleButton = Template.bind({});
SimpleButton.args = {
  primary: true,
  label: 'Button',
};

I fixed that, but now I'm getting the following warning:

runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: simple-button
at <Anonymous>
at <Anonymous>
at <App>

[shilman]

@sluther does it need to be single-button-component to line up with SingleButtonComponent?

[sluther]

@sluther does it need to be single-button-component to line up with SingleButtonComponent?

That was indeed the issue. Thanks!