@plasmicapp/host 1.0.136 → 1.0.140
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/exports.d.ts +2 -1
- package/dist/fetcher.d.ts +1 -1
- package/dist/host.esm.js +1 -1
- package/dist/host.esm.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/prop-types.d.ts +388 -0
- package/dist/registerComponent.d.ts +2 -368
- package/dist/registerGlobalContext.d.ts +4 -3
- package/dist/version.d.ts +1 -1
- package/package.json +2 -2
- package/registerComponent/dist/canvas-host.d.ts +41 -0
- package/registerComponent/dist/common.d.ts +1 -0
- package/registerComponent/dist/data.d.ts +43 -0
- package/registerComponent/dist/exports.d.ts +11 -0
- package/registerComponent/dist/fetcher.d.ts +40 -0
- package/registerComponent/dist/global-actions.d.ts +9 -0
- package/registerComponent/dist/index.cjs.js.map +1 -1
- package/registerComponent/dist/index.d.ts +1 -0
- package/registerComponent/dist/index.esm.js.map +1 -1
- package/registerComponent/dist/lang-utils.d.ts +3 -0
- package/registerComponent/dist/prop-types.d.ts +388 -0
- package/registerComponent/dist/registerComponent.d.ts +2 -368
- package/registerComponent/dist/registerGlobalContext.d.ts +76 -0
- package/registerComponent/dist/registerToken.d.ts +13 -0
- package/registerComponent/dist/registerTrait.d.ts +20 -0
- package/registerComponent/dist/repeatedElement.d.ts +15 -0
- package/registerComponent/dist/useForceUpdate.d.ts +1 -0
- package/registerComponent/dist/version.d.ts +1 -0
- package/registerGlobalContext/dist/canvas-host.d.ts +41 -0
- package/registerGlobalContext/dist/common.d.ts +1 -0
- package/registerGlobalContext/dist/data.d.ts +43 -0
- package/registerGlobalContext/dist/exports.d.ts +11 -0
- package/registerGlobalContext/dist/fetcher.d.ts +40 -0
- package/registerGlobalContext/dist/global-actions.d.ts +9 -0
- package/registerGlobalContext/dist/index.cjs.js.map +1 -1
- package/registerGlobalContext/dist/index.d.ts +1 -0
- package/registerGlobalContext/dist/index.esm.js.map +1 -1
- package/registerGlobalContext/dist/lang-utils.d.ts +3 -0
- package/registerGlobalContext/dist/prop-types.d.ts +388 -0
- package/registerGlobalContext/dist/registerComponent.d.ts +2 -368
- package/registerGlobalContext/dist/registerGlobalContext.d.ts +4 -3
- package/registerGlobalContext/dist/registerToken.d.ts +13 -0
- package/registerGlobalContext/dist/registerTrait.d.ts +20 -0
- package/registerGlobalContext/dist/repeatedElement.d.ts +15 -0
- package/registerGlobalContext/dist/useForceUpdate.d.ts +1 -0
- package/registerGlobalContext/dist/version.d.ts +1 -0
- package/registerToken/dist/canvas-host.d.ts +41 -0
- package/registerToken/dist/common.d.ts +1 -0
- package/registerToken/dist/data.d.ts +43 -0
- package/registerToken/dist/element-types.d.ts +115 -0
- package/registerToken/dist/exports.d.ts +11 -0
- package/registerToken/dist/fetcher.d.ts +40 -0
- package/registerToken/dist/global-actions.d.ts +9 -0
- package/registerToken/dist/index.d.ts +1 -0
- package/registerToken/dist/lang-utils.d.ts +3 -0
- package/registerToken/dist/prop-types.d.ts +388 -0
- package/registerToken/dist/registerComponent.d.ts +231 -0
- package/registerToken/dist/registerGlobalContext.d.ts +76 -0
- package/registerToken/dist/registerTrait.d.ts +20 -0
- package/registerToken/dist/repeatedElement.d.ts +15 -0
- package/registerToken/dist/useForceUpdate.d.ts +1 -0
- package/registerToken/dist/version.d.ts +1 -0
- package/registerTrait/dist/canvas-host.d.ts +41 -0
- package/registerTrait/dist/common.d.ts +1 -0
- package/registerTrait/dist/data.d.ts +43 -0
- package/registerTrait/dist/element-types.d.ts +115 -0
- package/registerTrait/dist/exports.d.ts +11 -0
- package/registerTrait/dist/fetcher.d.ts +40 -0
- package/registerTrait/dist/global-actions.d.ts +9 -0
- package/registerTrait/dist/index.d.ts +1 -0
- package/registerTrait/dist/lang-utils.d.ts +3 -0
- package/registerTrait/dist/prop-types.d.ts +388 -0
- package/registerTrait/dist/registerComponent.d.ts +231 -0
- package/registerTrait/dist/registerGlobalContext.d.ts +76 -0
- package/registerTrait/dist/registerToken.d.ts +13 -0
- package/registerTrait/dist/repeatedElement.d.ts +15 -0
- package/registerTrait/dist/useForceUpdate.d.ts +1 -0
- package/registerTrait/dist/version.d.ts +1 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { PrimitiveType } from "./prop-types";
|
|
2
|
+
export type Fetcher = (...args: any[]) => Promise<any>;
|
|
3
|
+
export interface FetcherMeta {
|
|
4
|
+
/**
|
|
5
|
+
* Any unique identifying string for this fetcher.
|
|
6
|
+
*/
|
|
7
|
+
name: string;
|
|
8
|
+
/**
|
|
9
|
+
* The Studio-user-friendly display name.
|
|
10
|
+
*/
|
|
11
|
+
displayName?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The symbol to import from the importPath.
|
|
14
|
+
*/
|
|
15
|
+
importName?: string;
|
|
16
|
+
args: {
|
|
17
|
+
name: string;
|
|
18
|
+
type: PrimitiveType;
|
|
19
|
+
}[];
|
|
20
|
+
returns: PrimitiveType;
|
|
21
|
+
/**
|
|
22
|
+
* Either the path to the fetcher relative to `rootDir` or the npm
|
|
23
|
+
* package name
|
|
24
|
+
*/
|
|
25
|
+
importPath: string;
|
|
26
|
+
/**
|
|
27
|
+
* Whether it's a default export or named export
|
|
28
|
+
*/
|
|
29
|
+
isDefaultExport?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export interface FetcherRegistration {
|
|
32
|
+
fetcher: Fetcher;
|
|
33
|
+
meta: FetcherMeta;
|
|
34
|
+
}
|
|
35
|
+
declare global {
|
|
36
|
+
interface Window {
|
|
37
|
+
__PlasmicFetcherRegistry: FetcherRegistration[];
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
export declare function registerFetcher(fetcher: Fetcher, meta: FetcherMeta): void;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type GlobalActionDict = Record<string, Function>;
|
|
3
|
+
export declare const GlobalActionsContext: React.Context<GlobalActionDict | undefined>;
|
|
4
|
+
export declare function GlobalActionsProvider(props: {
|
|
5
|
+
contextName: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
actions: GlobalActionDict;
|
|
8
|
+
}): JSX.Element;
|
|
9
|
+
export declare function useGlobalActions(): GlobalActionDict;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./exports";
|
|
@@ -0,0 +1,388 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CSSProperties, PlasmicElement } from "./element-types";
|
|
3
|
+
import { StyleSection } from "./registerComponent";
|
|
4
|
+
export interface CanvasComponentProps<Data = any> {
|
|
5
|
+
/**
|
|
6
|
+
* This prop is only provided within the canvas of Plasmic Studio.
|
|
7
|
+
* Allows the component to set data to be consumed by the props' controls.
|
|
8
|
+
*/
|
|
9
|
+
setControlContextData?: (data: Data) => void;
|
|
10
|
+
}
|
|
11
|
+
export type ControlExtras = {
|
|
12
|
+
path: (string | number)[];
|
|
13
|
+
item?: any;
|
|
14
|
+
};
|
|
15
|
+
export type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
|
|
16
|
+
/**
|
|
17
|
+
* Context that we pass back to control functions.
|
|
18
|
+
*/
|
|
19
|
+
export type ControlContext<P> = [
|
|
20
|
+
/**
|
|
21
|
+
* props
|
|
22
|
+
*/
|
|
23
|
+
P,
|
|
24
|
+
/**
|
|
25
|
+
* `contextData` can be `null` if the prop controls are rendering before
|
|
26
|
+
* the component instance itself (it will re-render once the component
|
|
27
|
+
* calls `setControlContextData`)
|
|
28
|
+
*/
|
|
29
|
+
InferDataType<P> | null,
|
|
30
|
+
/**
|
|
31
|
+
* Extra information for the control to use
|
|
32
|
+
*/
|
|
33
|
+
ControlExtras
|
|
34
|
+
];
|
|
35
|
+
/**
|
|
36
|
+
* Config option that takes the context (e.g., props) of the component instance
|
|
37
|
+
* to dynamically set its value.
|
|
38
|
+
*/
|
|
39
|
+
export type ContextDependentConfig<P, R> = (...args: ControlContext<P>) => R;
|
|
40
|
+
export interface PropTypeBase<P> {
|
|
41
|
+
displayName?: string;
|
|
42
|
+
description?: string;
|
|
43
|
+
helpText?: string;
|
|
44
|
+
/**
|
|
45
|
+
* If the user has chosen to use a dynamic expression for this prop, provide
|
|
46
|
+
* a hint as to the expected values that the expression should evaluate to.
|
|
47
|
+
* This hint will be displayed alongside the code editor. You may use
|
|
48
|
+
* markdown in the text here.
|
|
49
|
+
*/
|
|
50
|
+
exprHint?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Function for whether this prop should be hidden in the right panel,
|
|
53
|
+
* given the current props for this component
|
|
54
|
+
*/
|
|
55
|
+
hidden?: ContextDependentConfig<P, boolean>;
|
|
56
|
+
readOnly?: boolean | ContextDependentConfig<P, boolean>;
|
|
57
|
+
/**
|
|
58
|
+
* If true, will hide the prop in a collapsed section; good for props that
|
|
59
|
+
* should not usually be used.
|
|
60
|
+
*/
|
|
61
|
+
advanced?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* If true, does not allow the user to use a dynamic expression for this prop
|
|
64
|
+
*/
|
|
65
|
+
disableDynamicValue?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* If set to true, the component will be remounted when the prop value is updated.
|
|
68
|
+
* (This behavior only applies to canvas)
|
|
69
|
+
*/
|
|
70
|
+
forceRemount?: boolean;
|
|
71
|
+
}
|
|
72
|
+
interface Defaultable<P, T> {
|
|
73
|
+
/**
|
|
74
|
+
* Default value to set for this prop when the component is instantiated
|
|
75
|
+
*/
|
|
76
|
+
defaultValue?: T;
|
|
77
|
+
/**
|
|
78
|
+
* If no prop is given, the component uses a default; specify whaat
|
|
79
|
+
* that default is so the Plasmic user can see it in the studio UI
|
|
80
|
+
*/
|
|
81
|
+
defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
|
|
82
|
+
/**
|
|
83
|
+
* Use a dynamic value expression as the default instead
|
|
84
|
+
*/
|
|
85
|
+
defaultExpr?: string;
|
|
86
|
+
defaultExprHint?: string;
|
|
87
|
+
}
|
|
88
|
+
interface Controllable {
|
|
89
|
+
/**
|
|
90
|
+
* If true, this is a prop that should only be used inside Plasmic
|
|
91
|
+
* Studio for rendering artboards; will not be actually used in
|
|
92
|
+
* generated code.
|
|
93
|
+
*/
|
|
94
|
+
editOnly?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* If specified, the value used for this prop will instead be
|
|
97
|
+
* mapped to the uncontrolledProp when generating code. This is
|
|
98
|
+
* useful if, for example, in the artboard, you want to use `value`
|
|
99
|
+
* prop to control the component, but in generated code, you want to
|
|
100
|
+
* map it to `defaultValue`.
|
|
101
|
+
*/
|
|
102
|
+
uncontrolledProp?: string;
|
|
103
|
+
}
|
|
104
|
+
interface PropTypeBaseDefault<P, T> extends PropTypeBase<P>, Defaultable<P, T>, Controllable {
|
|
105
|
+
}
|
|
106
|
+
interface PlainStringType<P> extends PropTypeBaseDefault<P, string> {
|
|
107
|
+
type: "string";
|
|
108
|
+
control?: "default" | "large";
|
|
109
|
+
}
|
|
110
|
+
interface CodeStringType<P> extends PropTypeBaseDefault<P, string> {
|
|
111
|
+
type: "code";
|
|
112
|
+
lang: "css" | "html" | "javascript" | "json";
|
|
113
|
+
}
|
|
114
|
+
interface RichTextType<P> extends PropTypeBaseDefault<P, string> {
|
|
115
|
+
type: "richText";
|
|
116
|
+
}
|
|
117
|
+
interface ColorType<P> extends PropTypeBaseDefault<P, string> {
|
|
118
|
+
type: "color";
|
|
119
|
+
/**
|
|
120
|
+
* If specified, and the user picks a color token in the Studio, then
|
|
121
|
+
* the value passed in as prop is a css variable reference, like
|
|
122
|
+
* `var(--TOKEN_ID)`, instead of the resolved hex value of the token.
|
|
123
|
+
* You should take care in using this in the proper css context --
|
|
124
|
+
* the css token is only defined if you are rendering under some
|
|
125
|
+
* Plasmic component in the DOM tree, which is usually the case,
|
|
126
|
+
* unless you are using a React portal.
|
|
127
|
+
*/
|
|
128
|
+
keepCssVar?: boolean;
|
|
129
|
+
}
|
|
130
|
+
interface ClassType<P> extends PropTypeBase<P> {
|
|
131
|
+
type: "class";
|
|
132
|
+
/**
|
|
133
|
+
* Additional css selectors that can change how this style should look.
|
|
134
|
+
* Some examples:
|
|
135
|
+
*
|
|
136
|
+
* * `:hover` -- on hover
|
|
137
|
+
* * `[data-something="blah"] -- when the element with this class has
|
|
138
|
+
* an html attribute "data-something=blah"
|
|
139
|
+
* * :component[data-something="blah"] :self -- when the root of the
|
|
140
|
+
* component has an html attribute "data-something=blah". Note that
|
|
141
|
+
* the non-standard `:component` selector is used to select the
|
|
142
|
+
* component root, and the non-standard `:self` selector is used
|
|
143
|
+
* to select the element that this class is attached to.
|
|
144
|
+
*/
|
|
145
|
+
selectors?: {
|
|
146
|
+
/**
|
|
147
|
+
* A css selector, like `:hover` or `[data-something="blah"]`.
|
|
148
|
+
*/
|
|
149
|
+
selector: string;
|
|
150
|
+
/**
|
|
151
|
+
* An optional human-friendly label for the selector, so the studio user
|
|
152
|
+
* knows what this selector means.
|
|
153
|
+
*/
|
|
154
|
+
label?: string;
|
|
155
|
+
}[];
|
|
156
|
+
/**
|
|
157
|
+
* If specified, then only shows these style sections for styling this class
|
|
158
|
+
*/
|
|
159
|
+
styleSections?: StyleSection[];
|
|
160
|
+
}
|
|
161
|
+
interface ThemeResetClassType<P> extends PropTypeBase<P> {
|
|
162
|
+
type: "themeResetClass";
|
|
163
|
+
/**
|
|
164
|
+
* Normally, theme reset class will only target Plasmic-generated tags
|
|
165
|
+
* with the default tag styles. If you also want to target non-Plasmic-generated
|
|
166
|
+
* tags (say, rendered by your code components, or fetched as an HTML blob
|
|
167
|
+
* from somewhere), then specify `true` here.
|
|
168
|
+
*/
|
|
169
|
+
targetAllTags?: boolean;
|
|
170
|
+
}
|
|
171
|
+
interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
|
|
172
|
+
type: "cardPicker";
|
|
173
|
+
modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
|
|
174
|
+
options: {
|
|
175
|
+
value: string;
|
|
176
|
+
label?: string;
|
|
177
|
+
imgUrl: string;
|
|
178
|
+
footer?: React.ReactNode;
|
|
179
|
+
}[] | ContextDependentConfig<P, {
|
|
180
|
+
value: string;
|
|
181
|
+
label?: string;
|
|
182
|
+
imgUrl: string;
|
|
183
|
+
footer?: React.ReactNode;
|
|
184
|
+
}[]>;
|
|
185
|
+
showInput?: boolean | ContextDependentConfig<P, boolean>;
|
|
186
|
+
onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
|
|
187
|
+
}
|
|
188
|
+
type RichStringType<P> = PlainStringType<P> | CodeStringType<P> | RichTextType<P> | ColorType<P> | ClassType<P> | ThemeResetClassType<P> | CardPickerType<P>;
|
|
189
|
+
export type StringType<P> = "string" | RichStringType<P>;
|
|
190
|
+
interface RichBooleanType<P> extends PropTypeBaseDefault<P, boolean> {
|
|
191
|
+
type: "boolean";
|
|
192
|
+
}
|
|
193
|
+
export type BooleanType<P> = "boolean" | RichBooleanType<P>;
|
|
194
|
+
type GraphQLValue = {
|
|
195
|
+
query: string;
|
|
196
|
+
variables?: Record<string, any>;
|
|
197
|
+
};
|
|
198
|
+
interface GraphQLType<P> extends PropTypeBaseDefault<P, GraphQLValue> {
|
|
199
|
+
type: "code";
|
|
200
|
+
lang: "graphql";
|
|
201
|
+
endpoint: string | ContextDependentConfig<P, string>;
|
|
202
|
+
method?: string | ContextDependentConfig<P, string>;
|
|
203
|
+
headers?: object | ContextDependentConfig<P, object>;
|
|
204
|
+
}
|
|
205
|
+
interface NumberTypeBase<P> extends PropTypeBaseDefault<P, number> {
|
|
206
|
+
type: "number";
|
|
207
|
+
min?: number | ContextDependentConfig<P, number>;
|
|
208
|
+
max?: number | ContextDependentConfig<P, number>;
|
|
209
|
+
}
|
|
210
|
+
interface PlainNumberType<P> extends NumberTypeBase<P> {
|
|
211
|
+
control?: "default";
|
|
212
|
+
}
|
|
213
|
+
interface SliderNumberType<P> extends NumberTypeBase<P> {
|
|
214
|
+
control: "slider";
|
|
215
|
+
step?: number | ContextDependentConfig<P, number>;
|
|
216
|
+
}
|
|
217
|
+
type RichNumberType<P> = PlainNumberType<P> | SliderNumberType<P>;
|
|
218
|
+
export type NumberType<P> = "number" | RichNumberType<P>;
|
|
219
|
+
interface ObjectType<P> extends PropTypeBaseDefault<P, Record<string, any>> {
|
|
220
|
+
type: "object";
|
|
221
|
+
fields?: Record<string, PropType<P>>;
|
|
222
|
+
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
|
|
223
|
+
}
|
|
224
|
+
interface ArrayType<P> extends PropTypeBaseDefault<P, any[]> {
|
|
225
|
+
type: "array";
|
|
226
|
+
itemType?: ObjectType<P>;
|
|
227
|
+
/**
|
|
228
|
+
* Optional function that determines whether the user can delete a given item.
|
|
229
|
+
*/
|
|
230
|
+
unstable__canDelete?: (item: any, ...args: ControlContext<P>) => boolean;
|
|
231
|
+
/**
|
|
232
|
+
* Specify how to let Plasmic know how to update its own internal representation of the data when the value has
|
|
233
|
+
* changed, or when issuing a minimalValue or shownValue that is different.
|
|
234
|
+
*
|
|
235
|
+
* Important to specify this if you are expecting any nested expression values in this data type!
|
|
236
|
+
*/
|
|
237
|
+
unstable__keyFunc?: (item: any) => any;
|
|
238
|
+
/**
|
|
239
|
+
* Specify what would be the tentative new value that is set if the user makes any changes.
|
|
240
|
+
*
|
|
241
|
+
* Useful for field mappings.
|
|
242
|
+
*
|
|
243
|
+
* For instance, consider a Table where we have a `fields` prop:
|
|
244
|
+
*
|
|
245
|
+
* - Initially, the value is undefined. But if the user makes any changes, we would want to save an array of at
|
|
246
|
+
* least three items (corresponding to, say, three columns inferred from a schema).
|
|
247
|
+
*
|
|
248
|
+
* - Let's say there are 5 columns in the value. The data schema changes, removing a column and adding two new
|
|
249
|
+
* ones. Now we would want a different minimal value, containing 6 items.
|
|
250
|
+
*/
|
|
251
|
+
unstable__minimalValue?: ContextDependentConfig<P, any>;
|
|
252
|
+
}
|
|
253
|
+
export type JSONLikeType<P> = "object" | ObjectType<P> | ArrayType<P>;
|
|
254
|
+
export interface DataSourceType<P> extends PropTypeBase<P> {
|
|
255
|
+
type: "dataSource";
|
|
256
|
+
dataSource: "airtable" | "cms";
|
|
257
|
+
}
|
|
258
|
+
type DataPickerValueType = string | number | (string | number)[];
|
|
259
|
+
interface DataPickerType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
|
|
260
|
+
type: "dataSelector";
|
|
261
|
+
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
|
|
262
|
+
alwaysShowValuePathAsLabel?: boolean;
|
|
263
|
+
}
|
|
264
|
+
interface ExprEditorType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
|
|
265
|
+
type: "exprEditor";
|
|
266
|
+
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
|
|
267
|
+
}
|
|
268
|
+
interface FormValidationRulesType<P> extends PropTypeBaseDefault<P, any> {
|
|
269
|
+
type: "formValidationRules";
|
|
270
|
+
}
|
|
271
|
+
interface EventHandlerType<P> extends PropTypeBase<P> {
|
|
272
|
+
type: "eventHandler";
|
|
273
|
+
argTypes: {
|
|
274
|
+
name: string;
|
|
275
|
+
type: PropType<any>;
|
|
276
|
+
}[];
|
|
277
|
+
}
|
|
278
|
+
interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
|
|
279
|
+
type: "choice";
|
|
280
|
+
options: string[] | {
|
|
281
|
+
label: string;
|
|
282
|
+
value: string | number | boolean;
|
|
283
|
+
}[] | ContextDependentConfig<P, string[] | {
|
|
284
|
+
label: string;
|
|
285
|
+
value: string | number | boolean;
|
|
286
|
+
}[]>;
|
|
287
|
+
allowSearch?: boolean;
|
|
288
|
+
filterOption?: boolean;
|
|
289
|
+
onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
|
|
290
|
+
}
|
|
291
|
+
interface SingleChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean> {
|
|
292
|
+
multiSelect?: false;
|
|
293
|
+
}
|
|
294
|
+
interface MultiChoiceType<P> extends ChoiceTypeBase<P, (string | number | boolean)[]> {
|
|
295
|
+
multiSelect: true;
|
|
296
|
+
}
|
|
297
|
+
interface CustomChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean | (string | number | boolean)[]> {
|
|
298
|
+
multiSelect: ContextDependentConfig<P, boolean>;
|
|
299
|
+
}
|
|
300
|
+
export type ChoiceType<P> = SingleChoiceType<P> | MultiChoiceType<P> | CustomChoiceType<P>;
|
|
301
|
+
interface RichSlotType<P> {
|
|
302
|
+
type: "slot";
|
|
303
|
+
/**
|
|
304
|
+
* The unique names of all code components that can be placed in the slot
|
|
305
|
+
*/
|
|
306
|
+
allowedComponents?: string[];
|
|
307
|
+
/**
|
|
308
|
+
* Whether the "empty slot" placeholder should be hidden in the canvas.
|
|
309
|
+
*/
|
|
310
|
+
hidePlaceholder?: boolean;
|
|
311
|
+
/**
|
|
312
|
+
* Whether the slot is repeated, i.e., is rendered multiple times using
|
|
313
|
+
* repeatedElement().
|
|
314
|
+
*/
|
|
315
|
+
isRepeated?: boolean;
|
|
316
|
+
/**
|
|
317
|
+
* A nicer, human-readable display name for your slot prop
|
|
318
|
+
*/
|
|
319
|
+
displayName?: string;
|
|
320
|
+
/**
|
|
321
|
+
* Function for whether this slot should be hidden from the left tree,
|
|
322
|
+
* given the current props for this component
|
|
323
|
+
*/
|
|
324
|
+
hidden?: ContextDependentConfig<P, boolean>;
|
|
325
|
+
/**
|
|
326
|
+
* If slot is a render prop (accepts a function that takes in some
|
|
327
|
+
* arguments and returns some JSX), then specify the names of the
|
|
328
|
+
* arguments expected by the render prop function.
|
|
329
|
+
*/
|
|
330
|
+
renderPropParams?: string[];
|
|
331
|
+
/**
|
|
332
|
+
* When inserting top-level "page sections", should this slot be the default target?
|
|
333
|
+
*/
|
|
334
|
+
unstable__isMainContentSlot?: boolean;
|
|
335
|
+
defaultValue?: PlasmicElement | PlasmicElement[];
|
|
336
|
+
}
|
|
337
|
+
type SlotType<P> = "slot" | RichSlotType<P>;
|
|
338
|
+
interface RichImageUrlType<P> extends PropTypeBaseDefault<P, string> {
|
|
339
|
+
type: "imageUrl";
|
|
340
|
+
}
|
|
341
|
+
type ImageUrlType<P> = "imageUrl" | RichImageUrlType<P>;
|
|
342
|
+
export interface ModalProps {
|
|
343
|
+
show?: boolean;
|
|
344
|
+
children?: React.ReactNode;
|
|
345
|
+
onClose: () => void;
|
|
346
|
+
style?: CSSProperties;
|
|
347
|
+
}
|
|
348
|
+
interface CustomControlProps<P> {
|
|
349
|
+
componentProps: P;
|
|
350
|
+
/**
|
|
351
|
+
* `contextData` can be `null` if the prop controls are rendering before
|
|
352
|
+
* the component instance itself (it will re-render once the component
|
|
353
|
+
* calls `setControlContextData`)
|
|
354
|
+
*/
|
|
355
|
+
contextData: InferDataType<P> | null;
|
|
356
|
+
value: any;
|
|
357
|
+
/**
|
|
358
|
+
* Sets the value to be passed to the prop. Expects a JSON-compatible value.
|
|
359
|
+
*/
|
|
360
|
+
updateValue: (newVal: any) => void;
|
|
361
|
+
/**
|
|
362
|
+
* Full screen modal component
|
|
363
|
+
*/
|
|
364
|
+
FullscreenModal: React.ComponentType<ModalProps>;
|
|
365
|
+
/**
|
|
366
|
+
* Modal component for the side pane
|
|
367
|
+
*/
|
|
368
|
+
SideModal: React.ComponentType<ModalProps>;
|
|
369
|
+
/**
|
|
370
|
+
* The document that the component will be rendered into; instead of using
|
|
371
|
+
* `document` directly (for, say, `document.querySelector()` etc.), you
|
|
372
|
+
* should use this instead.
|
|
373
|
+
*/
|
|
374
|
+
studioDocument: typeof document;
|
|
375
|
+
}
|
|
376
|
+
type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;
|
|
377
|
+
interface RichCustomType<P> extends PropTypeBaseDefault<P, any> {
|
|
378
|
+
type: "custom";
|
|
379
|
+
control: CustomControl<P>;
|
|
380
|
+
}
|
|
381
|
+
export type CustomType<P> = RichCustomType<P> | CustomControl<P>;
|
|
382
|
+
export type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
|
|
383
|
+
export type PropType<P> = StringType<P> | BooleanType<P> | GraphQLType<P> | NumberType<P> | JSONLikeType<P> | DataSourceType<P> | DataPickerType<P> | ExprEditorType<P> | FormValidationRulesType<P> | EventHandlerType<P> | ChoiceType<P> | CustomType<P> | ImageUrlType<P> | SlotType<P>;
|
|
384
|
+
type StringCompatType<P> = StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>;
|
|
385
|
+
type BoolCompatType<P> = BooleanType<P> | CustomType<P> | DataPickerType<P>;
|
|
386
|
+
type NumberCompatType<P> = NumberType<P> | CustomType<P> | DataPickerType<P>;
|
|
387
|
+
export type RestrictPropType<T, P> = T extends string ? StringCompatType<P> : T extends boolean ? BoolCompatType<P> : T extends number ? NumberCompatType<P> : PropType<P>;
|
|
388
|
+
export {};
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CodeComponentElement, CSSProperties, PlasmicElement } from "./element-types";
|
|
3
|
+
import { ContextDependentConfig, InferDataType, ModalProps, PropType, RestrictPropType } from "./prop-types";
|
|
4
|
+
export type { CanvasComponentProps, ControlExtras, ControlContext, ContextDependentConfig, PropType, } from "./prop-types";
|
|
5
|
+
export interface ActionProps<P> {
|
|
6
|
+
componentProps: P;
|
|
7
|
+
/**
|
|
8
|
+
* `contextData` can be `null` if the prop controls are rendering before
|
|
9
|
+
* the component instance itself (it will re-render once the component
|
|
10
|
+
* calls `setControlContextData`)
|
|
11
|
+
*/
|
|
12
|
+
contextData: InferDataType<P> | null;
|
|
13
|
+
studioOps: {
|
|
14
|
+
showModal: (modalProps: Omit<ModalProps, "onClose"> & {
|
|
15
|
+
onClose?: () => void;
|
|
16
|
+
}) => void;
|
|
17
|
+
refreshQueryData: () => void;
|
|
18
|
+
appendToSlot: (element: PlasmicElement, slotName: string) => void;
|
|
19
|
+
removeFromSlotAt: (pos: number, slotName: string) => void;
|
|
20
|
+
updateProps: (newValues: any) => void;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* The document that the component will be rendered into; instead of using
|
|
24
|
+
* `document` directly (for, say, `document.querySelector()` etc.), you
|
|
25
|
+
* should use this instead.
|
|
26
|
+
*/
|
|
27
|
+
studioDocument: typeof document;
|
|
28
|
+
}
|
|
29
|
+
export type Action<P> = {
|
|
30
|
+
type: "button-action";
|
|
31
|
+
label: string;
|
|
32
|
+
onClick: (props: ActionProps<P>) => void;
|
|
33
|
+
hidden?: ContextDependentConfig<P, boolean>;
|
|
34
|
+
} | {
|
|
35
|
+
type: "custom-action";
|
|
36
|
+
control: React.ComponentType<ActionProps<P>>;
|
|
37
|
+
hidden?: ContextDependentConfig<P, boolean>;
|
|
38
|
+
};
|
|
39
|
+
type DistributedKeyOf<T> = T extends any ? keyof T : never;
|
|
40
|
+
interface ComponentTemplate<P> extends Omit<CodeComponentElement<P>, "type" | "name"> {
|
|
41
|
+
/**
|
|
42
|
+
* A preview picture for the template.
|
|
43
|
+
*/
|
|
44
|
+
previewImg?: string;
|
|
45
|
+
}
|
|
46
|
+
export interface ComponentTemplates<P> {
|
|
47
|
+
[name: string]: ComponentTemplate<P>;
|
|
48
|
+
}
|
|
49
|
+
export type StateSpec = {
|
|
50
|
+
onChangeProp: string;
|
|
51
|
+
} & ({
|
|
52
|
+
type: "readonly";
|
|
53
|
+
variableType: "text";
|
|
54
|
+
initVal?: string;
|
|
55
|
+
} | {
|
|
56
|
+
type: "readonly";
|
|
57
|
+
variableType: "number";
|
|
58
|
+
initVal?: number;
|
|
59
|
+
} | {
|
|
60
|
+
type: "readonly";
|
|
61
|
+
variableType: "boolean";
|
|
62
|
+
initVal?: boolean;
|
|
63
|
+
} | {
|
|
64
|
+
type: "readonly";
|
|
65
|
+
variableType: "array";
|
|
66
|
+
initVal?: any[];
|
|
67
|
+
} | {
|
|
68
|
+
type: "readonly";
|
|
69
|
+
variableType: "object";
|
|
70
|
+
initVal?: object;
|
|
71
|
+
} | {
|
|
72
|
+
type: "writable";
|
|
73
|
+
variableType: "text" | "number" | "boolean" | "array" | "object";
|
|
74
|
+
valueProp: string;
|
|
75
|
+
});
|
|
76
|
+
export interface StateHelpers<P, T> {
|
|
77
|
+
initFunc?: ($props: P) => T;
|
|
78
|
+
onChangeArgsToValue?: (...args: any) => T;
|
|
79
|
+
}
|
|
80
|
+
export type ComponentHelpers<P> = {
|
|
81
|
+
states: Record<string, StateHelpers<P, any>>;
|
|
82
|
+
};
|
|
83
|
+
export type ExternalComponentHelpers<P> = {
|
|
84
|
+
helpers: ComponentHelpers<P>;
|
|
85
|
+
importPath: string;
|
|
86
|
+
} & ({
|
|
87
|
+
importName: string;
|
|
88
|
+
} | {
|
|
89
|
+
isDefaultExport: true;
|
|
90
|
+
});
|
|
91
|
+
export type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
|
|
92
|
+
export interface CodeComponentMeta<P> {
|
|
93
|
+
/**
|
|
94
|
+
* Any unique string name used to identify that component. Each component
|
|
95
|
+
* should be registered with a different `meta.name`, even if they have the
|
|
96
|
+
* same name in the code.
|
|
97
|
+
*/
|
|
98
|
+
name: string;
|
|
99
|
+
/**
|
|
100
|
+
* The name to be displayed for the component in Studio. Optional: if not
|
|
101
|
+
* specified, `meta.name` is used.
|
|
102
|
+
*/
|
|
103
|
+
displayName?: string;
|
|
104
|
+
/**
|
|
105
|
+
* The description of the component to be shown in Studio.
|
|
106
|
+
*/
|
|
107
|
+
description?: string;
|
|
108
|
+
/**
|
|
109
|
+
* The javascript name to be used when generating code. Optional: if not
|
|
110
|
+
* provided, `meta.name` is used.
|
|
111
|
+
*/
|
|
112
|
+
importName?: string;
|
|
113
|
+
/**
|
|
114
|
+
* An object describing the component properties to be used in Studio.
|
|
115
|
+
* For each `prop`, there should be an entry `meta.props[prop]` describing
|
|
116
|
+
* its type.
|
|
117
|
+
*/
|
|
118
|
+
props: {
|
|
119
|
+
[prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P>;
|
|
120
|
+
} & {
|
|
121
|
+
[prop: string]: PropType<P>;
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* An object describing the component states to be used in Studio.
|
|
125
|
+
*/
|
|
126
|
+
states?: Record<string, StateSpec>;
|
|
127
|
+
/**
|
|
128
|
+
* An object describing the components helpers to be used in Studio.
|
|
129
|
+
* 1. states helpers: Each state can receive an "initFunc" prop to initialize
|
|
130
|
+
* the implicit state in Studio, and an "onChangeArgsToValue" prop to
|
|
131
|
+
* transform the event handler arguments into a value
|
|
132
|
+
*/
|
|
133
|
+
componentHelpers?: ExternalComponentHelpers<P>;
|
|
134
|
+
/**
|
|
135
|
+
* An array describing the component actions to be used in Studio.
|
|
136
|
+
*/
|
|
137
|
+
actions?: Action<P>[];
|
|
138
|
+
/**
|
|
139
|
+
* Whether style sections should be shown in Studio. For styles to work, the
|
|
140
|
+
* component must accept a `className` prop. If unset, defaults to all styles.
|
|
141
|
+
* Set to `false` if this component cannot be styled (for example, if it doesn't
|
|
142
|
+
* render any DOM elements).
|
|
143
|
+
*/
|
|
144
|
+
styleSections?: StyleSection[] | boolean;
|
|
145
|
+
/**
|
|
146
|
+
* Whether the element can be repeated in Studio. If unset, defaults to true.
|
|
147
|
+
*/
|
|
148
|
+
isRepeatable?: boolean;
|
|
149
|
+
/**
|
|
150
|
+
* The path to be used when importing the component in the generated code.
|
|
151
|
+
* It can be the name of the package that contains the component, or the path
|
|
152
|
+
* to the file in the project (relative to the root directory).
|
|
153
|
+
*/
|
|
154
|
+
importPath: string;
|
|
155
|
+
/**
|
|
156
|
+
* Whether the component is the default export from that path. Optional: if
|
|
157
|
+
* not specified, it's considered `false`.
|
|
158
|
+
*/
|
|
159
|
+
isDefaultExport?: boolean;
|
|
160
|
+
/**
|
|
161
|
+
* The prop that expects the CSS classes with styles to be applied to the
|
|
162
|
+
* component. Optional: if not specified, Plasmic will expect it to be
|
|
163
|
+
* `className`. Notice that if the component does not accept CSS classes, the
|
|
164
|
+
* component will not be able to receive styles from the Studio.
|
|
165
|
+
*/
|
|
166
|
+
classNameProp?: string;
|
|
167
|
+
/**
|
|
168
|
+
* The prop that receives and forwards a React `ref`. Plasmic only uses `ref`
|
|
169
|
+
* to interact with components, so it's not used in the generated code.
|
|
170
|
+
* Optional: If not provided, the usual `ref` is used.
|
|
171
|
+
*/
|
|
172
|
+
refProp?: string;
|
|
173
|
+
/**
|
|
174
|
+
* Default styles to start with when instantiating the component in Plasmic.
|
|
175
|
+
*/
|
|
176
|
+
defaultStyles?: CSSProperties;
|
|
177
|
+
/**
|
|
178
|
+
* Component templates to start with on Plasmic.
|
|
179
|
+
*/
|
|
180
|
+
templates?: ComponentTemplates<P>;
|
|
181
|
+
/**
|
|
182
|
+
* Registered name of parent component, used for grouping related components.
|
|
183
|
+
*/
|
|
184
|
+
parentComponentName?: string;
|
|
185
|
+
/**
|
|
186
|
+
* Whether the component can be used as an attachment to an element.
|
|
187
|
+
*/
|
|
188
|
+
isAttachment?: boolean;
|
|
189
|
+
/**
|
|
190
|
+
* Whether the component provides data to its slots using DataProvider.
|
|
191
|
+
*/
|
|
192
|
+
providesData?: boolean;
|
|
193
|
+
/**
|
|
194
|
+
* If specified, then Figma components with the specified names will be mapped
|
|
195
|
+
* to this component when you paste Figma content into Plasmic
|
|
196
|
+
*/
|
|
197
|
+
figmaMappings?: {
|
|
198
|
+
figmaComponentName: string;
|
|
199
|
+
}[];
|
|
200
|
+
/**
|
|
201
|
+
* If true, when an instance of this component is added, the element
|
|
202
|
+
* will always be named by the name of this component.
|
|
203
|
+
*/
|
|
204
|
+
alwaysAutoName?: boolean;
|
|
205
|
+
refActions?: Record<string, RefActionRegistration<P>>;
|
|
206
|
+
}
|
|
207
|
+
export type CodeComponentMode = "advanced" | "simplified" | "database-schema-driven";
|
|
208
|
+
/**
|
|
209
|
+
* @deprecated use CodeComponentMeta instead
|
|
210
|
+
*/
|
|
211
|
+
export type ComponentMeta<P> = CodeComponentMeta<P>;
|
|
212
|
+
export interface FunctionParam<P> {
|
|
213
|
+
name: string;
|
|
214
|
+
displayName?: string;
|
|
215
|
+
type: PropType<P>;
|
|
216
|
+
}
|
|
217
|
+
export interface RefActionRegistration<P> {
|
|
218
|
+
displayName?: string;
|
|
219
|
+
description?: string;
|
|
220
|
+
argTypes: FunctionParam<P>[];
|
|
221
|
+
}
|
|
222
|
+
export interface ComponentRegistration {
|
|
223
|
+
component: React.ComponentType<any>;
|
|
224
|
+
meta: CodeComponentMeta<any>;
|
|
225
|
+
}
|
|
226
|
+
declare global {
|
|
227
|
+
interface Window {
|
|
228
|
+
__PlasmicComponentRegistry: ComponentRegistration[];
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
export default function registerComponent<T extends React.ComponentType<any>>(component: T, meta: CodeComponentMeta<React.ComponentProps<T>>): void;
|