orta / vscode-react-native-storybooks

Inline your Storybooks server in VS Code

React Native Storybook

Select storybooks inside your editor.

How do I use it?

Install it, ensure that the configuration is right. You should see a new section under the files in the Explorer panel called "Storybook".

🎉

If your react-native server crashes, use the command "Reconnect Storybook to VS Code" to re-connect.

What does it do?

• Connect to the React Native storybooks web socket.
• Single click a story to open it in your simulator.
• Double click to open story in your editor.
• Search / picker for quick story activation

Configuration

• react-native-storybooks.host: string (default: "localhost")
• react-native-storybooks.port: number (default: 7007)
• react-native-storybooks.storyRegex: string (default: "**/*.story.*")
• react-native-storybooks.storybookFilterRegex: string (default: ".")

You can either change these in your user settings, or per-project you can create a .vscode/settings.json file and add them there.

Filtering

If you work with quite a lot of stories in a project, it can be a bit of a chore to scroll through them all, so you can use setting react-native-storybooks.storybookFilterRegex to filter down the shown stories. If you do this on your user settings then only you will see the changes.

You can also access the quick picker menu with:

• the Storybook search / picker command; or
• via shortcuts:
  • CTRL+K S on Windows
  • CMD+K S on Mac

Known Issues

Nothing critical ATM.

vscode-react-native-storybooks's Issues

Add a button to the sidebar instead

https://code.visualstudio.com/updates/v1_23?WT.mc_id=vscodeapr2018-twitter-brcl

Prevent Previous/Next Story Keyboard Shortcuts from Conflicting with Cmd+K when Terminal is focused

It appears that this extension prevents the default Command + K keyboard shortcut from working when the integrated Terminal is focused.

Steps to Reproduce

1. Launch Visual Studio Code 1.14.2 on macOS Sierra 10.12.5 with the default keyboard shortcuts.
2. Use the Extensions sidebar to install the React Native Storybook extension and reload the Code window.
3. Open the integrated Terminal and focus it to begin entering text.
4. Run a command which produces output, such as ls.
5. With the Terminal still focused, attempt to clear it with the default Command + K keyboard shortcut.

Expected Results

1. Code launches normally and opens a new window.
2. After the window reloads, the React Native Storybook extension is installed.
3. The Panel appears at the bottom of the code window with the integrated terminal active.
4. Running ls prints a list of folders in the current working directory of the terminal.
5. Typing Command + K clears the terminal, and the output of the previous command is no longer visible.

Actual Results

1. Same
2. Same
3. Same
4. Same
5. The status bar at the bottom of the Code window displays the message, "(⌘K) was pressed. Waiting for second key of chord…". The output of the previous command is still visible in the terminal.

Look into using a vscode webview for web projects

Then this can work for everyone

Add commands to move up/down in the current storybooks

You can look at the current "kind" and "story" then move them up/down. This means you can add key commands to jump between stories - which is really my kind of end goal, as my mouse always runs out of power and I need it for this stuff.

On disconnect add a button to the bottom menu to reconnect

We already have a disconnect callback, and a reconnect function just need to add an extra button on the bottom ) they're called "status bars" and the API is this

command: Show editor on current story

Relates a bit to #9 and #11

Ideally you'd be able to jump to the file where both the section and the story name exists.

Add a warning for people using storybooks 2.x

Check for the existence of node_modules/@kadira/react-native-storybook/package.json

Support derived nesting?

storybook's ability to only have 2 levels of hierarchy is a bit sucky, so maybe this extension can do a workaround. Right now what we do is this:

Maybe the extension should support converting all those "XX - YY" into another hierarchy, providing three levels.

Artist Header
  Full Data
Consignments
  Styling
      Type Reference
      blank
      Boolean Selector

Getting error when trying to reconnect

I am getting this error when trying to reconnect:

command 'extension.restartConnectionToStorybooks' not found

