@ffsm/factory/dist/compositor.d.ts

A powerful component factory for React that simplifies creation of reusable components with built-in support for composition patterns, conditional rendering, prop management, and TypeScript integration.

import { ElementType, ReactNode } from 'react';
import { FactoryOptions as BaseFactoryOptions, InitialProps, ObjectProps } from './types';
/**
 * Factory options for components with Compositor integration
 *
 * @template Element - The base element type
 * @template AdditionalProps - Additional props specific to the component
 */
export type FactoryOptions<Element extends ElementType, AdditionalProps extends ObjectProps> = BaseFactoryOptions<Element, AdditionalProps> & {
    /** Enable slot-based composition */
    asSlot?: boolean;
    /** Enable conditional rendering based on children */
    asNode?: boolean;
    /** Use strict falsy checking for asNode */
    asNodeFalsy?: boolean;
    /** Content to display when children are empty */
    emptyFallback?: ReactNode;
    /** Condition for conditional rendering */
    condition?: unknown;
    /** Content to display when condition is falsy */
    conditionFallback?: ReactNode;
    /** Use strict falsy checking for condition */
    conditionFalsy?: boolean;
};
/**
 * Creates a factory component with integrated Compositor features
 *
 * This factory function combines the standard factory component creation with
 * automatic integration of @ffsm/compositor components. While the basic factory
 * focuses on creating reusable UI components with dynamic props and forwarding,
 * this compositor-enabled version adds support for advanced UI patterns:
 *
 * - Conditional rendering via Condition component
 * - Empty state handling via Empty component
 * - Children-based conditional rendering via AsNode component
 * - Content projection via AsSlot component
 *
 * @template AdditionalProps - Additional props type that the factory component accepts
 * @template Element - The base element type, defaults to 'div'
 * @param {string} displayName - Display name for the component in React DevTools
 * @param {InitialProps<Element, AdditionalProps>} [init] - Initial props or props factory function
 * @param {FactoryOptions<Element, AdditionalProps>} [options={}] - Factory options including compositor features
 * @returns {ForwardRefExoticComponent<PropsWithoutRef<FactoryProps<Element, AdditionalProps>> & RefAttributes<Factory<Element>>>}
 *   A forward ref component with compositor integration
 *
 * @example
 * // Create a card with empty state
 * const Card = factory('Card',
 *   { className: 'card p-4' },
 *   { emptyFallback: <p>No content available</p> }
 * );
 *
 * @example
 * // Create a component that only renders when authenticated
 * const ProtectedArea = factory('ProtectedArea',
 *   { className: 'protected-area' },
 *   {
 *     condition: (props) => props.isAuthenticated,
 *     conditionFallback: <LoginPrompt />
 *   }
 * );
 *
 * @example
 * // Create a component with slot-based composition
 * const Dialog = factory('Dialog',
 *   { className: 'dialog' },
 *   {
 *     asSlot: true,
 *     outlet: <div className="dialog-content" />
 *   }
 * );
 *
 * @example
 * // Create a component that only renders when it has children
 * const Section = factory('Section',
 *   { className: 'section' },
 *   { asNode: true }
 * );
 */
export declare function factory<AdditionalProps extends ObjectProps, Element extends ElementType = 'div'>(displayName: string, init?: InitialProps<Element, AdditionalProps>, options?: FactoryOptions<Element, AdditionalProps>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<import("./types").FactoryProps<Element, AdditionalProps>> & import("react").RefAttributes<import("./types").Factory<Element>>>;