Document how to customize the layout

[jide]

No description provided.

[arunoda]

Could you add a small title on top of this. Like: Customizing The UI.

[jide]

I added a title and rephrased a bit.

[arunoda]

Awesome.

[clauderic]

Can this be updated? The link to layout.js is broken

[jide]

@clauderic The documentation for this has moved to https://github.com/kadirahq/react-storybook/blob/master/docs/configure_storybook.md#customizing-the-ui

[clauderic]

Great! That still does not help though, the link is still broken over there 😿

[jide]

Oh I see, yeah @arunda made significant changes recently. I guess it's the https://github.com/kadirahq/react-storybook/blob/master/src/client/manager/modules/ui/components/layout/index.js file now, but I did not dig more - you should be able to figure out the right configuration by changing the paths in the config and using this file instead.

[clauderic]

Hmmm okay. Doesn't seem to work anymore. It'd be great if the documentation on this was revised

[uipoet]

Attempted replacing a UI module following documentation and nothing happens, without errors.

[joaomilho]

+1

[csalvato]

Where's the documentation for this now? All links are dead. :)

[jeroenransijn]

I would like to know what the progress is on this?

[ndelangen]

@jeroenransijn Could you open a new issue on this describing what's wrong? I'm not sure what to do with this now, and It's hard to keep track of a merged PR. Thanks!

[binomialstew]

I know the last question here is from over a year ago, but for anyone finding this issue that would like to use their own custom layout, you can use the webpack.NormalModuleReplacementPlugin to replace the import of layout.js via @storybook. For example, in your webpack config:

import { NormalModuleReplacementPlugin } from webpack
...
module.exports = (storybookBaseConfig, env) => {
  storybookBaseConfig.plugins = [
    // replace the import (in routes @storybook/ui/dist/modules/ui/routes.js) with your custom layout alias
    new NormalModuleReplacementPlugin(/^\.\/containers\/layout$/, 'custom-layout')
  ]
  ...
  storybookBaseConfig.resolve = {
    alias: {
      'custom-layout': path.resolve(project.basePath, '.storybook/layout.js')
    }
  }
}

[ndelangen]

Working on refactoring and improving the UI right now,

Please share your ideas and customisations so I know what users want.

See:
#4086 (comment)

[binomialstew]

I would like the ability to disable the mobile layout set by isMobileDevice. I developed a custom mobile layout before it was available in storybook. The new release with the mobile layout overrides my addon-options config and breaks my layout.

[ndelangen]

@binomialstew would the new mobile layout be what you want in the ui refactor or is the custom one you have something this new one doesn't?

Happy to look at your custom layout to take inspiration from.

Do you think it makes sense to keep your custom layout if there's a good mobile layout in storybook itself?

[binomialstew]

@ndelangen, the issue I have is more the implementation of the mobile layout rather than the UI itself. My main point of issue is it's triggered by user agent rather than css media queries. In my view, the default layout works well for iPad—the screen width is sufficient for the left sidebar, but still, the mobile layout is triggered and shown on iPads.

Another issue I had—the mobile layout seems to override any options that were set initially, like "showAddonPanel" or "goFullScreen". I had previously set up a button to toggle the addons panel, and this negates that.

I set up my storybook with media queries that hide the left sidebar and show a simplified header with a menu button where the stories are accessible—but only when the viewport is reduced to a specific width.

In general, I think that determining responsive layouts with CSS rather than user agent is a better approach because what's important is usually the screen size, more than anything else. For me, having an option to disable isMobileDevice would be sufficient, but if this were to be redone, I think the best approach would be to handle responsivity with media queries and also add an option to disable mobile layout.

[ndelangen]

@binomialstew the media-query issue is addressed in my UI refactor.

the new mobile layout in this overhaul will show the component by default when loaded, regardless of settings, I might change that.

[ndelangen]

#4086

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit e425ee8. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.