1803676 - Expand documentation to include information on how to create and use new components

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[Hanna Jones [:hjones]]

It's possible to create mdx only files for documentation in storybook: https://storybook.js.org/docs/react/writing-docs/mdx#documentation-only-mdx

It might be nice to have our Storybook landing page be documentation for/about the project. It could include this README content on installing and running storybook (which will provide a helpful starting point once we have a deployed version of the site). It may be possible to just pull in and render the contents of that markdown file directly in a .mdx file - see this Github thread for relevant discussion.

The landing page should probably include some tips on how to create a new reusable component so that we have the ./mach addwidget command documented. We can also create a running list of troubleshooting tips and pitfalls we've encountered, such as:

• needing to specify type="module" in a script tag when importing these components
• needing to specify the html: namespace when using these components in an xhtml file
• not putting the script tags in inc.xhtml files as we've run into issues with that
• anything else that has come up so far

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Toolkit::XUL Widgets' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1803676 - expanding storybook/reusable components documentation r=tgiles,mstriemer,jules

Took a stab at revamping and adding to the Storybook README. The stuff on reusable components should probably be in a separate document, but I wasn't sure where to put it just yet. Eventually some part of this doc will become our Storybook landing page.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/68061dd2f45d
expanding storybook/reusable components documentation r=tgiles,mstriemer

Comment 4

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/68061dd2f45d

Comment 5

[Hanna Jones [:hjones]]

Attachment: Bug 1803676 - fix small typo in npm command r=mstriemer,tgiles

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e841ca81c1a0
fix small typo in npm command r=mstriemer,tgiles

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/e841ca81c1a0

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

A patch has been attached on this bug, which was already closed. Filing a separate bug will ensure better tracking. If this was not by mistake and further action is needed, please alert the appropriate party. (Or: if the patch doesn't change behavior -- e.g. landing a test case, or fixing a typo -- then feel free to disregard this message)