Switch internals to Mdx 🦜

[sapegin]

Overview

• Mdx is now used to parse and render Markdown files (src/loaders/mdx-loader.ts).
• Most of the Markdown processing is done using Mdx (Rehype) plugins (src/loaders/rehype/*).
• We still render Markdown in comments using markdown-to-jsx. Many comments aren't written as Markdown and contain things like imports that would be treated as JavaScript by Mdx. markdown-to-jsx is about 5 KB so it's okay to continue using it.
• Most of the src/client/rsg-components/mdx/Mdx* components are migrated from the old Markdown components without any changes, and they are used for rendering both: Mdx and Markdown (markdown-to-jsx).
• Mdx is used to parse modifiers in fenced code blocks, so JSON modifiers are no longer supported.

Todo

• Render Markdown files using Mdx
• Migrate Markdown components to Mdx
• Render code editor / playground via Mdx
• Support import/require in the code examples
• Provide imports in Mdx files to the code examples
• Provide the current component in the code example scope
• Support context config option
• Suport static modifier
• Support noeditor modifier
• Support padded modifier
• Support custom modifiers
• Support exampleMode
• Syntax highlight in static mode using Mdx, on the client side
• Use prism-react-renderer for syntax highlight in the editor
• Allow components customization of Mdx via style guide config
• Replace example-loader with the new mdx-loader
• Remove defaultExample option
• Make the original Markdown component reuse Mdx components
• Support CSF stories
  • Basic support of CSF stories (only named export with an arrow function)
  • Support more use cases for CSF stories exports
  • Suport imports in CSF stories
  • Support local variables in CSF stories
  • CSF stories hot reload
  • TypeScript and ECMAScript Next support (CSF files support: TypeScript and ECMAScript Next support #1748)
  • Isolation mode for examples imported CSF files
• Simplify migration from Storybook: provide @storybook/addon-docs/blocks component alternatives:
  • Preview
  • Story
  • Props
  • Source
  • Description
  • Meta
• Simplify importing of aforementioned components
• Clean up todo comments
• Fix types
• Fix tests
• Update docs

Regressions

• Syntax highlight in Markdown in component descriptions
• Remove bullets on checkbox lists in Markdown
• Style details/summary in Markdown
• Isolated mode for particular examples (missing example index, showing just one example from Mdx file)
• No content in non-component Markdown files
• The editor cursor is in the wrong place when there's a tab character in the code

Removed functionality

• defaultExample config option is no longer supported.
• Undocumented section content as a function returning the content is no longer supported.
• JSON modifiers (```js { "props": { "className": "checks" } }) are no longer supported, a new simplified format: ```js noeditor class=checks.

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.