[6.0] Improve navigator design to more closely match web

[codybrouwers]

Is your feature request related to a problem? Please describe.

It would be great if the navigator grouped stories separated by / like in the web navigator. I saw @a7med-mahmoud's great work in #326 which brings us a lot closer and it would be great if we tried to match web as closely as possible.

Describe the solution you'd like

Ideally the navigator should match web as closely as possible, but I threw together the below proposed layout that is just requires a few changes to the StoryListView component. This works when I use a story title like: atoms/Checkbox and exporting a story titled Default. Happy to create a PR if it looks good!

I also saw this note in the migration doc, is it relevant for 6.0?

Are you able to assist bring the feature to reality?

For sure!

Thanks @dannyhw for all of your work on React Native Storybook, I really appreciate it! 😊 I recently watched your interview with Jamon Holmgren a few weeks ago which helped provide a bunch of backstory to the project, thanks for that!

Web	Current	Proposed

[dannyhw]

@CodyBrouwers hey! thanks for the kind words :)

Yeah actually this has been planned for a long time and I actually almost included something like this but I just never decided on the right approach.

Currently the way the stories are set up in the sidebar is a bit over complicated so I've been wanting to re-do it.

Right now there is a bit of a rewrite already undergoing for the 6.4 storybook support so I'm waiting for that to be complete before I work on anything else. However I think any conflicts would be minimal since the work ongoing is around the integration with core storybook apis.

However this is definitely one of the main features that I'd like to add either before or after 6.0 stable.

If you want to have a go at implementing then please feel free to open a PR and I'll be happy to help with it 🙏

[dannyhw]

There isn't currently anything to parse the story names for categories etc so that would need to be worked on.

The best thing would be to copy the web implementation probably, however it's quite different now with the rework done to the search etc.

The feature itself should be easy but the problem is making it performant and readable since the existing code is pretty unoptimized and hard to read.

[codybrouwers]

Glad to hear this is on your radar! 😄

I found this folder in the web repo, is it the best place to find the web's implementation of the navigator?

If you don't think there will be too many conflicts with upcoming work then I will definitely give it a go!

[dannyhw]

@CodyBrouwers yeah that looks like the right place, seems to be a hierarchy a bit like Sidebar-> explorer -> ref -> tree

Its a bit more complex in their version of it since they have a different UI for the search results, I guess we could do the same though.

Yeah if your changes are mostly in storylistview then it should be mostly free from conflicts.

Please let me know if I can help at all :)

[ckollars]

I came here to see if I could be of any assistance since this would be great to have on device.

@CodyBrouwers Let me know if you need a second pair of 👀 on anything.

[leojclarke]

Ah, I've been trying to find the syntax to group my components by category, but is it right, this is only possible for Web stories or am I missing something?

Currently I write my stories like this:

// Button.stories.tsx
storiesOf('Button', module)
  .addDecorator(withKnobs)
  .addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)

  .add('signup button with facebook icon and text', () => (
    <Button
      onPress={() => alert('You pressed the sign up with facebook button')}
      icon={'facebook'}
      text={'Sign up with Facebook'}
    />
  ));

Which just results in a huge long list in the sidebar (I like using the web interface and have the full preview open on the device).

So currently there is no way to write something like this:

// Checkbox.stories.js
import { Checkbox } from './Checkbox';
 
export default {
 title: 'Design System/Atoms/Checkbox',
 component: Checkbox,
};

It would be awesome to bring react-native closer to the web (also, the react-native docs are very hidden on the storybookjs website... 😔

Thanks @dannyhw for all your work! I'm gonna go checkout your interview with Jamon!

[kyle-ssg]

Have been searching for issues and this was the closest I'd found, I thought it would have been possible to control react-native storybook via a web UI, I feel like that would make things way easier. I did something similar where a performance monitor would send commands to react-native via WebSockets https://github.com/Flagsmith/react-native-performance-monitor.

I just wonder if it'd be possible to reuse the web storybook UI and clicking stories would just send messages to the app to tell it to open the story.

[dannyhw]

@kyle-ssg thats basically what storybook/react-native-server is in the stable version (5.3).

I haven't been able to find a way to make it work yet in the v6 beta. Though I intend to support the same web-socket updates even if the server package isn't updated.

[kyle-ssg]

Oh right, in that case, brilliant - can't wait to see this working!

[dannyhw]

The pr for this was already merged so closing this as resolved