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

[Bug]: Missing excludeDecorator for @storybook/angular for Docs #25147

Closed
pedroleitaogls opened this issue Dec 7, 2023 · 3 comments · Fixed by #29069
Closed

[Bug]: Missing excludeDecorator for @storybook/angular for Docs #25147

pedroleitaogls opened this issue Dec 7, 2023 · 3 comments · Fixed by #29069

Comments

@pedroleitaogls
Copy link

Describe the bug

Setting component docs with a componentWrapperDecorator shows the wrapper code in the "Show Code". To exclude the wrapper code you can set a parameter on the component as described below.
According to examples, and for React (https://github.com/storybookjs/storybook/blob/v7.6.3/code/renderers/react/src/docs/jsxDecorator.tsx) you can just set the following parameter:

{
  docs: {
      source: {
          excludeDecorators: true
      }
  }
}

However, this does not work when using @storybook/angular. I found out on your code that you do not take into account the excludeDecorators flag.(https://github.com/storybookjs/storybook/blob/v7.6.3/code/frameworks/angular/src/client/docs/sourceDecorator.ts)

A possible solution:
File: https://github.com/storybookjs/storybook/blob/v7.6.3/code/frameworks/angular/src/client/docs/sourceDecorator.ts
Change from:
if (component && !userDefinedTemplate) {
To:
if (component && !userDefinedTemplate || component && context?.parameters.docs?.source?.excludeDecorators)

To Reproduce

Use @storybook/angular.
Have a component with docs.
Add the following Decorator:
componentWrapperDecorator((story) =>

${story}
),
Add the following parameters:
parameters: { docs: { source: { excludeDecorators: true, } } },

Click on the "Show Code" and you will see that the <div style="margin: 5em">...YourComponent</div> shows instead of just YourComponent.

System

No response

Additional context

No response

@valentinpalkovic
Copy link
Contributor

Hi @pedroleitaogls

Thank you for opening this issue!

Would you like to create a PR to fix this?

@pedroleitaogls
Copy link
Author

Hi @valentinpalkovic , thanks for the fast reply. I have created the PR #25212. I'm having some trouble setting up my local project to test it though.
I'm getting some errors while running the project with yarn task --task dev start-from auto --template angular-cli/default-ts. Maybe I didn't setup the project correctly or missing some task.

@pedroleitaogls
Copy link
Author

Hi @valentinpalkovic, sorry for the late response, the issue is very similar to #12022. The property on parameters.docs.source.excludeDecorators https://storybook.js.org/docs/api/doc-block-source#excludedecorators does not work if you are using Angular Framework.

@vanessayuenn vanessayuenn moved this from In Progress to Empathy Backlog in Core Team Projects Mar 26, 2024
@github-project-automation github-project-automation bot moved this from Empathy Backlog to Done in Core Team Projects Sep 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment