Adds sample documents

docs/components/footnote.mdx

@@ -0,0 +1,17 @@
+---
+title: Footnote
+---
+# Footnote
+
+## Footnote
+
+Creates an automatically numbered footnote.
+
+### Props
+
+#### children
+
+The text to display in the footnote. This can be rich text.
+
+Type: `React.ReactNode`
+

docs/components/frontmatter.mdx

@@ -0,0 +1,13 @@
+---
+title: Frontmatter
+---
+# Frontmatter
+
+## Frontmatter
+
+### Props
+
+## FrontmatterProvider
+
+### Props
+

docs/components/headings.mdx

@@ -0,0 +1,29 @@
+---
+title: Headings
+---
+# Headings
+
+## RunningH1
+
+### Props
+
+## RunningH2
+
+### Props
+
+## RunningH3
+
+### Props
+
+## RunningH4
+
+### Props
+
+## RunningH5
+
+### Props
+
+## RunningH6
+
+### Props
+

docs/components/shell.mdx

@@ -0,0 +1,29 @@
+---
+title: Shell
+---
+# Shell
+
+## PageTop
+
+### Props
+
+## CurrentPageTop
+
+### Props
+
+## PageBottom
+
+### Props
+
+## PageBreak
+
+### Props
+
+## NoBreak
+
+### Props
+
+## FloatBottom
+
+### Props
+

docs/components/signature.mdx

@@ -0,0 +1,9 @@
+---
+title: Signature
+---
+# Signature
+
+## Signature
+
+### Props
+

docs/components/trackbox.mdx

@@ -0,0 +1,9 @@
+---
+title: Trackbox
+---
+# Trackbox
+
+## TrackBox
+
+### Props
+

docs/mint.json

@@ -68,6 +68,17 @@
         "essentials/reusable-snippets"
       ]
     },
+    {
+      "group": "Components",
+      "pages": [
+        "components/trackbox",
+        "components/signature",
+        "components/shell",
+        "components/headings",
+        "components/frontmatter",
+        "components/footnote"
+      ]
+    },
     {
       "group": "API Documentation",
       "pages": [

package.json

@@ -19,14 +19,18 @@
   "scripts": {
     "build": "tsup",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "(cd ./docs && mintlify dev --watch)"
+    "dev": "(cd ./docs && mintlify dev --watch)",
+    "build-components": "tsx ./scripts/docgen.ts"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@swc/core": "^1.3.107",
     "@types/react": "^18.2.48",
+    "acorn": "^8.11.3",
+    "acorn-typescript": "^1.4.13",
     "mintlify": "^4.0.122",
+    "react-docgen-typescript": "^2.2.2",
     "tsup": "^8.0.1",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3"

scripts/docgen.ts

@@ -0,0 +1,135 @@
+import * as glob from "glob";
+import * as path from "path";
+import * as fs from "fs";
+
+import * as docgen from "react-docgen-typescript";
+
+const options: docgen.ParserOptions = {
+  savePropValueAsString: true,
+  propFilter: {
+    skipPropsWithoutDoc: true,
+  },
+};
+
+type docConfig = {
+  name: string;
+  icon: string;
+};
+
+type docFile = {
+  name: string;
+  markdown: string;
+  path: string;
+};
+
+// List all the .tsx files in the ./src directory
+const files = glob.sync(path.join(__dirname, "../src/**/*.tsx"));
+
+const extractConfig = (fileContents: string) => {
+  // Just parse till the line export const _docConfig = { ... } and extract it with regex then exec it.
+  const docConfig = /export +const +_docConfig += +({[^}]+})/g.exec(
+    fileContents
+  );
+
+  // If there is a match, return the group 1 of the match and its exec
+  if (docConfig) {
+    const contents = docConfig[1];
+    const exec = new Function(`return ${contents}`)();
+
+    return exec;
+  }
+
+  return {};
+};
+
+const formatCamelCaseToTitle = (str: string) => {
+  // Convert camelCase to Title Case with spaces
+  return str
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase());
+};
+
+const docFiles = files
+  .map((filePath) => {
+    console.log(filePath);
+
+    const types = docgen.parse(filePath, options);
+
+    if (types.length === 0) {
+      return false;
+    }
+
+    const inFileConfig = extractConfig(fs.readFileSync(filePath, "utf-8"));
+
+    const config: docConfig = Object.assign(
+      {
+        name: formatCamelCaseToTitle(path.basename(filePath, ".tsx")),
+        icon: "react",
+      } satisfies docConfig,
+      inFileConfig
+    );
+
+    let markdown = `---
+title: ${config.name}
+---
+# ${config.name}\n\n`;
+
+    types.forEach((component) => {
+      markdown += `## ${component.displayName}\n\n`;
+
+      if (component.description) {
+        markdown += `${component.description}\n\n`;
+      }
+
+      markdown += `### Props\n\n`;
+
+      if (component.props) {
+        Object.keys(component.props).forEach((propName) => {
+          const prop = component.props[propName];
+
+          markdown += `#### ${propName}\n\n`;
+
+          if (prop.description) {
+            markdown += `${prop.description}\n\n`;
+          }
+
+          markdown += `Type: \`${prop.type.name}\`\n\n`;
+
+          if (prop.defaultValue) {
+            markdown += `Default: \`${prop.defaultValue.value}\`\n\n`;
+          }
+        });
+      }
+    });
+
+    return {
+      name: path.basename(filePath, ".tsx"),
+      markdown,
+      path: filePath,
+    };
+  })
+  .filter(Boolean) as docFile[];
+
+docFiles.forEach((docFile) => {
+  const outPath = path.join(
+    __dirname,
+    `../docs/components/${docFile.name}.mdx`
+  );
+
+  fs.writeFileSync(outPath, docFile.markdown);
+});
+
+// Write to the ./docs/mint.json file, replacing the contents of the "components" key with the new components
+const mintPath = path.join(__dirname, "../docs/mint.json");
+
+const mint = JSON.parse(fs.readFileSync(mintPath, "utf-8"));
+
+mint.navigation.forEach((navItem, index) => {
+  if (navItem.group === "Components") {
+    mint.navigation[index].pages = docFiles.map((docFile) => {
+      return `components/${docFile.name}`;
+    });
+  }
+});
+
+fs.writeFileSync(mintPath, JSON.stringify(mint, null, 2));

src/Frontmatter/frontmatter.tsx

@@ -5,8 +5,9 @@ interface Frontmatter {
 }
 
 export const formatters = {
-  date: (language:string, options: Intl.DateTimeFormatOptions) => (date: string) =>
-    new Intl.DateTimeFormat(language, options).format(new Date(date)),
+  date:
+    (language: string, options: Intl.DateTimeFormatOptions) => (date: string) =>
+      new Intl.DateTimeFormat(language, options).format(new Date(date)),
   raw: () => (value: string) => value,
 };
 
@@ -47,7 +48,7 @@ export const FrontmatterProvider = ({
   );
 };
 
-export const useFrontmatter = (field: string) => {
+const useFrontmatter = (field: string) => {
   const frontmatter = useContext(FrontmatterContext);
 
   return frontmatter[field] || undefined;