@rasenganjs/mdx 1.2.0-beta.7 → 1.2.0

package/dist/index.d.cts

@@ -0,0 +1,150 @@
+import { Metadata } from 'rasengan';
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * A React functional component that represents an MDX page.
+ *
+ * The `MDXPageComponent` type extends the `React.FC<ReactComponentProps>` type, which means it is a React functional component that accepts the standard props for a React component.
+ *
+ * The `MDXPageComponent` type also has an optional `metadata` property of type `Metadata`, which can be used to store metadata about the page.
+ */
+type MDXPageComponent = React$1.FC<any> & {
+    metadata?: {
+        path: string;
+        metadata: Metadata;
+    };
+    toc?: Array<TOCItem>;
+};
+type TOCItem = {
+    title: string;
+    anchor: {
+        id: string;
+        text: React$1.ReactNode;
+    };
+    level: 2 | 3;
+    children: Array<Omit<TOCItem, 'children'>>;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+type ComponentWithTextChildrenProps = {
+    children: React$1.ReactNode;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+type MDXRendererProps = {
+    children: MDXPageComponent;
+    className?: string;
+    config?: MDXConfigProps;
+    toc?: Array<TOCItem>;
+    raw?: string;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+type CodeBlockProps = ComponentWithTextChildrenProps & {
+    className?: string;
+};
+type HeadingProps = {
+    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+type HeadingProps2 = ComponentWithTextChildrenProps & {
+    className?: string;
+};
+type NavigationStructure = {
+    title: string;
+    link: string;
+    level: number;
+    children?: NavigationStructure[];
+};
+type TOCConfig = (toc: Array<TOCItem>) => React$1.ReactNode;
+type ComponentConfig = {
+    [Key in Extract<React$1.ElementType, string>]?: React$1.ElementType<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement>>;
+};
+type MDXConfigProps = {
+    components?: ComponentConfig;
+    toc?: TOCConfig;
+    layout?: React$1.FC<{
+        children: React$1.ReactNode;
+        toc?: React$1.ReactNode;
+    }>;
+};
+
+/**
+ * This function is used to extract TOC (Table Of Content) from markdown text
+ * @param markdown
+ * @returns
+ */
+declare function extractTOC(markdown: string): TOCItem[];
+
+declare function defineMDXConfig(config: MDXConfigProps): MDXConfigProps;
+
+/**
+ * Renders an MDX content component with a custom code block component.
+ *
+ * @param {MDXRendererProps} props - The props for the MDX renderer.
+ * @param {React.ReactNode} props.children - The MDX content to render.
+ * @param {string} [props.className] - An optional CSS class name to apply to the rendered section.
+ * @returns {React.ReactElement} - The rendered MDX content with the custom code block component.
+ */
+declare const MDXRenderer: ({ children: MDXContent, className, config, toc: originalTocData, raw, }: MDXRendererProps) => React$1.ReactElement;
+
+declare function Markdown({ content, className, overwriteStyle, }: {
+    content: string;
+    className?: React$1.ComponentProps<'section'>['className'];
+    overwriteStyle?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+interface TableOfContentsProps {
+    items: TOCItem[];
+}
+declare const TableOfContents: React$1.FC<TableOfContentsProps>;
+
+/**
+ * A React component that renders a code block with syntax highlighting and a copy button.
+ *
+ * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
+ * It also includes a copy button that allows the user to copy the code to their clipboard.
+ *
+ * @param {object} props - The component props.
+ * @param {string} props.children - The code content to be displayed in the code block.
+ * @param {string} [props.className] - The CSS class name to apply to the code block.
+ * @returns {React.ReactElement} - The rendered code block component.
+ */
+declare const CodeBlock: ({ children, className, ...rest }: CodeBlockProps) => React$1.ReactElement;
+
+type IconProps = React.HTMLAttributes<SVGElement>;
+declare const Icons: {
+    logo: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    twitter: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    gitHub: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    radix: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    aria: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    npm: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    yarn: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    pnpm: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    react: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    tailwind: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    google: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    apple: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    paypal: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    spinner: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    json: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    ts: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    css: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    bash: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    v0: (props: IconProps) => react_jsx_runtime.JSX.Element;
+};
+declare function getIconForLanguageExtension(language: string): react_jsx_runtime.JSX.Element;
+
+/**
+ * Custom hook that tracks which TOC item is currently active based on scroll position
+ * @param items - Array of TOC items to observe
+ * @param options - IntersectionObserver options
+ * @returns The ID of the currently active TOC item
+ */
+declare function useActiveTocItem(items: TOCItem[], options?: IntersectionObserverInit): [string | null, (id: string | null) => void];
+
+export { CodeBlock, type CodeBlockProps, type ComponentWithTextChildrenProps, type HeadingProps, type HeadingProps2, Icons, type MDXConfigProps, type MDXPageComponent, MDXRenderer, type MDXRendererProps, Markdown, type NavigationStructure, type TOCItem, TableOfContents, defineMDXConfig, extractTOC, getIconForLanguageExtension, useActiveTocItem };

package/dist/index.d.ts

@@ -0,0 +1,150 @@
+import { Metadata } from 'rasengan';
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * A React functional component that represents an MDX page.
+ *
+ * The `MDXPageComponent` type extends the `React.FC<ReactComponentProps>` type, which means it is a React functional component that accepts the standard props for a React component.
+ *
+ * The `MDXPageComponent` type also has an optional `metadata` property of type `Metadata`, which can be used to store metadata about the page.
+ */
+type MDXPageComponent = React$1.FC<any> & {
+    metadata?: {
+        path: string;
+        metadata: Metadata;
+    };
+    toc?: Array<TOCItem>;
+};
+type TOCItem = {
+    title: string;
+    anchor: {
+        id: string;
+        text: React$1.ReactNode;
+    };
+    level: 2 | 3;
+    children: Array<Omit<TOCItem, 'children'>>;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+type ComponentWithTextChildrenProps = {
+    children: React$1.ReactNode;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+type MDXRendererProps = {
+    children: MDXPageComponent;
+    className?: string;
+    config?: MDXConfigProps;
+    toc?: Array<TOCItem>;
+    raw?: string;
+};
+/**
+ * A React functional component that represents a simple block element.
+ */
+type CodeBlockProps = ComponentWithTextChildrenProps & {
+    className?: string;
+};
+type HeadingProps = {
+    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+type HeadingProps2 = ComponentWithTextChildrenProps & {
+    className?: string;
+};
+type NavigationStructure = {
+    title: string;
+    link: string;
+    level: number;
+    children?: NavigationStructure[];
+};
+type TOCConfig = (toc: Array<TOCItem>) => React$1.ReactNode;
+type ComponentConfig = {
+    [Key in Extract<React$1.ElementType, string>]?: React$1.ElementType<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement>>;
+};
+type MDXConfigProps = {
+    components?: ComponentConfig;
+    toc?: TOCConfig;
+    layout?: React$1.FC<{
+        children: React$1.ReactNode;
+        toc?: React$1.ReactNode;
+    }>;
+};
+
+/**
+ * This function is used to extract TOC (Table Of Content) from markdown text
+ * @param markdown
+ * @returns
+ */
+declare function extractTOC(markdown: string): TOCItem[];
+
+declare function defineMDXConfig(config: MDXConfigProps): MDXConfigProps;
+
+/**
+ * Renders an MDX content component with a custom code block component.
+ *
+ * @param {MDXRendererProps} props - The props for the MDX renderer.
+ * @param {React.ReactNode} props.children - The MDX content to render.
+ * @param {string} [props.className] - An optional CSS class name to apply to the rendered section.
+ * @returns {React.ReactElement} - The rendered MDX content with the custom code block component.
+ */
+declare const MDXRenderer: ({ children: MDXContent, className, config, toc: originalTocData, raw, }: MDXRendererProps) => React$1.ReactElement;
+
+declare function Markdown({ content, className, overwriteStyle, }: {
+    content: string;
+    className?: React$1.ComponentProps<'section'>['className'];
+    overwriteStyle?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+interface TableOfContentsProps {
+    items: TOCItem[];
+}
+declare const TableOfContents: React$1.FC<TableOfContentsProps>;
+
+/**
+ * A React component that renders a code block with syntax highlighting and a copy button.
+ *
+ * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
+ * It also includes a copy button that allows the user to copy the code to their clipboard.
+ *
+ * @param {object} props - The component props.
+ * @param {string} props.children - The code content to be displayed in the code block.
+ * @param {string} [props.className] - The CSS class name to apply to the code block.
+ * @returns {React.ReactElement} - The rendered code block component.
+ */
+declare const CodeBlock: ({ children, className, ...rest }: CodeBlockProps) => React$1.ReactElement;
+
+type IconProps = React.HTMLAttributes<SVGElement>;
+declare const Icons: {
+    logo: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    twitter: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    gitHub: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    radix: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    aria: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    npm: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    yarn: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    pnpm: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    react: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    tailwind: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    google: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    apple: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    paypal: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    spinner: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    json: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    ts: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    css: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    bash: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    v0: (props: IconProps) => react_jsx_runtime.JSX.Element;
+};
+declare function getIconForLanguageExtension(language: string): react_jsx_runtime.JSX.Element;
+
+/**
+ * Custom hook that tracks which TOC item is currently active based on scroll position
+ * @param items - Array of TOC items to observe
+ * @param options - IntersectionObserver options
+ * @returns The ID of the currently active TOC item
+ */
+declare function useActiveTocItem(items: TOCItem[], options?: IntersectionObserverInit): [string | null, (id: string | null) => void];
+
+export { CodeBlock, type CodeBlockProps, type ComponentWithTextChildrenProps, type HeadingProps, type HeadingProps2, Icons, type MDXConfigProps, type MDXPageComponent, MDXRenderer, type MDXRendererProps, Markdown, type NavigationStructure, type TOCItem, TableOfContents, defineMDXConfig, extractTOC, getIconForLanguageExtension, useActiveTocItem };