Repository: storybook
Issue: [Bug]: The MDX documentation doesn't work as expected in Angular. A link to documentation please!
Labels: bug,needs triage

### Describe the bug

Creating the stories directly in MDX generates a navigation on the side. When you try to navigate to see the different stories they disappear.

The show code feature doesn't always work and it also makes the stories disappear.

The official documentation is not clear. What is the correct way to write stories in MDX with Angular?

Tried to create them in CSF and then import them by id in the MDX files but that doesn't work either.

I get an unclosed tag error!

I can't pass a repo since it has dependencies with a private library of the work.

I'm just looking for clear information on how to create stories in MDX with Angular. What is the right way?

I love Storybook but I feel like it has big problems with Angular.

I tried the same approach in a React project and had no problems.

### To Reproduce

_No response_

### System

```shell
System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (107.0.1418.56)
  npmPackages:
    @storybook/addon-a11y: ^6.5.13 => 6.5.13 
    @storybook/addon-actions: ^6.5.13 => 6.5.13 
    @storybook/addon-controls: ^6.5.13 => 6.5.13 
    @storybook/addon-docs: ^6.5.13 => 6.5.13 
    @storybook/addon-essentials: ^6.5.13 => 6.5.13 
    @storybook/addon-interactions: ^6.5.13 => 6.5.13 
    @storybook/addon-links: ^6.5.13 => 6.5.13 
    @storybook/angular: ^6.5.13 => 6.5.13 
    @storybook/builder-webpack5: ^6.5.13 => 6.5.13 
    @storybook/manager-webpack5: ^6.5.13 => 6.5.13 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
  npmGlobalPackages:
    @storybook/cli: 6.4.19
```


### Additional context

```
MAIN.JS
module.exports = {
  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "storybook-addon-designs",
  ],
  framework: "@storybook/angular",
  core: {
    builder: "webpack5",
  },
  features: {
    modernInlineRender: true,
  },
};

```

```
PREVIEW.JS
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: {
    inlineStories: true,
    buildStoriesJson: true,
    storyStoreV7: true,
  },
};

```

```
import { Canvas, Meta, Story, Source, ArgsTable } from "@storybook/addon-docs";
import { moduleMetadata } from "@storybook/angular";
import { ButtonModule } from "projects/bravent-front/src/lib/components/button/button.module";
import { ButtonComponent } from "projects/bravent-front/src/lib/components/button/button.component";
import { Figma } from "storybook-addon-designs/blocks";
import dedent from "ts-dedent";
import { APP_INITIALIZER } from "@angular/core";
import * as ICONS from "projects/bravent-front/src/lib/icons/exported";
import { IconService } from "projects/bravent-front/src/lib/components/icon/icon.service";

<Meta
  title="Components/Buttons"
  component={ButtonComponent}
  decorators={[
    moduleMetadata({
      imports: [ButtonModule],
      providers: [
        {
          provide: APP_INITIALIZER,
          useFactory: initIconRegisterService,
          multi: true,
          deps: [IconService],
        },
      ],
    }),
  ]}
  argTypes={{
    type: {
      control: { type: "inline-radio" },
      options: ["primary", "secondary", "success", "destructive"],
    },
    style: {
      control: { type: "inline-radio" },
      options: ["solid", "outline", "clear"],
    },
    size: {
      control: { type: "inline-radio" },
      options: ["small", "medium", "large"],
    },
    icon: {
      control: { type: "select" },
      options: [...icons.map((x) => x.name)],
    },
    iconPosition: {
      control: { type: "select" },
      options: ["left", "right"],
    },
  }}
/>

export const icons = Object.values(ICONS);

export function initIconRegisterService(iconRegisterService) {
  return () => iconRegisterService.registerIcons(icons);
}

### Playground

## Prueba diferentes formatos de boton

export const DefaultTemplate = (args) => <ButtonComponent {...args} />;

export const InlineTemplate = (args) => ({
  props: args,
  template: `
    <bvf-button 
      [label]="label" 
      [type]="type" 
      [style]="style" 
      [size]="size"
      [icon]="icon"
      [iconPosition]="iconPosition"
      [isDisabled]="isDisabled">
      </bvf-button>
  `,
});

<Canvas withSource="open">
  <Story
    name="Playground"
    args={{
      label: "Button",
      type: "primary",
      style: "solid",
      size: "medium",
      icon: null,
      iconPosition: null,
      isDisabled: false,
    }}
  >
    {DefaultTemplate.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Playground" of={ButtonComponent} />

<Figma
  collapsable
  url="https://www.figma.com/file/2KvvfqllRlfCEljwLf6dgY/Bravent-DS?node-id=3%3A502"
/>

### Primary Button Variants

<Canvas withSource="none">
  <Story
    name="Primary Solid"
    args={{
      label: "Button Primary",
      type: "primary",
      style: "solid",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Primary Outline"
    args={{
      label: "Button Primary",
      type: "primary",
      style: "outline",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Primary Clear"
    args={{
      label: "Button Primary",
      type: "primary",
      style: "clear",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
</Canvas>

### Secondary Button Variants

<Canvas withSource="none">
  <Story
    name="Secondary Solid"
    args={{
      label: "Button Secondary",
      type: "secondary",
      style: "solid",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Secondary Outline"
    args={{
      label: "Button Secondary",
      type: "secondary",
      style: "outline",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Secondary Clear"
    args={{
      label: "Button Secondary",
      type: "secondary",
      style: "clear",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
</Canvas>

### Success Button Variants

<Canvas withSource="none">
  <Story
    name="Success Solid"
    args={{
      label: "Button Success",
      type: "success",
      style: "solid",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Success Outline"
    args={{
      label: "Button Success",
      type: "success",
      style: "outline",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Success Clear"
    args={{
      label: "Button Success",
      type: "success",
      style: "clear",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
</Canvas>

### Destructive Button Variants

<Canvas withSource="none">
  <Story
    name="Destructive Solid"
    args={{
      label: "Button Destructive",
      type: "destructive",
      style: "solid",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Destructive Outline"
    args={{
      label: "Button Destructive",
      type: "destructive",
      style: "outline",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
  <Story
    name="Destructive Clear"
    args={{
      label: "Button Destructive",
      type: "destructive",
      style: "clear",
    }}
  >
    {InlineTemplate.bind({})}
  </Story>
</Canvas>

```