-
Notifications
You must be signed in to change notification settings - Fork 2k
/
types.ts
172 lines (150 loc) · 4.98 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import { StepperInternal } from '@automattic/data-stores';
import React from 'react';
/**
* This is the return type of useStepNavigation hook
*/
export type NavigationControls = {
/**
* Call this function if you want to go to the previous step.
*
* Please don't change the type of this function to add parameters. Passing data should strictly happen through the `submit` function.
* See why here: pdDR7T-KR-p2#steps-should-only-submit
*/
goBack?: () => void;
/**
* Call this function if you want to go to the proceed down the flow.
* @deprecated Avoid this method. Use submit() instead.
*/
goNext?: () => void;
/**
* Call this function if you want to jump to a certain step.
* @deprecated Avoid this method. Use submit() instead.
* If you need to skip forward several screens in
* a stepper flow, handle that logic in submit().
* If you need to navigate backwards, consider adding
* screen(s) to a new stepper flow and linking directly
* between flows/screens.
*/
goToStep?: ( step: string ) => void;
/**
* Submits the answers provided in the flow
*/
submit?: ( providedDependencies?: ProvidedDependencies, ...params: string[] ) => void;
/**
* Exits the flow and continue to the given path
*/
exitFlow?: ( to: string ) => void;
};
export type DeprecatedStepperStep = {
/**
* The step slug is what appears as part of the pathname. Eg the intro in /setup/link-in-bio/intro
*/
slug: string;
/**
* @deprecated Use asyncComponent instead. The component that will be rendered for this step. This variation is deprecated and will be removed in the future. Please use async loaded steps instead
*
* It should look like this: component: () => import( './internals/steps-repository/newsletter-setup' )
*/
component: React.FC< StepProps >;
};
export type AsyncStepperStep = {
/**
* The step slug is what appears as part of the pathname. Eg the intro in /setup/link-in-bio/intro
*/
slug: string;
/**
* The Async loaded component that will be rendered for this step
*
* It should look like this: component: () => import( './internals/steps-repository/newsletter-setup' )
*/
asyncComponent: () => Promise< { default: React.FC< StepProps > } >;
};
export type StepperStep = DeprecatedStepperStep | AsyncStepperStep;
export type Navigate< FlowSteps extends StepperStep[] > = (
stepName: FlowSteps[ number ][ 'slug' ] | `${ FlowSteps[ number ][ 'slug' ] }?${ string }`,
extraData?: any
) => void;
/**
* This is the return type of useSteps hook
*/
export type UseStepsHook = () => StepperStep[];
export type UseStepNavigationHook< FlowSteps extends StepperStep[] > = (
currentStepSlug: FlowSteps[ number ][ 'slug' ],
navigate: Navigate< FlowSteps >,
steps?: FlowSteps[ number ][ 'slug' ][]
) => NavigationControls;
export type UseAssertConditionsHook< FlowSteps extends StepperStep[] > = (
navigate?: Navigate< FlowSteps >
) => AssertConditionResult;
export type UseSideEffectHook< FlowSteps extends StepperStep[] > = (
currentStepSlug: FlowSteps[ number ][ 'slug' ],
navigate: Navigate< FlowSteps >
) => void;
export type Flow = {
name: string;
/**
* If this flow extends another flow, the variant slug will be added as a class name to the root element of the flow.
*/
variantSlug?: string;
title?: string;
classnames?: string | [ string ];
useSteps: UseStepsHook;
useStepNavigation: UseStepNavigationHook< ReturnType< Flow[ 'useSteps' ] > >;
useAssertConditions?: UseAssertConditionsHook< ReturnType< Flow[ 'useSteps' ] > >;
/**
* A hook that is called in the flow's root at every render. You can use this hook to setup side-effects, call other hooks, etc..
*/
useSideEffect?: UseSideEffectHook< ReturnType< Flow[ 'useSteps' ] > >;
trackingConfig?: {
/**
* Should signup start be tracked at the start of the flow
*/
isRecordSignupStart: boolean;
/**
* Should signup complete be tracked at the end of the flow
*/
isRecordSignupComplete: boolean;
/**
* Supply additional event props to the `calypso_signup_start` event
*/
signupStartProps?: Record< string, string | number >;
/**
* Supply additional event props to the `calypso_signup_complete` event
*/
signupCompleteProps?: Record< string, string | number >;
};
};
export type StepProps = {
navigation: NavigationControls;
stepName: string;
flow: string;
/**
* If this is a step of a flow that extends another, pass the variantSlug of the variant flow, it can come handy.
*/
variantSlug?: string;
data?: StepperInternal.State[ 'stepData' ];
children?: React.ReactNode;
};
export type Step = React.FC< StepProps >;
export type ProvidedDependencies = Record< string, unknown >;
export enum AssertConditionState {
SUCCESS = 'success',
FAILURE = 'failure',
CHECKING = 'checking',
}
export type AssertConditionResult = {
state: AssertConditionState;
message?: string;
};
export interface Plugin {
slug: string;
active: boolean;
}
export interface PluginsResponse {
plugins: Plugin[];
}
export interface FailureInfo {
type: string;
code: number | string;
error: string;
}