@xyd-js/content 0.0.0-build

package/packages/md/plugins/composer/__fixtures__/1.single-example/input.md

@@ -0,0 +1,7 @@
+<<<examples
+```jsx 
+function GuideCard() {
+  return <div> Guide Card </div>
+}
+``` 
+<<<

package/packages/md/plugins/composer/__fixtures__/1.single-example/output.json

@@ -0,0 +1,63 @@
+{
+  "examples": [
+    {
+      "value": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "lang": "jsx",
+      "meta": null,
+      "code": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "tokens": [
+        [
+          "function",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "GuideCard",
+          "#D2A8FF"
+        ],
+        [
+          "() {",
+          "#C9D1D9"
+        ],
+        "\n  ",
+        [
+          "return",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "<",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          "> Guide Card </",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          ">",
+          "#C9D1D9"
+        ],
+        "\n",
+        [
+          "}",
+          "#C9D1D9"
+        ]
+      ],
+      "annotations": [],
+      "themeName": "github-dark",
+      "style": {
+        "color": "#c9d1d9",
+        "background": "#0d1117",
+        "colorScheme": "dark"
+      }
+    }
+  ]
+}

package/packages/md/plugins/composer/__fixtures__/2.single-example-with-name/input.md

@@ -0,0 +1,7 @@
+<<<examples
+```jsx Guide Card Sample
+function GuideCard() {
+  return <div> Guide Card </div>
+}
+``` 
+<<<

package/packages/md/plugins/composer/__fixtures__/2.single-example-with-name/output.json

@@ -0,0 +1,63 @@
+{
+  "examples": [
+    {
+      "value": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "lang": "jsx",
+      "meta": "Guide Card Sample",
+      "code": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "tokens": [
+        [
+          "function",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "GuideCard",
+          "#D2A8FF"
+        ],
+        [
+          "() {",
+          "#C9D1D9"
+        ],
+        "\n  ",
+        [
+          "return",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "<",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          "> Guide Card </",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          ">",
+          "#C9D1D9"
+        ],
+        "\n",
+        [
+          "}",
+          "#C9D1D9"
+        ]
+      ],
+      "annotations": [],
+      "themeName": "github-dark",
+      "style": {
+        "color": "#c9d1d9",
+        "background": "#0d1117",
+        "colorScheme": "dark"
+      }
+    }
+  ]
+}

package/packages/md/plugins/composer/__fixtures__/3.multiple-examples/input.md

@@ -0,0 +1,15 @@
+<<<examples
+- 
+  ```jsx Card Group Sample
+  function GuideCard() {
+    return <div> Guide Card </div>
+  }
+  ```
+
+ - 
+  ```tsx Card Group V2 Sample
+  function GuideCardV2() {
+    return <div> Guide Card V2 </div>
+  }
+  ``` 
+<<<

package/packages/md/plugins/composer/__fixtures__/3.multiple-examples/output.json

@@ -0,0 +1,122 @@
+{
+  "examples": [
+    {
+      "value": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "lang": "jsx",
+      "meta": "Card Group Sample",
+      "code": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "tokens": [
+        [
+          "function",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "GuideCard",
+          "#D2A8FF"
+        ],
+        [
+          "() {",
+          "#C9D1D9"
+        ],
+        "\n  ",
+        [
+          "return",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "<",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          "> Guide Card </",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          ">",
+          "#C9D1D9"
+        ],
+        "\n",
+        [
+          "}",
+          "#C9D1D9"
+        ]
+      ],
+      "annotations": [],
+      "themeName": "github-dark",
+      "style": {
+        "color": "#c9d1d9",
+        "background": "#0d1117",
+        "colorScheme": "dark"
+      }
+    },
+    {
+      "value": "function GuideCardV2() {\n  return <div> Guide Card V2 </div>\n}",
+      "lang": "tsx",
+      "meta": "Card Group V2 Sample",
+      "code": "function GuideCardV2() {\n  return <div> Guide Card V2 </div>\n}",
+      "tokens": [
+        [
+          "function",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "GuideCardV2",
+          "#D2A8FF"
+        ],
+        [
+          "() {",
+          "#C9D1D9"
+        ],
+        "\n  ",
+        [
+          "return",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "<",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          "> Guide Card V2 </",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          ">",
+          "#C9D1D9"
+        ],
+        "\n",
+        [
+          "}",
+          "#C9D1D9"
+        ]
+      ],
+      "annotations": [],
+      "themeName": "github-dark",
+      "style": {
+        "color": "#c9d1d9",
+        "background": "#0d1117",
+        "colorScheme": "dark"
+      }
+    }
+  ]
+}

