Remark slug and remark external links are deprecated

code/addons/docs/package.json

@@ -115,8 +115,8 @@
     "@storybook/theming": "7.1.0-alpha.10",
     "@storybook/types": "7.1.0-alpha.10",
     "fs-extra": "^11.1.0",
-    "remark-external-links": "^8.0.0",
-    "remark-slug": "^6.0.0",
+    "rehype-external-links": "^2.0.1",
+    "rehype-slug": "^5.1.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/addons/docs/src/preset.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
-import remarkSlug from 'remark-slug';
-import remarkExternalLinks from 'remark-external-links';
+import rehypeSlug from 'rehype-slug';
+import rehypeExternalLinks from 'rehype-external-links';
 import { dedent } from 'ts-dedent';
 
 import type {
@@ -58,8 +58,8 @@ async function webpack(
     mdxCompileOptions: {
       providerImportSource: '@storybook/addon-docs/mdx-react-shim',
       ...mdxPluginOptions.mdxCompileOptions,
-      remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
-        mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
+      rehypePlugins: [rehypeSlug, rehypeExternalLinks].concat(
+        mdxPluginOptions?.mdxCompileOptions?.rehypePlugins ?? []
       ),
     },
     jsxOptions,

code/addons/docs/src/typings.d.ts

@@ -1,6 +1,6 @@
 declare module '@egoist/vue-to-react';
-declare module 'remark-slug';
-declare module 'remark-external-links';
+declare module 'rehype-slug';
+declare module 'rehype-external-links';
 declare module 'babel-plugin-react-docgen';
 declare module 'acorn-jsx';
 declare module 'vue/dist/vue';

code/frameworks/react-vite/package.json

@@ -52,7 +52,7 @@
     "@rollup/pluginutils": "^4.2.0",
     "@storybook/builder-vite": "7.1.0-alpha.10",
     "@storybook/react": "7.1.0-alpha.10",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@vitejs/plugin-react": "^4.0.0",
     "ast-types": "^0.14.2",
     "magic-string": "^0.27.0",
     "react-docgen": "6.0.0-alpha.3"

code/jest.config.base.js

@@ -34,6 +34,12 @@ const modulesToTransform = [
   'micromark',
   'nanoid',
   'remark',
+  'rehype-slug',
+  'github-slugger',
+  'hast-util-has-property',
+  'hast-util-heading-rank',
+  'hast-util-to-string',
+  'rehype-external-links',
   'rxjs',
   'slash',
   'space-separated-tokens',

code/lib/builder-vite/package.json

@@ -58,8 +58,8 @@
     "fs-extra": "^11.1.0",
     "glob": "^10.0.0",
     "magic-string": "^0.27.0",
-    "remark-external-links": "^8.0.0",
-    "remark-slug": "^6.0.0",
+    "rehype-external-links": "^2.0.1",
+    "rehype-slug": "^5.1.0",
     "rollup": "^2.25.0 || ^3.3.0"
   },
   "devDependencies": {

code/lib/builder-vite/src/plugins/mdx-plugin.ts

@@ -1,7 +1,7 @@
 import type { Options } from '@storybook/types';
 import type { Plugin } from 'vite';
-import remarkSlug from 'remark-slug';
-import remarkExternalLinks from 'remark-external-links';
+import rehypeSlug from 'rehype-slug';
+import rehypeExternalLinks from 'rehype-external-links';
 import { createFilter } from 'vite';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
@@ -35,8 +35,8 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
         mdxCompileOptions: {
           providerImportSource: '@storybook/addon-docs/mdx-react-shim',
           ...mdxPluginOptions?.mdxCompileOptions,
-          remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
-            mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
+          rehypePlugins: [rehypeSlug, rehypeExternalLinks].concat(
+            mdxPluginOptions?.mdxCompileOptions?.rehypePlugins ?? []
           ),
         },
         jsxOptions,

code/package.json

@@ -212,7 +212,7 @@
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/experimental-utils": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^9.1.2",

code/ui/blocks/src/blocks/mdx.tsx

@@ -205,15 +205,15 @@ interface HeaderMdxProps {
 export const HeaderMdx: FC<PropsWithChildren<HeaderMdxProps>> = (props) => {
   const { as, id, children, ...rest } = props;
 
-  // An id should have been added on every header by the "remark-slug" plugin.
+  // An id should have been added on every header by the "rehype-slug" plugin.
   if (id) {
     return (
       <HeaderWithOcticonAnchor as={as} id={id} {...rest}>
         {children}
       </HeaderWithOcticonAnchor>
     );
   }
-  // Make sure it still work if "remark-slug" plugin is not present.
+  // Make sure it still work if "rehype-slug" plugin is not present.
   const Component = as as React.ElementType;
   const { as: omittedAs, ...withoutAs } = props;
   return <Component {...nameSpaceClassNames(withoutAs, as)} />;