@canva/cli 0.0.1-beta.8 → 1.0.0

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.
Files changed (150) hide show
  1. package/README.md +131 -31
  2. package/cli.js +852 -427
  3. package/lib/cjs/index.cjs +11 -0
  4. package/lib/esm/index.mjs +11 -0
  5. package/package.json +19 -4
  6. package/templates/base/backend/routers/auth.ts +4 -4
  7. package/templates/base/backend/routers/oauth.ts +3 -3
  8. package/templates/base/eslint.config.mjs +2 -25
  9. package/templates/base/package.json +29 -26
  10. package/templates/base/scripts/ssl/ssl.ts +1 -1
  11. package/templates/base/scripts/start/app_runner.ts +42 -5
  12. package/templates/base/scripts/start/context.ts +12 -6
  13. package/templates/base/scripts/start/start.ts +12 -1
  14. package/templates/base/scripts/start/tests/start.tests.ts +61 -0
  15. package/templates/base/utils/backend/base_backend/create.ts +3 -3
  16. package/templates/base/utils/backend/bearer_middleware/bearer_middleware.ts +2 -2
  17. package/templates/base/utils/backend/jwt_middleware/jwt_middleware.ts +4 -4
  18. package/templates/base/utils/backend/jwt_middleware/tests/jwt_middleware.tests.ts +1 -1
  19. package/templates/base/utils/use_add_element.ts +1 -1
  20. package/templates/base/utils/use_feature_support.ts +1 -1
  21. package/templates/{dam/webpack.config.cjs → base/webpack.config.ts} +51 -67
  22. package/templates/common/.env.template +3 -3
  23. package/templates/common/README.md +16 -17
  24. package/templates/common/jest.config.mjs +29 -2
  25. package/templates/common/jest.setup.ts +20 -0
  26. package/templates/common/utils/backend/base_backend/create.ts +3 -3
  27. package/templates/common/utils/backend/jwt_middleware/jwt_middleware.ts +4 -4
  28. package/templates/common/utils/backend/jwt_middleware/tests/jwt_middleware.tests.ts +1 -1
  29. package/templates/common/utils/tests/table_wrapper.tests.ts +1 -1
  30. package/templates/common/utils/use_add_element.ts +1 -1
  31. package/templates/common/utils/use_feature_support.ts +1 -1
  32. package/templates/dam/backend/routers/dam.ts +24 -20
  33. package/templates/dam/backend/server.ts +1 -1
  34. package/templates/dam/canva-app.json +16 -0
  35. package/templates/dam/eslint.config.mjs +2 -28
  36. package/templates/dam/package.json +43 -40
  37. package/templates/dam/scripts/ssl/ssl.ts +1 -1
  38. package/templates/dam/scripts/start/app_runner.ts +42 -5
  39. package/templates/dam/scripts/start/context.ts +12 -6
  40. package/templates/dam/scripts/start/start.ts +12 -1
  41. package/templates/dam/scripts/start/tests/start.tests.ts +61 -0
  42. package/templates/dam/src/app.tsx +24 -3
  43. package/templates/dam/src/config.ts +212 -87
  44. package/templates/dam/src/index.tsx +1 -1
  45. package/templates/dam/utils/backend/base_backend/create.ts +3 -3
  46. package/templates/dam/utils/backend/jwt_middleware/jwt_middleware.ts +4 -4
  47. package/templates/dam/utils/backend/jwt_middleware/tests/jwt_middleware.tests.ts +1 -1
  48. package/templates/{base/webpack.config.cjs → dam/webpack.config.ts} +51 -67
  49. package/templates/data_connector/README.md +84 -0
  50. package/templates/data_connector/canva-app.json +21 -0
  51. package/templates/data_connector/declarations/declarations.d.ts +29 -0
  52. package/templates/data_connector/eslint.config.mjs +14 -0
  53. package/templates/data_connector/package.json +91 -0
  54. package/templates/data_connector/scripts/ssl/ssl.ts +131 -0
  55. package/templates/data_connector/scripts/start/app_runner.ts +201 -0
  56. package/templates/data_connector/scripts/start/context.ts +171 -0
  57. package/templates/data_connector/scripts/start/start.ts +46 -0
  58. package/templates/data_connector/scripts/start/tests/start.tests.ts +61 -0
  59. package/templates/data_connector/src/api/connect_client.ts +6 -0
  60. package/templates/data_connector/src/api/data_source.ts +96 -0
  61. package/templates/data_connector/src/api/data_sources/designs.tsx +296 -0
  62. package/templates/data_connector/src/api/data_sources/index.ts +4 -0
  63. package/templates/data_connector/src/api/data_sources/templates.tsx +329 -0
  64. package/templates/data_connector/src/api/fetch_data_table.ts +55 -0
  65. package/templates/data_connector/src/api/index.ts +4 -0
  66. package/templates/data_connector/src/api/oauth.ts +8 -0
  67. package/templates/data_connector/src/api/tests/data_source.test.tsx +99 -0
  68. package/templates/data_connector/src/app.tsx +20 -0
  69. package/templates/data_connector/src/components/app_error.tsx +15 -0
  70. package/templates/data_connector/src/components/footer.tsx +26 -0
  71. package/templates/data_connector/src/components/header.tsx +40 -0
  72. package/templates/data_connector/src/components/index.ts +3 -0
  73. package/templates/data_connector/src/components/inputs/messages.tsx +99 -0
  74. package/templates/data_connector/src/components/inputs/search_filter.tsx +108 -0
  75. package/templates/data_connector/src/components/inputs/select_field.tsx +26 -0
  76. package/templates/data_connector/src/context/app_context.tsx +124 -0
  77. package/templates/data_connector/src/context/index.ts +2 -0
  78. package/templates/data_connector/src/context/use_app_context.ts +17 -0
  79. package/templates/data_connector/src/entrypoint.tsx +70 -0
  80. package/templates/data_connector/src/home.tsx +21 -0
  81. package/templates/data_connector/src/index.tsx +68 -0
  82. package/templates/data_connector/src/pages/data_source_config.tsx +9 -0
  83. package/templates/data_connector/src/pages/error.tsx +37 -0
  84. package/templates/data_connector/src/pages/index.ts +4 -0
  85. package/templates/data_connector/src/pages/login.tsx +145 -0
  86. package/templates/data_connector/src/pages/select_source.tsx +24 -0
  87. package/templates/data_connector/src/routes/index.ts +2 -0
  88. package/templates/data_connector/src/routes/protected_route.tsx +25 -0
  89. package/templates/data_connector/src/routes/routes.tsx +46 -0
  90. package/templates/data_connector/src/utils/data_params.ts +17 -0
  91. package/templates/data_connector/src/utils/data_table.ts +115 -0
  92. package/templates/data_connector/src/utils/fetch_result.ts +36 -0
  93. package/templates/data_connector/src/utils/index.ts +2 -0
  94. package/templates/data_connector/src/utils/tests/data_table.test.ts +133 -0
  95. package/templates/data_connector/styles/components.css +38 -0
  96. package/templates/data_connector/tsconfig.json +54 -0
  97. package/templates/{gen_ai/webpack.config.cjs → data_connector/webpack.config.ts} +51 -67
  98. package/templates/gen_ai/backend/routers/image.ts +8 -8
  99. package/templates/gen_ai/backend/server.ts +1 -1
  100. package/templates/gen_ai/canva-app.json +20 -0
  101. package/templates/gen_ai/eslint.config.mjs +2 -25
  102. package/templates/gen_ai/package.json +47 -42
  103. package/templates/gen_ai/scripts/ssl/ssl.ts +1 -1
  104. package/templates/gen_ai/scripts/start/app_runner.ts +42 -5
  105. package/templates/gen_ai/scripts/start/context.ts +12 -6
  106. package/templates/gen_ai/scripts/start/start.ts +12 -1
  107. package/templates/gen_ai/scripts/start/tests/start.tests.ts +61 -0
  108. package/templates/gen_ai/src/app.tsx +16 -10
  109. package/templates/gen_ai/src/components/footer.tsx +4 -4
  110. package/templates/gen_ai/src/components/image_grid.tsx +1 -1
  111. package/templates/gen_ai/src/components/loading_results.tsx +8 -8
  112. package/templates/gen_ai/src/components/prompt_input.tsx +3 -3
  113. package/templates/gen_ai/src/components/remaining_credits.tsx +1 -1
  114. package/templates/gen_ai/src/components/report_box.tsx +1 -1
  115. package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx +43 -0
  116. package/templates/gen_ai/src/home.tsx +13 -0
  117. package/templates/gen_ai/src/index.tsx +2 -18
  118. package/templates/gen_ai/src/pages/error.tsx +2 -2
  119. package/templates/gen_ai/src/pages/results.tsx +1 -1
  120. package/templates/gen_ai/src/routes/routes.tsx +2 -2
  121. package/templates/gen_ai/utils/backend/base_backend/create.ts +3 -3
  122. package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts +2 -2
  123. package/templates/{hello_world/webpack.config.cjs → gen_ai/webpack.config.ts} +51 -67
  124. package/templates/hello_world/canva-app.json +16 -0
  125. package/templates/hello_world/eslint.config.mjs +2 -25
  126. package/templates/hello_world/package.json +42 -37
  127. package/templates/hello_world/scripts/copy_env.ts +10 -0
  128. package/templates/hello_world/scripts/ssl/ssl.ts +1 -1
  129. package/templates/hello_world/scripts/start/app_runner.ts +42 -5
  130. package/templates/hello_world/scripts/start/context.ts +12 -6
  131. package/templates/hello_world/scripts/start/start.ts +12 -1
  132. package/templates/hello_world/scripts/start/tests/start.tests.ts +61 -0
  133. package/templates/hello_world/src/app.tsx +21 -1
  134. package/templates/hello_world/src/index.tsx +1 -1
  135. package/templates/hello_world/src/tests/__snapshots__/app.tests.tsx.snap +45 -0
  136. package/templates/hello_world/src/tests/app.tests.tsx +86 -0
  137. package/templates/hello_world/utils/use_add_element.ts +1 -1
  138. package/templates/hello_world/utils/use_feature_support.ts +1 -1
  139. package/templates/hello_world/webpack.config.ts +254 -0
  140. package/templates/optional/.cursor/mcp.json +8 -0
  141. package/templates/optional/.vscode/mcp.json +9 -0
  142. package/templates/optional/AGENTS.md +76 -0
  143. package/templates/optional/CLAUDE.md +76 -0
  144. package/templates/common/conf/eslint-general.mjs +0 -303
  145. package/templates/common/conf/eslint-i18n.mjs +0 -38
  146. /package/templates/base/scripts/{copy-env.ts → copy_env.ts} +0 -0
  147. /package/templates/dam/scripts/{copy-env.ts → copy_env.ts} +0 -0
  148. /package/templates/{gen_ai/scripts/copy-env.ts → data_connector/scripts/copy_env.ts} +0 -0
  149. /package/templates/{hello_world/scripts/copy-env.ts → gen_ai/scripts/copy_env.ts} +0 -0
  150. /package/templates/{common → optional}/.vscode/extensions.json +0 -0
