Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue: Use parameters.component if available #8109

Closed
mattgreenfield opened this issue Sep 18, 2019 · 3 comments
Closed

Vue: Use parameters.component if available #8109

mattgreenfield opened this issue Sep 18, 2019 · 3 comments

Comments

@mattgreenfield
Copy link

Is your feature request related to a problem? Please describe.
When writing stories in Vue, each story must declare the component that it displays. This leads to a lot of repetition of the component name.

import SButton from './SButton.vue';

export default { title: 'Button' };

export const loading = () => ({
  components: { SButton }, // This is the same on every story
  template: '<s-button loading>Manage</s-button>',
});
export const small = () => ({
  components: { SButton }, // This is the same on every story
  template: '<s-button size="small">Manage</s-button>',
});

This is true of CSF and StoriesOf stories but I noticed that the default export of a CSF story has a component option. I had assumed that this would register the component globally (or scoped to the file?) and so I wouldn't need to register it for each story. Like this;
export default { title: 'Button', component: SButton };
But unfortunately this didn't work as expected.

Describe the solution you'd like
Declaring a component on the default export means you don't have to add it to every story.

import SButton from './SButton.vue';

export default { title: 'Button', component: SButton };

export const loading = () => ({
  template: '<s-button loading>Manage</s-button>',
});
export const small = () => ({
  template: '<s-button size="small">Manage</s-button>',
});

Describe alternatives you've considered
I considered making a small wrapper function at the top of my story file to do this for me. Something along the lines of;

const storyMaker = (template) => {
  return {
    components: { SButton },
    template: template,
  }
};

export const loading = () => storyMaker('<s-button loading>Manage</s-button>');

Are you able to assist bring the feature to reality?
no

Additional context
Originally raised on Medium - https://medium.com/@matt.greenfield/this-looks-great-and-much-easier-to-use-thank-you-c560cf9865ba
Issue created as per response to that post.

@stale
Copy link

stale bot commented Oct 9, 2019

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!

@stale stale bot added the inactive label Oct 9, 2019
@shilman shilman added the todo label Oct 10, 2019
@stale stale bot removed the inactive label Oct 10, 2019
@shilman shilman changed the title CSF Stories require repetition of component name in Vue Vue: Use parameters.component if available Jan 15, 2020
@shilman shilman added this to the 6.0.0 milestone Jan 15, 2020
@shilman shilman modified the milestones: 6.0, 7.0 May 8, 2020
@ux-engineer
Copy link

@shilman this is listed in 6.0 priority features in Hotlist, but is included in 7.0 milestone?

@shilman
Copy link
Member

shilman commented Jun 14, 2023

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if this is still relevant in SB 7.x.

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants