@canva/cli 0.0.1-beta.2 → 0.0.1-beta.21

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 (97) hide show
  1. package/README.md +203 -106
  2. package/cli.js +467 -394
  3. package/lib/cjs/index.cjs +388 -0
  4. package/lib/esm/index.mjs +388 -0
  5. package/package.json +12 -3
  6. package/templates/base/backend/routers/oauth.ts +393 -0
  7. package/templates/base/eslint.config.mjs +2 -4
  8. package/templates/base/package.json +31 -25
  9. package/templates/base/scripts/copy_env.ts +10 -0
  10. package/templates/base/scripts/start/app_runner.ts +39 -2
  11. package/templates/base/scripts/start/context.ts +12 -6
  12. package/templates/base/scripts/start/start.ts +11 -0
  13. package/templates/base/scripts/start/tests/start.tests.ts +61 -0
  14. package/templates/base/utils/backend/bearer_middleware/bearer_middleware.ts +101 -0
  15. package/templates/base/utils/backend/bearer_middleware/index.ts +1 -0
  16. package/templates/base/utils/backend/bearer_middleware/tests/bearer_middleware.tests.ts +192 -0
  17. package/templates/base/utils/use_add_element.ts +48 -0
  18. package/templates/base/utils/use_feature_support.ts +28 -0
  19. package/templates/base/{webpack.config.cjs → webpack.config.ts} +34 -42
  20. package/templates/common/.gitignore.template +5 -6
  21. package/templates/common/.nvmrc +1 -0
  22. package/templates/common/.prettierrc +21 -0
  23. package/templates/common/.vscode/extensions.json +6 -0
  24. package/templates/common/README.md +4 -74
  25. package/templates/common/conf/eslint-local-i18n-rules/index.mjs +181 -0
  26. package/templates/common/conf/{eslint-general.mjs → eslint_general.mjs} +40 -0
  27. package/templates/common/conf/eslint_i18n.mjs +41 -0
  28. package/templates/common/jest.config.mjs +29 -2
  29. package/templates/common/jest.setup.ts +20 -0
  30. package/templates/common/utils/backend/base_backend/create.ts +104 -0
  31. package/templates/common/utils/table_wrapper.ts +477 -0
  32. package/templates/common/utils/tests/table_wrapper.tests.ts +252 -0
  33. package/templates/common/utils/use_add_element.ts +48 -0
  34. package/templates/common/utils/use_feature_support.ts +28 -0
  35. package/templates/common/utils/use_overlay_hook.ts +74 -0
  36. package/templates/common/utils/use_selection_hook.ts +37 -0
  37. package/templates/dam/backend/routers/dam.ts +17 -12
  38. package/templates/dam/backend/server.ts +0 -7
  39. package/templates/dam/eslint.config.mjs +2 -2
  40. package/templates/dam/package.json +51 -39
  41. package/templates/dam/scripts/copy_env.ts +10 -0
  42. package/templates/dam/scripts/start/app_runner.ts +39 -2
  43. package/templates/dam/scripts/start/context.ts +12 -6
  44. package/templates/dam/scripts/start/start.ts +11 -0
  45. package/templates/dam/scripts/start/tests/start.tests.ts +61 -0
  46. package/templates/dam/src/app.tsx +26 -138
  47. package/templates/dam/src/config.ts +209 -87
  48. package/templates/{hello_world/webpack.config.cjs → dam/webpack.config.ts} +34 -42
  49. package/templates/gen_ai/README.md +1 -1
  50. package/templates/gen_ai/backend/routers/image.ts +3 -3
  51. package/templates/gen_ai/backend/server.ts +0 -7
  52. package/templates/gen_ai/eslint.config.mjs +2 -4
  53. package/templates/gen_ai/package.json +56 -42
  54. package/templates/gen_ai/scripts/copy_env.ts +10 -0
  55. package/templates/gen_ai/scripts/start/app_runner.ts +39 -2
  56. package/templates/gen_ai/scripts/start/context.ts +12 -6
  57. package/templates/gen_ai/scripts/start/start.ts +11 -0
  58. package/templates/gen_ai/scripts/start/tests/start.tests.ts +61 -0
  59. package/templates/gen_ai/src/api/api.ts +1 -39
  60. package/templates/gen_ai/src/app.tsx +16 -10
  61. package/templates/gen_ai/src/components/footer.messages.ts +0 -5
  62. package/templates/gen_ai/src/components/footer.tsx +2 -16
  63. package/templates/gen_ai/src/components/image_grid.tsx +8 -6
  64. package/templates/gen_ai/src/components/index.ts +0 -1
  65. package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx +43 -0
  66. package/templates/gen_ai/src/context/app_context.tsx +4 -26
  67. package/templates/gen_ai/src/context/context.messages.ts +1 -12
  68. package/templates/gen_ai/src/home.tsx +13 -0
  69. package/templates/gen_ai/src/index.tsx +2 -18
  70. package/templates/gen_ai/src/routes/routes.tsx +2 -2
  71. package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts +101 -0
  72. package/templates/gen_ai/utils/backend/bearer_middleware/index.ts +1 -0
  73. package/templates/gen_ai/utils/backend/bearer_middleware/tests/bearer_middleware.tests.ts +192 -0
  74. package/templates/gen_ai/{webpack.config.cjs → webpack.config.ts} +34 -42
  75. package/templates/hello_world/eslint.config.mjs +2 -4
  76. package/templates/hello_world/package.json +55 -33
  77. package/templates/hello_world/scripts/copy_env.ts +10 -0
  78. package/templates/hello_world/scripts/start/app_runner.ts +39 -2
  79. package/templates/hello_world/scripts/start/context.ts +12 -6
  80. package/templates/hello_world/scripts/start/start.ts +11 -0
  81. package/templates/hello_world/scripts/start/tests/start.tests.ts +61 -0
  82. package/templates/hello_world/src/app.tsx +24 -2
  83. package/templates/hello_world/src/tests/__snapshots__/app.tests.tsx.snap +45 -0
  84. package/templates/hello_world/src/tests/app.tests.tsx +86 -0
  85. package/templates/hello_world/utils/use_add_element.ts +48 -0
  86. package/templates/hello_world/utils/use_feature_support.ts +28 -0
  87. package/templates/{dam/webpack.config.cjs → hello_world/webpack.config.ts} +34 -42
  88. package/templates/common/conf/eslint-i18n.mjs +0 -23
  89. package/templates/dam/backend/database/database.ts +0 -42
  90. package/templates/dam/backend/routers/auth.ts +0 -285
  91. package/templates/gen_ai/backend/routers/auth.ts +0 -285
  92. package/templates/gen_ai/src/components/logged_in_status.tsx +0 -44
  93. package/templates/gen_ai/src/services/auth.tsx +0 -31
  94. package/templates/gen_ai/src/services/index.ts +0 -1
  95. /package/templates/{gen_ai → common}/utils/backend/jwt_middleware/index.ts +0 -0
  96. /package/templates/{gen_ai → common}/utils/backend/jwt_middleware/jwt_middleware.ts +0 -0
  97. /package/templates/{gen_ai → common}/utils/backend/jwt_middleware/tests/jwt_middleware.tests.ts +0 -0