package/packages/md/plugins/composer/__fixtures__/4.example-groups/input.md

@@ -0,0 +1,23 @@
+<<<examples
+- 
+  :::code-group{title="Guide Cards"}
+  ```jsx Guide Card Example
+  function GuideCard() {
+    return <div> Guide Card </div>
+  }
+  ```
+
+  ```tsx Card Group V2 Sample
+  function GuideCardV2() {
+    return <div> Guide Card V2 </div>
+  }
+  ``` 
+  :::
+
+- 
+  ```jsx 
+  function GuideCard() {
+    return <div> Guide Card </div>
+  }
+  ``` 
+<<<

package/packages/md/plugins/composer/__fixtures__/4.example-groups/output.json

@@ -0,0 +1,184 @@
+{
+  "examples": [
+    [
+      "Guide Cards",
+      {
+        "value": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+        "lang": "jsx",
+        "meta": "Guide Card Example",
+        "code": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+        "tokens": [
+          [
+            "function",
+            "#FF7B72"
+          ],
+          " ",
+          [
+            "GuideCard",
+            "#D2A8FF"
+          ],
+          [
+            "() {",
+            "#C9D1D9"
+          ],
+          "\n  ",
+          [
+            "return",
+            "#FF7B72"
+          ],
+          " ",
+          [
+            "<",
+            "#C9D1D9"
+          ],
+          [
+            "div",
+            "#7EE787"
+          ],
+          [
+            "> Guide Card </",
+            "#C9D1D9"
+          ],
+          [
+            "div",
+            "#7EE787"
+          ],
+          [
+            ">",
+            "#C9D1D9"
+          ],
+          "\n",
+          [
+            "}",
+            "#C9D1D9"
+          ]
+        ],
+        "annotations": [],
+        "themeName": "github-dark",
+        "style": {
+          "color": "#c9d1d9",
+          "background": "#0d1117",
+          "colorScheme": "dark"
+        }
+      },
+      {
+        "value": "function GuideCardV2() {\n  return <div> Guide Card V2 </div>\n}",
+        "lang": "tsx",
+        "meta": "Card Group V2 Sample",
+        "code": "function GuideCardV2() {\n  return <div> Guide Card V2 </div>\n}",
+        "tokens": [
+          [
+            "function",
+            "#FF7B72"
+          ],
+          " ",
+          [
+            "GuideCardV2",
+            "#D2A8FF"
+          ],
+          [
+            "() {",
+            "#C9D1D9"
+          ],
+          "\n  ",
+          [
+            "return",
+            "#FF7B72"
+          ],
+          " ",
+          [
+            "<",
+            "#C9D1D9"
+          ],
+          [
+            "div",
+            "#7EE787"
+          ],
+          [
+            "> Guide Card V2 </",
+            "#C9D1D9"
+          ],
+          [
+            "div",
+            "#7EE787"
+          ],
+          [
+            ">",
+            "#C9D1D9"
+          ],
+          "\n",
+          [
+            "}",
+            "#C9D1D9"
+          ]
+        ],
+        "annotations": [],
+        "themeName": "github-dark",
+        "style": {
+          "color": "#c9d1d9",
+          "background": "#0d1117",
+          "colorScheme": "dark"
+        }
+      }
+    ],
+    {
+      "value": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "lang": "jsx",
+      "meta": null,
+      "code": "function GuideCard() {\n  return <div> Guide Card </div>\n}",
+      "tokens": [
+        [
+          "function",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "GuideCard",
+          "#D2A8FF"
+        ],
+        [
+          "() {",
+          "#C9D1D9"
+        ],
+        "\n  ",
+        [
+          "return",
+          "#FF7B72"
+        ],
+        " ",
+        [
+          "<",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          "> Guide Card </",
+          "#C9D1D9"
+        ],
+        [
+          "div",
+          "#7EE787"
+        ],
+        [
+          ">",
+          "#C9D1D9"
+        ],
+        "\n",
+        [
+          "}",
+          "#C9D1D9"
+        ]
+      ],
+      "annotations": [],
+      "themeName": "github-dark",
+      "style": {
+        "color": "#c9d1d9",
+        "background": "#0d1117",
+        "colorScheme": "dark"
+      }
+    }
+  ]
+}

