Allow implementing custom user-defined layouts

[sergeymorkovkin]

Is your feature request related to a problem? Please describe.
Tried to integrate storybook in a custom layout, but couldn't.

Describe the solution you'd like
I want to be able to integrate partial components into my custom React Native layout.
For example,

1. put storybook navigation in a user-defined drawer panel.
2. render controls in the same ScrollView with a preview.

Describe alternatives you've considered

1. Patch storybook sources, which is not a trivial task
2. Rewrite layout from scratch (even then, components are not easily separable)

Are you able to assist bring the feature to reality?
Yes, possibly.

[dannyhw]

@sergeymorkovkin you could probably make something work with the current version. However I do have plans to extract the ui components to a package to make developing them easier which could have the side effect of making this easier.

If you wanted to make something work currently you could turn off the ui and send events from your own UI

import { addons } from '@storybook/addons';
import Events from '@storybook/core-events';
const channel = addons.getChannel();
channel.emit(Events.SET_CURRENT_STORY, { storyId });

getting the storyId can be achieved in a few ways

import { toId } from '@storybook/csf';
toId(kind, storyName)

Just providing this as an alternative but it would definitely be cool to make it more customizable.

[sergeymorkovkin]

Hm, sounds interesting... Got a few questions, though: 1. Is it possible to retrieve the list of stories by sending an event? 2. Is it possible to render controls separately from the default layout? I actually tried to "extract" the core of it, but that didn't work. The number of dependencies is quite high, so I gave up.

[dannyhw]

@sergeymorkovkin

1. probably but I'd need to look into it
2. that might be a little bit more involved, you can make something custom with events but I wouldn't necessarily suggest it https://github.com/storybookjs/react-native/blob/63756fc99113fb856488ba28af77b7739e3331f0/addons/ondevice-controls/src/hooks.ts

[sergeymorkovkin]

@dannyhw Is there any update on this? Just rendering menu / actions / view separately could easily work, but everything is so tightly coupled in your transformer layout... Maybe, you could recommend some other approach we didn't even think of?

[dannyhw]

@sergeymorkovkin what do you mean by transformer layout?

[sergeymorkovkin]

@dannyhw By transformer layout I mean animated transition between different representations when view is becoming smaller freeing up space for either menu or actions. I tried to decouple different components from one another, but couldn't achieve any success in 2 days.

[dannyhw]

@sergeymorkovkin well the plan is to refactor the ui into a separate package and that would probably enable extending the ui in custom ways however I just haven't gotten to that yet.

What you're asking is definitely do-able but its just that the UI was not designed to be split up into parts so it would likely be very custom.

Probably if I were to do it now I would set ondeviceUI as false then render the list of stories and the controls panel manually (Or the entire addons panel might be easier).

[sergeymorkovkin]

@dannyhw Thanks for an advice - we'll look into this...

[dannyhw]

This is now possible in v9