Merge branch 'next'

Author: kellyjosephprice

.github/workflows/bundlewatch.yml

@@ -8,7 +8,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, 'SKIP CI')"
     steps:
       - uses: actions/checkout@v5
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 20.x
 

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v5
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
           persist-credentials: false # install breaks with persistant creds!
 
       - name: Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 20
 

__tests__/migration/recipes.test.ts

@@ -0,0 +1,42 @@
+import { migrate } from '../helpers';
+
+describe('mdx migration of recipes', () => {
+  it('compiles recipes correctly', () => {
+    const md = `
+In a callout:
+
+> 🚀 Launch Example Code:
+>
+> [block:tutorial-tile]{"backgroundColor":"#0b1c36","emoji":"👉","id":"67d85229d1ac0900248b3111","link":"https://developer.moneygram.com/v1.0/recipes/amend-modify-receviers-name-headers","slug":"amend-modify-receviers-name-headers","title":"Amend - Modify Recevier's Name - Headers"}[/block]
+
+Or on a line by itself:
+
+[block:tutorial-tile]
+{
+  "backgroundColor":"#0b1c36",
+  "emoji":"👉",
+  "id":"67d85229d1ac0900248b3111",
+  "link":"https://developer.moneygram.com/v1.0/recipes/amend-modify-receviers-name-headers",
+  "slug":"amend-modify-receviers-name-headers",
+  "title":"Amend - Modify Recevier's Name - Headers"
+}
+[/block]
+    `;
+
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "In a callout:
+
+      <Callout icon="🚀" theme="default">
+        ### Launch Example Code:
+
+        <Recipe slug="amend-modify-receviers-name-headers" title="Amend - Modify Recevier's Name - Headers" />
+      </Callout>
+
+      Or on a line by itself:
+
+      <Recipe slug="amend-modify-receviers-name-headers" title="Amend - Modify Recevier's Name - Headers" />
+      "
+    `);
+  });
+});

components/MCPIntro/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+// We render a placeholder in this library, as the actual implemenation is
+// deeply tied to the main app
+const MCPIntro = () => {
+  const style = {
+    height: '200px',
+    border: '1px solid var(--color-border-default, rgba(black, 0.1))',
+    borderRadius: 'var(--border-radius-lg, 7.5px)',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    padding: '20px',
+    gap: '15px',
+  };
+
+  const placeholderStyle = {
+    borderRadius: 'var(--border-radius-md, 5px)',
+    backgroundColor: 'var(--color-skeleton, #384248)',
+  };
+
+  const headerStyle = {
+    ...placeholderStyle,
+    height: '24px',
+    width: '200px',
+  };
+
+  const lineStyle = {
+    ...placeholderStyle,
+    height: '12px',
+    width: '100%',
+  };
+
+  return (
+    <div className="MCPIntro" style={style}>
+      <div style={headerStyle} />
+      <div style={{ ...lineStyle, width: '90%' }} />
+      <div style={{ ...lineStyle, width: '95%' }} />
+      <div style={{ ...lineStyle, width: '85%' }} />
+      <div style={{ ...lineStyle, width: '92%' }} />
+      <div style={{ ...lineStyle, width: '88%' }} />
+    </div>
+  );
+};
+
+export default MCPIntro;

components/index.ts

@@ -10,6 +10,7 @@ export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';
+export { default as MCPIntro } from './MCPIntro';
 export { default as Table } from './Table';
 export { default as TableOfContents } from './TableOfContents';
 export { default as Tabs, Tab } from './Tabs';

lib/compile.ts

@@ -10,7 +10,12 @@ import remarkGfm from 'remark-gfm';
 
 import MdxSyntaxError from '../errors/mdx-syntax-error';
 import { rehypeToc } from '../processor/plugin/toc';
-import { defaultTransforms, tailwindTransformer, handleMissingComponents } from '../processor/transform';
+import {
+  defaultTransforms,
+  tailwindTransformer,
+  handleMissingComponents,
+  validateMCPIntro,
+} from '../processor/transform';
 
 import { rehypePlugins as defaultRehypePlugins } from './ast-processor';
 
@@ -40,6 +45,7 @@ const compile = (
       handleMissingComponents,
       { components, missingComponents: ['ignore', 'throw'].includes(missingComponents) ? missingComponents : 'ignore' },
     ],
+    [validateMCPIntro],
   ];
 
   if (useTailwind) {

package-lock.json

@@ -13,6 +13,7 @@ import readmeComponentsTransformer from './readme-components';
 import readmeToMdx from './readme-to-mdx';
 import tablesToJsx from './tables-to-jsx';
 import tailwindTransformer from './tailwind';
+import validateMCPIntro from './validate-mcpintro';
 import variablesTransformer from './variables';
 
 export {
@@ -26,6 +27,7 @@ export {
   tablesToJsx,
   tailwindTransformer,
   handleMissingComponents,
+  validateMCPIntro,
   variablesTransformer,
 };
 

processor/transform/index.ts

@@ -52,6 +52,7 @@ const readmeToMdx = (): Transform => tree => {
   });
 
   // Converts tutorial tiles to Recipe components in the migration process
+  // Retaining this for backwards compatibility
   visit(tree, NodeTypes.tutorialTile, (tile, index, parent: Parent) => {
     const { ...attrs } = tile as Recipe;
 
@@ -63,6 +64,17 @@ const readmeToMdx = (): Transform => tree => {
     });
   });
 
+  visit(tree, NodeTypes.recipe, (tile, index, parent: Parent) => {
+    const { ...attrs } = tile as Recipe;
+
+    parent.children.splice(index, 1, {
+      type: 'mdxJsxFlowElement',
+      name: 'Recipe',
+      attributes: toAttributes(attrs, ['slug', 'title']),
+      children: [],
+    });
+  });
+
   visit(tree, 'figure', (figure, index, parent) => {
     const [image, caption] = figure.children;