Build: Fix sandbox running multiple versions of react

[shilman]

Issue: N/A

Template stories were running multiple versions of react in react projects when referenced by relative path.

@tmeasday @IanVS any idea why this breaks in vite?

What I did

• Fixed this by sym-linking the stories into the project
• Light refactor of sandbox script
• Added react hooks stories to test this case

How to test

• CI passes

[shilman]

@tmeasday Another problem that I'm seeing with this scheme is that the file watching for the story index server breaks. changes to the linked stories don't trigger an index update.

[IanVS]

@shilman do you have an example of a failure that was happening with multiple react versions?

[shilman]

@IanVS If you copy the React hooks story from this PR into next and run a sandbox you'll see the problem when you navigate to that story. @tmeasday and I debugged this together and verified the solution. Symlinking the stories into the sandbox solves that problem, but didn't anticipate the follow-on problems that it reveals.

yarn sandbox --template cra/default-js

[tmeasday]

@shilman do we need to install @storybook/jest as a dependency of our sandboxes?

[tmeasday]

@tmeasday @IanVS any idea why this breaks in vite?

@shilman in what way is it breaking in vite (but not CRA)?

[tmeasday]

Another problem that I'm seeing with this scheme is that the file watching for the story index server breaks. changes to the linked stories don't trigger an index update.

Hmm, we definitely need to investigate this, that would be very annoying.

[shilman]

@tmeasday See the CI failure

[tmeasday]

@shilman build-sandboxes? It is failing in all frameworks, not just Vite, for the @storybook/jest reason mentioned above:

smoke-test-sandboxes is only failing in CRA, but it isn't giving any useful output. Hopefully the same thing?

[shilman]

@tmeasday I'm not at my computer but I think there's also a dev failure that's only in vite. I'll report back later.

[shilman]

@tmeasday @IanVS my bad, i misread the CI output. it was just the missing dependency & i fixed by adding it back. LMK if there's a cleaner way to do this.

[shilman]

@tmeasday holding off on this until we figure out the story index issue for linked stories

[tmeasday]

@shilman

@tmeasday holding off on this until we figure out the story index issue for linked stories

I took a look at this. As far as I can tell reading the source, watchpack doesn't resolve internal symlinks when watching a directory.

A solution is just to add each symlinked dir as a stories glob:

This appears to work, although we'll have to go back to a more complex stories field unfortunately.

OTOH, changing it to a single glob kind of broke your original idea of being able to easily comment out different stories @shilman

[shilman]

NOTE: We should replace ../**/*.stories.* with ../(!template-stories)**/*.stories.* to avoid duplicate matches when there is no src dir in the sandbox.