DavideMininni-Fincons
commented
1 year ago Hello guys @kyubisation @jeripeierSBB some notes and possible blockers about this story (see: https://github.com/lyne-design-system/lyne-components/compare/master...chore/story-convert-stories-to-tsx):
-
storybook.js has very poor documentation about writing stories in Typescript using web components; in many pages in 'Write stories', 'Write docs' etc. the snippets are missing ('This snippet doesnt exist for Web Components yet. Contribute it in a PR now. In the meantime, here’s the React snippet.'). I found this https://storybook.js.org/blog/writing-stories-in-typescript/ but it's related to frameworks.
-
about story's templates: it seems I can't use the JSX syntax, because the 'sbb-button' type is not recognized (see image); I also try the import as done here https://webcomponents.dev/docs/component-story-format (Stencil bullet point) with no success. So I changed to string, but this way I still can't set attributes by spreading the args variable; I have to set them manually one by one, or better, I used the newly created
spreadAttributefunction. I see some downside here, e.g. the${text ?? ''}check for the button label.
- about docs: according to this https://storybook.js.org/docs/web-components/writing-docs/docs-page#with-mdx-documentation the readme's import should works in .js|jsx|ts|tsx stories. However, in my tsx I receive an error ("TS2307: Cannot find module './readme.md' or its corresponding type declarations."). As briefly discussed today, I tried something like this https://github.com/storybookjs/storybook/issues/2883#issuecomment-365864950, with no success . In the end, I found this article https://medium.com/pernod-ricard-tech/integrating-stencil-with-storybook-b12f7effa54b and I checkout-ed the related repo: then, I added the stories glob pattern in the tsconfig's 'exclude' prop and added some silencer for the import line. It works, but I don't really like it.
Thoughts/ideas/suggestions?
kyubisation
We would like to convert our stories to tsx.