@@ -1,303 +0,0 @@
1
- import typescriptEslint from "@typescript-eslint/eslint-plugin";
2
- import jest from "eslint-plugin-jest";
3
- import react from "eslint-plugin-react";
4
- import globals from "globals";
5
-
6
- export default [
7
- {
8
- plugins: {
9
- "@typescript-eslint": typescriptEslint,
10
- jest,
11
- react,
12
- },
13
- languageOptions: {
14
- globals: {
15
- ...globals.serviceworker,
16
- ...globals.browser,
17
- },
18
- },
19
- settings: {
20
- react: {
21
- version: "detect",
22
- },
23
- },
24
- rules: {
25
- "@typescript-eslint/no-non-null-assertion": "warn",
26
- "@typescript-eslint/no-empty-function": "off",
27
- "@typescript-eslint/consistent-type-imports": "error",
28
- "@typescript-eslint/no-explicit-any": "warn",
29
- "@typescript-eslint/no-empty-interface": "warn",
30
- "@typescript-eslint/consistent-type-definitions": "off",
31
- "@typescript-eslint/explicit-member-accessibility": [
32
- "error",
33
- {
34
- accessibility: "no-public",
35
- overrides: {
36
- parameterProperties: "off",
37
- },
38
- },
39
- ],
40
- "@typescript-eslint/naming-convention": [
41
- "error",
42
- {
43
- selector: "typeLike",
44
- format: ["PascalCase"],
45
- leadingUnderscore: "allow",
46
- },
47
- ],
48
- "no-invalid-this": "off",
49
- "@typescript-eslint/no-invalid-this": "error",
50
- "@typescript-eslint/no-unused-expressions": [
51
- "error",
52
- {
53
- allowShortCircuit: true,
54
- allowTernary: true,
55
- },
56
- ],
57
- "no-unused-vars": "off",
58
- "@typescript-eslint/no-unused-vars": [
59
- "error",
60
- {
61
- vars: "all",
62
- varsIgnorePattern: "^_",
63
- args: "none",
64
- ignoreRestSiblings: true,
65
- },
66
- ],
67
- "@typescript-eslint/no-require-imports": "error",
68
- "jest/no-restricted-matchers": [
69
- "error",
70
- {
71
- toContainElement:
72
- "toContainElement is not recommended as it encourages testing the internals of the components",
73
- toContainHTML:
74
- "toContainHTML is not recommended as it encourages testing the internals of the components",
75
- toHaveAttribute:
76
- "toHaveAttribute is not recommended as it encourages testing the internals of the components",
77
- toHaveClass:
78
- "toHaveClass is not recommended as it encourages testing the internals of the components",
79
- toHaveStyle:
80
- "toHaveStyle is not recommended as it encourages testing the internals of the components",
81
- },
82
- ],
83
- "react/jsx-curly-brace-presence": [
84
- "error",
85
- {
86
- props: "never",
87
- children: "never",
88
- },
89
- ],
90
- "react/jsx-tag-spacing": [
91
- "error",
92
- {
93
- closingSlash: "never",
94
- beforeSelfClosing: "allow",
95
- afterOpening: "never",
96
- beforeClosing: "allow",
97
- },
98
- ],
99
- "react/self-closing-comp": "error",
100
- "react/no-unescaped-entities": "off",
101
- "react/jsx-uses-react": "off",
102
- "react/react-in-jsx-scope": "off",
103
- "default-case": "error",
104
- eqeqeq: [
105
- "error",
106
- "always",
107
- {
108
- null: "never",
109
- },
110
- ],
111
- "no-caller": "error",
112
- "no-console": "error",
113
- "no-eval": "error",
114
- "no-inner-declarations": "error",
115
- "no-new-wrappers": "error",
116
- "no-restricted-globals": [
117
- "error",
118
- {
119
- name: "fit",
120
- message: "Don't focus tests",
121
- },
122
- {
123
- name: "fdescribe",
124
- message: "Don't focus tests",
125
- },
126
- {
127
- name: "length",
128
- message:
129
- "Undefined length - Did you mean to use window.length instead?",
130
- },
131
- {
132
- name: "name",
133
- message: "Undefined name - Did you mean to use window.name instead?",
134
- },
135
- {
136
- name: "status",
137
- message:
138
- "Undefined status - Did you mean to use window.status instead?",
139
- },
140
- {
141
- name: "spyOn",
142
- message: "Don't use spyOn directly, use jest.spyOn",
143
- },
144
- ],
145
- "no-restricted-properties": [
146
- "error",
147
- {
148
- property: "bind",
149
- message: "Don't o.f.bind(o, ...), use () => o.f(...)",
150
- },
151
- {
152
- object: "ReactDOM",
153
- property: "findDOMNode",
154
- message: "Don't use ReactDOM.findDOMNode() as it is deprecated",
155
- },
156
- ],
157
- "no-restricted-syntax": [
158
- "error",
159
- {
160
- selector: "AccessorProperty, TSAbstractAccessorProperty",
161
- message:
162
- "Accessor property syntax is not allowed, use getter and setters.",
163
- },
164
- {
165
- selector: "PrivateIdentifier",
166
- message:
167
- "Private identifiers are not allowed, use TypeScript private fields.",
168
- },
169
- {
170
- selector:
171
- "JSXOpeningElement[name.name = /^[A-Z]/] > JSXAttribute[name.name = /-/]",
172
- message:
173
- "Passing hyphenated props to custom components is not type-safe. Prefer a camelCased equivalent if available. (See https://github.com/microsoft/TypeScript/issues/55182)",
174
- },
175
- {
176
- selector:
177
- "CallExpression[callee.object.name='window'][callee.property.name='open']",
178
- message:
179
- "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
180
- },
181
- ],
182
- "no-restricted-imports": [
183
- "warn",
184
- {
185
- // Warn when importing static assets that increase bundle size
186
- patterns: [
187
- // Images
188
- {
189
- group: ["*.png", "*.jpg", "*.jpeg", "*.gif"],
190
- message:
191
- "Inline images increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
192
- },
193
- // Videos
194
- {
195
- group: ["*.mp4", "*.webm", "*.ogg"],
196
- message:
197
- "Inline videos increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
198
- },
199
- // Audio
200
- {
201
- group: ["*.mp3", "*.wav", "*.ogg"],
202
- message:
203
- "Inline audio files increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
204
- },
205
- ],
206
- },
207
- ],
208
- "no-return-await": "error",
209
- "no-throw-literal": "error",
210
- "no-undef-init": "error",
211
- "no-var": "error",
212
- "object-shorthand": "error",
213
- "prefer-const": [
214
- "error",
215
- {
216
- destructuring: "all",
217
- },
218
- ],
219
- "prefer-object-spread": "error",
220
- "prefer-rest-params": "error",
221
- "prefer-spread": "error",
222
- radix: "error",
223
- },
224
- },
225
- {
226
- files: ["**/*.tsx"],
227
- rules: {
228
- "react/no-deprecated": "error",
229
- "react/forbid-elements": [
230
- "error",
231
- {
232
- forbid: [
233
- {
234
- element: "video",
235
- message:
236
- "Don't use HTML video directly. Instead, use the App UI Kit <VideoCard /> as this respects users' auto-playing preferences",
237
- },
238
- {
239
- element: "em",
240
- message:
241
- "Don't use <em> to italicize text. Canva's UI fonts don't support italic font style.",
242
- },
243
- {
244
- element: "i",
245
- message:
246
- "Don't use <i> to italicize text. Canva's UI fonts don't support italic font style.",
247
- },
248
- {
249
- element: "iframe",
250
- message:
251
- "Canva Apps aren't allowed to contain iframes. You should either recreate the UI you want to show in the iframe in the app directly, or link to your page via a `<Link>` tag. For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
252
- },
253
- {
254
- element: "script",
255
- message:
256
- "Script tags are not allowed in Canva SDK Apps. You should import JavaScript modules instead. For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
257
- },
258
- {
259
- element: "a",
260
- message:
261
- "Don't use <a> tags. Instead, use the <Link> component from the App UI Kit, and remember to open the url via the requestOpenExternalUrl method from @canva/platform.",
262
- },
263
- {
264
- element: "img",
265
- message:
266
- "Have you considered using <ImageCard /> from the App UI Kit instead?",
267
- },
268
- {
269
- element: "embed",
270
- message:
271
- "Have you considered using <EmbedCard /> from the App UI Kit instead?",
272
- },
273
- {
274
- element: "audio",
275
- message:
276
- "Have you considered using <AudioCard /> from the App UI Kit instead?",
277
- },
278
- {
279
- element: "button",
280
- message:
281
- "Rather than using the native HTML <button> element, use the <Button> component from the App UI Kit for consistency and accessibility.",
282
- },
283
- {
284
- element: "input",
285
- message:
286
- "Wherever possible, prefer using the form inputs from the App UI Kit for consistency and accessibility (TextInput, Checkbox, FileInput, etc).",
287
- },
288
- {
289
- element: "base",
290
- message:
291
- "The <base> tag is not supported in Canva Apps. We recommend using hash-based routing. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
292
- },
293
- {
294
- element: "link",
295
- message:
296
- "If you're trying to include a css stylesheet, we recommend importing css using React, or using embedded stylesheets. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
297
- },
298
- ],
299
- },
300
- ],
301
- },
302
- },
303
- ];
@@ -1,38 +0,0 @@
1
- import formatjs from "eslint-plugin-formatjs";
2
-
3
- export default [
4
- {
5
- plugins: {
6
- formatjs,
7
- },
8
- rules: {
9
- "formatjs/no-invalid-icu": "error",
10
- "formatjs/no-literal-string-in-jsx": [
11
- 2,
12
- {
13
- props: {
14
- // These rules are for @canva/app-ui-kit components.
15
- // For your own components, suppress any false positives using eslint ignore comments.
16
- include: [
17
- ["*", "(*Label|label|alt)"],
18
- ["*", "(title|description|name|text)"],
19
- ["*", "(placeholder|additionalPlaceholder|defaultValue)"],
20
- ["FormField", "error"],
21
- ],
22
- exclude: [["FormattedMessage", "description"]],
23
- },
24
- },
25
- ],
26
- "formatjs/enforce-description": ["error", "literal"],
27
- "formatjs/enforce-default-message": ["error", "literal"],
28
- "formatjs/enforce-placeholders": "error",
29
- "formatjs/no-id": "error",
30
- "formatjs/no-emoji": "error",
31
- "formatjs/no-useless-message": "error",
32
- "formatjs/no-multiple-plurals": "error",
33
- "formatjs/no-offset": "error",
34
- "formatjs/blocklist-elements": [2, ["selectordinal"]],
35
- "formatjs/no-complex-selectors": "error",
36
- },
37
- },
38
- ];