Add something like Google Resizer

[kokjinsam]

link: http://design.google.com/resizer/

React Storybook is awesome! I just integrated react storybook in one of my apps! I think one thing is missing is the ability to see my components on different devices. It would be awesome if there is a way toggle device like Google Resizer.

[arunoda]

Yeah. That'd a great feature.
For now you can resize your browser :)

[arunoda]

BTW: Is there any open source we can use.

[kokjinsam]

you mean a viewport resizer like this? demo.

[arunoda]

Yeah. That one looks nice.

[kokjinsam]

@arunoda , I'm currently working on viewport resizer and other stuffs for my team. I have a partially working viewport resizer. I might put in a PR this weekend or next week.

Added:

1. simple viewport resizer
2. toggle controls and action logger

Some features that I will be adding:

1. manual resizer
2. 'hay' resize
3. random resize
4. a set of preset viewport sizes

[arunoda]

Awesome. Looking forward to that.
I could may help it to go with the styling as well.

[D1plo1d]

I'd definitely want the ability to see multiple sizes at once. Here's what it looks like in my (now way too similarly named) ReactStoryboard project:

PS. I'd be stoked to merge these two projects if there's an interest.

[kokjinsam]

@D1plo1d , that looks awesome! You already have all the features that I want to implement. If you're gonna do a PR then I will stop working on mine and work on yours later.

[arunoda]

@D1plo1d this looks great.
I think as the start we can go with a simpler solution just like with Google Resizer.

First we have ways to see it in different resolutions. For multiple windows, we may need to work bit on data communication layer. Since the compoenet actually render on the iframe.

So, let's first go with the @sammkj 's way.
Then once we have it, we can step into the multi window view.

Can't wait to integrate these cool features.

[D1plo1d]

@sammkj thanks!

I'm not sure if you should stop working on your component right away. I think @arunoda's got a point: The more I'm reading react-storybook's src the more I'm seeing implementation differences that would make cherry picking features difficult without larger changes.

I've got some ideas on how a merge could be done. @arunoda I don't want to step on any toes, could we have a quick skype call next week some time to discuss this?

PS. forgot the first time, here's a link to my project: https://github.com/D1plo1d/react-storyboard

[arunoda]

@D1plo1d yes sure. I am happy to.
Drop me an email to [email protected] and let's schedule a time.

[kokjinsam]

@arunoda, regarding multiple windows, can we just duplicate the iframe in the layout component? I don't understand the data communication part.

[arunoda]

@sammkj we can. We get data into the admin panel via the iframe and admin panel actions like selected story back to the iframe.

With multiple iframes things may go wrong. I didn't tested that.
But fixing that would be straight forward too.

I will work on that.

[borisyankov]

You can point Google Resizer to localhost:9001

[arunoda]

Check this comment: #17 (comment)

I'm going to close this in favour of the PR comments thread.
And we won't have a built-in resizer, but users could use browser tools and existing stuff with the FullScreen API.