Reuse library stories (from node_modules) across multiple applications

[CandyGreen]

I'm wondering if there is a way to solve this problem right now.

Let's imagine I have a component library called shared and 2 apps: app-1 and app-2. I plan to use components from shared repo across both applications, but I want to setup a different styling and props (e.g. I want to set a different logo in Header component) for each application.

What can I do now: I can create stories for all my components in shared repo and bundle them. Inside app-1 (or app-2) I can search for these stories like this (let's assume I can do this):

// app-1/.storybook/main.js

module.exports = {
    stories: ['../node_modules/shared/**/*.stories.@(js|mdx)']
};

I can set my application styles like this:

// app-1/.storybook/preview.js

import '@/styles/globals.css';

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/
        }
    }
};

Okay, everything is fine so far. But how can I pass different props to my components without recreating a whole file with stories?
What if I have a file with lot of stories? Something like this:

// shared/src/components/Header/Header.js

export const Header = ({ title, logo, navbar, auth }) => (
    <header>
        <h1>{title}</h1>
        <div>{logo}</div>
        {navbar && <nav>Navbar</nav>}
        {auth && <div>Auth</div>}
    </header>
);

// shared/src/components/Header/Header.stories.js

import { Logo } from '@/icons/Logo';

import { Header } from './Header';

export default {
    title: 'Components/Common/Header',
    component: Header
};

const Template = args => <Component {...args} />;

export const Default = Template.bind({});
Default.args = {
    title: 'Brand name'
};

export const WithLogo = Template.bind({});
WithLogo.args = {
    ...Default.args,
    logo: <Logo />
};

export const WithNavbar = Template.bind({});
WithNavbar.args = {
    ...Default.args,
    navbar: true
};

Is this the only way I can reuse stories from shared, but modify their args, parameters, decorators, etc.?

// app-1/src/components/Header/Header.stories.js

import { HeaderStories } from 'shared';

// Let's assume I re-exported everything from `Header.stories.js` file
const { default as meta, Default, WithLogo, WithNavbar } = HeaderStories;

export default {
    ...meta,
    // Something new I want to add
    decorators: [Story => <div><Story /></div>]
};

Default.args = {
    ...Default.args,
    // Something I want to change
    title: 'Hello World'
};

export { Default, WithLogo, WithNavbar };

Even If this approach works, it's quite inconvenient, besides the fact that I have to update this file in each application everytime I added a new story to shared repo:

// app-1/src/components/Header/Header.stories.js

import { HeaderStories } from 'shared';

const { default as meta, Default, WithLogo, WithNavbar, WithAuth } = HeaderStories;

// ...

export { Default, WithLogo, WithNavbar, WithAuth };

It would be much better if it could be possible to do something like this (I don't know how Storybook works internally, so I just give an example):

// app-1/src/components/Header/Header.stories.js

import { BrandLogo } from '@/icons/BrandLogo';

// `stories` - array of story objects found using a glob pattern defined in .storybook/main.js
export default stories => {
    const meta = stories.find(story => story.title === 'Components/Header');

    return {
        ...meta,
        decorators: [Story => <div><Story /></div>]
    };
};

// I want to override some of the story settings, but still reuse the same story named `WithLogo`
export const WithLogo = {
    // Previous `args` defined for `WithLogo` story
    args => ({
        ...args,
       logo: <BrandLogo />
    })
};

// The rest of the stories (from `shared/src/components/Header/Header.stories.js`) should stay the same
// without a need to re-export them

I don't know, maybe I'm the only person who encountered this kind of a problem, but I personally had 3 huge production projects built this way and "story copy-paste" doesn't feel good at all, when you have 10+ applications, which use the same component library 😵

I hope that this problem could be somehow resolved. Thanks!