VSCode Version 1.16.0 (1.16.0)

Support choosing a story from a dropdown

Let's say I wanted to find an exact storybook via the keyboard, I'd like to be able to do something like "choose stories" then it presents a drop down list of all of them which I can do a quicksilver-y thing with.

Little bit blocked by the lack of selection mentioned in #6

Storybook running in browser and VSCode tab but not in explorer view...

I know the storybook server is working and running: can connect via browser fine - and "Show StoryBook Tab" shows the same browser view inside VSCode.

But what I also have is an empty Storybook section in the Explorer sidebar.

What could I be doing wrong?

Consider what a top nav button would look like for this extension

Added it by accident, but could be useful

Add the ability to filter your showing stories

I always get distracted, I just want to see a subset of all stories a lot of the time.

Storybook section always shows

Dupe of microsoft/vscode#28325

Persist current kind and story across window closures etc

I'd like to stay on the same story if I can, I don't think there's an API to set selection ( see #6 ) but at least it can happen non-visally

Hide the nav when not in a storybook

microsoft/vscode#29436

Support for host option

May we have support for host option? This helps when trying to run react native storybook on a real device.

storybook-eol/react-native-storybook#122

cant find server at localhost:9001

Just installed vscode-react-native-storybooks in VS Code 1.12.2 ; have a 0.44 React Native app open etc.

After selecting Show Storybooks I see this error. How/where can I set the correct port# ?

Detect a double click and go to the story

I'm unsure if this works, but we could try detect if the user has selected the same story, then do a jump to that story in the editor.

Support custom colors

Looks bad :(

Show connect instead of re-connect if you've never connected

Can go green instead of red then.

When clicked once, the story does not open in the simulator.

hello, I have a problem.

The Problem:

• When clicked once, the story does not open in the simulator.

Env

• React Native Storybook Vscode Extensions Version: 2.7.0
• @Stroybook 버전: 5.2.1
• VSCode Version: 1.38.1
• Connected to stories(show the stories)
• When clicked once, the story does not open in the simulator. (it is working, good)

How can I solve this problem?

Add icons

There's weird gaps because of the lack of icons. Not really sure what they should look like though.

nested stories don't work in vscode

Hi

According to the documentation: https://storybook.js.org/basics/writing-stories/#nesting-stories

We can do nesting with the stories. So, i made this example.

import React from 'react';
import { View, Text } from 'react-native';

import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Background, Input } from './';

storiesOf('CC/DD/Inputs', module)
  .addDecorator(story => (
    <Background style={styles.center}>
      <View style={{ alignSelf: 'stretch' }}>{story()}</View>
    </Background>
  ))
  .add('Email', () => <Input />)
  .add('Password', () => <Input pass />);

storiesOf('CC/DD/Backgrounds', module).add('Gradiente Azul', () => (
  <Background />
));

In the web browser:

But in VSCODE.

The nesting don't work.

Thank you

What is "Show Storybook tab" supposed to do? (currently nothing)

The browser shows the welcome page (but doesn't navigate due to a known issue, https://github.com/storybookjs/storybook/issues/7858 ), and the stories work as expected in the simulator. I can see the stories in the vs code file explorer, but single-, double-, and right-clicking do nothing. Basically, it seems like the plugin connects to the server to list stories, but nothing else.

    "@storybook/addon-actions": "^5.2.0-beta.40",
    "@storybook/addon-links": "^5.2.0-beta.40",
    "@storybook/addons": "^5.2.0-beta.40",
    "@storybook/react-native": "^5.2.0-beta.40",
    "@storybook/react-native-server": "^5.2.0-beta.40",

 npx -p @storybook/cli --version
6.9.0

vs code...

Version: 1.37.1
Commit: f06011ac164ae4dc8e753a3fe7f9549844d15e35
Date: 2019-08-15T16:16:34.800Z
Electron: 4.2.7
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 18.7.0

Thanks