Breaking change from Storybook 7 prevents setup of this gem without using an older storybook version

[alianam]

Hello!

I followed the Getting started docs for this gem a few days ago and ran into an issue when trying to run the yarn storybook command towards the end of the setup. I'll add more details below, but ultimately I'm wondering whether there are any plans to get a fix in so that this gem is compatible with the latest release of storybook, v7.

The error I encountered was raised because the start-storybook binary has been removed as of the v7 release of storybook. I read through the release notes in that section, and the breaking change entails having to specify a framework. For our setup, specifically, we aren't using any of the major frameworks listed (as we're mainly using Rails, ViewComponent, Stimulus/Turbo for our frontend) and so the fix wasn't straightforward. Having said that, there are more "general" options for use like html-webpack5 and web-components-webpack5 that may be usable, but I didn't test them out yet since I thought it best to see whether this work is already underway.

For now, the workaround I've implemented (which works) is to pin the @storybook/core-server and @storybook/server version to "^6.5.17-alpha.0" and I've also pinned any add-ons to the same version (where applicable). This isn't ideal, and eventually can cause an issue once versions older than v7 are no longer supported.

I'm happy to help contribute to this fix in any way I can - thanks!

[jherdman]

I mostly got this working today with Storybook 8. Here's what I've done so far:

1. npx storybook@latest init
2. Pick the "server" option
3. Follow the Getting Started guide
4. The directions for configuring the server is incorrect in v8. Your .storybook/preview.js should look more like this:

/** @type { import('@storybook/server').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    server: {
      url: `http://localhost:3000/rails/view_components`,
    },
  },
};

export default preview;

5. You need to allow CORS too. Add rack-cors to your Gemfile and configure it:

# config/initializers/cors.rb

# frozen_string_literal: true

return unless Rails.env.local?

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:6006', 'http://127.0.0.1:6006'

    resource '*',
             headers: :any,
             methods: %i[get post put patch delete options head],
             credentials: true,
             max_age: 86_400
  end
end

Boom! Works!