UNPKG

8.35 kBTypeScriptView Raw
1/// <reference types="webpack-env" />
2import { HooksContext } from './hooks';
3import { Addon } from './index';
4export declare enum types {
5 TAB = "tab",
6 PANEL = "panel",
7 TOOL = "tool",
8 TOOLEXTRA = "toolextra",
9 PREVIEW = "preview",
10 NOTES_ELEMENT = "notes-element"
11}
12export declare type Types = types | string;
13export declare function isSupportedType(type: Types): boolean;
14export declare type StoryId = string;
15export declare type StoryKind = string;
16export declare type StoryName = string;
17export declare type ViewMode = 'story' | 'docs';
18export interface Parameters {
19 fileName?: string;
20 options?: OptionsParameter;
21 /** The layout property defines basic styles added to the preview body where the story is rendered. If you pass 'none', no styles are applied. */
22 layout?: 'centered' | 'fullscreen' | 'padded' | 'none';
23 docsOnly?: boolean;
24 [key: string]: any;
25}
26export interface Args {
27 [key: string]: any;
28}
29export interface ArgType {
30 name?: string;
31 description?: string;
32 defaultValue?: any;
33 [key: string]: any;
34}
35export interface ArgTypes {
36 [key: string]: ArgType;
37}
38export interface StoryIdentifier {
39 id: StoryId;
40 kind: StoryKind;
41 name: StoryName;
42}
43export declare type StoryContext = StoryIdentifier & {
44 [key: string]: any;
45 parameters: Parameters;
46 args: Args;
47 argTypes: ArgTypes;
48 globals: Args;
49 hooks?: HooksContext;
50 viewMode?: ViewMode;
51};
52export interface WrapperSettings {
53 options: OptionsParameter;
54 parameters: {
55 [key: string]: any;
56 };
57}
58export declare type Comparator<T> = ((a: T, b: T) => boolean) | ((a: T, b: T) => number);
59export declare type StorySortMethod = 'configure' | 'alphabetical';
60export interface StorySortObjectParameter {
61 method?: StorySortMethod;
62 order?: any[];
63 locales?: string;
64}
65export declare type StorySortComparator = Comparator<[StoryId, any, Parameters, Parameters]>;
66export declare type StorySortParameter = StorySortComparator | StorySortObjectParameter;
67export interface OptionsParameter extends Object {
68 storySort?: StorySortParameter;
69 theme?: {
70 base: string;
71 brandTitle?: string;
72 };
73 [key: string]: any;
74}
75export declare type StoryGetter = (context: StoryContext) => any;
76export declare type LegacyStoryFn<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
77export declare type ArgsStoryFn<ReturnType = unknown> = (a?: Args, p?: StoryContext) => ReturnType;
78export declare type StoryFn<ReturnType = unknown> = LegacyStoryFn<ReturnType> | ArgsStoryFn<ReturnType>;
79export declare type StoryWrapper = (getStory: StoryGetter, context: StoryContext, settings: WrapperSettings) => any;
80export declare type MakeDecoratorResult = (...args: any) => any;
81export interface AddStoryArgs<StoryFnReturnType = unknown> {
82 id: StoryId;
83 kind: StoryKind;
84 name: StoryName;
85 storyFn: StoryFn<StoryFnReturnType>;
86 parameters: Parameters;
87}
88export interface ClientApiAddon<StoryFnReturnType = unknown> extends Addon {
89 apply: (a: StoryApi<StoryFnReturnType>, b: any[]) => any;
90}
91export interface ClientApiAddons<StoryFnReturnType> {
92 [key: string]: ClientApiAddon<StoryFnReturnType>;
93}
94export declare type ClientApiReturnFn<StoryFnReturnType> = (...args: any[]) => StoryApi<StoryFnReturnType>;
95export interface StoryApi<StoryFnReturnType = unknown> {
96 kind: StoryKind;
97 add: (storyName: StoryName, storyFn: StoryFn<StoryFnReturnType>, parameters?: Parameters) => StoryApi<StoryFnReturnType>;
98 addDecorator: (decorator: DecoratorFunction<StoryFnReturnType>) => StoryApi<StoryFnReturnType>;
99 addLoader: (decorator: LoaderFunction) => StoryApi<StoryFnReturnType>;
100 addParameters: (parameters: Parameters) => StoryApi<StoryFnReturnType>;
101 [k: string]: string | ClientApiReturnFn<StoryFnReturnType>;
102}
103export declare type DecoratorFunction<StoryFnReturnType = unknown> = (fn: StoryFn<StoryFnReturnType>, c: StoryContext) => ReturnType<StoryFn<StoryFnReturnType>>;
104export declare type LoaderFunction = (c: StoryContext) => Promise<Record<string, any>>;
105export declare type DecorateStoryFunction<StoryFnReturnType = unknown> = (storyFn: StoryFn<StoryFnReturnType>, decorators: DecoratorFunction<StoryFnReturnType>[]) => StoryFn<StoryFnReturnType>;
106export interface ClientStoryApi<StoryFnReturnType = unknown> {
107 storiesOf(kind: StoryKind, module: NodeModule): StoryApi<StoryFnReturnType>;
108 addDecorator(decorator: DecoratorFunction<StoryFnReturnType>): StoryApi<StoryFnReturnType>;
109 addParameters(parameter: Parameters): StoryApi<StoryFnReturnType>;
110}
111declare type LoadFn = () => any;
112declare type RequireContext = any;
113export declare type Loadable = RequireContext | [RequireContext] | LoadFn;
114export declare type BaseDecorators<StoryFnReturnType> = Array<(story: () => StoryFnReturnType, context: StoryContext) => StoryFnReturnType>;
115export interface BaseAnnotations<Args, StoryFnReturnType> {
116 /**
117 * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
118 * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
119 */
120 args?: Partial<Args>;
121 /**
122 * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
123 * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
124 */
125 argTypes?: ArgTypes;
126 /**
127 * Custom metadata for a story.
128 * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters)
129 */
130 parameters?: Parameters;
131 /**
132 * Wrapper components or Storybook decorators that wrap a story.
133 *
134 * Decorators defined in Meta will be applied to every story variation.
135 * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
136 */
137 decorators?: BaseDecorators<StoryFnReturnType>;
138}
139export interface Annotations<Args, StoryFnReturnType> extends BaseAnnotations<Args, StoryFnReturnType> {
140 /**
141 * Used to only include certain named exports as stories. Useful when you want to have non-story exports such as mock data or ignore a few stories.
142 * @example
143 * includeStories: ['SimpleStory', 'ComplexStory']
144 * includeStories: /.*Story$/
145 *
146 * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
147 */
148 includeStories?: string[] | RegExp;
149 /**
150 * Used to exclude certain named exports. Useful when you want to have non-story exports such as mock data or ignore a few stories.
151 * @example
152 * excludeStories: ['simpleData', 'complexData']
153 * excludeStories: /.*Data$/
154 *
155 * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
156 */
157 excludeStories?: string[] | RegExp;
158}
159export interface BaseMeta<ComponentType> {
160 /**
161 * Title of the story which will be presented in the navigation. **Should be unique.**
162 *
163 * Stories can be organized in a nested structure using "/" as a separator.
164 *
165 * @example
166 * export default {
167 * ...
168 * title: 'Design System/Atoms/Button'
169 * }
170 *
171 * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
172 */
173 title: string;
174 /**
175 * The primary component for your story.
176 *
177 * Used by addons for automatic prop table generation and display of other component metadata.
178 */
179 component?: ComponentType;
180 /**
181 * Auxiliary subcomponents that are part of the stories.
182 *
183 * Used by addons for automatic prop table generation and display of other component metadata.
184 *
185 * @example
186 * import { Button, ButtonGroup } from './components';
187 *
188 * export default {
189 * ...
190 * subcomponents: { Button, ButtonGroup }
191 * }
192 *
193 * By defining them each component will have its tab in the args table.
194 */
195 subcomponents?: Record<string, ComponentType>;
196}
197export interface BaseStory<Args, StoryFnReturnType> {
198 (args: Args, context: StoryContext): StoryFnReturnType;
199 /**
200 * Override the display name in the UI
201 */
202 storyName?: string;
203}
204export {};