@mui/internal-docs-infra 0.2.3-canary.8 → 0.3.1-canary.0

package/esm/pipeline/transformHtmlCodePrecomputed/transformHtmlCodePrecomputed.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { visit } from 'unist-util-visit';
-import { loadVariant } from "../../CodeHighlighter/loadVariant.js";
+import { loadCodeVariant } from "../loadCodeVariant/loadCodeVariant.js";
 import { createParseSource } from "../parseSource/index.js";
 import { TypescriptToJavascriptTransformer } from "../transformTypescriptToJavascript/index.js";
 /**
@@ -206,13 +206,13 @@ function extractFromDl(dl) {
 }
 
 /**
- * Rehype plugin that transforms semantic HTML code structures to use loadVariant
+ * Rehype plugin that transforms semantic HTML code structures to use loadCodeVariant
  *
  * This plugin:
  * 1. Finds section and dl elements in the HTML AST
  * 2. Extracts code elements from the semantic structure (figure/dl/dd/pre/code)
  * 3. Creates variants from multiple code elements or single Default variant
- * 4. Uses loadVariant to process each variant
+ * 4. Uses loadCodeVariant to process each variant
  * 5. Stores the combined precompute data on the root element
  * 6. Clears all code element contents and replaces with error message
  */
@@ -307,7 +307,7 @@ export var transformHtmlCodePrecomputed = function transformHtmlCodePrecomputed(
                           });
                         }
 
