Alert MDX Component

This is a reusable MDX Component that provides a customizable alert component with various styles and options for rendering Markdown content within the alert. It allows you to display informative or warning messages with rich text formatting in your Docusaurus project.

What does this MDX Component do?

The Alert MDX Component offers the following features:

1. Variants: The component supports two variants: default and destructive. The default variant displays a neutral alert, while the destructive variant is used for warning or error messages.

2. Markdown Rendering: The component can render Markdown content within the alert description. It uses the unified, remark-parse, remark-rehype, and rehype-react libraries to parse and convert Markdown to React components.

3. Customizable Icon: You can optionally provide a custom icon component to be rendered within the alert.

4. Accessibility: The Alert component is designed with accessibility in mind, using the appropriate role="alert" attribute and providing proper heading structure with AlertTitle.

Copy the Code into Your Components Folder

import { cva } from "class-variance-authority";
import * as React from "react";
import { unified } from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import rehype2react from 'rehype-react';

import { cn } from "@site/src/utils"

const processor = unified()
  .use(markdown)
  .use(remark2rehype)
  .use(rehype2react, { createElement: React.createElement });
const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const processChildren = (children) => {
  const processedChildren = React.Children.toArray(children).map((child) => {
    if (typeof child === 'string') {
      const singleLineString = child.replace(/\\n/g, '\\\\n');
      return processor.processSync(singleLineString).result;
    } else {
      return child;
    }
  });

  return processedChildren;
};

const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props} />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props} />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props} />
))
AlertDescription.displayName = "AlertDescription"

return processedChildren;
};

const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props} />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props} />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props} />
))
AlertDescription.displayName = "AlertDescription"

const DevDocsAlert = React.forwardRef(({ className, children, customIcon: CustomIcon, ...props }, ref) => (
  <Alert variant={props.variant}>
  {CustomIcon && <CustomIcon className="w-6 h-6 mr-2" />}
  <AlertTitle>{props.title}</AlertTitle>
  <AlertDescription>
    {processChildren(children)}
  </AlertDescription>
</Alert>
))

export { Alert, AlertTitle, AlertDescription, DevDocsAlert }

NPM Libraries and Install Instructions

This component utilizes the following NPM libraries:

1. class-variance-authority: A lightweight utility for creating component stylesheets using CSS Variables.

   • Installation: npm install class-variance-authority

2. unified: A friendly batching markdown compiler.

   • Installation: npm install unified

3. remark-parse: A parser for Markdown, that takes a Markdown string and outputs a syntax tree.

   • Installation: npm install remark-parse

4. remark-rehype: A plugin that bridges the remark and rehype ecosystems, allowing you to go from Markdown to HTML.

   • Installation: npm install remark-rehype

5. rehype-react: A plugin that transforms HTML to React components.

   • Installation: npm install rehype-react

Alert Title

This is an alert description that supports Markdown content.

Warning Alert

This is a warning alert with bold text and a link.

The DevDocsAlert component accepts the following props:

• title (string, required): The title of the alert.
• variant (string, optional): The variant of the alert. Can be either "default" or "destructive".
• customIcon (React component, optional): A custom icon component to be rendered within the alert.
• children (string or React node, required): The description content of the alert, which can be a string or React node. If a string is provided, it will be parsed as Markdown content.

The Alert, AlertTitle, and AlertDescription components are also exported separately, allowing you to customize the alert further or use them individually if needed.

This MDX Component provides a flexible and accessible way to display alerts and informative messages in your Docusaurus project, while also supporting rich text formatting through Markdown rendering.