fix(addon-docs): support nuxt context in docs canvas

[farnabaz]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

override prepareForInline in order to render stories inside docs canvas with nuxt context
close #121

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes (if not applicable, please state why)

[eisverticker]

I found a second issue, which is probably related to this one. It seems like assets (fonts, scss, ...) are not being loaded when you navigate to a components docs section directly

eg. http://localhost:4000/?path=/docs/typography--preview

Currently, you have to open the Canvas section first and then select the Docs section in order for assets to be loaded

[farnabaz]

I found a second issue, which is probably related to this one. It seems like assets (fonts, scss, ...) are not being loaded when you navigate to a components docs section directly

It seems that the storybook does not load the entry file on the situation you are explained.

[pi0]

Is this only way to fix and listen for ? 😕

[farnabaz]

This is how docs addon work.
I don't see any workaround to refactor the code.

[mariomka]

I found a second issue, which is probably related to this one. It seems like assets (fonts, scss, ...) are not being loaded when you navigate to a components docs section directly

eg. http://localhost:4000/?path=/docs/typography--preview

Currently, you have to open the Canvas section first and then select the Docs section in order for assets to be loaded

Is there any workaround about this?

Thank you!

[farnabaz]

@mariomka Do you have a problem using the latest version? If so please provide a reproduction sample for it.

[mariomka]

@farnabaz Yes, I have a problem using the last version 3.0.0. I found a workaround, import scss file directly into the preview.js file and add fonts manually in preview-head.html, it's not the best solution but it works.

I hope I have time this weekend to provide a reproduction.

[mariomka]

@farnabaz I found the root of the problem, it happens when you add custom configuration files (main.js, and preview.js).

Reproduction repo: https://github.com/mariomka/nuxt-storybook-docs-assets-issue

Just clone, install yarn dependencies, run storybook, and visit http://localhost:3003/?path=/docs/customtext--text directly, then go to the Canvas tab.

You can checkout the previous commit to seeing how it works well without custom configuration files.

[mariomka]

@farnabaz have you been able to take a look?

[farnabaz]

@mariomka Sorry for the late response and thank you for the reproduction repo.
This will be fixed by 8b733f4.
I will publish next release ASAP

[mariomka]

Thank you @farnabaz! Today I've was updating it and trying it, and now styles load well but fonts still don't load until you open the canvas tab. I've updated the reproduction repo with the new version.

[farnabaz]

@mariomka Sorry for the late response. Could you create an issue for it and a sample reproduction project?