Addon Docs: Customizing docs page in an Angular project

[iessa-pragg-ctct]

So I have created a bare bones Angular app (using cli generation) and used the auto detected storybook init. (npx sb init)

I have come to the point where I would like to add some extra details to the default docs page however the current example appears to be only valid for react/jsx aware projects.

https://storybook.js.org/docs/angular/writing-docs/docs-page

Attempting to recreate this example just results in complier errors due to the use of JSX.

Is there an expectation for manual configuration of babel/webpack to customize docs page or is there just some missing magic sauce in the documentation?

preview.js (or preview.jsx)

export const parameters = {
  ...
  docs: {page: () => (<></>)}
}

ERROR in ./.storybook/preview.js 41:13
Module parse failed: Unexpected token (41:13)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   docs: {
|     page: function page() {
>       return <></>;
|     }
|   }
 @ ./.storybook/preview.js-generated-config-entry.js 25:22-85
 ..SNIP..

[iessa-pragg-ctct]

It would appear that this feature can be manually enabled by adding .babelrc to your .storybook/

{
  "presets": ["@babel/preset-react"]
}

and setting jsx to react in .storybook/tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

The above also allows you to create custom react components for use in MDX docs.

Warning: This is fairly haphazard and I have not thoroughly tested that this works without breaking things Angular side.