How to add storybook stories directories in several frontends?

we want to integrate Storybook components for our project in several directories but access all of them via the settings made in .storybook/main.js

Right now we use the workaround to out-comment the part of the main.js config which is not needed, but obviously this is not a longterm solution.

Looks like this then:

module.exports = {
stories: [
    // TODO: make all stories visible at the same time

    // --- GPF components ---
    "../../../apps/frontend/src/components/stories/**/*.stories.mdx",
    "../../../apps/frontend/src/components/stories/**/*.stories.@(js|jsx|ts|tsx)",

    // // --- UTR components ---
    // "../../../apps/utr-frontend/components/stories/**/*.stories.mdx",
    // "../../../apps/utr-frontend/components/stories/**/*.stories.@(js|jsx|ts|tsx)",

    // // --- Global components ---
    // "../../components/stories/**/*.stories.mdx",
    // "../../components/stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],};

Any suggestions how to do it i a propper way?

Thanks in advance!!

Solution

Ok, so stupid me, I forgot to change the titles of the single components:

import React from "react";
import { action } from "@storybook/addon-actions";

import Button from "../lib/button";

export default {
    title: "Global Button", // -- change title here! --
    component: Button,
};

export const Text = () => (
    <Button onClick={action("clicked")}>Global Button</Button>
);

export const Emoji = () => (
    <Button onClick={action("clicked")}>
        <span role='img' aria-label='so cool'>
            😀 😎 👍 💯
        </span>
    </Button>
);