@ai-growth/nextjs/dist/components/withCmsRouting.d.ts

Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering

import React, { ComponentType } from 'react';
import type { CmsContent, CmsContentOptions, DefaultTemplateProps } from '../types';
/**
 * Configuration options for the withCmsRouting HOC
 */
export interface WithCmsRoutingOptions {
    /** Options for content fetching */
    contentOptions?: CmsContentOptions;
    /** Display name for the wrapped component (for debugging) */
    displayName?: string;
    /** Whether to fetch CMS content automatically on CMS routes */
    autoFetch?: boolean;
    /** Custom template component for CMS content rendering */
    customTemplate?: React.ComponentType<DefaultTemplateProps>;
    /** Callback when content is successfully loaded */
    onContentLoaded?: (content: CmsContent) => void;
    /** Callback when content loading fails */
    onContentError?: (error: string) => void;
    /** Callback when route changes */
    onRouteChange?: (path: string, isCmsRoute: boolean) => void;
}
/**
 * Props that will be injected into the wrapped component when CMS content is available
 */
export interface CmsInjectedProps {
    /** CMS content data (available when on a CMS route) */
    cmsContent?: CmsContent;
    /** Whether the current route is a CMS route */
    isCmsRoute?: boolean;
    /** Loading state for CMS content */
    cmsLoading?: boolean;
    /** Error state for CMS content */
    cmsError?: string | null;
    /** Function to manually fetch CMS content */
    fetchCmsContent?: () => Promise<void>;
    /** Function to clear CMS content */
    clearCmsContent?: () => void;
}
/**
 * Higher-Order Component that wraps page components with CMS routing capabilities
 *
 * This HOC provides automatic CMS content handling for pages by injecting CMS-related
 * props into the wrapped component. The wrapped component maintains full control over
 * its rendering while receiving CMS state as props.
 *
 * @param WrappedComponent - The page component to wrap with CMS functionality
 * @param options - Configuration options for CMS behavior
 * @returns A new component with CMS routing capabilities
 *
 * @example
 * ```tsx
 * // Basic usage - component receives CMS props
 * const BlogPage = ({ title, cmsContent, isCmsRoute, cmsLoading }) => {
 *   if (isCmsRoute && cmsLoading) {
 *     return <div>Loading CMS content...</div>;
 *   }
 *
 *   if (isCmsRoute && cmsContent) {
 *     return (
 *       <div>
 *         <h1>{cmsContent.title}</h1>
 *         <div>{cmsContent.content}</div>
 *       </div>
 *     );
 *   }
 *
 *   return <div>Regular page: {title}</div>;
 * };
 *
 * export default withCmsRouting(BlogPage);
 *
 * // With options
 * export default withCmsRouting(BlogPage, {
 *   contentOptions: { includeSEO: true, includeAuthor: true },
 *   onContentLoaded: (content) => console.log('Loaded:', content.title)
 * });
 *
 * // TypeScript usage
 * interface BlogPageProps {
 *   title: string;
 * }
 *
 * const BlogPage: React.FC<BlogPageProps & CmsInjectedProps> = ({
 *   title,
 *   cmsContent,
 *   isCmsRoute,
 *   cmsLoading,
 *   cmsError
 * }) => {
 *   // Component implementation with full control over rendering
 * };
 *
 * export default withCmsRouting<BlogPageProps>(BlogPage, options);
 * ```
 */
export declare function withCmsRouting<P extends object = {}>(WrappedComponent: ComponentType<P>, options?: WithCmsRoutingOptions): ComponentType<P>;
/**
 * Creates a pre-configured version of withCmsRouting with default options
 *
 * @param defaultOptions - Default options to apply to all wrapped components
 * @returns A withCmsRouting function with pre-configured options
 *
 * @example
 * ```tsx
 * // Create a factory with common options
 * const withBlogCms = createCmsRoutingFactory({
 *   contentOptions: { includeSEO: true, includeAuthor: true },
 *   autoFetch: true,
 * });
 *
 * // Use the factory
 * const BlogPage = ({ title, cmsContent, isCmsRoute }) => {
 *   if (isCmsRoute && cmsContent) {
 *     return <div>CMS: {cmsContent.title}</div>;
 *   }
 *   return <div>Regular: {title}</div>;
 * };
 * export default withBlogCms(BlogPage);
 *
 * // Override specific options when needed
 * const SpecialBlogPage = ({ title }) => <div>{title}</div>;
 * export default withBlogCms(SpecialBlogPage, {
 *   autoFetch: false
 * });
 * ```
 */
export declare function createCmsRoutingFactory(defaultOptions: WithCmsRoutingOptions): <P extends object = {}>(WrappedComponent: ComponentType<P>, overrideOptions?: WithCmsRoutingOptions) => ComponentType<P>;
/**
 * Hook to access CMS routing state from within a component wrapped by withCmsRouting
 *
 * Note: When using withCmsRouting, CMS state is available directly as props.
 * This hook is provided for consistency but will warn and return default values.
 *
 * @returns CMS routing state including content, loading, and error information
 *
 * @example
 * ```tsx
 * function MyPageComponent({ cmsContent, isCmsRoute, cmsLoading, cmsError }) {
 *   // Access CMS state directly from props when using withCmsRouting
 *
 *   if (cmsLoading) {
 *     return <div>Loading CMS content...</div>;
 *   }
 *
 *   if (cmsError) {
 *     return <div>Error: {cmsError}</div>;
 *   }
 *
 *   if (isCmsRoute && cmsContent) {
 *     return <div>CMS: {cmsContent.title}</div>;
 *   }
 *
 *   return <div>Regular page content</div>;
 * }
 * ```
 */
export declare function useCmsRoutingContext(): CmsInjectedProps;
export default withCmsRouting;
//# sourceMappingURL=withCmsRouting.d.ts.map