@ffsm/factory/dist/factory.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, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
import { Factory, FactoryInitialProps, FactoryOptions, FactoryProps, ObjectProps } from './types';
/**
 * Creates a reusable factory component with customizable rendering.
 * Factory components support dynamic props, type-safe forwarding,
 * and customizable rendering through template functions.
 *
 * @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 {FactoryInitialProps<Element, AdditionalProps>} [init] - Initial props or props factory function
 * @param {FactoryOptions<ElementType, AdditionalProps>} [options={}] - Additional options for the factory
 * @returns {ForwardRefExoticComponent<PropsWithoutRef<FactoryProps<Element, AdditionalProps>> & RefAttributes<Factory<Element>>>}
 *   A forward ref component with the specified features
 *
 * @example
 * // Basic usage - create a Button component
 * const Button = factory('Button', {
 *   className: 'btn'
 * });
 *
 * @example
 * // With dynamic initialization
 * const Card = factory('Card', (props) => ({
 *   className: clsx('card', props.variant && `card-${props.variant}`)
 * }));
 *
 * @example
 * // With custom template for form field layout
 * const FormInput = factory(
 *   'FormInput',
 *   {
 *     as: 'input',
 *     className: 'form-control'
 *   },
 *   {
 *     template: (Component, props, initProps) => (
 *       <div className="form-group">
 *         {props.label && <label>{props.label}</label>}
 *         <Component {...props} />
 *         {props.error && <div className="error">{props.error}</div>}
 *       </div>
 *     )
 *   }
 * );
 *
 * @example
 * // Filtering props with options
 * const Link = factory(
 *   'Link',
 *   { as: 'a' },
 *   {
 *     excludeProps: ['isExternal'],
 *     template: (Component, props, initProps) => (
 *       <Component
 *         {...props}
 *         target={initProps.isExternal ? '_blank' : undefined}
 *         rel={initProps.isExternal ? 'noopener noreferrer' : undefined}
 *       />
 *     )
 *   }
 * );
 */
export declare function factory<AdditionalProps extends ObjectProps, Element extends ElementType = 'div'>(displayName: string, init?: FactoryInitialProps<Element, AdditionalProps>, options?: FactoryOptions<ElementType, AdditionalProps>): ForwardRefExoticComponent<PropsWithoutRef<FactoryProps<Element, AdditionalProps>> & RefAttributes<Factory<Element>>>;