Storybook: Customizing the layout

[jide]

It would be great to be able to customize the layout / html / css. Something like adding a custom component in .storybook.

[arunoda]

Could you give us more information? What you are trying to achieve?

[jide]

I would like to be able to customize the layout, make the sidebar smaller... I tried to inject css in config.js and use global selectors, but it did not work, and seems hackish anyway.

I like to have my code and storybook side by side, and on my screen the current design takes a lot of space. I'm sure there could be many other use cases !

[jide]

I made a PR in case you find this useful.

[jide]

If someone is interested, this can already be done using a custom webpack config file :

module.exports = {
  //...
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/^\.\/layout$/, 'custom-layout'),
    new webpack.NormalModuleReplacementPlugin(/^\.\/controls$/, 'custom-controls')
  ],
  resolve: {
    alias: {
      'custom-layout': path.resolve('.storybook/layout.js'),
      'custom-controls': path.resolve('.storybook/controls.js')
    }
  }
}

[arunoda]

Great. I added a comment on this PR. https://github.com/kadirahq/react-storybook/pull/67

[andrey-skl]

I think somebody may find this useful. I achieved layout customization through custom preset that extends managerWebpack config. And then I load my custom header right before the main Storybook view. Key files there are "presets.js" and "custom-header/header-preset.js".

See details in commit
https://github.com/JetBrains/ring-ui/commit/94328f646ad6f1fd8db115d7cbb37bea4ea8a0df