Decorator inheritance feels broken

[JesusTheHun]

The Problem

Global decorators are applied first.
Because of that, they are the closest to the story instead of being the furthest.

Take a look at this exemple, we define some decorators :

// Global decorators
export const preview: Preview = {
  decorators: [withIntlProvider, withRouter],
}

// Component decorators
export default {
  title: 'App/Login',
  render: () => <Login />,
  decorators: [withAuthProvider]
}

As you guessed, we wanted to add some top-level wrappers for internationalization and routing.
Let's look at what we get after setting those decorators :

// What we get
<AuthProvider>
  <Router>
    <IntlProvider>
      <Story />
    </IntlProvider>
  </Router>
</AuthProvider>

Not what we expected ! Our expectations looks like that :

// What we expected
<IntlProvider>
  <Router>
    <AuthProvider>
      <Story />
    </AuthProvider>
  </Router>
</IntlProvider>

Decorators are applied in the order they are defined.
The fact that the decorator inheritance obey to the same rule seems to break the global decorator purpose altogether.

Solutions

Option 1: Feature flag

Changing that behaviour would be a breaking change, but it could be done using a feature flag.

// .storybook/main.ts
const config: StorybookConfig = {
  featuresFlag: {
    reverseDecoratorsStack: true
  }
}

Option 2: Accept a function

In addition to the problem already described, there is no way to have a story that doesn't use global decorators.
Maybe you have a few story that you don't want to wrap with them. You have to not set any global decorator, at all, just for those few stories.

If the decorators property accepted a function, we could have a non-breaking change, that solve both problems :

// Component.stories.tsx

export default {
  decorators: (globalDecorators) => [withAuthProvider, ...globalDecorators], // Custom inheritance order
}

export const NoDecorator = {
  decorators: () => [], // No decorator applied
}

What do you think is the best option ?

[chakAs3]

Hi @JesusTheHun, it is a really interesting topic. that we already discussed internally, and I'm totally with the second option as it really gives you control over decorators ( order, or modification ) at the story level, it is a brilliant idea I can say.
you can even have something like.

export default {
  decorators: (globalDecorators) => {
     const firstGlobalDecorator = globalDecorators.shift()
      return [withAuthProvider, firstGlobalDecorator ], 
   }// altered decorators
}

[shilman]

@JesusTheHun are you sure about your post? i think decorators operate per your "expected" behavior (which is our expected behavior too):

There are definitely some unsolved issues around decorator order, but I think they are more subtle than what you're claiming above.

[chakAs3]

@JesusTheHun regarding the priority I can confirm what @shilman says, as you can see

we have been always global decorators to wrap our story in case we have UI libraries that apply global styles