@canva/cli 0.0.1-beta.2 → 0.0.1-beta.20
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/README.md +184 -108
- package/cli.js +467 -394
- package/lib/cjs/index.cjs +388 -0
- package/lib/esm/index.mjs +388 -0
- package/package.json +12 -3
- package/templates/base/backend/routers/oauth.ts +393 -0
- package/templates/base/eslint.config.mjs +2 -4
- package/templates/base/package.json +31 -25
- package/templates/base/scripts/copy_env.ts +10 -0
- package/templates/base/scripts/start/app_runner.ts +39 -2
- package/templates/base/scripts/start/context.ts +12 -6
- package/templates/base/scripts/start/start.ts +11 -0
- package/templates/base/scripts/start/tests/start.tests.ts +61 -0
- package/templates/base/utils/backend/bearer_middleware/bearer_middleware.ts +101 -0
- package/templates/base/utils/backend/bearer_middleware/index.ts +1 -0
- package/templates/base/utils/backend/bearer_middleware/tests/bearer_middleware.tests.ts +192 -0
- package/templates/base/utils/use_add_element.ts +48 -0
- package/templates/base/utils/use_feature_support.ts +28 -0
- package/templates/base/{webpack.config.cjs → webpack.config.ts} +34 -42
- package/templates/common/.gitignore.template +5 -6
- package/templates/common/.nvmrc +1 -0
- package/templates/common/.prettierrc +21 -0
- package/templates/common/.vscode/extensions.json +6 -0
- package/templates/common/README.md +4 -74
- package/templates/common/conf/eslint-local-i18n-rules/index.mjs +181 -0
- package/templates/common/conf/{eslint-general.mjs → eslint_general.mjs} +40 -0
- package/templates/common/conf/eslint_i18n.mjs +41 -0
- package/templates/common/jest.config.mjs +29 -2
- package/templates/common/jest.setup.ts +20 -0
- package/templates/common/utils/backend/base_backend/create.ts +104 -0
- package/templates/common/utils/table_wrapper.ts +477 -0
- package/templates/common/utils/tests/table_wrapper.tests.ts +252 -0
- package/templates/common/utils/use_add_element.ts +48 -0
- package/templates/common/utils/use_feature_support.ts +28 -0
- package/templates/common/utils/use_overlay_hook.ts +74 -0
- package/templates/common/utils/use_selection_hook.ts +37 -0
- package/templates/dam/backend/routers/dam.ts +17 -12
- package/templates/dam/backend/server.ts +0 -7
- package/templates/dam/eslint.config.mjs +2 -2
- package/templates/dam/package.json +51 -39
- package/templates/dam/scripts/copy_env.ts +10 -0
- package/templates/dam/scripts/start/app_runner.ts +39 -2
- package/templates/dam/scripts/start/context.ts +12 -6
- package/templates/dam/scripts/start/start.ts +11 -0
- package/templates/dam/scripts/start/tests/start.tests.ts +61 -0
- package/templates/dam/src/app.tsx +26 -138
- package/templates/dam/src/config.ts +209 -87
- package/templates/{hello_world/webpack.config.cjs → dam/webpack.config.ts} +34 -42
- package/templates/gen_ai/README.md +1 -1
- package/templates/gen_ai/backend/routers/image.ts +3 -3
- package/templates/gen_ai/backend/server.ts +0 -7
- package/templates/gen_ai/eslint.config.mjs +2 -4
- package/templates/gen_ai/package.json +56 -42
- package/templates/gen_ai/scripts/copy_env.ts +10 -0
- package/templates/gen_ai/scripts/start/app_runner.ts +39 -2
- package/templates/gen_ai/scripts/start/context.ts +12 -6
- package/templates/gen_ai/scripts/start/start.ts +11 -0
- package/templates/gen_ai/scripts/start/tests/start.tests.ts +61 -0
- package/templates/gen_ai/src/api/api.ts +1 -39
- package/templates/gen_ai/src/app.tsx +16 -10
- package/templates/gen_ai/src/components/footer.messages.ts +0 -5
- package/templates/gen_ai/src/components/footer.tsx +2 -16
- package/templates/gen_ai/src/components/image_grid.tsx +8 -6
- package/templates/gen_ai/src/components/index.ts +0 -1
- package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx +43 -0
- package/templates/gen_ai/src/context/app_context.tsx +4 -26
- package/templates/gen_ai/src/context/context.messages.ts +1 -12
- package/templates/gen_ai/src/home.tsx +13 -0
- package/templates/gen_ai/src/index.tsx +2 -18
- package/templates/gen_ai/src/routes/routes.tsx +2 -2
- package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts +101 -0
- package/templates/gen_ai/utils/backend/bearer_middleware/index.ts +1 -0
- package/templates/gen_ai/utils/backend/bearer_middleware/tests/bearer_middleware.tests.ts +192 -0
- package/templates/gen_ai/{webpack.config.cjs → webpack.config.ts} +34 -42
- package/templates/hello_world/eslint.config.mjs +2 -4
- package/templates/hello_world/package.json +55 -33
- package/templates/hello_world/scripts/copy_env.ts +10 -0
- package/templates/hello_world/scripts/start/app_runner.ts +39 -2
- package/templates/hello_world/scripts/start/context.ts +12 -6
- package/templates/hello_world/scripts/start/start.ts +11 -0
- package/templates/hello_world/scripts/start/tests/start.tests.ts +61 -0
- package/templates/hello_world/src/app.tsx +24 -2
- package/templates/hello_world/src/tests/__snapshots__/app.tests.tsx.snap +45 -0
- package/templates/hello_world/src/tests/app.tests.tsx +86 -0
- package/templates/hello_world/utils/use_add_element.ts +48 -0
- package/templates/hello_world/utils/use_feature_support.ts +28 -0
- package/templates/{dam/webpack.config.cjs → hello_world/webpack.config.ts} +34 -42
- package/templates/common/conf/eslint-i18n.mjs +0 -23
- package/templates/dam/backend/database/database.ts +0 -42
- package/templates/dam/backend/routers/auth.ts +0 -285
- package/templates/gen_ai/backend/routers/auth.ts +0 -285
- package/templates/gen_ai/src/components/logged_in_status.tsx +0 -44
- package/templates/gen_ai/src/services/auth.tsx +0 -31
- package/templates/gen_ai/src/services/index.ts +0 -1
- /package/templates/{gen_ai → common}/utils/backend/jwt_middleware/index.ts +0 -0
- /package/templates/{gen_ai → common}/utils/backend/jwt_middleware/jwt_middleware.ts +0 -0
- /package/templates/{gen_ai → common}/utils/backend/jwt_middleware/tests/jwt_middleware.tests.ts +0 -0
package/README.md
CHANGED
|
@@ -7,155 +7,254 @@ CLI for creating and managing Canva Apps.
|
|
|
7
7
|
## Table of contents
|
|
8
8
|
|
|
9
9
|
- [Introduction](#introduction)
|
|
10
|
-
- [
|
|
11
|
-
- [
|
|
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
|
-
- [
|
|
18
|
-
- [
|
|
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.
|
|
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
|
-
|
|
30
|
+
To learn more about app development, visit [the official documentation](https://www.canva.dev/docs/apps).
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
- Create and manage apps directly from the command line.
|
|
29
|
-
- Utilize Canva's recommended development tools and templates.
|
|
32
|
+
## Requirements
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
Before using the CLI, make sure that you have the following:
|
|
32
35
|
|
|
33
|
-
|
|
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
|
-
|
|
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
|
-
##
|
|
42
|
+
## Quickstart
|
|
39
43
|
|
|
40
|
-
|
|
44
|
+
The following commands create a new Canva app using the Canva CLI.
|
|
41
45
|
|
|
42
|
-
```
|
|
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
|
-
|
|
54
|
+
## Use the Canva CLI
|
|
47
55
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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
|
+
## Log out, auth token storage, and removal
|
|
113
|
+
|
|
114
|
+
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.
|
|
115
|
+
|
|
116
|
+
When you log out of the Canva CLI with the `canva logout` command, the auth token is revoked, and deleted.
|
|
117
|
+
|
|
118
|
+
### Token Location
|
|
119
|
+
|
|
120
|
+
The auth token is located in your home directory under the `.canva-cli` folder.
|
|
121
|
+
|
|
122
|
+
### Removing the Token
|
|
123
|
+
|
|
124
|
+
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.
|
|
125
|
+
|
|
126
|
+
#### Log out
|
|
127
|
+
|
|
128
|
+
1. Use the `canva logout` command to revoke access and delete the stored token.
|
|
129
|
+
|
|
130
|
+
```shell
|
|
131
|
+
canva logout
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
#### Delete the file manually
|
|
135
|
+
|
|
136
|
+
1. Locate the `credentials` file, which is stored in the following locations:
|
|
137
|
+
|
|
138
|
+
- **macOS and Linux**: The token is stored in `~/.canva-cli/credentials`.
|
|
139
|
+
- **Windows**: The token is stored in `%USERPROFILE%\.canva-cli\credentials`.
|
|
140
|
+
|
|
141
|
+
2. Delete the file.
|
|
51
142
|
|
|
52
143
|
## CLI Reference
|
|
53
144
|
|
|
145
|
+
After installation, you can use the Canva CLI by running:
|
|
146
|
+
|
|
147
|
+
```shell
|
|
148
|
+
canva <command-name>
|
|
149
|
+
```
|
|
150
|
+
|
|
54
151
|
### Flags
|
|
55
152
|
|
|
56
|
-
Top-level flags applicable
|
|
153
|
+
Top-level flags applicable to commands:
|
|
57
154
|
|
|
58
|
-
- `--help`:
|
|
155
|
+
- `--help`: Show help information about commands and flags.
|
|
59
156
|
- `--lite`: Enable a simplified CLI interface for enhanced accessibility.
|
|
60
|
-
- `--version`: Show the version number
|
|
157
|
+
- `--version`: Show the CLI version number.
|
|
61
158
|
|
|
62
159
|
### Commands
|
|
63
160
|
|
|
64
161
|
#### welcome
|
|
65
162
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
- **Usage**:
|
|
163
|
+
Show the welcome page and general information.
|
|
69
164
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
165
|
+
```shell
|
|
166
|
+
canva welcome
|
|
167
|
+
```
|
|
73
168
|
|
|
74
169
|
#### tip
|
|
75
170
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
- **Usage**:
|
|
171
|
+
Print a random development tip for working with the Apps SDK.
|
|
79
172
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
173
|
+
```shell
|
|
174
|
+
canva tip
|
|
175
|
+
```
|
|
83
176
|
|
|
84
|
-
- **Aliases**:
|
|
177
|
+
- **Aliases**:
|
|
178
|
+
- `tips`: Also prints a random development tip.
|
|
85
179
|
|
|
86
180
|
#### login
|
|
87
181
|
|
|
88
182
|
Log in to the Canva CLI.
|
|
89
183
|
|
|
90
|
-
|
|
184
|
+
```shell
|
|
185
|
+
canva login
|
|
186
|
+
```
|
|
91
187
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
188
|
+
#### logout
|
|
189
|
+
|
|
190
|
+
Log out of the Canva CLI, and delete the saved auth token:
|
|
191
|
+
|
|
192
|
+
```shell
|
|
193
|
+
canva logout
|
|
194
|
+
```
|
|
95
195
|
|
|
96
196
|
#### apps
|
|
97
197
|
|
|
98
198
|
Manage your Canva apps.
|
|
99
199
|
|
|
100
|
-
|
|
200
|
+
```shell
|
|
201
|
+
canva apps
|
|
202
|
+
```
|
|
101
203
|
|
|
102
|
-
|
|
103
|
-
canva apps
|
|
104
|
-
```
|
|
204
|
+
#### apps sub-commands
|
|
105
205
|
|
|
106
|
-
-
|
|
206
|
+
- `create "app-name"`: Create a new Canva app.
|
|
107
207
|
|
|
108
|
-
|
|
208
|
+
```shell
|
|
209
|
+
canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
|
|
210
|
+
```
|
|
109
211
|
|
|
110
|
-
|
|
212
|
+
- **Arguments**:
|
|
213
|
+
- `--name`: Sets the app's name. Provide the name you want for the app.
|
|
214
|
+
- **Flags**:
|
|
111
215
|
|
|
112
|
-
|
|
113
|
-
canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies
|
|
114
|
-
```
|
|
216
|
+
- `--template`: Specifies the starting template for the app.
|
|
115
217
|
|
|
116
|
-
|
|
117
|
-
- `[name]`: Sets the app's name. Provide the desired name of the app when using this command.
|
|
118
|
-
- **Flags**:
|
|
218
|
+
Available templates:
|
|
119
219
|
|
|
120
|
-
-
|
|
220
|
+
- `"hello_world"`: Basic starting point.
|
|
221
|
+
- `"dam"`: Digital asset management integration.
|
|
222
|
+
- `"gen_ai"`: Generative AI app creation.
|
|
121
223
|
|
|
122
|
-
|
|
224
|
+
- `--distribution`: Sets the app's distribution type.
|
|
123
225
|
|
|
124
|
-
|
|
125
|
-
- `"dam"`: Digital asset management integration.
|
|
126
|
-
- `"gen_ai"`: Generative AI app creation.
|
|
226
|
+
Available types:
|
|
127
227
|
|
|
128
|
-
-
|
|
228
|
+
- `"public"`: Available to all Canva users, subject to Canva review.
|
|
229
|
+
- `"private"`: Only available to your team, and requires team admin approval.
|
|
129
230
|
|
|
130
|
-
|
|
231
|
+
**Note**: You can't change the distribution setting after creating a new app with the `canva apps create` command.
|
|
131
232
|
|
|
132
|
-
|
|
133
|
-
- `"private"`: Only available to your team, requires team admin approval.
|
|
233
|
+
- `--git`: Initializes a Git repository in the project directory.
|
|
134
234
|
|
|
135
|
-
|
|
136
|
-
> This setting cannot be changed after the app is created.
|
|
235
|
+
- `--installDependencies`: Automatically installs necessary npm dependencies during the app creation process.
|
|
137
236
|
|
|
138
|
-
|
|
237
|
+
- `--offline`: Scaffold the app locally without also creating an app in the Developer Portal.
|
|
139
238
|
|
|
140
|
-
|
|
239
|
+
- `list`: List all Canva apps.
|
|
141
240
|
|
|
142
|
-
|
|
241
|
+
```shell
|
|
242
|
+
canva apps list
|
|
243
|
+
```
|
|
143
244
|
|
|
144
|
-
|
|
245
|
+
- `preview`: Preview your app.
|
|
145
246
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
247
|
+
```shell
|
|
248
|
+
canva apps preview
|
|
249
|
+
```
|
|
149
250
|
|
|
150
251
|
#### logout
|
|
151
252
|
|
|
152
|
-
Log out and revoke
|
|
253
|
+
Log out and revoke Canva CLI access.
|
|
153
254
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
canva logout
|
|
158
|
-
```
|
|
255
|
+
```shell
|
|
256
|
+
canva logout
|
|
257
|
+
```
|
|
159
258
|
|
|
160
259
|
## Next Steps
|
|
161
260
|
|
|
@@ -164,43 +263,20 @@ Log out and revoke access from the CLI.
|
|
|
164
263
|
|
|
165
264
|
## Limitations
|
|
166
265
|
|
|
167
|
-
|
|
266
|
+
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
267
|
|
|
169
|
-
##
|
|
268
|
+
## Updates
|
|
170
269
|
|
|
171
270
|
To update the CLI to the latest version, run:
|
|
172
271
|
|
|
173
|
-
```
|
|
174
|
-
npm update -g @canva/cli
|
|
272
|
+
```shell
|
|
273
|
+
npm update -g @canva/cli@latest
|
|
175
274
|
```
|
|
176
275
|
|
|
177
|
-
##
|
|
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
|
|
276
|
+
## Contributions
|
|
201
277
|
|
|
202
|
-
|
|
278
|
+
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
279
|
|
|
204
280
|
## License
|
|
205
281
|
|
|
206
|
-
Refer to the `LICENSE.md` file for
|
|
282
|
+
Refer to the `LICENSE.md` file for more information.
|