Storybook: Storysource: clicking on stories does not update what is highlighted

[domyen]

Describe the bug
When you click on a story in the sidebar, Storysource does not update the code area that is highlighted.

To Reproduce
Steps to reproduce the behavior:

1. Go to WithTooltip
2. Click on the stories in the sidebar
3. Observe that the code highlighted in Storysource does not change

Expected behavior
I expect the highlighted code to change.

Screenshots
Here's a gif of this behavior in the Button component. https://cl.ly/335848ffb52a

[tmeasday]

I think the issue is more widespread than that. In general it doesn't seem to update (some rare times it does). Could be the same issue as #5197?

[shilman]

@tmeasday This is an issue with the Storybook syntax highlighter component and not a systemic problem with addons. I think the addons just haven't been tested since the upgrade and contain random bugs.

The problem is fixed when I edit storysource/src/StoryPanel.js and replace:

import { Link, SyntaxHighlighter } from '@storybook/components';

With:

import { Link } from '@storybook/components';
import SyntaxHighlighter from 'react-syntax-highlighter/prism-light';

However, we lose some functionality in the process.

@ndelangen Any thoughts here? Looking at the code I'm not sure what's the best way to force the SyntaxHighlighter to re-render itself -- something in the wrapper code is blocking that.

[ndelangen]

I'm on it

[shilman]

Yay!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.4 containing PR #5672 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[martinmcwhorter]

I am seeing a similar possibly related issue with Storysource where the selected story does not get highlighted.

I am using "@storybook/angular": "^5.0.5" and "@storybook/addon-storysource": "^5.0.5"

My .storybook/webpack.config.js is

const path = require('path');

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.ts?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          parser: 'typescript',
        },
      },
    ],
    enforce: 'pre',
    include: [path.resolve(__dirname, '../src')],
  });

  return config;
};

The source shows up, there is just no highlight of the selected story. The source code is black-text on white-background which is different from all screenshots of this feature that I have seen. Could this be theming to styling issue?

[TerrenceLJones]

I think this issue is related to https://github.com/storybooks/storybook/issues/6136.

After chaining my stories together...the highlighting worked as expected.

[MrBugatti]

I am seeing a similar possibly related issue with Storysource where the selected story does not get highlighted.

I am using "@storybook/angular": "^5.0.5" and "@storybook/addon-storysource": "^5.0.5"

My .storybook/webpack.config.js is

const path = require('path');

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.ts?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          parser: 'typescript',
        },
      },
    ],
    enforce: 'pre',
    include: [path.resolve(__dirname, '../src')],
  });

  return config;
};

The source shows up, there is just no highlight of the selected story. The source code is black-text on white-background which is different from all screenshots of this feature that I have seen. Could this be theming to styling issue?

This is what I was looking for related to implementing with Angular.