storybookjs/storybook

Mobile storybook view

necolas opened this issue ยท 17 comments

It would be great if we could view the storybook UI on a mobile device, especially when building mobile apps. At the moment the UI is missing meta tags for viewport scaling, and the nav / component menu has no mobile view (could probably be the standard hamburger + drawer pattern initially).

Yes. This contains two issues actually.
We discuss about viewport resizing and mobile device previews here: #17

Also, it's great to have a mobile theme for Storybook itself. So, that's why I marked this as a feature.
If you can work on this, we are more than happy :)

Related: I like how this was done, with grabbers to resize. http://styleguide.devbproto.com/styleguide/

Now we support full screen mode with the keyboard shortcuts. See: #17 (comment)

This is not directly related to mobile view BTW.
Anyway, we need to have a mobile UI as well.

It would be great if you could make in the "keyboard shortcuts" dialog the shortcut description
clickable. I think that should be easy to implement.

With that feature we could use your great storybook on a smartphone ๐Ÿ’ฏ

What would be required to make a standalone storybook app on an independent mobile device? Something like NativeBase's Kitchen Sink app with the drawer to list the stories. If it's not in the works, maybe there's some sort of direction on how to add a menu that can control the stories? Would anything else be needed to make it possible to disconnect the phone and still switch to other stories?

IMO it's incredibly useful (and essential) to be able to share a standalone app with other people in the company so they can see what the designed components will look like once glued together. Management, UI designers (who aren't coders), customers, etc.

#1740 solves part of this problem by changing the iframe size.

stale commented

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

I'm just commenting to avoid the bot closing this issue. Sorry about that.

No worries @denkristoffer thanks perfectly fine to do, I hear @usulpro is back and might invest some time on this again. ๐Ÿ™‡ (after 3.3)

stale commented

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

@necolas Hi Nicolas, I have faced the same issue. I need to test some components on mobile device. Maybe you have found some simple workaround for that?

@denzenin currently the best you can do is to append full=1 to a story URL โ€” this will turn on fullscreen preview mode

@Hypnosphi thanks for the info

stale commented

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Released as 4.0.0-alpha.3

stale commented

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!