package/README.md CHANGED
@@ -7,155 +7,275 @@ CLI for creating and managing Canva Apps.
7
7
  ## Table of contents
8
8
 
9
9
  - [Introduction](#introduction)
10
- - [Features](#features)
11
- - [Usage](#usage)
10
+ - [Requirements](#requirements)
11
+ - [Quickstart](#quickstart)
12
+ - [Use the Canva CLI](#use-the-canva-cli)
13
+ - [Step 1: Install and log in](#step-1-install-and-log-in)
14
+ - [Step 2: Create your app](#step-2-create-your-app)
15
+ - [Step 3: Preview your app](#step-3-preview-your-app)
16
+ - [Log out, auth token storage, and removal](#token-storage-and-removal)
12
17
  - [CLI reference](#cli-reference)
13
18
  - [Flags](#flags)
14
19
  - [Commands](#commands)
15
20
  - [Next steps](#next-steps)
16
21
  - [Limitations](#limitations)
17
- - [Updating](#updating)
18
- - [Contributing](#contributing)
22
+ - [Updates](#updating)
23
+ - [Contributions](#contributing)
19
24
  - [License](#license)
20
25
 
21
26
  ## Introduction
22
27
 
23
- `@canva/cli` is a command line tool designed for creating and managing Canva Apps. To learn more about app development, visit [the official documentation](https://www.canva.dev/docs/apps).
28
+ `@canva/cli` is a command line tool designed for creating and managing Canva Apps. Use `@canva/cli` to get started creating and testing your app. The Canva CLI allows you to create apps from the command line, and to use Canva's recommended development tools and templates.
24
29
 
25
- ## Features
30
+ To learn more about app development, visit [the official documentation](https://www.canva.dev/docs/apps).
26
31
 
27
- - Log in to your Canva account.
28
- - Create and manage apps directly from the command line.
29
- - Utilize Canva's recommended development tools and templates.
32
+ ## Requirements
30
33
 
31
- ## Prerequisites
34
+ Before using the CLI, make sure that you have the following:
32
35
 
33
- Before using the CLI, ensure that you have the following installed:
36
+ - Node.js `v18.20.4` or `v20.17.0`.
37
+ - npm `v9` or `v10`.
38
+ - A [Canva account](https://www.canva.com/developers).
34
39
 
35
- - Node.js `v18.20.4` or `v20.17.0`
36
- - npm `v9` or `v10`
40
+ **Note**: If you are using a version manager such as nvm, run the `nvm install 20.17.0` command to make sure you have the correct Node.js version.
37
41
 
38
- ## Usage
42
+ ## Quickstart
39
43
 
40
- To start using the CLI, first install it globally:
44
+ The following commands create a new Canva app using the Canva CLI.
41
45
 
42
- ```bash
43
- npm install -g @canva/cli
46
+ ```shell
47
+ npm install -g @canva/cli@latest
48
+ canva login
49
+ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
50
+ cd my-new-app
51
+ npm start
44
52
  ```
45
53
 
46
- After installation, you can use the CLI by running:
54
+ ## Use the Canva CLI
47
55
 
48
- ```bash
49
- canva <command>
56
+ ### Step 1: Install and log in
57
+
58
+ Installing the Canva CLI allows you to create new apps from the command line.
59
+
60
+ To get started:
61
+
62
+ 1. Install the Canva CLI globally.
63
+
64
+ ```shell
65
+ npm install -g @canva/cli@latest
66
+ ```
67
+
68
+ 2. Log in to the Canva CLI. The Canva CLI then opens an access request page in your browser.
69
+
70
+ ```shell
71
+ canva login
72
+ ```
73
+
74
+ 3. In your browser, click **Allow** to grant the Canva CLI access to create and edit apps on your behalf. When you grant access, the Canva CLI generates an auth token and stores it locally. For more information on the auth token, read the following section on [auth token storage and removal](#log-out-auth-token-storage-and-removal).
75
+ 4. Copy the confirmation code shown in your browser, and paste it into the Canva CLI input.
76
+
77
+ ### Step 2: Create your app
78
+
79
+ After you log in to the Canva CLI and authorize it, you can create your app.
80
+
81
+ To create a new app:
82
+
83
+ 1. Run the `canva apps create` command. The flags in the following code snippet are optional, and you can instead configure these settings during the apps creation process. See the [CLI Reference](#cli-reference) for more information on each flag.
84
+
85
+ ```shell
86
+ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
87
+ ```
88
+
89
+ **Note**: You can't change the distribution type after creating an app.
90
+
91
+ ### Step 3: Preview your app
92
+
93
+ When your new app is ready, the Canva CLI automatically opens the [Developer Portal](https://www.canva.com/developers/apps) to your new app's Configuration page in your browser. You can then continue to preview and manage your new app.
94
+
95
+ To preview your app:
96
+
97
+ 1. Change into your new app's folder.
98
+
99
+ ```shell
100
+ cd my-new-app
101
+ ```
102
+
103
+ 2. Run the following command to start your app.
104
+
105
+ ```shell
106
+ npm start
107
+ ```
108
+
109
+ 3. The preview URL will be generated and opened automatically in your browser.
110
+ 4. If this the first time previewing your app, click **Open** to preview your new app.
111
+
112
+ ### Step 4: Run a health check on your app
113
+
114
+ After creating your app, you can diagnose potential issues using:
115
+
116
+ ```shell
117
+ canva apps doctor
50
118
  ```
51
119
 
120
+ This checks for missing dependencies, outdated packages, and other issues.
121
+
122
+ ## Log out, auth token storage, and removal
123
+
124
+ When you log in to the Canva CLI using the `canva login` command, and then grant the Canva CLI access to manage apps in your Canva account, an auth token is encrypted and stored locally on your machine. The token provides authentication for future requests so you don't need to grant the Canva CLI access each time it sends a request.
125
+
126
+ When you log out of the Canva CLI with the `canva logout` command, the auth token is revoked, and deleted.
127
+
128
+ ### Token Location
129
+
130
+ The auth token is located in your home directory under the `.canva-cli` folder.
131
+
132
+ ### Removing the Token
133
+
134
+ To delete the token, there are two options. However only the `canva logout` command revokes and deletes the token. If there's a copy of the token, it's possible to reconnect the Canva CLI to your account's apps using the token.
135
+
136
+ #### Log out
137
+
138
+ 1. Use the `canva logout` command to revoke access and delete the stored token.
139
+
140
+ ```shell
141
+ canva logout
142
+ ```
143
+
144
+ #### Delete the file manually
145
+
146
+ 1. Locate the `credentials` file, which is stored in the following locations:
147
+
148
+ - **macOS and Linux**: The token is stored in `~/.canva-cli/credentials`.
149
+ - **Windows**: The token is stored in `%USERPROFILE%\.canva-cli\credentials`.
150
+
151
+ 2. Delete the file.
152
+
52
153
  ## CLI Reference
53
154
 
155
+ After installation, you can use the Canva CLI by running:
156
+
157
+ ```shell
158
+ canva <command-name>
159
+ ```
160
+
54
161
  ### Flags
55
162
 
56
- Top-level flags applicable across commands:
163
+ Top-level flags applicable to commands:
57
164
 
58
- - `--help`: Display help information about commands and flags.
165
+ - `--help`: Show help information about commands and flags.
59
166
  - `--lite`: Enable a simplified CLI interface for enhanced accessibility.
60
- - `--version`: Show the version number of the CLI.
167
+ - `--version`: Show the CLI version number.
61
168
 
62
169
  ### Commands
63
170
 
64
171
  #### welcome
65
172
 
66
- Display the welcome page and general information.
67
-
68
- - **Usage**:
173
+ Show the welcome page and general information.
69
174
 
70
- ```bash
71
- canva welcome
72
- ```
175
+ ```shell
176
+ canva welcome
177
+ ```
73
178
 
74
179
  #### tip
75
180
 
76
- Get a random development tip for working with the Apps SDK.
77
-
78
- - **Usage**:
181
+ Print a random development tip for working with the Apps SDK.
79
182
 
80
- ```bash
81
- canva tip
82
- ```
183
+ ```shell
184
+ canva tip
185
+ ```
83
186
 
84
- - **Aliases**: `tips`
187
+ - **Aliases**:
188
+ - `tips`: Also prints a random development tip.
85
189
 
86
190
  #### login
87
191
 
88
192
  Log in to the Canva CLI.
89
193
 
90
- - **Usage**:
194
+ ```shell
195
+ canva login
196
+ ```
197
+
198
+ #### logout
91
199
 
92
- ```bash
93
- canva login
94
- ```
200
+ Log out of the Canva CLI, and delete the saved auth token:
201
+
202
+ ```shell
203
+ canva logout
204
+ ```
95
205
 
96
206
  #### apps
97
207
 
98
208
  Manage your Canva apps.
99
209
 
100
- - **Usage**:
210
+ ```shell
211
+ canva apps
212
+ ```
213
+
214
+ #### apps sub-commands
215
+
216
+ - `create "app-name"`: Create a new Canva app.
101
217
 
102
- ```bash
103
- canva apps
218
+ ```shell
219
+ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
104
220
  ```
105
221
 
106
- - **Sub-Commands**:
222
+ - **Arguments**:
223
+ - `--name`: Sets the app's name. Provide the name you want for the app.
224
+ - **Flags**:
107
225
 
108
- - `create [name]`: Create a new Canva app.
226
+ - `--template`: Specifies the starting template for the app.
109
227
 
110
- - **Usage**:
228
+ Available templates:
111
229
 
112
- ```bash
113
- canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
114
- ```
230
+ - `"hello_world"`: Basic starting point.
231
+ - `"dam"`: Digital asset management integration.
232
+ - `"gen_ai"`: Generative AI app creation.
115
233
 
116
- - **Arguments**:
117
- - `[name]`: Sets the app's name. Provide the desired name of the app when using this command.
118
- - **Flags**:
234
+ - `--distribution`: Sets the app's distribution type.
119
235
 
120
- - `--template`: Specifies the starting template for the app.
236
+ Available types:
121
237
 
122
- Available templates:
238
+ - `"public"`: Available to all Canva users, subject to Canva review.
239
+ - `"private"`: Only available to your team, and requires team admin approval.
123
240
 
124
- - `"hello_world"`: Basic starting point.
125
- - `"dam"`: Digital asset management integration.
126
- - `"gen_ai"`: Generative AI app creation.
241
+ **Note**: You can't change the distribution setting after creating a new app with the `canva apps create` command.
127
242
 
128
- - `--distribution`: Sets the app's distribution type.
243
+ - `--git`: Initializes a Git repository in the project directory.
129
244
 
130
- Options:
245
+ - `--installDependencies`: Automatically installs necessary npm dependencies during the app creation process.
131
246
 
132
- - `"public"`: Available to all Canva users, subject to Canva review.
133
- - `"private"`: Only available to your team, requires team admin approval.
247
+ - `--offline`: Scaffold the app locally without also creating an app in the Developer Portal.
134
248
 
135
- > [!Note]
136
- > This setting cannot be changed after the app is created.
249
+ - `list`: List all Canva apps.
137
250
 
138
- - `--git`: Initializes a Git repository in the project directory.
251
+ ```shell
252
+ canva apps list
253
+ ```
139
254
 
140
- - `--installDependencies`: Automatically installs necessary npm dependencies.
255
+ - `preview`: Preview your app.
141
256
 
142
- - `list`: List all Canva apps.
257
+ ```shell
258
+ canva apps preview
259
+ ```
143
260
 
144
- - **Usage**:
261
+ - `doctor`: Run diagnostics on your Canva App to identify and fix issues.
145
262
 
146
- ```bash
147
- canva apps list
148
- ```
263
+ ```shell
264
+ canva apps doctor
265
+ ```
149
266
 
150
- #### logout
267
+ - **Flags**:
151
268
 
152
- Log out and revoke access from the CLI.
269
+ - `--fix`: Automatically apply fixes for issues where possible.
270
+ - `--report`: Output check results without prompting for fixes.
153
271
 
154
- - **Usage**:
272
+ #### logout
155
273
 
156
- ```bash
157
- canva logout
158
- ```
274
+ Log out and revoke Canva CLI access.
275
+
276
+ ```shell
277
+ canva logout
278
+ ```
159
279
 
160
280
  ## Next Steps
161
281
 
@@ -164,43 +284,20 @@ Log out and revoke access from the CLI.
164
284
 
165
285
  ## Limitations
166
286
 
167
- Once an app is created, it must be managed through Canva's [Developer Portal](https://www.canva.com/developers/apps) and cannot be fully managed via the CLI.
287
+ You must manage your new app created through the Canva CLI through the [Developer Portal](https://www.canva.com/developers/apps). You can't manage apps completely through the Canva CLI.
168
288
 
169
- ## Updating
289
+ ## Updates
170
290
 
171
291
  To update the CLI to the latest version, run:
172
292
 
173
- ```bash
174
- npm update -g @canva/cli
293
+ ```shell
294
+ npm update -g @canva/cli@latest
175
295
  ```
176
296
 
177
- ## Token Storage and Removal
178
-
179
- When you log in using the `canva login` command, the Auth token is encrypted and stored locally on your machine. This token is used to authenticate future requests made by the CLI, so you don’t have to log in repeatedly.
180
-
181
- ### Token Location
182
-
183
- The token is stored in a credentials file located in your home directory under the `.canva-cli` folder:
184
-
185
- ### Removing the Token
186
-
187
- To remove the token and log out of the CLI, you can either:
188
-
189
- 1. Use the `canva logout` command to revoke access and delete the stored token:
190
-
191
- ```bash
192
- canva logout
193
- ```
194
-
195
- 2. Manually delete the credentials file:
196
-
197
- - **macOS/Linux**: The token is stored in `~/.canva-cli/credentials`.
198
- - **Windows**: The token is stored in `%USERPROFILE%\.canva-cli\credentials`.
199
-
200
- ## Contributing
297
+ ## Contributions
201
298
 
202
- We're in active development and currently do not accept third-party contributions. Please submit any feature requests through the [Canva Developers Community](https://community.canva.dev/).
299
+ Currently the Canva CLI doesn't accept third-party contributions. Please submit any feature requests through the [Canva Developers Community](https://community.canva.dev/).
203
300
 
204
301
  ## License
205
302
 
206
- Refer to the `LICENSE.md` file for licensing details.
303
+ Refer to the `LICENSE.md` file for more information.