@canva/cli 0.0.1-beta.13 → 0.0.1-beta.15
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/cli.js +291 -302
- package/lib/cjs/index.cjs +1 -1
- package/lib/esm/index.esm +1 -1
- package/package.json +1 -1
- package/templates/base/package.json +1 -1
- package/templates/common/jest.setup.ts +1 -0
- package/templates/dam/backend/routers/dam.ts +17 -12
- package/templates/dam/package.json +2 -2
- package/templates/dam/src/app.tsx +24 -3
- package/templates/dam/src/config.ts +209 -87
- package/templates/gen_ai/package.json +1 -1
- package/templates/hello_world/package.json +1 -1
|
@@ -1,14 +1,35 @@
|
|
|
1
1
|
import { SearchableListView } from "@canva/app-components";
|
|
2
2
|
import { Box } from "@canva/app-ui-kit";
|
|
3
|
+
import "@canva/app-ui-kit/styles.css";
|
|
4
|
+
import { useConfig } from "./config";
|
|
3
5
|
import { findResources } from "./adapter";
|
|
4
|
-
import { config } from "./config";
|
|
5
6
|
import * as styles from "./index.css";
|
|
6
|
-
import "@canva/app-ui-kit/styles.css";
|
|
7
7
|
|
|
8
8
|
export function App() {
|
|
9
|
+
const config = useConfig();
|
|
9
10
|
return (
|
|
10
11
|
<Box className={styles.rootWrapper}>
|
|
11
|
-
<SearchableListView
|
|
12
|
+
<SearchableListView
|
|
13
|
+
config={config}
|
|
14
|
+
findResources={findResources}
|
|
15
|
+
// TODO remove `saveExportedDesign` and `config.export` if your app does not support exporting the Canva design into an external platform
|
|
16
|
+
saveExportedDesign={(
|
|
17
|
+
exportedDesignUrl: string,
|
|
18
|
+
containerId: string | undefined,
|
|
19
|
+
designTitle: string | undefined,
|
|
20
|
+
) => {
|
|
21
|
+
// TODO update the function to save the design to your platform
|
|
22
|
+
return new Promise((resolve) => {
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
// eslint-disable-next-line no-console
|
|
25
|
+
console.info(
|
|
26
|
+
`Saving file "${designTitle}" from ${exportedDesignUrl} to ${config.serviceName} container id: ${containerId}`,
|
|
27
|
+
);
|
|
28
|
+
resolve({ success: true });
|
|
29
|
+
}, 1000);
|
|
30
|
+
});
|
|
31
|
+
}}
|
|
32
|
+
/>
|
|
12
33
|
</Box>
|
|
13
34
|
);
|
|
14
35
|
}
|
|
@@ -1,95 +1,217 @@
|
|
|
1
1
|
import type { Config } from "@canva/app-components";
|
|
2
|
+
import { useIntl } from "react-intl";
|
|
2
3
|
|
|
3
4
|
type ContainerTypes = "folder";
|
|
4
|
-
export const
|
|
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
|
-
|
|
5
|
+
export const useConfig = (): Config<ContainerTypes> => {
|
|
6
|
+
const intl = useIntl();
|
|
7
|
+
return {
|
|
8
|
+
serviceName: intl.formatMessage({
|
|
9
|
+
defaultMessage: "Example App",
|
|
10
|
+
description:
|
|
11
|
+
"Name of the service where the app will pull digital assets from",
|
|
12
|
+
}),
|
|
13
|
+
search: {
|
|
14
|
+
enabled: true,
|
|
15
|
+
filterFormConfig: {
|
|
16
|
+
containerTypes: ["folder"],
|
|
17
|
+
filters: [
|
|
18
|
+
{
|
|
19
|
+
filterType: "CHECKBOX",
|
|
20
|
+
label: intl.formatMessage({
|
|
21
|
+
defaultMessage: "File Type",
|
|
22
|
+
description: "Label of filters for file type",
|
|
23
|
+
}),
|
|
24
|
+
key: "fileType",
|
|
25
|
+
options: [
|
|
26
|
+
{ value: "mp4", label: "MP4" },
|
|
27
|
+
{ value: "png", label: "PNG" },
|
|
28
|
+
{ value: "jpeg", label: "JPEG" },
|
|
29
|
+
],
|
|
30
|
+
allowCustomValue: true,
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
filterType: "RADIO",
|
|
34
|
+
label: intl.formatMessage({
|
|
35
|
+
defaultMessage: "Size",
|
|
36
|
+
description: "Label of filters for asset size",
|
|
37
|
+
}),
|
|
38
|
+
key: "size",
|
|
39
|
+
options: [
|
|
40
|
+
{
|
|
41
|
+
label: intl.formatMessage({
|
|
42
|
+
defaultMessage: "Large (800+ px)",
|
|
43
|
+
description: "One of the filter options for asset size",
|
|
44
|
+
}),
|
|
45
|
+
value: "large",
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: intl.formatMessage({
|
|
49
|
+
defaultMessage: "Medium (200-799px)",
|
|
50
|
+
description: "One of the filter options for asset size",
|
|
51
|
+
}),
|
|
52
|
+
value: "medium",
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
allowCustomValue: true,
|
|
56
|
+
customValueInputType: "SIZE_RANGE",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
filterType: "RADIO",
|
|
60
|
+
label: intl.formatMessage({
|
|
61
|
+
defaultMessage: "Update Date",
|
|
62
|
+
description: "Label of the filters for asset's update date",
|
|
63
|
+
}),
|
|
64
|
+
key: "updateDate",
|
|
65
|
+
options: [
|
|
66
|
+
{
|
|
67
|
+
value: ">now-30m",
|
|
68
|
+
label: intl.formatMessage({
|
|
69
|
+
defaultMessage: "Last 30 Minutes",
|
|
70
|
+
description:
|
|
71
|
+
"One of the filter options for asset update date",
|
|
72
|
+
}),
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
value: ">now-7d",
|
|
76
|
+
label: intl.formatMessage({
|
|
77
|
+
defaultMessage: "Last 7 days",
|
|
78
|
+
description:
|
|
79
|
+
"One of the filter options for asset update date",
|
|
80
|
+
}),
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
allowCustomValue: true,
|
|
84
|
+
customValueInputType: "DATE_RANGE",
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
filterType: "RADIO",
|
|
88
|
+
label: intl.formatMessage({
|
|
89
|
+
defaultMessage: "Design Status",
|
|
90
|
+
description: "Label of the filters for asset's design status",
|
|
91
|
+
}),
|
|
92
|
+
key: "designStatus",
|
|
93
|
+
options: [
|
|
94
|
+
{
|
|
95
|
+
value: "approved",
|
|
96
|
+
label: intl.formatMessage({
|
|
97
|
+
defaultMessage: "Approved",
|
|
98
|
+
description:
|
|
99
|
+
"One of the filter options for asset design status",
|
|
100
|
+
}),
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
value: "rejected",
|
|
104
|
+
label: intl.formatMessage({
|
|
105
|
+
defaultMessage: "Rejected",
|
|
106
|
+
description:
|
|
107
|
+
"One of the filter options for asset design status",
|
|
108
|
+
}),
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
value: "draft",
|
|
112
|
+
label: intl.formatMessage({
|
|
113
|
+
defaultMessage: "Draft",
|
|
114
|
+
description:
|
|
115
|
+
"One of the filter options for asset design status",
|
|
116
|
+
}),
|
|
117
|
+
},
|
|
118
|
+
],
|
|
119
|
+
allowCustomValue: true,
|
|
120
|
+
customValueInputType: "PLAIN_TEXT",
|
|
121
|
+
},
|
|
122
|
+
],
|
|
123
|
+
},
|
|
63
124
|
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
surface: "
|
|
73
|
-
|
|
125
|
+
containerTypes: [
|
|
126
|
+
{
|
|
127
|
+
value: "folder",
|
|
128
|
+
label: intl.formatMessage({
|
|
129
|
+
defaultMessage: "Folders",
|
|
130
|
+
description: "Name of the asset container type",
|
|
131
|
+
}),
|
|
132
|
+
listingSurfaces: [
|
|
133
|
+
{ surface: "HOMEPAGE" },
|
|
134
|
+
{
|
|
135
|
+
surface: "CONTAINER",
|
|
136
|
+
parentContainerTypes: ["folder"],
|
|
137
|
+
},
|
|
138
|
+
{ surface: "SEARCH" },
|
|
139
|
+
],
|
|
140
|
+
searchInsideContainer: {
|
|
141
|
+
enabled: true,
|
|
142
|
+
placeholder: intl.formatMessage({
|
|
143
|
+
defaultMessage: "Search for media inside this folder",
|
|
144
|
+
description: "Placeholder of a search input box",
|
|
145
|
+
}),
|
|
74
146
|
},
|
|
75
|
-
{ surface: "SEARCH" },
|
|
76
|
-
],
|
|
77
|
-
searchInsideContainer: {
|
|
78
|
-
enabled: true,
|
|
79
|
-
placeholder: "Search for resources inside this folder",
|
|
80
147
|
},
|
|
148
|
+
],
|
|
149
|
+
sortOptions: [
|
|
150
|
+
{
|
|
151
|
+
value: "created_at DESC",
|
|
152
|
+
label: intl.formatMessage({
|
|
153
|
+
defaultMessage: "Creation date (newest)",
|
|
154
|
+
description: "One of the sort options",
|
|
155
|
+
}),
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
value: "created_at ASC",
|
|
159
|
+
label: intl.formatMessage({
|
|
160
|
+
defaultMessage: "Creation date (oldest)",
|
|
161
|
+
description: "One of the sort options",
|
|
162
|
+
}),
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
value: "updated_at DESC",
|
|
166
|
+
label: intl.formatMessage({
|
|
167
|
+
defaultMessage: "Updated (newest)",
|
|
168
|
+
description: "One of the sort options",
|
|
169
|
+
}),
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
value: "updated_at ASC",
|
|
173
|
+
label: intl.formatMessage({
|
|
174
|
+
defaultMessage: "Updated (oldest)",
|
|
175
|
+
description: "One of the sort options",
|
|
176
|
+
}),
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
value: "name ASC",
|
|
180
|
+
label: intl.formatMessage({
|
|
181
|
+
defaultMessage: "Name (A-Z)",
|
|
182
|
+
description: "One of the sort options",
|
|
183
|
+
}),
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
value: "name DESC",
|
|
187
|
+
label: intl.formatMessage({
|
|
188
|
+
defaultMessage: "Name (Z-A)",
|
|
189
|
+
description: "One of the sort options",
|
|
190
|
+
}),
|
|
191
|
+
},
|
|
192
|
+
],
|
|
193
|
+
layouts: ["MASONRY", "LIST"],
|
|
194
|
+
resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
|
|
195
|
+
moreInfoMessage: intl.formatMessage({
|
|
196
|
+
defaultMessage:
|
|
197
|
+
"At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
|
|
198
|
+
description: "Helper text to explain why some assets are not visible",
|
|
199
|
+
}),
|
|
200
|
+
// TODO remove `export` if your app does not support exporting the Canva design into an external platform
|
|
201
|
+
export: {
|
|
202
|
+
enabled: true,
|
|
203
|
+
// TODO provide a container type that user can choose to save into, or remove this field if user doesn't need to choose a container
|
|
204
|
+
containerTypes: ["folder"],
|
|
205
|
+
// TODO remove file types that are not supported by your platform
|
|
206
|
+
acceptedFileTypes: [
|
|
207
|
+
"png",
|
|
208
|
+
"pdf_standard",
|
|
209
|
+
"jpg",
|
|
210
|
+
"gif",
|
|
211
|
+
"svg",
|
|
212
|
+
"video",
|
|
213
|
+
"pptx",
|
|
214
|
+
],
|
|
81
215
|
},
|
|
82
|
-
|
|
83
|
-
sortOptions: [
|
|
84
|
-
{ value: "created_at DESC", label: "Creation date (newest)" },
|
|
85
|
-
{ value: "created_at ASC", label: "Creation date (oldest)" },
|
|
86
|
-
{ value: "updated_at DESC", label: "Updated (newest)" },
|
|
87
|
-
{ value: "updated_at ASC", label: "Updated (oldest)" },
|
|
88
|
-
{ value: "name ASC", label: "Name (A-Z)" },
|
|
89
|
-
{ value: "name DESC", label: "Name (Z-A)" },
|
|
90
|
-
],
|
|
91
|
-
layouts: ["MASONRY", "LIST"],
|
|
92
|
-
resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
|
|
93
|
-
moreInfoMessage:
|
|
94
|
-
"At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
|
|
216
|
+
};
|
|
95
217
|
};
|