Allow to use a custom layout.

[jide]

Allows to use a custom layout.js file from the config folder using webpack alias.

[arunoda]

Now we allow to configure the resolve API directly via custom webpack API.

In this case, we simply need to document this.
What do you think?

[jide]

I did not realized this although there is ...customConfig in the final configuration :)

The only thing is that layout needs to be imported using an alias.

This makes me think that if in the codebase instead of importing modules using a relative path webpack was configured to make a namespace using an alias, it would be easy to override any file by overriding aliases. (I find this also handy to avoid relative paths hell in big projects)

import StorybookControls from 'react-storybook/ui/controls';
import ActionLogger from 'react-storybook/ui/action_logger';
import Layout from 'react-storybook/ui/layout';
import { getSyncedStore } from 'react-storybook';
import ActionLogger from 'react-storybook/action_logger';

This could solve the problem in a generic way... Thoughts ?

[jide]

Just realized the replacement could be achieved using NormalModuleReplacementPlugin.

[arunoda]

@mnmtanish is also working on a new layout change. May be we can all follow a same format for the layout.

So, it can be extendable.

@mnmtanish what do you think?

[arunoda]

Great.
Change this PR to add some documentation to here: https://github.com/kadirahq/react-storybook/blob/master/docs/api.md

You may need to create new section under webpack config.
Also, we want to add a link to the original Layout so the user know how to update.

[thani-sh]

@arunoda @jide I think it's an awesome idea 👍
If we use webpack aliases maybe organise package modules properly, it'll be easy to extend storybook. And we can add features like viewport resizing, story search and anything else as storybook plugins.

[jide]

Closed in favor of #69

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b368973. 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.