-                        // Process each variant with loadVariant
+                        // Process each variant with loadCodeVariant
                         processedCode = {};
                         variantPromises = Object.entries(variants).map(/*#__PURE__*/function () {
                           var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref4) {
@@ -321,7 +321,7 @@ export var transformHtmlCodePrecomputed = function transformHtmlCodePrecomputed(
                                     break;
                                   }
                                   _context.n = 1;
-                                  return loadVariant(undefined,
+                                  return loadCodeVariant(undefined,
                                   // url - not needed for inline code
                                   variantName, variantData, {
                                     sourceParser: sourceParser,

package/esm/pipeline/transformMarkdownBlockquoteCallouts/index.d.ts

@@ -0,0 +1,2 @@
+import { transformMarkdownBlockquoteCallouts } from "./transformMarkdownBlockquoteCallouts.js";
+export default transformMarkdownBlockquoteCallouts;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/index.js

@@ -0,0 +1,4 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownBlockquoteCallouts } from "./transformMarkdownBlockquoteCallouts.js";
+export default transformMarkdownBlockquoteCallouts;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.d.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from 'unified';
+/**
+ * Remark plugin that extracts GitHub-style callouts from blockquotes and injects them into data attributes.
+ *
+ * Transforms blockquotes like:
+ * > [!NOTE]
+ * > This is a note.
+ *
+ * Into blockquotes with a custom data attribute that will be preserved when converted to HTML:
+ * <blockquote data-callout-type="note">
+ *   <p>This is a note.</p>
+ * </blockquote>
+ *
+ * Supported callout types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
+ */
+export declare const transformMarkdownBlockquoteCallouts: Plugin;

package/esm/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.js

@@ -0,0 +1,58 @@
+import { visit } from 'unist-util-visit';
+/**
+ * Remark plugin that extracts GitHub-style callouts from blockquotes and injects them into data attributes.
+ *
+ * Transforms blockquotes like:
+ * > [!NOTE]
+ * > This is a note.
+ *
+ * Into blockquotes with a custom data attribute that will be preserved when converted to HTML:
+ * <blockquote data-callout-type="note">
+ *   <p>This is a note.</p>
+ * </blockquote>
+ *
+ * Supported callout types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
+ */
+export var transformMarkdownBlockquoteCallouts = function transformMarkdownBlockquoteCallouts() {
+  return function (tree) {
+    visit(tree, 'blockquote', function (node) {
+      // Find the first paragraph in the blockquote
+      var firstChild = node.children[0];
+      if (!firstChild || firstChild.type !== 'paragraph') {
+        return;
+      }
+
+      // Find the first text node in the paragraph
+      var firstTextNode = firstChild.children[0];
+      if (!firstTextNode || firstTextNode.type !== 'text') {
+        return;
+      }
+      var textNode = firstTextNode;
+      var calloutPattern = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/;
+      var match = textNode.value.match(calloutPattern);
+      if (match) {
+        var calloutType = match[1].toLowerCase();
+
+        // Remove the callout marker from the text
+        var newText = textNode.value.replace(calloutPattern, '');
+        if (newText.trim() === '') {
+          // Remove the text node if it becomes empty
+          firstChild.children.shift();
+        } else {
+          // Update the text content
+          textNode.value = newText;
+        }
+
+        // Add the data attribute to the blockquote
+        // This creates a custom property that will be preserved when converting to HTML
+        if (!node.data) {
+          node.data = {};
+        }
+        if (!node.data.hProperties) {
+          node.data.hProperties = {};
+        }
+        node.data.hProperties['data-callout-type'] = calloutType;
+      }
+    });
+  };
+};

package/esm/pipeline/transformMarkdownDemoLinks/index.d.ts

@@ -0,0 +1,2 @@
+import { transformMarkdownDemoLinks } from "./transformMarkdownDemoLinks.js";
+export default transformMarkdownDemoLinks;

package/esm/pipeline/transformMarkdownDemoLinks/index.js

@@ -0,0 +1,4 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownDemoLinks } from "./transformMarkdownDemoLinks.js";
+export default transformMarkdownDemoLinks;

package/esm/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.d.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from 'unified';
+/**
+ * Remark plugin that cleans up demo patterns in markdown.
+ *
+ * Looks for patterns where a Demo component is followed by a "[See Demo]" link
+ * and optionally a horizontal rule (---). When found, removes the link and
+ * any following horizontal rule.
+ *
+ * This is useful for markdown that will be converted to HTML where the link
+ * and separator are distracting on the page.
+ *
+ * Pattern it matches:
+ * ```
+ * <DemoSomething />
+ *
+ * [See Demo](./demos/base/)
+ *
+ * ---  (optional)
+ * ```
+ *
+ * Gets transformed to:
+ * ```
+ * <DemoSomething />
+ * ```
+ */
+export declare const transformMarkdownDemoLinks: Plugin;

package/esm/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.js

@@ -0,0 +1,107 @@
+// MDX JSX types
+
+/**
+ * Remark plugin that cleans up demo patterns in markdown.
+ *
+ * Looks for patterns where a Demo component is followed by a "[See Demo]" link
+ * and optionally a horizontal rule (---). When found, removes the link and
+ * any following horizontal rule.
+ *
+ * This is useful for markdown that will be converted to HTML where the link
+ * and separator are distracting on the page.
+ *
+ * Pattern it matches:
+ * ```
+ * <DemoSomething />
+ *
+ * [See Demo](./demos/base/)
+ *
+ * ---  (optional)
+ * ```
+ *
+ * Gets transformed to:
+ * ```
+ * <DemoSomething />
+ * ```
+ */
+export var transformMarkdownDemoLinks = function transformMarkdownDemoLinks() {
+  return function (tree) {
+    var parent = tree;
+    var children = parent.children;
+    for (var i = 0; i < children.length - 1; i += 1) {
+      var current = children[i];
+      var next = children[i + 1];
+      var separator = children[i + 2]; // May not exist
+
+      var hasDemo = false;
+
+      // Check if current node is an HTML element containing a Demo component without .Title
+      if ((current == null ? void 0 : current.type) === 'html') {
+        var htmlNode = current;
+        hasDemo = htmlNode.value.includes('<Demo') && !htmlNode.value.includes('.Title');
+      } else if ((current == null ? void 0 : current.type) === 'mdxJsxFlowElement') {
+        // Check if current node is an MDX JSX element (for imported Demo components)
+        var mdxNode = current;
+        if (mdxNode.name && mdxNode.name.includes('Demo') && !mdxNode.name.includes('.Title')) {
+          hasDemo = true;
+        }
+      } else if ((current == null ? void 0 : current.type) === 'paragraph') {
+        // Check if paragraph contains only a single HTML node with a Demo component
+        var paragraphNode = current;
+        if (paragraphNode.children.length === 1 && paragraphNode.children[0].type === 'html') {
+          var _htmlNode = paragraphNode.children[0];
+          hasDemo = _htmlNode.value.includes('<Demo') && !_htmlNode.value.includes('.Title');
+        } else if (paragraphNode.children.length >= 2 && paragraphNode.children[0].type === 'html' && paragraphNode.children[paragraphNode.children.length - 1].type === 'html') {
+          // Check if this looks like a Demo component with opening and closing tags
+          var openingTag = paragraphNode.children[0];
+          var closingTag = paragraphNode.children[paragraphNode.children.length - 1];
+          if (openingTag.value.includes('<Demo') && !openingTag.value.includes('.Title') && closingTag.value.includes('</Demo')) {
+            hasDemo = true;
+          }
+        } else {
+          // Check if paragraph contains any HTML nodes with Demo components (mixed content)
+          hasDemo = paragraphNode.children.some(function (child) {
+            return child.type === 'html' && child.value.includes('<Demo') && !child.value.includes('.Title');
+          });
+        }
+      }
+      if (!hasDemo) {
+        continue;
+      }
+      var removedSomething = false;
+
+      // Check if next node is a paragraph containing a "See Demo" link
+      if ((next == null ? void 0 : next.type) === 'paragraph') {
+        var hasSeeDemo = next.children.some(function (child) {
+          return child.type === 'link' && child.children.some(function (linkChild) {
+            return linkChild.type === 'text' && linkChild.value === 'See Demo';
+          });
+        });
+
+        // Check if there's also a thematic break (---) after the paragraph
+        var hasThematicBreak = (separator == null ? void 0 : separator.type) === 'thematicBreak';
+        if (hasSeeDemo) {
+          // Remove the "See Demo" paragraph and any following thematic break
+          if (hasThematicBreak) {
+            // Remove both the "See Demo" paragraph and the thematic break
+            children.splice(i + 1, 2);
+            removedSomething = true;
+          } else {
+            // Remove only the "See Demo" paragraph
+            children.splice(i + 1, 1);
+            removedSomething = true;
+          }
+        } else if (hasThematicBreak) {
+          // No "See Demo" link, but there's a thematic break after the paragraph - remove just the HR
+          children.splice(i + 2, 1);
+          removedSomething = true;
+        }
+      }
+
+      // If we removed something, adjust the loop index to prevent skipping
+      if (removedSomething) {
+        i -= 1;
+      }
+    }
+  };
+};

package/esm/pipeline/transformMarkdownMetadata/index.d.ts

@@ -0,0 +1,2 @@
+import { transformMarkdownMetadata } from "./transformMarkdownMetadata.js";
+export default transformMarkdownMetadata;

package/esm/pipeline/transformMarkdownMetadata/index.js

@@ -0,0 +1,4 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownMetadata } from "./transformMarkdownMetadata.js";
+export default transformMarkdownMetadata;

package/esm/pipeline/transformMarkdownMetadata/transformMarkdownMetadata.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'unified';
+import type { TransformMarkdownMetadataOptions } from "./types.js";
+export declare const transformMarkdownMetadata: Plugin<[TransformMarkdownMetadataOptions?]>;