Move and include @storybook/components in standalone Storybook
#19598
Conversation
| @@ -17,42 +24,6 @@ const config: StorybookConfig = { | |||
| name: '@storybook/react-vite', | |||
| options: {}, | |||
| }, | |||
| viteFinal: (config) => { | |||
There was a problem hiding this comment.
all this code was just to apply jsxRuntime: 'classic' but it turns out it wasn't needed after all, is was just a misinterpretation of warnings and errors on my end.
| @@ -9,8 +9,8 @@ import { | |||
| convert, | |||
| styled, | |||
| useTheme, | |||
| } from '@storybook/theming'; | |||
| import { Symbols } from '@storybook/components'; | |||
| } from '../../lib/theming'; | |||
There was a problem hiding this comment.
ensures we've only got one instance of emotion running, and a host of other problems related to double imports are fixed.
There was a problem hiding this comment.
🤔 are there symlinks involved @JReinhold ? How is this SB installed?
There was a problem hiding this comment.
there might be!
The Storybook is started with cwd at code/ and uses all the modules from code/node_modules, which I guess in link mode are symlinks. The actual SB config is at code/ui/.storybook, and it's all tied together with this yarn script:
"storybook:ui": "./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
If I recall correctly the reason cwd is code and not code/ui is because Vite is looking for modules at cwd, and we don't have any node_modules in code/ui, besides the Vite cache.
There was a problem hiding this comment.
You could try running with NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" and see if it helps.
There was a problem hiding this comment.
Holy s**t that worked, even fixed the issue with SyntaxHighlighter2 being undefined which has driven me nuts.
You have to explain the logic behind this, this doesn't match at all with what I thought the problem was.
There was a problem hiding this comment.
I can explain what it does. I have no idea why it fixes the problem but I'm sure we can work that out together :)
| @@ -0,0 +1,13 @@ | |||
| import { Badge } from './Badge'; | |||
There was a problem hiding this comment.
The following stories in this PR have just been moved, and many of them have been converted from storiesOf to CSF3.
The diff shows completely new content, not really true.
| @@ -1,7 +1,7 @@ | |||
| import React from 'react'; | |||
|
|
|||
| import { DocumentWrapper } from './DocumentWrapper'; | |||
| import MarkdownSample from './DocumentFormattingSample.md'; | |||
| import MarkdownSample from './DocumentFormattingSample.mdx'; | |||
There was a problem hiding this comment.
required to make Prettier format MDX2 comments correctly.
…-604-create-a-standalone-storybook-for-our-phase-2
|
I'm very confused as to why this PR adds two new stories to all our sandbox Chromatics - a Primary and Secondary button in iframes.. @tmeasday any ideas? |
JReinhold
changed the title
JReinhold
changed the title
@storybook/components in standalone Storybook
@JReinhold I think it's something unrelated because we briefly ran out of snapshots on Chromatic and a few builds on next were skipped. @shilman accepted them all here: #19600, I suspect if you update from |
…-604-create-a-standalone-storybook-for-our-phase-2
| @@ -9,8 +9,8 @@ import { | |||
| convert, | |||
| styled, | |||
| useTheme, | |||
| } from '@storybook/theming'; | |||
| import { Symbols } from '@storybook/components'; | |||
| } from '../../lib/theming'; | |||
There was a problem hiding this comment.
🤔 are there symlinks involved @JReinhold ? How is this SB installed?
| import { Badge } from './Badge'; | ||
|
|
||
| export default { | ||
| title: 'Basics/Badge', |
There was a problem hiding this comment.
We should move towards using autotitle for all our stories (not necessarily in this PR)
There was a problem hiding this comment.
As you probably noticed I did this in #19615 where possible.
I'm working on this as we speak, in a follow up PR. |
JReinhold
deleted the
jeppe/sb-604-create-a-standalone-storybook-for-our-phase-2
branch
This PR continues the work from #19465 and adds the components to the mix.
What I did
@storybook/componentstocode/ui/components.Most notable is the fact that some stories in MDX currently doesn't work. The typography stories contained code fences which I had to remove, because
SyntaxHighlighter2wasn't working, which hints that we might have issues with double imports when we have stories that include doc blocks. This makes sense and is somewhat expected when running a Storybook for Storybook. This is only an issue in mdx files though, and not even auto-generated docs, so I've disabled the offending features for now and might look into it later if I have more time.How to test