@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs/mdx/steps.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '@/lib/utils';
+import * as PhosphorIcons from '@phosphor-icons/react';
+/**
+ * Steps Components for MDX Documentation
+ * 
+ * Mintlify-compatible step-by-step guide components.
+ */ // Dynamic icon resolver
+function getIcon(iconName) {
+    if (!iconName) return null;
+    const pascalCase = iconName.split(/[-_]/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+    const Icon = PhosphorIcons[pascalCase];
+    return Icon || null;
+}
+const StepsContext = /*#__PURE__*/ React.createContext({
+    titleSize: 'p'
+});
+export function Step({ title, children, icon, stepNumber, titleSize: localTitleSize, className }) {
+    const { titleSize: contextTitleSize } = React.useContext(StepsContext);
+    const titleSize = localTitleSize ?? contextTitleSize;
+    const Icon = icon ? getIcon(icon) : null;
+    const TitleTag = titleSize === 'p' ? 'div' : titleSize;
+    const titleClass = cn('font-semibold text-foreground', titleSize === 'h2' && 'text-xl', titleSize === 'h3' && 'text-lg', titleSize === 'h4' && 'text-base', titleSize === 'p' && 'text-base');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('relative pl-8 pb-8 last:pb-0', className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "absolute left-[11px] top-8 bottom-0 w-px bg-border last:hidden"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold",
+                children: Icon ? /*#__PURE__*/ _jsx(Icon, {
+                    className: "h-3.5 w-3.5",
+                    weight: "bold"
+                }) : stepNumber
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "pt-0.5",
+                children: [
+                    /*#__PURE__*/ _jsx(TitleTag, {
+                        className: titleClass,
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "mt-2 text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0 [&>pre]:my-3 [&>ul]:mt-2 [&>ol]:mt-2",
+                        children: children
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function Steps({ children, titleSize = 'p', className }) {
+    // Auto-number steps
+    const numberedChildren = React.Children.map(children, (child, index)=>{
+        if (/*#__PURE__*/ React.isValidElement(child) && child.type === Step) {
+            return /*#__PURE__*/ React.cloneElement(child, {
+                stepNumber: child.props.stepNumber ?? index + 1
+            });
+        }
+        return child;
+    });
+    return /*#__PURE__*/ _jsx(StepsContext.Provider, {
+        value: {
+            titleSize
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            className: cn('my-6', className),
+            children: numberedChildren
+        })
+    });
+}

package/renderer/components/docs/mdx/tabs.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+const TabsContext = /*#__PURE__*/ React.createContext(null);
+export function Tab({ children, className }) {
+    // Tab content is rendered by Tabs parent
+    return /*#__PURE__*/ _jsx("div", {
+        className: className,
+        children: children
+    });
+}
+export function Tabs({ children, defaultValue, className }) {
+    // Extract tab titles and content from children
+    const tabs = [];
+    React.Children.forEach(children, (child)=>{
+        if (/*#__PURE__*/ React.isValidElement(child) && child.type === Tab) {
+            tabs.push({
+                title: child.props.title,
+                content: child.props.children
+            });
+        }
+    });
+    const [activeTab, setActiveTab] = useState(defaultValue || tabs[0]?.title || '');
+    const activeContent = tabs.find((tab)=>tab.title === activeTab)?.content;
+    return /*#__PURE__*/ _jsx(TabsContext.Provider, {
+        value: {
+            activeTab,
+            setActiveTab
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: cn('my-4', className),
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex border-b border-border overflow-x-auto",
+                    children: tabs.map((tab)=>/*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: ()=>setActiveTab(tab.title),
+                            className: cn('px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors', 'hover:text-foreground', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', 'border-b-2 -mb-px', activeTab === tab.title ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground'),
+                            children: tab.title
+                        }, tab.title))
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "pt-4",
+                    children: activeContent
+                })
+            ]
+        })
+    });
+}

package/renderer/components/docs/mdx-renderer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compileMDXContent } from '@/lib/docs/mdx';
+import { mdxComponents } from './mdx';
+export async function MDXRenderer({ source, components: additionalComponents = {}, scope = {} }) {
+    const { content, frontmatter, headings } = await compileMDXContent(source, {
+        components: {
+            ...mdxComponents,
+            ...additionalComponents
+        },
+        scope
+    });
+    return /*#__PURE__*/ _jsxs("article", {
+        className: "prose prose-slate dark:prose-invert max-w-none",
+        children: [
+            frontmatter.title && /*#__PURE__*/ _jsxs("header", {
+                className: "mb-8 not-prose",
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        className: "text-3xl font-bold text-foreground mb-2",
+                        children: frontmatter.title
+                    }),
+                    frontmatter.description && /*#__PURE__*/ _jsx("p", {
+                        className: "text-lg text-muted-foreground",
+                        children: frontmatter.description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "mdx-content",
+                children: content
+            }),
+            /*#__PURE__*/ _jsx("script", {
+                type: "application/json",
+                id: "mdx-frontmatter",
+                dangerouslySetInnerHTML: {
+                    __html: JSON.stringify(frontmatter)
+                }
+            }),
+            /*#__PURE__*/ _jsx("script", {
+                type: "application/json",
+                id: "mdx-headings",
+                dangerouslySetInnerHTML: {
+                    __html: JSON.stringify(headings)
+                }
+            })
+        ]
+    });
+}
+/**
+ * Table of Contents Component
+ * 
+ * Client component that renders a table of contents from headings
+ */ export function TableOfContents({ headings }) {
+    if (headings.length === 0) return null;
+    return /*#__PURE__*/ _jsxs("nav", {
+        className: "toc",
+        children: [
+            /*#__PURE__*/ _jsx("h4", {
+                className: "text-sm font-semibold text-foreground mb-3",
+                children: "On this page"
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                className: "space-y-2 text-sm",
+                children: headings.map((heading)=>/*#__PURE__*/ _jsx("li", {
+                        style: {
+                            paddingLeft: `${(heading.level - 1) * 12}px`
+                        },
+                        children: /*#__PURE__*/ _jsx("a", {
+                            href: `#${heading.id}`,
+                            className: "text-muted-foreground hover:text-foreground transition-colors",
+                            children: heading.title
+                        })
+                    }, heading.id))
+            })
+        ]
+    });
+}

package/renderer/components/docs/navigation/breadcrumbs.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import { CaretRight, House } from '@phosphor-icons/react';
+export function Breadcrumbs({ items, showHome = true, className }) {
+    if (items.length === 0) return null;
+    return /*#__PURE__*/ _jsx("nav", {
+        className: cn('flex items-center text-sm', className),
+        "aria-label": "Breadcrumb",
+        children: /*#__PURE__*/ _jsxs("ol", {
+            className: "flex items-center space-x-1",
+            children: [
+                showHome && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("li", {
+                            children: /*#__PURE__*/ _jsxs(Link, {
+                                href: "/docs",
+                                className: "text-muted-foreground hover:text-foreground transition-colors",
+                                children: [
+                                    /*#__PURE__*/ _jsx(House, {
+                                        className: "h-4 w-4"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "sr-only",
+                                        children: "Home"
+                                    })
+                                ]
+                            })
+                        }),
+                        items.length > 0 && /*#__PURE__*/ _jsx("li", {
+                            children: /*#__PURE__*/ _jsx(CaretRight, {
+                                className: "h-4 w-4 text-muted-foreground/50"
+                            })
+                        })
+                    ]
+                }),
+                items.map((item, index)=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("li", {
+                                children: index === items.length - 1 ? /*#__PURE__*/ _jsx("span", {
+                                    className: "text-foreground font-medium",
+                                    children: item.title
+                                }) : item.href === '#' ? /*#__PURE__*/ _jsx("span", {
+                                    className: "text-muted-foreground",
+                                    children: item.title
+                                }) : /*#__PURE__*/ _jsx(Link, {
+                                    href: item.href,
+                                    className: "text-muted-foreground hover:text-foreground transition-colors",
+                                    children: item.title
+                                })
+                            }),
+                            index < items.length - 1 && /*#__PURE__*/ _jsx("li", {
+                                children: /*#__PURE__*/ _jsx(CaretRight, {
+                                    className: "h-4 w-4 text-muted-foreground/50"
+                                })
+                            })
+                        ]
+                    }, item.href))
+            ]
+        })
+    });
+}

package/renderer/components/docs/navigation/index.js

@@ -0,0 +1,6 @@
+/**
+ * Navigation Components Exports
+ */ export { DocsSidebar, DocsSidebarSection, DocsSidebarItem, DocsSidebarGroup } from './sidebar';
+export { TableOfContents, extractHeadingsFromDOM } from './toc';
+export { Breadcrumbs } from './breadcrumbs';
+export { PageNav } from './page-nav';

package/renderer/components/docs/navigation/page-nav.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
+export function PageNav({ prev, next, className }) {
+    if (!prev && !next) return null;
+    return /*#__PURE__*/ _jsxs("nav", {
+        className: cn('flex items-center justify-between gap-4 pt-8 mt-8 border-t border-border', className),
+        "aria-label": "Page navigation",
+        children: [
+            prev ? /*#__PURE__*/ _jsxs(Link, {
+                href: prev.href,
+                className: "group flex-1 flex flex-col items-start gap-1 p-4 rounded-lg border border-border hover:border-primary/50 hover:bg-muted/30 transition-colors",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "flex items-center gap-1 text-xs text-muted-foreground",
+                        children: [
+                            /*#__PURE__*/ _jsx(ArrowLeft, {
+                                className: "h-3 w-3"
+                            }),
+                            "Previous"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "font-medium text-foreground group-hover:text-primary transition-colors",
+                        children: prev.title
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: "flex-1"
+            }),
+            next ? /*#__PURE__*/ _jsxs(Link, {
+                href: next.href,
+                className: "group flex-1 flex flex-col items-end gap-1 p-4 rounded-lg border border-border hover:border-primary/50 hover:bg-muted/30 transition-colors text-right",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "flex items-center gap-1 text-xs text-muted-foreground",
+                        children: [
+                            "Next",
+                            /*#__PURE__*/ _jsx(ArrowRight, {
+                                className: "h-3 w-3"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "font-medium text-foreground group-hover:text-primary transition-colors",
+                        children: next.title
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: "flex-1"
+            })
+        ]
+    });
+}