Comments (15)
Yeah. That'd a great feature.
For now you can resize your browser :)
from storybook.
BTW: Is there any open source we can use.
from storybook.
you mean a viewport resizer like this? demo.
from storybook.
Yeah. That one looks nice.
from storybook.
@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:
- simple viewport resizer
- toggle controls and action logger
Some features that I will be adding:
- manual resizer
- 'hay' resize
- random resize
- a set of preset viewport sizes
from storybook.
Awesome. Looking forward to that.
I could may help it to go with the styling as well.
from storybook.
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.
from storybook.
@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.
from storybook.
@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.
from storybook.
@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
from storybook.
@D1plo1d yes sure. I am happy to.
Drop me an email to [email protected] and let's schedule a time.
from storybook.
@arunoda, regarding multiple windows, can we just duplicate the iframe in the layout component? I don't understand the data communication part.
from storybook.
@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.
from storybook.
You can point Google Resizer to localhost:9001
from storybook.
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.
from storybook.
Related Issues (20)
- [Bug]: Syntax highlighting breaks due to multiple version of mdx-js/react in Storybook v7 using `legacyMdx1`
- [Bug]: "Uncaught TypeError: Vv.addons.addPanel is not a function" after upgrading from 7.6.17 to 8.0.0
- [Bug]: Didn't find 'checkboxgroup--checkbox-group-arg-data' in CSF file, this is unexpected
- [Bug]: Instructions after automigrate to v8.0.0 would run migration to v8.1.0-alpha.1
- Better yarn handling
- [Bug]: Unable to install storybook (_d.toLowerCase is not a function)
- [Bug]: Can no longer render prop documentation without a control HOT 7
- Build: Re-enable Storybook in Vite Ecosystem CI
- [Bug]: storybook 8.0 + vite build error HOT 13
- [Bug]: Integrating Storybook Coverage Reports with Sonarcloud
- [Bug]: v7 -> v8 controls tab is missing a lot of information HOT 7
- [Bug]: Storybook 8 -> Unable to render Canvas with inline=false HOT 1
- [Bug]: Explicit action mocks are not always reset between tests in test runner (race condition) HOT 6
- [Bug]: mdx pages not loading HOT 1
- [Bug]: Story source is showing `[object Object]` instead of the component name HOT 6
- [Bug]: "Show code" doesn't show code on MDX Story HOT 1
- [Bug]: Running the upgrade migration 7.6.x to 8) gives a false error on having storyStoreV7 HOT 3
- [Bug]: Using typescript: "react-docgen-typescript" breaks source preview HOT 15
- [Bug]: Chromatic plugin warns of incorrect `storybookConfigDir` configuration HOT 1
- [Bug]: Meta type should require one of the params title/component HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook.