[Documentation]: Unable to render markdown files converted to mdx files in Docs

[Linzeur]

Describe the problem

Hi,

I am using @storybook/react v7, and I am having a problem to render the documentation of my component in the Docs. I am coming from version 5 where I used to document my components with md files. Due to the deprecation of some libraries, I felt the need to update the version of storybook, so first of all I updated to version 6, where I could still use md files in the Docs tabs. When I am trying to make the same in version 7, I found that in this version I have to use mdx files instead md for Docs, the problem lies that I want to show the content of my markdown file in the Docs. This is what Docs displays when I run the project, what I need is to display the content of my markdown file between the text Accordion and the component rendered.

This is my package.json

{
  "name": "test-ui",
  "version": "1.1.0",
  "scripts": {
    "storybook": "storybook dev -p 9001 -c .storybook -s ./public",
    "build-storybook": "storybook build",
    "test": "jest --no-watchman",
    "test:dev": "jest --watchAll",
    "test:coverage": "jest --no-watchman --coverage",
    "clean-dist": "rm -rf ./dist",
    "build": "npm run clean-dist && npm run sync-assets && NODE_ENV=production babel ./src --out-dir ./dist --copy-files",
    "serve": "NODE_ENV=production node ./server.js ",
    "sync-assets": "./scripts/sync-assets.sh"
  },
  "dependencies": {
    "draft-js": "^0.11.5",
    "express": "^4.18.2",
    "lodash": "^4.17.11",
    "markdown-draft-js": "^2.2.1",
    "moment": "^2.23.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.7",
    "@babel/core": "^7.12.7",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-a11y": "7.6.10",
    "@storybook/addon-actions": "7.6.10",
    "@storybook/addon-docs": "7.6.10",
    "@storybook/addon-essentials": "7.6.10",
    "@storybook/addon-interactions": "7.6.10",
    "@storybook/addon-links": "7.6.10",
    "@storybook/preset-create-react-app": "7.6.10",
    "@storybook/react": "7.6.10",
    "@storybook/react-webpack5": "^7.6.10",
    "@storybook/testing-library": "^0.2.2",
    "@testing-library/react": "^12.1.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^27.4.6",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "classnames": "^2.3.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.7",
    "markdown-loader": "^4.0.0",
    "prettier": "^1.15.3",
    "prop-types": "^15.6.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "regenerator-runtime": "^0.12.1",
    "storybook": "^7.6.10",
    "styled-jsx": "^3.3.0",
    "webpack": "^5.88.1"
  },
  "peerDependencies": {
    "react": "^16.x || ^17.x",
    "styled-jsx": "^3.x"
  },
  "files": [
    "dist/**"
  ],
  "main": "dist",
  "module": "dist",
  "prettier": {
    "singleQuote": true
  },
  "sideEffects": false
}

This is my main.js file

module.exports = {
stories: [
'../stories/.stories.js',
'../src/**/.stories.js'
],

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-docs',
'@storybook/addon-a11y'
],

framework: {
name: '@storybook/react-webpack5',
options: {}
},
features: {
storyStoreV7: true
},
docs: {
autodocs: true
}
};

And these are my md file, mdx file and the story file where I am trying to insert the content of mdx file in the Docs

Markdown file (AccordionMD.md)

---

# Accordion Component

The Accordion component is a customizable React component that allows you to create collapsible sections of content. It provides a button to toggle the visibility of the content within the accordion.

```javascript
import Accordion from 'carelinx-ui/dist/accordion/Accordion';

Usage

Once you have imported the Accordion component, you can use it in your JSX code as follows:

<Accordion title="Accordion Title" variant="primary" tile="T">
  <Accordion.AccordionList>
    <Accordion.AccordionItem
      icon=">"
      onClick={() => console.log('Click')}
      primaryText="Financial support"
      tertiaryText="Invoice #2232"
      secondaryText="20/33/2023"
    />
    <Accordion.AccordionItem
      icon=">"
      onClick={() => console.log('Click')}
      primaryText="Financial support"
      tertiaryText="Invoice #2232"
      secondaryText="20/33/2023"
    />
  </Accordion.AccordionList>
</Accordion>

Props

The Accordion component accepts the following props:

• title (string, required): A string representing the title of the accordion.
• children (node, required): Content to be displayed within the accordion when it is open.
• variant (string): A string indicating the style of the accordion button. Possible values are primary (default) and secondary.
• tile (string): A string to be displayed as a small tile next to the accordion title. It can be used to show additional information or icons.
• className (string): Additional CSS class to apply to the accordion container.
• isOpen (bool, required): Indicates whether to expand or not the accordion initially.
• setIsOpen (function, required): Function that will be triggered when the accordion expands or collapses.

---

MDX file (AccordionMDX.mdx)

import { Markdown } from '@storybook/blocks';
import AccordionMD from './AccordionMD.md?raw';

<Markdown>{AccordionMD}</Markdown>

Story file (accordion.stories.js)

import React, { useState } from 'react';
import Accordion from '../src/accordion/Accordion';

import AccordionMD from '../src/accordion/AccordionMD.md';
import names from '../src/icons/utils/names';
import Icon from '../src/icons/Icon';
import { COLORS } from '../src/theme';

import { Markdown } from '@storybook/blocks';

const AccordionDemo = () => {
  const [isOpenPrimary, setIsOpenPrimary] = useState(true);
  const [isOpenSecondary, setIsOpenSecondary] = useState(true);
  const [selectedItem, setSelectedItem] = useState(1);
  const [list, setList] = useState([
    {
      id: 1,
      primary: 'Financial Support',
      secondary: '20/03/2022',
      terciary: 'Invoice ##'
    },
    {
      id: 2,
      primary: 'Financial Support2',
      secondary: '10/03/2022',
      terciary: 'Invoice ##2'
    },
    {
      id: 3,
      primary: 'Financial Support3',
      secondary: '02/03/2022',
      terciary: 'Invoice ##3'
    }
  ]);

  return (
    <div>
      <label>
        This button simulates the case where the elements for an accordion can
        change and it should expand again
      </label>
      <button
        onClick={() => {
          setList([
            {
              id: 2,
              primary: 'Financial Support2',
              secondary: '10/03/2022',
              terciary: 'Invoice ##2'
            },
            {
              id: 3,
              primary: 'Financial Support3',
              secondary: '02/03/2022',
              terciary: 'Invoice ##3'
            }
          ]);
          setIsOpenPrimary(true);
        }}
      >
        Change data for primary Accordion
      </button>
      <br />
      <br />
      <Accordion
        title="Pending Invoices"
        variant="primary"
        tile={list.length}
        isOpen={isOpenPrimary}
        setIsOpen={setIsOpenPrimary}
      >
        <Accordion.AccordionList>
          {list.map((v, i) => (
            <Accordion.AccordionItem
              key={i}
              primaryText={v.primary}
              secondaryText={v.secondary}
              tertiaryText={v.terciary}
              icon={<b>Test</b>}
              isItemSelected={v.id === selectedItem}
              onClick={() => setSelectedItem(v.id)}
            />
          ))}
        </Accordion.AccordionList>
      </Accordion>
      <Accordion
        title="Pending Invoices2"
        variant="secondary"
        isOpen={isOpenSecondary}
        setIsOpen={setIsOpenSecondary}
      >
        <Accordion.AccordionList>
          <Accordion.AccordionItem
            key={0}
            icon={
              <Icon
                name={'eva-chevron-right'}
                size="m"
                color={COLORS.neutral.coolGray700}
              />
            }
            primaryText={'Financial No support'}
            secondaryText={'15/03/2023'}
            tertiaryText={'Invoice #2232'}
            isItemSelected={selectedItem === 4}
            onClick={() => setSelectedItem(4)}
          />
        </Accordion.AccordionList>
      </Accordion>
    </div>
  );
};

export default {
  title: 'Accordion', // Define title for component hierarchy
  component: AccordionDemo,
  docs: {
    // Import markdown content dynamically (optional)
    description: {
      component: AccordionMD
    }
  },
  tags: ['autodocs']
};

const Template = args => <AccordionDemo {...args} />;

export const Default = Template.bind({});

Please, can you help me to overcome this issue. I have already read the documentation and I haven't found something which can help me to solve this problem. Maybe I have read something wrong or I misunderstood some of things which changed during the migration from v6 to v7, anyway I would appreciate your support and thank you in advance.

Additional context

No response