Storybook Getting Started page has styling issues #825
Assignees
Labels
bug
Something isn't working
Comments
jattasNI
added
bug
jattasNI
changed the title
|
I see the following error in the console: This might be related to #806. There's a long thread in this storybook issue about MDX 2 not working with storybook 6.5.x (which we're on). |
jattasNI
changed the title
|
The PR above fixed the blank page but there are still styling issues. I renamed the bug and updated the description. |
|
Storybook 7 is now in beta and they're encouraging users to try uptaking it to find compatibility issues. The improvements mentioned include better MDX support and better npm 8 support. https://storybook.js.org/blog/7-0-beta/ The blog also links to a storybook 7 migration guide. |
|
Duplicate of #943 |
jattasNI
added a commit
that referenced
this issue
Mar 31, 2023
# Pull Request ## 🤨 Rationale We want to be on the latest storybook version because it fixes issues we've had with dependencies and it enables more powerful docs pages via mdx and Component Story Format enhancements. Notable changes: - landing page uses correct fonts and errors in console are gone (fixing #825 and #943 properly) - [no more Docs tab](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-docs-changes). Each story group has a docs page under it instead. - XD previews are gone (feature was deprecated) - Actions not working yet and some code previews have stopped working; see "Follow ups" below ## 👩💻 Implementation Following the [upgrade guide](https://storybook.js.org/docs/react/configure/upgrading#prereleases) didn't work very well because it is buggy with a monorepo. Fred's general strategy was to run the upgrade command from within `nimble-components` then delete the `node_modules` and `package-lock.json` that it creates there, then re-install everything from the root. The migration tool is responsible for the changes to: 1. storybook configuration files 2. package.json 3. renaming types like `Story` -> `StoryFn` and `storyName` to `name` 4. deleting the `withXD` decorator which is no longer supported Beyond that there were a few other manual changes: 1. establish static dependencies on components needed by each story. Storybook seems to have gotten more aggressive about compiling away unneeded components so if something isn't imported, it won't be found and components won't render correctly. This meant: 1. replacing a few literals for element tag names in stories with the `elementTag` export 2. updating the `nimble-menu` to explicitly depend on `nimble-anchored-region` (see comment on `menu/index.ts`) 2. Enable 'autodocs' for component and token stories but disable it for test stories 3. Add a patch file to work around storybookjs/storybook#21820 4. simplified return types of story generation functions in `storybook.ts` in response to storybook type changes 5. regenerated landing page screenshot and annotation now that docs tab is gone ## 🔜 Follow ups in future PRs Fixing these issues is tracked by #1146 . I tried upgrading to ts 4.7 but it didn't fix any of them. - [ ] storybookjs/storybook#21820 - [ ] Figure out why actions aren't firing when you click a button. Likely [need this decorator](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-auto-injection-of-storybookaddon-actions-decorator) but it's not present in current rc: storybookjs/storybook#21308 - [ ] Some code previews (table, tooltip) are not available in the Docs page ## 🧪 Testing Chromatic caught several diffs which resulted in the manual changes described above 👍. ~~It's still showing new stories for the wafer map and button. (The wafer map one is caused by Chromatic getting confused when I tried renaming that story, ran a Chromatic build, and then reverted that change. I don't know the cause of the button change.)~~ <- this went away on a subsequent build Also manually spot checked many of the stories across browsers, especially ones that have workarounds in them like table and theme-aware tokens. ## ✅ Checklist <!--- Review the list and put an x in the boxes that apply or ~~strike through~~ around items that don't (along with an explanation). --> - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Fred Visser <1458528+fredvisser@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
🐛 Bug Report
https://nimble.ni.dev/storybook/?path=/docs/getting-started--page used to show content that explained how to use Storybook but now it's a blank grey page.
💻 Repro or Code Sample
https://nimble.ni.dev/storybook/?path=/docs/getting-started--page
🤔 Expected Behavior
It should show the page containing this image:
https://github.com/ni/nimble/blob/main/packages/nimble-components/docs/storybook-overview.png?raw=true
😯 Current Behavior
It shows a blank grey screen:
💁 Possible Solution
🔦 Context
🌍 Your Environment
Related PRs
The text was updated successfully, but these errors were encountered: