@instructure/ui-test-utils/types/utils/generateComponentExamples.d.ts

A UI testing library made by Instructure Inc.

import { ComponentType, ReactNode } from 'react';
export type StoryConfig<Props> = {
    /**
     * Used to divide the resulting examples into sections. It should correspond
     * to an enumerated prop in the Component
     */
    sectionProp?: keyof Props;
    /**
     * Specifies the max number of examples that can exist in a single page
     * within a section
     */
    maxExamplesPerPage?: number | ((sectionName: string) => number);
    /**
     * Specifies the total max number of examples. Default: 500
     */
    maxExamples?: number;
    /**
     * An object with keys that correspond to the component props. Each key has a
     * corresponding value array. This array contains possible values for that prop.
     */
    propValues?: Partial<Record<keyof Props | string, any[]>>;
    /**
     * Prop keys to exclude from propValues. Useful when generating propValues with code.
     */
    excludeProps?: (keyof Props)[];
    /**
     * The values returned by this function are passed to the component.
     * A function called with the prop combination for the current example. It
     * returns an object of props that will be passed into the `renderExample`
     * function as componentProps.
     */
    getComponentProps?: (props: Props & Record<string, any>) => Partial<Props>;
    /**
     * The values returned by this function are passed to a `View` that wraps the
     * example.
     * A function called with the prop combination for the current example. It
     * returns an object of props that will be passed into the `renderExample`
     * function as exampleProps.
     */
    getExampleProps?: (props: Props & Record<string, any>) => Record<string, any>;
    /**
     * A function called with the examples and index for the current page of
     * examples. It returns an object of parameters/metadata for that page of
     * examples (e.g. to be passed in to a visual regression tool like chromatic).
     */
    getParameters?: (params: ExamplesPage<Props>) => {
        [key: string]: any;
        delay?: number;
        disable?: boolean;
    };
    filter?: (props: Props) => boolean;
};
type ExampleSection<Props> = {
    sectionName: string;
    propName: keyof Props;
    propValue: string;
    pages: ExamplesPage<Props>[];
};
export type ExamplesPage<Props> = {
    examples: Example<Props>[];
    index: number;
    renderExample?: (exampleProps: Example<Props>) => ReactNode;
    parameters?: Record<string, unknown>;
};
export type Example<Props> = {
    Component: ComponentType;
    componentProps: Partial<Props>;
    exampleProps: Record<string, any>;
    key: string;
};
/**
 * Generates examples for the given component based on the given configuration.
 * @param Component A React component
 * @param config A configuration object (stored in xy.examples.jsx files in InstUI)
 * @returns Array of examples broken into sections and pages if configured to do so.
 * @module generateComponentExamples
 * @private
 *
 */
export declare function generateComponentExamples<Props extends Record<string, any>>(Component: ComponentType<any>, config: StoryConfig<Props>): ExampleSection<Props>[];
export default generateComponentExamples;
//# sourceMappingURL=generateComponentExamples.d.ts.map