package/packages/md/plugins/composer/__tests__/mdComposer.test.ts

@@ -0,0 +1,41 @@
+import { describe, it } from 'vitest';
+
+import { testFixture } from './testHelpers';
+
+
+const tests = [
+  {
+    name: "1.single-example",
+    description: "A single example",
+    input: "1.single-example/input.md",
+    output: "1.single-example/output.md"
+  },
+  {
+    name: "2.single-example-with-name",
+    description: "A single example with a name",
+    input: "2.single-example-with-name/input.md",
+    output: "2.single-example-with-name/output.md"
+  },
+  {
+    name: "3.multiple-examples",
+    description: "Multiple examples",
+    input: "3.multiple-examples/input.md",
+    output: "3.multiple-examples/output.md"
+  },
+  {
+    name: "4.example-groups",
+    description: "Example groups",
+    input: "4.example-groups/input.md",
+    output: "4.example-groups/output.md"
+  }
+]
+
+describe("mdComposer", () => {
+  tests.forEach((test) => {
+    it(`[${test.name}]: ${test.description}`, async () => {
+      await testFixture(test.name);
+    });
+  });
+});
+
+

package/packages/md/plugins/composer/__tests__/testHelpers.ts

@@ -0,0 +1,48 @@
+import fs from "fs";
+import path from "path";
+import { describe, it, expect } from 'vitest';
+import { remark } from 'remark'
+import remarkDirective from "remark-directive";
+
+import { mdComposer } from "../mdComposer";
+import { outputVars } from '../../output-variables';
+import { SymbolxVfile } from "../../types";
+
+interface TestOutputVariables {
+    examples: string
+}
+
+// Helper function to run a test with a specific fixture
+export async function testFixture(fixtureName: string) {
+    const input = readFixture(`${fixtureName}/input.md`);
+    const expectedOutput = readFixtureOutput(`${fixtureName}/output.json`);
+
+    const result = await processMarkdown(input);
+    const output = result as SymbolxVfile<TestOutputVariables>
+    const examples = output.data.outputVars?.examples
+
+    expect(examples).toEqual(expectedOutput.examples);
+}
+
+// Helper function to process markdown with the mdComposer plugin
+async function processMarkdown(input: string) {
+    return await remark()
+        .use(outputVars)
+        .use(mdComposer())
+        .use(remarkDirective)
+        .process(input);
+}
+
+
+// Helper function to read fixture files
+function readFixture(name: string) {
+    const fixturePath = path.join(__dirname, "../__fixtures__", name);
+    return fs.readFileSync(fixturePath, "utf8");
+}
+
+// Helper function to read fixture output
+function readFixtureOutput(name: string) {
+    const fixturePath = path.join(__dirname, "../__fixtures__", name);
+    return JSON.parse(fs.readFileSync(fixturePath, "utf8"));
+}
+

package/packages/md/plugins/composer/index.ts

@@ -0,0 +1 @@
+export { mdComposer } from './mdComposer';