It's great if we can set the title as the current story name(with the kind name) as shown below:

Kindname.storyname | React Storybook

Sometimes in standard laptop screen, we need more vertical space than horizontal. Eg: vertical slider. So this feature will be helpful.

With that, addons can use it as a data store (or a way to save preferences).

So, it'll allow user to apply those functionalities without keyboard shortcuts.

Cross referencing this issue over to the actual repo: storybookjs/storybook#466

Would be great if the action-logger panel, and the index panel, didn't not lose their size between page loads.

I noticed that the shortcut button is ⌘ in the app and found it in the code. It looks like it's hard coded. This makes me wonder whether shortcut keys are supported on other platforms. If so, I think it'd be appropriate to show a different icon in the button that's appropriate for the platform. Thoughts?

In #60, it was discussed to fix the bug as ⌘ ⇧ → and ⌘ ⇧ ← would trigger shortcut if <input> is focused. Along with the fix, it would also remove part of functionality of shortcut. Check this repo for minimal reproducing with auto focused <input>.

The first time I got into trouble was using shortcut to toggle search box, I couldn't dismiss it until it's unfocused.

We need to add the current panel to the URL, otherwise when reload the page or removing out from the full screen mode, current panel is the selected one.

That's so annoying.

This will be a killer feature.
But people can abuse this feature, so we need to see how Atom do this.

Doesn't work following the steps given in the doc. First shows that react-hot-loader and babel are missing then after install them it shows that

The node API for `babel` has been moved to `babel-core`

Currently, Logo is listed as "React Storybook". We need to provide an option to change it with a custom component.

I am getting this error with the latest storybook.

Warning: Unsupported style property padding-left. Did you mean paddingLeft? Check the render method of `Stories`.

Obviously this needs to be paddingLeft not padding-left.

It will be great if there can be API to add tabs in action logger and plugins can be made for that like props info etc.

Currently, if there is one object in the array its printed as

[Object]

Which isn't useful but is standard. It is of no use until we expand it. I initially thought that in case there is an array of length 1, then show the first element, but it will be wrong anyways as not everyone will be happy with that. Can there be a way where we can customize what we want to log ? Like in this case, i would like to log Array[0] that would make more sense for me.

In simple words, I want to customize the data shown in the logger according to my needs so just like a decorator, I would like to have a decorator for logger data.

Also there we can set whether we want to show non-enumerables in the log or not.

I'd like to write a better index panel that can better handle larger projects and libraries, and provide more sophisticated organisation options for stories.

Is there a pluggable way to do this. Can I write this as an external module, and have it dropped in using a known set of properties that get passed to it. (I'd like to write it in Typescript). Or do I have to hack it out within this repo?

Please let me know options - and how pluggable UI want to make the Storybook? Thanks.

In storybooks.io we need to show some custom messages. So we need to have a place for that in the storybook-ui.

Basically, that's to show comment notifications and related stuff. We need to find a way to set something like that using an addon.

Particularly ⌘ ⇧ → and ⌘ ⇧ ← are used in inputs to select everything from the current cursor position to the end/beginning (respectively) and I do this all the time. Here's my hack I have in config.js to work around the problem:

document.body.addEventListener('keydown', event => {
  // there's a keyboard shortcut that's making it impossible to select text in inputs.
  if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && event.shiftKey && event.metaKey && event.target.tagName === 'INPUT') {
    event.stopPropagation()
  }
})

Would be sweet to not have this problem at all :) And input is not the only place where this would apply. Textareas or anything with contenteditable too.

We use the new react-komposer + mantra directly. This helps people to start hacking Storybook quickly.

Tasks

• Launch React Komposer 2
• Launch Podda
• Use React Komposer 2
• Use Podda instead of Redux

I think it would be very useful to display the dimensions of the iframe when it gets resized similarly to the functionality of browsers when you have dev tools open.

This is a feature I wish I could have every time I use storybooks, which is just about every day on the project I'm currently working on(thanks a lot for the awesome product!).

For the reason above, I added the functionality and opened a PR for it here #70

I'd love feedback on the addition and would love to work with you all to get it to the point that it can be merged in!

It seems it can be useful in some use-cases if we can use a new window for the preview instead of an iframe:

• storybookjs/storybook#292

CC: @ritz078

⌘ ⇧ F would cause error shown in below and doesn't work, while ⌃ ⇧ F works properly. Can be reproduced by HEAD commit of current master branch.

We don't need to support all of the features of Storybooks.
But some of the basic navigation and so on.

Also, we need to have a way to provide a way to go back to the default UI.

This shouldn't be a new CSS layout. But completely new UI.

The module is used here