UNPKG

3.24 kBTypeScriptView Raw
1import { ComponentType, ReactNode } from 'react';
2export type StoryConfig<Props> = {
3 /**
4 * Used to divide the resulting examples into sections. It should correspond
5 * to an enumerated prop in the Component
6 */
7 sectionProp?: keyof Props;
8 /**
9 * Specifies the max number of examples that can exist in a single page
10 * within a section
11 */
12 maxExamplesPerPage?: number | ((sectionName: string) => number);
13 /**
14 * Specifies the total max number of examples. Default: 500
15 */
16 maxExamples?: number;
17 /**
18 * An object with keys that correspond to the component props. Each key has a
19 * corresponding value array. This array contains possible values for that prop.
20 */
21 propValues?: Partial<Record<keyof Props | string, any[]>>;
22 /**
23 * Prop keys to exclude from propValues. Useful when generating propValues with code.
24 */
25 excludeProps?: (keyof Props)[];
26 /**
27 * The values returned by this function are passed to the component.
28 * A function called with the prop combination for the current example. It
29 * returns an object of props that will be passed into the `renderExample`
30 * function as componentProps.
31 */
32 getComponentProps?: (props: Props & Record<string, any>) => Partial<Props>;
33 /**
34 * The values returned by this function are passed to a `View` that wraps the
35 * example.
36 * A function called with the prop combination for the current example. It
37 * returns an object of props that will be passed into the `renderExample`
38 * function as exampleProps.
39 */
40 getExampleProps?: (props: Props & Record<string, any>) => Record<string, any>;
41 /**
42 * A function called with the examples and index for the current page of
43 * examples. It returns an object of parameters/metadata for that page of
44 * examples (e.g. to be passed in to a visual regression tool like chromatic).
45 */
46 getParameters?: (params: ExamplesPage<Props>) => {
47 [key: string]: any;
48 delay?: number;
49 disable?: boolean;
50 };
51 filter?: (props: Props) => boolean;
52};
53type ExampleSection<Props> = {
54 sectionName: string;
55 propName: keyof Props;
56 propValue: string;
57 pages: ExamplesPage<Props>[];
58};
59export type ExamplesPage<Props> = {
60 examples: Example<Props>[];
61 index: number;
62 renderExample?: (exampleProps: Example<Props>) => ReactNode;
63 parameters?: Record<string, unknown>;
64};
65export type Example<Props> = {
66 Component: ComponentType;
67 componentProps: Partial<Props>;
68 exampleProps: Record<string, any>;
69 key: string;
70};
71/**
72 * Generates examples for the given component based on the given configuration.
73 * @param Component A React component
74 * @param config A configuration object (stored in xy.examples.jsx files in InstUI)
75 * @returns Array of examples broken into sections and pages if configured to do so.
76 * @module generateComponentExamples
77 * @private
78 *
79 */
80export declare function generateComponentExamples<Props extends Record<string, any>>(Component: ComponentType<any>, config: StoryConfig<Props>): ExampleSection<Props>[];
81export default generateComponentExamples;
82//# sourceMappingURL=generateComponentExamples.d.ts.map
\No newline at end of file