[Bug] framework and addon preview annotations not automatically applied in portable stories

[vanessayuenn]

Apart from setting annotations in a set up file by importing them, users, addons or frameworks can also programatically add preview annotations via the previewAnnotations preset. Here's an example of what a user can do (though I think it's not so common):

// .storybook/main.js
export default {
  previewAnnotations: [
    "./src/stories/components",
    "./template-stories/core/preview.ts",
  ],  
}

And here's an example taken from our React renderer:

// Example taken from @storybook/react/preset
export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
  input = [],
  options
) => {
  const docsConfig = await options.presets.apply('docs', {}, options);
  const features = await options.presets.apply('features', {}, options);
  const docsEnabled = Object.keys(docsConfig).length > 0;
  const result: string[] = [];

  return result
    .concat(input)
    .concat([join(__dirname, 'entry-preview.mjs')])
    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : [])
    .concat(features?.experimentalRSC ? [join(__dirname, 'entry-preview-rsc.mjs')] : []);
};

The react renderer example is interesting because the renderer has a portable stories entrypoint, which already adds the necessary annotations (and excludes the docs ones which are not needed), so that problem is solved when users call setProjectAnnotations coming from @storybook/react. However, this pattern would need to be documented for anyone creating community frameworks so that they can do the same thing.

💡 Solutions/Action items:

• Do nothing, acknowledge this limitation
• Document this properly. Users need to solve it by hand, framework authors need to provide the annotations (solved by CSF4 if the defineConfig function comes from frameworks)
• Take this into account as part of a “preset handling” solution