Storybook 8 with Meteor

Storybook 8 is out and there is a lot of interesting news. As I’m upgrading to Meteor 3, I’m also upgrading to Storybook 8.

In my setup I use Webpack, but there is also Vite option. So I was wondering is anyone has a nice setup for Storybook 8 that works with Meteor (either 2 or 3) that they could share, so that we might be able to create some sort of a template for everyone. I’m thinking that if Meteor switches to Vite in the future we could more easily integrate with Storybook. Thoughts?

2 Likes

This is probably true.

I never set up Storybook with Meteor, not sure how to do it. I can ask our team to test it as well.

I think we really need a simple setup for Storybook, the original idea started in Meteor and it is an industry standard at this point.

2 Likes

I’ve used Storybook in my previous company and it runs independently of Meteor 3 using Vite. I can create a template for it.

5 Likes

That would be great. The big thing is to be able to add mocks of Meteor packages.

I would also like to see an option where we could in some settings define things like users so that we could switch between different types of users in Storybook, but that is above the minimum we need now.

I am bumping into the same issue.
Here is an approach that has been developped some months ago that I will try to integrate : [Solved] Storybook can't resolve Meteor packages - #10 by mikkelking
Repo is here : GitHub - Back2Dev/meteor-storybook-stubs: Some stubs to make it easier to use Storybook in a Meteor project

[edit] : I confirm it works for basic usage with some modification to the storybook webpackfinal function

        const mocks = {
            // Meteor core modules
            "meteor/meteor": "meteor/meteor.js",
            "meteor/mongo": "meteor/mongo.js",
            "meteor/tracker": "meteor/tracker.js",
            "meteor/random": "meteor/random.js",
            "meteor/check": "meteor/check.js",
            "meteor/session": "meteor/session.js",
            "meteor/react-meteor-data": "meteor/react-meteor-data.js",
            // Meteor packages
            "meteor/alanning:roles": "meteor/packages/alanning-roles.js",
            "meteor/universe:i18n": "meteor/packages/universe-i18n.js",  // <- I added this one myself
        };
        if (!config.resolve) {
            config.resolve = {};
        }
        if (!config.resolve.alias) {
            config.resolve.alias = {};
        }
        Object.keys(mocks).forEach((key) => {
            config.resolve.alias[key] = path.resolve(__dirname, `./__mocks__/${mocks[key]}`);
        });
1 Like